/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.main-header{
    position: fixed;
    width: 100%;
    left: 0; top: 0;
    padding-top: 57px;
    z-index: 100;
    mix-blend-mode: difference;
    color: #fff;
}

.menu-on .main-header{
    z-index: 250;
}

body:has(main > .hero) .main-header{
    top: -200px;
    -webkit-transition: top .3s ease-in;
    -o-transition: top .3s ease-in;
    transition: top .3s ease-in;
    -webkit-transition-delay: 1.5s;
         -o-transition-delay: 1.5s;
            transition-delay: 1.5s;
}
body:has(main > .hero.on) .main-header{
    top: 0;
}

.main-header svg{
    fill: currentColor;
}

.main-header-wrapper{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    z-index: 2;
}

.menu-btn{
    border-radius: 9px;
    border: 1px solid var(--colorLime);
    /* background: #F1F1F17A; */
    padding: 22px 20px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.menu-btn:hover{
    background-color: var(--colorLime);
}

.menu-on .menu-btn{
    background-color: #000;
}

.menu-btn .btn-wrapper{
    position: relative;
    width: 36px;
    height: 24px;
}

.menu-btn .line{
    position: absolute;
    left:0;
    top:calc(50% - 1px);
    border-top: 2px solid #fff;
    width: 100%;
}

.menu-btn .line:first-of-type{top: 0;}
.menu-btn .line:last-of-type{top: unset; bottom: 0;}

.menu-on .menu-btn .line{top: 50%; bottom: unset;}

.menu-on .menu-btn .line:nth-of-type(2){opacity: 0;}
.menu-on .menu-btn .line:first-of-type{-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.menu-on .menu-btn .line:last-of-type{-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}


.menu{
    position: fixed;
    right: -100vw;  top: 0;
    width: 100%;
    max-width: 1341px;
    background-color: rgba(246, 246, 246, 0.57);
    /* background-color: plum; */
    min-height: 100dvh;
    padding-inline: 43px;
    /* display: none; */
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    padding-top: clamp(3rem, 8vw, 120px);
    /* z-index: 10; */
    max-height: 100dvh;
    overflow-y: scroll;
    z-index: 200;
}

.menu-on .menu{
    right: 0;
}

.menu .search{
    border-bottom: 2px solid #838383;  
    margin-block: 50px; 
    position: relative; 
}

.menu .search input::-webkit-input-placeholder{ 
    color: #838383;  
}

.menu .search input::-moz-placeholder{ 
    color: #838383;  
}

.menu .search input:-ms-input-placeholder{ 
    color: #838383;  
}

.menu .search input::-ms-input-placeholder{ 
    color: #838383;  
}

.menu .search input::placeholder{ 
    color: #838383;  
}

.menu .search input{
    width: 100%;
    padding-right:40px;
}

.menu .search input::-webkit-input-placeholder{
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: -.9px;  
    color: #838383;  
    background-color: transparent;
}

.menu .search input::-moz-placeholder{
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: -.9px;  
    color: #838383;  
    background-color: transparent;
}

.menu .search input:-ms-input-placeholder{
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: -.9px;  
    color: #838383;  
    background-color: transparent;
}

.menu .search input::-ms-input-placeholder{
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: -.9px;  
    color: #838383;  
    background-color: transparent;
}

.menu .search input,
.menu .search input::placeholder{
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: -.9px;  
    color: #838383;  
    background-color: transparent;
}

.menu .search-icon,
.menu .search input[type="submit"]{
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    bottom:4px;
}
.menu .search input[type="submit"]{
    visibility: hidden;
    z-index:2;
}

.menu .search-icon img{
    width: 100%;
    height: 100%;
}

.menu nav h3{
    color : var(--colorLime);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;    
}

.main-nav{
    margin-top: 18px;
    font-size: 27px;
    line-height: 42px;
    letter-spacing: -1.35px;
}

.nav-item,
.sub-nav-item{
    transform: translateX(-100px);
    opacity: 0;
    transition: all .3s;
    transition-delay: var(--delay);
}
.menu-on .nav-item,
.menu-on .sub-nav-item{
    transform: translateX(0);
    opacity: 1;
}
.sub-nav-item{
    font-family: 'Diatype-Light';
}

.sub-nav-item::before{
    content: "↘";
    color: var(--colorLime);
}
.menu-social{   
    margin-top: 1rem;
    justify-content: end;
}
.menu-social li{
    letter-spacing: -0.75px; 
    position: relative;
    z-index: 2;   
}
.sub-nav-item > a,
.nav-item > a{
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    display: inline-block;
}
.sub-nav-item:hover > a,
.nav-item:hover > a{
    -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
            transform: translateX(10px);
}

.main-nav li a{
    background: -webkit-gradient(linear, left top, left bottom, from(var(--colorLime)), to(var(--colorLime))) left repeat-y;
    background: -o-linear-gradient(var(--colorLime), var(--colorLime)) left repeat-y;
    background: linear-gradient(var(--colorLime), var(--colorLime)) left repeat-y;
    background-size: 0 2px;
    -webkit-transition:  all .3s ease;
    -o-transition:  all .3s ease;
    transition:  all .3s ease;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 5px;
}
.main-nav li a:hover{
    background-size: 100% 100%;
}

.menu-footer{
    font-family: 'Diatype-Light';
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -0.75px;
    text-align: right;
    margin-left: auto;
    width: 90%;
    max-width: 514px;
    margin-top: 6px;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    -webkit-transition-delay: 1.5s;
         -o-transition-delay: 1.5s;
            transition-delay: 1.5s;
}

.menu.on .menu-footer{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.menu-footer .logo{
    width: 42px;
    padding-bottom: 16px;
    margin-left: auto;
}

.menu-info{
    border-top: 2px solid var(--colorLime);
    margin-bottom: 52px;
    font-weight: 100;
    font-size: 15px;
    line-height: 19px;
    letter-spacing: -.75px;
    margin-left: auto;
}

.menu-info .copyright{
    padding-block: 1rem;
    font-weight: 100;
}

.menu-info address span{
    display: block;
}


body:has( > main[data-barba-namespace="contact"]) .main-header .logo{
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
}
body:has( > main[data-barba-namespace="contact"]) .main-header .menu-btn,
body:has( > main[data-barba-namespace="contact"]) .main-header + .menu{
    display: none;
}

@media screen and (max-width: 1420px) {
    .main-header .logo svg{
        width: 220px;
    }
}
@media screen and (max-width: 1020px) {
    .main-header .logo svg{
        width: 170px;
    }
}
@media screen and (max-width: 920px) {
    .menu{
        padding-top: 120px;
    }
}
@media screen and (max-width: 920px) {
    .main-header{
        padding-top: 34px;
    } 
    .menu-btn{
        padding: 15px;
        border-radius: 6px;
    }
    .menu-btn .btn-wrapper{
        width : 28px;
        height: 20px;
    }
    .menu{
        padding-inline: 2rem;;
    }
}
@media screen and (max-width: 720px) { 
    .main-header{
        padding-top: 18px;
    }
    .main-header .logo svg{
        width: 123px;
    }
    .menu-btn{
        padding: 10px;
        border-radius: 4px;
    }
    .menu-btn .btn-wrapper{
        width : 22px;
        height: 16px;
    }
    .menu{
        padding-inline: 25px 56px;
    }
    .main-nav{
        font-size: 25px;
        letter-spacing: -1.25px;
        line-height: 32px;
    }
    .menu .search,
    .menu-footer{
        display: none;
    }
}

@media screen and (max-width: 580px) { 
    .main-nav{
        font-size: 20px;
        letter-spacing: -1px;
        line-height: 25px;
    } 
    .sub-nav-item{
        font-size: 16px;
        letter-spacing: -.8px;
        line-height: 20px;
    }    
}
@media screen and (max-width: 480px) { 
    .menu{
        padding-right: 16px;
    }
}

/* header alt */

.header-alt > *{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 600;
}

.header-alt > * > *{
    position: absolute;
    display: flex;
}

.header-alt.main-header{
    mix-blend-mode: difference;
}

.header-alt .header-logo{
    color: #fff;
    left: 1rem;
    top: 1rem;
}
.header-alt .logo{
        justify-content: flex-start;
        z-index: 650;
        left: 1rem;
        top: 20px;
}

.header-alt .logo svg{
    fill: currentColor;
    overflow-clip-margin: content-box;
    overflow: hidden;
    display: block;
}
.header-alt .header-menu-btn{
    right: 1rem;
    top: 1rem;
}
.header-alt .menu-btn{
    right: 1rem;
    top: 1rem;
    justify-content: flex-end;
}
.header-alt .main-header-wrapper{
    z-index: 500;
}
.header-alt .header-box{
    background-color: rgba(170,170,170,0.1);
    backdrop-filter: blur(10px);
    width: 100%;
    height: 80px;
    z-index: 10;
    opacity: .9;
    position: absolute;
}