not working mobile menu, correct the mobile menu

index.html

@@ -210,11 +210,10 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
           <i data-feather="menu" class="w-6 h-6"></i>
         </button>
       </div>
-
-      <!-- Mobile Menu -->
-      <div id="mobile-menu" class="md:hidden hidden absolute top-full left-0 right-0 bg-white shadow-lg z-50 transition-all duration-300 ease-in-out">
-<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-          <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>
+  <!-- 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">
+<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 -->
           <div class="relative">
@@ -1361,54 +1360,37 @@ alt="Dynamics 365 Logistics Dashboard"
       </div>
     </div>
   </footer>
-<script> 
-  // Init animations and handle mobile menu functionality after scripts loaded
-  document.addEventListener('DOMContentLoaded', () => {
-    // Initialize AOS (Animation On Scroll)
-    if (window.AOS) {
-      AOS.init({
-        duration: 800,
-        easing: 'ease-in-out',
-        once: true,
-        mirror: false,
-        offset: 120,
-        disable: window.innerWidth < 768
-      });
-    }
-
-    // Replace Feather icons
-    if (window.feather) {
-      feather.replace();
-    }
-    // Mobile menu toggle functionality
-    const mobileMenuButton = document.getElementById('mobile-menu-button');
+<script>
+  // Mobile menu functionality
+  document.addEventListener('DOMContentLoaded', function() {
+    const mobileBtn = document.getElementById('mobile-menu-button');
     const mobileMenu = document.getElementById('mobile-menu');
-
-    if (mobileMenuButton && mobileMenu) {
-      mobileMenuButton.addEventListener('click', () => {
-        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
-        mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
-        mobileMenu.classList.toggle('hidden');
+    
+    if (mobileBtn && mobileMenu) {
+      // Toggle menu
+      mobileBtn.addEventListener('click', function() {
+        const isExpanded = mobileMenu.classList.toggle('hidden');
+        mobileBtn.setAttribute('aria-expanded', !isExpanded);
         
         // Update icon
-        const icon = mobileMenuButton.querySelector('i');
+        const icon = mobileBtn.querySelector('i');
         icon.setAttribute('data-feather', isExpanded ? 'menu' : 'x');
         feather.replace();
       });
 
-      // Close menu when clicking outside or on a link
-      document.addEventListener('click', (e) => {
-        if (!mobileMenu.contains(e.target) && e.target !== mobileMenuButton) {
+      // Close menu when clicking on a link
+      mobileMenu.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => {
           mobileMenu.classList.add('hidden');
-          mobileMenuButton.setAttribute('aria-expanded', 'false');
-          const icon = mobileMenuButton.querySelector('i');
+          mobileBtn.setAttribute('aria-expanded', 'false');
+          const icon = mobileBtn.querySelector('i');
           icon.setAttribute('data-feather', 'menu');
           feather.replace();
-        }
+        });
       });
     }
 
-    // Function to toggle mobile dropdowns
+    // Toggle dropdowns in mobile menu
     window.toggleMobileDropdown = function(id) {
       const dropdown = document.getElementById(id);
       const button = dropdown.previousElementSibling;
@@ -1418,13 +1400,20 @@ alt="Dynamics 365 Logistics Dashboard"
       icon.setAttribute('data-feather', dropdown.classList.contains('hidden') ? 'chevron-down' : 'chevron-up');
       feather.replace();
     };
-});
 
-  // Refresh AOS on window resize (guard if AOS is present)
-  window.addEventListener('resize', function() {
-    if (window.AOS && AOS.refreshHard) {
-      AOS.refreshHard();
+    // Initialize AOS if present
+    if (window.AOS) {
+      AOS.init({
+        duration: 800,
+        easing: 'ease-in-out',
+        once: true,
+        mirror: false
+      });
+      window.addEventListener('resize', () => AOS.refreshHard());
     }
+    
+    // Replace icons
+    if (window.feather) feather.replace();
   });
 </script>
 </body>

style.css

@@ -21,18 +21,34 @@ p {
 	border: 1px solid lightgray;
 	border-radius: 16px;
 }
-
-/* Mobile menu transitions */
+/* Mobile menu styles */
 #mobile-menu {
-  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  max-height: 0;
+  overflow: hidden;
   opacity: 0;
-  visibility: hidden;
 }
 
 #mobile-menu:not(.hidden) {
-  transform: translateY(0);
+  max-height: 1000px;
   opacity: 1;
-  visibility: visible;
+  overflow-y: auto;
+}
+
+/* Dropdown styles */
+#mobile-menu [id$="-dropdown"] {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+#mobile-menu [id$="-dropdown"]:not(.hidden) {
+  max-height: 1000px;
+}
+
+/* Menu button styles */
+#mobile-menu-button {
+  transition: all 0.3s ease;
 }
 .card p:last-child {
 	margin-bottom: 0;