/*==================================================
RESPONSIVE
SI-PENA BADAN
==================================================*/


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

@media (max-width: 1400px){

    .hero-grid{

        gap:60px;

    }

    .hero-title{

        font-size:64px;

    }

}


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

@media (max-width: 1200px){

    .container-premium{

        width:94%;

    }

    .hero-grid{

        grid-template-columns:1fr 380px;

        gap:40px;

    }

    .hero-title{

        font-size:58px;

    }

    .hero-description{

        font-size:17px;

    }

}


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

@media (max-width: 992px){

    .hero{

        padding:70px 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-visual{

        order:1;

    }

    .hero-description{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-action{

        display:flex;

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

        flex-wrap:wrap;

    }

    .preview-card{

        margin:auto;

    }

}


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

@media (max-width:768px){

    .hero{

        min-height:auto;

        padding:60px 0 40px;

    }

    .hero-title{

        font-size:46px;

    }

    .hero-description{

        font-size:16px;

        line-height:1.8;

    }

    .btn-premium{

        width:100%;

    }

    .hero-stats{

        flex-direction:column;

        gap:15px;

    }

    .stat-card{

        width:100%;

    }

    .preview-card{

        max-width:100%;

    }

}


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

@media (max-width:576px){

    .container-premium{

        width:92%;

    }

    .badge-premium{

        font-size:13px;

    }

    .hero-government{

        font-size:14px;

    }

    .hero-title{

        font-size:38px;

    }

    .preview-logo{

        padding:30px;

    }

    .preview-logo img{

        width:90px;

    }

    .preview-item{

        padding:18px;

    }

    .preview-item i{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .landing-footer{

        font-size:13px;

        padding:20px;

    }

}