.elementor-17697 .elementor-element.elementor-element-814e73d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:center;--margin-top:0px;--margin-bottom:-80px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;--z-index:2001;}.elementor-17697 .elementor-element.elementor-element-814e73d:not(.elementor-motion-effects-element-type-background), .elementor-17697 .elementor-element.elementor-element-814e73d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6F6F5B0;}.elementor-17697 .elementor-element.elementor-element-1af1e7b0{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );}.elementor-17697 .elementor-element.elementor-element-d2e3523{--display:flex;--flex-direction:row-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:center;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:30px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-17697 .elementor-element.elementor-element-f58d780.elementor-element{--align-self:center;}.elementor-17697 .elementor-element.elementor-element-f58d780 .elementor-icon-wrapper{text-align:center;}.elementor-17697 .elementor-element.elementor-element-f58d780.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-b79f386 );}.elementor-17697 .elementor-element.elementor-element-f58d780.elementor-view-framed .elementor-icon, .elementor-17697 .elementor-element.elementor-element-f58d780.elementor-view-default .elementor-icon{color:var( --e-global-color-b79f386 );border-color:var( --e-global-color-b79f386 );}.elementor-17697 .elementor-element.elementor-element-f58d780.elementor-view-framed .elementor-icon, .elementor-17697 .elementor-element.elementor-element-f58d780.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-b79f386 );}.elementor-17697 .elementor-element.elementor-element-f58d780 .elementor-icon{font-size:20px;}.elementor-17697 .elementor-element.elementor-element-f58d780 .elementor-icon svg{height:20px;}.elementor-widget-mega-menu{--n-menu-divider-color:var( --e-global-color-text );}.elementor-17697 .elementor-element.elementor-element-42ea3e42{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:25px 25px 25px 25px;box-shadow:0px 0px 12px -3px rgba(0, 0, 0, 0.14901960784313725);--margin-top:-2px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17697 .elementor-element.elementor-element-42ea3e42.e-con{--align-self:center;}.elementor-17697 .elementor-element.elementor-element-c7dd41e{width:100%;max-width:100%;}.elementor-17697 .elementor-element.elementor-element-4bf69f6b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--border-radius:0px 0px 20px 20px;box-shadow:0px 0px 12px -3px rgba(0, 0, 0, 0.14901960784313725);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17697 .elementor-element.elementor-element-4bf69f6b:not(.elementor-motion-effects-element-type-background), .elementor-17697 .elementor-element.elementor-element-4bf69f6b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(90deg, #FFFFFF 29%, #F8FFFB 100%);}.elementor-17697 .elementor-element.elementor-element-4bf69f6b.e-con{--align-self:center;}.elementor-17697 .elementor-element.elementor-element-73edb92d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--flex-wrap:wrap;--border-radius:0px 0px 20px 20px;box-shadow:0px 0px 12px -3px rgba(0, 0, 0, 0.14901960784313725);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:340px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-17697 .elementor-element.elementor-element-73edb92d.e-con{--align-self:flex-end;}.elementor-17697 .elementor-element.elementor-element-f5ee273{width:100%;max-width:100%;}.elementor-17697 .elementor-element.elementor-element-4b7acbe1{--display:flex;--justify-content:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:0px 0px 20px 20px;box-shadow:0px 0px 12px -3px rgba(0, 0, 0, 0.14901960784313725);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0180px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-17697 .elementor-element.elementor-element-4b7acbe1.e-con{--align-self:flex-end;}.elementor-17697 .elementor-element.elementor-element-3c6ef3c8{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:center;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:center;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:20px;--n-menu-open-animation-duration:300ms;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:15px;--n-menu-title-font-size:15px;--n-menu-title-transition:300ms;--n-menu-icon-size:15px;--n-menu-dropdown-indicator-size:15px;--n-menu-dropdown-indicator-space:3px;--n-menu-dropdown-indicator-color-normal:#00A8A5;--n-menu-dropdown-indicator-color-hover:var( --e-global-color-b79f386 );--n-menu-dropdown-indicator-color-active:var( --e-global-color-b79f386 );--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-17697 .elementor-element.elementor-element-3c6ef3c8 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-17697 .elementor-element.elementor-element-3c6ef3c8 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-17697 .elementor-element.elementor-element-3c6ef3c8 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:"Poppins", sans-serif;font-weight:500;}.elementor-17697 .elementor-element.elementor-element-3c6ef3c8 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title:hover:not( .e-current ){border-style:none;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-17697 .elementor-element.elementor-element-d2e3523{--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-17697 .elementor-element.elementor-element-42ea3e42{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-17697 .elementor-element.elementor-element-3c6ef3c8{--n-menu-heading-justify-content:flex-end;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:flex-end;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;padding:10px 10px 10px 10px;--n-menu-toggle-align:flex-end;}}@media(max-width:767px){.elementor-17697 .elementor-element.elementor-element-814e73d{--justify-content:space-between;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17697 .elementor-element.elementor-element-1af1e7b0{--width:68%;}.elementor-17697 .elementor-element.elementor-element-d2e3523{--width:26%;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-17697 .elementor-element.elementor-element-f58d780{width:var( --container-widget-width, 30% );max-width:30%;--container-widget-width:30%;--container-widget-flex-grow:0;}.elementor-17697 .elementor-element.elementor-element-42ea3e42{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-17697 .elementor-element.elementor-element-4bf69f6b{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-17697 .elementor-element.elementor-element-73edb92d{--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-17697 .elementor-element.elementor-element-73edb92d.e-con{--align-self:flex-end;}.elementor-17697 .elementor-element.elementor-element-f5ee273{width:var( --container-widget-width, 73% );max-width:73%;--container-widget-width:73%;--container-widget-flex-grow:0;}.elementor-17697 .elementor-element.elementor-element-4b7acbe1{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-17697 .elementor-element.elementor-element-3c6ef3c8{--n-menu-title-distance-from-content:0px;width:var( --container-widget-width, 30% );max-width:30%;padding:10px 10px 10px 10px;--container-widget-width:30%;--container-widget-flex-grow:0;--n-menu-toggle-align:center;--n-menu-title-space-between:0px;--n-menu-title-padding:20px 20px 20px 20px;--n-menu-toggle-icon-distance-from-dropdown:20px;}.elementor-17697 .elementor-element.elementor-element-3c6ef3c8.elementor-element{--align-self:center;}}@media(min-width:768px){.elementor-17697 .elementor-element.elementor-element-814e73d{--content-width:1270px;}.elementor-17697 .elementor-element.elementor-element-1af1e7b0{--width:25%;}.elementor-17697 .elementor-element.elementor-element-d2e3523{--width:65%;}.elementor-17697 .elementor-element.elementor-element-42ea3e42{--width:65%;}.elementor-17697 .elementor-element.elementor-element-4bf69f6b{--width:65%;}.elementor-17697 .elementor-element.elementor-element-73edb92d{--width:18%;}.elementor-17697 .elementor-element.elementor-element-4b7acbe1{--width:17%;}}@media(max-width:1024px) and (min-width:768px){.elementor-17697 .elementor-element.elementor-element-1af1e7b0{--width:40%;}.elementor-17697 .elementor-element.elementor-element-d2e3523{--width:30%;}}/* Start custom CSS for html, class: .elementor-element-c7dd41e *//* ========================================================= ASSETCUES MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-mega-menu, .ac-mega-menu * { box-sizing: border-box; } .ac-mega-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e5e7e9; --ac-soft: #eaf6f5; width: 100%; display: flex; background: #fff; color: var(--ac-dark); font-family: inherit; border-radius: 0 0 22px 22px; overflow: hidden; } /* ========================================================= LEFT NAVIGATION ========================================================= */ .ac-mega-nav { width: 300px; flex: 0 0 300px; padding: 26px 12px 26px 18px; background: var(--ac-soft); } /* ========================================================= MENU SECTIONS ========================================================= */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 8px; padding-top: 15px; border-top: 1px solid rgba(60,156,160,.30); } /* ========================================================= SECTION TITLES ========================================================= */ .ac-menu-section-title { padding: 0 20px 9px; color: #202020; font-size: 16px; line-height: 1.25; font-weight: 700; } /* ========================================================= NAV ITEM ========================================================= */ .ac-mega-nav-item { position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; padding: 8px 12px 8px 20px; border: 1px solid transparent; border-radius: 11px; background: transparent !important; color: #202020 !important; font-family: inherit; font-size: 15px; line-height: 1.25; font-weight: 500; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; appearance: none; -webkit-appearance: none; box-shadow: none !important; text-decoration: none !important; } .ac-mega-nav-item:hover { background: rgba(255,255,255,.65) !important; color: #202020 !important; border-color: transparent !important; } .ac-mega-nav-item:focus, .ac-mega-nav-item:focus-visible { outline: none !important; box-shadow: none !important; } .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } /* ========================================================= NAV ARROW ========================================================= */ .ac-nav-arrow { flex: 0 0 auto; font-size: 23px; line-height: 16px; font-weight: 400; color: var(--ac-teal) !important; transform: translateY(-1px); } /* ========================================================= RIGHT CONTENT ========================================================= */ .ac-mega-content { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; } /* ========================================================= PANEL ========================================================= */ .ac-mega-panel { display: none; min-width: 0; padding: 26px 32px 0; animation: acMegaFade .18s ease; } /* IMPORTANT: Active panel becomes a flex column so the CTA can be pushed to the bottom of the available menu height. */ .ac-mega-panel.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; } @keyframes acMegaFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PANEL HEADER ========================================================= */ .ac-mega-top { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .ac-mega-title-wrap { min-width: 0; } .ac-mega-top h2 { margin: 0 0 6px; color: var(--ac-blue) !important; font-size: 17px; line-height: 1.25; font-weight: 700; } .ac-mega-top p { max-width: 700px; margin: 0; color: #60646a !important; font-size: 13px; line-height: 1.45; } /* ========================================================= EXPLORE BUTTON ========================================================= */ .ac-mega-menu .ac-explore-btn { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--ac-blue) !important; border-radius: 20px !important; background: #fff !important; color: var(--ac-blue) !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, color .18s ease; } .ac-mega-menu .ac-explore-btn:hover { background: var(--ac-blue) !important; color: #fff !important; } .ac-mega-menu .ac-explore-btn span { font-size: 15px; line-height: 9px; } /* ========================================================= DIVIDER ========================================================= */ .ac-mega-divider { width: 100%; height: 1px; margin: 15px 0 12px; background: var(--ac-border); } /* ========================================================= FEATURE GRID ========================================================= */ .ac-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 2px; } /* ========================================================= FEATURE CARD ========================================================= */ .ac-feature-card { position: relative; min-width: 0; min-height: 70px; display: flex; align-items: flex-start; gap: 13px; padding: 9px 10px; border-radius: 12px; /* IMPORTANT: No permanent background. Background appears only on hover. */ background: transparent !important; color: inherit !important; text-decoration: none !important; transition: background .18s ease, transform .18s ease; } /* Hover background only. No active/default blue background. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; color: inherit !important; transform: translateY(-1px); } /* Override any .featured class that may be present in the HTML. It must NOT create a permanent background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } /* Featured item gets blue/light background ONLY on hover. */ .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } /* ========================================================= FEATURE ICON ========================================================= */ .ac-feature-icon { width: 30px; height: 30px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= FEATURE COPY ========================================================= */ .ac-feature-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ac-feature-copy strong { display: block; color: #202124 !important; font-size: 13px; line-height: 1.25; font-weight: 600; } .ac-feature-copy small { display: block; color: #666b70 !important; font-size: 11px; line-height: 1.4; } /* ========================================================= CARD ARROW ========================================================= */ .ac-card-arrow { margin-left: auto; padding-top: 0; color: var(--ac-teal) !important; font-size: 18px; line-height: 1; font-weight: 400; flex: 0 0 auto; display: inline-block; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Feature arrow: ๐Ÿกข normal ๐Ÿกฅ hover */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow { transform: rotate(-45deg); } /* ========================================================= LEARN MORE ========================================================= */ .ac-learn-more { position: absolute; right: 9px; bottom: 7px; padding: 2px 6px; border: 1px solid var(--ac-blue); border-radius: 10px; color: var(--ac-blue); font-size: 8px; line-height: 1; font-weight: 500; } /* ========================================================= CTA ========================================================= */ .ac-mega-cta { position: relative; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 25px; /* Push CTA to the bottom of the active panel. */ margin: auto -32px 0; padding: 13px 94px; background: radial-gradient( circle at 8% 80%, rgba(91,211,190,.20) 0 1px, transparent 2px ); background-size: 13px 13px; background-color: #effaf7; overflow: hidden; } .ac-cta-content { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-cta-content strong { display: block; margin: 0 !important; color: #252525 !important; font-size: 15px; line-height: 1.25; font-weight: 700; } .ac-cta-content span { display: block; max-width: 390px; color: #4e555b !important; font-size: 12px; line-height: 1.45; } /* ========================================================= CTA BUTTON Elementor-safe reset ========================================================= */ .ac-mega-menu .ac-cta-button, .ac-mega-menu a.ac-cta-button { flex: 0 0 157px !important; width: 157px !important; min-width: 157px !important; max-width: 157px !important; height: auto !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 8px 18px !important; margin: 0 !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; transform: none; transition: transform .18s ease, background .18s ease; } .ac-mega-menu .ac-cta-button:hover, .ac-mega-menu .ac-cta-button:focus, .ac-mega-menu .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: translateY(-1px); } .ac-mega-menu .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 19px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-mega-nav { width: 250px; flex-basis: 250px; padding-left: 10px; } .ac-mega-panel { padding-left: 22px; padding-right: 22px; } .ac-mega-top { gap: 15px; } .ac-mega-top h2 { font-size: 16px; } .ac-mega-top p { font-size: 12px; } .ac-feature-grid { column-gap: 10px; } .ac-feature-card { gap: 9px; padding-left: 5px; padding-right: 5px; } .ac-feature-copy strong { font-size: 12px; } .ac-feature-copy small { font-size: 10.5px; } .ac-mega-cta { margin-left: -22px; margin-right: -22px; padding-left: 45px; padding-right: 45px; } } /* ========================================================= MOBILE ACCORDION ========================================================= */ @media (max-width: 767px) { .ac-mega-menu { display: block; width: 100%; border-radius: 0 0 16px 16px; overflow: hidden; } /* ------------------------------------------------------- NAV ------------------------------------------------------- */ .ac-mega-nav { width: 100%; padding: 16px 12px 10px; background: #fff; } /* ------------------------------------------------------- SECTION ------------------------------------------------------- */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ac-border); } /* ------------------------------------------------------- SECTION TITLE ------------------------------------------------------- */ .ac-menu-section-title { padding: 0 8px 7px; font-size: 14px; } /* ------------------------------------------------------- NAV ITEM ------------------------------------------------------- */ .ac-mega-nav-item { min-height: 44px; margin: 2px 0; padding: 9px 10px; border: 1px solid #e9ebed !important; border-radius: 9px; background: #fff !important; color: #202020 !important; font-size: 13px; } .ac-mega-nav-item:hover { background: #fff !important; border-color: #e9ebed !important; color: #202020 !important; } /* IMPORTANT: Active mobile navigation item keeps its border/text state but DOES NOT receive a filled background. */ .ac-mega-menu .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } .ac-mega-menu .ac-mega-nav-item.active *, .ac-mega-menu .ac-mega-nav-item.active span { color: var(--ac-teal) !important; -webkit-text-fill-color: var(--ac-teal) !important; } /* ------------------------------------------------------- MOBILE ARROW ------------------------------------------------------- */ .ac-nav-arrow { font-size: 22px; transition: transform .2s ease; } .ac-mega-nav-item.active .ac-nav-arrow { transform: rotate(90deg); } /* ------------------------------------------------------- CONTENT ------------------------------------------------------- */ .ac-mega-content { display: block; width: 100%; } /* On mobile the panel returns to normal document flow. This keeps the accordion compact. */ .ac-mega-panel { display: none; padding: 17px 12px 0; border-top: 1px solid var(--ac-border); flex: none; min-height: auto; } .ac-mega-panel.active { display: block; flex: none; min-height: auto; } /* ------------------------------------------------------- HEADER ------------------------------------------------------- */ .ac-mega-top { min-height: auto; display: block; } .ac-mega-top h2 { margin-bottom: 6px; font-size: 18px; } .ac-mega-top p { font-size: 13px; line-height: 1.45; } /* ------------------------------------------------------- EXPLORE ------------------------------------------------------- */ .ac-mega-menu .ac-explore-btn { margin-top: 11px !important; padding: 9px 13px !important; font-size: 12px !important; } /* ------------------------------------------------------- DIVIDER ------------------------------------------------------- */ .ac-mega-divider { margin: 15px 0 10px; } /* ------------------------------------------------------- FEATURES ------------------------------------------------------- */ .ac-feature-grid { grid-template-columns: 1fr; gap: 3px; } .ac-feature-card { min-height: 68px; padding: 9px 5px; border-radius: 10px; /* No permanent active background on mobile. */ background: transparent !important; } /* Mobile hover only. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; } /* Prevent .featured from bringing back the permanent blue background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } .ac-feature-icon { width: 30px; height: 30px; flex-basis: 30px; } .ac-feature-icon svg { width: 17px; height: 17px; } .ac-feature-copy strong { font-size: 14px; } .ac-feature-copy small { font-size: 12px; line-height: 1.4; } .ac-card-arrow { font-size: 17px; } .ac-learn-more { display: none; } /* ======================================================= MOBILE CTA ======================================================= */ .ac-mega-cta { min-height: auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; /* Mobile CTA remains inside normal accordion flow. */ margin: 10px -12px 0 !important; padding: 18px 18px 19px !important; } .ac-cta-content { min-width: 0; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } .ac-cta-content strong { font-size: 15px !important; line-height: 1.25 !important; } .ac-cta-content span { max-width: none !important; font-size: 12px !important; line-height: 1.45 !important; } /* ------------------------------------------------------- MOBILE CTA BUTTON โ€” FORCE HORIZONTAL ------------------------------------------------------- */ .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 120px !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; height: 38px !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 9px 10px !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button:hover, .ac-mega-menu .ac-mega-cta .ac-cta-button:focus, .ac-mega-menu .ac-mega-cta .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 17px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ .ac-mega-menu .ac-card-arrow { /* Hide the unsupported Unicode character */ font-size: 0 !important; width: 22px; min-width: 22px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--ac-teal) !important; transform: none !important; } /* Normal state โ†’ */ .ac-mega-menu .ac-card-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover state โ†— */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow::before, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow::before { transform: rotate(-45deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-mega-nav { padding-left: 10px; padding-right: 10px; } .ac-menu-section-title { font-size: 13px; } .ac-mega-nav-item { font-size: 12px; } .ac-mega-panel { padding-left: 10px; padding-right: 10px; } .ac-feature-copy strong { font-size: 13px; } .ac-feature-copy small { font-size: 11.5px; } /* Keep CTA horizontal even on very small screens */ .ac-mega-cta { gap: 8px !important; padding-left: 14px !important; padding-right: 14px !important; } .ac-cta-content { flex: 1 1 auto !important; min-width: 0 !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 36px !important; min-height: 36px !important; padding: 8px 8px !important; gap: 5px !important; font-size: 12px !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-94a04c0 *//* ========================================================= ASSETCUES SOLUTIONS MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-solutions-menu, .ac-solutions-menu * { box-sizing: border-box; } .ac-solutions-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e6eaee; --ac-soft-blue: #edf2fc; --ac-soft-green: #effaf7; width: 100%; padding: 28px 30px 24px; color: var(--ac-dark); } /* ========================================================= HEADER ========================================================= */ .ac-solutions-head { width: 100%; margin-bottom: 28px; } .ac-solutions-head h2 { margin: 0; color: #222; font-size: 17px; line-height: 1.25; font-weight: 700; } /* ========================================================= SOLUTIONS GRID ========================================================= */ .ac-solutions-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 22px; width: 100%; } /* ========================================================= SOLUTION CARD ========================================================= */ .ac-solution-card { position: relative; min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 28px; /* * Extra right padding keeps text away from arrow. */ padding: 13px 46px 13px 20px; border: 1px solid var(--ac-border); border-radius: 13px; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } /* ========================================================= REMOVE PERMANENT FEATURED BLUE BACKGROUND ========================================================= */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* ========================================================= HOVER Blue background ONLY on hover ========================================================= */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; color: inherit !important; text-decoration: none !important; transform: translateY(-1px); } /* Featured hover */ .ac-solutions-menu .ac-solution-card.ac-solution-featured:hover { background: var(--ac-soft-blue); border-color: transparent; } /* ========================================================= SERVICE CARD ARROW Uses: ๐Ÿกข Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; margin: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; font-weight: 400; line-height: 1; white-space: nowrap; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform .18s ease, color .18s ease; pointer-events: none; } /* ========================================================= ARROW HOVER ========================================================= */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow { transform: translateY(-50%) rotate(-45deg); color: var(--ac-teal) !important; } /* ========================================================= IMAGE AREA ========================================================= */ .ac-solution-image { width: 64px; height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.07); overflow: hidden; } /* Image placeholder */ .ac-solution-image-placeholder { width: 100%; height: 100%; background: #fff; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .ac-solution-image img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ========================================================= CARD COPY ========================================================= */ .ac-solution-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ac-solution-copy strong { display: block; margin: 0; color: #202124 !important; font-size: 13px; line-height: 1.3; font-weight: 600; } .ac-solution-copy small { display: block; max-width: 360px; margin: 0; color: #60666c !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA ========================================================= */ .ac-solutions-cta { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-radius: 13px; background: radial-gradient( circle, rgba(91,211,190,.18) 1.5px, transparent 1.5px ); background-size: 15px 15px; background-color: var(--ac-soft-green); overflow: hidden; } .ac-solutions-cta-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-solutions-cta-copy strong { display: block; color: #252525 !important; font-size: 14px; line-height: 1.25; font-weight: 700; } .ac-solutions-cta-copy span { display: block; max-width: 270px; color: #505860 !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA BUTTON ========================================================= */ .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 117px; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border: 0 !important; border-radius: 7px; background: var(--ac-blue) !important; color: #fff !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, transform .18s ease; } .ac-solutions-menu .ac-solutions-cta-button:hover { background: #2f4899 !important; color: #fff !important; transform: translateY(-1px); } .ac-solutions-cta-button span { color: #fff !important; white-space: nowrap; } .ac-solutions-cta-arrow { font-size: 16px; line-height: 1; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-solutions-menu { padding: 24px 22px 20px; } .ac-solutions-grid { column-gap: 25px; } .ac-solution-card { gap: 18px; padding: 11px 38px 11px 14px; } .ac-solution-image { width: 58px; height: 58px; flex-basis: 58px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Tablet arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 14px; width: 21px; height: 21px; flex-basis: 21px; font-size: 18px; } .ac-solutions-cta { padding-left: 16px; padding-right: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-solutions-menu { width: 100%; padding: 18px 12px 18px; } .ac-solutions-head { margin-bottom: 16px; } .ac-solutions-head h2 { font-size: 15px; } .ac-solutions-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; } /* ------------------------------------------------------- SOLUTION CARD ------------------------------------------------------- */ .ac-solution-card { min-height: 78px; gap: 14px; padding: 11px 40px 11px 12px; border-radius: 10px; } /* ------------------------------------------------------- MOBILE FEATURED CARD No permanent background ------------------------------------------------------- */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* Mobile hover */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; transform: translateY(-1px); } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the problematic Unicode ๐Ÿกข glyph. * We will render a safe standard arrow below. */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 13px; width: 21px; height: 21px; flex-basis: 21px; font-size: 0 !important; line-height: 0; transform: translateY(-50%) rotate(0deg); } /* * Safe mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { content: "โ†’"; display: block; width: 100%; height: 100%; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 21px !important; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover: * โ†’ becomes โ†— */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow::before, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow::before { transform: rotate(-5deg); } /* ------------------------------------------------------- IMAGE ------------------------------------------------------- */ .ac-solution-image { width: 52px; height: 52px; flex-basis: 52px; border-radius: 10px; } /* ------------------------------------------------------- COPY ------------------------------------------------------- */ .ac-solution-copy { gap: 3px; } .ac-solution-copy strong { font-size: 13px; } .ac-solution-copy small { max-width: none; font-size: 11px; } /* ======================================================= CTA ======================================================= */ .ac-solutions-cta { min-height: 105px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 11px; } .ac-solutions-cta-copy { flex: 1 1 auto; min-width: 0; } .ac-solutions-cta-copy strong { font-size: 14px; } .ac-solutions-cta-copy span { font-size: 11px; } .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 108px; height: 34px; margin-top: 1px; padding: 7px 10px; font-size: 11px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-solutions-menu { padding-left: 10px; padding-right: 10px; } .ac-solution-card { gap: 12px; padding: 10px 36px 10px 10px; } .ac-solution-image { width: 48px; height: 48px; flex-basis: 48px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Smaller mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 10px; width: 20px; height: 20px; flex-basis: 20px; font-size: 0 !important; } .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { font-size: 19px !important; line-height: 20px !important; } /* CTA */ .ac-solutions-cta { padding: 14px; } .ac-solutions-cta-copy strong { font-size: 13px; } .ac-solutions-menu .ac-solutions-cta-button { min-width: 100px; padding-left: 8px; padding-right: 8px; font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f5ee273 *//* ========================================================= ASSETCUES RESOURCE MENU Lightweight + Elementor Safe ========================================================= */ .ac-resources-menu, .ac-resources-menu * { box-sizing: border-box; } .ac-resources-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 4px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-resource-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: #252525 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER Light blue only ========================================================= */ .ac-resources-menu .ac-resource-item:hover, .ac-resources-menu .ac-resource-item:focus-visible { background: var(--ac-hover); color: #252525 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-resource-icon { width: 10px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-resource-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-resource-title { min-width: 0; flex: 1 1 auto; color: #252525 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal โ†’ ๐Ÿกข Hover โ†’ rotates โ†— ========================================================= */ .ac-resource-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover arrow */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-resource-item { min-height: 56px; gap: 17px; padding: 10px 13px; border-radius: 14px; } .ac-resource-icon { width: 28px; height: 28px; flex-basis: 28px; } .ac-resource-icon svg { width: 17px; height: 17px; } .ac-resource-title { font-size: 13px; } /* * MOBILE ARROW FIX * * Hide the unsupported ๐Ÿกข glyph and render a * standard Arial arrow instead. */ .ac-resources-menu .ac-resource-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; transform: rotate(0deg); position: relative; } .ac-resources-menu .ac-resource-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow::before, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-resource-item { min-height: 12px; gap: 14px; padding: 7px 12px; } .ac-resource-title { font-size: 12px; } /* * Keep the safe mobile arrow rendering. */ .ac-resources-menu .ac-resource-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-resources-menu .ac-resource-arrow::before { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-72fbdaf *//* ========================================================= ASSETCUES SIMPLE HEADER MENU ========================================================= */ .ac-simple-menu, .ac-simple-menu * { box-sizing: border-box; } .ac-simple-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 3px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-simple-menu-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #202020 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER ========================================================= */ .ac-simple-menu-item:hover, .ac-simple-menu-item:focus-visible { background: var(--ac-hover); color: #202020 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-simple-menu-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-simple-menu-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-simple-menu-title { min-width: 0; flex: 1 1 auto; color: #202020 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-simple-menu-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; line-height: 1; white-space: nowrap; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* ========================================================= DESKTOP ARROW HOVER ========================================================= */ .ac-simple-menu-item:hover .ac-simple-menu-arrow, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-simple-menu-item { min-height: 38px; gap: 12px; padding: 7px 10px; border-radius: 9px; } .ac-simple-menu-icon { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu-icon svg { width: 17px; height: 17px; } .ac-simple-menu-title { font-size: 13px; } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the unsupported Unicode ๐Ÿกข character. */ .ac-simple-menu .ac-simple-menu-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; line-height: 0; transform: rotate(0deg); } /* * Render a standard mobile-safe arrow. */ .ac-simple-menu .ac-simple-menu-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 20px; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-simple-menu-item:hover .ac-simple-menu-arrow::before, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-simple-menu-item { min-height: 36px; gap: 10px; padding: 6px 8px; } .ac-simple-menu-title { font-size: 12px; } .ac-simple-menu .ac-simple-menu-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu .ac-simple-menu-arrow::before { font-size: 18px !important; line-height: 19px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c7dd41e *//* ========================================================= ASSETCUES MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-mega-menu, .ac-mega-menu * { box-sizing: border-box; } .ac-mega-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e5e7e9; --ac-soft: #eaf6f5; width: 100%; display: flex; background: #fff; color: var(--ac-dark); font-family: inherit; border-radius: 0 0 22px 22px; overflow: hidden; } /* ========================================================= LEFT NAVIGATION ========================================================= */ .ac-mega-nav { width: 300px; flex: 0 0 300px; padding: 26px 12px 26px 18px; background: var(--ac-soft); } /* ========================================================= MENU SECTIONS ========================================================= */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 8px; padding-top: 15px; border-top: 1px solid rgba(60,156,160,.30); } /* ========================================================= SECTION TITLES ========================================================= */ .ac-menu-section-title { padding: 0 20px 9px; color: #202020; font-size: 16px; line-height: 1.25; font-weight: 700; } /* ========================================================= NAV ITEM ========================================================= */ .ac-mega-nav-item { position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; padding: 8px 12px 8px 20px; border: 1px solid transparent; border-radius: 11px; background: transparent !important; color: #202020 !important; font-family: inherit; font-size: 15px; line-height: 1.25; font-weight: 500; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; appearance: none; -webkit-appearance: none; box-shadow: none !important; text-decoration: none !important; } .ac-mega-nav-item:hover { background: rgba(255,255,255,.65) !important; color: #202020 !important; border-color: transparent !important; } .ac-mega-nav-item:focus, .ac-mega-nav-item:focus-visible { outline: none !important; box-shadow: none !important; } .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } /* ========================================================= NAV ARROW ========================================================= */ .ac-nav-arrow { flex: 0 0 auto; font-size: 23px; line-height: 16px; font-weight: 400; color: var(--ac-teal) !important; transform: translateY(-1px); } /* ========================================================= RIGHT CONTENT ========================================================= */ .ac-mega-content { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; } /* ========================================================= PANEL ========================================================= */ .ac-mega-panel { display: none; min-width: 0; padding: 26px 32px 0; animation: acMegaFade .18s ease; } /* IMPORTANT: Active panel becomes a flex column so the CTA can be pushed to the bottom of the available menu height. */ .ac-mega-panel.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; } @keyframes acMegaFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PANEL HEADER ========================================================= */ .ac-mega-top { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .ac-mega-title-wrap { min-width: 0; } .ac-mega-top h2 { margin: 0 0 6px; color: var(--ac-blue) !important; font-size: 17px; line-height: 1.25; font-weight: 700; } .ac-mega-top p { max-width: 700px; margin: 0; color: #60646a !important; font-size: 13px; line-height: 1.45; } /* ========================================================= EXPLORE BUTTON ========================================================= */ .ac-mega-menu .ac-explore-btn { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--ac-blue) !important; border-radius: 20px !important; background: #fff !important; color: var(--ac-blue) !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, color .18s ease; } .ac-mega-menu .ac-explore-btn:hover { background: var(--ac-blue) !important; color: #fff !important; } .ac-mega-menu .ac-explore-btn span { font-size: 15px; line-height: 9px; } /* ========================================================= DIVIDER ========================================================= */ .ac-mega-divider { width: 100%; height: 1px; margin: 15px 0 12px; background: var(--ac-border); } /* ========================================================= FEATURE GRID ========================================================= */ .ac-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 2px; } /* ========================================================= FEATURE CARD ========================================================= */ .ac-feature-card { position: relative; min-width: 0; min-height: 70px; display: flex; align-items: flex-start; gap: 13px; padding: 9px 10px; border-radius: 12px; /* IMPORTANT: No permanent background. Background appears only on hover. */ background: transparent !important; color: inherit !important; text-decoration: none !important; transition: background .18s ease, transform .18s ease; } /* Hover background only. No active/default blue background. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; color: inherit !important; transform: translateY(-1px); } /* Override any .featured class that may be present in the HTML. It must NOT create a permanent background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } /* Featured item gets blue/light background ONLY on hover. */ .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } /* ========================================================= FEATURE ICON ========================================================= */ .ac-feature-icon { width: 30px; height: 30px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= FEATURE COPY ========================================================= */ .ac-feature-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ac-feature-copy strong { display: block; color: #202124 !important; font-size: 13px; line-height: 1.25; font-weight: 600; } .ac-feature-copy small { display: block; color: #666b70 !important; font-size: 11px; line-height: 1.4; } /* ========================================================= CARD ARROW ========================================================= */ .ac-card-arrow { margin-left: auto; padding-top: 0; color: var(--ac-teal) !important; font-size: 18px; line-height: 1; font-weight: 400; flex: 0 0 auto; display: inline-block; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Feature arrow: ๐Ÿกข normal ๐Ÿกฅ hover */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow { transform: rotate(-45deg); } /* ========================================================= LEARN MORE ========================================================= */ .ac-learn-more { position: absolute; right: 9px; bottom: 7px; padding: 2px 6px; border: 1px solid var(--ac-blue); border-radius: 10px; color: var(--ac-blue); font-size: 8px; line-height: 1; font-weight: 500; } /* ========================================================= CTA ========================================================= */ .ac-mega-cta { position: relative; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 25px; /* Push CTA to the bottom of the active panel. */ margin: auto -32px 0; padding: 13px 94px; background: radial-gradient( circle at 8% 80%, rgba(91,211,190,.20) 0 1px, transparent 2px ); background-size: 13px 13px; background-color: #effaf7; overflow: hidden; } .ac-cta-content { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-cta-content strong { display: block; margin: 0 !important; color: #252525 !important; font-size: 15px; line-height: 1.25; font-weight: 700; } .ac-cta-content span { display: block; max-width: 390px; color: #4e555b !important; font-size: 12px; line-height: 1.45; } /* ========================================================= CTA BUTTON Elementor-safe reset ========================================================= */ .ac-mega-menu .ac-cta-button, .ac-mega-menu a.ac-cta-button { flex: 0 0 157px !important; width: 157px !important; min-width: 157px !important; max-width: 157px !important; height: auto !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 8px 18px !important; margin: 0 !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; transform: none; transition: transform .18s ease, background .18s ease; } .ac-mega-menu .ac-cta-button:hover, .ac-mega-menu .ac-cta-button:focus, .ac-mega-menu .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: translateY(-1px); } .ac-mega-menu .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 19px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-mega-nav { width: 250px; flex-basis: 250px; padding-left: 10px; } .ac-mega-panel { padding-left: 22px; padding-right: 22px; } .ac-mega-top { gap: 15px; } .ac-mega-top h2 { font-size: 16px; } .ac-mega-top p { font-size: 12px; } .ac-feature-grid { column-gap: 10px; } .ac-feature-card { gap: 9px; padding-left: 5px; padding-right: 5px; } .ac-feature-copy strong { font-size: 12px; } .ac-feature-copy small { font-size: 10.5px; } .ac-mega-cta { margin-left: -22px; margin-right: -22px; padding-left: 45px; padding-right: 45px; } } /* ========================================================= MOBILE ACCORDION ========================================================= */ @media (max-width: 767px) { .ac-mega-menu { display: block; width: 100%; border-radius: 0 0 16px 16px; overflow: hidden; } /* ------------------------------------------------------- NAV ------------------------------------------------------- */ .ac-mega-nav { width: 100%; padding: 16px 12px 10px; background: #fff; } /* ------------------------------------------------------- SECTION ------------------------------------------------------- */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ac-border); } /* ------------------------------------------------------- SECTION TITLE ------------------------------------------------------- */ .ac-menu-section-title { padding: 0 8px 7px; font-size: 14px; } /* ------------------------------------------------------- NAV ITEM ------------------------------------------------------- */ .ac-mega-nav-item { min-height: 44px; margin: 2px 0; padding: 9px 10px; border: 1px solid #e9ebed !important; border-radius: 9px; background: #fff !important; color: #202020 !important; font-size: 13px; } .ac-mega-nav-item:hover { background: #fff !important; border-color: #e9ebed !important; color: #202020 !important; } /* IMPORTANT: Active mobile navigation item keeps its border/text state but DOES NOT receive a filled background. */ .ac-mega-menu .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } .ac-mega-menu .ac-mega-nav-item.active *, .ac-mega-menu .ac-mega-nav-item.active span { color: var(--ac-teal) !important; -webkit-text-fill-color: var(--ac-teal) !important; } /* ------------------------------------------------------- MOBILE ARROW ------------------------------------------------------- */ .ac-nav-arrow { font-size: 22px; transition: transform .2s ease; } .ac-mega-nav-item.active .ac-nav-arrow { transform: rotate(90deg); } /* ------------------------------------------------------- CONTENT ------------------------------------------------------- */ .ac-mega-content { display: block; width: 100%; } /* On mobile the panel returns to normal document flow. This keeps the accordion compact. */ .ac-mega-panel { display: none; padding: 17px 12px 0; border-top: 1px solid var(--ac-border); flex: none; min-height: auto; } .ac-mega-panel.active { display: block; flex: none; min-height: auto; } /* ------------------------------------------------------- HEADER ------------------------------------------------------- */ .ac-mega-top { min-height: auto; display: block; } .ac-mega-top h2 { margin-bottom: 6px; font-size: 18px; } .ac-mega-top p { font-size: 13px; line-height: 1.45; } /* ------------------------------------------------------- EXPLORE ------------------------------------------------------- */ .ac-mega-menu .ac-explore-btn { margin-top: 11px !important; padding: 9px 13px !important; font-size: 12px !important; } /* ------------------------------------------------------- DIVIDER ------------------------------------------------------- */ .ac-mega-divider { margin: 15px 0 10px; } /* ------------------------------------------------------- FEATURES ------------------------------------------------------- */ .ac-feature-grid { grid-template-columns: 1fr; gap: 3px; } .ac-feature-card { min-height: 68px; padding: 9px 5px; border-radius: 10px; /* No permanent active background on mobile. */ background: transparent !important; } /* Mobile hover only. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; } /* Prevent .featured from bringing back the permanent blue background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } .ac-feature-icon { width: 30px; height: 30px; flex-basis: 30px; } .ac-feature-icon svg { width: 17px; height: 17px; } .ac-feature-copy strong { font-size: 14px; } .ac-feature-copy small { font-size: 12px; line-height: 1.4; } .ac-card-arrow { font-size: 17px; } .ac-learn-more { display: none; } /* ======================================================= MOBILE CTA ======================================================= */ .ac-mega-cta { min-height: auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; /* Mobile CTA remains inside normal accordion flow. */ margin: 10px -12px 0 !important; padding: 18px 18px 19px !important; } .ac-cta-content { min-width: 0; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } .ac-cta-content strong { font-size: 15px !important; line-height: 1.25 !important; } .ac-cta-content span { max-width: none !important; font-size: 12px !important; line-height: 1.45 !important; } /* ------------------------------------------------------- MOBILE CTA BUTTON โ€” FORCE HORIZONTAL ------------------------------------------------------- */ .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 120px !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; height: 38px !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 9px 10px !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button:hover, .ac-mega-menu .ac-mega-cta .ac-cta-button:focus, .ac-mega-menu .ac-mega-cta .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 17px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ .ac-mega-menu .ac-card-arrow { /* Hide the unsupported Unicode character */ font-size: 0 !important; width: 22px; min-width: 22px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--ac-teal) !important; transform: none !important; } /* Normal state โ†’ */ .ac-mega-menu .ac-card-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover state โ†— */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow::before, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow::before { transform: rotate(-45deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-mega-nav { padding-left: 10px; padding-right: 10px; } .ac-menu-section-title { font-size: 13px; } .ac-mega-nav-item { font-size: 12px; } .ac-mega-panel { padding-left: 10px; padding-right: 10px; } .ac-feature-copy strong { font-size: 13px; } .ac-feature-copy small { font-size: 11.5px; } /* Keep CTA horizontal even on very small screens */ .ac-mega-cta { gap: 8px !important; padding-left: 14px !important; padding-right: 14px !important; } .ac-cta-content { flex: 1 1 auto !important; min-width: 0 !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 36px !important; min-height: 36px !important; padding: 8px 8px !important; gap: 5px !important; font-size: 12px !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-94a04c0 *//* ========================================================= ASSETCUES SOLUTIONS MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-solutions-menu, .ac-solutions-menu * { box-sizing: border-box; } .ac-solutions-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e6eaee; --ac-soft-blue: #edf2fc; --ac-soft-green: #effaf7; width: 100%; padding: 28px 30px 24px; color: var(--ac-dark); } /* ========================================================= HEADER ========================================================= */ .ac-solutions-head { width: 100%; margin-bottom: 28px; } .ac-solutions-head h2 { margin: 0; color: #222; font-size: 17px; line-height: 1.25; font-weight: 700; } /* ========================================================= SOLUTIONS GRID ========================================================= */ .ac-solutions-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 22px; width: 100%; } /* ========================================================= SOLUTION CARD ========================================================= */ .ac-solution-card { position: relative; min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 28px; /* * Extra right padding keeps text away from arrow. */ padding: 13px 46px 13px 20px; border: 1px solid var(--ac-border); border-radius: 13px; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } /* ========================================================= REMOVE PERMANENT FEATURED BLUE BACKGROUND ========================================================= */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* ========================================================= HOVER Blue background ONLY on hover ========================================================= */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; color: inherit !important; text-decoration: none !important; transform: translateY(-1px); } /* Featured hover */ .ac-solutions-menu .ac-solution-card.ac-solution-featured:hover { background: var(--ac-soft-blue); border-color: transparent; } /* ========================================================= SERVICE CARD ARROW Uses: ๐Ÿกข Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; margin: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; font-weight: 400; line-height: 1; white-space: nowrap; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform .18s ease, color .18s ease; pointer-events: none; } /* ========================================================= ARROW HOVER ========================================================= */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow { transform: translateY(-50%) rotate(-45deg); color: var(--ac-teal) !important; } /* ========================================================= IMAGE AREA ========================================================= */ .ac-solution-image { width: 64px; height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.07); overflow: hidden; } /* Image placeholder */ .ac-solution-image-placeholder { width: 100%; height: 100%; background: #fff; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .ac-solution-image img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ========================================================= CARD COPY ========================================================= */ .ac-solution-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ac-solution-copy strong { display: block; margin: 0; color: #202124 !important; font-size: 13px; line-height: 1.3; font-weight: 600; } .ac-solution-copy small { display: block; max-width: 360px; margin: 0; color: #60666c !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA ========================================================= */ .ac-solutions-cta { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-radius: 13px; background: radial-gradient( circle, rgba(91,211,190,.18) 1.5px, transparent 1.5px ); background-size: 15px 15px; background-color: var(--ac-soft-green); overflow: hidden; } .ac-solutions-cta-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-solutions-cta-copy strong { display: block; color: #252525 !important; font-size: 14px; line-height: 1.25; font-weight: 700; } .ac-solutions-cta-copy span { display: block; max-width: 270px; color: #505860 !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA BUTTON ========================================================= */ .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 117px; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border: 0 !important; border-radius: 7px; background: var(--ac-blue) !important; color: #fff !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, transform .18s ease; } .ac-solutions-menu .ac-solutions-cta-button:hover { background: #2f4899 !important; color: #fff !important; transform: translateY(-1px); } .ac-solutions-cta-button span { color: #fff !important; white-space: nowrap; } .ac-solutions-cta-arrow { font-size: 16px; line-height: 1; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-solutions-menu { padding: 24px 22px 20px; } .ac-solutions-grid { column-gap: 25px; } .ac-solution-card { gap: 18px; padding: 11px 38px 11px 14px; } .ac-solution-image { width: 58px; height: 58px; flex-basis: 58px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Tablet arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 14px; width: 21px; height: 21px; flex-basis: 21px; font-size: 18px; } .ac-solutions-cta { padding-left: 16px; padding-right: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-solutions-menu { width: 100%; padding: 18px 12px 18px; } .ac-solutions-head { margin-bottom: 16px; } .ac-solutions-head h2 { font-size: 15px; } .ac-solutions-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; } /* ------------------------------------------------------- SOLUTION CARD ------------------------------------------------------- */ .ac-solution-card { min-height: 78px; gap: 14px; padding: 11px 40px 11px 12px; border-radius: 10px; } /* ------------------------------------------------------- MOBILE FEATURED CARD No permanent background ------------------------------------------------------- */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* Mobile hover */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; transform: translateY(-1px); } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the problematic Unicode ๐Ÿกข glyph. * We will render a safe standard arrow below. */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 13px; width: 21px; height: 21px; flex-basis: 21px; font-size: 0 !important; line-height: 0; transform: translateY(-50%) rotate(0deg); } /* * Safe mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { content: "โ†’"; display: block; width: 100%; height: 100%; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 21px !important; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover: * โ†’ becomes โ†— */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow::before, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow::before { transform: rotate(-5deg); } /* ------------------------------------------------------- IMAGE ------------------------------------------------------- */ .ac-solution-image { width: 52px; height: 52px; flex-basis: 52px; border-radius: 10px; } /* ------------------------------------------------------- COPY ------------------------------------------------------- */ .ac-solution-copy { gap: 3px; } .ac-solution-copy strong { font-size: 13px; } .ac-solution-copy small { max-width: none; font-size: 11px; } /* ======================================================= CTA ======================================================= */ .ac-solutions-cta { min-height: 105px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 11px; } .ac-solutions-cta-copy { flex: 1 1 auto; min-width: 0; } .ac-solutions-cta-copy strong { font-size: 14px; } .ac-solutions-cta-copy span { font-size: 11px; } .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 108px; height: 34px; margin-top: 1px; padding: 7px 10px; font-size: 11px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-solutions-menu { padding-left: 10px; padding-right: 10px; } .ac-solution-card { gap: 12px; padding: 10px 36px 10px 10px; } .ac-solution-image { width: 48px; height: 48px; flex-basis: 48px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Smaller mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 10px; width: 20px; height: 20px; flex-basis: 20px; font-size: 0 !important; } .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { font-size: 19px !important; line-height: 20px !important; } /* CTA */ .ac-solutions-cta { padding: 14px; } .ac-solutions-cta-copy strong { font-size: 13px; } .ac-solutions-menu .ac-solutions-cta-button { min-width: 100px; padding-left: 8px; padding-right: 8px; font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f5ee273 *//* ========================================================= ASSETCUES RESOURCE MENU Lightweight + Elementor Safe ========================================================= */ .ac-resources-menu, .ac-resources-menu * { box-sizing: border-box; } .ac-resources-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 4px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-resource-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: #252525 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER Light blue only ========================================================= */ .ac-resources-menu .ac-resource-item:hover, .ac-resources-menu .ac-resource-item:focus-visible { background: var(--ac-hover); color: #252525 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-resource-icon { width: 10px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-resource-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-resource-title { min-width: 0; flex: 1 1 auto; color: #252525 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal โ†’ ๐Ÿกข Hover โ†’ rotates โ†— ========================================================= */ .ac-resource-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover arrow */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-resource-item { min-height: 56px; gap: 17px; padding: 10px 13px; border-radius: 14px; } .ac-resource-icon { width: 28px; height: 28px; flex-basis: 28px; } .ac-resource-icon svg { width: 17px; height: 17px; } .ac-resource-title { font-size: 13px; } /* * MOBILE ARROW FIX * * Hide the unsupported ๐Ÿกข glyph and render a * standard Arial arrow instead. */ .ac-resources-menu .ac-resource-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; transform: rotate(0deg); position: relative; } .ac-resources-menu .ac-resource-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow::before, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-resource-item { min-height: 12px; gap: 14px; padding: 7px 12px; } .ac-resource-title { font-size: 12px; } /* * Keep the safe mobile arrow rendering. */ .ac-resources-menu .ac-resource-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-resources-menu .ac-resource-arrow::before { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-72fbdaf *//* ========================================================= ASSETCUES SIMPLE HEADER MENU ========================================================= */ .ac-simple-menu, .ac-simple-menu * { box-sizing: border-box; } .ac-simple-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 3px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-simple-menu-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #202020 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER ========================================================= */ .ac-simple-menu-item:hover, .ac-simple-menu-item:focus-visible { background: var(--ac-hover); color: #202020 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-simple-menu-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-simple-menu-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-simple-menu-title { min-width: 0; flex: 1 1 auto; color: #202020 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-simple-menu-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; line-height: 1; white-space: nowrap; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* ========================================================= DESKTOP ARROW HOVER ========================================================= */ .ac-simple-menu-item:hover .ac-simple-menu-arrow, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-simple-menu-item { min-height: 38px; gap: 12px; padding: 7px 10px; border-radius: 9px; } .ac-simple-menu-icon { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu-icon svg { width: 17px; height: 17px; } .ac-simple-menu-title { font-size: 13px; } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the unsupported Unicode ๐Ÿกข character. */ .ac-simple-menu .ac-simple-menu-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; line-height: 0; transform: rotate(0deg); } /* * Render a standard mobile-safe arrow. */ .ac-simple-menu .ac-simple-menu-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 20px; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-simple-menu-item:hover .ac-simple-menu-arrow::before, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-simple-menu-item { min-height: 36px; gap: 10px; padding: 6px 8px; } .ac-simple-menu-title { font-size: 12px; } .ac-simple-menu .ac-simple-menu-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu .ac-simple-menu-arrow::before { font-size: 18px !important; line-height: 19px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c7dd41e *//* ========================================================= ASSETCUES MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-mega-menu, .ac-mega-menu * { box-sizing: border-box; } .ac-mega-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e5e7e9; --ac-soft: #eaf6f5; width: 100%; display: flex; background: #fff; color: var(--ac-dark); font-family: inherit; border-radius: 0 0 22px 22px; overflow: hidden; } /* ========================================================= LEFT NAVIGATION ========================================================= */ .ac-mega-nav { width: 300px; flex: 0 0 300px; padding: 26px 12px 26px 18px; background: var(--ac-soft); } /* ========================================================= MENU SECTIONS ========================================================= */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 8px; padding-top: 15px; border-top: 1px solid rgba(60,156,160,.30); } /* ========================================================= SECTION TITLES ========================================================= */ .ac-menu-section-title { padding: 0 20px 9px; color: #202020; font-size: 16px; line-height: 1.25; font-weight: 700; } /* ========================================================= NAV ITEM ========================================================= */ .ac-mega-nav-item { position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; padding: 8px 12px 8px 20px; border: 1px solid transparent; border-radius: 11px; background: transparent !important; color: #202020 !important; font-family: inherit; font-size: 15px; line-height: 1.25; font-weight: 500; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; appearance: none; -webkit-appearance: none; box-shadow: none !important; text-decoration: none !important; } .ac-mega-nav-item:hover { background: rgba(255,255,255,.65) !important; color: #202020 !important; border-color: transparent !important; } .ac-mega-nav-item:focus, .ac-mega-nav-item:focus-visible { outline: none !important; box-shadow: none !important; } .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } /* ========================================================= NAV ARROW ========================================================= */ .ac-nav-arrow { flex: 0 0 auto; font-size: 23px; line-height: 16px; font-weight: 400; color: var(--ac-teal) !important; transform: translateY(-1px); } /* ========================================================= RIGHT CONTENT ========================================================= */ .ac-mega-content { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; } /* ========================================================= PANEL ========================================================= */ .ac-mega-panel { display: none; min-width: 0; padding: 26px 32px 0; animation: acMegaFade .18s ease; } /* IMPORTANT: Active panel becomes a flex column so the CTA can be pushed to the bottom of the available menu height. */ .ac-mega-panel.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; } @keyframes acMegaFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PANEL HEADER ========================================================= */ .ac-mega-top { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .ac-mega-title-wrap { min-width: 0; } .ac-mega-top h2 { margin: 0 0 6px; color: var(--ac-blue) !important; font-size: 17px; line-height: 1.25; font-weight: 700; } .ac-mega-top p { max-width: 700px; margin: 0; color: #60646a !important; font-size: 13px; line-height: 1.45; } /* ========================================================= EXPLORE BUTTON ========================================================= */ .ac-mega-menu .ac-explore-btn { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--ac-blue) !important; border-radius: 20px !important; background: #fff !important; color: var(--ac-blue) !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, color .18s ease; } .ac-mega-menu .ac-explore-btn:hover { background: var(--ac-blue) !important; color: #fff !important; } .ac-mega-menu .ac-explore-btn span { font-size: 15px; line-height: 9px; } /* ========================================================= DIVIDER ========================================================= */ .ac-mega-divider { width: 100%; height: 1px; margin: 15px 0 12px; background: var(--ac-border); } /* ========================================================= FEATURE GRID ========================================================= */ .ac-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 2px; } /* ========================================================= FEATURE CARD ========================================================= */ .ac-feature-card { position: relative; min-width: 0; min-height: 70px; display: flex; align-items: flex-start; gap: 13px; padding: 9px 10px; border-radius: 12px; /* IMPORTANT: No permanent background. Background appears only on hover. */ background: transparent !important; color: inherit !important; text-decoration: none !important; transition: background .18s ease, transform .18s ease; } /* Hover background only. No active/default blue background. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; color: inherit !important; transform: translateY(-1px); } /* Override any .featured class that may be present in the HTML. It must NOT create a permanent background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } /* Featured item gets blue/light background ONLY on hover. */ .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } /* ========================================================= FEATURE ICON ========================================================= */ .ac-feature-icon { width: 30px; height: 30px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= FEATURE COPY ========================================================= */ .ac-feature-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ac-feature-copy strong { display: block; color: #202124 !important; font-size: 13px; line-height: 1.25; font-weight: 600; } .ac-feature-copy small { display: block; color: #666b70 !important; font-size: 11px; line-height: 1.4; } /* ========================================================= CARD ARROW ========================================================= */ .ac-card-arrow { margin-left: auto; padding-top: 0; color: var(--ac-teal) !important; font-size: 18px; line-height: 1; font-weight: 400; flex: 0 0 auto; display: inline-block; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Feature arrow: ๐Ÿกข normal ๐Ÿกฅ hover */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow { transform: rotate(-45deg); } /* ========================================================= LEARN MORE ========================================================= */ .ac-learn-more { position: absolute; right: 9px; bottom: 7px; padding: 2px 6px; border: 1px solid var(--ac-blue); border-radius: 10px; color: var(--ac-blue); font-size: 8px; line-height: 1; font-weight: 500; } /* ========================================================= CTA ========================================================= */ .ac-mega-cta { position: relative; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 25px; /* Push CTA to the bottom of the active panel. */ margin: auto -32px 0; padding: 13px 94px; background: radial-gradient( circle at 8% 80%, rgba(91,211,190,.20) 0 1px, transparent 2px ); background-size: 13px 13px; background-color: #effaf7; overflow: hidden; } .ac-cta-content { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-cta-content strong { display: block; margin: 0 !important; color: #252525 !important; font-size: 15px; line-height: 1.25; font-weight: 700; } .ac-cta-content span { display: block; max-width: 390px; color: #4e555b !important; font-size: 12px; line-height: 1.45; } /* ========================================================= CTA BUTTON Elementor-safe reset ========================================================= */ .ac-mega-menu .ac-cta-button, .ac-mega-menu a.ac-cta-button { flex: 0 0 157px !important; width: 157px !important; min-width: 157px !important; max-width: 157px !important; height: auto !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 8px 18px !important; margin: 0 !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; transform: none; transition: transform .18s ease, background .18s ease; } .ac-mega-menu .ac-cta-button:hover, .ac-mega-menu .ac-cta-button:focus, .ac-mega-menu .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: translateY(-1px); } .ac-mega-menu .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 19px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-mega-nav { width: 250px; flex-basis: 250px; padding-left: 10px; } .ac-mega-panel { padding-left: 22px; padding-right: 22px; } .ac-mega-top { gap: 15px; } .ac-mega-top h2 { font-size: 16px; } .ac-mega-top p { font-size: 12px; } .ac-feature-grid { column-gap: 10px; } .ac-feature-card { gap: 9px; padding-left: 5px; padding-right: 5px; } .ac-feature-copy strong { font-size: 12px; } .ac-feature-copy small { font-size: 10.5px; } .ac-mega-cta { margin-left: -22px; margin-right: -22px; padding-left: 45px; padding-right: 45px; } } /* ========================================================= MOBILE ACCORDION ========================================================= */ @media (max-width: 767px) { .ac-mega-menu { display: block; width: 100%; border-radius: 0 0 16px 16px; overflow: hidden; } /* ------------------------------------------------------- NAV ------------------------------------------------------- */ .ac-mega-nav { width: 100%; padding: 16px 12px 10px; background: #fff; } /* ------------------------------------------------------- SECTION ------------------------------------------------------- */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ac-border); } /* ------------------------------------------------------- SECTION TITLE ------------------------------------------------------- */ .ac-menu-section-title { padding: 0 8px 7px; font-size: 14px; } /* ------------------------------------------------------- NAV ITEM ------------------------------------------------------- */ .ac-mega-nav-item { min-height: 44px; margin: 2px 0; padding: 9px 10px; border: 1px solid #e9ebed !important; border-radius: 9px; background: #fff !important; color: #202020 !important; font-size: 13px; } .ac-mega-nav-item:hover { background: #fff !important; border-color: #e9ebed !important; color: #202020 !important; } /* IMPORTANT: Active mobile navigation item keeps its border/text state but DOES NOT receive a filled background. */ .ac-mega-menu .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } .ac-mega-menu .ac-mega-nav-item.active *, .ac-mega-menu .ac-mega-nav-item.active span { color: var(--ac-teal) !important; -webkit-text-fill-color: var(--ac-teal) !important; } /* ------------------------------------------------------- MOBILE ARROW ------------------------------------------------------- */ .ac-nav-arrow { font-size: 22px; transition: transform .2s ease; } .ac-mega-nav-item.active .ac-nav-arrow { transform: rotate(90deg); } /* ------------------------------------------------------- CONTENT ------------------------------------------------------- */ .ac-mega-content { display: block; width: 100%; } /* On mobile the panel returns to normal document flow. This keeps the accordion compact. */ .ac-mega-panel { display: none; padding: 17px 12px 0; border-top: 1px solid var(--ac-border); flex: none; min-height: auto; } .ac-mega-panel.active { display: block; flex: none; min-height: auto; } /* ------------------------------------------------------- HEADER ------------------------------------------------------- */ .ac-mega-top { min-height: auto; display: block; } .ac-mega-top h2 { margin-bottom: 6px; font-size: 18px; } .ac-mega-top p { font-size: 13px; line-height: 1.45; } /* ------------------------------------------------------- EXPLORE ------------------------------------------------------- */ .ac-mega-menu .ac-explore-btn { margin-top: 11px !important; padding: 9px 13px !important; font-size: 12px !important; } /* ------------------------------------------------------- DIVIDER ------------------------------------------------------- */ .ac-mega-divider { margin: 15px 0 10px; } /* ------------------------------------------------------- FEATURES ------------------------------------------------------- */ .ac-feature-grid { grid-template-columns: 1fr; gap: 3px; } .ac-feature-card { min-height: 68px; padding: 9px 5px; border-radius: 10px; /* No permanent active background on mobile. */ background: transparent !important; } /* Mobile hover only. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; } /* Prevent .featured from bringing back the permanent blue background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } .ac-feature-icon { width: 30px; height: 30px; flex-basis: 30px; } .ac-feature-icon svg { width: 17px; height: 17px; } .ac-feature-copy strong { font-size: 14px; } .ac-feature-copy small { font-size: 12px; line-height: 1.4; } .ac-card-arrow { font-size: 17px; } .ac-learn-more { display: none; } /* ======================================================= MOBILE CTA ======================================================= */ .ac-mega-cta { min-height: auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; /* Mobile CTA remains inside normal accordion flow. */ margin: 10px -12px 0 !important; padding: 18px 18px 19px !important; } .ac-cta-content { min-width: 0; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } .ac-cta-content strong { font-size: 15px !important; line-height: 1.25 !important; } .ac-cta-content span { max-width: none !important; font-size: 12px !important; line-height: 1.45 !important; } /* ------------------------------------------------------- MOBILE CTA BUTTON โ€” FORCE HORIZONTAL ------------------------------------------------------- */ .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 120px !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; height: 38px !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 9px 10px !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button:hover, .ac-mega-menu .ac-mega-cta .ac-cta-button:focus, .ac-mega-menu .ac-mega-cta .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 17px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ .ac-mega-menu .ac-card-arrow { /* Hide the unsupported Unicode character */ font-size: 0 !important; width: 22px; min-width: 22px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--ac-teal) !important; transform: none !important; } /* Normal state โ†’ */ .ac-mega-menu .ac-card-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover state โ†— */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow::before, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow::before { transform: rotate(-45deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-mega-nav { padding-left: 10px; padding-right: 10px; } .ac-menu-section-title { font-size: 13px; } .ac-mega-nav-item { font-size: 12px; } .ac-mega-panel { padding-left: 10px; padding-right: 10px; } .ac-feature-copy strong { font-size: 13px; } .ac-feature-copy small { font-size: 11.5px; } /* Keep CTA horizontal even on very small screens */ .ac-mega-cta { gap: 8px !important; padding-left: 14px !important; padding-right: 14px !important; } .ac-cta-content { flex: 1 1 auto !important; min-width: 0 !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 36px !important; min-height: 36px !important; padding: 8px 8px !important; gap: 5px !important; font-size: 12px !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-94a04c0 *//* ========================================================= ASSETCUES SOLUTIONS MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-solutions-menu, .ac-solutions-menu * { box-sizing: border-box; } .ac-solutions-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e6eaee; --ac-soft-blue: #edf2fc; --ac-soft-green: #effaf7; width: 100%; padding: 28px 30px 24px; color: var(--ac-dark); } /* ========================================================= HEADER ========================================================= */ .ac-solutions-head { width: 100%; margin-bottom: 28px; } .ac-solutions-head h2 { margin: 0; color: #222; font-size: 17px; line-height: 1.25; font-weight: 700; } /* ========================================================= SOLUTIONS GRID ========================================================= */ .ac-solutions-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 22px; width: 100%; } /* ========================================================= SOLUTION CARD ========================================================= */ .ac-solution-card { position: relative; min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 28px; /* * Extra right padding keeps text away from arrow. */ padding: 13px 46px 13px 20px; border: 1px solid var(--ac-border); border-radius: 13px; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } /* ========================================================= REMOVE PERMANENT FEATURED BLUE BACKGROUND ========================================================= */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* ========================================================= HOVER Blue background ONLY on hover ========================================================= */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; color: inherit !important; text-decoration: none !important; transform: translateY(-1px); } /* Featured hover */ .ac-solutions-menu .ac-solution-card.ac-solution-featured:hover { background: var(--ac-soft-blue); border-color: transparent; } /* ========================================================= SERVICE CARD ARROW Uses: ๐Ÿกข Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; margin: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; font-weight: 400; line-height: 1; white-space: nowrap; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform .18s ease, color .18s ease; pointer-events: none; } /* ========================================================= ARROW HOVER ========================================================= */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow { transform: translateY(-50%) rotate(-45deg); color: var(--ac-teal) !important; } /* ========================================================= IMAGE AREA ========================================================= */ .ac-solution-image { width: 64px; height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.07); overflow: hidden; } /* Image placeholder */ .ac-solution-image-placeholder { width: 100%; height: 100%; background: #fff; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .ac-solution-image img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ========================================================= CARD COPY ========================================================= */ .ac-solution-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ac-solution-copy strong { display: block; margin: 0; color: #202124 !important; font-size: 13px; line-height: 1.3; font-weight: 600; } .ac-solution-copy small { display: block; max-width: 360px; margin: 0; color: #60666c !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA ========================================================= */ .ac-solutions-cta { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-radius: 13px; background: radial-gradient( circle, rgba(91,211,190,.18) 1.5px, transparent 1.5px ); background-size: 15px 15px; background-color: var(--ac-soft-green); overflow: hidden; } .ac-solutions-cta-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-solutions-cta-copy strong { display: block; color: #252525 !important; font-size: 14px; line-height: 1.25; font-weight: 700; } .ac-solutions-cta-copy span { display: block; max-width: 270px; color: #505860 !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA BUTTON ========================================================= */ .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 117px; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border: 0 !important; border-radius: 7px; background: var(--ac-blue) !important; color: #fff !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, transform .18s ease; } .ac-solutions-menu .ac-solutions-cta-button:hover { background: #2f4899 !important; color: #fff !important; transform: translateY(-1px); } .ac-solutions-cta-button span { color: #fff !important; white-space: nowrap; } .ac-solutions-cta-arrow { font-size: 16px; line-height: 1; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-solutions-menu { padding: 24px 22px 20px; } .ac-solutions-grid { column-gap: 25px; } .ac-solution-card { gap: 18px; padding: 11px 38px 11px 14px; } .ac-solution-image { width: 58px; height: 58px; flex-basis: 58px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Tablet arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 14px; width: 21px; height: 21px; flex-basis: 21px; font-size: 18px; } .ac-solutions-cta { padding-left: 16px; padding-right: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-solutions-menu { width: 100%; padding: 18px 12px 18px; } .ac-solutions-head { margin-bottom: 16px; } .ac-solutions-head h2 { font-size: 15px; } .ac-solutions-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; } /* ------------------------------------------------------- SOLUTION CARD ------------------------------------------------------- */ .ac-solution-card { min-height: 78px; gap: 14px; padding: 11px 40px 11px 12px; border-radius: 10px; } /* ------------------------------------------------------- MOBILE FEATURED CARD No permanent background ------------------------------------------------------- */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* Mobile hover */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; transform: translateY(-1px); } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the problematic Unicode ๐Ÿกข glyph. * We will render a safe standard arrow below. */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 13px; width: 21px; height: 21px; flex-basis: 21px; font-size: 0 !important; line-height: 0; transform: translateY(-50%) rotate(0deg); } /* * Safe mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { content: "โ†’"; display: block; width: 100%; height: 100%; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 21px !important; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover: * โ†’ becomes โ†— */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow::before, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow::before { transform: rotate(-5deg); } /* ------------------------------------------------------- IMAGE ------------------------------------------------------- */ .ac-solution-image { width: 52px; height: 52px; flex-basis: 52px; border-radius: 10px; } /* ------------------------------------------------------- COPY ------------------------------------------------------- */ .ac-solution-copy { gap: 3px; } .ac-solution-copy strong { font-size: 13px; } .ac-solution-copy small { max-width: none; font-size: 11px; } /* ======================================================= CTA ======================================================= */ .ac-solutions-cta { min-height: 105px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 11px; } .ac-solutions-cta-copy { flex: 1 1 auto; min-width: 0; } .ac-solutions-cta-copy strong { font-size: 14px; } .ac-solutions-cta-copy span { font-size: 11px; } .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 108px; height: 34px; margin-top: 1px; padding: 7px 10px; font-size: 11px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-solutions-menu { padding-left: 10px; padding-right: 10px; } .ac-solution-card { gap: 12px; padding: 10px 36px 10px 10px; } .ac-solution-image { width: 48px; height: 48px; flex-basis: 48px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Smaller mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 10px; width: 20px; height: 20px; flex-basis: 20px; font-size: 0 !important; } .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { font-size: 19px !important; line-height: 20px !important; } /* CTA */ .ac-solutions-cta { padding: 14px; } .ac-solutions-cta-copy strong { font-size: 13px; } .ac-solutions-menu .ac-solutions-cta-button { min-width: 100px; padding-left: 8px; padding-right: 8px; font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f5ee273 *//* ========================================================= ASSETCUES RESOURCE MENU Lightweight + Elementor Safe ========================================================= */ .ac-resources-menu, .ac-resources-menu * { box-sizing: border-box; } .ac-resources-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 4px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-resource-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: #252525 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER Light blue only ========================================================= */ .ac-resources-menu .ac-resource-item:hover, .ac-resources-menu .ac-resource-item:focus-visible { background: var(--ac-hover); color: #252525 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-resource-icon { width: 10px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-resource-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-resource-title { min-width: 0; flex: 1 1 auto; color: #252525 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal โ†’ ๐Ÿกข Hover โ†’ rotates โ†— ========================================================= */ .ac-resource-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover arrow */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-resource-item { min-height: 56px; gap: 17px; padding: 10px 13px; border-radius: 14px; } .ac-resource-icon { width: 28px; height: 28px; flex-basis: 28px; } .ac-resource-icon svg { width: 17px; height: 17px; } .ac-resource-title { font-size: 13px; } /* * MOBILE ARROW FIX * * Hide the unsupported ๐Ÿกข glyph and render a * standard Arial arrow instead. */ .ac-resources-menu .ac-resource-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; transform: rotate(0deg); position: relative; } .ac-resources-menu .ac-resource-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow::before, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-resource-item { min-height: 12px; gap: 14px; padding: 7px 12px; } .ac-resource-title { font-size: 12px; } /* * Keep the safe mobile arrow rendering. */ .ac-resources-menu .ac-resource-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-resources-menu .ac-resource-arrow::before { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-72fbdaf *//* ========================================================= ASSETCUES SIMPLE HEADER MENU ========================================================= */ .ac-simple-menu, .ac-simple-menu * { box-sizing: border-box; } .ac-simple-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 3px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-simple-menu-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #202020 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER ========================================================= */ .ac-simple-menu-item:hover, .ac-simple-menu-item:focus-visible { background: var(--ac-hover); color: #202020 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-simple-menu-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-simple-menu-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-simple-menu-title { min-width: 0; flex: 1 1 auto; color: #202020 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-simple-menu-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; line-height: 1; white-space: nowrap; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* ========================================================= DESKTOP ARROW HOVER ========================================================= */ .ac-simple-menu-item:hover .ac-simple-menu-arrow, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-simple-menu-item { min-height: 38px; gap: 12px; padding: 7px 10px; border-radius: 9px; } .ac-simple-menu-icon { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu-icon svg { width: 17px; height: 17px; } .ac-simple-menu-title { font-size: 13px; } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the unsupported Unicode ๐Ÿกข character. */ .ac-simple-menu .ac-simple-menu-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; line-height: 0; transform: rotate(0deg); } /* * Render a standard mobile-safe arrow. */ .ac-simple-menu .ac-simple-menu-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 20px; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-simple-menu-item:hover .ac-simple-menu-arrow::before, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-simple-menu-item { min-height: 36px; gap: 10px; padding: 6px 8px; } .ac-simple-menu-title { font-size: 12px; } .ac-simple-menu .ac-simple-menu-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu .ac-simple-menu-arrow::before { font-size: 18px !important; line-height: 19px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c7dd41e *//* ========================================================= ASSETCUES MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-mega-menu, .ac-mega-menu * { box-sizing: border-box; } .ac-mega-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e5e7e9; --ac-soft: #eaf6f5; width: 100%; display: flex; background: #fff; color: var(--ac-dark); font-family: inherit; border-radius: 0 0 22px 22px; overflow: hidden; } /* ========================================================= LEFT NAVIGATION ========================================================= */ .ac-mega-nav { width: 300px; flex: 0 0 300px; padding: 26px 12px 26px 18px; background: var(--ac-soft); } /* ========================================================= MENU SECTIONS ========================================================= */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 8px; padding-top: 15px; border-top: 1px solid rgba(60,156,160,.30); } /* ========================================================= SECTION TITLES ========================================================= */ .ac-menu-section-title { padding: 0 20px 9px; color: #202020; font-size: 16px; line-height: 1.25; font-weight: 700; } /* ========================================================= NAV ITEM ========================================================= */ .ac-mega-nav-item { position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; padding: 8px 12px 8px 20px; border: 1px solid transparent; border-radius: 11px; background: transparent !important; color: #202020 !important; font-family: inherit; font-size: 15px; line-height: 1.25; font-weight: 500; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; appearance: none; -webkit-appearance: none; box-shadow: none !important; text-decoration: none !important; } .ac-mega-nav-item:hover { background: rgba(255,255,255,.65) !important; color: #202020 !important; border-color: transparent !important; } .ac-mega-nav-item:focus, .ac-mega-nav-item:focus-visible { outline: none !important; box-shadow: none !important; } .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } /* ========================================================= NAV ARROW ========================================================= */ .ac-nav-arrow { flex: 0 0 auto; font-size: 23px; line-height: 16px; font-weight: 400; color: var(--ac-teal) !important; transform: translateY(-1px); } /* ========================================================= RIGHT CONTENT ========================================================= */ .ac-mega-content { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; } /* ========================================================= PANEL ========================================================= */ .ac-mega-panel { display: none; min-width: 0; padding: 26px 32px 0; animation: acMegaFade .18s ease; } /* IMPORTANT: Active panel becomes a flex column so the CTA can be pushed to the bottom of the available menu height. */ .ac-mega-panel.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; } @keyframes acMegaFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PANEL HEADER ========================================================= */ .ac-mega-top { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .ac-mega-title-wrap { min-width: 0; } .ac-mega-top h2 { margin: 0 0 6px; color: var(--ac-blue) !important; font-size: 17px; line-height: 1.25; font-weight: 700; } .ac-mega-top p { max-width: 700px; margin: 0; color: #60646a !important; font-size: 13px; line-height: 1.45; } /* ========================================================= EXPLORE BUTTON ========================================================= */ .ac-mega-menu .ac-explore-btn { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--ac-blue) !important; border-radius: 20px !important; background: #fff !important; color: var(--ac-blue) !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, color .18s ease; } .ac-mega-menu .ac-explore-btn:hover { background: var(--ac-blue) !important; color: #fff !important; } .ac-mega-menu .ac-explore-btn span { font-size: 15px; line-height: 9px; } /* ========================================================= DIVIDER ========================================================= */ .ac-mega-divider { width: 100%; height: 1px; margin: 15px 0 12px; background: var(--ac-border); } /* ========================================================= FEATURE GRID ========================================================= */ .ac-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 2px; } /* ========================================================= FEATURE CARD ========================================================= */ .ac-feature-card { position: relative; min-width: 0; min-height: 70px; display: flex; align-items: flex-start; gap: 13px; padding: 9px 10px; border-radius: 12px; /* IMPORTANT: No permanent background. Background appears only on hover. */ background: transparent !important; color: inherit !important; text-decoration: none !important; transition: background .18s ease, transform .18s ease; } /* Hover background only. No active/default blue background. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; color: inherit !important; transform: translateY(-1px); } /* Override any .featured class that may be present in the HTML. It must NOT create a permanent background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } /* Featured item gets blue/light background ONLY on hover. */ .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } /* ========================================================= FEATURE ICON ========================================================= */ .ac-feature-icon { width: 30px; height: 30px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= FEATURE COPY ========================================================= */ .ac-feature-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ac-feature-copy strong { display: block; color: #202124 !important; font-size: 13px; line-height: 1.25; font-weight: 600; } .ac-feature-copy small { display: block; color: #666b70 !important; font-size: 11px; line-height: 1.4; } /* ========================================================= CARD ARROW ========================================================= */ .ac-card-arrow { margin-left: auto; padding-top: 0; color: var(--ac-teal) !important; font-size: 18px; line-height: 1; font-weight: 400; flex: 0 0 auto; display: inline-block; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Feature arrow: ๐Ÿกข normal ๐Ÿกฅ hover */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow { transform: rotate(-45deg); } /* ========================================================= LEARN MORE ========================================================= */ .ac-learn-more { position: absolute; right: 9px; bottom: 7px; padding: 2px 6px; border: 1px solid var(--ac-blue); border-radius: 10px; color: var(--ac-blue); font-size: 8px; line-height: 1; font-weight: 500; } /* ========================================================= CTA ========================================================= */ .ac-mega-cta { position: relative; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 25px; /* Push CTA to the bottom of the active panel. */ margin: auto -32px 0; padding: 13px 94px; background: radial-gradient( circle at 8% 80%, rgba(91,211,190,.20) 0 1px, transparent 2px ); background-size: 13px 13px; background-color: #effaf7; overflow: hidden; } .ac-cta-content { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-cta-content strong { display: block; margin: 0 !important; color: #252525 !important; font-size: 15px; line-height: 1.25; font-weight: 700; } .ac-cta-content span { display: block; max-width: 390px; color: #4e555b !important; font-size: 12px; line-height: 1.45; } /* ========================================================= CTA BUTTON Elementor-safe reset ========================================================= */ .ac-mega-menu .ac-cta-button, .ac-mega-menu a.ac-cta-button { flex: 0 0 157px !important; width: 157px !important; min-width: 157px !important; max-width: 157px !important; height: auto !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 8px 18px !important; margin: 0 !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; transform: none; transition: transform .18s ease, background .18s ease; } .ac-mega-menu .ac-cta-button:hover, .ac-mega-menu .ac-cta-button:focus, .ac-mega-menu .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: translateY(-1px); } .ac-mega-menu .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 19px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-mega-nav { width: 250px; flex-basis: 250px; padding-left: 10px; } .ac-mega-panel { padding-left: 22px; padding-right: 22px; } .ac-mega-top { gap: 15px; } .ac-mega-top h2 { font-size: 16px; } .ac-mega-top p { font-size: 12px; } .ac-feature-grid { column-gap: 10px; } .ac-feature-card { gap: 9px; padding-left: 5px; padding-right: 5px; } .ac-feature-copy strong { font-size: 12px; } .ac-feature-copy small { font-size: 10.5px; } .ac-mega-cta { margin-left: -22px; margin-right: -22px; padding-left: 45px; padding-right: 45px; } } /* ========================================================= MOBILE ACCORDION ========================================================= */ @media (max-width: 767px) { .ac-mega-menu { display: block; width: 100%; border-radius: 0 0 16px 16px; overflow: hidden; } /* ------------------------------------------------------- NAV ------------------------------------------------------- */ .ac-mega-nav { width: 100%; padding: 16px 12px 10px; background: #fff; } /* ------------------------------------------------------- SECTION ------------------------------------------------------- */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ac-border); } /* ------------------------------------------------------- SECTION TITLE ------------------------------------------------------- */ .ac-menu-section-title { padding: 0 8px 7px; font-size: 14px; } /* ------------------------------------------------------- NAV ITEM ------------------------------------------------------- */ .ac-mega-nav-item { min-height: 44px; margin: 2px 0; padding: 9px 10px; border: 1px solid #e9ebed !important; border-radius: 9px; background: #fff !important; color: #202020 !important; font-size: 13px; } .ac-mega-nav-item:hover { background: #fff !important; border-color: #e9ebed !important; color: #202020 !important; } /* IMPORTANT: Active mobile navigation item keeps its border/text state but DOES NOT receive a filled background. */ .ac-mega-menu .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } .ac-mega-menu .ac-mega-nav-item.active *, .ac-mega-menu .ac-mega-nav-item.active span { color: var(--ac-teal) !important; -webkit-text-fill-color: var(--ac-teal) !important; } /* ------------------------------------------------------- MOBILE ARROW ------------------------------------------------------- */ .ac-nav-arrow { font-size: 22px; transition: transform .2s ease; } .ac-mega-nav-item.active .ac-nav-arrow { transform: rotate(90deg); } /* ------------------------------------------------------- CONTENT ------------------------------------------------------- */ .ac-mega-content { display: block; width: 100%; } /* On mobile the panel returns to normal document flow. This keeps the accordion compact. */ .ac-mega-panel { display: none; padding: 17px 12px 0; border-top: 1px solid var(--ac-border); flex: none; min-height: auto; } .ac-mega-panel.active { display: block; flex: none; min-height: auto; } /* ------------------------------------------------------- HEADER ------------------------------------------------------- */ .ac-mega-top { min-height: auto; display: block; } .ac-mega-top h2 { margin-bottom: 6px; font-size: 18px; } .ac-mega-top p { font-size: 13px; line-height: 1.45; } /* ------------------------------------------------------- EXPLORE ------------------------------------------------------- */ .ac-mega-menu .ac-explore-btn { margin-top: 11px !important; padding: 9px 13px !important; font-size: 12px !important; } /* ------------------------------------------------------- DIVIDER ------------------------------------------------------- */ .ac-mega-divider { margin: 15px 0 10px; } /* ------------------------------------------------------- FEATURES ------------------------------------------------------- */ .ac-feature-grid { grid-template-columns: 1fr; gap: 3px; } .ac-feature-card { min-height: 68px; padding: 9px 5px; border-radius: 10px; /* No permanent active background on mobile. */ background: transparent !important; } /* Mobile hover only. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; } /* Prevent .featured from bringing back the permanent blue background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } .ac-feature-icon { width: 30px; height: 30px; flex-basis: 30px; } .ac-feature-icon svg { width: 17px; height: 17px; } .ac-feature-copy strong { font-size: 14px; } .ac-feature-copy small { font-size: 12px; line-height: 1.4; } .ac-card-arrow { font-size: 17px; } .ac-learn-more { display: none; } /* ======================================================= MOBILE CTA ======================================================= */ .ac-mega-cta { min-height: auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; /* Mobile CTA remains inside normal accordion flow. */ margin: 10px -12px 0 !important; padding: 18px 18px 19px !important; } .ac-cta-content { min-width: 0; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } .ac-cta-content strong { font-size: 15px !important; line-height: 1.25 !important; } .ac-cta-content span { max-width: none !important; font-size: 12px !important; line-height: 1.45 !important; } /* ------------------------------------------------------- MOBILE CTA BUTTON โ€” FORCE HORIZONTAL ------------------------------------------------------- */ .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 120px !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; height: 38px !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 9px 10px !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button:hover, .ac-mega-menu .ac-mega-cta .ac-cta-button:focus, .ac-mega-menu .ac-mega-cta .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 17px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ .ac-mega-menu .ac-card-arrow { /* Hide the unsupported Unicode character */ font-size: 0 !important; width: 22px; min-width: 22px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--ac-teal) !important; transform: none !important; } /* Normal state โ†’ */ .ac-mega-menu .ac-card-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover state โ†— */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow::before, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow::before { transform: rotate(-45deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-mega-nav { padding-left: 10px; padding-right: 10px; } .ac-menu-section-title { font-size: 13px; } .ac-mega-nav-item { font-size: 12px; } .ac-mega-panel { padding-left: 10px; padding-right: 10px; } .ac-feature-copy strong { font-size: 13px; } .ac-feature-copy small { font-size: 11.5px; } /* Keep CTA horizontal even on very small screens */ .ac-mega-cta { gap: 8px !important; padding-left: 14px !important; padding-right: 14px !important; } .ac-cta-content { flex: 1 1 auto !important; min-width: 0 !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 36px !important; min-height: 36px !important; padding: 8px 8px !important; gap: 5px !important; font-size: 12px !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-94a04c0 *//* ========================================================= ASSETCUES SOLUTIONS MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-solutions-menu, .ac-solutions-menu * { box-sizing: border-box; } .ac-solutions-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e6eaee; --ac-soft-blue: #edf2fc; --ac-soft-green: #effaf7; width: 100%; padding: 28px 30px 24px; color: var(--ac-dark); } /* ========================================================= HEADER ========================================================= */ .ac-solutions-head { width: 100%; margin-bottom: 28px; } .ac-solutions-head h2 { margin: 0; color: #222; font-size: 17px; line-height: 1.25; font-weight: 700; } /* ========================================================= SOLUTIONS GRID ========================================================= */ .ac-solutions-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 22px; width: 100%; } /* ========================================================= SOLUTION CARD ========================================================= */ .ac-solution-card { position: relative; min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 28px; /* * Extra right padding keeps text away from arrow. */ padding: 13px 46px 13px 20px; border: 1px solid var(--ac-border); border-radius: 13px; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } /* ========================================================= REMOVE PERMANENT FEATURED BLUE BACKGROUND ========================================================= */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* ========================================================= HOVER Blue background ONLY on hover ========================================================= */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; color: inherit !important; text-decoration: none !important; transform: translateY(-1px); } /* Featured hover */ .ac-solutions-menu .ac-solution-card.ac-solution-featured:hover { background: var(--ac-soft-blue); border-color: transparent; } /* ========================================================= SERVICE CARD ARROW Uses: ๐Ÿกข Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; margin: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; font-weight: 400; line-height: 1; white-space: nowrap; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform .18s ease, color .18s ease; pointer-events: none; } /* ========================================================= ARROW HOVER ========================================================= */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow { transform: translateY(-50%) rotate(-45deg); color: var(--ac-teal) !important; } /* ========================================================= IMAGE AREA ========================================================= */ .ac-solution-image { width: 64px; height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.07); overflow: hidden; } /* Image placeholder */ .ac-solution-image-placeholder { width: 100%; height: 100%; background: #fff; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .ac-solution-image img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ========================================================= CARD COPY ========================================================= */ .ac-solution-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ac-solution-copy strong { display: block; margin: 0; color: #202124 !important; font-size: 13px; line-height: 1.3; font-weight: 600; } .ac-solution-copy small { display: block; max-width: 360px; margin: 0; color: #60666c !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA ========================================================= */ .ac-solutions-cta { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-radius: 13px; background: radial-gradient( circle, rgba(91,211,190,.18) 1.5px, transparent 1.5px ); background-size: 15px 15px; background-color: var(--ac-soft-green); overflow: hidden; } .ac-solutions-cta-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-solutions-cta-copy strong { display: block; color: #252525 !important; font-size: 14px; line-height: 1.25; font-weight: 700; } .ac-solutions-cta-copy span { display: block; max-width: 270px; color: #505860 !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA BUTTON ========================================================= */ .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 117px; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border: 0 !important; border-radius: 7px; background: var(--ac-blue) !important; color: #fff !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, transform .18s ease; } .ac-solutions-menu .ac-solutions-cta-button:hover { background: #2f4899 !important; color: #fff !important; transform: translateY(-1px); } .ac-solutions-cta-button span { color: #fff !important; white-space: nowrap; } .ac-solutions-cta-arrow { font-size: 16px; line-height: 1; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-solutions-menu { padding: 24px 22px 20px; } .ac-solutions-grid { column-gap: 25px; } .ac-solution-card { gap: 18px; padding: 11px 38px 11px 14px; } .ac-solution-image { width: 58px; height: 58px; flex-basis: 58px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Tablet arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 14px; width: 21px; height: 21px; flex-basis: 21px; font-size: 18px; } .ac-solutions-cta { padding-left: 16px; padding-right: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-solutions-menu { width: 100%; padding: 18px 12px 18px; } .ac-solutions-head { margin-bottom: 16px; } .ac-solutions-head h2 { font-size: 15px; } .ac-solutions-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; } /* ------------------------------------------------------- SOLUTION CARD ------------------------------------------------------- */ .ac-solution-card { min-height: 78px; gap: 14px; padding: 11px 40px 11px 12px; border-radius: 10px; } /* ------------------------------------------------------- MOBILE FEATURED CARD No permanent background ------------------------------------------------------- */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* Mobile hover */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; transform: translateY(-1px); } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the problematic Unicode ๐Ÿกข glyph. * We will render a safe standard arrow below. */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 13px; width: 21px; height: 21px; flex-basis: 21px; font-size: 0 !important; line-height: 0; transform: translateY(-50%) rotate(0deg); } /* * Safe mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { content: "โ†’"; display: block; width: 100%; height: 100%; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 21px !important; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover: * โ†’ becomes โ†— */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow::before, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow::before { transform: rotate(-5deg); } /* ------------------------------------------------------- IMAGE ------------------------------------------------------- */ .ac-solution-image { width: 52px; height: 52px; flex-basis: 52px; border-radius: 10px; } /* ------------------------------------------------------- COPY ------------------------------------------------------- */ .ac-solution-copy { gap: 3px; } .ac-solution-copy strong { font-size: 13px; } .ac-solution-copy small { max-width: none; font-size: 11px; } /* ======================================================= CTA ======================================================= */ .ac-solutions-cta { min-height: 105px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 11px; } .ac-solutions-cta-copy { flex: 1 1 auto; min-width: 0; } .ac-solutions-cta-copy strong { font-size: 14px; } .ac-solutions-cta-copy span { font-size: 11px; } .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 108px; height: 34px; margin-top: 1px; padding: 7px 10px; font-size: 11px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-solutions-menu { padding-left: 10px; padding-right: 10px; } .ac-solution-card { gap: 12px; padding: 10px 36px 10px 10px; } .ac-solution-image { width: 48px; height: 48px; flex-basis: 48px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Smaller mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 10px; width: 20px; height: 20px; flex-basis: 20px; font-size: 0 !important; } .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { font-size: 19px !important; line-height: 20px !important; } /* CTA */ .ac-solutions-cta { padding: 14px; } .ac-solutions-cta-copy strong { font-size: 13px; } .ac-solutions-menu .ac-solutions-cta-button { min-width: 100px; padding-left: 8px; padding-right: 8px; font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f5ee273 *//* ========================================================= ASSETCUES RESOURCE MENU Lightweight + Elementor Safe ========================================================= */ .ac-resources-menu, .ac-resources-menu * { box-sizing: border-box; } .ac-resources-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 4px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-resource-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: #252525 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER Light blue only ========================================================= */ .ac-resources-menu .ac-resource-item:hover, .ac-resources-menu .ac-resource-item:focus-visible { background: var(--ac-hover); color: #252525 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-resource-icon { width: 10px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-resource-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-resource-title { min-width: 0; flex: 1 1 auto; color: #252525 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal โ†’ ๐Ÿกข Hover โ†’ rotates โ†— ========================================================= */ .ac-resource-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover arrow */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-resource-item { min-height: 56px; gap: 17px; padding: 10px 13px; border-radius: 14px; } .ac-resource-icon { width: 28px; height: 28px; flex-basis: 28px; } .ac-resource-icon svg { width: 17px; height: 17px; } .ac-resource-title { font-size: 13px; } /* * MOBILE ARROW FIX * * Hide the unsupported ๐Ÿกข glyph and render a * standard Arial arrow instead. */ .ac-resources-menu .ac-resource-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; transform: rotate(0deg); position: relative; } .ac-resources-menu .ac-resource-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow::before, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-resource-item { min-height: 12px; gap: 14px; padding: 7px 12px; } .ac-resource-title { font-size: 12px; } /* * Keep the safe mobile arrow rendering. */ .ac-resources-menu .ac-resource-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-resources-menu .ac-resource-arrow::before { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-72fbdaf *//* ========================================================= ASSETCUES SIMPLE HEADER MENU ========================================================= */ .ac-simple-menu, .ac-simple-menu * { box-sizing: border-box; } .ac-simple-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 3px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-simple-menu-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #202020 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER ========================================================= */ .ac-simple-menu-item:hover, .ac-simple-menu-item:focus-visible { background: var(--ac-hover); color: #202020 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-simple-menu-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-simple-menu-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-simple-menu-title { min-width: 0; flex: 1 1 auto; color: #202020 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-simple-menu-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; line-height: 1; white-space: nowrap; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* ========================================================= DESKTOP ARROW HOVER ========================================================= */ .ac-simple-menu-item:hover .ac-simple-menu-arrow, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-simple-menu-item { min-height: 38px; gap: 12px; padding: 7px 10px; border-radius: 9px; } .ac-simple-menu-icon { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu-icon svg { width: 17px; height: 17px; } .ac-simple-menu-title { font-size: 13px; } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the unsupported Unicode ๐Ÿกข character. */ .ac-simple-menu .ac-simple-menu-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; line-height: 0; transform: rotate(0deg); } /* * Render a standard mobile-safe arrow. */ .ac-simple-menu .ac-simple-menu-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 20px; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-simple-menu-item:hover .ac-simple-menu-arrow::before, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-simple-menu-item { min-height: 36px; gap: 10px; padding: 6px 8px; } .ac-simple-menu-title { font-size: 12px; } .ac-simple-menu .ac-simple-menu-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu .ac-simple-menu-arrow::before { font-size: 18px !important; line-height: 19px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c7dd41e *//* ========================================================= ASSETCUES MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-mega-menu, .ac-mega-menu * { box-sizing: border-box; } .ac-mega-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e5e7e9; --ac-soft: #eaf6f5; width: 100%; display: flex; background: #fff; color: var(--ac-dark); font-family: inherit; border-radius: 0 0 22px 22px; overflow: hidden; } /* ========================================================= LEFT NAVIGATION ========================================================= */ .ac-mega-nav { width: 300px; flex: 0 0 300px; padding: 26px 12px 26px 18px; background: var(--ac-soft); } /* ========================================================= MENU SECTIONS ========================================================= */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 8px; padding-top: 15px; border-top: 1px solid rgba(60,156,160,.30); } /* ========================================================= SECTION TITLES ========================================================= */ .ac-menu-section-title { padding: 0 20px 9px; color: #202020; font-size: 16px; line-height: 1.25; font-weight: 700; } /* ========================================================= NAV ITEM ========================================================= */ .ac-mega-nav-item { position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; padding: 8px 12px 8px 20px; border: 1px solid transparent; border-radius: 11px; background: transparent !important; color: #202020 !important; font-family: inherit; font-size: 15px; line-height: 1.25; font-weight: 500; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; appearance: none; -webkit-appearance: none; box-shadow: none !important; text-decoration: none !important; } .ac-mega-nav-item:hover { background: rgba(255,255,255,.65) !important; color: #202020 !important; border-color: transparent !important; } .ac-mega-nav-item:focus, .ac-mega-nav-item:focus-visible { outline: none !important; box-shadow: none !important; } .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } /* ========================================================= NAV ARROW ========================================================= */ .ac-nav-arrow { flex: 0 0 auto; font-size: 23px; line-height: 16px; font-weight: 400; color: var(--ac-teal) !important; transform: translateY(-1px); } /* ========================================================= RIGHT CONTENT ========================================================= */ .ac-mega-content { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #fff; } /* ========================================================= PANEL ========================================================= */ .ac-mega-panel { display: none; min-width: 0; padding: 26px 32px 0; animation: acMegaFade .18s ease; } /* IMPORTANT: Active panel becomes a flex column so the CTA can be pushed to the bottom of the available menu height. */ .ac-mega-panel.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; } @keyframes acMegaFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= PANEL HEADER ========================================================= */ .ac-mega-top { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .ac-mega-title-wrap { min-width: 0; } .ac-mega-top h2 { margin: 0 0 6px; color: var(--ac-blue) !important; font-size: 17px; line-height: 1.25; font-weight: 700; } .ac-mega-top p { max-width: 700px; margin: 0; color: #60646a !important; font-size: 13px; line-height: 1.45; } /* ========================================================= EXPLORE BUTTON ========================================================= */ .ac-mega-menu .ac-explore-btn { flex: 0 0 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--ac-blue) !important; border-radius: 20px !important; background: #fff !important; color: var(--ac-blue) !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, color .18s ease; } .ac-mega-menu .ac-explore-btn:hover { background: var(--ac-blue) !important; color: #fff !important; } .ac-mega-menu .ac-explore-btn span { font-size: 15px; line-height: 9px; } /* ========================================================= DIVIDER ========================================================= */ .ac-mega-divider { width: 100%; height: 1px; margin: 15px 0 12px; background: var(--ac-border); } /* ========================================================= FEATURE GRID ========================================================= */ .ac-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 2px; } /* ========================================================= FEATURE CARD ========================================================= */ .ac-feature-card { position: relative; min-width: 0; min-height: 70px; display: flex; align-items: flex-start; gap: 13px; padding: 9px 10px; border-radius: 12px; /* IMPORTANT: No permanent background. Background appears only on hover. */ background: transparent !important; color: inherit !important; text-decoration: none !important; transition: background .18s ease, transform .18s ease; } /* Hover background only. No active/default blue background. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; color: inherit !important; transform: translateY(-1px); } /* Override any .featured class that may be present in the HTML. It must NOT create a permanent background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } /* Featured item gets blue/light background ONLY on hover. */ .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } /* ========================================================= FEATURE ICON ========================================================= */ .ac-feature-icon { width: 30px; height: 30px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-feature-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= FEATURE COPY ========================================================= */ .ac-feature-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ac-feature-copy strong { display: block; color: #202124 !important; font-size: 13px; line-height: 1.25; font-weight: 600; } .ac-feature-copy small { display: block; color: #666b70 !important; font-size: 11px; line-height: 1.4; } /* ========================================================= CARD ARROW ========================================================= */ .ac-card-arrow { margin-left: auto; padding-top: 0; color: var(--ac-teal) !important; font-size: 18px; line-height: 1; font-weight: 400; flex: 0 0 auto; display: inline-block; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Feature arrow: ๐Ÿกข normal ๐Ÿกฅ hover */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow { transform: rotate(-45deg); } /* ========================================================= LEARN MORE ========================================================= */ .ac-learn-more { position: absolute; right: 9px; bottom: 7px; padding: 2px 6px; border: 1px solid var(--ac-blue); border-radius: 10px; color: var(--ac-blue); font-size: 8px; line-height: 1; font-weight: 500; } /* ========================================================= CTA ========================================================= */ .ac-mega-cta { position: relative; min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 25px; /* Push CTA to the bottom of the active panel. */ margin: auto -32px 0; padding: 13px 94px; background: radial-gradient( circle at 8% 80%, rgba(91,211,190,.20) 0 1px, transparent 2px ); background-size: 13px 13px; background-color: #effaf7; overflow: hidden; } .ac-cta-content { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-cta-content strong { display: block; margin: 0 !important; color: #252525 !important; font-size: 15px; line-height: 1.25; font-weight: 700; } .ac-cta-content span { display: block; max-width: 390px; color: #4e555b !important; font-size: 12px; line-height: 1.45; } /* ========================================================= CTA BUTTON Elementor-safe reset ========================================================= */ .ac-mega-menu .ac-cta-button, .ac-mega-menu a.ac-cta-button { flex: 0 0 157px !important; width: 157px !important; min-width: 157px !important; max-width: 157px !important; height: auto !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 8px 18px !important; margin: 0 !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; transform: none; transition: transform .18s ease, background .18s ease; } .ac-mega-menu .ac-cta-button:hover, .ac-mega-menu .ac-cta-button:focus, .ac-mega-menu .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: translateY(-1px); } .ac-mega-menu .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 19px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-mega-nav { width: 250px; flex-basis: 250px; padding-left: 10px; } .ac-mega-panel { padding-left: 22px; padding-right: 22px; } .ac-mega-top { gap: 15px; } .ac-mega-top h2 { font-size: 16px; } .ac-mega-top p { font-size: 12px; } .ac-feature-grid { column-gap: 10px; } .ac-feature-card { gap: 9px; padding-left: 5px; padding-right: 5px; } .ac-feature-copy strong { font-size: 12px; } .ac-feature-copy small { font-size: 10.5px; } .ac-mega-cta { margin-left: -22px; margin-right: -22px; padding-left: 45px; padding-right: 45px; } } /* ========================================================= MOBILE ACCORDION ========================================================= */ @media (max-width: 767px) { .ac-mega-menu { display: block; width: 100%; border-radius: 0 0 16px 16px; overflow: hidden; } /* ------------------------------------------------------- NAV ------------------------------------------------------- */ .ac-mega-nav { width: 100%; padding: 16px 12px 10px; background: #fff; } /* ------------------------------------------------------- SECTION ------------------------------------------------------- */ .ac-menu-section { width: 100%; } .ac-integrations-section { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ac-border); } /* ------------------------------------------------------- SECTION TITLE ------------------------------------------------------- */ .ac-menu-section-title { padding: 0 8px 7px; font-size: 14px; } /* ------------------------------------------------------- NAV ITEM ------------------------------------------------------- */ .ac-mega-nav-item { min-height: 44px; margin: 2px 0; padding: 9px 10px; border: 1px solid #e9ebed !important; border-radius: 9px; background: #fff !important; color: #202020 !important; font-size: 13px; } .ac-mega-nav-item:hover { background: #fff !important; border-color: #e9ebed !important; color: #202020 !important; } /* IMPORTANT: Active mobile navigation item keeps its border/text state but DOES NOT receive a filled background. */ .ac-mega-menu .ac-mega-nav-item.active { background: #fff !important; border-color: var(--ac-teal) !important; color: var(--ac-teal) !important; } .ac-mega-menu .ac-mega-nav-item.active *, .ac-mega-menu .ac-mega-nav-item.active span { color: var(--ac-teal) !important; -webkit-text-fill-color: var(--ac-teal) !important; } /* ------------------------------------------------------- MOBILE ARROW ------------------------------------------------------- */ .ac-nav-arrow { font-size: 22px; transition: transform .2s ease; } .ac-mega-nav-item.active .ac-nav-arrow { transform: rotate(90deg); } /* ------------------------------------------------------- CONTENT ------------------------------------------------------- */ .ac-mega-content { display: block; width: 100%; } /* On mobile the panel returns to normal document flow. This keeps the accordion compact. */ .ac-mega-panel { display: none; padding: 17px 12px 0; border-top: 1px solid var(--ac-border); flex: none; min-height: auto; } .ac-mega-panel.active { display: block; flex: none; min-height: auto; } /* ------------------------------------------------------- HEADER ------------------------------------------------------- */ .ac-mega-top { min-height: auto; display: block; } .ac-mega-top h2 { margin-bottom: 6px; font-size: 18px; } .ac-mega-top p { font-size: 13px; line-height: 1.45; } /* ------------------------------------------------------- EXPLORE ------------------------------------------------------- */ .ac-mega-menu .ac-explore-btn { margin-top: 11px !important; padding: 9px 13px !important; font-size: 12px !important; } /* ------------------------------------------------------- DIVIDER ------------------------------------------------------- */ .ac-mega-divider { margin: 15px 0 10px; } /* ------------------------------------------------------- FEATURES ------------------------------------------------------- */ .ac-feature-grid { grid-template-columns: 1fr; gap: 3px; } .ac-feature-card { min-height: 68px; padding: 9px 5px; border-radius: 10px; /* No permanent active background on mobile. */ background: transparent !important; } /* Mobile hover only. */ .ac-mega-menu .ac-feature-card:hover { background: #edf2fc !important; } /* Prevent .featured from bringing back the permanent blue background. */ .ac-mega-menu .ac-feature-card.featured { background: transparent !important; } .ac-mega-menu .ac-feature-card.featured:hover { background: #edf2fc !important; } .ac-feature-icon { width: 30px; height: 30px; flex-basis: 30px; } .ac-feature-icon svg { width: 17px; height: 17px; } .ac-feature-copy strong { font-size: 14px; } .ac-feature-copy small { font-size: 12px; line-height: 1.4; } .ac-card-arrow { font-size: 17px; } .ac-learn-more { display: none; } /* ======================================================= MOBILE CTA ======================================================= */ .ac-mega-cta { min-height: auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; /* Mobile CTA remains inside normal accordion flow. */ margin: 10px -12px 0 !important; padding: 18px 18px 19px !important; } .ac-cta-content { min-width: 0; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; gap: 5px !important; } .ac-cta-content strong { font-size: 15px !important; line-height: 1.25 !important; } .ac-cta-content span { max-width: none !important; font-size: 12px !important; line-height: 1.45 !important; } /* ------------------------------------------------------- MOBILE CTA BUTTON โ€” FORCE HORIZONTAL ------------------------------------------------------- */ .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 120px !important; width: 120px !important; min-width: 120px !important; max-width: 120px !important; height: 38px !important; min-height: 38px !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 7px !important; margin: 0 !important; padding: 9px 10px !important; border: 0 !important; border-radius: 7px !important; background: var(--ac-blue) !important; color: #fff !important; font-family: inherit !important; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; word-wrap: normal !important; writing-mode: horizontal-tb !important; appearance: none !important; -webkit-appearance: none !important; box-shadow: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button:hover, .ac-mega-menu .ac-mega-cta .ac-cta-button:focus, .ac-mega-menu .ac-mega-cta .ac-cta-button:active { background: #2f4899 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { display: inline-block !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #fff !important; font-size: 17px !important; line-height: 10px !important; font-weight: inherit !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ /* Hide the unsupported Unicode character */ .ac-mega-menu .ac-card-arrow { /* Hide the unsupported Unicode character */ font-size: 0 !important; width: 22px; min-width: 22px; display: inline-flex !important; align-items: center; justify-content: center; color: var(--ac-teal) !important; transform: none !important; } /* Normal state โ†’ */ .ac-mega-menu .ac-card-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover state โ†— */ .ac-mega-menu .ac-feature-card:hover .ac-card-arrow::before, .ac-mega-menu .ac-feature-card:focus-visible .ac-card-arrow::before { transform: rotate(-45deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-mega-nav { padding-left: 10px; padding-right: 10px; } .ac-menu-section-title { font-size: 13px; } .ac-mega-nav-item { font-size: 12px; } .ac-mega-panel { padding-left: 10px; padding-right: 10px; } .ac-feature-copy strong { font-size: 13px; } .ac-feature-copy small { font-size: 11.5px; } /* Keep CTA horizontal even on very small screens */ .ac-mega-cta { gap: 8px !important; padding-left: 14px !important; padding-right: 14px !important; } .ac-cta-content { flex: 1 1 auto !important; min-width: 0 !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button, .ac-mega-menu .ac-mega-cta a.ac-cta-button { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; height: 36px !important; min-height: 36px !important; padding: 8px 8px !important; gap: 5px !important; font-size: 12px !important; white-space: nowrap !important; writing-mode: horizontal-tb !important; } .ac-mega-menu .ac-mega-cta .ac-cta-button span { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-94a04c0 *//* ========================================================= ASSETCUES SOLUTIONS MEGA MENU Lightweight + Elementor Safe ========================================================= */ .ac-solutions-menu, .ac-solutions-menu * { box-sizing: border-box; } .ac-solutions-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-dark: #202124; --ac-text: #555b63; --ac-border: #e6eaee; --ac-soft-blue: #edf2fc; --ac-soft-green: #effaf7; width: 100%; padding: 28px 30px 24px; color: var(--ac-dark); } /* ========================================================= HEADER ========================================================= */ .ac-solutions-head { width: 100%; margin-bottom: 28px; } .ac-solutions-head h2 { margin: 0; color: #222; font-size: 17px; line-height: 1.25; font-weight: 700; } /* ========================================================= SOLUTIONS GRID ========================================================= */ .ac-solutions-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 22px; width: 100%; } /* ========================================================= SOLUTION CARD ========================================================= */ .ac-solution-card { position: relative; min-width: 0; min-height: 88px; display: flex; align-items: center; gap: 28px; /* * Extra right padding keeps text away from arrow. */ padding: 13px 46px 13px 20px; border: 1px solid var(--ac-border); border-radius: 13px; background: #fff; color: inherit !important; text-decoration: none !important; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } /* ========================================================= REMOVE PERMANENT FEATURED BLUE BACKGROUND ========================================================= */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* ========================================================= HOVER Blue background ONLY on hover ========================================================= */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; color: inherit !important; text-decoration: none !important; transform: translateY(-1px); } /* Featured hover */ .ac-solutions-menu .ac-solution-card.ac-solution-featured:hover { background: var(--ac-soft-blue); border-color: transparent; } /* ========================================================= SERVICE CARD ARROW Uses: ๐Ÿกข Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { position: absolute; top: 50%; right: 18px; width: 22px; height: 22px; margin: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; font-weight: 400; line-height: 1; white-space: nowrap; transform: translateY(-50%) rotate(0deg); transform-origin: center; transition: transform .18s ease, color .18s ease; pointer-events: none; } /* ========================================================= ARROW HOVER ========================================================= */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow { transform: translateY(-50%) rotate(-45deg); color: var(--ac-teal) !important; } /* ========================================================= IMAGE AREA ========================================================= */ .ac-solution-image { width: 64px; height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.07); overflow: hidden; } /* Image placeholder */ .ac-solution-image-placeholder { width: 100%; height: 100%; background: #fff; } /* ========================================================= ACTUAL IMAGE ========================================================= */ .ac-solution-image img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ========================================================= CARD COPY ========================================================= */ .ac-solution-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ac-solution-copy strong { display: block; margin: 0; color: #202124 !important; font-size: 13px; line-height: 1.3; font-weight: 600; } .ac-solution-copy small { display: block; max-width: 360px; margin: 0; color: #60666c !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA ========================================================= */ .ac-solutions-cta { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-radius: 13px; background: radial-gradient( circle, rgba(91,211,190,.18) 1.5px, transparent 1.5px ); background-size: 15px 15px; background-color: var(--ac-soft-green); overflow: hidden; } .ac-solutions-cta-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .ac-solutions-cta-copy strong { display: block; color: #252525 !important; font-size: 14px; line-height: 1.25; font-weight: 700; } .ac-solutions-cta-copy span { display: block; max-width: 270px; color: #505860 !important; font-size: 11px; line-height: 1.45; } /* ========================================================= CTA BUTTON ========================================================= */ .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 117px; height: 34px; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border: 0 !important; border-radius: 7px; background: var(--ac-blue) !important; color: #fff !important; text-decoration: none !important; font-family: inherit !important; font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap; box-shadow: none !important; transition: background .18s ease, transform .18s ease; } .ac-solutions-menu .ac-solutions-cta-button:hover { background: #2f4899 !important; color: #fff !important; transform: translateY(-1px); } .ac-solutions-cta-button span { color: #fff !important; white-space: nowrap; } .ac-solutions-cta-arrow { font-size: 16px; line-height: 1; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .ac-solutions-menu { padding: 24px 22px 20px; } .ac-solutions-grid { column-gap: 25px; } .ac-solution-card { gap: 18px; padding: 11px 38px 11px 14px; } .ac-solution-image { width: 58px; height: 58px; flex-basis: 58px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Tablet arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 14px; width: 21px; height: 21px; flex-basis: 21px; font-size: 18px; } .ac-solutions-cta { padding-left: 16px; padding-right: 16px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-solutions-menu { width: 100%; padding: 18px 12px 18px; } .ac-solutions-head { margin-bottom: 16px; } .ac-solutions-head h2 { font-size: 15px; } .ac-solutions-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 10px; } /* ------------------------------------------------------- SOLUTION CARD ------------------------------------------------------- */ .ac-solution-card { min-height: 78px; gap: 14px; padding: 11px 40px 11px 12px; border-radius: 10px; } /* ------------------------------------------------------- MOBILE FEATURED CARD No permanent background ------------------------------------------------------- */ .ac-solutions-menu .ac-solution-card.ac-solution-featured { background: #fff; border-color: var(--ac-border); } /* Mobile hover */ .ac-solutions-menu .ac-solution-card:hover { background: var(--ac-soft-blue); border-color: transparent; transform: translateY(-1px); } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the problematic Unicode ๐Ÿกข glyph. * We will render a safe standard arrow below. */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 13px; width: 21px; height: 21px; flex-basis: 21px; font-size: 0 !important; line-height: 0; transform: translateY(-50%) rotate(0deg); } /* * Safe mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { content: "โ†’"; display: block; width: 100%; height: 100%; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 400 !important; line-height: 21px !important; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover: * โ†’ becomes โ†— */ .ac-solutions-menu .ac-solution-card:hover .ac-card-arrow::before, .ac-solutions-menu .ac-solution-card:focus-visible .ac-card-arrow::before { transform: rotate(-5deg); } /* ------------------------------------------------------- IMAGE ------------------------------------------------------- */ .ac-solution-image { width: 52px; height: 52px; flex-basis: 52px; border-radius: 10px; } /* ------------------------------------------------------- COPY ------------------------------------------------------- */ .ac-solution-copy { gap: 3px; } .ac-solution-copy strong { font-size: 13px; } .ac-solution-copy small { max-width: none; font-size: 11px; } /* ======================================================= CTA ======================================================= */ .ac-solutions-cta { min-height: 105px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 11px; } .ac-solutions-cta-copy { flex: 1 1 auto; min-width: 0; } .ac-solutions-cta-copy strong { font-size: 14px; } .ac-solutions-cta-copy span { font-size: 11px; } .ac-solutions-menu .ac-solutions-cta-button { flex: 0 0 auto; min-width: 108px; height: 34px; margin-top: 1px; padding: 7px 10px; font-size: 11px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-solutions-menu { padding-left: 10px; padding-right: 10px; } .ac-solution-card { gap: 12px; padding: 10px 36px 10px 10px; } .ac-solution-image { width: 48px; height: 48px; flex-basis: 48px; } .ac-solution-copy strong { font-size: 12px; } .ac-solution-copy small { font-size: 10px; } /* Smaller mobile arrow */ .ac-solutions-menu .ac-solution-card .ac-card-arrow { right: 10px; width: 20px; height: 20px; flex-basis: 20px; font-size: 0 !important; } .ac-solutions-menu .ac-solution-card .ac-card-arrow::before { font-size: 19px !important; line-height: 20px !important; } /* CTA */ .ac-solutions-cta { padding: 14px; } .ac-solutions-cta-copy strong { font-size: 13px; } .ac-solutions-menu .ac-solutions-cta-button { min-width: 100px; padding-left: 8px; padding-right: 8px; font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f5ee273 *//* ========================================================= ASSETCUES RESOURCE MENU Lightweight + Elementor Safe ========================================================= */ .ac-resources-menu, .ac-resources-menu * { box-sizing: border-box; } .ac-resources-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 4px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-resource-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: #252525 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER Light blue only ========================================================= */ .ac-resources-menu .ac-resource-item:hover, .ac-resources-menu .ac-resource-item:focus-visible { background: var(--ac-hover); color: #252525 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-resource-icon { width: 10px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-resource-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-resource-title { min-width: 0; flex: 1 1 auto; color: #252525 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal โ†’ ๐Ÿกข Hover โ†’ rotates โ†— ========================================================= */ .ac-resource-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* Hover arrow */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-resource-item { min-height: 56px; gap: 17px; padding: 10px 13px; border-radius: 14px; } .ac-resource-icon { width: 28px; height: 28px; flex-basis: 28px; } .ac-resource-icon svg { width: 17px; height: 17px; } .ac-resource-title { font-size: 13px; } /* * MOBILE ARROW FIX * * Hide the unsupported ๐Ÿกข glyph and render a * standard Arial arrow instead. */ .ac-resources-menu .ac-resource-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; transform: rotate(0deg); position: relative; } .ac-resources-menu .ac-resource-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-resources-menu .ac-resource-item:hover .ac-resource-arrow::before, .ac-resources-menu .ac-resource-item:focus-visible .ac-resource-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-resource-item { min-height: 12px; gap: 14px; padding: 7px 12px; } .ac-resource-title { font-size: 12px; } /* * Keep the safe mobile arrow rendering. */ .ac-resources-menu .ac-resource-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-resources-menu .ac-resource-arrow::before { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-72fbdaf *//* ========================================================= ASSETCUES SIMPLE HEADER MENU ========================================================= */ .ac-simple-menu, .ac-simple-menu * { box-sizing: border-box; } .ac-simple-menu { --ac-blue: #3854ad; --ac-teal: #3c9ca0; --ac-hover: #edf2fc; width: 100%; display: flex; flex-direction: column; gap: 3px; font-family: inherit; } /* ========================================================= MENU ITEM ========================================================= */ .ac-simple-menu-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #202020 !important; text-decoration: none !important; transition: background-color .18s ease, transform .18s ease; } /* ========================================================= HOVER ========================================================= */ .ac-simple-menu-item:hover, .ac-simple-menu-item:focus-visible { background: var(--ac-hover); color: #202020 !important; text-decoration: none !important; transform: translateY(-1px); } /* ========================================================= ICON ========================================================= */ .ac-simple-menu-icon { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-blue) !important; } .ac-simple-menu-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= TITLE ========================================================= */ .ac-simple-menu-title { min-width: 0; flex: 1 1 auto; color: #202020 !important; font-size: 13px; line-height: 1.25; font-weight: 500; } /* ========================================================= ARROW Desktop: Normal = ๐Ÿกข Hover = โ†— ========================================================= */ .ac-simple-menu-arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px; line-height: 1; white-space: nowrap; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* ========================================================= DESKTOP ARROW HOVER ========================================================= */ .ac-simple-menu-item:hover .ac-simple-menu-arrow, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow { transform: rotate(-45deg); } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .ac-simple-menu-item { min-height: 38px; gap: 12px; padding: 7px 10px; border-radius: 9px; } .ac-simple-menu-icon { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu-icon svg { width: 17px; height: 17px; } .ac-simple-menu-title { font-size: 13px; } /* ======================================================= MOBILE ARROW FIX ======================================================= */ /* * Hide the unsupported Unicode ๐Ÿกข character. */ .ac-simple-menu .ac-simple-menu-arrow { width: 20px; height: 20px; flex: 0 0 20px; font-size: 0 !important; line-height: 0; transform: rotate(0deg); } /* * Render a standard mobile-safe arrow. */ .ac-simple-menu .ac-simple-menu-arrow::before { content: "โ†’"; display: block; color: var(--ac-teal) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 400 !important; line-height: 20px; text-align: center; transform: rotate(0deg); transform-origin: center; transition: transform .18s ease; } /* * Hover โ†’ โ†— */ .ac-simple-menu-item:hover .ac-simple-menu-arrow::before, .ac-simple-menu-item:focus-visible .ac-simple-menu-arrow::before { transform: rotate(-5deg); } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { .ac-simple-menu-item { min-height: 36px; gap: 10px; padding: 6px 8px; } .ac-simple-menu-title { font-size: 12px; } .ac-simple-menu .ac-simple-menu-arrow { width: 19px; height: 19px; flex-basis: 19px; } .ac-simple-menu .ac-simple-menu-arrow::before { font-size: 18px !important; line-height: 19px; } }/* End custom CSS */ /* Start custom CSS for mega-menu, class: .elementor-element-3c6ef3c8 *//* --- Center-Out Underline for Elementor Menu --- */ /* 1. Set up the menu item container */ /*.elementor-17697 .elementor-element.elementor-element-3c6ef3c8 .e-n-menu-title {*/ /* padding-bottom: 5px; */ /*}*/ /* 2. Create the underline pseudo-element (initially hidden) */ /*.elementor-17697 .elementor-element.elementor-element-3c6ef3c8 .e-n-menu-title::after {*/ /* content: '';*/ /* position: absolute;*/ /* border: none;*/ /* width: 0;*/ /* height: 1.2px; */ /* background-color: #00A8A5;*/ /* bottom: 0;*/ /* left: 50%;*/ /* transform: translateX(-50%);*/ /* transition: width 0.3s ease-in-out;*/ /*}*/ /*.elementor-17697 .elementor-element.elementor-element-3c6ef3c8 .e-n-menu-title:hover::after {*/ /* width: 100%;*/ /*}*//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-814e73d */.header.elementor-sticky--effects{ background-color: rgb(241 241 241 / 75%) !important; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }/* End custom CSS */