Manual changes saved

index.html

@@ -214,11 +214,99 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
           <a href="./contact-us.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">
           <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">
+          <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">
+            <button onclick="toggleMobileDropdown('solutions-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
+              <span>Solutions</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="solutions-dropdown" class="hidden pl-4">
+              <a href="./solutions.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Business Central Apps</a>
+            </div>
+          </div>
+
+          <!-- Services Dropdown -->
+          <div class="relative">
+            <button onclick="toggleMobileDropdown('services-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
+              <span>Services</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="services-dropdown" class="hidden pl-4">
+              <a href="./services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Services Overview</a>
+              <a href="./choosing-advisory-services-for-your-business.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Advisory Services</a>
+              <a href="./software-implementation-partner.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Implementation Services</a>
+              <a href="./managed-application-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Managed Application Services</a>
+              <a href="./managed-it-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Managed IT Services</a>
+              <a href="./compliance-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Compliance Services</a>
+              <a href="./cloud-services-for-microsoft-dynamics.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Cloud Services</a>
+              <a href="./marketing-solutions-strategic-growth.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Marketing Services</a>
+              <a href="./data-and-ai-transformation.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">AI and Analytics</a>
+            </div>
+          </div>
+
+          <!-- Industries Dropdown -->
+          <div class="relative">
+            <button onclick="toggleMobileDropdown('industries-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
+              <span>Industries</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="industries-dropdown" class="hidden pl-4">
+              <a href="./industries.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Industries Overview</a>
+              <a href="./microsoft-dynamics-365-business-central-for-distribution.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Distribution</a>
+              <a href="./ecommerce-development-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">E-Commerce</a>
+              <a href="./government-contractors.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Government Contractors</a>
+              <a href="./microsoft-dynamics-365-for-manufacturing.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Manufacturing</a>
+            </div>
+          </div>
+
+          <!-- Products Dropdown -->
+          <div class="relative">
+            <button onclick="toggleMobileDropdown('products-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
+              <span>Products</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="products-dropdown" class="hidden pl-4">
+              <a href="./products.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Products Overview</a>
+              <a href="./microsoft-dynamics-365.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Dynamics 365</a>
+              <a href="./microsoft-dynamics-365-business-central.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Business Central</a>
+              <a href="./power-platform.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Power Platform</a>
+              <a href="./microsoft-365.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Microsoft 365</a>
+              <a href="./microsoft-dynamics-365-commerce.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Dynamics Commerce</a>
+              <a href="./magento-commerce.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Magento Commerce</a>
+            </div>
+          </div>
+
+          <!-- Who We Are Dropdown -->
+          <div class="relative">
+            <button onclick="toggleMobileDropdown('about-dropdown')" class="w-full flex justify-between items-center px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">
+              <span>Who We Are</span>
+              <i data-feather="chevron-down" class="w-4 h-4"></i>
+            </button>
+            <div id="about-dropdown" class="hidden pl-4">
+              <a href="./who-we-are.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Overview</a>
+              <a href="./partner.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Partner</a>
+              <a href="./terms-services.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Terms</a>
+              <a href="./privacy.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Privacy Policy</a>
+              <a href="./protecting-our-clients.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Client Protection</a>
+              <a href="./blog/" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Blog</a>
+              <a href="./case-studies.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Case Studies</a>
+              <a href="./contact-us.html" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-[#8DC63F] hover:bg-gray-50">Contact VLC</a>
+            </div>
+          </div>
+
+          <a href="./contact-us.html" class="block w-full text-center bg-[#002060] hover:bg-[#001a50] text-white px-4 py-2 rounded-md text-base font-medium">Let's Connect</a>
+        </div>
+      </div>
     </div>
   </header>
 
@@ -324,7 +412,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
               <li><a href="./privacy.html" class="hover:text-white">Privacy Policy</a></li>
               <li><a href="./terms-services.html" class="hover:text-white">Terms &amp; Conditions</a></li>
               <li><a href="./protecting-our-clients.html" class="hover:text-white">Client Protection</a></li>
-              <li><a href="./faq.html" class="hover:text-white">FAQs</a></li>
+             
             </ul>
           </div>
         </div>
@@ -350,38 +438,68 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     </div>
   </footer>
 
-  <script>
-    // Init animations (after scripts loaded)
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.AOS) {
-        AOS.init({
-          duration: 800,
-          easing: 'ease-in-out',
-          once: true,
-          mirror: false,
-          offset: 120,
-          disable: window.innerWidth < 768
-        });
-      }
-      if (window.feather) {
-        feather.replace();
-      }
+  <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
+      });
+    }
 
-      // Mobile menu placeholder
-      const mobileBtn = document.getElementById('mobile-menu-button');
-      if (mobileBtn) {
-        mobileBtn.addEventListener('click', () => {
-          console.log('Mobile menu clicked');
-        });
-      }
-    });
+    // Replace Feather icons
+    if (window.feather) {
+      feather.replace();
+    }
 
-    // Refresh AOS on resize (guard if AOS present)
-    window.addEventListener('resize', function() {
-      if (window.AOS && AOS.refreshHard) {
-        AOS.refreshHard();
+    // Mobile menu toggle functionality
+    const mobileMenuButton = document.getElementById('mobile-menu-button');
+    const mobileMenu = document.getElementById('mobile-menu');
+
+    if (mobileMenuButton && mobileMenu) {
+      mobileMenuButton.addEventListener('click', () => {
+        // Toggle the mobile menu visibility
+        mobileMenu.classList.toggle('hidden');
+
+        // Change icon from menu to close (or vice versa)
+        const icon = mobileMenuButton.querySelector('i');
+        if (mobileMenu.classList.contains('hidden')) {
+          feather.icons.menu.replace(); // Show menu icon
+        } else {
+          feather.icons.x.replace(); // Show close (X) icon
+        }
+      });
+    }
+
+    // Function to toggle mobile dropdowns
+    window.toggleMobileDropdown = function(id) {
+      const dropdown = document.getElementById(id);
+      dropdown.classList.toggle('hidden');
+
+      // Update chevron icon
+      const button = dropdown.previousElementSibling;
+      const icon = button.querySelector('i');
+      if (dropdown.classList.contains('hidden')) {
+        feather.icons['chevron-down'].replace(); // Show down arrow
+      } else {
+        feather.icons['chevron-up'].replace(); // Show up arrow
       }
-    });
-  </script>
+    };
+
+  });
+
+  // Refresh AOS on window resize (guard if AOS is present)
+  window.addEventListener('resize', function() {
+    if (window.AOS && AOS.refreshHard) {
+      AOS.refreshHard();
+    }
+  });
+</script>
 </body>
 </html>