Mobile Menu section : it's not working,correct it

index.html

@@ -211,8 +211,8 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
         </button>
       </div>
   <!-- Mobile Menu -->
-  <div id="mobile-menu" class="md:hidden hidden absolute top-16 left-0 right-0 bg-white shadow-lg z-50 transition-all duration-300 ease-in-out">
-    <div class="px-4 py-2 space-y-1">
+  <div id="mobile-menu" class="md:hidden hidden absolute top-16 left-0 right-0 bg-white shadow-lg z-50 transition-all duration-300 ease-in-out overflow-hidden">
+    <div class="px-4 py-2 space-y-1" id="mobile-menu-content">
 <a href="./who-we-serve.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Who We Serve</a>
           
           <!-- Solutions Dropdown -->
@@ -1365,29 +1365,50 @@ alt="Dynamics 365 Logistics Dashboard"
   document.addEventListener('DOMContentLoaded', function() {
     const mobileBtn = document.getElementById('mobile-menu-button');
     const mobileMenu = document.getElementById('mobile-menu');
+    const mobileContent = document.getElementById('mobile-menu-content');
     
-    if (mobileBtn && mobileMenu) {
+    if (mobileBtn && mobileMenu && mobileContent) {
       // Toggle menu
       mobileBtn.addEventListener('click', function() {
         const isExpanded = mobileMenu.classList.toggle('hidden');
         mobileBtn.setAttribute('aria-expanded', !isExpanded);
         
-        // Update icon
+        // Update icon and manage overflow
         const icon = mobileBtn.querySelector('i');
         icon.setAttribute('data-feather', isExpanded ? 'menu' : 'x');
+        
+        if (!isExpanded) {
+          mobileMenu.style.maxHeight = mobileContent.scrollHeight + 'px';
+        } else {
+          mobileMenu.style.maxHeight = '0';
+        }
+        
         feather.replace();
       });
 
       // Close menu when clicking on a link
-      mobileMenu.querySelectorAll('a').forEach(link => {
+      mobileContent.querySelectorAll('a').forEach(link => {
         link.addEventListener('click', () => {
           mobileMenu.classList.add('hidden');
+          mobileMenu.style.maxHeight = '0';
           mobileBtn.setAttribute('aria-expanded', 'false');
           const icon = mobileBtn.querySelector('i');
           icon.setAttribute('data-feather', 'menu');
           feather.replace();
         });
       });
+
+      // Handle window resize
+      window.addEventListener('resize', function() {
+        if (window.innerWidth > 768) {
+          mobileMenu.classList.add('hidden');
+          mobileMenu.style.maxHeight = '0';
+          mobileBtn.setAttribute('aria-expanded', 'false');
+          const icon = mobileBtn.querySelector('i');
+          icon.setAttribute('data-feather', 'menu');
+          feather.replace();
+        }
+      });
     }
 
     // Toggle dropdowns in mobile menu
@@ -1398,6 +1419,12 @@ alt="Dynamics 365 Logistics Dashboard"
       
       dropdown.classList.toggle('hidden');
       icon.setAttribute('data-feather', dropdown.classList.contains('hidden') ? 'chevron-down' : 'chevron-up');
+      
+      // Update mobile menu height
+      if (!mobileMenu.classList.contains('hidden')) {
+        mobileMenu.style.maxHeight = mobileContent.scrollHeight + 'px';
+      }
+      
       feather.replace();
     };
 
@@ -1409,7 +1436,6 @@ alt="Dynamics 365 Logistics Dashboard"
         once: true,
         mirror: false
       });
-      window.addEventListener('resize', () => AOS.refreshHard());
     }
     
     // Replace icons

style.css

@@ -23,15 +23,13 @@ p {
 }
 /* Mobile menu styles */
 #mobile-menu {
-  transition: all 0.3s ease;
+  transition: max-height 0.3s ease-out;
   max-height: 0;
   overflow: hidden;
-  opacity: 0;
 }
 
 #mobile-menu:not(.hidden) {
-  max-height: 1000px;
-  opacity: 1;
+  max-height: 100vh;
   overflow-y: auto;
 }
 
@@ -50,6 +48,11 @@ p {
 #mobile-menu-button {
   transition: all 0.3s ease;
 }
+
+/* Mobile menu content */
+#mobile-menu-content {
+  padding: 1rem;
+}
 .card p:last-child {
 	margin-bottom: 0;
 }