/*====================================================
                RESPONSIVE
                Ben's Line Dance
====================================================*/

/*====================================================
            ORDINATEUR PORTABLE
====================================================*/

@media (max-width:1200px){

    .container{

        padding:0 20px;

    }

    .menu{

        gap:22px;

    }

    .hero h1{

        font-size:4.4rem;

    }

}

/*====================================================
                TABLETTE
====================================================*/

@media (max-width:992px){

    /* Navbar */

    .navbar .container{

        height:90px;

    }

    .logo img{

        height:90px;

    }

    /* Hamburger */

    .menu-toggle{

        display:block;

        z-index:1101;

    }

    /* Menu */

    #main-menu{

        position:fixed;

        top:90px;
        left:-100%;

        width:100%;
        height:calc(100vh - 90px);

        background:var(--background);

        transition:.35s ease;

        display:flex;

        justify-content:center;

        align-items:flex-start;

        padding-top:50px;

    }

    #main-menu.active{

        left:0;

    }

    .menu{

        width:100%;

        flex-direction:column;

        gap:0;

    }

    .menu li{

        width:100%;

        text-align:center;

    }

    .menu a{

        display:block;

        padding:18px;

        color:var(--text) !important;

        border-bottom:1px solid var(--border);

    }

    .navbar-right{

        display:none;

    }

    /* Hero */

    .hero{

        min-height:620px;

    }

    .hero-content{

        padding:140px 20px 60px;

    }

    .hero h1{

        font-size:3.8rem;

    }

    .hero p{

        font-size:1.15rem;

    }

    .hero-buttons{

        gap:15px;

    }

    .hero-buttons .btn{

        min-width:200px;

    }

}

/*====================================================
            TABLETTE PORTRAIT
====================================================*/

@media (max-width:768px){

    .hero{

        min-height:560px;

    }

    .hero-content{

        padding:120px 20px 50px;

    }

    .hero h1{

        font-size:2.9rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;
        max-width:300px;

    }

    /* Cartes */

    .stats-grid,

    .latest-grid,

    .events-grid{

        grid-template-columns:1fr;

    }

}

/*====================================================
                TÉLÉPHONE
====================================================*/

@media (max-width:576px){

    .navbar .container{

        height:80px;

    }

    .logo img{

        height:75px;

    }

    #main-menu{

        top:80px;

        height:calc(100vh - 80px);

    }

    .hero{

        min-height:500px;

    }

    .hero-content{

        padding:110px 15px 40px;

    }

    .hero-badge{

        font-size:.75rem;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero p{

        font-size:.95rem;

        line-height:1.6;

    }

}

/*====================================================
                    FOOTER
====================================================*/

@media (max-width:992px){

    .footer-content{

        grid-template-columns:1fr 1fr;

        gap:40px;

    }

    .footer-column:first-child{

        grid-column:1 / -1;

        text-align:center;

    }

    .footer-column:first-child img{

        margin:20px auto 0;

    }

}

@media (max-width:768px){

    .footer-content{

        grid-template-columns:1fr;

        gap:45px;

        text-align:center;

    }

    .footer-column{

        width:100%;

    }

    .footer-column img{

        margin:20px auto 0;

    }

    .socials{

        justify-content:center;

    }

}