.elementor-72 .elementor-element.elementor-element-1b3e4f67{--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:center;--align-items:center;--padding-top:16px;--padding-bottom:16px;--padding-left:20px;--padding-right:20px;--z-index:999;}.elementor-72 .elementor-element.elementor-element-6c7417e6{--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-between;--align-items:center;--flex-wrap:nowrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:rgba(0,0,0,0);--border-color:rgba(0,0,0,0);--border-radius:999px 999px 999px 999px;--padding-top:10px;--padding-bottom:10px;--padding-left:26px;--padding-right:14px;}.elementor-72 .elementor-element.elementor-element-549b0f9f{--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;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .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-72 .elementor-element.elementor-element-11320cd3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-72 .elementor-element.elementor-element-11320cd3 img{height:44px;object-fit:contain;object-position:center center;}.elementor-72 .elementor-element.elementor-element-6af5646e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-72 .elementor-element.elementor-element-6af5646e img{height:44px;object-fit:contain;object-position:center center;}.elementor-72 .elementor-element.elementor-element-67571305{--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:flex-end;--align-items:center;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.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-72 .elementor-element.elementor-element-116750c8 .elementor-menu-toggle{margin-left:auto;background-color:rgba(0,0,0,0);}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu .elementor-item{font-family:"Google Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--main .elementor-item{color:#F9F9F9;fill:#F9F9F9;padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--main .elementor-item:hover, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--main .elementor-item:focus{color:#FFFFFF;fill:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-116750c8{--e-nav-menu-horizontal-menu-item-margin:calc( 10px / 2 );--nav-menu-icon-size:26px;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:10px;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown{background-color:#161616;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a:hover, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a:focus, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a.highlighted, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-menu-toggle:hover, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-menu-toggle:focus{color:#FFAA1C;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a:hover, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a:focus, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown a.highlighted{background-color:#242424;}.elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown .elementor-item, .elementor-72 .elementor-element.elementor-element-116750c8 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Google Sans", Sans-serif;font-size:16px;font-weight:500;}.elementor-72 .elementor-element.elementor-element-116750c8 div.elementor-menu-toggle{color:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-116750c8 div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-72 .elementor-element.elementor-element-170c72ad .elementor-button{background-color:#D51313;font-family:"Google Sans", Sans-serif;font-size:15px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;box-shadow:0px 8px 24px -8px rgba(213,19,19,0.45);border-radius:100px 100px 100px 100px;padding:14px 30px 14px 30px;}.elementor-72 .elementor-element.elementor-element-170c72ad .elementor-button:hover, .elementor-72 .elementor-element.elementor-element-170c72ad .elementor-button:focus{background-color:#F12323;color:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-170c72ad .elementor-button:hover svg, .elementor-72 .elementor-element.elementor-element-170c72ad .elementor-button:focus svg{fill:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-5e247d51{--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:center;--align-items:center;--padding-top:10px;--padding-bottom:10px;--padding-left:12px;--padding-right:12px;--z-index:999;}.elementor-72 .elementor-element.elementor-element-6e38bfe8{--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-between;--align-items:center;--flex-wrap:nowrap;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:rgba(0,0,0,0);--border-color:rgba(0,0,0,0);--border-radius:999px 999px 999px 999px;--padding-top:8px;--padding-bottom:8px;--padding-left:16px;--padding-right:10px;}.elementor-72 .elementor-element.elementor-element-5fb8485c{--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;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-72 .elementor-element.elementor-element-21728c3a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-72 .elementor-element.elementor-element-21728c3a img{height:36px;object-fit:contain;object-position:center center;}.elementor-72 .elementor-element.elementor-element-3d334d30{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:start;}.elementor-72 .elementor-element.elementor-element-3d334d30 img{height:36px;object-fit:contain;object-position:center center;}.elementor-72 .elementor-element.elementor-element-3cd1b3f8{--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:flex-end;--align-items:center;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-menu-toggle{margin-left:auto;background-color:rgba(0,0,0,0);}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu .elementor-item{font-family:"Google Sans", Sans-serif;font-size:15px;font-weight:500;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--main .elementor-item{color:#F9F9F9;fill:#F9F9F9;padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--main .elementor-item:hover, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--main .elementor-item:focus{color:#FFFFFF;fill:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-bfb8b89{--e-nav-menu-horizontal-menu-item-margin:calc( 10px / 2 );--nav-menu-icon-size:24px;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:10px;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-menu-toggle{color:#FFFFFF;fill:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown{background-color:#161616;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a:hover, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a:focus, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a.highlighted, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-menu-toggle:hover, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-menu-toggle:focus{color:#FFAA1C;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a:hover, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a:focus, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown a.highlighted{background-color:#242424;}.elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown .elementor-item, .elementor-72 .elementor-element.elementor-element-bfb8b89 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Google Sans", Sans-serif;font-size:16px;font-weight:500;}.elementor-72 .elementor-element.elementor-element-bfb8b89 div.elementor-menu-toggle{color:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-bfb8b89 div.elementor-menu-toggle svg{fill:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-cfafd3e .elementor-button{background-color:#D51313;font-family:"Google Sans", Sans-serif;font-size:13px;font-weight:600;fill:#FFFFFF;color:#FFFFFF;box-shadow:0px 8px 24px -8px rgba(213,19,19,0.45);border-radius:100px 100px 100px 100px;padding:11px 18px 11px 18px;}.elementor-72 .elementor-element.elementor-element-cfafd3e .elementor-button:hover, .elementor-72 .elementor-element.elementor-element-cfafd3e .elementor-button:focus{background-color:#F12323;color:#FFFFFF;}.elementor-72 .elementor-element.elementor-element-cfafd3e .elementor-button:hover svg, .elementor-72 .elementor-element.elementor-element-cfafd3e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-72 .elementor-element.elementor-element-6c7417e6{--width:100%;}.elementor-72 .elementor-element.elementor-element-6e38bfe8{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-1b3e4f67 *//* ===== McRayVictus Header ======================================= TWO CONTAINERS: .mv-hdr-dt = desktop + tablet (>=768px) .mv-hdr-m = mobile only (<=767px) Each is self-contained: a change to one cannot affect the other. EDIT COLOURS in the variables block directly below. */ .mv-hdr{ --mv-red:#D51313; --mv-ink:#161616; --mv-panel:#161616; /* dropdown / submenu background */ --mv-panel-text:#FFFFFF; /* dropdown / submenu text */ --mv-panel-hover:#FFAA1C; --mv-glass:rgba(249,249,249,.72); } :root{--header-h:100px} @media (max-width:767px){:root{--header-h:78px}} /* ---------- fixed shell (layout enforced, never collapses) ---------- */ .mv-hdr{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:999; background:transparent !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important} .mv-hdr .mv-bar{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; width:100%; max-width:1240px; margin-inline:auto; position:relative; border-radius:999px; border:1px solid transparent; transition:background .4s ease, box-shadow .4s ease, border-color .4s ease} .mv-hdr .mv-brand{flex:0 0 auto; width:auto !important} .mv-hdr .mv-right{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-end !important; flex:0 1 auto; width:auto !important} /* one-line guards */ .mv-hdr .elementor-nav-menu--main .elementor-nav-menu{flex-wrap:nowrap !important} .mv-hdr .elementor-nav-menu--main .elementor-item{white-space:nowrap} .mv-hdr .mv-cta .elementor-button{white-space:nowrap} /* ---------- logo crossfade: one grid cell = exact overlay ---------- */ .mv-hdr .mv-brand{display:grid !important; place-items:center start} .mv-hdr .mv-brand > *{grid-area:1 / 1; margin:0} .mv-hdr .mv-logo-white,.mv-hdr .mv-logo-red{transition:opacity .4s ease} .mv-hdr .mv-logo-red{opacity:0} /* ---------- scrolled / glass state ---------- */ .mv-hdr.mv-scrolled .mv-bar{ background:var(--mv-glass) !important; -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); border-color:rgba(226,222,215,.75) !important; box-shadow:0 12px 44px -22px rgba(0,0,0,.4)} .mv-hdr.mv-scrolled .mv-logo-white{opacity:0} .mv-hdr.mv-scrolled .mv-logo-red{opacity:1} .mv-hdr.mv-scrolled .elementor-nav-menu--main .elementor-item{color:var(--mv-ink) !important} .mv-hdr.mv-scrolled .elementor-nav-menu--main .elementor-item:hover{color:var(--mv-red) !important} .mv-hdr.mv-scrolled .elementor-menu-toggle, .mv-hdr.mv-scrolled .elementor-menu-toggle i, .mv-hdr.mv-scrolled .elementor-menu-toggle svg{color:var(--mv-red) !important; fill:var(--mv-red) !important} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .mv-hdr.mv-scrolled .mv-bar{background:rgba(249,249,249,.97) !important} } /* ---------- dropdown + submenu appearance ---------- Elementor puts .elementor-nav-menu--dropdown on the toggle panel AND on desktop submenus; items carry .elementor-item AND .elementor-sub-item. No !important, so Nav Menu > Style panel settings override these. */ .mv-hdr .elementor-nav-menu--dropdown{ background:var(--mv-panel); border-radius:16px; box-shadow:0 24px 60px -28px rgba(0,0,0,.65)} .mv-hdr .elementor-nav-menu--dropdown .elementor-item, .mv-hdr .elementor-nav-menu--dropdown .elementor-sub-item{ color:var(--mv-panel-text); fill:var(--mv-panel-text); justify-content:flex-start} .mv-hdr .elementor-nav-menu--dropdown .elementor-item:hover, .mv-hdr .elementor-nav-menu--dropdown .elementor-sub-item:hover, .mv-hdr .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .mv-hdr .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active{ color:var(--mv-panel-hover); background-color:rgba(255,255,255,.10)} /* ---------- toggle panel spans the pill ---------- nav. prefix hits ONLY the toggle panel; desktop submenus are ul.sub-menu and keep their own content width. */ .mv-hdr .mv-right, .mv-hdr .mv-nav, .mv-hdr .mv-nav > .elementor-widget-container{position:static !important} .mv-hdr nav.elementor-nav-menu--dropdown{ position:absolute !important; top:calc(100% + 10px) !important; left:0 !important; right:0 !important; width:auto !important; max-width:none !important; z-index:1000; max-height:calc(100vh - var(--header-h,90px) - 24px); overflow-y:auto} .mv-hdr .elementor-menu-toggle{position:relative; z-index:1001} /* ---------- per-container sizing ---------- */ .mv-hdr-dt{padding:16px 20px} .mv-hdr-dt .mv-bar{padding:10px 14px 10px 26px} .mv-hdr-dt .mv-logo-white img,.mv-hdr-dt .mv-logo-red img{height:44px; width:auto; display:block} @media (max-width:1024px){ .mv-hdr-dt{padding:12px 16px} .mv-hdr-dt .mv-bar{padding:9px 12px 9px 20px} .mv-hdr-dt .mv-logo-white img,.mv-hdr-dt .mv-logo-red img{height:40px} } .mv-hdr-m{padding:10px 12px} .mv-hdr-m .mv-bar{padding:8px 10px 8px 16px} .mv-hdr-m .mv-logo-white img,.mv-hdr-m .mv-logo-red img{height:36px; width:auto; display:block} .mv-hdr-m .mv-right{gap:6px} @media (max-width:400px){ .mv-hdr-m .mv-cta{display:none !important} } @media (prefers-reduced-motion:reduce){ .mv-hdr .mv-bar,.mv-hdr .mv-logo-white,.mv-hdr .mv-logo-red{transition:none !important} } /* ---------- which header shows at which width ---------- LAST in the file and compound (.mv-hdr.mv-hdr-dt) so it always wins over the .mv-hdr{display:flex} shell rule above. */ @media (max-width:767px){ .mv-hdr.mv-hdr-dt{display:none !important} } @media (min-width:768px){ .mv-hdr.mv-hdr-m {display:none !important} }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e247d51 *//* ===== McRayVictus Header ======================================= TWO CONTAINERS: .mv-hdr-dt = desktop + tablet (>=768px) .mv-hdr-m = mobile only (<=767px) Each is self-contained: a change to one cannot affect the other. EDIT COLOURS in the variables block directly below. */ .mv-hdr{ --mv-red:#D51313; --mv-ink:#161616; --mv-panel:#161616; /* dropdown / submenu background */ --mv-panel-text:#FFFFFF; /* dropdown / submenu text */ --mv-panel-hover:#FFAA1C; --mv-glass:rgba(249,249,249,.72); } :root{--header-h:100px} @media (max-width:767px){:root{--header-h:78px}} /* ---------- fixed shell (layout enforced, never collapses) ---------- */ .mv-hdr{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:999; background:transparent !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important} .mv-hdr .mv-bar{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; width:100%; max-width:1240px; margin-inline:auto; position:relative; border-radius:999px; border:1px solid transparent; transition:background .4s ease, box-shadow .4s ease, border-color .4s ease} .mv-hdr .mv-brand{flex:0 0 auto; width:auto !important} .mv-hdr .mv-right{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-end !important; flex:0 1 auto; width:auto !important} /* one-line guards */ .mv-hdr .elementor-nav-menu--main .elementor-nav-menu{flex-wrap:nowrap !important} .mv-hdr .elementor-nav-menu--main .elementor-item{white-space:nowrap} .mv-hdr .mv-cta .elementor-button{white-space:nowrap} /* ---------- logo crossfade: one grid cell = exact overlay ---------- */ .mv-hdr .mv-brand{display:grid !important; place-items:center start} .mv-hdr .mv-brand > *{grid-area:1 / 1; margin:0} .mv-hdr .mv-logo-white,.mv-hdr .mv-logo-red{transition:opacity .4s ease} .mv-hdr .mv-logo-red{opacity:0} /* ---------- scrolled / glass state ---------- */ .mv-hdr.mv-scrolled .mv-bar{ background:var(--mv-glass) !important; -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); border-color:rgba(226,222,215,.75) !important; box-shadow:0 12px 44px -22px rgba(0,0,0,.4)} .mv-hdr.mv-scrolled .mv-logo-white{opacity:0} .mv-hdr.mv-scrolled .mv-logo-red{opacity:1} .mv-hdr.mv-scrolled .elementor-nav-menu--main .elementor-item{color:var(--mv-ink) !important} .mv-hdr.mv-scrolled .elementor-nav-menu--main .elementor-item:hover{color:var(--mv-red) !important} .mv-hdr.mv-scrolled .elementor-menu-toggle, .mv-hdr.mv-scrolled .elementor-menu-toggle i, .mv-hdr.mv-scrolled .elementor-menu-toggle svg{color:var(--mv-red) !important; fill:var(--mv-red) !important} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .mv-hdr.mv-scrolled .mv-bar{background:rgba(249,249,249,.97) !important} } /* ---------- dropdown + submenu appearance ---------- Elementor puts .elementor-nav-menu--dropdown on the toggle panel AND on desktop submenus; items carry .elementor-item AND .elementor-sub-item. No !important, so Nav Menu > Style panel settings override these. */ .mv-hdr .elementor-nav-menu--dropdown{ background:var(--mv-panel); border-radius:16px; box-shadow:0 24px 60px -28px rgba(0,0,0,.65)} .mv-hdr .elementor-nav-menu--dropdown .elementor-item, .mv-hdr .elementor-nav-menu--dropdown .elementor-sub-item{ color:var(--mv-panel-text); fill:var(--mv-panel-text); justify-content:flex-start} .mv-hdr .elementor-nav-menu--dropdown .elementor-item:hover, .mv-hdr .elementor-nav-menu--dropdown .elementor-sub-item:hover, .mv-hdr .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .mv-hdr .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active{ color:var(--mv-panel-hover); background-color:rgba(255,255,255,.10)} /* ---------- toggle panel spans the pill ---------- nav. prefix hits ONLY the toggle panel; desktop submenus are ul.sub-menu and keep their own content width. */ .mv-hdr .mv-right, .mv-hdr .mv-nav, .mv-hdr .mv-nav > .elementor-widget-container{position:static !important} .mv-hdr nav.elementor-nav-menu--dropdown{ position:absolute !important; top:calc(100% + 10px) !important; left:0 !important; right:0 !important; width:auto !important; max-width:none !important; z-index:1000; max-height:calc(100vh - var(--header-h,90px) - 24px); overflow-y:auto} .mv-hdr .elementor-menu-toggle{position:relative; z-index:1001} /* ---------- per-container sizing ---------- */ .mv-hdr-dt{padding:16px 20px} .mv-hdr-dt .mv-bar{padding:10px 14px 10px 26px} .mv-hdr-dt .mv-logo-white img,.mv-hdr-dt .mv-logo-red img{height:44px; width:auto; display:block} @media (max-width:1024px){ .mv-hdr-dt{padding:12px 16px} .mv-hdr-dt .mv-bar{padding:9px 12px 9px 20px} .mv-hdr-dt .mv-logo-white img,.mv-hdr-dt .mv-logo-red img{height:40px} } .mv-hdr-m{padding:10px 12px} .mv-hdr-m .mv-bar{padding:8px 10px 8px 16px} .mv-hdr-m .mv-logo-white img,.mv-hdr-m .mv-logo-red img{height:36px; width:auto; display:block} .mv-hdr-m .mv-right{gap:6px} @media (max-width:400px){ .mv-hdr-m .mv-cta{display:none !important} } @media (prefers-reduced-motion:reduce){ .mv-hdr .mv-bar,.mv-hdr .mv-logo-white,.mv-hdr .mv-logo-red{transition:none !important} } /* ---------- which header shows at which width ---------- LAST in the file and compound (.mv-hdr.mv-hdr-dt) so it always wins over the .mv-hdr{display:flex} shell rule above. */ @media (max-width:767px){ .mv-hdr.mv-hdr-dt{display:none !important} } @media (min-width:768px){ .mv-hdr.mv-hdr-m {display:none !important} }/* End custom CSS */