.elementor-565 .elementor-element.elementor-element-3b0253f{--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;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;--z-index:99999999999;}.elementor-565 .elementor-element.elementor-element-3b0253f:not(.elementor-motion-effects-element-type-background), .elementor-565 .elementor-element.elementor-element-3b0253f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-565 .elementor-element.elementor-element-3b0253f::before, .elementor-565 .elementor-element.elementor-element-3b0253f > .elementor-background-video-container::before, .elementor-565 .elementor-element.elementor-element-3b0253f > .e-con-inner > .elementor-background-video-container::before, .elementor-565 .elementor-element.elementor-element-3b0253f > .elementor-background-slideshow::before, .elementor-565 .elementor-element.elementor-element-3b0253f > .e-con-inner > .elementor-background-slideshow::before, .elementor-565 .elementor-element.elementor-element-3b0253f > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#00000000;--background-overlay:'';}.elementor-565 .elementor-element.elementor-element-3b0253f.e-con{--align-self:center;}.elementor-565 .elementor-element.elementor-element-3b0253f.bdt-sticky.bdt-active{background-color:#1110107A;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-fs-popup{background-color:transparent;background-image:linear-gradient(180deg, #FF8F3C 0%, #BA73B966 100%);}.elementor-565 .elementor-element.elementor-element-27efcff > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-565 .elementor-element.elementor-element-27efcff.elementor-element{--align-self:center;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-menu-depth-0 > .aux-item-content{color:#FFFFFF;font-family:"League Spartan", Sans-serif;font-size:22px;font-weight:500;text-shadow:0px 4.5px 10px rgba(0, 0, 0, 0.98);}.elementor-565 .elementor-element.elementor-element-27efcff .aux-menu-depth-0.aux-hover > .aux-item-content {color:#F98632 !important;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-menu-depth-0.aux-hover > .aux-item-content{text-shadow:0px 4.5px 10px #000000;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-menu-depth-0.aux-hover{border-style:none;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-menu-depth-0.current-menu-item > a{color:#F98632;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-burger:before, .elementor-565 .elementor-element.elementor-element-27efcff .aux-burger:after, .elementor-565 .elementor-element.elementor-element-27efcff .aux-burger .mid-line{border-color:#FFFFFF !important;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-fs-menu .aux-master-menu{text-align:left;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-fs-popup .aux-panel-close{border-color:#FFFFFF;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-fs-popup .aux-panel-close .aux-close:before{background-color:#FFFFFF;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-fs-popup .aux-panel-close .aux-close:after{background-color:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:767px){.elementor-565 .elementor-element.elementor-element-3b0253f{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-565 .elementor-element.elementor-element-27efcff > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-565 .elementor-element.elementor-element-27efcff{display:block;text-align:center;}.elementor-565 .elementor-element.elementor-element-27efcff .aux-vertical .aux-menu-depth-0 .aux-item-content{display:block;text-align:center;}}/* Start custom CSS for container, class: .elementor-element-3b0253f *//* Custom CSS for Header Container f84868b */ /* 1. Default State (Non-Sticky/Top of Page) */ .elementor-element-3b0253f { overflow: visible !important; box-shadow: none !important; /* Optimize transitions - only animate what's necessary */ transition: box-shadow 0.3s ease, background-color 0.3s ease !important; /* Hardware acceleration for smoother performance */ will-change: transform, box-shadow, background-color; transform: translateZ(0); } /* 2. Sticky State (When scrolled down) */ #bdt-f84868b.bdt-sticky-fixed, .elementor-element-3b0253f.bdt-sticky-fixed { /* FORCE full viewport width - this overrides the inline style */ width: 100vw !important; max-width: 100vw !important; /* Position it at the very left edge */ left: 0 !important; right: 0 !important; inset-inline-start: 0 !important; /* Ensure it spans edge to edge */ margin-left: 0 !important; margin-right: 0 !important; /* Add the glow effect when sticky */ box-shadow: /* Thin, bright line */ 0 0 0 1px #F6AD1F, /* Soft, wide glow (Pink/Red tone) */ 0 8px 30px 10px rgba(247, 73, 106, 0.45), /* Deep outer glow (Orange tone) */ 0 15px 40px 10px rgba(246, 173, 31, 0.3) !important; /* Dark background when sticky */ background-color: #1110107A !important; /* Hardware acceleration for smooth performance */ transform: translate3d(0, 0, 0) !important; backface-visibility: hidden; perspective: 1000px; } /* Additional fallback for the animation class */ .elementor-element-3b0253f.bdt-sticky-fixed.bdt-sticky-below { width: 100vw !important; max-width: 100vw !important; box-shadow: 0 0 0 1px #F6AD1F, 0 8px 30px 10px rgba(247, 73, 106, 0.45), 0 15px 40px 10px rgba(246, 173, 31, 0.3) !important; } /* Prevent any parent container from constraining the width */ .elementor-element-3b0253f.bdt-sticky-fixed { transform: translate3d(0, 0, 0) !important; } /* Logo fade-in optimization - HIDDEN by default when sticky starts */ .elementor-element-57f79cc.sticky-logo { transition: opacity 0.2s ease !important; will-change: opacity; transform: translateZ(0); /* Hide logo initially when header becomes sticky */ opacity: 0 !important; } /* OPTION 1: Show logo only after scrolling past a certain point */ /* This uses a data attribute that BDT Sticky adds based on scroll distance */ .bdt-sticky-fixed[style*="top: 0px"] .elementor-element-57f79cc.sticky-logo, .bdt-sticky-below .elementor-element-57f79cc.sticky-logo { opacity: 1 !important; } /* OPTION 2: Add a delay before logo appears (smoother UX) */ /* Uncomment this if you prefer a time delay instead of scroll distance */ /* .bdt-sticky-fixed .elementor-element-57f79cc.sticky-logo { opacity: 0 !important; animation: logoDelayedFadeIn 0.3s ease 0.8s forwards; } @keyframes logoDelayedFadeIn { to { opacity: 1 !important; } } */ .bdt-sticky-fixed { background: rgba(10, 10, 10, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 140, 0, 0.3); /* Faster, smoother animation */ animation: headerSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* Hardware acceleration */ transform: translateZ(0); will-change: transform, opacity; } @keyframes headerSlideDown { from { transform: translate3d(0, -100%, 0); opacity: 0; } to { transform: translate3d(0, 0, 0); opacity: 1; } } /* === MOBILE MENU FULLSCREEN FIX === */ /* Force the mobile menu popup to be fullscreen */ .aux-fs-popup.aux-fs-menu-layout-center { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; margin: 0 !important; padding: 0 !important; z-index: 5544432 !important; /* Full dark background */ background: rgba(0, 0, 0, 0.98) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Ensure menu content is centered */ .aux-fs-popup .aux-fs-menu { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 80px 20px 40px; } /* Style the menu items for mobile */ .aux-fs-popup .aux-master-menu { width: 100%; max-width: 400px; text-align: center; } .aux-fs-popup .aux-master-menu .menu-item { margin: 15px 0; opacity: 0; transform: translateY(20px); animation: menuItemFadeIn 0.5s ease forwards; } /* Stagger the menu item animations */ .aux-fs-popup .aux-master-menu .menu-item:nth-child(1) { animation-delay: 0.1s; } .aux-fs-popup .aux-master-menu .menu-item:nth-child(2) { animation-delay: 0.2s; } .aux-fs-popup .aux-master-menu .menu-item:nth-child(3) { animation-delay: 0.3s; } .aux-fs-popup .aux-master-menu .menu-item:nth-child(4) { animation-delay: 0.4s; } .aux-fs-popup .aux-master-menu .menu-item:nth-child(5) { animation-delay: 0.5s; } @keyframes menuItemFadeIn { to { opacity: 1; transform: translateY(0); } } /* Style menu links */ .aux-fs-popup .aux-master-menu .aux-menu-label { font-size: 28px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 2px; padding: 15px 25px; display: inline-block; transition: all 0.3s ease; position: relative; } /* Hover effect for menu items */ .aux-fs-popup .aux-master-menu .menu-item:hover .aux-menu-label { color: #F6AD1F; transform: scale(1.1); } /* Active/Current menu item */ .aux-fs-popup .aux-master-menu .current-menu-item .aux-menu-label { color: #F6AD1F; } /* Underline animation on hover */ .aux-fs-popup .aux-master-menu .aux-menu-label::after { content: ""; position: absolute; bottom: 5px; left: 25px; right: 25px; height: 2px; background: #F6AD1F; transform: scaleX(0); transition: transform 0.3s ease; } .aux-fs-popup .aux-master-menu .menu-item:hover .aux-menu-label::after { transform: scaleX(1); } /* Close button positioning */ .aux-fs-popup .aux-panel-close { position: fixed !important; top: 30px !important; right: 30px !important; z-index: 10000 !important; } .aux-fs-popup .aux-close { width: 40px; height: 40px; cursor: pointer; transition: transform 0.3s ease; } .aux-fs-popup .aux-close:hover { transform: rotate(90deg); } /* Mobile specific adjustments */ @media (max-width: 768px) { .aux-fs-popup .aux-master-menu .aux-menu-label { font-size: 24px; padding: 12px 20px; } .aux-fs-popup .aux-panel-close { top: 20px !important; right: 20px !important; } .aux-fs-popup .aux-fs-menu { padding: 100px 20px 40px; } } /* Ensure burger menu is visible on mobile */ @media (max-width: 768px) { .elementor-element-af8b0ec .aux-burger-box { display: block !important; } .aux-burger { cursor: pointer; z-index: 1000; } } .elementor-element-3b0253f { position: relative; /* Ensure z-index works */ z-index: 9990 !important; /* Sit above page content */ overflow: visible !important; box-shadow: none !important; transition: box-shadow 0.3s ease, background-color 0.3s ease !important; will-change: transform, box-shadow, background-color; transform: translateZ(0); } /* 2. Sticky State */ #bdt-f84868b.bdt-sticky-fixed, .elementor-element-3b0253f.bdt-sticky-fixed { z-index: 9999 !important; /* Highest priority when scrolling */ width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; /* ... keep rest of your sticky code ... */ }/* End custom CSS */