/*==================================================
RESPONSIVE CSS V2
PART 1
Desktop • Laptop • Tablet
==================================================*/

/*======================================
XXL DESKTOP
======================================*/

@media (max-width:1400px){

    .container{

        max-width:1200px;

        padding-left:24px;

        padding-right:24px;

    }

}

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

@media (max-width:1200px){

    .container{

        max-width:1140px;

        padding-left:22px;

        padding-right:22px;

    }

    .navbar{

        height:78px;

    }

    .menu{

        gap:26px;

    }

    .menu a{

        font-size:15px;

    }

    .btn-daftar{

        padding:13px 24px;

        font-size:14px;

    }

    /* HERO */

    .slider{

        height:680px;

    }

    .hero-content{

        max-width:580px;

    }

    .hero-content h1{

        font-size:56px;

        line-height:1.1;

    }

    .hero-content p{

        font-size:18px;

    }

    .hero-button{

        gap:16px;

    }

    /* PAKET */

    .paket-grid{

        grid-template-columns:repeat(3,1fr);

        gap:24px;

    }

}

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

@media (max-width:992px){

    .container{

        max-width:960px;

        padding-left:20px;

        padding-right:20px;

    }

    /* HEADER */

    .menu{

        position:fixed;

        top:0;

        right:-100%;

        width:320px;

        height:100vh;

        background:#fff;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:.45s ease;

        z-index:10000;

        box-shadow:-10px 0 40px rgba(0,0,0,.15);

    }

    .menu.active{

        right:0;

    }

    .menu a{

        color:var(--black);

        font-size:18px;

    }

    .menu a:hover{

        color:var(--primary);

    }

    .menu a::after{

        background:var(--primary);

    }

    .menu .btn-daftar{

        display:flex;

        height:50px;

        padding:0 30px;

        background:var(--primary);

        color:#fff;

        border-radius:50px;

        font-size:15px;

        font-weight:700;

        align-items:center;

        justify-content:center;

        text-decoration:none;

    }

    .menu-toggle{

        display:flex;

    }

    .btn-daftar{

        display:none;

    }

    .navbar{

        height:74px;

    }

    .logo img{

        height:38px;

    }

    /* HERO */

    .hero-slider{

        height:620px;

    }

    .hero-slider .container{

        align-items:center;

    }

    .hero-content{

        max-width:520px;

    }

    .hero-badge{

        font-size:13px;

    }

    .hero-content h1{

        font-size:48px;

    }

    .hero-content p{

        font-size:17px;

        line-height:1.8;

    }

    .hero-button{

        display:flex;

        flex-wrap:wrap;

        gap:15px;

    }

    .hero-button a{

        min-width:180px;

    }

    .hero-info{

        gap:18px;

        flex-wrap:wrap;

        margin-top:28px;

    }

    /* PAKET */

    .paket-grid{

        grid-template-columns:repeat(2,1fr);

        gap:22px;

    }

    /* COVERAGE */

    .coverage-wrapper{

        grid-template-columns:1fr;

        gap:40px;

    }

}

/*==================================================
RESPONSIVE CSS V2
PART 2
TABLET PORTRAIT & MOBILE
==================================================*/

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

@media (max-width:768px){

    .container{

        padding-left:18px;

        padding-right:18px;

    }

    /* HEADER */

    .navbar{

        height:70px;

    }

    .logo img{

        height:34px;

    }

    .header-space{

        height:70px;

    }

/* HERO */

    .hero-slider{

        height:100vh;

        min-height:560px;

    }

    .hero-slider .container{

        height:100%;

        display:flex;

        align-items:center;

    }

    .hero-content{

        max-width:100%;

        width:100%;

        padding-left:20px;

        padding-right:20px;

    }

    .slide img{

        object-position:center;

    }

    .hero-badge{

        font-size:12px;

        padding:10px 18px;

    }

    .hero-content h1{

        font-size:40px;

        line-height:1.15;

        margin-bottom:18px;

    }

    .hero-content p{

        font-size:16px;

        line-height:1.8;

        margin-bottom:28px;

    }

    .hero-button{

        display:flex;

        flex-direction:column;

        gap:14px;

    }

    .hero-button a{

        width:100%;

        justify-content:center;

    }

    .hero-info{

        display:flex;

        flex-direction:column;

        gap:12px;

        margin-top:28px;

    }

    .hero-prev,
    .hero-next{

        display:none;

    }

    .hero-dots{

        bottom:25px;

    }

    /* PAKET */

    .paket-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    /* COVERAGE */

    .coverage-wrapper{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:576px){

    .container{

        padding-left:16px;

        padding-right:16px;

    }

    .navbar{

        height:66px;

    }

    .header-space{

        height:66px;

    }

    .logo img{

        height:30px;

    }

/* HERO */

    .hero-slider{

        height:100vh;

        min-height:520px;

    }

    .overlay{

        background:linear-gradient(
        to bottom,
        rgba(0,0,0,.65),
        rgba(0,0,0,.45));

    }

    .hero-content{

        text-align:left;

    }

    .hero-content h1{

        font-size:32px;

    }

    .hero-content p{

        font-size:14px;

    }

    .hero-badge{

        font-size:11px;

    }

    .hero-info{

        display:none;

    }

    .hero-button{

        margin-top:24px;

    }

    .hero-button a{

        min-height:52px;

        font-size:15px;

    }

    /* PAKET */

    .paket-card{

        padding:28px 22px;

    }

    /* COVERAGE */

    .coverage-form{

        padding:24px;

    }

}

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

@media (max-width:400px){

    .hero-slider{

        height:100vh;

        min-height:480px;

    }

    .hero-content h1{

        font-size:28px;

    }

    .hero-content p{

        font-size:13px;

    }

    .hero-button a{

        min-height:48px;

        font-size:14px;

    }

}

/*==================================================
RESPONSIVE CSS V3
MISSING MOBILE SECTIONS
==================================================*/

/*======================================
KEUNGGULAN - MOBILE
======================================*/

@media (max-width:768px){

    .keunggulan-grid{

        grid-template-columns:1fr;

        gap:24px;

        max-width:500px;

        margin:auto;

    }

    .keunggulan-card{

        padding:35px 25px;

    }

    .keunggulan-card h3{

        font-size:22px;

    }

    .keunggulan-card .icon{

        width:80px;

        height:80px;

        font-size:32px;

    }

}

/*======================================
PROMO GRID - MOBILE
======================================*/

@media (max-width:992px){

    .promo-grid{

        grid-template-columns:repeat(2,1fr);

        gap:24px;

    }

}

@media (max-width:576px){

    .promo-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .promo-card{

        padding:30px 24px;

    }

    .promo-card h3{

        font-size:22px;

    }

}

/*======================================
PROMO CTA - MOBILE
======================================*/

@media (max-width:576px){

    .promo-cta{

        padding:40px 24px;

        margin-top:50px;

    }

    .promo-cta h3{

        font-size:28px;

    }

    .promo-cta p{

        font-size:15px;

    }

    .promo-btn{

        width:100%;

        justify-content:center;

    }

}

/*======================================
TESTIMONI GRID - MOBILE
======================================*/

@media (max-width:768px){

    .testimoni-grid{

        grid-template-columns:1fr;

        gap:24px;

        max-width:500px;

        margin:auto;

    }

    .testi-card{

        padding:28px;

    }

}

/*======================================
TESTIMONI COUNTER - MOBILE
======================================*/

@media (max-width:768px){

    .testimoni-counter{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }

    .counter-box{

        padding:28px 18px;

    }

    .counter-box h3{

        font-size:34px;

    }

}

@media (max-width:400px){

    .testimoni-counter{

        grid-template-columns:1fr;

        gap:18px;

    }

    .counter-box h3{

        font-size:30px;

    }

}

/*======================================
FAQ - MOBILE
======================================*/

@media (max-width:576px){

    .faq-question{

        padding:20px 22px;

    }

    .faq-question h3{

        font-size:16px;

    }

    .faq-answer p{

        padding:0 22px 22px;

        font-size:14px;

    }

}

/*======================================
FOOTER GRID - MOBILE
======================================*/

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footer-col:hover{

        transform:none;

    }

    .footer-logo{

        width:140px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .footer-links{

        justify-content:center;

    }

}

/*======================================
SECTION TITLE - MOBILE TEXT SIZING
======================================*/

@media (max-width:576px){

    .section-title h2{

        font-size:28px;

    }

    .section-title p{

        font-size:15px;

    }

    section{

        padding:70px 0;

    }

}

@media (max-width:400px){

    .section-title h2{

        font-size:24px;

    }

    .section-title span{

        font-size:13px;

    }

    section{

        padding:60px 0;

    }

}

@media (max-width:360px){

    .section-title h2{

        font-size:22px;

    }

}

/*======================================
SCROLL DOWN - HIDE ON MOBILE
======================================*/

@media (max-width:768px){

    .scroll-down{

        display:none;

    }

}

/*======================================
COVERAGE - MOBILE
======================================*/

@media (max-width:768px){

    .coverage-left h2{

        font-size:34px;

    }

    .coverage-form{

        padding:28px;

    }

}

@media (max-width:576px){

    .coverage-left h2{

        font-size:28px;

    }

    .coverage-left p{

        font-size:15px;

    }

    .coverage-list li{

        font-size:15px;

    }

}

@media (max-width:400px){

    .coverage-left h2{

        font-size:24px;

    }

    .coverage-form{

        padding:20px;

        border-radius:22px;

    }

    .input-group input,
    .input-group textarea{

        padding:16px 16px 16px 48px;

        font-size:14px;

    }

    .coverage-btn{

        height:52px;

        font-size:15px;

    }

}