/* ===========================
   RESPONSIVE
=========================== */

@media (max-width:1024px){

    .navigation{

        gap:24px;

    }

    .showreel-title{

        font-size:100px;

    }

}

@media (max-width:768px){

    .header{

        padding:0 20px;

    }

    .logo img{

        height:44px;

    }

    .menu-toggle{

        display:block;

    }

    .navigation{

        position:fixed;

        top:90px;

        left:0;

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:0;

        padding:20px 0;

        background:rgba(8,8,8,.96);

        backdrop-filter:blur(18px);

        -webkit-backdrop-filter:blur(18px);

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

        transform:translateY(-120%);

        opacity:0;

        visibility:hidden;

        transition:
            transform .4s ease,
            opacity .4s ease,
            visibility .4s ease;

    }

    .navigation.active{

        transform:translateY(0);

        opacity:1;

        visibility:visible;

    }

    .navigation a{

        width:100%;

        text-align:center;

        padding:18px 20px;

        font-size:18px;

    }

    .showreel-title{

        font-size:clamp(48px,13vw,70px);

        text-align:center;

        letter-spacing:2px;

        padding:0 20px;

    }

    .play-button{

        width:82px;

        height:82px;

    }

    .play-button img{

        width:32px;

        height:32px;

    }

    .hero{

    min-height:100svh;

}

.hero-grid{

    top:var(--header-height);

}

.hero-content{

    gap:28px;

    padding:0 20px;

}

.showreel-title{

    font-size:clamp(46px,12vw,72px);

    line-height:1;

    letter-spacing:2px;

    text-align:center;

    word-break:break-word;

}

.play-button{

    width:82px;

    height:82px;

    font-size:30px;

}

.hero-close{

    top:15px;

    right:15px;

    width:44px;

    height:44px;

    font-size:20px;

}

.whatsapp-btn{

    width:58px;

    height:58px;

    right:16px;

    bottom:16px;

}

.whatsapp-btn img{

    width:30px;

    height:30px;

}

}

@media (max-width:576px){

    .header{

        padding:0 16px;

    }

    .showreel-title{

        font-size:42px;

        letter-spacing:1px;

    }

    .play-button{

        width:74px;

        height:74px;

        font-size:28px;

    }

    .logo img{

        height:40px;

    }

}

@media (max-width:768px){

    section{

        scroll-margin-top:100px;

    }

    .container{

        width:min(100% - 30px,1400px);

    }

}

@media (max-width:576px){

    .container{

        width:min(100% - 24px,1400px);

    }

}