.elementor-37 .elementor-element.elementor-element-6999bd3{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;--justify-items:start;--align-items:center;--overflow:hidden;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:2%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-37 .elementor-element.elementor-element-6999bd3::before, .elementor-37 .elementor-element.elementor-element-6999bd3 > .elementor-background-video-container::before, .elementor-37 .elementor-element.elementor-element-6999bd3 > .e-con-inner > .elementor-background-video-container::before, .elementor-37 .elementor-element.elementor-element-6999bd3 > .elementor-background-slideshow::before, .elementor-37 .elementor-element.elementor-element-6999bd3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-37 .elementor-element.elementor-element-6999bd3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-37 .elementor-element.elementor-element-1c4474f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0% 0% 0% 24%;text-align:start;}.elementor-37 .elementor-element.elementor-element-1c4474f.elementor-element{--align-self:center;}.elementor-37 .elementor-element.elementor-element-1c4474f img{width:40%;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-37 .elementor-element.elementor-element-757187f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0% 0% 0% 0%;}.elementor-37 .elementor-element.elementor-element-757187f.elementor-element{--align-self:flex-end;--flex-grow:1;--flex-shrink:0;}.elementor-37 .elementor-element.elementor-element-757187f .elementor-menu-toggle{margin-left:auto;}.elementor-37 .elementor-element.elementor-element-757187f .elementor-nav-menu .elementor-item{font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-37 .elementor-element.elementor-element-757187f .elementor-nav-menu--dropdown a{padding-left:10px;padding-right:10px;padding-top:11px;padding-bottom:11px;}.elementor-37 .elementor-element.elementor-element-757187f .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-37 .elementor-element.elementor-element-757187f .elementor-nav-menu__container.elementor-nav-menu--dropdown{margin-top:-84px !important;}.elementor-37 .elementor-element.elementor-element-757187f div.elementor-menu-toggle{color:#FFFFFF;}.elementor-37 .elementor-element.elementor-element-757187f div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-37 .elementor-element.elementor-element-757187f div.elementor-menu-toggle:hover, .elementor-37 .elementor-element.elementor-element-757187f div.elementor-menu-toggle:focus{color:#FFFFFF;}.elementor-37 .elementor-element.elementor-element-757187f div.elementor-menu-toggle:hover svg, .elementor-37 .elementor-element.elementor-element-757187f div.elementor-menu-toggle:focus svg{fill:#FFFFFF;}.elementor-37 .elementor-element.elementor-element-757187f .elementor-menu-toggle:hover, .elementor-37 .elementor-element.elementor-element-757187f .elementor-menu-toggle:focus{background-color:#D9D9D900;}.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-37 .elementor-element.elementor-element-6999bd3{--min-height:85px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;--padding-top:3%;--padding-bottom:0%;--padding-left:4%;--padding-right:0%;}.elementor-37 .elementor-element.elementor-element-1c4474f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;}.elementor-37 .elementor-element.elementor-element-1c4474f img{width:59%;max-width:100%;height:100%;}.elementor-37 .elementor-element.elementor-element-757187f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0% 0% 3% 79%;}.elementor-37 .elementor-element.elementor-element-757187f .elementor-menu-toggle{border-width:0px;border-radius:0px;}}@media(min-width:768px){.elementor-37 .elementor-element.elementor-element-6999bd3{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-37 .elementor-element.elementor-element-6999bd3{--width:100%;}}@media(max-width:767px){.elementor-37 .elementor-element.elementor-element-6999bd3{--width:100%;--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;--justify-items:start;--padding-top:3%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-37 .elementor-element.elementor-element-1c4474f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 22px;}.elementor-37 .elementor-element.elementor-element-1c4474f img{width:100%;}.elementor-37 .elementor-element.elementor-element-757187f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0% 40% 9% 60%;}}/* Start custom CSS for nav-menu, class: .elementor-element-757187f *//* ========================================================= DLI HEADER DESKTOP ACTIVE DROPDOWN MOBILE / TABLET EXPANDING SUBMENU ARROW POSITION PRESERVED ========================================================= */ /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1025px) { /* ===================================================== 1. HEADER ===================================================== */ .elementor-location-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; background: transparent !important; z-index: 1000000 !important; overflow: visible !important; } /* ===================================================== 2. HEADER CONTAINERS ===================================================== */ .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-section, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { background: transparent !important; overflow: visible !important; } /* ===================================================== 3. SINGLE WHITE ACTIVE SURFACE EDIT HEIGHT HERE ===================================================== */ .elementor-location-header::before { content: "" !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 0 !important; min-height: 0 !important; background: #ffffff !important; pointer-events: none !important; z-index: 0 !important; opacity: 0 !important; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.20s ease-in-out !important; } /* ===================================================== 3A. ACTIVE WHITE BLOCK ===================================================== */ .elementor-location-header:has( .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted )::before { height: 320px !important; opacity: 1 !important; } /* ===================================================== 4. HEADER CONTENT ===================================================== */ .elementor-location-header > * { position: relative !important; z-index: 2 !important; } .elementor-location-header .elementor-nav-menu--main { position: relative !important; z-index: 10 !important; } .elementor-location-header .elementor-widget-image { position: relative !important; z-index: 10 !important; } /* ===================================================== 5. NORMAL MAIN MENU ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a { color: #000000 !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease !important; } /* ===================================================== 5A. MAIN MENU TRANSPARENT ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a:hover, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a:focus, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted { background: transparent !important; box-shadow: none !important; border: none !important; } /* ===================================================== 6. ACTIVE DROPDOWN ===================================================== */ .elementor-location-header:has( .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted ) .elementor-nav-menu--main .elementor-nav-menu > li > a { color: #111111 !important; -webkit-text-fill-color: #111111 !important; background: transparent !important; } /* ===================================================== 7. ACTIVE MENU SPAN ===================================================== */ .elementor-location-header:has( .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted ) .elementor-nav-menu--main .elementor-nav-menu > li > a span { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* ===================================================== 8. ACTIVE PARENT ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:has(> a.highlighted) > a { color: #111111 !important; -webkit-text-fill-color: #111111 !important; background: transparent !important; } /* ===================================================== 9. ACTIVE ARROW ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:has(> a.highlighted) > a .sub-arrow { color: #111111 !important; fill: #111111 !important; -webkit-text-fill-color: #111111 !important; transform: none !important; opacity: 1 !important; transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out !important; } /* ===================================================== 10. ARROW SVG ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:has(> a.highlighted) > a .sub-arrow svg { color: #111111 !important; fill: #111111 !important; stroke: #111111 !important; transform: none !important; } /* ===================================================== 11. NO ARROW ROTATION ===================================================== */ .elementor-location-header .elementor-nav-menu--main .sub-arrow { transform: none !important; transition: opacity 0.25s ease-in-out !important; } /* ===================================================== 12. DESKTOP DROPDOWN ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { position: fixed !important; top: 176px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; box-sizing: border-box !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; z-index: 99999 !important; padding-top: 0 !important; padding-bottom: 55px !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; overflow: visible !important; transition: none !important; } /* ===================================================== 12A. REMOVE ELEMENTOR DROPDOWN FILL ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu::before, .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; } /* ===================================================== 13. OPEN DESKTOP DROPDOWN ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted + .sub-menu, .elementor-nav-menu--main .elementor-nav-menu > li:hover > .sub-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transition: none !important; } /* ===================================================== 14. DROPDOWN CONTENT POSITION EDIT 12% FOR LEFT POSITION ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { padding-left: max( calc((100vw - 1600px) / 2), 12% ) !important; padding-right: max( calc((100vw - 1600px) / 2), 40px ) !important; } /* ===================================================== 15. DROPDOWN LINKS ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu a { color: #111111 !important; -webkit-text-fill-color: #111111 !important; background: transparent !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.3 !important; padding-top: 12px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; transition: color 0.20s ease !important; } /* ===================================================== 16. DROPDOWN LINK HOVER ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu a:hover { color: #555555 !important; background: transparent !important; } /* ===================================================== 17. REMOVE BORDER / SHADOW ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { border: none !important; box-shadow: none !important; background: transparent !important; } /* ===================================================== 18. REMOVE HEIGHT LIMITS ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* ===================================================== 19. DESKTOP HEADER OVERFLOW ===================================================== */ header, header .e-con, header .e-con-inner, header .elementor-container, header .elementor-column, header .elementor-widget-wrap, header .elementor-widget-container, .elementor-location-header, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { overflow: visible !important; } } /* ========================================================= MOBILE / TABLET FULL SCREEN MENU + ADJUSTABLE CLOSE ICON ========================================================= */ @media (max-width: 1024px) { /* ===================================================== 1. MOBILE HEADER ===================================================== */ .elementor-location-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 999999 !important; background: transparent !important; overflow: visible !important; } /* ===================================================== 2. HEADER CONTAINERS ===================================================== */ .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-section, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { background: transparent !important; overflow: visible !important; } /* ===================================================== 3. NORMAL MOBILE MENU BUTTON ===================================================== */ .elementor-location-header .elementor-menu-toggle { color: #ffffff !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 10px !important; padding: 8px 10px !important; transition: none !important; position: relative !important; z-index: 100001 !important; } /* ===================================================== 4. FULL SCREEN MOBILE MENU IMPORTANT: 100vh / 100dvh makes WHITE BACKGROUND COVER THE ENTIRE SCREEN. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; min-height: 100vh !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: none !important; box-shadow: none !important; z-index: 99998 !important; overflow-y: auto !important; overflow-x: hidden !important; box-sizing: border-box !important; } /* ===================================================== 5. MOBILE MENU LIST ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown > ul { display: block !important; width: 100% !important; margin: 0 !important; padding-top: 270px !important; padding-left: 50px !important; padding-right: 42px !important; padding-bottom: 60px !important; box-sizing: border-box !important; } /* ===================================================== 6. MAIN MENU ITEMS ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown > ul > li { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; position: relative !important; overflow: visible !important; } /* ===================================================== 7. MAIN MENU LINK ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown > ul > li > a { position: relative !important; display: block !important; width: 100% !important; color: #111111 !important; background: transparent !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 400 !important; padding-top: 12px !important; padding-bottom: 14px !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } /* ===================================================== 8. PARENT MENU ITEM ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; position: relative !important; overflow: visible !important; } /* ===================================================== 9. SUBMENU ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children > .sub-menu { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-left: 18px !important; padding-right: 25px !important; padding-bottom: 10px !important; background: transparent !important; border: none !important; box-shadow: none !important; transform: none !important; float: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== 10. OPEN SUBMENU ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children > a.highlighted + .sub-menu { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding-top: 4px !important; padding-left: 18px !important; padding-right: 25px !important; padding-bottom: 14px !important; visibility: visible !important; opacity: 1 !important; transform: none !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ===================================================== 11. SUBMENU ITEMS ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-menu > li { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ===================================================== 12. SUBMENU LINKS ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-menu > li > a { display: block !important; position: relative !important; width: 100% !important; color: #111111 !important; background: transparent !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 400 !important; padding-top: 9px !important; padding-bottom: 9px !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } /* ===================================================== 13. ACTIVE PARENT ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children > a.highlighted { color: #111111 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ===================================================== 14. MOBILE ARROW ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow { color: #111111 !important; fill: #111111 !important; -webkit-text-fill-color: #111111 !important; margin-left: 0.5px !important; width: 20px !important; height: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; transform: none !important; opacity: 1 !important; transition: opacity 0.25s ease-in-out !important; } /* ===================================================== 15. ACTIVE ARROW ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown a.highlighted .sub-arrow { transform: none !important; margin-left: 0.5px !important; opacity: 0.45 !important; transition: opacity 0.25s ease-in-out !important; } /* ===================================================== 16. ARROW SVG ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow svg { position: static !important; margin: 0 !important; transform: none !important; transition: none !important; } /* ===================================================== 17. REMOVE FLOATING SUBMENU POSITIONING ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li > .sub-menu { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; float: none !important; } /* ===================================================== 18. NESTED SUBMENU ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-menu .sub-menu { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding-left: 18px !important; padding-right: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; transform: none !important; } /* ===================================================== 19. MOBILE CLOSE BUTTON EDIT THESE 4 VALUES TO MOVE IT: top = up / down right = left / right padding-top padding-right ===================================================== */ .elementor-location-header .elementor-menu-toggle.elementor-active { position: fixed !important; top: 30px !important; right: 30px !important; width: 50px !important; height: 50px !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3FA9F5 !important; background: transparent !important; border: none !important; border-radius: 0 !important; z-index: 100001 !important; box-sizing: border-box !important; } /* ===================================================== 20. X ICON — EASY POSITION CONTROL CHANGE transform: translate(...) X positive = right X negative = left Y positive = down Y negative = up ===================================================== */ .elementor-location-header .elementor-menu-toggle.elementor-active svg { width: 28px !important; height: 28px !important; color: #e53e51 !important; fill: #e53e51 !important; stroke: #3FA9F5 !important; margin: 0 !important; padding: 0 !important; transform: translate(15px, 0px) !important; transform-origin: center center !important; } /* ===================================================== 21. HEADER OVERFLOW ===================================================== */ header, header .e-con, header .e-con-inner, header .elementor-container, header .elementor-column, header .elementor-widget-wrap, header .elementor-widget-container, .elementor-location-header, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { overflow: visible !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6999bd3 *//* ========================================================= ========================================================= DLI HEADER DESKTOP + MOBILE / TABLET ========================================================= DESKTOP: - Transparent header - Active white connected dropdown - Full width dropdown - No arrow rotation MOBILE / TABLET: - Full screen white menu - Background page locked - Menu itself scrolls - Submenu expands inside main menu - No arrow rotation - Arrow position preserved ========================================================= */ /* ========================================================= ========================================================= DESKTOP 1025px AND ABOVE ========================================================= ========================================================= */ @media (min-width: 1025px) { /* ===================================================== 1. HEADER ===================================================== */ .elementor-location-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; background: transparent !important; z-index: 1000000 !important; overflow: visible !important; } /* ===================================================== 2. HEADER CONTAINERS ===================================================== */ .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-section, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { background: transparent !important; overflow: visible !important; } /* ===================================================== 3. SINGLE WHITE ACTIVE SURFACE EDIT HEIGHT HERE IF NEEDED ===================================================== */ .elementor-location-header::before { content: "" !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 0 !important; min-height: 0 !important; background: #ffffff !important; pointer-events: none !important; z-index: 0 !important; opacity: 0 !important; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.20s ease-in-out !important; } /* ===================================================== 3A. ACTIVE WHITE BLOCK ===================================================== */ .elementor-location-header:has( .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted )::before { height: 320px !important; opacity: 1 !important; } /* ===================================================== 4. HEADER CONTENT ABOVE WHITE BLOCK ===================================================== */ .elementor-location-header > * { position: relative !important; z-index: 2 !important; } .elementor-location-header .elementor-nav-menu--main { position: relative !important; z-index: 10 !important; } .elementor-location-header .elementor-widget-image { position: relative !important; z-index: 10 !important; } /* ===================================================== 5. NORMAL MAIN MENU ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a { color: #000000 !important; -webkit-text-fill-color: #ffffff !important; background: transparent !important; transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease !important; } /* ===================================================== 5A. MAIN MENU TRANSPARENT ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a:hover, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a:focus, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted { background: transparent !important; box-shadow: none !important; border: none !important; } /* ===================================================== 6. ACTIVE DROPDOWN ALL MAIN MENU TEXT BLACK ===================================================== */ .elementor-location-header:has( .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted ) .elementor-nav-menu--main .elementor-nav-menu > li > a { color: #111111 !important; -webkit-text-fill-color: #111111 !important; background: transparent !important; } /* ===================================================== 7. ACTIVE MENU SPAN ===================================================== */ .elementor-location-header:has( .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted ) .elementor-nav-menu--main .elementor-nav-menu > li > a span { color: #111111 !important; -webkit-text-fill-color: #111111 !important; } /* ===================================================== 8. ACTIVE PARENT ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:has(> a.highlighted) > a { color: #111111 !important; -webkit-text-fill-color: #111111 !important; background: transparent !important; } /* ===================================================== 9. ACTIVE ARROW NO ROTATION ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:has(> a.highlighted) > a .sub-arrow { color: #111111 !important; fill: #111111 !important; -webkit-text-fill-color: #111111 !important; transform: none !important; opacity: 1 !important; transition: color 0.25s ease-in-out, opacity 0.25s ease-in-out !important; } /* ===================================================== 10. ACTIVE ARROW SVG ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:has(> a.highlighted) > a .sub-arrow svg { color: #111111 !important; fill: #111111 !important; stroke: #111111 !important; transform: none !important; } /* ===================================================== 11. NO ARROW ROTATION ANYWHERE ===================================================== */ .elementor-location-header .elementor-nav-menu--main .sub-arrow { transform: none !important; transition: opacity 0.25s ease-in-out !important; } /* ===================================================== 12. DESKTOP DROPDOWN ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { position: fixed !important; top: 176px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; box-sizing: border-box !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; z-index: 99999 !important; padding-top: 0 !important; padding-bottom: 55px !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; overflow: visible !important; transition: none !important; } /* ===================================================== 12A. REMOVE DROPDOWN FILL ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu::before, .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; } /* ===================================================== 13. OPEN DESKTOP DROPDOWN ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > a.highlighted + .sub-menu, .elementor-nav-menu--main .elementor-nav-menu > li:hover > .sub-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transition: none !important; } /* ===================================================== 14. DROPDOWN CONTENT POSITION EDIT LEFT POSITION HERE ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { padding-left: max( calc((100vw - 1600px) / 2), 12% ) !important; padding-right: max( calc((100vw - 1600px) / 2), 40px ) !important; } /* ===================================================== 15. DROPDOWN LINKS ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu a { color: #111111 !important; -webkit-text-fill-color: #111111 !important; background: transparent !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.3 !important; padding-top: 12px !important; padding-bottom: 12px !important; padding-left: 0 !important; padding-right: 0 !important; transition: color 0.20s ease !important; } /* ===================================================== 16. DROPDOWN LINK HOVER ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu a:hover { color: #555555 !important; background: transparent !important; } /* ===================================================== 17. REMOVE BORDER / SHADOW ===================================================== */ .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { border: none !important; box-shadow: none !important; background: transparent !important; } /* ===================================================== 18. REMOVE HEIGHT LIMITS ===================================================== */ .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > .sub-menu { min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* ===================================================== 19. DESKTOP HEADER OVERFLOW ===================================================== */ header, header .e-con, header .e-con-inner, header .elementor-container, header .elementor-column, header .elementor-widget-wrap, header .elementor-widget-container, .elementor-location-header, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { overflow: visible !important; } } /* ========================================================= ========================================================= MOBILE / TABLET 1024px AND BELOW ========================================================= ========================================================= */ @media (max-width: 1024px) { /* ===================================================== 1. MOBILE HEADER ===================================================== */ .elementor-location-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 999999 !important; background: transparent !important; overflow: visible !important; } /* ===================================================== 2. HEADER CONTAINERS ===================================================== */ .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-section, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { background: transparent !important; overflow: visible !important; } /* ===================================================== 3. NORMAL MOBILE MENU BUTTON ===================================================== */ .elementor-location-header .elementor-menu-toggle { position: relative !important; z-index: 100001 !important; color: #ffffff !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.25) !important; border-radius: 10px !important; padding: 8px 10px !important; transition: none !important; } /* ===================================================== 4. FULL SCREEN WHITE MOBILE MENU THIS IS THE IMPORTANT PART. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; border: none !important; box-shadow: none !important; z-index: 99998 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } /* ===================================================== 5. MOBILE MENU LIST ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown > ul { display: block !important; width: 100% !important; height: auto !important; min-height: 100% !important; margin: 0 !important; padding-top: 270px !important; padding-left: 50px !important; padding-right: 42px !important; padding-bottom: 80px !important; box-sizing: border-box !important; } /* ===================================================== 6. MAIN MENU ITEMS ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown > ul > li { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== 7. MAIN MENU LINKS IMPORTANT: DO NOT MAKE THIS FLEX. THIS PREVENTS ARROW JUMPING. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown > ul > li > a { display: block !important; position: relative !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding-top: 12px !important; padding-bottom: 14px !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; color: #111111 !important; background: transparent !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 400 !important; border: none !important; box-shadow: none !important; } /* ===================================================== 8. PARENT MENU ITEMS ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ===================================================== 9. SUBMENU SUBMENU BECOMES PART OF MAIN MENU. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children > .sub-menu { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; float: none !important; transform: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-left: 18px !important; padding-right: 25px !important; padding-bottom: 10px !important; background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== 10. OPEN SUBMENU ELEMENTOR HIGHLIGHTED LINK OPENS SUBMENU. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children > a.highlighted + .sub-menu { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding-top: 4px !important; padding-left: 18px !important; padding-right: 25px !important; padding-bottom: 14px !important; visibility: visible !important; opacity: 1 !important; transform: none !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ===================================================== 11. SUBMENU ITEMS ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-menu > li { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; } /* ===================================================== 12. SUBMENU LINKS ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-menu > li > a { display: block !important; position: relative !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding-top: 9px !important; padding-bottom: 9px !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; color: #111111 !important; background: transparent !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 400 !important; border: none !important; box-shadow: none !important; } /* ===================================================== 13. ACTIVE PARENT ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li.menu-item-has-children > a.highlighted { color: #111111 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ===================================================== 14. MOBILE ARROW DO NOT CHANGE POSITION. DO NOT ROTATE. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow { color: #111111 !important; fill: #111111 !important; -webkit-text-fill-color: #111111 !important; width: 20px !important; height: 20px !important; margin-left: 0.5px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; transform: none !important; opacity: 1 !important; transition: opacity 0.25s ease-in-out !important; } /* ===================================================== 15. ACTIVE ARROW FADE ONLY. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown a.highlighted .sub-arrow { transform: none !important; margin-left: 0.5px !important; opacity: 0.45 !important; transition: opacity 0.25s ease-in-out !important; } /* ===================================================== 16. ARROW SVG ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow svg { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; transform: none !important; transition: none !important; } /* ===================================================== 17. REMOVE FLOATING SUBMENU POSITIONING ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown li > .sub-menu { top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; float: none !important; } /* ===================================================== 18. NESTED SUBMENU ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown .sub-menu .sub-menu { position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding-left: 18px !important; padding-right: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; transform: none !important; } /* ===================================================== 19. MOBILE CLOSE BUTTON ===================================================== */ .elementor-location-header .elementor-menu-toggle.elementor-active { position: fixed !important; top: 30px !important; right: 40px !important; width: 50px !important; height: 50px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #3FA9F5 !important; background: transparent !important; border: none !important; border-radius: 0 !important; z-index: 100001 !important; } /* ===================================================== 20. CLOSE ICON ===================================================== */ .elementor-location-header .elementor-menu-toggle.elementor-active svg { width: 28px !important; height: 28px !important; color: #e53e51 !important; fill: #e53e51 !important; stroke: #3FA9F5 !important; } /* ===================================================== 21. MOBILE HEADER OVERFLOW ===================================================== */ header, header .e-con, header .e-con-inner, header .elementor-container, header .elementor-column, header .elementor-widget-wrap, header .elementor-widget-container, .elementor-location-header, .elementor-location-header .e-con, .elementor-location-header .e-con-inner, .elementor-location-header .elementor-container, .elementor-location-header .elementor-column, .elementor-location-header .elementor-widget-wrap, .elementor-location-header .elementor-widget-container { overflow: visible !important; } /* ===================================================== 22. LOCK PAGE BEHIND MOBILE MENU WHEN HAMBURGER IS ACTIVE ===================================================== */ html:has( .elementor-location-header .elementor-menu-toggle.elementor-active ) { overflow: hidden !important; height: 100% !important; max-height: 100dvh !important; } body:has( .elementor-location-header .elementor-menu-toggle.elementor-active ) { overflow: hidden !important; height: 100% !important; max-height: 100dvh !important; } /* ===================================================== 23. PREVENT HORIZONTAL PAGE SCROLL ===================================================== */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* ===================================================== 24. MENU SCROLL ONLY THE WHITE MENU SCROLLS. ===================================================== */ .elementor-location-header .elementor-nav-menu--dropdown { overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } } /* ========================================================= INTERMEDIATE DESKTOP REDUCE MENU SPACING WHEN SCREEN GETS NARROWER ========================================================= */ @media (min-width: 1025px) and (max-width: 1350px) { .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a { font-size: 12px !important; padding-left: 20px !important; padding-right: 5px !important; white-space: nowrap !important; } .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu { gap: 0 !important; flex-wrap: nowrap !important; } }/* End custom CSS */