.elementor-122 .elementor-element.elementor-element-ff65820{--display:flex;--min-height:88px;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-122 .elementor-element.elementor-element-ff65820:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-ff65820 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#212121;}.elementor-122 .elementor-element.elementor-element-cf401e9{--display:flex;--min-height:0px;--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:12px;--padding-bottom:12px;--padding-left:16px;--padding-right:16px;}.elementor-122 .elementor-element.elementor-element-cf401e9:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-cf401e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#212121;}.elementor-122 .elementor-element.elementor-element-cf401e9.e-con{--flex-grow:0;--flex-shrink:0;}.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-122 .elementor-element.elementor-element-15c78b1{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-122 .elementor-element.elementor-element-15c78b1:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-15c78b1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#212121;}.elementor-122 .elementor-element.elementor-element-15c78b1.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-122 .elementor-element.elementor-element-09e9a66{--display:flex;--min-height:44px;--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-122 .elementor-element.elementor-element-09e9a66:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-09e9a66 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#212121;}.elementor-122 .elementor-element.elementor-element-09e9a66.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-122 .elementor-element.elementor-element-0ef668d{--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;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.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-122 .elementor-element.elementor-element-c1af81d .elementor-button{background-color:#FFB805;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;fill:#3B3B3B;color:#3B3B3B;padding:4px 16px 4px 16px;}.elementor-122 .elementor-element.elementor-element-c1af81d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-122 .elementor-element.elementor-element-90760e0 .elementor-button{background-color:#FFB805;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;fill:#3B3B3B;color:#3B3B3B;padding:4px 16px 4px 16px;}.elementor-122 .elementor-element.elementor-element-90760e0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-122 .elementor-element.elementor-element-87655fb .elementor-button{background-color:#333333;font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;fill:#FFFFFF;color:#FFFFFF;padding:4px 4px 4px 4px;}.elementor-122 .elementor-element.elementor-element-87655fb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-122 .elementor-element.elementor-element-87655fb .elementor-button-content-wrapper{flex-direction:row;}.elementor-122 .elementor-element.elementor-element-87655fb .elementor-button .elementor-button-content-wrapper{gap:5px;}.elementor-122 .elementor-element.elementor-element-5995b32 .elementor-button{background-color:#FFB805;font-family:"Roboto", Sans-serif;font-weight:500;fill:#3B3B3B;color:#3B3B3B;border-radius:100% 100% 100% 100%;}.elementor-122 .elementor-element.elementor-element-5995b32.elementor-element{--align-self:center;}.elementor-122 .elementor-element.elementor-element-7a16894 .elementor-button{background-color:#FFB805;font-family:"Roboto", Sans-serif;font-weight:500;fill:#3B3B3B;color:#3B3B3B;border-radius:100% 100% 100% 100%;}.elementor-122 .elementor-element.elementor-element-7a16894.elementor-element{--align-self:center;}.elementor-122 .elementor-element.elementor-element-6cd09b7 .elementor-button{background-color:#FFB805;font-family:"Roboto", Sans-serif;font-weight:500;fill:#3B3B3B;color:#3B3B3B;border-radius:100% 100% 100% 100%;}.elementor-122 .elementor-element.elementor-element-6cd09b7.elementor-element{--align-self:center;}.elementor-122 .elementor-element.elementor-element-2a97ca9 .elementor-button{background-color:#FFB805;font-family:"Roboto", Sans-serif;font-weight:500;fill:#3B3B3B;color:#3B3B3B;border-radius:100% 100% 100% 100%;}.elementor-122 .elementor-element.elementor-element-2a97ca9.elementor-element{--align-self:center;}.elementor-122 .elementor-element.elementor-element-b77bd69{--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:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-122 .elementor-element.elementor-element-1e0138a .elementor-button{background-color:#333333;font-family:"Roboto", Sans-serif;font-size:14px;font-weight:400;fill:#FFFFFF;color:#FFFFFF;padding:6px 6px 6px 6px;}.elementor-122 .elementor-element.elementor-element-264969c .elementor-button{background-color:#FFB805;font-family:"Roboto", Sans-serif;font-size:14px;font-weight:400;fill:#3A3A3A;color:#3A3A3A;padding:6px 6px 6px 6px;}.elementor-122 .elementor-element.elementor-element-53c063f .elementor-button{background-color:#3A3A3A;font-family:"Roboto", Sans-serif;font-size:14px;font-weight:400;fill:#FFFFFF;color:#FFFFFF;padding:6px 6px 6px 6px;}.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-122 .elementor-element.elementor-element-183a3e2 .elementor-menu-toggle{margin:0 auto;}.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:500;}.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--main .elementor-item{color:#FFFFFF;fill:#FFFFFF;}.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--main .elementor-item:hover,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--main .elementor-item:focus{color:#FFB805;fill:#FFB805;}.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FFB805;}.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown{background-color:#000000;}.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a:hover,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a:focus,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a.highlighted,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-menu-toggle:hover,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-menu-toggle:focus{color:#FFB805;}.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a:hover,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a:focus,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-122 .elementor-element.elementor-element-183a3e2 .elementor-nav-menu--dropdown a.highlighted{background-color:#000000;}.elementor-122 .elementor-element.elementor-element-50478f5{--display:flex;--min-height:44px;--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;--flex-wrap:nowrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-122 .elementor-element.elementor-element-50478f5:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-50478f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFB805;}.elementor-122 .elementor-element.elementor-element-50478f5.e-con{--flex-grow:1;--flex-shrink:1;}.elementor-122 .elementor-element.elementor-element-99e03fc{width:100%;max-width:100%;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--main .elementor-item{color:#3B3B3B;fill:#3B3B3B;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--main .elementor-item:hover,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--main .elementor-item:focus{color:#000000;fill:#000000;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a, .elementor-122 .elementor-element.elementor-element-99e03fc .elementor-menu-toggle{color:#3B3B3B;fill:#3B3B3B;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a:hover,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a:focus,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a.highlighted,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-menu-toggle:hover,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-menu-toggle:focus{color:#000000;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a:hover,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a:focus,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a.elementor-item-active,
					.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a.highlighted{background-color:#FFB805;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown a.elementor-item-active{color:#000000;background-color:#FFB805;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown .elementor-item, .elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown{border-style:none;border-radius:0px 0px 8px 8px;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown li:first-child a{border-top-left-radius:0px;border-top-right-radius:0px;}.elementor-122 .elementor-element.elementor-element-99e03fc .elementor-nav-menu--dropdown li:last-child a{border-bottom-right-radius:8px;border-bottom-left-radius:8px;}.elementor-122 .elementor-element.elementor-element-0df835e{--display:flex;--min-height:88px;--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-122 .elementor-element.elementor-element-0df835e:not(.elementor-motion-effects-element-type-background), .elementor-122 .elementor-element.elementor-element-0df835e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#212121;}.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-122 .elementor-element.elementor-element-ff65820{--content-width:100vw;}.elementor-122 .elementor-element.elementor-element-cf401e9{--width:20%;}.elementor-122 .elementor-element.elementor-element-15c78b1{--width:80%;}.elementor-122 .elementor-element.elementor-element-09e9a66{--width:100%;}.elementor-122 .elementor-element.elementor-element-50478f5{--width:100%;}.elementor-122 .elementor-element.elementor-element-0df835e{--content-width:100vw;}}/* Start custom CSS for button, class: .elementor-element-5995b32 */.elementor-122 .elementor-element.elementor-element-5995b32 .elementor-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.elementor-122 .elementor-element.elementor-element-5995b32 .elementor-button-icon svg {
    width: 16px;
    height: 16px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7a16894 */.elementor-122 .elementor-element.elementor-element-7a16894 .elementor-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.elementor-122 .elementor-element.elementor-element-7a16894 .elementor-button-icon svg {
    width: 16px;
    height: 16px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-6cd09b7 */.elementor-122 .elementor-element.elementor-element-6cd09b7 .elementor-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.elementor-122 .elementor-element.elementor-element-6cd09b7 .elementor-button-icon svg {
    width: 16px;
    height: 16px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-2a97ca9 */.elementor-122 .elementor-element.elementor-element-2a97ca9 .elementor-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.elementor-122 .elementor-element.elementor-element-2a97ca9 .elementor-button-icon svg {
    width: 16px;
    height: 16px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-1e0138a */.elementor-122 .elementor-element.elementor-element-1e0138a .elementor-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.elementor-122 .elementor-element.elementor-element-1e0138a .elementor-button-icon svg {
    width: 16px;
    height: 16px;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-264969c */.elementor-122 .elementor-element.elementor-element-264969c .elementor-button {
    width: 125px;
    height: 32px;
    min-width: 125px;
    min-height: 32px;
    padding: 4px 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-53c063f */.elementor-122 .elementor-element.elementor-element-53c063f .elementor-button {
    width: fit-content;
    height: 32px;
    min-height: 32px;
    padding: 4px 16px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff65820 *//* =========================================================
   MELBET-STYLE ELEMENTOR HEADER — v2
   ---------------------------------------------------------
   Structure expected (unchanged from v1):

   .mb-header-desktop
     ├─ .mb-logo-panel
     └─ .mb-header-right
          ├─ .mb-topbar
          │    ├─ .mb-top-left   (.mb-social-icons, links…)
          │    └─ .mb-top-right  (.mb-app-button, .mb-login-button,
          │                       .mb-register-button)
          └─ .mb-navbar
               ├─ .mb-main-menu
               └─ .mb-spin-win

   .mb-header-mobile   (shown below 1024px)

   Optional helper classes you can add in Elementor:
     .mb-sticky          → pins the header to the top on scroll
     .mb-social-optional → hides earlier on narrow screens
     .mb-promotion-optional
========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   All sizing is fluid via clamp(), so the header scales
   smoothly instead of jumping at fixed breakpoints.
========================================================= */

.mb-header-desktop,
.mb-header-mobile {
    /* Palette */
    --header-dark:       #202020;
    --header-dark-2:     #2a2a2a;
    --header-dark-3:     #393939;
    --header-yellow:     #ffb900;
    --header-yellow-hi:  #ffc933;
    --header-text-dark:  #3c3729;
    --header-text-light: #ffffff;

    /* Row heights */
    --mb-topbar-h: clamp(40px, 2.9vw, 44px);
    --mb-navbar-h: clamp(40px, 2.9vw, 44px);
    --mb-header-h: calc(var(--mb-topbar-h) + var(--mb-navbar-h));

    /* Logo panel */
    --mb-logo-w:   clamp(150px, 13.5vw, 245px);
    --mb-logo-img: clamp(108px, 10vw, 180px);

    /* Diagonal + spacing */
    --mb-diagonal: clamp(34px, 4.4vw, 70px);
    --mb-inset:    calc(var(--mb-diagonal) * 0.9);   /* navbar only */
    --mb-gutter:   clamp(12px, 1.2vw, 22px);
    --mb-edge:     clamp(18px, 2vw, 40px);           /* breathing room at the page edges */

    /* Typography + controls */
    --mb-nav-font:  clamp(12px, 0.95vw, 16px);
    --mb-nav-pad:   clamp(6px, 0.8vw, 15px);
    --mb-btn-font:  clamp(11px, 0.78vw, 13px);
    --mb-btn-pad-x: clamp(9px, 0.9vw, 15px);
    --mb-btn-h:     clamp(26px, 1.9vw, 31px);
    --mb-icon:      clamp(27px, 2vw, 33px);

    /* Motion */
    --mb-radius: 9px;
    --mb-ease:   cubic-bezier(0.4, 0, 0.2, 1);
    --mb-fast:   0.18s;
    --mb-slow:   0.28s;
}


/* =========================================================
   2. HEADER SHELL
========================================================= */

.mb-header-desktop {
    position: relative !important;
    z-index: 9999;

    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;
    min-height: var(--mb-header-h);

    margin: 0 !important;
    padding: 0 !important;

    background: var(--header-dark);
    overflow: visible !important;
}

.mb-header-desktop > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

/* ---------------------------------------------------------
   PINNED HEADER
   Add .mb-sticky in Elementor's CSS Classes field.

   position: fixed rather than sticky — sticky fails silently
   if any ancestor has overflow: hidden, which is the case in
   this theme. fixed ignores ancestors entirely.
--------------------------------------------------------- */

.mb-header-desktop.mb-sticky,
.mb-header-mobile.mb-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    width: 100% !important;
}

/* fixed leaves normal flow, so the page needs the height back
   or content slides underneath the header */
body:has(.mb-header-desktop.mb-sticky),
body:has(.mb-header-mobile.mb-sticky) {
    padding-top: clamp(80px, 5.8vw, 88px);
}

@media (max-width: 1024px) {
    body:has(.mb-header-desktop.mb-sticky),
    body:has(.mb-header-mobile.mb-sticky) {
        padding-top: 52px;
    }
}

@media (max-width: 380px) {
    body:has(.mb-header-desktop.mb-sticky),
    body:has(.mb-header-mobile.mb-sticky) {
        padding-top: 48px;
    }
}

/* Keep the pinned header clear of the WP admin bar */
body.admin-bar .mb-header-desktop.mb-sticky,
body.admin-bar .mb-header-mobile.mb-sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .mb-header-desktop.mb-sticky,
    body.admin-bar .mb-header-mobile.mb-sticky {
        top: 46px;
    }
}


/* =========================================================
   3. LEFT LOGO PANEL
========================================================= */

.mb-logo-panel {
    position: relative !important;
    z-index: 1;

    flex: 0 0 var(--mb-logo-w) !important;
    width: var(--mb-logo-w) !important;
    min-width: 0 !important;
    min-height: var(--mb-header-h);

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 10px var(--mb-gutter) 10px var(--mb-edge) !important;

    background: var(--header-dark) !important;
    overflow: visible !important;
}

.mb-logo-panel > .e-con-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: none !important;

    padding: 0 !important;
    overflow: visible !important;
}

.mb-logo-panel img {
    display: block;
    width: 100%;
    max-width: var(--mb-logo-img);
    height: auto;
    max-height: calc(var(--mb-header-h) - 32px);
    object-fit: contain;
    transition: transform var(--mb-slow) var(--mb-ease);
}

.mb-logo-panel a:hover img {
    transform: scale(1.03);
}


/* =========================================================
   4. RIGHT COLUMN
========================================================= */

.mb-header-right {
    position: relative !important;
    z-index: 5;

    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

.mb-header-right > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;
    min-height: var(--mb-header-h);

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* =========================================================
   5. TOP UTILITY BAR
========================================================= */

.mb-topbar {
    position: relative;
    /* Above .mb-navbar (z-index: 20) so dropdowns opening from
       this row are not painted over by the yellow bar below */
    z-index: 30;

    flex: 0 0 var(--mb-topbar-h) !important;
    width: 100% !important;
    min-height: var(--mb-topbar-h);

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;

    gap: var(--mb-gutter);

    margin: 0 !important;
    /* Left stays flush; right gets edge spacing */
    padding: 0 var(--mb-edge) 0 0 !important;

    background: var(--header-dark) !important;
    overflow: visible !important;
}

.mb-topbar > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

.mb-top-left,
.mb-top-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    width: auto !important;
    gap: clamp(5px, 0.6vw, 8px);

    margin: 0 !important;
    padding: 0 !important;
}

.mb-top-left > .e-con-inner,
.mb-top-right > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    gap: inherit;

    margin: 0 !important;
    padding: 0 !important;
}

.mb-top-left {
    flex: 0 1 auto !important;
    min-width: 0;
}

.mb-top-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}


/* =========================================================
   6. BUTTONS
========================================================= */

.mb-header-desktop .elementor-button,
.mb-header-mobile .elementor-button {
    min-height: var(--mb-btn-h);

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 var(--mb-btn-pad-x);

    border: 0;
    border-radius: var(--mb-radius);

    font-size: var(--mb-btn-font);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    transition:
        transform var(--mb-fast) var(--mb-ease),
        background-color var(--mb-fast) var(--mb-ease),
        box-shadow var(--mb-fast) var(--mb-ease);
}

.mb-header-desktop .elementor-button:hover,
.mb-header-mobile .elementor-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.mb-header-desktop .elementor-button:active,
.mb-header-mobile .elementor-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.mb-app-button .elementor-button,
.mb-register-button .elementor-button {
    color: #343434 !important;
    background: var(--header-yellow) !important;
}

.mb-app-button .elementor-button:hover,
.mb-register-button .elementor-button:hover {
    background: var(--header-yellow-hi) !important;
}

.mb-app-button .elementor-button {
    border-radius: 6px;
}

.mb-login-button .elementor-button {
    color: var(--header-text-light) !important;
    background: var(--header-dark-3) !important;
}

.mb-login-button .elementor-button:hover {
    background: #474747 !important;
}


/* =========================================================
   7. SOCIAL ICONS
========================================================= */

.mb-social-icons {
    display: flex !important;
    align-items: center;
}

.mb-social-icons .elementor-social-icons-wrapper {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(5px, 0.5vw, 7px);
}

.mb-social-icons .elementor-social-icon {
    width: var(--mb-icon);
    height: var(--mb-icon);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 !important;

    border-radius: 50%;
    background: var(--header-yellow) !important;
    color: #343434 !important;

    font-size: calc(var(--mb-icon) * 0.45);

    transition:
        transform var(--mb-fast) var(--mb-ease),
        background-color var(--mb-fast) var(--mb-ease);
}

.mb-social-icons .elementor-social-icon:hover {
    transform: translateY(-2px);
    background: var(--header-yellow-hi) !important;
}

.mb-social-icons .elementor-social-icon i,
.mb-social-icons .elementor-social-icon svg {
    width: auto;
    height: auto;
    font-size: inherit;
}


/* =========================================================
   8. YELLOW NAVIGATION ROW
========================================================= */

.mb-navbar {
    position: relative !important;
    z-index: 20;

    flex: 0 0 var(--mb-navbar-h) !important;
    width: 100% !important;
    min-height: var(--mb-navbar-h);

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    gap: clamp(6px, 0.8vw, 12px);

    margin: 0 !important;
    padding: 0 !important;

    background: var(--header-yellow) !important;

    /* Required so the diagonal can overhang to the left */
    overflow: visible !important;
    clip-path: none !important;
}

.mb-navbar > .e-con-inner {
    position: relative;
    z-index: 2;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    max-width: none !important;
    min-height: var(--mb-navbar-h);

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   Diagonal yellow edge
   Height now follows the row instead of being locked to 44px,
   and the width scales with --mb-diagonal.
--------------------------------------------------------- */

.mb-navbar::before {
    content: "" !important;

    position: absolute !important;
    z-index: 1;

    top: 0 !important;
    bottom: 0 !important;
    left: calc(var(--mb-diagonal) * -1) !important;

    display: block !important;

    /* +1px overlap kills the hairline seam on some zoom levels */
    width: calc(var(--mb-diagonal) + 1px) !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--header-yellow) !important;

    clip-path: polygon(100% 0, 100% 100%, 0 100%) !important;

    pointer-events: none;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Legacy triangle widgets are no longer needed */
.mb-triangle-holder,
.mb-nav-triangle {
    display: none !important;
}


/* =========================================================
   9. NAVIGATION MENU
========================================================= */

.mb-main-menu {
    position: relative;
    z-index: 3;

    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
}

.mb-main-menu .elementor-nav-menu--main,
.mb-main-menu .elementor-nav-menu {
    width: 100%;
}

.mb-main-menu .elementor-nav-menu {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: center;

    white-space: nowrap;
}

.mb-main-menu .elementor-nav-menu > li {
    flex: 0 1 auto;
    min-width: 0;
}

.mb-main-menu .elementor-nav-menu > li > a {
    position: relative;
    min-height: var(--mb-navbar-h);

    display: flex !important;
    align-items: center;

    padding: 0 var(--mb-nav-pad) !important;

    color: var(--header-text-dark) !important;
    background: transparent;

    font-size: var(--mb-nav-font);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    overflow: hidden;
    text-overflow: ellipsis;

    transition:
        color var(--mb-fast) var(--mb-ease),
        background-color var(--mb-fast) var(--mb-ease);
}

/* First item sits flush with the row */
.mb-main-menu .elementor-nav-menu > li:first-child > a {
    padding-left: 0 !important;
}

/* No underline indicator */
.mb-main-menu .elementor-nav-menu > li > a::after {
    content: none;
}

/* No background, no text decoration — colour shift only.
   Elementor adds .highlighted to a parent item while its
   sub-menu is open, styled separately from :hover — hence
   the extra .elementor-122 .elementor-element.elementor-element-ff65820s. */
.mb-main-menu .elementor-nav-menu > li > a:hover,
.mb-main-menu .elementor-nav-menu > li > a:focus,
.mb-main-menu .elementor-nav-menu > li > a.highlighted,
.mb-main-menu .elementor-nav-menu > li > a.elementor-item-active,
.mb-main-menu .elementor-nav-menu > li.menu-item-has-children > a:hover,
.mb-main-menu .elementor-nav-menu > li.menu-item-has-children:hover > a,
.mb-main-menu .elementor-nav-menu > li.current-menu-item > a,
.mb-main-menu .elementor-nav-menu > li.current-menu-ancestor > a {
    color: #000000 !important;
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
}


/* ---------- Dropdowns ---------- */

.mb-main-menu .sub-menu {
    min-width: 210px;

    padding: 6px 0 !important;

    border-top: 2px solid var(--header-yellow);
    border-radius: 0 0 10px 10px;

    background: var(--header-dark-2) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);

    overflow: hidden;
}

.mb-main-menu .sub-menu a {
    padding: 11px 18px !important;

    color: var(--header-text-light) !important;

    font-size: clamp(12px, 0.85vw, 14px);
    font-weight: 500;

    transition:
        color var(--mb-fast) var(--mb-ease),
        background-color var(--mb-fast) var(--mb-ease),
        padding-left var(--mb-fast) var(--mb-ease);
}

.mb-main-menu .sub-menu a:hover {
    color: #202020 !important;
    background: var(--header-yellow) !important;
    padding-left: 22px !important;
}


/* =========================================================
   10. SPIN AND WIN
========================================================= */

.mb-spin-win {
    position: relative;
    z-index: 3;

    flex: 0 0 auto !important;

    display: flex !important;
    align-items: center !important;

    min-height: var(--mb-navbar-h);

    padding: 0 var(--mb-gutter) !important;

    border-left: 1px solid rgba(60, 55, 41, 0.25);

    white-space: nowrap;
}

.mb-spin-win a,
.mb-spin-win .elementor-heading-title,
.mb-spin-win .elementor-icon-list-text {
    color: var(--header-text-dark) !important;

    font-size: clamp(13px, 1vw, 17px);
    font-weight: 700;
    text-decoration: none;

    transition: color var(--mb-fast) var(--mb-ease);
}

.mb-spin-win a:hover {
    color: #000000 !important;
}


/* =========================================================
   11. FOCUS + ACCESSIBILITY
========================================================= */

.mb-header-desktop a:focus-visible,
.mb-header-desktop button:focus-visible,
.mb-header-mobile a:focus-visible,
.mb-header-mobile button:focus-visible {
    outline: 2px solid var(--header-yellow);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dark outline where the background is yellow */
.mb-navbar a:focus-visible,
.mb-navbar button:focus-visible {
    outline-color: #202020;
}

/* No hover lift on touch devices — it sticks after a tap */
@media (hover: none) {
    .mb-header-desktop .elementor-button:hover,
    .mb-header-mobile .elementor-button:hover,
    .mb-social-icons .elementor-social-icon:hover,
    .mb-logo-panel a:hover img {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mb-header-desktop *,
    .mb-header-mobile * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    .mb-navbar,
    .mb-navbar::before {
        forced-color-adjust: none;
        background: Highlight !important;
    }
}


/* =========================================================
   12. ELEMENTOR CONTAINMENT FIXES
========================================================= */

.mb-header-desktop,
.mb-header-desktop *,
.mb-header-right,
.mb-header-right *,
.mb-navbar,
.mb-navbar *,
.mb-header-mobile,
.mb-header-mobile * {
    box-sizing: border-box;
}

/* Nothing in this chain may clip the diagonal */
.mb-header-desktop,
.mb-header-desktop > .e-con-inner,
.mb-header-right,
.mb-header-right > .e-con-inner,
.mb-navbar {
    overflow: visible !important;
}

/* Elementor widget wrappers shouldn't add stray height */
.mb-header-desktop .elementor-widget-container,
.mb-header-mobile .elementor-widget-container {
    margin: 0 !important;
}

/* The HTML widget holding the mobile header must not be inset or
   spaced by Elementor's defaults */
.elementor-widget-html:has(.mb-header-mobile),
.elementor-widget-html:has(.mb-header-mobile) > .elementor-widget-container,
.e-con:has(> .e-con-inner > .elementor-widget-html .mb-header-mobile) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* On desktop, fully collapse the widget and its immediate container.
   Direct-child chains are deliberate — a loose :has() would also match
   .mb-header-desktop when the widget is nested inside it, taking the
   whole header down with it. */
@media (min-width: 1025px) {

    .elementor-widget-html:has(> .elementor-widget-container > .mb-header-mobile),
    .e-con:has(> .e-con-inner > .elementor-widget-html > .elementor-widget-container > .mb-header-mobile),
    .e-con:has(> .elementor-widget-html > .elementor-widget-container > .mb-header-mobile) {
        display: none !important;

        min-height: 0 !important;
        height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }
}


/* =========================================================
   13. BREAKPOINTS
   Only two are left — the rest is handled by clamp().
========================================================= */

/* Drop non-essential items before the layout gets tight */
@media (max-width: 1200px) {
    .mb-social-optional,
    .mb-promotion-optional,
    .mb-spin-win {
        display: none !important;
    }

    .mb-main-menu .elementor-nav-menu > li > a {
        font-weight: 600;
    }
}

/* Last resort before the mobile header takes over */
@media (max-width: 1100px) {
    .mb-header-desktop {
        --mb-logo-w: 148px;
        --mb-logo-img: 118px;
        --mb-nav-pad: 5px;
    }

    .mb-social-icons {
        display: none !important;
    }
}


/* =========================================================
   14. MOBILE HEADER
========================================================= */

.mb-header-mobile {
    display: none !important;
}

@media (max-width: 1024px) {

    /* Collapse the desktop header's contents rather than the container
       itself. This works whether the mobile HTML widget sits beside the
       desktop header or nested inside it. */
    body:has(.mb-header-mobile) .mb-logo-panel,
    body:has(.mb-header-mobile) .mb-header-right {
        display: none !important;
    }

    body:has(.mb-header-mobile) .mb-header-desktop,
    body:has(.mb-header-mobile) .mb-header-desktop > .e-con-inner {
        display: block !important;

        min-height: 0 !important;
        padding: 0 !important;

        background: transparent !important;
    }

    /* Collapse every wrapper between the header and the widget.
       Elementor keeps --min-height and --gap on containers, and
       those survive a plain padding reset — which is what leaves
       an empty strip under the mobile bar. */
    body:has(.mb-header-mobile) .mb-header-desktop,
    body:has(.mb-header-mobile) .mb-header-desktop > .e-con-inner,
    .e-con:has(> .e-con-inner > .elementor-widget-html .mb-header-mobile),
    .e-con:has(> .elementor-widget-html .mb-header-mobile),
    .elementor-widget-html:has(.mb-header-mobile),
    .elementor-widget-html:has(.mb-header-mobile) > .elementor-widget-container {
        --min-height: 0px;
        --gap: 0px;
        --row-gap: 0px;
        --column-gap: 0px;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;
        row-gap: 0 !important;

        border: 0 !important;
        background: transparent !important;

        font-size: 0;
        line-height: 0;
    }

    /* Restore text metrics inside the bar itself */
    .mb-header-mobile {
        font-size: initial;
        line-height: normal;
    }

    /* Doubled class beats Elementor's .elementor-hidden-* utilities */
    .mb-header-mobile.mb-header-mobile {
        position: relative;
        z-index: 9999;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: none !important;
        min-height: 50px;

        gap: 8px;
        margin: 0 !important;
        padding:
            5px
            max(12px, env(safe-area-inset-right))
            5px
            max(12px, env(safe-area-inset-left)) !important;

        background: var(--header-dark) !important;
        border-bottom: 2px solid var(--header-yellow);
    }

    .mb-header-mobile > .e-con-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: none !important;

        gap: 10px;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mb-header-mobile img {
        display: block;
        width: auto;
        max-width: 118px;
        max-height: 28px;
        height: auto;
        object-fit: contain;
    }

    /* Buttons: keep tap targets at 44px */
    .mb-header-mobile .elementor-button {
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
        border-radius: 7px;
    }

    /* Hamburger */
    .mb-header-mobile .elementor-menu-toggle {
        width: 44px;
        height: 44px;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        border-radius: 8px;
        background: transparent !important;
        color: var(--header-yellow) !important;

        font-size: 24px;
    }

    .mb-header-mobile .elementor-menu-toggle:hover,
    .mb-header-mobile .elementor-menu-toggle.elementor-active {
        background: rgba(255, 185, 0, 0.14) !important;
    }

    /* Slide-out / dropdown panel */
    .mb-header-mobile .elementor-nav-menu--dropdown {
        background: var(--header-dark-2) !important;
        border-top: 2px solid var(--header-yellow);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    }

    .mb-header-mobile .elementor-nav-menu--dropdown a {
        min-height: 48px;

        display: flex !important;
        align-items: center;

        padding: 12px 20px !important;

        color: var(--header-text-light) !important;

        font-size: 15px;
        font-weight: 600;

        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mb-header-mobile .elementor-nav-menu--dropdown a:hover,
    .mb-header-mobile .elementor-nav-menu--dropdown a.elementor-item-active {
        color: #202020 !important;
        background: var(--header-yellow) !important;
    }

    .mb-header-mobile .elementor-nav-menu--dropdown .sub-menu a {
        padding-left: 36px !important;
        font-weight: 500;
        font-size: 14px;
    }

    /* Social row, if present on mobile */
    .mb-header-mobile .elementor-social-icon {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--header-yellow) !important;
        color: #343434 !important;
        font-size: 15px;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .mb-header-mobile {
        min-height: 46px;
    }

    .mb-header-mobile .mb-m-logo img {
        max-width: 92px;
        max-height: 22px;
    }

    .mb-header-mobile .mb-m-btn {
        padding: 0 8px;
        font-size: 10px;
        min-height: 28px;
    }

    .mb-header-mobile .mb-m-toggle {
        width: 30px;
        height: 30px;
    }
}


/* =========================================================
   14b. FALLBACK — NO SEPARATE MOBILE HEADER
   If nothing on the page carries .mb-header-mobile, the
   desktop header stacks into a mobile layout instead of
   disappearing.
========================================================= */

@media (max-width: 1024px) {

    body:not(:has(.mb-header-mobile)) .mb-header-desktop,
    body:not(:has(.mb-header-mobile)) .mb-header-desktop > .e-con-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 0 !important;
    }

    /* Logo row */
    body:not(:has(.mb-header-mobile)) .mb-logo-panel {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 54px;

        justify-content: center !important;
        padding: 8px var(--mb-edge) !important;
    }

    body:not(:has(.mb-header-mobile)) .mb-logo-panel > .e-con-inner {
        justify-content: center !important;
    }

    body:not(:has(.mb-header-mobile)) .mb-logo-panel img {
        width: auto;
        max-width: 150px;
        max-height: 38px;
    }

    /* Utility row — scrolls sideways if it overflows */
    body:not(:has(.mb-header-mobile)) .mb-topbar {
        flex: 0 0 auto !important;
        min-height: 46px;

        justify-content: flex-start !important;
        gap: 8px;

        padding: 4px var(--mb-edge) !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body:not(:has(.mb-header-mobile)) .mb-topbar::-webkit-scrollbar {
        display: none;
    }

    body:not(:has(.mb-header-mobile)) .mb-top-right {
        margin-left: 0 !important;
    }

    /* Nav row — no diagonal on mobile, it has nothing to cut into */
    body:not(:has(.mb-header-mobile)) .mb-navbar {
        flex: 0 0 auto !important;
        min-height: 44px;

        padding: 0 var(--mb-edge) !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body:not(:has(.mb-header-mobile)) .mb-navbar::-webkit-scrollbar {
        display: none;
    }

    body:not(:has(.mb-header-mobile)) .mb-navbar::before {
        display: none !important;
    }

    /* Elementor's own hamburger, if the menu widget uses one */
    body:not(:has(.mb-header-mobile)) .mb-main-menu .elementor-menu-toggle {
        color: var(--header-text-dark) !important;
    }

    body:not(:has(.mb-header-mobile)) .mb-main-menu .elementor-nav-menu--dropdown {
        background: var(--header-dark-2) !important;
    }

    body:not(:has(.mb-header-mobile)) .mb-main-menu .elementor-nav-menu--dropdown a {
        min-height: 48px;
        display: flex !important;
        align-items: center;
        padding: 12px 20px !important;
        color: var(--header-text-light) !important;
        font-size: 15px;
    }
}


/* =========================================================
   15. MOBILE HEADER BAR + OFF-CANVAS DRAWER
   Pairs with the HTML widget markup.
========================================================= */

/* ---------- The bar itself ---------- */

.mb-header-mobile .mb-m-logo {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

.mb-header-mobile .mb-m-logo img {
    display: block;
    width: auto;
    max-width: 112px;
    max-height: 26px;
    height: auto;
    object-fit: contain;
}

.mb-header-mobile .mb-m-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 4px;
    margin-left: auto;
}

.mb-header-mobile .mb-m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 0 11px;

    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    transition: background-color var(--mb-fast) var(--mb-ease);
}

/* Text-only login keeps the bar visually light */
.mb-header-mobile .mb-m-login {
    color: var(--header-text-light);
    background: transparent;
    padding: 0 8px;
}

.mb-header-mobile .mb-m-login:active {
    background: rgba(255, 255, 255, 0.08);
}

.mb-header-mobile .mb-m-register {
    color: #343434;
    background: var(--header-yellow);
}

.mb-header-mobile .mb-m-register:active {
    background: var(--header-yellow-hi);
}

/* ---------- Hamburger ---------- */

.mb-header-mobile .mb-m-toggle {
    position: relative;

    width: 34px;
    height: 34px;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 0;
    margin-left: 2px;

    border: 0;
    border-radius: 6px;
    background: transparent;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mb-header-mobile .mb-m-toggle span {
    display: block;
    width: 18px;
    height: 2px;

    border-radius: 2px;
    background: var(--header-yellow);

    transition:
        transform var(--mb-slow) var(--mb-ease),
        opacity var(--mb-fast) var(--mb-ease);
}

/* Morph into an X while the drawer is open */
body.mb-drawer-open .mb-header-mobile .mb-m-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.mb-drawer-open .mb-header-mobile .mb-m-toggle span:nth-child(2) {
    opacity: 0;
}

body.mb-drawer-open .mb-header-mobile .mb-m-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Drawer + overlay ---------- */

.mb-drawer,
.mb-drawer-overlay {
    display: none;
}

@media (max-width: 1024px) {

    .mb-drawer-overlay {
        position: fixed;
        inset: 0;
        z-index: 99998;

        display: block;

        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);

        opacity: 0;
        visibility: hidden;

        transition:
            opacity var(--mb-slow, 0.28s) ease,
            visibility var(--mb-slow, 0.28s) ease;
    }

    body.mb-drawer-open .mb-drawer-overlay {
        opacity: 1;
        visibility: visible;
    }

    .mb-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;

        width: min(320px, 86vw);

        display: flex;
        flex-direction: column;

        background: #202020;
        box-shadow: -14px 0 40px rgba(0, 0, 0, 0.45);

        transform: translateX(100%);
        visibility: hidden;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        padding-bottom: env(safe-area-inset-bottom);

        transition:
            transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
            visibility 0.32s;
    }

    /* Add .mb-drawer--left on the panel to slide in from the left */
    .mb-drawer.mb-drawer--left {
        right: auto;
        left: 0;
        transform: translateX(-100%);
        box-shadow: 14px 0 40px rgba(0, 0, 0, 0.45);
    }

    body.mb-drawer-open .mb-drawer {
        transform: translateX(0);
        visibility: visible;
    }

    /* Stop the page scrolling behind the drawer */
    body.mb-drawer-open {
        overflow: hidden;
    }

    /* Drawer header */
    .mb-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: 50px;
        padding: 8px 14px;

        border-bottom: 2px solid var(--header-yellow, #ffb900);
    }

    .mb-drawer-head img {
        display: block;
        width: auto;
        max-width: 108px;
        max-height: 24px;
    }

    .mb-drawer-close {
        width: 32px;
        height: 32px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        color: #ffffff;

        line-height: 0;

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* SVG carries no font metrics, so flex centring is exact */
    .mb-drawer-close svg {
        display: block;
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
    }

    /* Drawer navigation */
    .mb-drawer-nav {
        display: flex;
        flex-direction: column;
        padding: 6px 0;
    }

    .mb-drawer-nav a {
        display: flex;
        align-items: center;
        gap: 12px;

        min-height: 52px;
        padding: 12px 18px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.06);

        color: #ffffff;

        font-size: 15px;
        font-weight: 600;
        text-decoration: none;

        transition:
            background-color 0.18s ease,
            color 0.18s ease,
            padding-left 0.18s ease;
    }

    .mb-drawer-nav a:active,
    .mb-drawer-nav a.is-active {
        color: #202020;
        background: var(--header-yellow, #ffb900);
        padding-left: 22px;
    }

    .mb-drawer-nav a .mb-drawer-tag {
        margin-left: auto;
        padding: 3px 8px;

        border-radius: 20px;
        background: var(--header-yellow, #ffb900);
        color: #202020;

        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    /* ---------- Expandable group ---------- */

    .mb-drawer-sub-toggle {
        width: 100%;
        min-height: 52px;

        display: flex;
        align-items: center;
        gap: 10px;

        padding: 12px 18px;
        margin: 0;

        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: transparent;

        color: #ffffff;

        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        text-align: left;

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

        transition:
            background-color 0.18s ease,
            color 0.18s ease;
    }

    .mb-drawer-group.is-open .mb-drawer-sub-toggle {
        color: var(--header-yellow, #ffb900);
    }

    .mb-drawer-sub-toggle .mb-drawer-tag {
        margin-left: 0;
        padding: 3px 8px;

        border-radius: 20px;
        background: var(--header-yellow, #ffb900);
        color: #202020;

        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    /* CSS-drawn caret — no icon font dependency */
    .mb-drawer-chevron {
        width: 8px;
        height: 8px;

        margin-left: auto;
        margin-right: 4px;

        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mb-drawer-group.is-open .mb-drawer-chevron {
        transform: rotate(-135deg) translate(-3px, -3px);
    }

    /* grid-template-rows animates to auto height, which
       max-height cannot do without guessing a value */
    .mb-drawer-sub {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mb-drawer-group.is-open .mb-drawer-sub {
        grid-template-rows: 1fr;
    }

    .mb-drawer-sub-inner {
        overflow: hidden;
        min-height: 0;
        background: rgba(0, 0, 0, 0.28);
    }

    .mb-drawer-sub-inner a {
        min-height: 46px;
        padding-left: 34px;

        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.82);
    }

    .mb-drawer-sub-inner a:active {
        color: #202020;
        background: var(--header-yellow, #ffb900);
        padding-left: 38px;
    }

    /* Drawer footer */
    .mb-drawer-foot {
        margin-top: auto;
        padding: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mb-drawer-apps {
        display: flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    .mb-drawer-apps a {
        flex: 1 1 0;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 38px;

        border-radius: 8px;
        background: var(--header-yellow, #ffb900);
        color: #343434;

        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
    }

    .mb-drawer-social {
        display: flex;
        gap: 9px;
    }

    .mb-drawer-social a {
        width: 36px;
        height: 36px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;
        background: var(--header-yellow, #ffb900);
        color: #343434;

        font-size: 15px;
        text-decoration: none;
    }

    /* ---------- Scrollbar ---------- */

    .mb-drawer {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }

    .mb-drawer::-webkit-scrollbar {
        width: 4px;
    }

    .mb-drawer::-webkit-scrollbar-track {
        background: transparent;
    }

    .mb-drawer::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.18);
    }

    .mb-drawer::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.32);
    }

    /* To hide the scrollbar completely, swap the block above for:
       .mb-drawer { scrollbar-width: none; -ms-overflow-style: none; }
       .mb-drawer::-webkit-scrollbar { display: none; }
    */

    .mb-drawer a:focus-visible,
    .mb-drawer button:focus-visible {
        outline: 2px solid var(--header-yellow, #ffb900);
        outline-offset: -2px;
    }
}

/* =========================================================
   15b. LINK HOVER OVERRIDE
   The theme applies its own hover colour (red) to links.
   These rules keep header and drawer links on brand.
========================================================= */

.mb-header-desktop a:hover,
.mb-header-desktop a:focus,
.mb-header-mobile a:hover,
.mb-header-mobile a:focus,
.mb-drawer a:hover,
.mb-drawer a:focus {
    text-decoration: none !important;
}

.mb-drawer-nav a:hover,
.mb-drawer-nav a:focus {
    color: var(--header-yellow, #ffb900) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.mb-drawer-sub-inner a:hover,
.mb-drawer-sub-inner a:focus {
    color: var(--header-yellow, #ffb900) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.mb-drawer-apps a:hover,
.mb-drawer-social a:hover {
    color: #202020 !important;
    background: var(--header-yellow-hi, #ffc933) !important;
}

.mb-drawer-head a:hover,
.mb-header-mobile .mb-m-logo:hover {
    color: inherit !important;
}

.mb-header-mobile .mb-m-login:hover {
    color: var(--header-text-light, #ffffff) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.mb-header-mobile .mb-m-register:hover {
    color: #343434 !important;
    background: var(--header-yellow-hi, #ffc933) !important;
}

/* Buttons need their own rules — the .elementor-122 .elementor-element.elementor-element-ff65820s above only
   cover <a> elements, and themes style buttons separately */
.mb-drawer-close,
.mb-drawer-close:hover,
.mb-drawer-close:focus,
.mb-drawer-close:active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mb-drawer-close:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

.mb-drawer-sub-toggle,
.mb-drawer-sub-toggle:hover,
.mb-drawer-sub-toggle:focus,
.mb-drawer-sub-toggle:active {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

.mb-drawer-sub-toggle:hover {
    color: var(--header-yellow, #ffb900) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.mb-drawer-group.is-open .mb-drawer-sub-toggle {
    color: var(--header-yellow, #ffb900) !important;
}

/* The hamburger is a button too */
.mb-header-mobile .mb-m-toggle,
.mb-header-mobile .mb-m-toggle:hover,
.mb-header-mobile .mb-m-toggle:focus,
.mb-header-mobile .mb-m-toggle:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .mb-drawer,
    .mb-drawer-overlay,
    .mb-header-mobile .mb-m-toggle span {
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   16. PRINT
========================================================= */

@media print {
    .mb-header-desktop,
    .mb-header-mobile,
    .mb-drawer,
    .mb-drawer-overlay {
        display: none !important;
    }
}/* End custom CSS */