.wpb-navigation { --nav-bg-clr: #fff; --nav-top-height: 0rem; position: fixed; top: 0; right: 0; left: 0; z-index: 1040; transition: margin-top var(--ts-25) ease; }
.wpb-navigation:has(.wpb-navigation__top){ --nav-top-height: 4rem; }
.wpb-navigation .wpb-navigation__top { position: relative; background-color: var(--clr-primary); z-index: 555; }
.wpb-navigation .wpb-navigation__top .container { height: var(--nav-top-height); justify-content: center; }
.wpb-navigation .wpb-navigation__top .container a{ --gap: clamp(.5rem, .5vw, .9rem); display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; color: var(--clr-dark); text-decoration: none; text-transform: uppercase; font-size: clamp(1.2rem, 1.5vw, 1.6rem); line-height: 1; transition: opacity var(--ts-25) ease; }
.wpb-navigation .wpb-navigation__top .container a:hover{ opacity: .7; }

/* .wpb-navigation:has(.wpb-navigation__top).is-scrolled{ margin-top: calc(-1 * var(--nav-top-height)); } */

.wpb-navigation .wpb-navigation__main { padding-block: 2.6rem; background: linear-gradient(to bottom, rgb(var(--clr-dark-rgb), 1), rgb(var(--clr-dark-rgb), 0)); transition: padding-block var(--ts-25) ease; }
.wpb-navigation.is-scrolled .wpb-navigation__main { padding-block: 1.8rem; }
.wpb-navigation .container { display: flex; align-items: center; justify-content: space-between; column-gap: 1.2rem; }
.wpb-navigation .logo { display: inline-flex; margin-inline: auto; }
.wpb-navigation .logo img { width: 16rem; height: auto; }

.btn--nav-toggle .wpb-icon { --w: 2rem; --h: 2rem; }

.wpb-navigation__collapse ul { list-style: none; }
.wpb-navigation__collapse .menu-item .menu-link { color: var(--clr-dark); font-style: italic; font-weight: 700; text-transform: uppercase; width: 100%; text-decoration: none; display: inline-flex; align-items: center; column-gap: 2rem; line-height: 1; transition: color var(--ts-duration) var(--ts-function); }
.wpb-navigation__collapse .menu-item .menu-link .menu-link__text { line-height: 1; }
.wpb-navigation__collapse .menu-item .menu-link .menu-link__text strong { display: block; width: 100%; font-size: 1.4rem; }
.wpb-navigation__collapse .menu-item .menu-link .menu-link__text span { font-size: 1.4rem; font-weight: 400; }
.wpb-navigation__collapse .menu-item-has-children { position: relative; }  
.wpb-navigation__collapse .menu-item-has-children .menu-link { justify-content: space-between; }  

.wpb-navigation .wpb-dropdown.wpb-dropdown--wpml .wpb-dropdown__menu { min-width: 0; }
.wpb-navigation .wpb-dropdown.wpb-dropdown--wpml .wpb-dropdown__menu a img { width: 3.2rem; height: 3.2rem; border-radius: .8rem; object-fit: cover; }

.wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { border: none!important; }


/*** Navigation mobile ***/
@media (max-width: 991.98px) {
    .wpb-navigation .wpb-navigation__main .container > .wpb-dropdown.wpb-dropdown--wpml { display: none; }
    .wpb-navigation .wpb-navigation__main .container > .btn { --p: 0; min-width: 4.8rem; min-height: 4.8rem; }
    .wpb-navigation .wpb-navigation__main .container > .btn span { display: none; }

    .wpb-navigation__collapse { --menu-bg-clr: #FFFF; padding: 0; padding-top: var(--nav-top-height); border-radius: 0; opacity: 0; width: 100%; display: none; flex-direction: column; position: fixed; top: 0; right: 0; left: auto; bottom: 0; z-index: 1030; max-width: 52rem; max-height: 100%; overflow: hidden; transition: opacity var(--ts-35) ease, padding-top var(--ts-25) ease; }
    .wpb-navigation.is-scrolled:has(.wpb-navigation__collapse.active){ margin-top: 0; }
    .wpb-navigation__collapse.active { opacity: 1; pointer-events: all; transform: translate3d(0%, 0, 0); }
    .wpb-navigation__collapse .wpb-collapse__header { position: relative; background-color: var(--menu-bg-clr); padding: 2.6rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0,0,0,.25); }
    .wpb-navigation__collapse .wpb-collapse__header .logo { width: 16rem; margin-right: auto; margin-left: 0; }
    .wpb-navigation__collapse .wpb-collapse__header .btn{ --clr: var(--clr-dark); justify-content: end; }
    .wpb-navigation__collapse .wpb-collapse__body { background-color: var(--menu-bg-clr); padding: 3rem 2rem; flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; }
    .wpb-navigation__collapse .wpb-collapse__footer { background-color: var(--menu-bg-clr); padding: 2rem; border-top: 1px solid rgba(0,0,0,.25); }
    
    .wpb-navigation__collapse.wpb-navigation__collapse--left { transform: translate3d(-100%, 0, 0); left: 0; right: auto; }
    .wpb-navigation__collapse.wpb-navigation__collapse--left.active { transform: translate3d(0%, 0, 0); }

    .wpb-navigation__collapse .menu-item .menu-link { font-size: 2.4rem; padding: .8rem 0; }
    .wpb-navigation__collapse .menu-item .menu-link .btn{ --clr: var(--clr-dark); }

    .wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { justify-content: end; position: absolute; min-height: 4rem; right: 0; top: 0; }
    .wpb-navigation__collapse .wpb-dropdown.wpb-dropdown--wpml .wpb-icon.wpb-icon--globe { --w: 1.3rem; --h: 1.3rem; --clr: var(--clr-dark); }
    .wpb-navigation__collapse .wpb-dropdown.wpb-dropdown--wpml .wpb-dropdown__menu { left: 0; bottom: calc(100% + .5rem); right: auto; top: auto; }  
    .wpb-navigation__collapse .wpb-dropdown.wpb-dropdown--wpml .wpb-dropdown__toggle span{ font-style: italic; font-weight: 700; font-size: 1.4rem; }

    .wpb-sub-menu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ts-35) ease; }
    .wpb-sub-menu > div { overflow: hidden; }
    .wpb-sub-menu > div ul { display: flex; flex-direction: column; gap: 1.6rem; margin: 1rem 0 1rem .8rem; padding-left: 1.6rem; border-left: 1px solid rgba(0,0,0,.25); }
    .menu-item-has-children--default .wpb-sub-menu > div ul { gap: .8rem; } 
    .wpb-sub-menu > div ul .menu-item .menu-link { font-size: 1.6rem; padding: 0; line-height: 1; }
    .wpb-sub-menu.active { grid-template-rows: 1fr; }

    .wpb-menu.wpb-menu--topmenu { margin-top: 1.6rem; } 
    .wpb-menu.wpb-menu--topmenu .menu-item .menu-link { font-size: 1.4rem; }  
}
@media (max-width: 767.98px) {
    .wpb-navigation__collapse{ max-width: 100%; }
    .wpb-navigation .wpb-navigation__top{ padding-block: 0; }
    .wpb-navigation .wpb-navigation__top .container{ height: var(--nav-top-height); }
    .wpb-navigation__collapse { padding: 0; padding-top: var(--nav-top-height); }
}
@media (max-width: 567.98px) {
    .wpb-navigation:has(.wpb-navigation__top){ --nav-top-height: 5rem; }
    .wpb-navigation .wpb-navigation__top .container{ justify-content: start; }
}



/*** Navigation desktop ***/
@media (min-width: 576px) {
    .wpb-navigation .wpb-navigation__top .container a strong{ position: relative; }
    .wpb-navigation .wpb-navigation__top .container a strong:has(+ span){ margin-right: var(--gap); }
    .wpb-navigation .wpb-navigation__top .container a strong:has(+ span)::after{ content: ''; display: block; position: absolute; left: 100%; top: .1em; bottom: .1em; height: calc(100% -  .2em); border-right: 1px solid var(--clr-dark); padding-left: var(--gap); transform: rotate(6deg); }
}
@media (min-width: 992px) {
    .btn.btn--nav-toggle, .wpb-navigation__collapse :is(.wpb-collapse__header, .wpb-submenu__header, .wpb-collapse__footer, .wpb-menu--topmenu) { display: none!important; }

    .wpb-navigation__collapse { position: relative; padding-inline: 1.2rem; display: flex!important; justify-content: space-between; align-items: center; margin-inline: auto; }
    .wpb-navigation__collapse::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
    .wpb-navigation__collapse .menu-item .menu-link { color: #fff; font-size: 1.6rem; position: relative; padding: 1rem 1.6rem; }
    .wpb-navigation__collapse .menu-item .menu-link:hover{ color: rgba(255, 255, 255, 0.6); }
    .wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { --bg-clr: transparent; --clr: var(--clr-text); width: auto; height: auto; min-height: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .wpb-navigation__collapse .menu-item-has-children::before{ content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1rem; }
    .wpb-navigation__collapse .wpb-menu { display: flex; align-items: center; }
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link { padding: 1.2rem 1.6rem; column-gap: .8rem; }
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link > .btn i { --w: 1.4rem; --h: 1.4rem }
    .wpb-navigation__collapse .menu-item-has-children:hover > .wpb-sub-menu { pointer-events: all; opacity: 1; transform: translateX(-50%) translateY(0); }

    .wpb-sub-menu { position: absolute; top: calc(100% + 1rem); z-index: 2; right: auto; bottom: auto; left: 50%; transform: translateX(-50%) translateY(-2rem); width: 100%; min-width: 25rem; height: auto!important; opacity: 0; border-radius: 1rem; overflow: visible; backdrop-filter: blur(.8rem) !important; -webkit-backdrop-filter: blur(.8rem); pointer-events: none; transition: opacity var(--ts-duration) var(--ts-function), transform var(--ts-duration) var(--ts-function), backdrop-filter var(--ts-duration) var(--ts-function); }
    .wpb-sub-menu > div { position: relative; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; overflow: hidden; background: var(--gradient-1); }
    .wpb-sub-menu > div ul { padding: 1rem; }
    .wpb-sub-menu .wpb-sub-menu { top: 0; left: 100%; transform: none; } 

    .wpb-navigation .logo { order: -1; margin: 0; }
    .wpb-navigation .logo img { width: 18rem; }
    .wpb-navigation .btn--sign-up { --hover-bg-clr: #fff; order: 1; min-height: 5.4rem; outline: 1px solid rgba(var(--clr-primary-rgb), .5); outline-offset: .4rem; transition: background var(--ts-duration) var(--ts-function), outline var(--ts-duration) var(--ts-function); }
    .wpb-navigation .btn--sign-up:hover{ outline-color: rgb(255, 255, 255, .25); }
    
    .wpb-menu.wpb-menu--topmenu .menu-item{ line-height: 1; } 

    .wpb-navigation .wpb-dropdown.wpb-dropdown--wpml .wpb-dropdown__toggle span { display: none; }
}
@media (min-width: 1200px) {
    .wpb-navigation .logo img { width: 22.5rem; }
}