Working navbar 99%

src/components/navbar.tsx

@@ -29,13 +29,12 @@ export default function Navbar() {
   return () => window.removeEventListener('scroll', handleScroll);
 }, []); // Empty dependency array
 
-const navClasses =
-navBarStyle === 'scrolledUp'
-  ? 'bg-white text-black rounded-b-lg shadow-lg fixed'
-  : 'bg-transparent text-white';
+const navClasses = `${styles.navBar} ${
+  navBarStyle === 'scrolledUp' ? styles.navBarScrolledUp : styles.navBarInitial
+}`;
 
   return (
-    <nav       className={`navbar fixed top-6 left-6 right-6 transition-all duration-300 ${navClasses} z-50`}>
+    <nav className={navClasses}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           {/* Left side */}