/* =========================================================
   RESPONSIVE.CSS
   Landing Page Yayasan Pesantren
=========================================================*/

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

    .hero h1{
        font-size:3.8rem;
    }

    .hero p{
        font-size:1.1rem;
    }

}

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

    section{
        padding:80px 0;
    }

    .hero h1{
        font-size:3.2rem;
    }

    .program-card{
        padding:30px;
    }

    .counter{
        font-size:2.5rem;
    }

}

/* ===============================
   Tablet Landscape
==================================*/
@media (max-width:992px){

    .navbar{
        background:rgba(15,118,110,.95);
        backdrop-filter:blur(12px);
    }

    .navbar-collapse{

        margin-top:15px;

        padding:15px;

        border-radius:16px;

        background:#ffffff;

        box-shadow:0 10px 25px rgba(0,0,0,.08);

    }

    .navbar-collapse .nav-link{

        color:var(--primary)!important;

        padding:12px 15px;

        border-radius:8px;

    }

    .navbar-collapse .nav-link:hover{

        background:#eef9f6;

    }

    .hero{

        text-align:center;

        background-attachment:scroll;

        padding-top:120px;

    }

    .hero .row{

        justify-content:center;

    }

    .hero h1{

        font-size:2.8rem;

    }

    .hero p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero .btn{

        margin-bottom:10px;

    }

    .program-card{

        margin-bottom:25px;

    }

    .stats .col{

        margin-bottom:30px;

    }

    .footer{

        text-align:center;

    }

    .footer .col-lg-3{

        margin-bottom:35px;

    }

}

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

    section{

        padding:70px 0;

    }

    h2{

        font-size:2rem;

    }

    .hero{

        min-height:90vh;

    }

    .hero h1{

        font-size:2.3rem;

        line-height:1.3;

    }

    .hero p{

        font-size:1rem;

    }

    .hero .btn{

        width:100%;

        margin:8px 0;

    }

    .icon-circle{

        width:70px;

        height:70px;

        font-size:1.8rem;

    }

    .counter{

        font-size:2.2rem;

    }

    .ppdb-banner{

        padding:40px 25px!important;

    }

    .ppdb-banner h2{

        font-size:2rem;

    }

    .masonry{

        columns:2 180px;

        column-gap:12px;

    }

    .wa-float{

        width:55px;

        height:55px;

        font-size:28px;

        right:20px;

        bottom:20px;

    }

}

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

    body{

        overflow-x:hidden;

    }

    .container{

        padding-left:20px;

        padding-right:20px;

    }

    .hero{

        padding-top:110px;

    }

    .hero h1{

        font-size:2rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .navbar-brand{

        font-size:1.1rem;

    }

    h2{

        font-size:1.8rem;

    }

    .program-card{

        padding:25px;

    }

    .counter{

        font-size:2rem;

    }

    .stats p{

        font-size:.9rem;

    }

    .ppdb-banner{

        padding:30px 20px!important;

    }

    .ppdb-banner h2{

        font-size:1.7rem;

    }

    .ppdb-banner p{

        font-size:.95rem;

    }

    .masonry{

        columns:1;

    }

    .footer{

        padding:50px 0;

    }

    .footer h4{

        margin-top:20px;

    }

}

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

    .hero h1{

        font-size:1.7rem;

    }

    .hero p{

        font-size:.9rem;

    }

    .btn{

        font-size:.9rem;

        padding:12px 20px;

    }

    .icon-circle{

        width:60px;

        height:60px;

        font-size:1.5rem;

    }

    .counter{

        font-size:1.8rem;

    }

    .wa-float{

        width:50px;

        height:50px;

        font-size:24px;

    }

}