Adjust the mobile also

index.html

@@ -214,11 +214,10 @@
 
           <a href="https://www.vlcsolutions.com/contactus.html" class="bg-[#002060] hover:bg-[#001a50] text-white px-4 py-2 rounded-md text-sm font-medium">Let’s Connect</a>
         </nav>
-
-        <button id="mobile-menu-button" class="md:hidden inline-flex items-center p-2 rounded-md text-gray-500 hover:bg-gray-100" aria-label="Open menu">
+        <button id="mobile-menu-button" class="md:hidden inline-flex items-center p-2 rounded-md text-gray-500 hover:bg-gray-100" aria-label="Open menu" aria-expanded="false">
           <i data-feather="menu" aria-hidden="true"></i>
         </button>
-      </div>
+</div>
     </div>
   </header>
   <!-- Hero / Banner (right-aligned text) -->
@@ -641,15 +640,43 @@ Request Demo
       if (window.feather) {
         feather.replace();
       }
-
-      // Mobile menu placeholder
+      // Mobile menu functionality
       const mobileBtn = document.getElementById('mobile-menu-button');
+      const header = document.querySelector('header');
+      
       if (mobileBtn) {
         mobileBtn.addEventListener('click', () => {
-          console.log('Mobile menu clicked');
+          const expanded = mobileBtn.getAttribute('aria-expanded') === 'true';
+          mobileBtn.setAttribute('aria-expanded', !expanded);
+          
+          if (!expanded) {
+            // Create mobile menu
+            const mobileMenu = document.createElement('div');
+            mobileMenu.id = 'mobile-menu';
+            mobileMenu.className = 'md:hidden absolute top-16 left-0 right-0 bg-white shadow-lg z-40';
+            mobileMenu.innerHTML = `
+              <div class="px-4 py-3 space-y-2 border-t border-gray-200">
+                <a href="https://www.vlcsolutions.com/who-we-serve.html" class="block py-2 px-3 text-gray-700 hover:text-[#8DC63F]">Who We Serve</a>
+                <a href="https://www.vlcsolutions.com/solutions.html" class="block py-2 px-3 text-gray-700 hover:text-[#8DC63F]">Solutions</a>
+                <a href="https://www.vlcsolutions.com/services.html" class="block py-2 px-3 text-gray-700 hover:text-[#8DC63F]">Services</a>
+                <a href="https://www.vlcsolutions.com/industries.html" class="block py-2 px-3 text-gray-700 hover:text-[#8DC63F]">Industries</a>
+                <a href="https://www.vlcsolutions.com/products.html" class="block py-2 px-3 text-gray-700 hover:text-[#8DC63F]">Products</a>
+                <a href="https://www.vlcsolutions.com/who-we-are.html" class="block py-2 px-3 text-gray-700 hover:text-[#8DC63F]">Who We Are</a>
+                <a href="https://www.vlcsolutions.com/contactus.html" class="block py-2 px-3 bg-[#002060] text-white rounded-md text-center">Let's Connect</a>
+              </div>
+            `;
+            header.appendChild(mobileMenu);
+            feather.replace();
+          } else {
+            // Remove mobile menu
+            const mobileMenu = document.getElementById('mobile-menu');
+            if (mobileMenu) {
+              mobileMenu.remove();
+            }
+          }
         });
       }
-    });
+});
 
     // Refresh AOS on resize (guard if AOS present)
     window.addEventListener('resize', function() {

style.css

@@ -1,8 +1,35 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
 
+/* Mobile menu styles */
+@media (max-width: 767px) {
+  body {
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  }
+  
+  #mobile-menu {
+    max-height: calc(100vh - 64px);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  #mobile-menu a {
+    display: block;
+    padding: 12px 16px;
+    font-size: 16px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+  
+  #mobile-menu a:last-child {
+    margin-top: 16px;
+    border-bottom: none;
+  }
+  
+  header {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+  }
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;