Add sparkle cursor effect to careers page

carrers.html

@@ -478,6 +478,54 @@ <h3>Interview Process</h3>
         background: #1b5e20;
         transform: translateY(-3px);
       }
+
+      /* Sparkle Cursor Effect */
+
+#sparkle-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.sparkle {
+  position: fixed;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  pointer-events: none;
+  background: radial-gradient(circle, #22c55e 0%, transparent 70%);
+  animation: sparkleFade 1.8s ease-out forwards;
+
+  box-shadow:
+    0 0 8px #22c55e,
+    0 0 18px #22c55e,
+    0 0 28px rgba(34, 197, 94, 0.8);
+
+  z-index: 9999;
+}
+
+@keyframes sparkleFade {
+  0% {
+    transform: scale(0.4);
+    opacity: 0;
+  }
+
+  20% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  70% {
+    opacity: 0.9;
+  }
+
+  100% {
+    transform: scale(1.8);
+    opacity: 0;
+  }
+}
+
         .site-footer {
             margin-top: auto;
             padding: 55px 30px 20px;
@@ -873,8 +921,34 @@ <h4>Tools</h4>
         <i class="fa-solid fa-arrow-up"></i>
     </button>
 
+    <div id="sparkle-container"></div>
+
     <!-- Optional: Add theme toggle script if needed -->
     <script>
+
+        const sparkleContainer = document.getElementById("sparkle-container");
+
+        let lastSparkle = 0;
+
+        document.addEventListener("mousemove", (e) => {
+        const now = Date.now();
+
+        if (now - lastSparkle < 40) return;
+
+        lastSparkle = now;
+
+        const sparkle = document.createElement("div");
+        sparkle.classList.add("sparkle");
+
+        sparkle.style.left = `${e.clientX}px`;
+        sparkle.style.top = `${e.clientY}px`;
+
+        sparkleContainer.appendChild(sparkle);
+
+        setTimeout(() => {
+            sparkle.remove();
+        }, 1000);
+        });
         // Theme toggle functionality
         document.addEventListener('DOMContentLoaded', function () {
             // Check for saved theme or default to light