/* ==================================================
   TABLETS & MOBILE
================================================== */

@media (max-width:992px){

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

}

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

@media (max-width:768px){

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}

.container{
    width:100%;
    padding-left:20px;
    padding-right:20px;
}

section{
    padding:70px 0;
}

img{
    max-width:100%;
    height:auto;
}

h1{
    font-size:2.3rem;
    line-height:1.2;
}

h2{
    font-size:2rem;
}

h3{
    font-size:1.3rem;
}

p{
    font-size:16px;
    line-height:1.8;
}

}

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

@media (max-width:768px){

    body{
        padding-top: 85px;
    }

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    font-size:30px;
    color:#0B63CE;
    cursor:pointer;
}

.navbar{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#ffffff;
    padding:25px 20px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    z-index:999;
}

.navbar.active{
    display:block;
}

.nav-links{
    display:flex;
    flex-direction:column;
    gap:18px;
    align-items:center;
}

.header-buttons{
    display:none;
}

}

/* HERO BUTTONS */

@media (max-width:768px){

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:15px;
    width:100%;
}

.hero-buttons a,
.hero-buttons .btn{
    width:100%;
    justify-content:center;
}

}

/* ==========================================
   HERO SECTION
========================================== */

@media (max-width:768px){

.hero{
    padding-top:110px;
}

.hero-container{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.hero-content{
    width:100%;
    text-align:left;
}

.hero-right{
    position: relative;
    width:100%;
    margin-top:20px;
}

.hero-truck{
    width:100%;
    height:auto;
    display:block;
}

.dispatch-card{
    position:absolute;
    left:50%;
    bottom:-150px;
    transform:translateX(-50%);
    width:90%;
    max-width:280px;
}

}

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

.stat{
    padding:18px 6px;
    text-align:center;
}

.stat h2{
    font-size:1.7rem;
}

.stat p{
    font-size:.75rem;
}

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

@media (max-width:768px){

.services-grid,
.equipment-grid,
.pricing-grid,
.features-grid,
.benefits-grid,
.cards-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px;
}

.service-card,
.equipment-card,
.pricing-card,
.feature-card,
.benefit-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto;
}

}

/* ===========================
   SERVICES
=========================== */

@media (max-width: 768px) {

    .services {
        padding: 70px 20px;
    }

    .services-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px;
    }

    .service-card{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    }

    .service-icon {
        margin-bottom: 18px;
    }

    .service-card h3 {
        font-size: 24px;
    }

    .service-card p {
        font-size: 16px;
        line-height: 1.7;
    }

}
   
   @media (max-width:768px){
/* WHY CHOOSE VELTRA */
.why-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.why-card{
    min-width: 0;
    width: 100%;
    padding: 20px 15px;
    min-height: auto;
    box-sizing: border-box;
}

.why-card h3{
    font-size: 22px;
    word-break: break-word;
}

.why-card p{
    font-size: 15px;
    line-height: 1.6;
}

/* ==========================
   TESTIMONIALS - MOBILE
========================== */

.testimonials-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.testimonial-card{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px 15px;
}

.testimonials .container{
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

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

.footer{
    padding:50px 20px;
}

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

.footer-brand,
.footer-links,
.footer-services,
.footer-contact{
    width:100%;
    text-align:center;
    align-items:center;
}

.footer-title{
    text-align:center;
}

.footer-brand p{
    text-align:center;
}

.footer h4{
    text-align:center;
}

.footer-features{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.footer-links a,
.footer-services p,
.footer-contact a,
.footer-contact p{
    justify-content:center;
}

.footer-divider{
    margin:40px 0 25px;
}

.footer-bottom{
    text-align:center;
}

   }
   
@media (max-width:768px){

    .qualification-card{
        padding:35px 25px;
    }

    .qualification-card h1{
        font-size:34px;
    }

    .intro{
        font-size:16px;
    }

    .requirements li{
        font-size:16px;
    }

    .qualification-buttons{
        flex-direction:column;
    }

    .qualification-buttons a{
        width:100%;
        text-align:center;
    }

}