/*=====================================================
RESPONSIVE
JASA TRAILER
======================================================*/


/*==========================
Large Desktop
==========================*/

@media (max-width:1400px){

    h1{
        font-size:58px;
    }

}


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

@media (max-width:1200px){

    h1{
        font-size:52px;
    }

    h2{
        font-size:38px;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .armada-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .other-services-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media (max-width:992px){

    section{
        padding:80px 0;
    }

    h1{
        font-size:46px;
    }

    h2{
        font-size:34px;
    }

    p{
        font-size:17px;
    }

    /* NAVBAR */

    .nav-menu{
        display:none;
    }

    .navbar .btn-primary{
        display:none;
    }

    .menu-toggle{

        display:flex;

        width:50px;
        height:50px;

        border:none;
        border-radius:12px;

        background:#fff;

        justify-content:center;
        align-items:center;

        cursor:pointer;

        font-size:26px;

        box-shadow:var(--shadow);

    }

    /* HERO */

    #hero{

        min-height:100vh;

        padding:140px 0 80px;

        background-size:cover;

        background-position:78% center;

    }

    .hero-overlay{

        background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.60),
            rgba(255,255,255,.75),
            rgba(255,255,255,.92)
        );

    }

    .hero-content{

        max-width:100%;

        padding-top:40px;

    }

    /* LAYOUT */

    .why-grid{
        grid-template-columns:1fr;
    }

    .coverage-content{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .timeline{
        flex-wrap:wrap;
    }

    .step{

        flex:0 0 calc(50% - 15px);

    }

    .step::after{
        display:none;
    }

}


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

@media (max-width:768px){

    section{
        padding:70px 0;
    }

    .navbar{
        height:80px;
    }

    .logo img{
        height:48px;
    }

    /* HERO */

    #hero{

        min-height:100vh;

        padding:130px 0 70px;

        background-size:cover;

        background-position:82% center;

    }

    .hero-overlay{

        background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.50),
            rgba(255,255,255,.72),
            rgba(255,255,255,.90)
        );

    }

    .hero-content{

        max-width:100%;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons a{

        width:100%;

    }

    .hero-feature{

        flex-wrap:wrap;

        gap:15px;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .armada-grid{

        grid-template-columns:1fr;

    }

    .service-grid{

        grid-template-columns:1fr;

    }

    .testimonial-slider{

        grid-template-columns:1fr;

    }

    .other-services-grid{

        grid-template-columns:1fr;

    }

    .other-image{

        height:240px;

    }

    .step{

        flex:1 1 100%;

    }

    .coverage-list{

        padding:30px;

    }

    .cta-box h2{

        font-size:38px;

    }

}


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

@media (max-width:480px){

    .container{

        width:92%;

    }

    h1{

        font-size:32px;

    }

    h2{

        font-size:26px;

    }

    .hero-badge{

        font-size:13px;

    }

    #hero{

        background-size:cover;

        background-position:84% center;

    }

    .btn-primary,
    .btn-secondary{

        padding:15px 22px;

        font-size:15px;

    }

    .stat-card{

        padding:35px 20px;

    }

    .stat-card h2{

        font-size:42px;

    }

    .service-card{

        padding:35px 20px;

    }

    .armada-card img{

        height:220px;

    }

}

@media(max-width:1200px){

.other-services-grid{

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

}

}

@media(max-width:768px){

.other-services-grid{

grid-template-columns:1fr;

}

.other-image{

height:240px;

}

}