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

/* Large Desktop */

@media(max-width:1400px){

    .container{

        width:92%;

    }

}

/* Laptop */

@media(max-width:1200px){

    h1{

        font-size:56px;

    }

    h2{

        font-size:42px;

    }

}

/* Tablet */

@media(max-width:992px){

    html{

        font-size:15px;

    }

    section{

        padding:80px 0;

    }

    .container{

        width:94%;

    }

    .grid{

        grid-template-columns:1fr !important;

    }

    .flex{

        flex-direction:column;

    }

    .section-title h2{

        font-size:38px;

    }

}

/* Mobile */

@media(max-width:768px){

    html{

        font-size:14px;

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:42px;

    }

    h2{

        font-size:34px;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

    .card{

        padding:24px;

    }

    .section-title{

        margin-bottom:40px;

    }

}

/* Small Mobile */

@media(max-width:576px){

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

    p{

        font-size:15px;

    }

    .container{

        width:95%;

    }

    .product-card img{

        height:260px;

    }

}

/* Extra Small */

@media(max-width:380px){

    h1{

        font-size:28px;

    }

    h2{

        font-size:24px;

    }

    .btn{

        padding:14px 18px;

        font-size:14px;

    }

}