/* ===================================
   RESPONSIVE.CSS
=================================== */


/* Large Desktop */
@media (min-width:1400px){

    .mobile-box{
        width:380px;
    }

}


/* Desktop */
@media (max-width:1200px){

    .mobile-box{
        width:360px;
    }

}


/* Laptop */
@media (max-width:992px){

    .grid-bg{
        padding:30px 15px;
    }

    .mobile-box{
        width:350px;
    }

    .content{
        padding:25px;
    }

}


/* Tablet */
@media (max-width:768px){

    .grid-bg{
        padding:25px 12px;
    }

    .mobile-box{
        width:100%;
        max-width:360px;
    }

    .hero-card{
        padding:30px 20px;
    }

    .character{
        width:90px;
    }

    .logo{
        width:160px;
    }

    .start-btn{
        max-width:220px;
        font-size:17px;
    }

    .content h2{
        font-size:24px;
    }

    .content h3{
        font-size:21px;
    }

}


/* Mobile */
@media (max-width:576px){

    .grid-bg{
        padding:20px 10px;
    }

    .mobile-box{
        width:100%;
        border-radius:16px;
    }

    .hero-card{
        padding:25px 18px;
    }

    .hero-card::before{
        left:8px;
        right:8px;
        height:120px;
    }

    .character{
        width:80px;
    }

    .logo{
        width:145px;
    }

    .start-btn{

        width:100%;
        max-width:none;

        padding:13px;

        font-size:16px;
    }

    .content{
        padding:22px;
    }

    .content h2{

        font-size:22px;
        line-height:1.35;

    }

    .content h3{

        font-size:20px;

    }

    .content p,
    .content li{

        font-size:14px;
        line-height:1.7;

    }

}


/* Small Mobile */
@media (max-width:380px){

    .hero-card{

        padding:22px 15px;

    }

    .character{

        width:72px;

    }

    .logo{

        width:130px;

    }

    .content{

        padding:18px;

    }

    .content h2{

        font-size:20px;

    }

    .content h3{

        font-size:18px;

    }

    .content p,
    .content li{

        font-size:13px;

    }

}