.elementor-25 .elementor-element.elementor-element-4a76bfb0{--display:flex;--position:fixed;--min-height:90px;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#F0F8F03D;--border-color:#F0F8F03D;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;top:0px;--z-index:999;}.elementor-25 .elementor-element.elementor-element-4a76bfb0::before, .elementor-25 .elementor-element.elementor-element-4a76bfb0 > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-4a76bfb0 > .e-con-inner > .elementor-background-video-container::before, .elementor-25 .elementor-element.elementor-element-4a76bfb0 > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-4a76bfb0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-25 .elementor-element.elementor-element-4a76bfb0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-25 .elementor-element.elementor-element-4a76bfb0.e-con{--align-self:center;}body:not(.rtl) .elementor-25 .elementor-element.elementor-element-4a76bfb0{left:0px;}body.rtl .elementor-25 .elementor-element.elementor-element-4a76bfb0{right:0px;}.elementor-25 .elementor-element.elementor-element-10cfd27f{text-align:left;}.elementor-25 .elementor-element.elementor-element-10cfd27f img{width:100%;max-width:122%;height:49.613px;object-fit:contain;object-position:center center;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-menu-toggle{margin-left:auto;background-color:#FFFFFF00;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu .elementor-item{font-family:"Inter", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:-0.2px;word-spacing:0px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-0ae3821 );fill:var( --e-global-color-0ae3821 );padding-left:0px;padding-right:0px;padding-top:3px;padding-bottom:3px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main .elementor-item:hover, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main .elementor-item.highlighted, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main .elementor-item:focus{color:#E23125;fill:#E23125;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#E23125;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-framed .elementor-item:before, .elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-framed .elementor-item:after{border-color:#E23125;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-framed .elementor-item:before{border-width:2px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-framed.e--animation-draw .elementor-item:before{border-width:0 0 2px 2px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-framed.e--animation-draw .elementor-item:after{border-width:2px 2px 0 0;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-framed.e--animation-corners .elementor-item:before{border-width:2px 0 0 2px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-framed.e--animation-corners .elementor-item:after{border-width:0 2px 2px 0;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-underline .elementor-item:after, .elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-overline .elementor-item:before, .elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-double-line .elementor-item:before, .elementor-25 .elementor-element.elementor-element-5b3b22dc .e--pointer-double-line .elementor-item:after{height:2px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc{--e-nav-menu-horizontal-menu-item-margin:calc( 52px / 2 );}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:52px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown a, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-menu-toggle{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown{background-color:var( --e-global-color-0ae3821 );border-style:solid;border-color:var( --e-global-color-52b03b9 );}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown a:hover, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown a:focus, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown a.highlighted{background-color:#FFFFFF00;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown .elementor-item, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Inter", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;letter-spacing:-0.2px;word-spacing:0px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown li:not(:last-child){border-style:solid;border-color:#E23125;border-bottom-width:1px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc div.elementor-menu-toggle{color:var( --e-global-color-0ae3821 );}.elementor-25 .elementor-element.elementor-element-5b3b22dc div.elementor-menu-toggle svg{fill:var( --e-global-color-0ae3821 );}.elementor-25 .elementor-element.elementor-element-5b3b22dc div.elementor-menu-toggle:hover, .elementor-25 .elementor-element.elementor-element-5b3b22dc div.elementor-menu-toggle:focus{color:var( --e-global-color-accent );}.elementor-25 .elementor-element.elementor-element-5b3b22dc div.elementor-menu-toggle:hover svg, .elementor-25 .elementor-element.elementor-element-5b3b22dc div.elementor-menu-toggle:focus svg{fill:var( --e-global-color-accent );}.elementor-25 .elementor-element.elementor-element-5a24b0c .elementor-button{background-color:var( --e-global-color-6ae83b3 );font-family:"Onest", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;word-spacing:0px;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-style:solid;border-width:2px 2px 2px 2px;border-color:#E23125;border-radius:60px 60px 60px 60px;}.elementor-25 .elementor-element.elementor-element-5a24b0c .elementor-button:hover, .elementor-25 .elementor-element.elementor-element-5a24b0c .elementor-button:focus{background-color:#F9E0E2;color:#E23125;border-color:#E23125;}.elementor-25 .elementor-element.elementor-element-5a24b0c .elementor-button:hover svg, .elementor-25 .elementor-element.elementor-element-5a24b0c .elementor-button:focus svg{fill:#E23125;}.elementor-25:not(.elementor-motion-effects-element-type-background), .elementor-25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DF3131;}.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-25 .elementor-element.elementor-element-4a76bfb0{--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:space-between;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-25 .elementor-element.elementor-element-4a76bfb0.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-25 .elementor-element.elementor-element-5b3b22dc.elementor-element{--align-self:flex-start;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu .elementor-item{font-size:14px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc{--e-nav-menu-horizontal-menu-item-margin:calc( 30px / 2 );}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:30px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown .elementor-item, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown .elementor-sub-item{font-size:14px;}.elementor-25 .elementor-element.elementor-element-5a24b0c .elementor-button{font-size:14px;}}@media(min-width:768px){.elementor-25 .elementor-element.elementor-element-4a76bfb0{--content-width:90%;}}@media(max-width:1024px) and (min-width:768px){.elementor-25 .elementor-element.elementor-element-4a76bfb0{--content-width:95%;}}@media(max-width:767px){.elementor-25 .elementor-element.elementor-element-4a76bfb0{--content-width:90%;--min-height:50px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-25 .elementor-element.elementor-element-10cfd27f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-25 .elementor-element.elementor-element-10cfd27f img{height:38px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc{width:auto;max-width:auto;--nav-menu-icon-size:25px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu .elementor-item{font-size:14px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown .elementor-item, .elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown .elementor-sub-item{font-size:14px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown{border-width:0px 0px 1px 0px;}.elementor-25 .elementor-element.elementor-element-5b3b22dc .elementor-nav-menu--dropdown a{padding-top:12px;padding-bottom:12px;}.elementor-25 .elementor-element.elementor-element-5a24b0c .elementor-button{font-size:14px;padding:10px 18px 10px 18px;}} /* Start custom CSS for button, class: .elementor-element-5a24b0c *//* Force all buttons to match global button styling exactly */ .elementor-button { background-color: #FFD700 !important; color: #2D3142 !important; font-family: 'Onest', sans-serif !important; font-weight: 500 !important; font-size: 16px !important; line-height: 1.4 !important; border-radius: 1000px !important; padding: 12px 24px !important; border: none !important; text-decoration: none !important; display: inline-block !important; transition: all 0.3s ease !important; } /* Hover state */ .elementor-button:hover { background-color: #c2a501 !important; color: #FFFFFF !important; transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(44, 85, 48, 0.3) !important; } /* Specifically target header buttons */ .elementor-location-header .elementor-button { background-color: #94BA65 !important; color: #01183E !important; font-family: 'Onest', sans-serif !important; font-weight: 500 !important; font-size: 16px !important; border-radius: 6px !important; padding: 12px 24px !important; border: none !important; } .elementor-location-header .elementor-button:hover { background-color: #1E3A21 !important; color: #FFFFFF !important; } .elementor-element-7c69b68e .elementor-button-text{ color: #01183E !important; } .elementor-element-7c69b68e .elementor-button-text:hover{ color: #fff !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a76bfb0 *//* =================================== HEADER ENVIRONMENT STYLING Complete header styles consolidated =================================== */ /* =================================== HEADER CONTAINER BASE STYLES =================================== */ /* Full width header container */ .header-env { width: 100%; } /* =================================== HEADER BACKGROUND & TRANSITIONS Default (transparent) and scrolled states =================================== */ /* * Default transparent header state * Used when page is at top (not scrolled) * Multiple .elementor-25 .elementor-element.elementor-element-4a76bfb0s for maximum specificity */ .elementor-25 .elementor-element-4a76bfb0:not(.custom-scrolled), header .elementor-element-4a76bfb0:not(.custom-scrolled), body .elementor-element-4a76bfb0:not(.custom-scrolled) { background: transparent !important; background-color: transparent !important; background-image: none !important; padding: 22.5px 0 !important; } /* * Scrolled header state with backdrop blur * Applied when user scrolls down the page (via JavaScript) */ .elementor-25 .elementor-element-4a76bfb0.custom-scrolled, header .elementor-element-4a76bfb0.custom-scrolled, body .elementor-element-4a76bfb0.custom-scrolled { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; padding: 9px 0 !important; } /* Smooth transition between header states */ .elementor-element-4a76bfb0 { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* =================================== LOGO STYLING & ANIMATIONS =================================== */ /* * Logo default state with smooth transitions * Scales and moves on hover for interactive feel */ .elementor-element-10cfd27f img { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; transform: scale(1) translateY(0) !important; } /* Logo hover effect - slightly larger and lifted */ .elementor-element-10cfd27f img:hover { transform: scale(1.03) translateY(-3px) !important; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)) !important; } /* Logo size when header is scrolled - slightly smaller for compact header */ .custom-scrolled .elementor-element-10cfd27f img { transform: scale(0.9) translateY(0) !important; } /* Logo hover when scrolled - reduced animation intensity */ .custom-scrolled .elementor-element-10cfd27f img:hover { transform: scale(0.93) translateY(-2px) !important; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1)) !important; } /* =================================== NAVIGATION MENU ITEMS - DEFAULT STATE Desktop navigation styling =================================== */ /* * Base styles for all navigation links * White text on transparent header background */ .elementor-nav-menu--main .elementor-item, .elementor-nav-menu .elementor-item, nav a, .menu a, .nav-link { color: #FFF !important; text-align: center !important; font-family: 'Onest', sans-serif !important; font-size: 14.4px !important; font-style: normal !important; font-weight: 600 !important; line-height: 23.04px !important; text-decoration: none !important; position: relative !important; transition: all 0.3s ease-in-out !important; padding-bottom: 4px !important; } /* * Animated underline on hover * Grows from center outward using transform */ .elementor-nav-menu--main .elementor-item::after, .elementor-nav-menu .elementor-item::after, nav a::after, .menu a::after, .nav-link::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; width: 0 !important; height: 2px !important; background: #94BA65 !important; transition: all 0.3s ease-in-out !important; transform: translateX(-50%) !important; } /* Hover state - text color change */ .elementor-nav-menu--main .elementor-item:hover, .elementor-nav-menu .elementor-item:hover, nav a:hover, .menu a:hover, .nav-link:hover { color: #94BA65 !important; } /* Hover state - expand underline to full width */ .elementor-nav-menu--main .elementor-item:hover::after, .elementor-nav-menu .elementor-item:hover::after, nav a:hover::after, .menu a:hover::after, .nav-link:hover::after { width: 100% !important; } /* * Active/current page indicator * Shows white underline for current page on transparent header */ .elementor-nav-menu--main .elementor-item.current-menu-item::after, .elementor-nav-menu .elementor-item.current-menu-item::after, .elementor-nav-menu--main .elementor-item.elementor-item-active::after, .elementor-nav-menu .elementor-item.elementor-item-active::after, nav a.active::after, .menu a.active::after, .nav-link.active::after { content: '' !important; position: absolute !important; bottom: 0 !important; left: 50% !important; width: 100% !important; height: 2px !important; background: #FFF !important; transition: all 0.3s ease-in-out !important; transform: translateX(-50%) !important; } /* =================================== NAVIGATION MENU - SCROLLED STATE Dark text for white background =================================== */ /* * Navigation text color when header has scrolled * Changes from white to dark for readability on white background */ .custom-scrolled .elementor-nav-menu--main .elementor-item, .custom-scrolled .elementor-nav-menu .elementor-item, .custom-scrolled nav a, .custom-scrolled .menu a, .custom-scrolled .nav-link { color: #2D3142 !important; } /* Hover color remains brand color when scrolled */ .custom-scrolled .elementor-nav-menu--main .elementor-item:hover, .custom-scrolled .elementor-nav-menu .elementor-item:hover, .custom-scrolled nav a:hover, .custom-scrolled .menu a:hover, .custom-scrolled .nav-link:hover { color: #94BA65 !important; } /* * Active page underline when scrolled * Changes from white to dark to match text color */ .custom-scrolled .elementor-nav-menu--main .elementor-item.current-menu-item::after, .custom-scrolled .elementor-nav-menu .elementor-item.current-menu-item::after, .custom-scrolled .elementor-nav-menu--main .elementor-item.elementor-item-active::after, .custom-scrolled .elementor-nav-menu .elementor-item.elementor-item-active::after, .custom-scrolled nav a.active::after, .custom-scrolled .menu a.active::after, .custom-scrolled .nav-link.active::after { background: #2D3142 !important; } /* =================================== TABLET RESPONSIVE STYLES Adjustments for medium screens =================================== */ @media (max-width: 1024px) and (min-width: 768px) { /* Adjust header padding for tablet screens */ .elementor-25 .elementor-element-4a76bfb0:not(.custom-scrolled), header .elementor-element-4a76bfb0:not(.custom-scrolled), body .elementor-element-4a76bfb0:not(.custom-scrolled) { padding: 20px 0 !important; } .elementor-25 .elementor-element-4a76bfb0.custom-scrolled, header .elementor-element-4a76bfb0.custom-scrolled, body .elementor-element-4a76bfb0.custom-scrolled { padding: 8px 0 !important; } /* Logo scaling adjustments for tablet */ .elementor-element-10cfd27f img { transform: scale(0.95) translateY(0) !important; } .elementor-element-10cfd27f img:hover { transform: scale(0.98) translateY(-2px) !important; } .custom-scrolled .elementor-element-10cfd27f img { transform: scale(0.85) translateY(0) !important; } .custom-scrolled .elementor-element-10cfd27f img:hover { transform: scale(0.88) translateY(-2px) !important; } /* Slightly smaller font sizes for tablet navigation */ .elementor-nav-menu--main .elementor-item, .elementor-nav-menu .elementor-item, nav a, .menu a, .nav-link { font-size: 13.5px !important; line-height: 21.6px !important; } } /* =================================== MOBILE NAVIGATION DROPDOWN Complete mobile menu system =================================== */ @media (max-width: 1024px) { /* =================================== DESKTOP NAV VISIBILITY =================================== */ /* Hide desktop navigation on mobile devices */ .elementor-nav-menu--main .elementor-nav-menu { display: none !important; } /* Show hamburger menu toggle on mobile */ .elementor-menu-toggle { display: flex !important; } /* =================================== MOBILE DROPDOWN CONTAINER =================================== */ /* * Position the mobile dropdown menu below the header * Uses fixed positioning to stay at top of viewport * Full width to cover entire screen */ .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed !important; top: var(--header-height, 57px) !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: calc(100vh - var(--header-height, 57px)) !important; overflow-y: auto !important; background: #ffffff !important; z-index: 9998 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; display: none !important; transition: opacity 0.3s ease !important; } /* =================================== STICKY HEADER COMPATIBILITY =================================== */ /* * Adjust dropdown position when sticky header is active * Accounts for potential height changes in sticky state */ .elementor-sticky--active ~ .elementor-nav-menu--dropdown.elementor-nav-menu__container { top: var(--sticky-header-height, 57px) !important; } /* =================================== DROPDOWN VISIBILITY STATES =================================== */ /* * Show dropdown when toggled open * Elementor uses aria-hidden and class-based visibility */ .elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] { display: block !important; } .elementor-nav-menu--dropdown.elementor-nav-menu__container.elementor-nav-menu--opened { display: block !important; } /* =================================== MOBILE MENU ITEM STRUCTURE =================================== */ /* * Reset margins and padding for clean mobile layout * Add subtle borders between items for visual separation */ .elementor-nav-menu--dropdown .elementor-nav-menu li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #f0f0f0 !important; } /* Remove border from last item for cleaner appearance */ .elementor-nav-menu--dropdown .elementor-nav-menu li:last-child { border-bottom: none !important; } /* =================================== MOBILE MENU LINK STYLING =================================== */ /* * Style individual mobile menu links * Full-width clickable areas for better mobile UX * Generous padding meets accessibility tap target guidelines (44px min) */ .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item { display: block !important; padding: 16px 20px !important; color: #333333 !important; text-align: center !important; background: transparent !important; } /* =================================== MOBILE MENU HOVER/ACTIVE STATE =================================== */ /* * Subtle background color change on tap/hover * Provides clear visual feedback for user interaction */ .elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item:hover { background-color: #f8f8f8 !important; } /* =================================== PREVENT BODY SCROLL WHEN MENU OPEN =================================== */ /* * Lock body scrolling when mobile menu is open * Prevents awkward scroll behavior and focuses user on menu * Uses modern :has() .elementor-25 .elementor-element.elementor-element-4a76bfb0 - may need fallback for older browsers */ body:has(.elementor-nav-menu--dropdown[aria-hidden="false"]) { overflow: hidden; } } /* =================================== DESKTOP NAVIGATION VISIBILITY Ensure desktop nav shows on larger screens =================================== */ @media (min-width: 1025px) { /* Show desktop navigation menu */ .elementor-nav-menu--main .elementor-nav-menu { display: flex !important; } /* Hide mobile hamburger menu on desktop */ .elementor-menu-toggle { display: none !important; } } /* =================================== HEADER BUTTON STYLING Contact Us button in header =================================== */ /* * Target the specific header button * Button ID: 5a24b0c * Override any global or theme button styles */ .elementor-element-5a24b0c .elementor-button { /* Add your button styles here with !important to override */ background-color: #FFD700 !important; /* Gold/yellow - matches global buttons */ background-image: none !important; color: #2D3142 !important; /* Dark text */ border: none !important; border-radius: 23.195px !important; /* Pill shape */ padding: 12px 28px !important; font-family: 'Onest', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.5 !important; transition: all 0.3s ease !important; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3) !important; } /* Button hover state on transparent header */ .elementor-element-5a24b0c .elementor-button:hover { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important; /* Yellow to orange gradient */ background-color: #FFD700 !important; /* Fallback */ color: #2D3142 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(255, 165, 0, 0.5) !important; /* Orange glow */ } /* * Button styles when header is scrolled * Keep same appearance on white header background */ .custom-scrolled .elementor-element-5a24b0c .elementor-button { background-color: #FFD700 !important; color: #2D3142 !important; } /* Button hover when header scrolled */ .custom-scrolled .elementor-element-5a24b0c .elementor-button:hover { background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important; /* Yellow to orange gradient */ background-color: #FFD700 !important; /* Fallback */ color: #2D3142 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(255, 165, 0, 0.5) !important; } /* Hide Get Started on desktop */ .menu-item-804 { display: none !important; } /* Show Get Started only on mobile/tablet (hamburger menu) */ @media screen and (max-width: 1024px) { .menu-item-804 { display: block !important; } } /* =================================== HAMBURGER MENU ICON STYLING =================================== */ /* Default hamburger icon color (white on transparent header) */ .elementor-menu-toggle { color: #FFF !important; transition: color 0.3s ease-in-out !important; } /* Hamburger icon hover state on transparent header */ .elementor-menu-toggle:hover { color: #94BA65 !important; } /* * Green hamburger icon when header is scrolled (white background) * Matches your brand green color for better visibility */ .custom-scrolled .elementor-menu-toggle { color: #94BA65 !important; } /* Hamburger icon hover when scrolled - darker green for interaction feedback */ .custom-scrolled .elementor-menu-toggle:hover { color: #7a9c52 !important; /* Slightly darker shade of brand green */ } /* Target the hamburger icon bars specifically if needed */ .elementor-menu-toggle i, .elementor-menu-toggle svg { color: inherit !important; fill: currentColor !important; } /* =================================== USAGE NOTES & CSS VARIABLES Set these CSS variables in your main stylesheet: :root { --header-height: 80px; // Your default header height --sticky-header-height: 60px; // Sticky header height if different } BROWSER COMPATIBILITY: - backdrop-filter: Supported in modern browsers (2020+) - :has() .elementor-25 .elementor-element.elementor-element-4a76bfb0: Supported in modern browsers (2023+) - For older browser support, consider JavaScript fallbacks ELEMENTOR INTEGRATION: - This CSS targets Elementor's built-in navigation widget - The element ID '4a76bfb0' is specific to your site - The element ID '10cfd27f' is your logo element - Adjust these IDs if they differ on your site YOUR JAVASCRIPT IS ALREADY HANDLING: - Adding/removing .custom-scrolled class on scroll - Logo switching between white and dark versions - Scroll threshold set to 50px =================================== *//* End custom CSS */