Enhance navbar design and functionality in index.html, styles.css, and script.js. Implement a glass effect for the navbar, add animated hover effects for navigation links, and introduce a scroll effect that changes the navbar's appearance on scroll. Update styles for improved responsiveness and visual appeal.

js/script.js

@@ -209,4 +209,14 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         });
     }
+
+    // Navbar scroll effect
+    const navbar = document.querySelector('.navbar');
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 50) {
+            navbar.classList.add('scrolled');
+        } else {
+            navbar.classList.remove('scrolled');
+        }
+    });
 });