can please fix the styling in this for header

components/navbar.js

@@ -5,43 +5,60 @@ class CustomNavbar extends HTMLElement {
             <style>
                 :host {
                     display: block;
-                    z-index: 50;
+                    z-index: 1000;
                     --navbar-height: 80px;
+                    --nav-bg: rgba(15, 23, 42, 0.98);
+                    --nav-border: rgba(45, 55, 72, 0.5);
+                    --text-primary: #e2e8f0;
+                    --text-secondary: #94a3b8;
+                    --accent-gradient: linear-gradient(to right, #8b5cf6, #3b82f6);
                 }
                 nav {
-                    backdrop-filter: blur(10px);
-                    background: rgba(15, 23, 42, 0.9);
-                    border-bottom: 1px solid rgba(45, 55, 72, 0.3);
+                    backdrop-filter: blur(16px);
+                    -webkit-backdrop-filter: blur(16px);
+                    background: var(--nav-bg);
+                    border-bottom: 1px solid var(--nav-border);
+                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                 }
                 .nav-link {
                     position: relative;
-                    transition: all 0.3s ease;
+                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    color: var(--text-secondary);
+                    font-weight: 500;
+                    letter-spacing: 0.025em;
                 }
                 .nav-link::after {
                     content: '';
                     position: absolute;
-                    bottom: 0;
+                    bottom: -4px;
                     left: 50%;
                     transform: translateX(-50%);
                     width: 0;
-                    height: 2px;
-                    background: linear-gradient(to right, #8b5cf6, #3b82f6);
-                    transition: width 0.3s ease;
+                    height: 3px;
+                    background: var(--accent-gradient);
+                    border-radius: 2px;
+                    transition: width 0.3s ease, opacity 0.3s ease;
+                    opacity: 0;
                 }
                 .nav-link:hover::after,
                 .nav-link.active::after {
-                    width: 60%;
-                }
-                .nav-link:hover {
-                    color: white;
+                    width: 80%;
+                    opacity: 1;
                 }
+                .nav-link:hover,
                 .nav-link.active {
-                    color: white;
+                    color: var(--text-primary);
                 }
                 .mobile-menu {
-                    transition: all 0.3s ease;
+                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    animation: fadeIn 0.2s ease-out;
+                }
+                
+                @keyframes fadeIn {
+                    from { opacity: 0; transform: translateY(-10px); }
+                    to { opacity: 1; transform: translateY(0); }
                 }
-            </style>
+</style>
             <nav class="sticky top-0 z-50 w-full">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div class="flex items-center justify-between h-[var(--navbar-height)]">
@@ -80,9 +97,9 @@ class CustomNavbar extends HTMLElement {
                         <!-- Auth Buttons -->
                         <div class="hidden md:block">
                             <div class="ml-4 flex items-center space-x-4">
-                                <a href="/login" class="text-gray-400 hover:text-white px-3 py-2 text-sm font-medium">Sign In</a>
-                        <darkmode-toggle></darkmode-toggle>
-                        <a href="/register" class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300">Get Started</a>
+                        <a href="/login" class="text-gray-400 hover:text-white px-3 py-2 text-sm font-medium transition-colors duration-300">Sign In</a>
+<darkmode-toggle></darkmode-toggle>
+                        <a href="/register" class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all duration-300 shadow-md hover:shadow-lg hover:scale-[1.03] transform transition-transform">Get Started</a>
 </div>
                         </div>
                         
@@ -104,15 +121,15 @@ class CustomNavbar extends HTMLElement {
                 <div class="md:hidden hidden absolute top-[var(--navbar-height)] left-0 right-0 bg-gray-900/95 backdrop-blur-md" id="mobile-menu">
                     <div class="px-4 py-6 space-y-6">
                         <a href="/" class="block px-3 py-3 rounded-lg text-lg font-medium bg-gradient-to-r from-purple-900/30 to-blue-900/30">Home</a>
-                        <a href="/plan" class="block px-3 py-3 rounded-lg text-lg font-medium hover:bg-gray-800">Plans</a>
-                        <a href="/contact" class="block px-3 py-3 rounded-lg text-lg font-medium hover:bg-gray-800">Contact</a>
-                        <a href="/about" class="block px-3 py-3 rounded-lg text-lg font-medium hover:bg-gray-800">About Us</a>
-                    </div>
+                        <a href="/plan" class="block px-3 py-3 rounded-lg text-lg font-medium transition-colors duration-300 hover:bg-gray-800 hover:text-white">Plans</a>
+                        <a href="/contact" class="block px-3 py-3 rounded-lg text-lg font-medium transition-colors duration-300 hover:bg-gray-800 hover:text-white">Contact</a>
+                        <a href="/about" class="block px-3 py-3 rounded-lg text-lg font-medium transition-colors duration-300 hover:bg-gray-800 hover:text-white">About Us</a>
+</div>
                     <div class="px-4 py-6 border-t border-gray-800">
                         <div class="grid gap-4">
                             <a href="/login" class="w-full bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg text-center font-medium">Sign In</a>
-                            <a href="/register" class="w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-6 py-3 rounded-lg text-center font-medium shadow-lg hover:shadow-xl">Register</a>
-                        </div>
+                            <a href="/register" class="w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-6 py-3 rounded-lg text-center font-medium shadow-lg hover:shadow-xl transform transition-transform hover:scale-[1.02]">Register</a>
+</div>
                     </div>
                 </div>
 </nav>