/* ==========================================
   DIVINE DHARMA
   Responsive CSS
========================================== */

/* ========= LARGE LAPTOP ========= */

@media (max-width: 1400px){

    .container{
        width:94%;
    }

}

/* ========= LAPTOP ========= */

@media (max-width:1200px){

    h1{
        font-size:3rem;
    }

    h2{
        font-size:2.4rem;
    }

    h3{
        font-size:1.8rem;
    }

    .section{
        padding:80px 0;
    }

}

/* ========= TABLET ========= */

@media (max-width:992px){

    h1{
        font-size:2.5rem;
    }

    h2{
        font-size:2rem;
    }

    h3{
        font-size:1.6rem;
    }

    .section{
        padding:70px 0;
    }

    .container{
        width:95%;
    }

    .grid{
        gap:25px;
    }

    .btn{
        padding:13px 28px;
    }

}

/* ========= LARGE MOBILE ========= */

@media (max-width:768px){

    h1{
        font-size:2.1rem;
    }

    h2{
        font-size:1.8rem;
    }

    h3{
        font-size:1.4rem;
    }

    p{
        font-size:.95rem;
    }

    .section{
        padding:60px 0;
    }

    .section-title{
        margin-bottom:12px;
    }

    .section-subtitle{
        margin-bottom:45px;
        font-size:.95rem;
    }

    .card{
        padding:24px;
    }

    .btn{

        width:100%;

        justify-content:center;

    }

    #scrollTopBtn{

        width:50px;

        height:50px;

        right:20px;

        bottom:20px;

    }

}

/* ========= MOBILE ========= */

@media (max-width:576px){

    h1{
        font-size:1.9rem;
    }

    h2{
        font-size:1.6rem;
    }

    h3{
        font-size:1.3rem;
    }

    body{
        font-size:15px;
    }

    .section{
        padding:50px 0;
    }

    .container{
        width:92%;
    }

    .card{
        padding:20px;
        border-radius:18px;
    }

    .badge{

        font-size:.75rem;

        padding:6px 14px;

    }

}

/* ========= SMALL MOBILE ========= */

@media (max-width:380px){

    h1{
        font-size:1.65rem;
    }

    h2{
        font-size:1.45rem;
    }

    h3{
        font-size:1.15rem;
    }

    .btn{

        padding:12px 18px;

        font-size:.9rem;

    }

    .card{

        padding:18px;

    }

}