Mobile menu is not working correct it

index.html

@@ -256,10 +256,9 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
           <i data-feather="menu"></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">
-        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+      <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 transform -translate-y-2 opacity-0">
+<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>
           
           <!-- Solutions Dropdown -->
@@ -671,28 +670,40 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     if (window.feather) {
       feather.replace();
     }
-
     // --- Mobile menu toggle ---
     const mobileMenuButton = document.getElementById('mobile-menu-button');
     const mobileMenu = document.getElementById('mobile-menu');
 
     if (mobileMenuButton && mobileMenu) {
       mobileMenuButton.addEventListener('click', () => {
-        mobileMenu.classList.toggle('hidden');
+        const isHidden = mobileMenu.classList.contains('hidden');
+        
+        if (isHidden) {
+          mobileMenu.classList.remove('hidden');
+          setTimeout(() => {
+            mobileMenu.classList.remove('-translate-y-2');
+            mobileMenu.classList.remove('opacity-0');
+          }, 10);
+        } else {
+          mobileMenu.classList.add('-translate-y-2');
+          mobileMenu.classList.add('opacity-0');
+          setTimeout(() => {
+            mobileMenu.classList.add('hidden');
+          }, 300);
+        }
 
         // Toggle icon between menu and x
         const icon = mobileMenuButton.querySelector('[data-feather]');
         if (icon && window.feather) {
           icon.setAttribute(
             'data-feather',
-            mobileMenu.classList.contains('hidden') ? 'menu' : 'x'
+            isHidden ? 'x' : 'menu'
           );
           feather.replace();
         }
       });
     }
-
-    // --- Mobile dropdown toggles (exposed globally) ---
+// --- Mobile dropdown toggles (exposed globally) ---
     window.toggleMobileDropdown = function (id) {
       const dropdown = document.getElementById(id);
       if (!dropdown) return;

style.css

@@ -1,8 +1,18 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+
+/* Mobile menu animations */
+#mobile-menu {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+#mobile-menu:not(.hidden) {
+  transform: translateY(0);
+  opacity: 1;
 }
 
+body {
+  padding: 2rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
 h1 {
 	font-size: 16px;
 	margin-top: 0;