Improve footer link and social icon hover effects

Author: parulpaliwal01

web-app/css/styles.css

@@ -2143,15 +2143,65 @@ body {
     transition: var(--transition);
     border: 1px solid rgba(34, 197, 94, 0.15);
     text-decoration: none;
+    transition: all 0.35s ease;
 }
 
 .footer-social-icons a:hover {
     background: var(--accent-color);
     color: var(--on-accent);
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
+     transform: translateY(-5px) scale(1.08);
 }
+.footer-social-icons .github:hover i {
+    filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
+}
+
+.footer-social-icons .github:hover {
+    background: #a09999;
+    color: #181717;
+
+    box-shadow:
+        0 0 8px rgba(255,255,255,0.35),
+        0 0 18px rgba(255,255,255,0.22),
+        0 0 32px rgba(255,255,255,0.12);
+
+    transform: translateY(-5px) scale(1.08);
+}
+
+.footer-social-icons .twitter:hover {
+    background: #1DA1F2;
+    color: white;
+    box-shadow:
+        0 0 10px rgba(29,161,242,0.8),
+        0 0 25px rgba(29,161,242,0.5),
+        0 0 45px rgba(29,161,242,0.25);
+} 
+
+.footer-social-icons .linkedin:hover {
+    background: #0A66C2;
+    color: white;
+    box-shadow:
+        0 0 10px rgba(10,102,194,0.8),
+        0 0 25px rgba(10,102,194,0.5),
+        0 0 45px rgba(10,102,194,0.25);
+}
+
+.footer-social-icons .instagram:hover {
+    background: linear-gradient(
+        135deg,
+        #f58529,
+        #dd2a7b,
+        #8134af,
+        #515bd4
+    );
+    color: white;
 
+    box-shadow:
+        0 0 12px rgba(221,42,123,0.8),
+        0 0 30px rgba(129,52,175,0.5),
+        0 0 55px rgba(81,91,212,0.25);
+}
 .footer-links h3,
 .footer-newsletter h3 {
     font-size: 1.2rem;
@@ -2183,19 +2233,40 @@ body {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+      transition: all 0.3s ease;
+       position: relative;
+    
+}
+.footer-links a::before {
+    content: "";
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: #c084fc; /* violet */
+    position: absolute;
+    left: -12px;
+    opacity: 0;
+    transition: all 0.3s ease;
+}
+
+.footer-links a:hover {
+    transform: translateX(6px);
+     color: #c084fc;
 }
 
+.footer-links a:hover::before {
+    opacity: 1;
+    left: -8px;
+      background: #c084fc;
+}
 .footer-links a i {
     font-size: 0.9rem;
     color: var(--accent-color);
     opacity: 0.7;
     transition: var(--transition);
 }
 
-.footer-links a:hover {
-    color: var(--accent-color);
-    transform: translateX(5px);
-}
+
 
 .newsletter-form { display: flex; position: relative; }
 

web-app/index.html

@@ -1387,11 +1387,11 @@ <h2>🎮 Python Mini Projects</h2>
                     <p>Learn Python the Fun Way! Interactive games, math visualizations, and utilities built directly in
                         your browser.</p>
                     <div class="footer-social-icons">
-                        <a href="https://github.com/steam-bell-92/python-mini-project" target="_blank"
+                        <a href="https://github.com/steam-bell-92/python-mini-project" target="_blank" class="github"
                             rel="noopener noreferrer" aria-label="GitHub"><i class="fab fa-github"></i></a>
-                        <a href="https://x.com/AnujKulkarni040" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
-                        <a href="https://www.linkedin.com/in/anuj-chandrakant-kulkarni" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
-                        <a href="https://www.instagram.com/obscura.nuj" aria-label="YouTube"><i class="fab fa-instagram"></i></a>
+                        <a href="https://x.com/AnujKulkarni040"  class="twitter" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+                        <a href="https://www.linkedin.com/in/anuj-chandrakant-kulkarni" class="linkedin"  aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
+                        <a href="https://www.instagram.com/obscura.nuj"  class="instagram" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                     </div>
                 </div>
                 <div class="footer-links">