<!-- START: Quartix Mega Menu --> 
 <div id="quartix-mega-menu-widget"> 
 <style> 
 /* Base styling */ 
 #quartix-mega-menu-widget { 
 --quartix-black: #000000; 
 --quartix-white: #ffffff; 
 --quartix-light-gray: #f7f7f7; 
 --quartix-mid-gray: #e5e5e5; 
 --quartix-text: #222222; 
 --quartix-text-light: #666666; 
 --quartix-green: #13ab5b; 
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
 position: relative; 
 box-sizing: border-box; 
 width: 100%; 
 z-index: 9996; 
 } 
 #quartix-mega-menu-widget * { 
 box-sizing: border-box; 
 margin: 0; 
 padding: 0; 
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; 
 } 
 /* Main navigation container */ 
 #quartix-mega-menu-widget .nav-container { 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 position: relative; 
 padding: 0; 
 } 
 /* Navigation links */ 
 #quartix-mega-menu-widget .nav-links { 
 display: flex; 
 list-style: none; 
 justify-content: center; 
 align-items: center; 
 gap: 40px; 
 position: relative; /* Added for proper dropdown context */ 
 } 
 #quartix-mega-menu-widget .nav-item { 
 position: relative; /* Critical for dropdown positioning */ 
 } 
 #quartix-mega-menu-widget .nav-link { 
 color: var(--quartix-black); 
 font-size: 18px; 
 text-decoration: none; 
 padding: 25px 0; 
 display: block; 
 font-weight: 500 !important; 
 transition: color 0.3s ease; 
 position: relative; 
 } 
 #quartix-mega-menu-widget .nav-link:hover { 
 color: var(--quartix-green); 
 } 
 /* Login button styling */ 
 #quartix-mega-menu-widget .login-link { 
 color: var(--quartix-black); 
 text-decoration: none; 
 transition: color 0.3s ease; 
 } 
 #quartix-mega-menu-widget .login-link:hover { 
 color: var(--quartix-green); 
 } 
 /* Dropdown styling - Fixed positioning */ 
 #quartix-mega-menu-widget .dropdown { 
 position: fixed; /* Changed to fixed for more reliable positioning */ 
 background-color: var(--quartix-white); 
 border-radius: 8px; 
 opacity: 0; 
 visibility: hidden; 
 transition: opacity 0.3s ease, visibility 0.3s ease; 
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); 
 z-index: 1001; 
 overflow: hidden; 
 padding: 20px; 
 pointer-events: none; /* Prevent interaction when hidden */ 
 transform: none; /* No transform by default */ 
 } 
 /* Dropdown animation on hover */ 
 #quartix-mega-menu-widget .nav-item:hover .dropdown { 
 opacity: 1; 
 visibility: visible; 
 pointer-events: auto; /* Enable interaction when visible */ 
 } 
 /* Sectors dropdown styling */ 
 #quartix-mega-menu-widget .dropdown-sectors { 
 width: 1100px; 
 display: grid; 
 grid-template-columns: repeat(3, 1fr) 1.5fr; 
 gap: 25px; 
 } 
 #quartix-mega-menu-widget .sector-column { 
 display: flex; 
 flex-direction: column; 
 gap: 15px; 
 } 
 #quartix-mega-menu-widget .sector-item { 
 padding: 0; 
 } 
 #quartix-mega-menu-widget .sector-link { 
 display: flex; 
 flex-direction: column; 
 text-decoration: none; 
 transition: all 0.3s ease; 
 padding: 15px; 
 border-radius: 6px; 
 } 
 #quartix-mega-menu-widget .sector-link:hover { 
 background-color: var(--quartix-light-gray); 
 } 
 #quartix-mega-menu-widget .sector-title { 
 font-size: 16px !important; 
 font-weight: 600 !important; 
 color: var(--quartix-black) !important; 
 margin-bottom: 8px !important; 
 } 
 #quartix-mega-menu-widget .sector-desc { 
 font-size: 14px !important; 
 color: var(--quartix-text-light) !important; 
 line-height: 1.5; 
 } 
 #quartix-mega-menu-widget .sector-image-link { 
 height: 100%; 
 display: block; 
 position: relative; 
 border-radius: 6px; 
 overflow: hidden; 
 text-decoration: none; 
 } 
 #quartix-mega-menu-widget .sector-image { 
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
 } 
 #quartix-mega-menu-widget .sector-image-link::after { 
 content: ""; 
 position: absolute; 
 top: 0; 
 left: 0; 
 right: 0; 
 bottom: 0; 
 background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%); 
 z-index: 1; 
 } 
 #quartix-mega-menu-widget .sector-image-content { 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 padding: 20px; 
 z-index: 2; 
 } 
 #quartix-mega-menu-widget .sector-image-title { 
 font-size: 16px !important; 
 font-weight: 600 !important; 
 color: var(--quartix-white) !important; 
 margin-bottom: 8px !important; 
 } 
 #quartix-mega-menu-widget .sector-image-desc { 
 font-size: 14px !important; 
 color: var(--quartix-white) !important; 
 line-height: 1.5; 
 } 
 /* Resources dropdown styling */ 
 #quartix-mega-menu-widget .dropdown-resources { 
 width: 900px; 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 25px; 
 } 
 #quartix-mega-menu-widget .resource-column { 
 padding: 0; 
 } 
 #quartix-mega-menu-widget .featured-read { 
 height: 300px; 
 display: block; 
 position: relative; 
 border-radius: 6px; 
 overflow: hidden; 
 text-decoration: none; 
 background-image: url('https://irp.cdn-website.com/6da9a846/dms3rep/multi/happy-mechanic-shaking-hands-with-his-customers-in-2024-12-13-20-14-55-utc.jpg'); 
 background-size: cover; 
 background-position: center; 
 } 
 #quartix-mega-menu-widget .featured-read::after { 
 content: ""; 
 position: absolute; 
 top: 0; 
 left: 0; 
 right: 0; 
 bottom: 0; 
 background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%); 
 z-index: 1; 
 } 
 #quartix-mega-menu-widget .featured-read-label { 
 position: absolute; 
 top: 15px; 
 left: 15px; 
 background-color: var(--quartix-green); 
 color: white; 
 font-size: 12px; 
 font-weight: 600; 
 padding: 4px 8px; 
 border-radius: 3px; 
 z-index: 2; 
 } 
 #quartix-mega-menu-widget .featured-read-content { 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 padding: 20px; 
 z-index: 2; 
 } 
 #quartix-mega-menu-widget .featured-read-title { 
 font-size: 16px !important; 
 font-weight: 600 !important; 
 color: var(--quartix-white) !important; 
 margin-bottom: 8px !important; 
 } 
 #quartix-mega-menu-widget .featured-read-desc { 
 font-size: 14px !important; 
 color: var(--quartix-white) !important; 
 line-height: 1.5; 
 margin-bottom: 10px; 
 } 
 #quartix-mega-menu-widget .featured-read-link { 
 display: inline-block; 
 color: var(--quartix-white); 
 font-size: 14px; 
 font-weight: 600; 
 text-decoration: none; 
 border-bottom: 1px solid var(--quartix-white); 
 padding-bottom: 2px; 
 } 
 /* Responsive adjustments */ 
 @media screen and (max-width: 1200px) { 
 #quartix-mega-menu-widget .dropdown-sectors { 
 width: 95vw; 
 max-width: 1000px; 
 } 
 #quartix-mega-menu-widget .dropdown-resources { 
 width: 95vw; 
 max-width: 800px; 
 } 
 } 
 @media screen and (max-width: 992px) { 
 #quartix-mega-menu-widget .dropdown-sectors { 
 grid-template-columns: 1fr 1fr; 
 } 
 #quartix-mega-menu-widget .sector-column:last-child { 
 grid-column: span 2; 
 } 
 #quartix-mega-menu-widget .dropdown-resources { 
 grid-template-columns: 1fr 1fr; 
 } 
 #quartix-mega-menu-widget .resource-column:last-child { 
 grid-column: span 2; 
 } 
 } 
 @media screen and (max-width: 768px) { 
 #quartix-mega-menu-widget .nav-links { 
 flex-direction: column; 
 width: 100%; 
 gap: 0; 
 } 
 #quartix-mega-menu-widget .nav-item { 
 width: 100%; 
 border-bottom: 1px solid var(--quartix-mid-gray); 
 } 
 #quartix-mega-menu-widget .nav-link { 
 padding: 15px 0; 
 } 
 #quartix-mega-menu-widget .dropdown { 
 position: static !important; /* Override fixed positioning for mobile */ 
 width: 100% !important; 
 transform: none !important; 
 box-shadow: none; 
 border-radius: 0; 
 display: none; 
 pointer-events: auto; 
 top: auto !important; 
 left: auto !important; 
 } 
 #quartix-mega-menu-widget .nav-item:hover .dropdown { 
 display: block; 
 transform: none !important; 
 } 
 #quartix-mega-menu-widget .dropdown-sectors, 
 #quartix-mega-menu-widget .dropdown-resources { 
 grid-template-columns: 1fr; 
 } 
 #quartix-mega-menu-widget .login-link { 
 display: inline-block; 
 margin-top: 10px; 
 } 
 } 
 </style> 
 <nav class="nav-container"> 
 <ul class="nav-links"> 
 <li class="nav-item"> 
 <a href="https://partners.quartix.com/our-solutions" class="nav-link"> 
 Our Solutions 
 </a> 
 </li> 
 <li class="nav-item"> 
 <a href="https://partners.quartix.com/partner-with-us" class="nav-link"> 
 Partner With Us 
 </a> 
 </li> 
 <li class="nav-item"> 
 <a href="https://partners.quartix.com/calculator" class="nav-link"> 
 Calculator 
 <span style="background-color: #13ab5b; color: white; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 3px; display: inline-block; margin-left: 6px; position: relative; top: -1px;"> 
 NEW 
 </span> 
 </a> 
 </li> 
 <li class="nav-item"> 
 <a href="https://partners.quartix.com/sectors" class="nav-link"> 
 Sectors 
 </a> 
 <div class="dropdown dropdown-sectors"> 
 <div class="sector-column"> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/sectors/automotive-and-insurance" class="sector-link"> 
 <h3 class="sector-title"> 
 Automotive &amp; Insurance 
 </h3> 
 <p class="sector-desc"> 
 Expand your offerings and earn commissions by reselling Quartix's vehicle tracking. 
 </p> 
 </a> 
 </div> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/sectors/garages-and-workshops" class="sector-link"> 
 <h3 class="sector-title"> 
 Garages &amp; Workshops 
 </h3> 
 <p class="sector-desc"> 
 Grow your business by reselling Quartix's fleet management tools to your clients. 
 </p> 
 </a> 
 </div> 
 </div> 
 <div class="sector-column"> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/sectors/franchise-networks" class="sector-link"> 
 <h3 class="sector-title"> 
 Franchise Networks 
 </h3> 
 <p class="sector-desc"> 
 Empower your franchisees and generate new income by partnering with Quartix. 
 </p> 
 </a> 
 </div> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/sectors/telecoms-and-connectivity" class="sector-link"> 
 <h3 class="sector-title"> 
 Telecoms &amp; Connectivity 
 </h3> 
 <p class="sector-desc"> 
 Grow your revenue by offering Quartix's trusted tracking solutions to your clients. 
 </p> 
 </a> 
 </div> 
 </div> 
 <div class="sector-column"> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/sectors/leasing-and-fleet-management" class="sector-link"> 
 <h3 class="sector-title"> 
 Leasing &amp; Fleet Management 
 </h3> 
 <p class="sector-desc"> 
 Enhance your leasing packages and boost profits with Quartix's tracking solutions. 
 </p> 
 </a> 
 </div> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/sectors/commercial-and-retail" class="sector-link"> 
 <h3 class="sector-title"> 
 Commercial &amp; Retail 
 </h3> 
 <p class="sector-desc"> 
 Add a lucrative revenue stream by reselling Quartix's fleet management tools. 
 </p> 
 </a> 
 </div> 
 </div> 
 <div class="sector-column"> 
 <a href="https://partners.quartix.com/start-your-own-vehicle-tracking-company" class="sector-image-link"> 
 <img src="https://irp.cdn-website.com/6da9a846/dms3rep/multi/www.andrewhendry.com18.jpg" alt="Starting Your Own Business?" class="sector-image"> 
 <div class="sector-image-content"> 
 <h3 class="sector-image-title"> 
 Starting Your Own Business? 
 </h3> 
 <p class="sector-image-desc"> 
 Learn more about how Quartix makes it easy to start 
 </p> 
 </div> 
 </a> 
 </div> 
 </div> 
 </li> 
 <li class="nav-item"> 
 <a href="javascript:void(0)" class="nav-link"> 
 Resources 
 </a> 
 <div class="dropdown dropdown-resources"> 
 <div class="resource-column"> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/about" class="sector-link"> 
 <h3 class="sector-title"> 
 About 
 </h3> 
 <p class="sector-desc"> 
 Discover Quartix's mission, expertise, and why we're trusted by over 230 partners. 
 </p> 
 </a> 
 </div> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/blog" class="sector-link"> 
 <h3 class="sector-title"> 
 Blog 
 </h3> 
 <p class="sector-desc"> 
 Get insights, tips, and success stories from the world of vehicle tracking. 
 </p> 
 </a> 
 </div> 
 </div> 
 <div class="resource-column"> 
 <div class="sector-item"> 
 <a href="https://partners.quartix.com/contact" class="sector-link"> 
 <h3 class="sector-title"> 
 Contact 
 </h3> 
 <p class="sector-desc"> 
 Have questions? Our experienced team is ready to help you get started. 
 </p> 
 </a> 
 </div> 
 <div class="sector-item"> 
 <a href="https://portal.quartix.com" class="sector-link"> 
 <h3 class="sector-title"> 
 Partner Portal Login 
 </h3> 
 <p class="sector-desc"> 
 Access marketing materials and resources to help you sell Quartix solutions. 
 </p> 
 </a> 
 </div> 
 </div> 
 <div class="resource-column"> 
 <a href="https://partners.quartix.com/blog/boost-your-margins-how-self-installation-can-maximise-your-quartix-profits" class="featured-read"> 
 <span class="featured-read-label"> 
 Featured Read 
 </span> 
 <div class="featured-read-content"> 
 <h3 class="featured-read-title"> 
 Boost Your Margins: How Self-Installation Can Maximise Your Quartix Profits 
 </h3> 
 <p class="featured-read-desc"> 
 Want to increase your profits without increasing your costs? Discover how self-installation with Quartix can unlock bigger margins. 
 </p> 
 <span class="featured-read-link"> 
 Read More 
 </span> 
 </div> 
 </a> 
 </div> 
 </div> 
 </li> 
 </ul> 
 </nav> 
 <script> 
 (function() { 
 // Unique namespace for this instance 
 const uniqueId = 'quartix-mega-menu-' + Math.random().toString(36).substr(2, 9); 
 const widget = document.getElementById('quartix-mega-menu-widget'); 
 widget.id = uniqueId; 
 // Update all CSS selectors to use unique ID 
 const styleTag = widget.querySelector('style'); 
 if (styleTag) { 
 styleTag.innerHTML = styleTag.innerHTML.replace(/#quartix-mega-menu-widget/g, `#${uniqueId}`); 
 } 
 // Function to adjust dropdown positions for viewport constraints 
 function adjustDropdownPosition(dropdown) { 
 if (window.innerWidth <= 768) return; // Skip for mobile 
 // Reset to default centered position 
 dropdown.style.left = '50%'; 
 dropdown.style.right = 'auto'; 
 dropdown.style.transform = 'translateX(-50%)'; 
 // Force browser to calculate position 
 dropdown.offsetHeight; 
 // Get current position 
 const rect = dropdown.getBoundingClientRect(); 
 const viewportWidth = window.innerWidth; 
 const dropdownWidth = rect.width; 
 const parentRect = dropdown.parentElement.getBoundingClientRect(); 
 // Check if dropdown extends beyond viewport edges 
 if (rect.right > viewportWidth) { 
 // Calculate how much it overflows 
 const overflow = rect.right - viewportWidth; 
 const currentLeft = rect.left; 
 const newLeft = currentLeft - overflow - 10; // 10px buffer from edge 
 // If shifting left would still keep it attached to parent 
 if (newLeft + dropdownWidth >= parentRect.left) { 
 // Shift left by the overflow amount 
 dropdown.style.left = `calc(50% - ${overflow + 10}px)`; 
 } else { 
 // Align to right edge of viewport 
 dropdown.style.left = 'auto'; 
 dropdown.style.right = '10px'; 
 dropdown.style.transform = 'none'; 
 } 
 } else if (rect.left < 0) { 
 // Calculate how much it overflows on the left 
 const overflow = Math.abs(rect.left); 
 const currentRight = rect.right; 
 const newRight = currentRight + overflow + 10; // 10px buffer from edge 
 // If shifting right would still keep it attached to parent 
 if (newRight - dropdownWidth <= parentRect.right) { 
 // Shift right by the overflow amount 
 dropdown.style.left = `calc(50% + ${overflow + 10}px)`; 
 } else { 
 // Align to left edge of viewport 
 dropdown.style.left = '10px'; 
 dropdown.style.transform = 'none'; 
 } 
 } 
 } 
 // Add hover listeners to nav items for position adjustment 
 const navItems = widget.querySelectorAll('.nav-item'); 
 navItems.forEach(item => { 
 const dropdown = item.querySelector('.dropdown'); 
 if (dropdown) { 
 item.addEventListener('mouseenter', function() { 
 // Small delay to ensure dropdown is visible before adjusting 
 requestAnimationFrame(() => { 
 adjustDropdownPosition(dropdown); 
 }); 
 }); 
 } 
 }); 
 // Adjust on window resize 
 let resizeTimer; 
 window.addEventListener('resize', function() { 
 clearTimeout(resizeTimer); 
 resizeTimer = setTimeout(() => { 
 // Re-adjust any visible dropdowns 
 const visibleDropdowns = widget.querySelectorAll('.nav-item:hover .dropdown'); 
 visibleDropdowns.forEach(dropdown => { 
 const navItem = dropdown.closest('.nav-item'); 
 if (navItem) { 
 adjustDropdownPosition(dropdown, navItem); 
 } 
 }); 
 }, 250); 
 }); 
 // Also adjust on scroll since we're using fixed positioning 
 let scrollTimer; 
 window.addEventListener('scroll', function() { 
 clearTimeout(scrollTimer); 
 scrollTimer = setTimeout(() => { 
 const visibleDropdowns = widget.querySelectorAll('.nav-item:hover .dropdown'); 
 visibleDropdowns.forEach(dropdown => { 
 const navItem = dropdown.closest('.nav-item'); 
 if (navItem) { 
 adjustDropdownPosition(dropdown, navItem); 
 } 
 }); 
 }, 10); 
 }); 
 })(); 
 </script> 
 </div> 
 <!-- END: Quartix Mega Menu --> 

 <!-- START: WebHero Enhanced Mega Menu (Fixed Version) --> 
 <div id="webhero-mega-menu-fixed"> 
 <!-- Brevo Meetings Integration --> 
 <link href="https://meetings.brevo.com/assets/styles/popup.css" rel="stylesheet"> 
 <script src="https://meetings.brevo.com/assets/libs/popup.min.js" type="text/javascript"> 
 </script> 
 <style> 
 /* Base styling */ 
 #webhero-mega-menu-fixed { 
 font-family: inherit; 
 position: relative; /* For absolute positioning of CTA */ 
 box-sizing: border-box; 
 width: 100%; /* Ensure the container takes full width */ 
 } 
 #webhero-mega-menu-fixed * { 
 box-sizing: border-box; /* Apply box-sizing to all elements */ 
 } 
 .nav-links { 
 display: flex; 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 justify-content: flex-end; /* Right align the navigation */ 
 margin-right: 180px; /* Increased space for the CTA button */ 
 } 
 .nav-item { 
 position: relative; 
 margin: 0 5px; 
 } 
 .nav-link { 
 color: white; /* White color initially */ 
 font-size: 24px; /* 24px as requested */ 
 font-family: 'Inter', sans-serif; /* Inter font specifically */ 
 text-decoration: none; 
 padding: 15px; 
 display: block; 
 font-weight: normal; /* Ensure not bold */ 
 transition: color 0.3s ease; 
 letter-spacing: normal; /* Reset to default */ 
 } 
 .nav-link:hover { 
 color: #69e4a5; 
 } 
 /* Active page indicator */ 
 .nav-link.active::after { 
 content: ''; 
 display: block; 
 height: 4px; 
 background-color: #69e4a5; 
 position: absolute; 
 bottom: 5px; 
 left: 15px; 
 right: 15px; 
 border-radius: 2px; 
 } 
 /* NEW badge */ 
 .new-badge { 
 background-color: white; 
 color: #213232; 
 font-size: 12px; 
 font-weight: bold; 
 padding: 3px 8px; 
 border-radius: 12px; 
 display: inline-block; 
 margin-left: 8px; 
 vertical-align: middle; 
 letter-spacing: 0.5px; 
 transition: all 0.3s ease; 
 } 
 .nav-link:hover .new-badge { 
 background-color: #69e4a5; 
 color: #213232; 
 } 
 /* Dropdown base styling - FORCE centering */ 
 .dropdown { 
 position: fixed; /* Fixed positioning for sticky header */ 
 width: auto; 
 transform: translateX(-50%); /* Center horizontally with transform */ 
 left: 50%; /* Default center alignment relative to nav item */ 
 max-width: 90vw; 
 background-color: white; 
 padding: 20px; 
 opacity: 0; 
 visibility: hidden; 
 transition: opacity 0.3s ease, visibility 0.3s ease; 
 z-index: 1000; 
 border-radius: 10px; 
 overflow: visible; 
 box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
 box-sizing: border-box; 
 } 
 /* Enhanced dropdown animation */ 
 .nav-item:hover .dropdown { 
 opacity: 1; 
 visibility: visible; 
 transform: translateY(0); /* Slide up effect */ 
 } 
 /* Initial dropdown state - remove right alignment */ 
 .dropdown { 
 right: auto; 
 } 
 /* Specialized dropdown widths */ 
 .dropdown-work { 
 width: 750px; 
 } 
 .dropdown-what-you-get { 
 width: auto; /* Only as wide as needed */ 
 max-width: 90vw; 
 } 
 .mega-content { 
 display: flex; /* Changed to flex to allow natural content width */ 
 gap: 20px; 
 width: max-content; /* Only as wide as needed */ 
 } 
 .mega-content-work { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 20px; 
 } 
 /* Mega item styling */ 
 .mega-item { 
 padding: 0; /* Remove padding from container, move to link */ 
 border-radius: 10px; 
 transition: all 0.3s ease; 
 box-shadow: none !important; /* NEVER show shadow */ 
 width: 180px; /* Control width of each mega item */ 
 } 
 /* Return Our Work spacing to original */ 
 .mega-content-work { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 20px; 
 } 
 /* Restore dropdown widths to be content-based */ 
 .dropdown { 
 width: auto; 
 min-width: auto; /* Let content determine width */ 
 max-width: 90vw; 
 } 
 .dropdown-work { 
 width: auto; /* Let content determine width */ 
 } 
 .mega-item-link { 
 display: block; 
 padding: 15px; 
 border-radius: 10px; 
 text-decoration: none; 
 color: inherit; 
 height: 100%; 
 transition: all 0.3s ease; /* Smooth transition */ 
 box-shadow: none !important; /* NEVER show shadow */ 
 } 
 /* Hover style with lime green title - NO SHADOW */ 
 .mega-item-link:hover { 
 background-color: #213232; 
 transform: none; /* No transform */ 
 box-shadow: none !important; /* NEVER show shadow */ 
 } 
 .mega-item-link:hover .mega-title { 
 color: #69e4a5; /* Lime green on hover */ 
 } 
 .mega-item-link:hover .mega-desc { 
 color: white; 
 } 
 .mega-title { 
 font-size: 36px; /* Increased from 30px to 36px */ 
 font-family: 'Round8-Three-Webfont', 'Round8 Three Webfont', 'Round 8', sans-serif; /* Round 8 font */ 
 color: #213232; 
 margin-bottom: 10px; 
 display: block; 
 transition: color 0.3s ease; 
 font-weight: normal; /* Ensure not bold */ 
 letter-spacing: normal; /* Changed to normal as requested */ 
 } 
 .mega-desc { 
 font-size: 16px; /* Slightly reduced */ 
 color: #555; 
 margin-bottom: 0; 
 line-height: 1.4; 
 transition: color 0.3s ease; 
 letter-spacing: normal; /* Reset to default */ 
 max-width: 160px; /* Limit width to force more compact layout */ 
 } 
 /* Editor 2.0 Feature Box - now permanently dark green */ 
 .editor-feature { 
 display: flex; 
 align-items: center; 
 background-color: #213232; /* Changed to dark green permanently */ 
 border-radius: 10px; 
 padding: 0; /* Remove padding from container, move to link */ 
 width: 600px; /* Fixed width to match original */ 
 overflow: hidden; /* Ensure content stays within container */ 
 box-shadow: none !important; /* NEVER show shadow */ 
 } 
 .editor-feature-link { 
 display: flex; 
 width: 100%; 
 padding: 30px; 
 text-decoration: none; 
 color: inherit; 
 border-radius: 10px; 
 transition: background-color 0.3s ease; 
 align-items: center; 
 box-shadow: none !important; /* NEVER show shadow */ 
 } 
 /* Removed hover styles for editor-feature since we want it permanent */ 
 .editor-feature-title { 
 font-size: 48px; /* Increased from 42px to 48px */ 
 font-family: 'Round8-Three-Webfont', 'Round8 Three Webfont', 'Round 8', sans-serif; /* Round 8 font */ 
 color: #69e4a5; /* Changed to light green permanently */ 
 margin-bottom: 15px; 
 font-weight: normal; /* Ensure not bold */ 
 letter-spacing: normal; /* Changed to normal */ 
 } 
 .editor-feature-desc { 
 font-size: 19px; /* Slightly increased */ 
 color: white; /* Changed to white for better contrast on dark green */ 
 line-height: 1.5; 
 letter-spacing: normal; /* Reset to default */ 
 } 
 .editor-feature-content { 
 flex: 1; 
 min-width: 180px; /* Made smaller */ 
 margin-right: 30px; /* Reduced space between content and image */ 
 } 
 .editor-feature-image { 
 width: 250px; /* Reduced size for GIF */ 
 height: 200px; /* Reduced size for GIF */ 
 flex-shrink: 0; /* Prevent image from shrinking too much */ 
 border-radius: 5px; 
 overflow: hidden; /* For GIF containment */ 
 } 
 .editor-feature-image img { 
 width: 100%; 
 height: 100%; 
 object-fit: contain; /* Show full GIF without cropping */ 
 display: block; 
 } 
 /* Browse All Work option that stands out by default */ 
 .browse-all-work .mega-title { 
 color: #69e4a5; /* Lime green by default */ 
 } 
 .browse-all-work .mega-desc { 
 color: white; 
 } 
 .browse-all-work { 
 background-color: #213232; /* Dark green background */ 
 box-shadow: none !important; /* Force no shadow */ 
 } 
 /* Disable hover effect for browse all work */ 
 .browse-all-work:hover { 
 background-color: #213232 !important; /* Ensure it stays dark green */ 
 transform: none !important; /* No lift effect */ 
 box-shadow: none !important; /* Force no shadow */ 
 } 
 /* Start Project CTA button */ 
 .start-project-cta { 
 position: absolute; 
 right: 0; 
 top: 50%; 
 transform: translateY(-50%); 
 background-color: #69e4a5; 
 color: #213232; 
 padding: 12px 24px; 
 border-radius: 6px; 
 font-size: 18px; 
 font-weight: 600; 
 text-decoration: none; 
 transition: all 0.3s ease; 
 border: 2px solid #69e4a5; 
 font-family: 'Inter', sans-serif; 
 white-space: nowrap; 
 } 
 .start-project-cta:hover { 
 background-color: #69e4a5; /* Same as normal state */ 
 color: #213232; /* Same as normal state */ 
 transform: translateY(-50%); /* Keep the vertical alignment */ 
 } 
 /* NEW STYLES FOR MORE DROPDOWN */ 
 .more-content { 
 display: grid; 
 grid-template-columns: 1fr 1.2fr; /* Adjusted ratio for wider dropdown */ 
 gap: 20px; 
 width: 1100px; /* Make the entire dropdown wider */ 
 max-width: 90vw; 
 margin: 0 auto; /* Center the content */ 
 } 
 .more-options-grid { 
 display: grid; 
 grid-template-columns: repeat(2, 1fr); 
 grid-template-rows: repeat(2, 1fr); 
 gap: 20px; 
 } 
 /* Featured blog redesign with background image */ 
 .featured-blog { 
 height: 100%; /* Match height of the grid */ 
 position: relative; 
 border-radius: 10px; 
 overflow: hidden; /* Ensure image stays within bounds */ 
 transition: all 0.3s ease; 
 box-shadow: none !important; /* NEVER show shadow */ 
 } 
 .featured-blog:hover { 
 transform: none; /* Remove the transform effect */ 
 box-shadow: none !important; /* NEVER show shadow */ 
 } 
 .featured-blog-link { 
 display: flex; 
 flex-direction: column; 
 justify-content: space-between; 
 height: 100%; 
 text-decoration: none; 
 color: white; 
 position: relative; 
 z-index: 2; 
 padding: 25px; 
 box-sizing: border-box; /* Ensure padding is included in width/height */ 
 box-shadow: none !important; /* NEVER show shadow */ 
 } 
 .featured-blog-background { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 z-index: 1; 
 background-position: center; 
 background-size: cover; 
 object-fit: cover; /* Ensure image covers the area properly */ 
 } 
 .featured-blog-overlay { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: linear-gradient( 
 to bottom, 
 rgba(33, 50, 50, 0.6) 0%, 
 rgba(33, 50, 50, 0.8) 50%, 
 rgba(33, 50, 50, 0.95) 100% 
 ); 
 z-index: 1; 
 } 
 .featured-tag { 
 background-color: #69e4a5; 
 color: #213232; 
 padding: 4px 10px; 
 border-radius: 4px; 
 font-size: 14px; 
 font-weight: bold; 
 display: inline-block; 
 align-self: flex-start; 
 } 
 .featured-blog-content { 
 align-self: flex-end; 
 margin-top: auto; 
 } 
 .featured-blog-title { 
 font-size: 32px; 
 color: white; 
 margin-bottom: 15px; 
 font-family: 'Round8-Three-Webfont', 'Round8 Three Webfont', 'Round 8', sans-serif; 
 letter-spacing: normal; 
 } 
 .featured-blog-desc { 
 font-size: 17px; 
 color: rgba(255, 255, 255, 0.9); 
 line-height: 1.5; 
 max-width: 500px; 
 } 
 /* Responsive adjustments for middle screen sizes */ 
 @media screen and (max-width: 1200px) { 
 .dropdown, .dropdown-work { 
 width: auto; 
 min-width: 500px; 
 max-width: 90vw; 
 } 
 .dropdown-what-you-get { 
 width: auto; 
 min-width: 650px; 
 max-width: 90vw; 
 } 
 .mega-content { 
 grid-template-columns: repeat(2, 1fr); 
 } 
 .editor-feature-title { 
 font-size: 36px; /* Smaller on medium screens */ 
 } 
 .editor-feature-link { 
 flex-wrap: wrap; 
 } 
 .editor-feature-content { 
 margin-right: 0; 
 margin-bottom: 20px; 
 width: 100%; 
 text-align: center; 
 } 
 .editor-feature-image { 
 margin: 0 auto; 
 width: 100%; 
 max-width: 300px; 
 } 
 .nav-links { 
 margin-right: 0; 
 } 
 .start-project-cta { 
 position: relative; 
 transform: none; 
 display: inline-block; 
 margin-left: 15px; 
 padding: 8px 16px; 
 font-size: 16px; 
 } 
 /* More dropdown responsive */ 
 .more-content { 
 grid-template-columns: 1fr; 
 } 
 .more-options-grid { 
 grid-template-columns: repeat(2, 1fr); 
 margin-bottom: 20px; 
 } 
 .featured-blog { 
 height: 300px; 
 } 
 } 
 /* Mobile adjustments */ 
 @media screen and (max-width: 768px) { 
 .mega-content { 
 grid-template-columns: 1fr; 
 } 
 .more-options-grid { 
 grid-template-columns: 1fr; 
 } 
 } 
 </style> 
 <ul class="nav-links"> 
 <li class="nav-item"> 
 <a href="/services" class="nav-link"> 
 Services 
 </a> 
 <div class="dropdown" data-position="check"> 
 <div class="mega-content"> 
 <div class="mega-item"> 
 <a href="/services/web-design" class="mega-item-link"> 
 <div class="mega-title"> 
 Web Design 
 </div> 
 <p class="mega-desc"> 
 Beautiful, functional websites that attract and convert your ideal customers. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item"> 
 <a href="/services/branding" class="mega-item-link"> 
 <div class="mega-title"> 
 Branding 
 </div> 
 <p class="mega-desc"> 
 Create a memorable brand identity that resonates with your target audience. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item"> 
 <a href="/services/messaging" class="mega-item-link"> 
 <div class="mega-title"> 
 Messaging 
 </div> 
 <p class="mega-desc"> 
 Craft compelling content that clarifies your value and engages customers. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item"> 
 <a href="/services/visibility" class="mega-item-link"> 
 <div class="mega-title"> 
 Visibility 
 </div> 
 <p class="mega-desc"> 
 Boost your online presence and get found by your ideal customers. 
 </p> 
 </a> 
 </div> 
 </div> 
 </div> 
 </li> 
 <li class="nav-item"> 
 <a href="/what-you-get" class="nav-link"> 
 What You Get 
 </a> 
 <div class="dropdown dropdown-what-you-get" data-position="check"> 
 <div class="editor-feature"> 
 <a href="/what-you-get" class="editor-feature-link"> 
 <div class="editor-feature-content"> 
 <div class="editor-feature-title"> 
 Our New Flex Editor 
 </div> 
 <p class="editor-feature-desc"> 
 A powerful new way to build and manage your website with an intuitive drag-and-drop interface, responsive designs, and time-saving features. 
 </p> 
 </div> 
 <div class="editor-feature-image"> 
 <img src="https://irp.cdn-website.com/34af82bb/dms3rep/multi/2025-05-03+22.08.13.gif" alt="New Flex Editor Preview"> 
 </div> 
 </a> 
 </div> 
 </div> 
 </li> 
 <li class="nav-item"> 
 <a href="/our-work" class="nav-link"> 
 Our Work 
 </a> 
 <div class="dropdown dropdown-work" data-position="check"> 
 <div class="mega-content-work"> 
 <div class="mega-item"> 
 <a href="/our-work/quartix" class="mega-item-link"> 
 <div class="mega-title"> 
 Quartix 
 </div> 
 <p class="mega-desc"> 
 Custom website design and build for Quartix's distribution platform. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item"> 
 <a href="/our-work/cademi" class="mega-item-link"> 
 <div class="mega-title"> 
 Cademi 
 </div> 
 <p class="mega-desc"> 
 E-learning platform with intuitive interface design and development. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item"> 
 <a href="/our-work" class="mega-item-link browse-all-work"> 
 <div class="mega-title"> 
 Browse All Work 
 </div> 
 <p class="mega-desc"> 
 Explore our portfolio of website designs and branding projects. 
 </p> 
 </a> 
 </div> 
 </div> 
 </div> 
 </li> 
 <li class="nav-item"> 
 <span class="nav-link"> 
 More 
 </span> 
 <div class="dropdown" data-position="check"> 
 <!-- New structure for the More dropdown --> 
 <div class="more-content"> 
 <!-- Left side: 2x2 grid of options --> 
 <div class="more-options-grid"> 
 <div class="mega-item more-item"> 
 <a href="/about" class="mega-item-link"> 
 <div class="mega-title"> 
 About 
 </div> 
 <p class="mega-desc"> 
 Learn about our team and our approach to website design and development. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item more-item"> 
 <a href="/calculator" class="mega-item-link"> 
 <div class="mega-title"> 
 Calculator 
 </div> 
 <p class="mega-desc"> 
 Get an instant estimate for your project with our easy calculator tool. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item more-item"> 
 <a href="/blog" class="mega-item-link"> 
 <div class="mega-title"> 
 Blog 
 </div> 
 <p class="mega-desc"> 
 Website tips, design advice, and insights to help grow your business. 
 </p> 
 </a> 
 </div> 
 <div class="mega-item more-item"> 
 <a href="/contact" class="mega-item-link"> 
 <div class="mega-title"> 
 Contact 
 </div> 
 <p class="mega-desc"> 
 Ready to talk about your project? Get in touch with our friendly team. 
 </p> 
 </a> 
 </div> 
 </div> 
 <!-- Right side: Featured blog with background image --> 
 <div class="featured-blog"> 
 <div class="featured-blog-background" style="background-image: url('https://irp.cdn-website.com/34af82bb/dms3rep/multi/happy2.png');"> 
 </div> 
 <div class="featured-blog-overlay"> 
 </div> 
 <a href="/blog" class="featured-blog-link"> 
 <span class="featured-tag"> 
 FEATURED 
 </span> 
 <div class="featured-blog-content"> 
 <div class="featured-blog-title"> 
 How We Use AI to Speed Up the Design Process 
 </div> 
 <p class="featured-blog-desc"> 
 Discover how we leverage AI technology to deliver multiple design iterations faster, while maintaining the human touch that makes your brand unique. 
 </p> 
 </div> 
 </a> 
 </div> 
 </div> 
 </div> 
 </li> 
 </ul> 
 <a href="" onclick="BrevoBookingPage.initStaticButton({ url: 'https://meet.brevo.com/webhero/borderless?l=consultation' });return false;" class="start-project-cta"> 
 Book a Call 
 </a> 
 <script> 
 // Enhanced edge detection for dropdowns 
 document.addEventListener('DOMContentLoaded', function() { 
 const navItems = document.querySelectorAll('.nav-item'); 
 // Set active page indicator based on current URL 
 const currentPath = window.location.pathname; 
 const navLinks = document.querySelectorAll('.nav-link'); 
 navLinks.forEach(link => { 
 const linkPath = link.getAttribute('href'); 
 if (linkPath && (currentPath === linkPath || (linkPath !== '/' && currentPath.startsWith(linkPath)))) { 
 link.classList.add('active'); 
 } 
 }); 
 // IMPROVED: Enhanced function to check and adjust dropdown positioning 
 function adjustDropdownPosition(dropdown, navItem) { 
 // Reset any previously applied styles first 
 dropdown.style.left = ''; 
 dropdown.style.right = ''; 
 dropdown.style.width = ''; 
 dropdown.style.transform = ''; 
 // Calculate the exact position to place the dropdown 
 const navItemRect = navItem.getBoundingClientRect(); 
 const windowWidth = window.innerWidth; 
 // Set the correct top position based on navItem 
 dropdown.style.top = (navItemRect.bottom) + 'px'; 
 // First make the dropdown visible to measure it 
 const originalVisibility = dropdown.style.visibility; 
 const originalOpacity = dropdown.style.opacity; 
 const originalTransform = dropdown.style.transform; 
 dropdown.style.visibility = 'hidden'; 
 dropdown.style.opacity = '0'; 
 dropdown.style.transform = 'none'; 
 // Force a reflow to ensure styles apply 
 void dropdown.offsetWidth; 
 // Now measure the dropdown 
 const dropdownRect = dropdown.getBoundingClientRect(); 
 // Reset the visibility styles 
 dropdown.style.visibility = originalVisibility; 
 dropdown.style.opacity = originalOpacity; 
 dropdown.style.transform = originalTransform; 
 // CENTER the dropdown under the nav item - this is the key change 
 const centerPosition = navItemRect.left + (navItemRect.width / 2) - (dropdownRect.width / 2); 
 // Check if dropdown would extend beyond right edge 
 if (centerPosition + dropdownRect.width > windowWidth - 10) { 
 // Align to right edge with margin 
 dropdown.style.left = Math.max(10, windowWidth - dropdownRect.width - 10) + 'px'; 
 } 
 // Check if dropdown would extend beyond left edge 
 else if (centerPosition < 10) { 
 // Align to left edge with margin 
 dropdown.style.left = '10px'; 
 } 
 // Otherwise center it perfectly 
 else { 
 dropdown.style.left = centerPosition + 'px'; 
 } 
 // Add transform back for animation 
 dropdown.style.transform = 'translateY(10px)'; 
 } 
 // Apply positioning check on hover - with better centering 
 navItems.forEach(item => { 
 const dropdown = item.querySelector('.dropdown'); 
 if (dropdown) { 
 // Handle mouse enter 
 item.addEventListener('mouseenter', function() { 
 // Calculate position before showing dropdown 
 setTimeout(() => { 
 adjustDropdownPosition(dropdown, item); 
 }, 0); 
 }); 
 } 
 }); 
 // Check and adjust positions on window resize 
 window.addEventListener('resize', function() { 
 navItems.forEach(item => { 
 const dropdown = item.querySelector('.dropdown'); 
 if (dropdown && getComputedStyle(dropdown).visibility === 'visible') { 
 adjustDropdownPosition(dropdown, item); 
 } 
 }); 
 }); 
 // Perform initial positioning for all dropdowns 
 setTimeout(() => { 
 navItems.forEach(item => { 
 const dropdown = item.querySelector('.dropdown'); 
 if (dropdown) { 
 // Clone dropdown for measurement without affecting display 
 const clone = dropdown.cloneNode(true); 
 clone.style.visibility = 'hidden'; 
 clone.style.position = 'absolute'; 
 clone.style.opacity = '0'; 
 clone.style.pointerEvents = 'none'; 
 document.body.appendChild(clone); 
 // Measure the clone and position the original 
 const cloneRect = clone.getBoundingClientRect(); 
 adjustDropdownPosition(dropdown, item); 
 // Remove the clone 
 document.body.removeChild(clone); 
 } 
 }); 
 }, 100); 
 }); 
 </script> 
 </div> 
 <!-- END: WebHero Enhanced Mega Menu (Fixed Version) --> 

 <!-- START: Agency Genius Enhanced Mega Menu --> 
 <div id="ag-mega-menu-wrapper-2025"> 
 <style> 
 /* Base styling and reset */ 
 #ag-mega-menu-wrapper-2025 { 
 --ag-primary: #ad24a6; 
 --ag-primary-light: #f9edf8; 
 --ag-primary-dark: #8a1d85; 
 --ag-highlight: #f7f7f7; 
 --ag-text: #323232; 
 --ag-text-light: #555555; 
 --ag-border: #e0e0e0; 
 --ag-white: #ffffff; 
 --ag-success: #32c27d; 
 font-family: "PPNeueMontreal-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
 position: relative; 
 box-sizing: border-box; 
 width: 100%; 
 z-index: 1000; 
 } 
 /* Override Duda's heading styles with extra specificity */ 
 #ag-mega-menu-wrapper-2025 h1, 
 #ag-mega-menu-wrapper-2025 h2, 
 #ag-mega-menu-wrapper-2025 h3, 
 #ag-mega-menu-wrapper-2025 h4, 
 #ag-mega-menu-wrapper-2025 h5, 
 #ag-mega-menu-wrapper-2025 h6 { 
 font-family: "PPNeueMontreal-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; 
 margin: 0 !important; 
 padding: 0 !important; 
 } 
 /* Ensure all text elements use our font, not Duda's */ 
 #ag-mega-menu-wrapper-2025 p, 
 #ag-mega-menu-wrapper-2025 span, 
 #ag-mega-menu-wrapper-2025 li, 
 #ag-mega-menu-wrapper-2025 a { 
 font-family: "PPNeueMontreal-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; 
 } 
 #ag-mega-menu-wrapper-2025 * { 
 box-sizing: border-box; 
 margin: 0; 
 padding: 0; 
 } 
 /* Main navigation container - NO PADDING */ 
 #ag-mega-menu-wrapper-2025 .ag-nav-container { 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 position: relative; 
 } 
 /* Navigation links */ 
 #ag-mega-menu-wrapper-2025 .ag-nav-links { 
 display: flex; 
 list-style: none; 
 justify-content: center; 
 align-items: center; 
 gap: 40px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-nav-item { 
 position: relative; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-nav-link { 
 color: var(--ag-text); 
 font-size: 22px; 
 text-decoration: none; 
 padding: 0 8px; /* NO TOP/BOTTOM PADDING as requested */ 
 display: block; 
 font-weight: 400; 
 transition: all 0.3s ease; 
 position: relative; 
 } 
 /* Hover effect - move up */ 
 #ag-mega-menu-wrapper-2025 .ag-nav-link:hover { 
 transform: translateY(-3px); 
 color: var(--ag-primary); 
 } 
 /* DROPDOWN STYLING - Positioned directly under parent item */ 
 #ag-mega-menu-wrapper-2025 .ag-dropdown { 
 position: absolute; 
 width: auto; 
 left: 50%; 
 transform: translateX(-50%) translateY(20px); 
 background-color: var(--ag-white); 
 border-radius: 12px; 
 padding: 30px; 
 opacity: 0; 
 visibility: hidden; 
 transition: all 0.3s ease; 
 box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); 
 max-width: 90vw; 
 z-index: 1001; 
 top: 100%; 
 border: 1px solid var(--ag-border); 
 } 
 /* Dropdown arrow indicator */ 
 #ag-mega-menu-wrapper-2025 .ag-dropdown::before { 
 content: ''; 
 position: absolute; 
 top: -8px; 
 left: 50%; 
 transform: translateX(-50%) rotate(45deg); 
 width: 16px; 
 height: 16px; 
 background-color: var(--ag-white); 
 border-top: 1px solid var(--ag-border); 
 border-left: 1px solid var(--ag-border); 
 transform-origin: center; 
 z-index: 1002; 
 } 
 /* Dropdown animation on hover */ 
 #ag-mega-menu-wrapper-2025 .ag-nav-item:hover .ag-dropdown { 
 opacity: 1; 
 visibility: visible; 
 transform: translateX(-50%) translateY(10px); 
 } 
 /* The Vault dropdown styling - two column layout */ 
 #ag-mega-menu-wrapper-2025 .ag-dropdown-vault { 
 width: 600px; 
 } 
 /* Vault examples two-column layout */ 
 #ag-mega-menu-wrapper-2025 .ag-vault-examples { 
 display: flex; 
 justify-content: space-between; 
 margin-top: 15px; 
 gap: 20px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-vault-column { 
 display: flex; 
 flex-direction: column; 
 gap: 10px; 
 flex: 1; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-vault-item { 
 font-size: 14px !important; 
 color: var(--ag-text) !important; 
 padding: 3px 0; 
 display: block; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-vault-more { 
 font-size: 14px !important; 
 color: var(--ag-primary) !important; 
 font-style: italic; 
 margin-top: 15px; 
 font-weight: 500; 
 text-align: center; 
 } 
 @media screen and (max-width: 768px) { 
 #ag-mega-menu-wrapper-2025 .ag-vault-examples { 
 flex-direction: column; 
 gap: 5px; 
 } 
 } 
 /* Compare dropdown styling */ 
 #ag-mega-menu-wrapper-2025 .ag-dropdown-compare { 
 width: 850px; 
 } 
 /* Feature box styling - removed image and adjusted layout */ 
 #ag-mega-menu-wrapper-2025 .ag-feature-box { 
 background-color: var(--ag-primary); 
 border-radius: 15px; 
 padding: 25px; 
 display: block; /* Changed from flex since we removed the image */ 
 overflow: hidden; 
 transition: all 0.3s ease; 
 text-align: left; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-feature-box:hover { 
 background-color: var(--ag-primary-dark); 
 } 
 #ag-mega-menu-wrapper-2025 .ag-feature-content { 
 width: 100%; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-feature-title { 
 font-size: 22px !important; /* Smaller title with !important */ 
 color: #ffffff !important; /* Forced white with !important */ 
 margin-bottom: 15px; 
 font-weight: 600 !important; 
 line-height: 1.2; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-feature-desc { 
 font-size: 15px !important; 
 line-height: 1.6; 
 color: #ffffff !important; /* Forced white with !important */ 
 } 
 /* Compare grid styling */ 
 #ag-mega-menu-wrapper-2025 .ag-compare-grid { 
 display: grid; 
 grid-template-columns: repeat(2, 1fr); 
 gap: 25px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-compare-item { 
 background-color: #f8f8f8; 
 border-radius: 15px; 
 padding: 30px; 
 transition: all 0.3s ease; 
 border: 1px solid var(--ag-border); 
 } 
 #ag-mega-menu-wrapper-2025 .ag-compare-item:hover { 
 background-color: #f0f0f0; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-compare-title { 
 font-size: 20px !important; /* Smaller title with !important */ 
 color: var(--ag-primary) !important; /* Forced color with !important */ 
 margin-bottom: 18px !important; /* Increased space between title and description */ 
 font-weight: 600 !important; 
 line-height: 1.2; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-compare-desc { 
 font-size: 14px !important; 
 line-height: 1.6; 
 color: var(--ag-text) !important; /* Forced color with !important */ 
 margin-bottom: 5px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-compare-usp { 
 margin-top: 20px; 
 border-top: 1px solid rgba(0, 0, 0, 0.1); 
 padding-top: 20px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-usp-list { 
 list-style: none; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-usp-item { 
 display: flex; 
 align-items: flex-start; 
 margin-bottom: 14px; 
 font-size: 14px !important; 
 color: var(--ag-text); 
 } 
 #ag-mega-menu-wrapper-2025 .ag-usp-icon { 
 color: var(--ag-primary); 
 margin-right: 12px; 
 font-weight: bold; 
 font-size: 16px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-cta-section { 
 margin-top: 30px; 
 text-align: center; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-cta-button { 
 display: inline-block; 
 background-color: var(--ag-primary); 
 color: var(--ag-white) !important; 
 padding: 15px 30px; 
 border-radius: 10px; 
 text-decoration: none; 
 font-weight: 500; 
 transition: all 0.3s ease; 
 border: 2px solid var(--ag-primary); 
 font-size: 16px !important; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-cta-button:hover { 
 background-color: var(--ag-white); 
 color: var(--ag-primary) !important; 
 } 
 /* Responsive adjustments */ 
 @media screen and (max-width: 1200px) { 
 #ag-mega-menu-wrapper-2025 .ag-dropdown-vault, 
 #ag-mega-menu-wrapper-2025 .ag-dropdown-compare { 
 width: 90vw; 
 max-width: 700px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-feature-box { 
 text-align: center; 
 } 
 } 
 @media screen and (max-width: 768px) { 
 #ag-mega-menu-wrapper-2025 .ag-nav-links { 
 gap: 20px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-nav-link { 
 font-size: 18px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-compare-grid { 
 grid-template-columns: 1fr; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-dropdown { 
 position: fixed; 
 top: 80px; 
 left: 0 !important; 
 right: 0 !important; 
 transform: translateY(10px) !important; 
 max-width: 100%; 
 width: 100%; 
 border-radius: 0; 
 padding: 25px 15px; 
 overflow-y: auto; 
 max-height: calc(100vh - 80px); 
 } 
 #ag-mega-menu-wrapper-2025 .ag-dropdown::before { 
 display: none; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-nav-item:hover .ag-dropdown { 
 transform: translateY(0) !important; 
 } 
 } 
 @media screen and (max-width: 480px) { 
 #ag-mega-menu-wrapper-2025 .ag-nav-links { 
 gap: 15px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-nav-link { 
 font-size: 16px; 
 padding: 0 5px; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-feature-title { 
 font-size: 20px !important; 
 } 
 #ag-mega-menu-wrapper-2025 .ag-compare-title { 
 font-size: 18px !important; 
 } 
 } 
 </style> 
 <nav class="ag-nav-container"> 
 <ul class="ag-nav-links"> 
 <li class="ag-nav-item"> 
 <a href="https://www.agencygenius.co" class="ag-nav-link"> 
 Home 
 </a> 
 </li> 
 <li class="ag-nav-item"> 
 <a href="https://www.agencygenius.co/pricing" class="ag-nav-link"> 
 Pricing 
 </a> 
 </li> 
 <li class="ag-nav-item"> 
 <a href="https://www.agencygenius.co/compare" class="ag-nav-link"> 
 Compare 
 </a> 
 <div class="ag-dropdown ag-dropdown-compare"> 
 <div class="ag-compare-grid"> 
 <div class="ag-compare-item"> 
 <h3 class="ag-compare-title"> 
 We Upskill Agencies 
 </h3> 
 <p class="ag-compare-desc"> 
 Our mission is to teach you how to build your own components with AI, so you won't need to rely on third-party widget providers. 
 </p> 
 <div class="ag-compare-usp"> 
 <ul class="ag-usp-list"> 
 <li class="ag-usp-item"> 
 <span class="ag-usp-icon"> 
 ✓ 
 </span> 
 <span> 
 Create custom solutions without limitations 
 </span> 
 </li> 
 <li class="ag-usp-item"> 
 <span class="ag-usp-icon"> 
 ✓ 
 </span> 
 <span> 
 No per-widget fees or restrictions 
 </span> 
 </li> 
 <li class="ag-usp-item"> 
 <span class="ag-usp-icon"> 
 ✓ 
 </span> 
 <span> 
 Become self-sufficient with AI tools 
 </span> 
 </li> 
 </ul> 
 </div> 
 </div> 
 <div class="ag-compare-item"> 
 <h3 class="ag-compare-title"> 
 Forward-Thinking Community 
 </h3> 
 <p class="ag-compare-desc"> 
 Stay at the forefront of the industry's exponential changes with weekly updates and our supportive community. 
 </p> 
 <div class="ag-compare-usp"> 
 <ul class="ag-usp-list"> 
 <li class="ag-usp-item"> 
 <span class="ag-usp-icon"> 
 ✓ 
 </span> 
 <span> 
 Weekly components and video content 
 </span> 
 </li> 
 <li class="ag-usp-item"> 
 <span class="ag-usp-icon"> 
 ✓ 
 </span> 
 <span> 
 Connect with like-minded agencies 
 </span> 
 </li> 
 <li class="ag-usp-item"> 
 <span class="ag-usp-icon"> 
 ✓ 
 </span> 
 <span> 
 Build without iframe limitations 
 </span> 
 </li> 
 </ul> 
 </div> 
 </div> 
 </div> 
 <div class="ag-cta-section"> 
 <a href="https://www.agencygenius.co/compare" class="ag-cta-button"> 
 See The Full Comparison 
 </a> 
 </div> 
 </div> 
 </li> 
 <li class="ag-nav-item"> 
 <a href="https://www.agencygenius.co/the-vault" class="ag-nav-link"> 
 The Vault 
 </a> 
 <div class="ag-dropdown ag-dropdown-vault"> 
 <div class="ag-compare-item" style="width: 100%;"> 
 <h3 class="ag-compare-title"> 
 Custom Widget Vault 
 </h3> 
 <p class="ag-compare-desc"> 
 As well as teaching you how to build with AI we have a growing collection of customizable base widgets that you can implement on your websites in line with your brand and even add additional functionality too using AI techniques. 
 </p> 
 <div class="ag-vault-examples"> 
 <div class="ag-vault-column"> 
 <span class="ag-vault-item"> 
 Sidebar launch buttons 
 </span> 
 <span class="ag-vault-item"> 
 Responsive iframe embedding 
 </span> 
 <span class="ag-vault-item"> 
 Parallax image scrollers 
 </span> 
 <span class="ag-vault-item"> 
 Image aware content tabs 
 </span> 
 <span class="ag-vault-item"> 
 Custom cursor effects 
 </span> 
 <span class="ag-vault-item"> 
 Infinite text marquees 
 </span> 
 </div> 
 <div class="ag-vault-column"> 
 <span class="ag-vault-item"> 
 Skeleton text loaders 
 </span> 
 <span class="ag-vault-item"> 
 Scaling hamburger menu 
 </span> 
 <span class="ag-vault-item"> 
 Banding cards 
 </span> 
 <span class="ag-vault-item"> 
 Mega menus 
 </span> 
 <span class="ag-vault-item"> 
 Floating galleries 
 </span> 
 <span class="ag-vault-item"> 
 Click menus 
 </span> 
 </div> 
 </div> 
 <p class="ag-vault-more"> 
 ...and many more components added regularly! 
 </p> 
 </div> 
 <div class="ag-cta-section"> 
 <a href="https://www.agencygenius.co/the-vault" class="ag-cta-button"> 
 Browse The Vault 
 </a> 
 </div> 
 </div> 
 </li> 
 <li class="ag-nav-item"> 
 <a href="https://www.agencygenius.co/faq" class="ag-nav-link"> 
 FAQ 
 </a> 
 </li> 
 </ul> 
 </nav> 
 </div> 
 <!-- END: Agency Genius Enhanced Mega Menu --> 

 <!-- Cademi Mega Menu - Revised --> 
 <div id="cademi-mega-menu-wrapper"> 
 <div id="cademi-mega-menu"> 
 <style> 
 /* Base styling */ 
 #cademi-mega-menu { 
 --cademi-primary: #fe17ae; 
 --cademi-primary-light: #ffedf8; 
 --cademi-secondary: #20C5C5; 
 --cademi-blue: #1A2D5A; 
 --cademi-text: #323232; 
 --cademi-text-light: #555555; 
 --cademi-border: #f0f0f0; 
 --cademi-white: #ffffff; 
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
 position: relative; 
 box-sizing: border-box; 
 width: 100%; 
 z-index: 1000; 
 } 
 #cademi-mega-menu * { 
 box-sizing: border-box; 
 margin: 0; 
 padding: 0; 
 } 
 /* Main navigation container - centered */ 
 #cademi-mega-menu .cademi-nav-container { 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 padding: 0 20px; 
 position: relative; 
 height: 60px; 
 } 
 /* Navigation links */ 
 #cademi-mega-menu .cademi-nav-links { 
 display: flex; 
 list-style: none; 
 gap: 40px; 
 align-items: center; 
 justify-content: center; 
 } 
 #cademi-mega-menu .cademi-nav-item { 
 position: relative; 
 } 
 #cademi-mega-menu .cademi-nav-link { 
 color: var(--cademi-text); 
 font-size: 18px; /* Exactly 18px as requested */ 
 text-decoration: none; 
 padding: 8px 0; 
 display: block; 
 font-weight: 500; 
 transition: color 0.3s ease; 
 position: relative; 
 font-family: 'Inter', sans-serif; 
 } 
 #cademi-mega-menu .cademi-nav-link:hover { 
 color: var(--cademi-primary); 
 } 
 /* Dropdown styling */ 
 #cademi-mega-menu .cademi-dropdown { 
 position: absolute; 
 top: 100%; 
 left: 50%; 
 transform: translateX(-50%) translateY(10px); 
 background-color: var(--cademi-white); 
 border-radius: 12px; 
 opacity: 0; 
 visibility: hidden; 
 transition: all 0.3s ease; 
 box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); 
 z-index: 1001; 
 overflow: hidden; 
 margin-top: 15px; 
 } 
 #cademi-mega-menu .cademi-dropdown::before { 
 content: ''; 
 position: absolute; 
 top: -8px; 
 left: 50%; 
 transform: translateX(-50%) rotate(45deg); 
 width: 16px; 
 height: 16px; 
 background-color: var(--cademi-white); 
 box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.04); 
 z-index: 1; 
 } 
 #cademi-mega-menu .cademi-nav-item:hover .cademi-dropdown { 
 opacity: 1; 
 visibility: visible; 
 transform: translateX(-50%) translateY(0); 
 } 
 /* Why Us dropdown */ 
 #cademi-mega-menu .cademi-why-us-dropdown { 
 width: 700px; 
 } 
 #cademi-mega-menu .cademi-why-us-content { 
 display: flex; 
 padding: 30px; 
 } 
 #cademi-mega-menu .cademi-why-us-main { 
 flex: 1; 
 padding-right: 30px; 
 } 
 #cademi-mega-menu .cademi-why-us-heading { 
 font-size: 16px; /* Smaller heading size */ 
 font-weight: 700; 
 color: var(--cademi-primary); 
 margin-bottom: 15px; 
 } 
 #cademi-mega-menu .cademi-why-us-description { 
 font-size: 14px; 
 line-height: 1.6; 
 color: var(--cademi-text); 
 margin-bottom: 20px; 
 } 
 #cademi-mega-menu .cademi-why-us-points { 
 display: flex; 
 flex-direction: column; 
 gap: 12px; 
 } 
 #cademi-mega-menu .cademi-why-us-point { 
 display: flex; 
 align-items: flex-start; 
 gap: 10px; 
 } 
 #cademi-mega-menu .cademi-point-icon { 
 width: 22px; 
 height: 22px; 
 flex-shrink: 0; 
 border-radius: 50%; 
 background-color: var(--cademi-primary-light); 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 color: var(--cademi-primary); 
 font-weight: 700; 
 font-size: 12px; 
 } 
 #cademi-mega-menu .cademi-point-text { 
 font-size: 14px; 
 color: var(--cademi-text); 
 } 
 #cademi-mega-menu .cademi-testimonial { 
 flex: 0 0 240px; 
 background-color: var(--cademi-primary-light); 
 border-radius: 8px; 
 padding: 20px; 
 display: flex; 
 flex-direction: column; 
 } 
 #cademi-mega-menu .cademi-testimonial-text { 
 font-size: 14px; 
 line-height: 1.5; 
 color: var(--cademi-blue) !important; /* Force blue color for testimonial */ 
 font-style: italic; 
 margin-bottom: 15px; 
 flex-grow: 1; 
 } 
 #cademi-mega-menu .cademi-testimonial-author { 
 font-size: 14px; 
 font-weight: 600; 
 color: var(--cademi-blue); 
 } 
 #cademi-mega-menu .cademi-testimonial-company { 
 font-size: 13px; 
 color: var(--cademi-text-light); 
 } 
 /* Features dropdown */ 
 #cademi-mega-menu .cademi-features-dropdown { 
 width: 800px; 
 } 
 #cademi-mega-menu .cademi-features-content { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 20px; 
 padding: 30px; 
 } 
 #cademi-mega-menu .cademi-feature-card { 
 border-radius: 8px; 
 transition: all 0.3s ease; 
 padding: 16px; 
 background-color: var(--cademi-white); 
 } 
 #cademi-mega-menu .cademi-feature-title { 
 font-size: 15px; 
 font-weight: 600; 
 color: var(--cademi-blue); 
 margin-bottom: 8px; 
 } 
 #cademi-mega-menu .cademi-feature-description { 
 font-size: 14px; 
 color: var(--cademi-text-light); 
 line-height: 1.5; 
 } 
 #cademi-mega-menu .cademi-features-cta { 
 grid-column: 1 / -1; 
 text-align: center; 
 margin-top: 10px; 
 } 
 #cademi-mega-menu .cademi-features-cta-link { 
 display: inline-block; 
 padding: 10px 25px; 
 background-color: var(--cademi-primary); 
 color: white; 
 font-weight: 500; 
 font-size: 15px; 
 text-decoration: none; 
 border-radius: 6px; 
 transition: all 0.3s ease; 
 } 
 #cademi-mega-menu .cademi-features-cta-link:hover { 
 background-color: var(--cademi-blue); 
 } 
 /* Compare dropdown */ 
 #cademi-mega-menu .cademi-compare-dropdown { 
 width: 600px; 
 } 
 #cademi-mega-menu .cademi-compare-content { 
 padding: 30px; 
 } 
 #cademi-mega-menu .cademi-compare-heading { 
 font-size: 16px; 
 font-weight: 700; 
 color: var(--cademi-blue); 
 margin-bottom: 20px; 
 text-align: center; 
 } 
 #cademi-mega-menu .cademi-comparison-highlights { 
 display: grid; 
 grid-template-columns: repeat(3, 1fr); 
 gap: 20px; 
 margin-bottom: 25px; 
 } 
 #cademi-mega-menu .cademi-comparison-point { 
 background-color: var(--cademi-primary-light); 
 border-radius: 8px; 
 padding: 15px; 
 text-align: center; 
 } 
 #cademi-mega-menu .cademi-comparison-number { 
 font-size: 24px; 
 font-weight: 700; 
 color: var(--cademi-primary); 
 margin-bottom: 5px; 
 } 
 #cademi-mega-menu .cademi-comparison-label { 
 font-size: 14px; 
 color: var(--cademi-text); 
 font-weight: 500; 
 } 
 #cademi-mega-menu .cademi-competitors { 
 display: flex; 
 justify-content: space-between; 
 gap: 15px; 
 margin-bottom: 25px; 
 } 
 #cademi-mega-menu .cademi-competitor { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 padding: 10px; 
 border-radius: 8px; 
 border: 1px solid var(--cademi-border); 
 width: 100%; 
 } 
 #cademi-mega-menu .cademi-competitor-name { 
 font-size: 14px; 
 font-weight: 600; 
 color: var(--cademi-text); 
 } 
 #cademi-mega-menu .cademi-competitor-checkmark { 
 display: inline-block; 
 width: 18px; 
 height: 18px; 
 background-color: var(--cademi-secondary); 
 border-radius: 50%; 
 color: white; 
 text-align: center; 
 line-height: 18px; 
 font-size: 12px; 
 font-weight: 700; 
 } 
 /* Solutions dropdown */ 
 #cademi-mega-menu .cademi-solutions-dropdown { 
 width: 900px; 
 } 
 #cademi-mega-menu .cademi-solutions-content { 
 padding: 25px; 
 display: flex; 
 gap: 25px; 
 } 
 #cademi-mega-menu .cademi-solutions-category { 
 flex: 1; 
 } 
 #cademi-mega-menu .cademi-category-heading { 
 font-size: 16px; 
 font-weight: 700; 
 color: var(--cademi-blue); 
 margin-bottom: 12px; 
 } 
 #cademi-mega-menu .cademi-solutions-grid { 
 display: grid; 
 grid-template-columns: 1fr; 
 gap: 10px; 
 } 
 #cademi-mega-menu .cademi-solution-card { 
 border-radius: 8px; 
 transition: all 0.3s ease; 
 padding: 15px; 
 text-decoration: none; 
 display: block; 
 } 
 #cademi-mega-menu .cademi-solution-card:hover { 
 background-color: var(--cademi-primary-light); 
 } 
 #cademi-mega-menu .cademi-solution-title { 
 font-size: 15px; 
 font-weight: 600; 
 color: var(--cademi-blue); 
 margin-bottom: 6px; 
 transition: all 0.3s ease; 
 } 
 #cademi-mega-menu .cademi-solution-card:hover .cademi-solution-title { 
 color: var(--cademi-primary); 
 } 
 #cademi-mega-menu .cademi-solution-description { 
 font-size: 14px; 
 color: var(--cademi-text-light); 
 line-height: 1.5; 
 margin-bottom: 10px; 
 } 
 #cademi-mega-menu .cademi-learn-more { 
 font-size: 14px; 
 color: var(--cademi-primary); 
 font-weight: 600; 
 display: flex; 
 align-items: center; 
 gap: 5px; 
 transition: all 0.3s ease; 
 } 
 #cademi-mega-menu .cademi-solution-card:hover .cademi-learn-more { 
 color: var(--cademi-blue); 
 } 
 /* Resources dropdown */ 
 #cademi-mega-menu .cademi-resources-dropdown { 
 width: 750px; 
 } 
 #cademi-mega-menu .cademi-resources-content { 
 display: flex; 
 padding: 30px; 
 gap: 30px; 
 } 
 #cademi-mega-menu .cademi-resources-links { 
 flex: 0 0 170px; 
 } 
 #cademi-mega-menu .cademi-resources-title { 
 font-size: 16px; 
 font-weight: 700; 
 color: var(--cademi-blue); 
 margin-bottom: 15px; 
 } 
 #cademi-mega-menu .cademi-resources-menu { 
 list-style: none; 
 } 
 #cademi-mega-menu .cademi-resources-item { 
 margin-bottom: 12px; 
 } 
 #cademi-mega-menu .cademi-resources-link { 
 color: var(--cademi-text); 
 text-decoration: none; 
 font-size: 15px; 
 display: block; 
 padding: 5px 0; 
 transition: all 0.3s ease; 
 } 
 #cademi-mega-menu .cademi-resources-link:hover { 
 color: var(--cademi-primary); 
 } 
 #cademi-mega-menu .cademi-featured-article { 
 flex: 1; 
 border-radius: 12px; 
 overflow: hidden; 
 position: relative; 
 height: 250px; 
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
 } 
 #cademi-mega-menu .cademi-article-image { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
 z-index: 1; 
 } 
 #cademi-mega-menu .cademi-article-overlay { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%); 
 z-index: 2; 
 } 
 #cademi-mega-menu .cademi-article-content { 
 position: relative; 
 z-index: 3; 
 padding: 25px; 
 display: flex; 
 flex-direction: column; 
 height: 100%; 
 justify-content: flex-end; 
 } 
 #cademi-mega-menu .cademi-article-tag { 
 background-color: var(--cademi-primary); 
 color: white; 
 padding: 4px 10px; 
 border-radius: 4px; 
 font-size: 12px; 
 font-weight: 600; 
 display: inline-block; 
 margin-bottom: 15px; 
 align-self: flex-start; 
 } 
 #cademi-mega-menu .cademi-article-title { 
 font-size: 18px; 
 font-weight: 700; 
 color: white !important; 
 margin-bottom: 10px; 
 } 
 #cademi-mega-menu .cademi-article-excerpt { 
 font-size: 14px; 
 color: rgba(255, 255, 255, 0.8); 
 line-height: 1.5; 
 } 
 #cademi-mega-menu .cademi-article-link { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 z-index: 4; 
 text-decoration: none; 
 } 
 /* Mobile menu toggle */ 
 #cademi-mega-menu .cademi-mobile-toggle { 
 display: none; 
 flex-direction: column; 
 justify-content: space-between; 
 width: 30px; 
 height: 20px; 
 cursor: pointer; 
 } 
 #cademi-mega-menu .cademi-mobile-toggle span { 
 width: 100%; 
 height: 2px; 
 background-color: var(--cademi-text); 
 transition: all 0.3s ease; 
 } 
 /* Responsive styles */ 
 @media (max-width: 1024px) { 
 #cademi-mega-menu .cademi-dropdown { 
 width: 90vw !important; 
 max-width: 600px; 
 } 
 #cademi-mega-menu .cademi-why-us-content, 
 #cademi-mega-menu .cademi-resources-content, 
 #cademi-mega-menu .cademi-solutions-content { 
 flex-direction: column; 
 } 
 #cademi-mega-menu .cademi-resources-links { 
 flex: auto; 
 width: 100%; 
 } 
 #cademi-mega-menu .cademi-features-content { 
 grid-template-columns: repeat(2, 1fr); 
 } 
 #cademi-mega-menu .cademi-comparison-highlights { 
 grid-template-columns: 1fr; 
 } 
 } 
 @media (max-width: 768px) { 
 #cademi-mega-menu .cademi-mobile-toggle { 
 display: flex; 
 } 
 #cademi-mega-menu .cademi-nav-container { 
 justify-content: space-between; 
 padding: 0 20px; 
 } 
 #cademi-mega-menu .cademi-nav-links { 
 position: fixed; 
 top: 60px; 
 left: 0; 
 width: 100%; 
 background-color: var(--cademi-white); 
 flex-direction: column; 
 align-items: stretch; 
 padding: 20px; 
 gap: 10px; 
 box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); 
 transform: translateY(-100%); 
 opacity: 0; 
 visibility: hidden; 
 transition: all 0.3s ease; 
 z-index: 1000; 
 } 
 #cademi-mega-menu.menu-open .cademi-nav-links { 
 transform: translateY(0); 
 opacity: 1; 
 visibility: visible; 
 } 
 #cademi-mega-menu .cademi-dropdown { 
 position: static; 
 transform: none; 
 width: 100% !important; 
 max-width: none; 
 box-shadow: none; 
 margin-top: 10px; 
 margin-bottom: 15px; 
 display: none; 
 } 
 #cademi-mega-menu .cademi-dropdown::before { 
 display: none; 
 } 
 #cademi-mega-menu .cademi-nav-item.dropdown-open .cademi-dropdown { 
 display: block; 
 opacity: 1; 
 visibility: visible; 
 } 
 #cademi-mega-menu .cademi-nav-link { 
 padding: 12px 0; 
 border-bottom: 1px solid var(--cademi-border); 
 } 
 #cademi-mega-menu .cademi-features-content { 
 grid-template-columns: 1fr; 
 } 
 } 
 </style> 
 <div class="cademi-nav-container"> 
 <div class="cademi-mobile-toggle"> 
 <span> 
 </span> 
 <span> 
 </span> 
 <span> 
 </span> 
 </div> 
 <ul class="cademi-nav-links"> 
 <li class="cademi-nav-item"> 
 <a href="https://cademi.io/why-choose-us" class="cademi-nav-link"> 
 Why Us? 
 </a> 
 <div class="cademi-dropdown cademi-why-us-dropdown"> 
 <div class="cademi-why-us-content"> 
 <div class="cademi-why-us-main"> 
 <h5 class="cademi-why-us-heading"> 
 Why choose Cademi? 
 </h5> 
 <p class="cademi-why-us-description"> 
 Cademi makes employee training simple, engaging, and impactful with our all-in-one learning management system. 
 </p> 
 <div class="cademi-why-us-points"> 
 <div class="cademi-why-us-point"> 
 <div class="cademi-point-icon"> 
 ✓ 
 </div> 
 <div class="cademi-point-text"> 
 Smart course matching with AI-powered psychometrics 
 </div> 
 </div> 
 <div class="cademi-why-us-point"> 
 <div class="cademi-point-icon"> 
 ✓ 
 </div> 
 <div class="cademi-point-text"> 
 Automate admin tasks to focus on your people 
 </div> 
 </div> 
 <div class="cademi-why-us-point"> 
 <div class="cademi-point-icon"> 
 ✓ 
 </div> 
 <div class="cademi-point-text"> 
 Access 800+ courses in 35+ languages 
 </div> 
 </div> 
 <div class="cademi-why-us-point"> 
 <div class="cademi-point-icon"> 
 ✓ 
 </div> 
 <div class="cademi-point-text"> 
 Measure impact with real-time analytics 
 </div> 
 </div> 
 </div> 
 </div> 
 <div class="cademi-testimonial"> 
 <div class="cademi-testimonial-text"> 
 "The training courses are varied and indepth. They can be Tailored to what level is required too. Course information is well presented and kept interesting with a mix of videos and text. Highly recommend." 
 </div> 
 <div class="cademi-testimonial-author"> 
 Rachel Brown 
 </div> 
 <div class="cademi-testimonial-company"> 
 Liam to confirm 
 </div> 
 </div> 
 </div> 
 </div> 
 </li> 
 <li class="cademi-nav-item"> 
 <a href="https://cademi.io/features" class="cademi-nav-link"> 
 Features 
 </a> 
 <div class="cademi-dropdown cademi-features-dropdown"> 
 <div class="cademi-features-content"> 
 <div class="cademi-feature-card"> 
 <h5 class="cademi-feature-title"> 
 Smart Course Management 
 </h5> 
 <p class="cademi-feature-description"> 
 AI-powered course matching to close skill gaps faster 
 </p> 
 </div> 
 <div class="cademi-feature-card"> 
 <h5 class="cademi-feature-title"> 
 Automated Administration 
 </h5> 
 <p class="cademi-feature-description"> 
 Put learning admin on auto-pilot to focus on people 
 </p> 
 </div> 
 <div class="cademi-feature-card"> 
 <h5 class="cademi-feature-title"> 
 Custom Content Creation 
 </h5> 
 <p class="cademi-feature-description"> 
 Build courses in minutes with intuitive tools 
 </p> 
 </div> 
 <div class="cademi-feature-card"> 
 <h5 class="cademi-feature-title"> 
 Real-Time Reporting 
 </h5> 
 <p class="cademi-feature-description"> 
 Track progress with live analytics dashboards 
 </p> 
 </div> 
 <div class="cademi-feature-card"> 
 <h5 class="cademi-feature-title"> 
 Personalised Learning 
 </h5> 
 <p class="cademi-feature-description"> 
 Custom learning paths for individual development 
 </p> 
 </div> 
 <div class="cademi-feature-card"> 
 <h5 class="cademi-feature-title"> 
 Mobile Learning 
 </h5> 
 <p class="cademi-feature-description"> 
 Learn anywhere with responsive mobile support 
 </p> 
 </div> 
 <div class="cademi-features-cta"> 
 <a href="https://cademi.io/features" class="cademi-features-cta-link"> 
 See All Features 
 </a> 
 </div> 
 </div> 
 </div> 
 </li> 
 <li class="cademi-nav-item"> 
 <a href="https://cademi.io/compare" class="cademi-nav-link"> 
 Compare 
 </a> 
 <div class="cademi-dropdown cademi-compare-dropdown"> 
 <div class="cademi-compare-content"> 
 <h5 class="cademi-compare-heading"> 
 Why Cademi outperforms other LMS platforms 
 </h5> 
 <div class="cademi-comparison-highlights"> 
 <div class="cademi-comparison-point"> 
 <div class="cademi-comparison-number"> 
 800+ 
 </div> 
 <div class="cademi-comparison-label"> 
 Courses Available 
 </div> 
 </div> 
 <div class="cademi-comparison-point"> 
 <div class="cademi-comparison-number"> 
 35+ 
 </div> 
 <div class="cademi-comparison-label"> 
 Languages 
 </div> 
 </div> 
 <div class="cademi-comparison-point"> 
 <div class="cademi-comparison-number"> 
 99% 
 </div> 
 <div class="cademi-comparison-label"> 
 Customer Satisfaction 
 </div> 
 </div> 
 </div> 
 <div class="cademi-competitors"> 
 <div class="cademi-competitor"> 
 <span class="cademi-competitor-checkmark"> 
 ✓ 
 </span> 
 <span class="cademi-competitor-name"> 
 vs iHasco 
 </span> 
 </div> 
 <div class="cademi-competitor"> 
 <span class="cademi-competitor-checkmark"> 
 ✓ 
 </span> 
 <span class="cademi-competitor-name"> 
 vs Kallidus 
 </span> 
 </div> 
 <div class="cademi-competitor"> 
 <span class="cademi-competitor-checkmark"> 
 ✓ 
 </span> 
 <span class="cademi-competitor-name"> 
 vs HowNow 
 </span> 
 </div> 
 </div> 
 </div> 
 </div> 
 </li> 
 <li class="cademi-nav-item"> 
 <a href="https://cademi.io/solutions" class="cademi-nav-link"> 
 Solutions 
 </a> 
 <div class="cademi-dropdown cademi-solutions-dropdown"> 
 <div class="cademi-solutions-content"> 
 <div class="cademi-solutions-category"> 
 <h5 class="cademi-category-heading"> 
 By Business Need 
 </h5> 
 <div class="cademi-solutions-grid"> 
 <a href="https://cademi.io/solutions/human-resources" class="cademi-solution-card"> 
 <h5 class="cademi-solution-title"> 
 Human Resources 
 </h5> 
 <p class="cademi-solution-description"> 
 Complete learning solutions tailored for human resources departments. 
 </p> 
 <span class="cademi-learn-more"> 
 Learn more → 
 </span> 
 </a> 
 <a href="https://cademi.io/solutions/operations" class="cademi-solution-card"> 
 <h5 class="cademi-solution-title"> 
 Operations 
 </h5> 
 <p class="cademi-solution-description"> 
 Streamline training processes and enhance operational efficiency. 
 </p> 
 <span class="cademi-learn-more"> 
 Learn more → 
 </span> 
 </a> 
 <a href="https://cademi.io/solutions/compliance" class="cademi-solution-card"> 
 <h5 class="cademi-solution-title"> 
 Compliance 
 </h5> 
 <p class="cademi-solution-description"> 
 Ensure regulatory compliance with targeted training programmes. 
 </p> 
 <span class="cademi-learn-more"> 
 Learn more → 
 </span> 
 </a> 
 </div> 
 </div> 
 <div class="cademi-solutions-category"> 
 <h5 class="cademi-category-heading"> 
 By Solution Type 
 </h5> 
 <div class="cademi-solutions-grid"> 
 <a href="https://cademi.io/solutions/learning-management-software" class="cademi-solution-card"> 
 <h5 class="cademi-solution-title"> 
 Learning Management Software 
 </h5> 
 <p class="cademi-solution-description"> 
 Comprehensive LMS platform with advanced analytics and personalisation. 
 </p> 
 <span class="cademi-learn-more"> 
 Learn more → 
 </span> 
 </a> 
 <a href="https://cademi.io/solutions/holistic-learning" class="cademi-solution-card"> 
 <h5 class="cademi-solution-title"> 
 Holistic Learning 
 </h5> 
 <p class="cademi-solution-description"> 
 Integrated approach to learning that addresses all aspects of employee development. 
 </p> 
 <span class="cademi-learn-more"> 
 Learn more → 
 </span> 
 </a> 
 <a href="https://cademi.io/solutions/cpd" class="cademi-solution-card"> 
 <h5 class="cademi-solution-title"> 
 Continuous Personal Development (CPD) 
 </h5> 
 <p class="cademi-solution-description"> 
 Support ongoing certification and personal/professional growth requirements. 
 </p> 
 <span class="cademi-learn-more"> 
 Learn more → 
 </span> 
 </a> 
 </div> 
 </div> 
 </div> 
 </div> 
 </li> 
 <li class="cademi-nav-item"> 
 <span class="cademi-nav-link"> 
 Resources 
 </span> 
 <div class="cademi-dropdown cademi-resources-dropdown"> 
 <div class="cademi-resources-content"> 
 <div class="cademi-resources-links"> 
 <h5 class="cademi-resources-title"> 
 Resources 
 </h5> 
 <ul class="cademi-resources-menu"> 
 <li class="cademi-resources-item"> 
 <a href="https://cademi.io/about" class="cademi-resources-link"> 
 About Us 
 </a> 
 </li> 
 <li class="cademi-resources-item"> 
 <a href="https://cademi.io/contact" class="cademi-resources-link"> 
 Contact 
 </a> 
 </li> 
 <li class="cademi-resources-item"> 
 <a href="https://cademi.io/blog" class="cademi-resources-link"> 
 Blog 
 </a> 
 </li> 
 </ul> 
 </div> 
 <div class="cademi-featured-article"> 
 <img src="https://irp.cdn-website.com/cf86b44f/dms3rep/multi/Workers-2-scaled.jpg" alt="Featured Article" class="cademi-article-image"> 
 <div class="cademi-article-overlay"> 
 </div> 
 <div class="cademi-article-content"> 
 <span class="cademi-article-tag"> 
 FEATURED 
 </span> 
 <h5 class="cademi-article-title"> 
 How to Create an Effective L&amp;D Strategy for 2025 
 </h5> 
 <p class="cademi-article-excerpt"> 
 Discover the key trends and strategies to make your learning and development initiatives more impactful. 
 </p> 
 </div> 
 <a href="https://www.cademi.io/blog/how-to-create-an-effective-l-d-strategy-for-2025" class="cademi-article-link" aria-label="Read How to Create an Effective L&amp;D Strategy for 2025"> 
 </a> 
 </div> 
 </div> 
 </div> 
 </li> 
 </ul> 
 </div> 
 <script> 
 (function() { 
 const mobileToggle = document.querySelector('#cademi-mega-menu .cademi-mobile-toggle'); 
 const megaMenu = document.getElementById('cademi-mega-menu'); 
 const navItems = document.querySelectorAll('#cademi-mega-menu .cademi-nav-item'); 
 if (mobileToggle) { 
 mobileToggle.addEventListener('click', function() { 
 megaMenu.classList.toggle('menu-open'); 
 }); 
 } 
 function setupMobileDropdowns() { 
 if (window.innerWidth <= 768) { 
 navItems.forEach(item => { 
 const link = item.querySelector('.cademi-nav-link'); 
 const dropdown = item.querySelector('.cademi-dropdown'); 
 if (link && dropdown) { 
 if (!link.hasAttribute('data-event-added')) { 
 link.setAttribute('data-event-added', 'true'); 
 link.addEventListener('click', function(e) { 
 if (!link.getAttribute('href') || link.getAttribute('href') === '#') { 
 e.preventDefault(); 
 navItems.forEach(otherItem => { 
 if (otherItem !== item) { 
 otherItem.classList.remove('dropdown-open'); 
 } 
 }); 
 item.classList.toggle('dropdown-open'); 
 } 
 }); 
 } 
 } 
 }); 
 } 
 } 
 setupMobileDropdowns(); 
 window.addEventListener('resize', setupMobileDropdowns); 
 })(); 
 </script> 
 </div> 
 </div>