.sticky header {
    --logo-width: 150px;
  }
  header,
  .burger-open header {
    --logo-width: 200px;
  }

header#masthead {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    padding: 1.333em var(--container-space);
    display: flex;
    align-items: center;
    color: var(--white);
    z-index: 999;
    backdrop-filter: blur(6px);
    font-size: clamp(14px, 1em, 22px);
    transition: 0.300s ease-in-out;
    justify-content: space-between;
    -webkit-backdrop-filter: blur(6px);
  }
header#masthead svg *{
    transition: 0.300s ease-in-out;
  }

body.gradient-green header#masthead svg path{
    fill: white;
  }

body.nuit header#masthead svg path{
    fill: white;
  }

.down-scroll header#masthead {
    backdrop-filter: none;
  }

  .down-scroll .site-header {
      transform: translateY(-150px);
    }


/* STICKY */
.sticky header#masthead {
    /* background: var(--white); */
    color: var(--black);
   
}
/* .sticky header#masthead svg *{
    fill: var(--black);
    border-color: var(--black);
}
.sticky #burger-btn span,
.sticky #burger-btn span:before,
.sticky #burger-btn span:after {
    background: var(--black);
} */
/* REVERSE */
.reverse-active header#masthead {
    background: var(--black);
    color: var(--white);
}
.reverse-active header#masthead svg *{
    fill: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}
.reverse-active #burger-btn span,
.reverse-active #burger-btn span:before,
.reverse-active #burger-btn span:after {
    background: var(--white);
}


/* BURGER CROSS */

#burger-btn {
    cursor: pointer;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto 0 auto 30px;
    overflow: visible;
    position: relative;
    z-index: 992;
}

#burger-btn span,
#burger-btn span:before,
#burger-btn span:after {
    background: var(--white);
    display: block;
    height: 2px;
    opacity: 1;
    position: absolute;
    transition: 0.3s ease-in-out;
}
#burger-btn span:before,
#burger-btn span:after {
    content: "";
}
#burger-btn span {
    transform: translate(-50%, -50%) rotate(0deg);
    top: 50%;
    left: 50%;
    width: 100%;
}
#burger-btn span:before {
    right: 0px;
    top: -0.7em;
    width: 70%;
}
#burger-btn span:after {
    right: 0px;
    top: 0.7em;
    width: 70%;
}
#burger-btn:hover span:before,
#burger-btn:hover span:after {
    width: 100%;
    }
.burger-open #burger-btn span {
    width: 100%;
    transform: translate(-50%, -50%) rotate(-45deg);
    top: 50%;
    left: 50%;
    width: 100%;
}
.burger-open #burger-btn span:before {
    top: 0px;
    transform: rotate(90deg);
    width: 100%;
}
.burger-open #burger-btn span:after {
    top: 0px;
    transform: rotate(90deg);
    opacity: 0;
    width: 0;
}


/* div.logo{
    width: 20%;
    text-align: center;
} */

#main-nav{
    width:60%;
}

/* .cta-nav{
    width: 20%;
} */

#menu-primary{
    justify-content: center;
}

#main-nav ul.menu > li >a{
    font-size: var(--wp--preset--font-size--sub-title-m);
    text-decoration: none;
    color: var(--wp--preset--color--white);
    text-align: center;
    font-weight: 400;
    font-family: 'Poppins',sans-serif;
    text-decoration: none;
    list-style: none;
}
.cta-nav-content{
    display: flex;
    justify-content: center;
    gap: 25px;
    align-items: center;
}
.cta-linkedin{
    display: flex;
    width: 22px;
    height: 22px;
    background-image: url(../img/linkedin.svg);
}
@media (max-width: 1600px) {
}
@media (max-width: 1200px) {
    header#masthead{
        padding: 1.33em 1em;
    }

    .cta-nav-content .wp-block-button.is-style-white-background{
        display: none;
    }

    .cta-nav-content{
        gap: 0;
    }
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {

    .logo svg{
        width: 75%;
    }
}