<!-- Navbar -->

<nav class="fixed top-0 left-0 w-full bg-gradient-to-r from-[#0a0a0f] via-[#101020] to-[#0a0a0f] bg-opacity-90 backdrop-blur-md border-b border-primary/30 z-50">
<div class="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">

<!-- Logo / Title -->
<a href="#" class="flex items-center space-x-2 text-white font-bold text-2xl tracking-wide hover:text-primary transition">
<span class="text-primary">⚡</span>
<span>MultimediaOne</span>
</a>

<!-- Menu Links -->
<div class="hidden md:flex space-x-8 text-gray-300 font-medium">
<a href="#home" class="hover:text-primary transition">Home</a>
<a href="#about" class="hover:text-primary transition">About</a>
<a href="#services" class="hover:text-primary transition">Services</a>
<a href="#portfolio" class="hover:text-primary transition">Portfolio</a>
<a href="#ai" class="hover:text-primary transition">AI</a>
<a href="#contact" class="hover:text-primary transition">Contact</a>
</div>

<!-- CTA Button -->
<a href="#contact" class="hidden md:inline-block bg-primary/80 hover:bg-primary text-white font-semibold px-5 py-2 rounded-full shadow-md transition">
Let’s Talk
</a>

<!-- Mobile Menu Button -->
<button class="md:hidden text-white text-2xl focus:outline-none" id="menu-toggle">
☰
</button>
</div>

<!-- Mobile Dropdown -->
<div id="mobile-menu" class="hidden md:hidden flex flex-col bg-[#0a0a0f] border-t border-primary/20 py-3 px-6 space-y-3">
<a href="#home" class="hover:text-primary transition">Home</a>
<a href="#about" class="hover:text-primary transition">About</a>
<a href="#services" class="hover:text-primary transition">Services</a>
<a href="#portfolio" class="hover:text-primary transition">Portfolio</a>
<a href="#ai" class="hover:text-primary transition">AI</a>
<a href="#contact" class="hover:text-primary transition">Contact</a>
</div>
</nav>

<script>
// Mobile menu toggle
document.getElementById('menu-toggle').addEventListene

components/navbar.js

@@ -15,8 +15,8 @@ class CustomNavbar extends HTMLElement {
                     background-opacity: 0.9;
                     backdrop-filter: blur(10px);
                     border-bottom: 1px solid rgba(124, 58, 237, 0.3);
+                    width: 100%;
                 }
-                
                 .container {
                     max-width: 1280px;
                     margin: 0 auto;
@@ -25,7 +25,6 @@ class CustomNavbar extends HTMLElement {
                     justify-content: space-between;
                     align-items: center;
                 }
-                
                 .logo {
                     display: flex;
                     align-items: center;
@@ -34,16 +33,15 @@ class CustomNavbar extends HTMLElement {
                     font-size: 1.5rem;
                     color: white;
                     transition: color 0.3s ease;
+                    text-decoration: none;
                 }
-                
-                .logo:hover {
+.logo:hover {
                     color: #7e22ce;
                 }
                 
                 .logo-emoji {
                     color: #7e22ce;
                 }
-                
                 .nav-links {
                     display: none;
                     gap: 2rem;
@@ -52,13 +50,15 @@ class CustomNavbar extends HTMLElement {
                 }
                 
                 .nav-links a {
+                    text-decoration: none;
+                }
+.nav-links a {
                     transition: color 0.3s ease;
                 }
                 
                 .nav-links a:hover {
                     color: #7e22ce;
                 }
-                
                 .cta-button {
                     display: none;
                     background: rgba(124, 58, 237, 0.8);
@@ -68,9 +68,9 @@ class CustomNavbar extends HTMLElement {
                     border-radius: 9999px;
                     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                     transition: all 0.3s ease;
+                    text-decoration: none;
                 }
-                
-                .cta-button:hover {
+.cta-button:hover {
                     background: #7e22ce;
                 }
                 
@@ -82,7 +82,6 @@ class CustomNavbar extends HTMLElement {
                     border: none;
                     cursor: pointer;
                 }
-                
                 .mobile-menu {
                     display: none;
                     flex-direction: column;
@@ -93,6 +92,9 @@ class CustomNavbar extends HTMLElement {
                 }
                 
                 .mobile-menu a {
+                    text-decoration: none;
+                }
+.mobile-menu a {
                     color: rgb(209, 213, 219);
                     transition: color 0.3s ease;
                 }