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

/* ==========================================
   Large Desktop
========================================== */

@media (max-width:1400px){

}

/* ==========================================
   Laptop
========================================== */

@media (max-width:1200px){

}

/* ==========================================
   Tablet
========================================== */

@media (max-width:992px){

    /* ==========================================
       HERO
    ========================================== */

    #hero{
        padding:50px 0 90px;
    }

    #hero .container{
        grid-template-columns:420px 1fr;
        gap:50px;
        align-items:center;
    }

    .hero-content h1{
        font-size:64px;
        letter-spacing:-2px;
        margin-bottom:26px;
    }

    .hero-content p{
        font-size:20px;
        max-width:400px;
    }

    .hero-tagline{
        font-size:16px;
        margin-bottom:24px;
    }

    .hero-tagline i{
        font-size:18px;
    }

    .hero-right::before{
        width:480px;
        height:480px;
        filter:blur(140px);
    }

    .hero-image img{
        max-width:760px;
        border-radius:20px;
    }

    .hero-buttons{
        margin-top:32px;
        gap:16px;
    }

    .hero-buttons a{
        min-width:170px;
        height:56px;
        font-size:18px;
    }

    .hero-benefits{
        gap:24px;
        margin-top:22px;
    }

    .hero-benefits div{
        font-size:16px;
    }

}

/* ==========================================
   Mobile Large
========================================== */

@media (max-width:768px){

    /* ==========================================
       HERO
    ========================================== */

    #hero{
        padding:50px 0 70px;
    }

    #hero .container{
        display:grid;
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
    }

    .hero-content h1{
        font-size:48px;
        line-height:1.1;
    }

    .hero-content p{
        max-width:100%;
        font-size:18px;
        margin:auto;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-benefits{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-image img{
        width:100%;
        max-width:100%;
    }

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:576px){

    .hero-content h1{
        font-size:40px;
    }

    .hero-content p{
        font-size:17px;
    }

    .hero-buttons a{
        width:100%;
        min-width:unset;
    }

    .btn-primary,
    .btn-outline{
        width:100%;
    }

}