/* ======================================
        RESPONSIVE 1200px
====================================== */

@media (max-width:1200px){

    .container{
        width:92%;
    }

    .hero-left h1{
        font-size:56px;
    }

    .hero-image img{
        width:560px;
    }

}

/* ======================================
        RESPONSIVE 992px
====================================== */

@media (max-width:992px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }

    .hero-left{

        order:2;

    }

    .hero-right{

        order:1;

    }

    .hero-left p{

        margin:auto;

        margin-top:20px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-image img{

        width:500px;

    }

}

/* ======================================
        RESPONSIVE 768px
====================================== */

@media (max-width:768px){

    .header{

        padding:15px 0;

    }

    .logo img{

        width:140px;

    }

    .menu-btn{

        display:block;

        z-index:1001;

    }

    .btn-primary{

        display:none;

    }

    .navbar{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:#fff;

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

        transition:.4s;

        display:flex;

        justify-content:center;

        align-items:center;

    }

    .navbar.active{

        right:0;

    }

    .nav-menu{

        flex-direction:column;

        gap:35px;

        text-align:center;

    }

    .nav-menu a{

        font-size:18px;

    }

    .hero{

        padding-top:120px;

    }

    .hero-left h1{

        font-size:44px;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-image img{

        width:420px;

    }

    .hero-stats{

        gap:15px;

    }

    .stat-box{

        min-width:140px;

    }

}

/* ======================================
        RESPONSIVE 576px
====================================== */

@media (max-width:576px){

    .container{

        width:92%;

    }

    .hero{

        min-height:auto;

        padding-top:120px;

        padding-bottom:80px;

    }

    .hero-left h1{

        font-size:36px;

        line-height:1.3;

    }

    .subtitle{

        font-size:14px;

    }

    .hero-left p{

        font-size:15px;

        line-height:1.8;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons a{

        width:220px;

        text-align:center;

    }

    .hero-image img{

        width:100%;

        max-width:340px;

    }

    .hero-stats{

        flex-direction:column;

        align-items:center;

        margin-top:40px;

    }

    .stat-box{

        width:100%;

        max-width:260px;

    }

    .section-title h2{

        font-size:30px;

    }

    footer{

        font-size:14px;

    }

}

/* ======================================
        RESPONSIVE 400px
====================================== */

@media (max-width:400px){

    .hero-left h1{

        font-size:30px;

    }

    .hero-left p{

        font-size:14px;

    }

    .hero-image img{

        max-width:280px;

    }

    .nav-menu a{

        font-size:16px;

    }

} 

@media(max-width:768px){

    .vision-wrapper{

        grid-template-columns:1fr;

    }

    .vision-card{

        padding:30px;

    }

} 

@media(max-width:992px){

    .about-grid{

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

    }

}

@media(max-width:768px){

    .about-grid{

        grid-template-columns:1fr;

    }

} 

@media(max-width:992px){

    .ecosystem-grid{

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

    }

}

@media(max-width:768px){

    .ecosystem-grid{

        grid-template-columns:1fr;

    }

} 

@media(max-width:768px){

    .tech-grid{

        grid-template-columns:1fr;

    }

    .tech-card{

        padding:22px;

    }

}

/* ======================================
        RESPONSIVE - LAYANAN INTEGRATIF
====================================== */

@media(max-width:768px){

    .about-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .about-image{

        order:1;

    }

    .about-content{

        order:2;

    }

    .service-item{

        text-align:left;

    }

}

/* ======================================
        RESPONSIVE - PRODUK
====================================== */

@media(max-width:992px){

    .service-grid{

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

    }

}

@media(max-width:768px){

    .service-grid{

        grid-template-columns:1fr;

    }

}

/* ======================================
        RESPONSIVE - CONTACT
====================================== */

@media(max-width:768px){

    .contact-container{

        grid-template-columns:1fr;

        gap:40px;

    }

}

/* ======================================
        RESPONSIVE - FOOTER
====================================== */

@media(max-width:768px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:35px;

    }

}