/* =========================================
   ZOGAD LOGISTICS
   RESPONSIVE.CSS
========================================= */

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

@media(max-width:1200px){

    .hero-content h1{
        font-size:72px;
    }

    .hero-logo img{
        width:280px;
    }

    .ecosystem-wrapper{
        width:600px;
        height:600px;
    }

}

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

@media(max-width:992px){

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-stats{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-visual{
        margin-top:60px;
    }

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

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

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

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

    .tracking-info{
        grid-template-columns:1fr;
    }

    .footer-top{
        flex-direction:column;
        gap:30px;
    }

    .nav-links{
        display:none;
    }

    .mobile-menu{
        display:block;
        font-size:24px;
        cursor:pointer;
    }

}

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

@media(max-width:768px){

    .section{
        padding:80px 0;
    }

    .hero{
        padding-top:150px;
    }

    .hero-content h1{
        font-size:58px;
    }

    .hero-content p{
        font-size:18px;
    }

    .section-header h2{
        font-size:40px;
    }

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

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

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

    .hero-logo img{
        width:220px;
    }

    .floating-card{

        position:relative;

        margin:10px auto;

        width:250px;
    }

    .card-1,
    .card-2,
    .card-3,
    .card-4{

        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }

    .hero-visual{

        height:auto;

        display:flex;

        flex-direction:column;
    }

    .tracking-card{
        padding:30px;
    }

    .tracking-top{

        flex-direction:column;

        gap:20px;
    }

    .cta-section h2{
        font-size:42px;
    }

}

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

@media(max-width:576px){

    .container{
        width:92%;
    }

    .navbar{
        padding:15px 20px;
    }

    .logo img{
        width:45px;
    }

    .logo-text span{
        font-size:18px;
    }

    .hero-content h1{
        font-size:46px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;
        text-align:center;
    }

    .stat-box{

        width:100%;
    }

    .service-card,
    .trust-card,
    .why-card{

        padding:30px;
    }

    .section-header h2{
        font-size:34px;
    }

    .cta-section{
        padding:90px 0;
    }

    .cta-section h2{
        font-size:34px;
    }

    .footer-links{

        flex-direction:column;

        text-align:center;

        gap:15px;
    }

}

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

@media(max-width:400px){

    .hero-content h1{
        font-size:38px;
    }

    .section-header h2{
        font-size:30px;
    }

    .hero-logo img{
        width:180px;
    }

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

.footer-contact{
    text-align:center;
}
.tracking-input-group{

    flex-direction:column;

    border-radius:24px;
}

.tracking-input-group i{
    display:none;
}

.tracking-input-group input{
    width:100%;
}

.tracking-input-group button{
    width:100%;
}