@media(max-width:900px){

    .menu-toggle{
        display:block;
        z-index:10001;
        position:relative;
    }

    .nav-menu{
        position:fixed;

        top:82px;
        left:0;

        width:100%;
        height:calc(100vh - 82px);

        background:rgba(9,11,15,.98);
        backdrop-filter:blur(20px);

        flex-direction:column;
        justify-content:center;
        align-items:center;

        gap:28px;

        transform:translateX(100%);
        transition:.4s ease;

        z-index:9998;
    }

    .nav-menu::before{
        content:"POSADAS TOUR";

        position:absolute;

        top:40px;
        left:50%;

        transform:translateX(-50%);

        color:rgba(255,255,255,.05);

        font-family:var(--font-display);
        font-size:48px;
        font-weight:800;
        letter-spacing:4px;

        white-space:nowrap;
    }

    .nav-menu.open{
        transform:translateX(0);
    }

    .nav-menu a{
        font:600 32px var(--font-display);
        letter-spacing:1px;
        text-transform:uppercase;
    }

    .nav-menu .button{
        margin-top:25px;
        padding:16px 30px;
    }

    .hero{
        min-height:760px;
    }

    .hero-meta{
        grid-template-columns:1fr 1fr;
    }

    .hero-meta div:nth-child(3){
        display:none;
    }

    .split{
        grid-template-columns:1fr;
        gap:70px;
    }

    .image-one{
        height:500px;
    }

    .countdown-wrap{
        flex-direction:column;
        align-items:flex-start;
        padding:55px 0;
    }

    .countdown{
        margin-top:35px;
    }

    .experience-grid{
        grid-template-columns:1fr 1fr;
    }

    .info-grid{
        grid-template-columns:1fr 1fr;
        padding:35px 0;
        gap:30px;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
    }
}
.site-header{
    position:absolute;
    z-index:1000;
    width:100%;
    top:0;
    border-bottom:1px solid transparent;
}

.site-header.scrolled{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    background:rgba(7,9,13,.95);
    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.08);

    animation:drop .35s ease;

    z-index:10000;
}
.nav{
    position:relative;
    z-index:10000;
}