*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#fff;
}

.navbar{
    width:100%;
    height:80px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 8%;

    background:#fff;

    position:fixed;
    top:0;
    left:0;

    z-index:9999;   /* Add this */

    box-shadow:0 2px 15px rgba(0,0,0,.1);
}

.logo img{

    width:170px;

}

.menu{

    display:flex;

    list-style:none;

}

.menu li{

    margin:0 18px;

}

.menu a{

    text-decoration:none;

    color:#222;

    font-weight:600;

    transition:.3s;

}

.menu a:hover{

    color:#ff6600;

}

.btn{

    background:#ff6600;

    color:white;

    text-decoration:none;

    padding:12px 24px;

    border-radius:30px;

    transition:.3s;

}

.btn:hover{

    background:#111;

}/* ================= SERVICES DROPDOWN ================= */

/* ================= SERVICES DROPDOWN ================= */
.dropdown{
    position:relative;
}

.dropdown > a i{
    font-size:11px;
    margin-left:5px;
}

/* ================= DROPDOWN BOX (FIXED) ================= */
.dropdown-menu{
    position:absolute;
    top:170%;
    left:-15px;
    border-radius: 10px;
    width: 280px; /* 330px se chhota kiya taaki bahut bada na lage */
    background:#fff;
    list-style:none;
    padding:0;
    margin:0;
    display:none;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
    z-index:99999;
    /* OVERFLOW HIDDEN YAHAN SE HATA DIYA HAI WARNA CHILD MENUS CUT JAYENGE */
}

/* Invisible bridge between Services and dropdown */
.dropdown-menu::before{
    content:"";
    position:absolute;
    top:-20px;
    left:0;
    width:100%;
    height:20px;
    background:transparent;
}

/* ================= DROPDOWN ITEMS ================= */
.dropdown-menu li{
    margin:0;
    width:100%;
}

.dropdown-menu li a{
    display:block;
    padding:12px 25px;
    color:#222;
    text-decoration:none;
    font-weight:400;
    white-space:nowrap;
    transition:.3s;
    border-bottom: 1px solid #f2f2f2; /* Items alag dikhne ke liye */
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover{
    background:#f8f8f8;
    color:#ff6600;
}

/* ================= HOVER (SAB EK SATH NA KHULE ISKA FIX) ================= */
/* Sirf > lagane se bas pehla menu khulega, saare nahi */
.dropdown:hover > .dropdown-menu {
    display:block;
}

/* ================= NESTED SUBMENU (MEGA MENU) FIXES ================= */
.dropdown-submenu {
    position: relative;
}

/* Arrow icon aur text ko space dene ke liye */
.dropdown-submenu > a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

/* Nested menus theek side mein khulenge */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* Right side me khulega */
    width: 250px; /* Submenu ki width thodi aur chhoti rakhi hai */
    margin-top: -5px;
    display: none; /* By default hide */
}

/* Submenu pe hover karne par sirf uska direct child open ho */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

/* Invisible bridge taaki hover break na ho */
.dropdown-submenu > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -15px; 
    width: 15px;
    height: 100%;
    background: transparent;
}

/* ================= HOVER ================= */

.dropdown-menu li a:hover{
    background:#f5f5f5;
    color:#ff6600;
}


/* ================= SHOW DROPDOWN ================= */

/* .dropdown:hover .dropdown-menu{
    display:block;
} */
/* ================= Hero Start ================= */
.hero{

    width:100%;
    min-height:100vh;

    background:
        linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
        url("image/home page image.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;

    padding:80px 8% 0;
}

.hero-content{

    max-width:650px;
    color:#fff;
}

.hero h4{

    color:#ff6600;
    letter-spacing:3px;
    margin-bottom:20px;
}

.hero h1{

    font-size:55px;
    line-height:80px;
    margin-bottom:25px;
}

.hero h1 span{

    color:#ff6600;
}

.hero p{

    font-size:18px;
    line-height:35px;
    margin-bottom:35px;
    color:#f2f2f2;
}

.hero-btn{

    display:flex;
    gap:20px;
}
/* ================================
   MENU TOGGLE BUTTON
================================ */

.menu-toggle {
    display: flex !important;

    width: 45px;
    height: 45px;

    border: 1px solid #ddd;
    border-radius: 6px;

    background: #fff;
    color: #111;

    font-size: 20px;

    cursor: pointer;

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

    margin-left: 15px;

    z-index: 1001;
}

.menu-toggle:hover {
    color: #ff6600;
    border-color: #ff6600;
}


/* ================================
   WHEN MENU IS OPEN
================================ */

.menu.menu-open {
    position: absolute;

    top: 100%;
    right: 8%;

    width: 230px;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    background: #fff;

    padding: 15px 0;

    border-radius: 10px;

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

    z-index: 1000;
}

.menu.menu-open li {
    width: 100%;
}

.menu.menu-open li a {
    display: block;
    padding: 13px 20px;
}

.menu.menu-open li a:hover {
    background: #ff6600;
    color: #fff;
}
/*================ ABOUT SECTION ================*/

.about{

    width:100%;

    padding:90px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    background:white;

}

.about-image{

    width:45%;

}
.about-image img{

    width:100%;
    border-radius:20px;
}
.about-image:hover img{

    transform:scale(1.05);

}
.about-content{

    width:50%;

}

.about-content h5{

    color:#ff6600;

    font-size:15px;

    letter-spacing:2px;

}

.about-content h2{

    font-size:33px;

    margin:20px 0;

    color:#111;

}

.about-content p{

    color:#666;

    line-height:30px;
    margin-bottom:35px;

}

.about-box{

    display:grid;

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

    gap:20px;

    margin-bottom:35px;

}

.box{

    background:#f8f8f8;

    padding:25px;

    border-radius:12px;

    text-align:center;

    transition:.4s;

}

.box:hover{

    background:#ff6600;

    color:white;

    transform:translateY(-8px);

}

.box h3{

    font-size:28px;

    margin-bottom:8px;

}
/*================ WHY US SECTION ================*/

.why-us{

    width:100%;
    padding:80px 8%;
    background:#fff;

}

.why-us-content{

    margin-top:40px;

}

.why-item{

    margin-bottom:35px;

}

.why-item h3{

    color:#123f67;

    font-size:22px;

    margin-bottom:12px;

}

.why-item p{

    color:#333;

    font-size:16px;

    line-height:28px;

    margin:0;

}


/* MOBILE */

@media(max-width:768px){

    .why-us{

        padding:60px 5%;

    }

    .why-item h3{

        font-size:20px;

    }

    .why-item p{

        font-size:15px;

        line-height:26px;

    }

}
/*================ SERVICES SECTION ================*/

.services{

    width:100%;

    padding:90px 8%;

    background:#f8f9fb;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h5{

    color:#ff6600;

    font-size:15px;

    letter-spacing:2px;

}

.section-title h2{

    font-size:28px;

    margin:15px 0;

    color:#111;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:#666;

    line-height:28px;

}

.service-container{

    display:grid;

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

    gap:30px;

}

.service-card{

    background:white;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.4s;

}

.service-card:hover{

    transform:translateY(-10px);

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

}

.service-card i{

    font-size:30px;

    margin-bottom:20px;

    transition:0.3s ease;

}


/* Road Transport */
.service-card:nth-child(1) i{
    color:#2563eb;
}


/* Logistics */
.service-card:nth-child(2) i{
    color:#f97316;
}


/* Warehousing */
.service-card:nth-child(3) i{
    color:#16a34a;
}


/* Express Delivery */
.service-card:nth-child(4) i{
    color:#dc2626;
}


/* Pan India Delivery */
.service-card:nth-child(5) i{
    color:#7c3aed;
}


/* 24×7 Support */
.service-card:nth-child(6) i{
    color:#0891b2;
}


/* Hover */
.service-card:hover i{
    transform:scale(1.12);
}

.service-card h3{

    margin-bottom:15px;

    color:#111;

}

.service-card p{

    color:#666;

    line-height:26px;

}
/*================ PARTNERS SECTION ================*/

.partners{

    width:100%;
    padding:90px 8%;
    background:#ffffff;

}

.partner-container{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.partner-card{

    background:#fff;
    padding:35px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.4s;

}

.partner-card:hover{

    transform:translateY(-10px);

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

}

.partner-card img{

    width:150px;
    max-width:100%;
    height:70px;
    object-fit:contain;

}
/*================ GALLERY SECTION ================*/

.gallery{

    width:100%;
    padding:90px 8%;
    background:#ffffff;

}

.gallery-container{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}

.gallery-item{

    overflow:hidden;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);

}

.gallery-item img{

    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.1);

}
/*================ WHY CHOOSE US ================*/

.why-us{

    width:100%;
    padding:90px 8%;
    background:#fff;

}

.why-container{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.why-card{

    background:#fff;
    padding:40px 30px;
    text-align:center;
    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.4s;
    cursor:pointer;

}

.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.why-card i{

    font-size:35px;
    margin-bottom:25px;

    transition:.4s;

}

.why-card:hover i{

    transform:scale(1.15) rotate(8deg);

}

.why-card h3{

    font-size:18px;
    margin-bottom:15px;
    font-weight:700;

}

.why-card p{

    color:#666;
    line-height:28px;
    font-size:13px;

}


/*================ CARD COLORS ================*/

/* 1 Fast Delivery */

.why-card:nth-child(1) i,
.why-card:nth-child(1) h3{

    color:#ff6600;

}

.why-card:nth-child(1):hover{

    border-bottom:5px solid #ff6600;

}


/* 2 Safe Transport */

.why-card:nth-child(2) i,
.why-card:nth-child(2) h3{

    color:#0d6efd;

}

.why-card:nth-child(2):hover{

    border-bottom:5px solid #0d6efd;

}


/* 3 Pan India */

.why-card:nth-child(3) i,
.why-card:nth-child(3) h3{

    color:#6f42c1;

}

.why-card:nth-child(3):hover{

    border-bottom:5px solid #6f42c1;

}


/* 4 Support */

.why-card:nth-child(4) i,
.why-card:nth-child(4) h3{

    color:#20c997;

}

.why-card:nth-child(4):hover{

    border-bottom:5px solid #20c997;

}


/* 5 Pricing */

.why-card:nth-child(5) i,
.why-card:nth-child(5) h3{

    color:#dc3545;

}

.why-card:nth-child(5):hover{

    border-bottom:5px solid #dc3545;

}


/* 6 Secure Handling */

.why-card:nth-child(6) i,
.why-card:nth-child(6) h3{

    color:#28a745;

}

.why-card:nth-child(6):hover{

    border-bottom:5px solid #28a745;

}
/*================ STATISTICS SECTION ================*/

.stats{

    width:100%;

    padding:90px 8%;

    background:url("../images/stats-bg.jpg") center/cover fixed;

    position:relative;

}

.stats::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.70);

}

.stats-overlay{

    position:relative;

    display:grid;

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

    gap:30px;

}

.stat-box{

    text-align:center;

    color:#fff;

    padding:30px;

}

.stat-box h2{

    font-size:50px;

    color:#ff6600;

    margin-bottom:15px;

}

.stat-box p{

    font-size:18px;

    letter-spacing:1px;

}

/*================ PROCESS SECTION ================*/

.process{

    width:100%;
    padding:90px 8%;
    background:#f8f9fb;

}

.process-container{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.process-card{

    background:#fff;
    border-radius:15px;
    padding:40px 25px;
    text-align:center;
    position:relative;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.4s;

}

/*=========================
      PROCESS CARD
=========================*/

.process-card{

    background:#fff;
    border-radius:15px;
    padding:40px 30px;
    text-align:center;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.4s;

}

.process-card:hover{

    transform:translateY(-10px);
    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.process-card i{

    font-size:30px;
    margin:25px 0;

}

.process-card h3{

    margin-bottom:15px;
    font-size:18px;
    font-weight:600;

}

.process-card p{

    color:#666;
    line-height:28px;
    font-size:15px;

}


/*=========================
      COLORS
=========================*/

/* Book Service */

.process-blue{

    color:#0d6efd;

}

.process-blue-text{

    color:#0d6efd;

}


/* Pickup */

.process-orange{

    color:#ff6600;

}

.process-orange-text{

    color:#ff6600;

}


/* Transportation */

.process-purple{

    color:#6f42c1;

}

.process-purple-text{

    color:#6f42c1;

}


/* Safe Delivery */

.process-green{

    color:#28a745;

}

.process-green-text{

    color:#28a745;

}
.process-card:nth-child(1):hover{
    border-bottom:5px solid #0d6efd;
}

.process-card:nth-child(2):hover{
    border-bottom:5px solid #ff6600;
}

.process-card:nth-child(3):hover{
    border-bottom:5px solid #6f42c1;
}

.process-card:nth-child(4):hover{
    border-bottom:5px solid #28a745;
}
/*================ CEO SECTION ================*/

.ceo{

    width:100%;
    padding:100px 8%;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;

    background:#fff;

}

/* IMAGE */

.ceo-image{

    width:42%;
    position:relative;
    overflow:hidden;
    border-radius:20px;

}

.ceo-image img{

    width:100%;
    display:block;

    border-radius:20px;

    transition:.6s;

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

}

.ceo-image:hover img{

    transform:scale(1.05);

}

/* Orange Border */

.ceo-image::before{

    content:"";

    position:absolute;

    top:18px;
    left:18px;

    width:100%;
    height:100%;

    border:3px solid #ff6600;

    border-radius:20px;

    z-index:-1;

}
/* CONTENT */

.ceo-content{

    width:58%;

}

.ceo-content h5{

    color:#ff6600;

    letter-spacing:3px;

    margin-bottom:18px;

    font-size:15px;

}

.ceo-content h2{

    font-size:38px;

    margin-bottom:25px;

    color:#111;

}

.quote{

    color:#555;

    line-height:34px;

    font-size:19px;

    margin-bottom:35px;

}

.quote i{

    color:#ff6600;

    font-size:28px;

    margin-right:10px;

}

/* SIGNATURE */

.signature{

    border-left:5px solid #ff6600;

    padding-left:18px;

    margin-bottom:30px;

}

.signature h4{

    font-size:25px;

    color:#111;

}

.signature span{

    color:#ff6600;

    font-weight:530;

}

/* BUTTON */

.ceo-btn a{

    display:inline-block;

    padding:14px 35px;

    background:#118;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.4s;

}

.ceo-btn a:hover{

    background:rgb(212, 180, 212);

    transform:translateY(-4px);

}

/*================ FEEDBACK ================*/

.testimonial{

    width:100%;
    padding:90px 8%;
    background:#ffffff;
    box-shadow:
    0 -8px 20px rgba(0,0,0,.08),
    0 8px 20px rgba(0,0,0,.08);

}

.testimonial-container{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.testimonial-card{

    background:#fff;
    padding:35px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

}

.testimonial-card img{

    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:20px;

}

.testimonial-card h3{

    margin-bottom:8px;

}

.testimonial-card span{

    color:#ff6600;
    font-weight:500;

}

.testimonial-card p{

    margin:20px 0;
    line-height:28px;
    color:#666;

}

.stars{

    color:#ff6600;
    font-size:22px;

}
/*================ CTA SECTION ================*/

.cta{

    width:100%;

    padding:100px 8%;

    background:linear-gradient(135deg,#ff6600,#ff8c00);

    text-align:center;
    
}

.cta-content{

    max-width:800px;

    margin:auto;

}

.cta h2{

    color:#fff;

    font-size:38px;

    margin-bottom:20px;

}

.cta p{

    color:#fff;

    font-size:15px;

    line-height:30px;

    margin-bottom:35px;

}

.cta-btn{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-outline{

    display:inline-block;

    padding:14px 35px;

    border:2px solid #fff;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    transition:.4s;

}

.btn-outline:hover{

    background:rgb(19, 19, 53);

    color:#fff;

}
/*================ CONTACT PREVIEW ================*/

.contact-preview{

    width:100%;
    padding:90px 8%;
    background:#f8f9fb;

}

.contact-container{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:50px;

}

.contact-box{

    background:#fff;
    padding:35px 25px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.4s;

}

.contact-box:hover{

    transform:translateY(-10px);

}

.contact-box i{

    font-size:45px;
    color:#ff6600;
    margin-bottom:20px;

}
.contact-box:nth-child(1) i {
    color: #E74C3C;
}

.contact-box:nth-child(2) i {
    color: #27AE60;
}

.contact-box:nth-child(3) i {
    color: #2980B9;
}

.contact-box:nth-child(4) i {
    color: #8E44AD;
}
.contact-box h3{

    margin-bottom:15px;
    color:#111;

}

.contact-box p{

    color:#666;
    line-height:28px;

}

.contact-btn{

    text-align:center;
    margin-top:50px;

}

/* ================================
   ENQUIRY SECTION
================================ */

.enquiry {
    width: 100%;
    min-height: 100vh;
    padding: 150px 8%;
    background: #f8f9fb;
}


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

.enquiry-header {
    text-align: center;
    margin-bottom: 10px;
}

.enquiry-header span {
    color: #ff6600;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
}

.enquiry-header h2 {
    font-size: 32px;
    color: #111;
    margin: 10px 0 12px;
}

.enquiry-header p {
    max-width: 650px;
    margin: auto;
    color: #666;
    font-size: 17px;
    line-height: 28px;
}


/* ================================
   FORM BOX
================================ */

.enquiry-form {
    max-width: 850px;
    margin: auto;

    background: #fff;

    padding: 45px;

    border-radius: 18px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.08);
}


/* ================================
   FORM ROW
================================ */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


/* ================================
   FORM GROUP
================================ */

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #222;

    font-size: 15px;

    font-weight: 550;
}


/* ================================
   INPUT
================================ */

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

    width: 100%;

    padding: 15px 17px;

    border: 1px solid #ddd;

    border-radius: 9px;

    background: #fafafa;

    color: #222;

    font-size: 15px;

    outline: none;

    transition: 0.3s;

    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
}


/* ================================
   INPUT FOCUS
================================ */

.form-group input:focus,
.form-group textarea:focus {

    border-color: #ff6600;

    background: #fff;

    box-shadow:
        0 0 0 3px rgba(255, 102, 0, 0.10);
}


/* ================================
   PLACEHOLDER
================================ */

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}


/* ================================
   SUBMIT BUTTON
================================ */

.submit-btn {

    width: 100%;

    padding: 16px 25px;

    border: none;

    border-radius: 9px;

    background: #ff6600;

    color: #fff;

    font-size: 15px;

    font-weight: 550;

    cursor: pointer;

    transition: 0.3s;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;
}

.submit-btn:hover {

    background: #e85b00;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(255, 102, 0, 0.25);
}


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

@media (max-width: 768px) {

    .enquiry {
        padding: 60px 20px;
    }

    .enquiry-header h2 {
        font-size: 32px;
    }

    .enquiry-header p {
        font-size: 15px;
        line-height: 24px;
    }

    .enquiry-form {
        padding: 30px 22px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}


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

@media (max-width: 480px) {

    .enquiry {
        padding: 45px 15px;
    }

    .enquiry-header h2 {
        font-size: 28px;
    }

    .enquiry-form {
        padding: 25px 18px;
        border-radius: 14px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 15px;
        padding: 13px 14px;
    }

}
/*================ FOOTER ================*/

.footer{

    background:#111;
    color:#fff;
    padding-top:70px;

}

.footer-container{

    width:84%;
    margin:auto;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:40px;

}

.footer-logo{

    width:180px;
    margin-bottom:20px;

}

.footer-box p{

    color:#ccc;
    line-height:28px;

}

.footer-box h3{

    margin-bottom:20px;
    color:#ff6600;

}

.footer-box ul{

    list-style:none;

}

.footer-box ul li{

    margin-bottom:12px;

}

.footer-box ul li a{

    text-decoration:none;
    color:#ccc;
    transition:.3s;

}

.footer-box ul li a:hover{

    color:#ff6600;

}

.social-icons{

    margin-top:20px;

}

.social-icons a{

    display:inline-flex;

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

    width:42px;
    height:42px;

    background:#222;

    color:#fff;

    border-radius:50%;

    text-decoration:none;

    margin-right:10px;

    transition:.3s;

}

.social-icons a:hover{

    background:#5e65cc;

}

.footer-bottom{

    border-top:1px solid #333;

    margin-top:50px;

    padding:20px;

    text-align:center;

    color:#aaa;

}
/* =======================================================
   RESPONSIVE MEDIA QUERIES (Mobile & Tablet Adjustments)
   ======================================================= */

/* --- 1. DESKTOP FIXES (992px se upar) --- */
@media (min-width: 992px) {
    .menu-toggle {
        display: none !important; /* PC par hamburger menu hide karein */
    }
}

/* --- 2. TABLETS & SMALL LAPTOPS (max-width: 991px) --- */
@media (max-width: 991px) {
    /* Navbar Adjustments */
    .menu-toggle {
        display: flex !important; /* Mobile/Tablet par hamburger show karein */
    }
    .menu {
        display: none; /* Default menu hide karein */
    }
    .menu.menu-open {
        display: flex; /* Jab JS se click ho tab dropdown open ho */
    }
    .navbar .btn {
        display: none; /* Chhoti screen par 'Get Quote' button nav se hide karein taaki jagah bache */
    }

    /* Flexbox Sections (About & CEO) */
    .about, .ceo {
        flex-direction: column;
        text-align: center;
    }
    .about-image, .about-content, .ceo-image, .ceo-content {
        width: 100%;
    }
    .about-image img, .ceo-image img {
        max-width: 80%;
        margin: 0 auto;
    }
    .signature {
        border-left: none;
        padding-left: 0;
        border-bottom: 3px solid #ff6600;
        padding-bottom: 15px;
        display: inline-block;
    }

    /* Grids - 3 & 4 Columns ko 2 Columns me badlein */
    .service-container, .partner-container, .gallery-container, .why-container, .testimonial-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-overlay, .process-container, .contact-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Typography Adjustments */
    .hero h1 {
        font-size: 45px;
        line-height: 55px;
    }
    .cta h2 {
        font-size: 38px;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* --- 3. MOBILE DEVICES (max-width: 768px) --- */
@media (max-width: 768px) {
    /* Padding kam karein */
    .hero, .about, .services, .partners, .gallery, .why-us, .stats, .process, .ceo, .testimonial, .cta, .contact-preview, .enquiry {
        padding: 60px 5%;
    }
    .navbar {
        padding: 0 5%;
    }

    /* Grids - 2 Columns ko 1 Column me badlein */
    .service-container, .partner-container, .why-container, .testimonial-container {
        grid-template-columns: 1fr;
    }
    .stats-overlay, .process-container, .contact-container {
        grid-template-columns: 1fr;
    }
    .gallery-container {
        grid-template-columns: repeat(2, 1fr); /* Images 2 column me achhi lagengi */
    }

    /* Typography */
    .hero h1 {
        font-size: 35px;
        line-height: 45px;
    }
    .section-title h2, .about-content h2, .ceo-content h2 {
        font-size: 32px;
    }

    /* Footer */
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-logo {
        margin: 0 auto 20px;
    }
    .social-icons {
        display: flex;
        justify-content: center;
    }
}

/* --- 4. SMALL MOBILE PHONES (max-width: 480px) --- */
@media (max-width: 480px) {
    .about-box {
        grid-template-columns: 1fr;
    }
    .gallery-container {
        grid-template-columns: 1fr;
    }
    .hero h1 {
        font-size: 28px;
        line-height: 38px;
    }
    .about-image img, .ceo-image img {
        max-width: 100%;
    }
    
    /* Buttons ko full width banayein */
    .hero-btn, .cta-btn {
        flex-direction: column;
        gap: 15px;
    }
    .btn, .btn-outline {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}
/* =======================================================
Full Truck Load (FTL) Close and Open
   ======================================================= */
.service-page-hero {
    width: 100%;
    min-height: 45vh; /* Thoda chhota hero section rakha hai */
    margin-top: 80px; /* Navbar ke liye space */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Background Image - Path apne hisaab se update kar lena */
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), 
                url("/image/full\ truck\ 02.png") center/cover no-repeat;
    padding: 60px 8%;
}

.hero-text-box span {
    color: #ff6600;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.hero-text-box h1 {
    color: #fff;
    font-size: 45px;
    margin: 15px 0;
}

.hero-text-box p {
    color: #ddd;
    font-size: 17px;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}


/* =======================================================
   SERVICES PAGE: INDIVIDUAL SERVICE ROWS
   ======================================================= */
.service-row {
    padding: 90px 8%;
    background: #fff;
}

/* Agle section ko thoda alag dikhane ke liye background grey karenge jab add karenge */
.service-row:nth-child(even) {
    background: #f8f9fb;
}

.service-row-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- IMAGE SECTION --- */
.service-image {
    width: 48%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.service-image:hover img {
    transform: scale(1.05); /* Image zoom on hover */
}

/* --- CONTENT SECTION --- */
.service-info {
    width: 50%;
}

.service-info h2 {
    font-size: 32px;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.3;
}

.service-info p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

.service-info h3 {
    font-size: 18px;
    color: #ff6600;
    margin-bottom: 15px;
}

/* Vehicle Features List */
.vehicle-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Column Layout */
    gap: 15px;
    margin-bottom: 35px;
}

.vehicle-list li {
    font-size: 15px;
    color: #222;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicle-list li i {
    color: #ff6600;
    font-size: 16px;
}


/* =======================================================
   RESPONSIVE (TABLET & MOBILE)
   ======================================================= */
@media (max-width: 991px) {
    .service-row-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .service-image, .service-info {
        width: 100%;
    }

    .service-image img {
        height: 350px;
    }

    /* List items ko center align karne ke liye */
    .vehicle-list {
        text-align: left; /* Ander ka text left rahega, par box fit hoga */
        max-width: 400px;
        margin: 0 auto 35px auto;
    }
}

@media (max-width: 600px) {
    .hero-text-box h1 {
        font-size: 35px;
    }

    .service-info h2 {
        font-size: 26px;
    }

    /* Chhoti screen par 2 columns ki jagah 1 column */
    .vehicle-list {
        grid-template-columns: 1fr;
    }

    .service-image img {
        height: 250px;
    }
}
/* =======================================================
LCL - B2B containers
   ======================================================= */

/* --- SERVICE ROW CONTAINER --- */
.service-row {
    padding: 90px 8%;
    background: #fff;
}

/* Even rows (2nd, 4th service) ka background halka grey karne ke liye */
.service-row:nth-child(even) {
    background: #f8f9fb;
}

.service-row-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --- ZIG-ZAG LAYOUT (Image Right for 2nd & 4th Service) --- */
@media (min-width: 992px) {
    .reverse-row {
        flex-direction: row-reverse;
    }
}

/* --- IMAGE SECTION --- */
.service-image {
    width: 48%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.service-image:hover img {
    transform: scale(1.05);
}

/* --- CONTENT SECTION --- */
.service-info {
    width: 50%;
}

.service-info h2 {
    font-size: 32px;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.3;
}

.service-info p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

.service-info h3 {
    font-size: 18px;
    color: #ff6600;
    margin-bottom: 15px;
}

/* --- FEATURES / VEHICLE LIST --- */
.vehicle-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Column List */
    gap: 15px;
    margin-bottom: 35px;
}

.vehicle-list li {
    font-size: 15px;
    color: #222;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicle-list li i {
    color: #ff6600;
    font-size: 16px;
}

/* =======================================================
   MOBILE & TABLET RESPONSIVENESS
   ======================================================= */
@media (max-width: 991px) {
    .service-row-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .service-image, .service-info {
        width: 100%;
    }

    .service-image img {
        height: 350px;
    }

    /* List items mobile me theek se center align karne ke liye */
    .vehicle-list {
        text-align: left;
        max-width: 400px;
        margin: 0 auto 35px auto;
    }
}

@media (max-width: 600px) {
    .service-info h2 {
        font-size: 26px;
    }

    /* Chhoti screen par list 1 column me ho jayegi */
    .vehicle-list {
        grid-template-columns: 1fr;
    }

    .service-image img {
        height: 250px;
    }
}

/* ================= GLOBAL & BASE STYLES ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    background-color: #f8f9fb;
    overflow-x: hidden;
}

/* ================= NAVBAR (RESPONSIVE) ================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 8%;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.menu {
    display: flex;
    list-style: none;
    gap: 30px;
}
.menu li {
    position: relative;
}
.menu a {
    text-decoration: none;
    color: #111;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}
.menu a:hover {
    color: #ff6600;
}
.menu .btn {
    background: #ff6600;
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
}
.menu .btn:hover {
    background: #111;
    color: #fff;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background: #fff;
    top: 100%;
    left: 0;
    min-width: 280px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    list-style: none;
    flex-direction: column;
    border-radius: 8px;
    /* overflow: hidden; */
}
.dropdown:hover > .dropdown-menu {
    display: flex;
}
.dropdown-menu li a {
    padding: 12px 20px;
    display: block;
    border-bottom: 1px solid #eee;
}
.menu-toggle {
    display: none;
    font-size: 28px;
    color: #111;
    cursor: pointer;
}

/* ================= FOOTER (RESPONSIVE) ================= */
.footer {
    background: #111;
    color: #fff;
    padding: 70px 8% 20px;
}
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}
.footer-box p {
    color: #ccc;
    font-size: 14px;
    line-height: 25px;
    margin-top: 15px;
}
.footer-box h3 {
    color: #ff6600;
    margin-bottom: 20px;
    font-size: 20px;
}
.footer-box ul {
    list-style: none;
}
.footer-box ul li {
    margin-bottom: 12px;
}
.footer-box ul li a, .footer-box ul li {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
    font-size: 15px;
}
.footer-box ul li a:hover {
    color: #ff6600;
}
.social-icons {
    margin-top: 20px;
}
.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s;
}
.social-icons a:hover {
    background: #ff6600;
}
.footer-bottom {
    text-align: center;
    border-top: 1px solid #333;
    padding-top: 20px;
    color: #888;
    font-size: 14px;
}
/* ================= RESPONSIVE MEDIA QUERIES (SAB KE LIYE) ================= */

/* Tablet & Smaller Laptops (Max Width 900px) */
@media (max-width: 900px) {
    /* Navbar Responsive Setup */
    .menu-toggle { display: block; }
    .menu {
        position: absolute;
        top: 100%;
        left: -100%;
        background: #fff;
        width: 100%;
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        transition: 0.3s;
    }
    .menu.active { left: 0; }
    .dropdown-menu { position: static; box-shadow: none; display: none; }
    .dropdown:hover .dropdown-menu { display: none; } /* Handle with JS on mobile preferably */
    .dropdown.active .dropdown-menu { display: flex; }
    
    /* Layout Grids */
    .service-detail-container { flex-direction: column; }
    .service-detail-image, .service-detail-content { width: 100%; }
    .freight-feature-container, .transport-cards, .truck-cards, .cab-cards, .cab-process-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-hero-content h1, .transport-hero-content h1, .truck-hero-content h1, .cab-hero-content h1 {
        font-size: 40px;
    }
}

/* Mobile Devices (Max Width 600px) */
@media (max-width: 600px) {
    /* Grids to Single Column */
    .freight-feature-container, .transport-cards, .truck-cards, .cab-cards, .cab-process-container {
        grid-template-columns: 1fr;
    }
    
    /* Hero Heights and Texts */
    .service-hero, .transport-hero, .truck-hero, .cab-hero { min-height: 380px; padding: 40px 5%; }
    .service-hero-content h1, .transport-hero-content h1, .truck-hero-content h1, .cab-hero-content h1 {
        font-size: 32px;
    }
    .service-detail-content h2, .transport-title h2, .truck-title h2, .cab-title h2, .cab-process-title h2 {
        font-size: 28px;
    }
    .cab-cta h2, .truck-cta h2 { font-size: 28px; }
    
    /* Sections Padding */
    .service-detail, .freight-features, .transport-intro, .truck-intro, .cab-intro, .cab-process {
        padding: 60px 5%;
    }
}

/* =======================================================
   MULTI-LEVEL DROPDOWN FIXES (DESKTOP)
   ======================================================= */

.dropdown-submenu {
    position: relative;
}

/* Arrow ko space dene ke liye */
.dropdown-submenu > a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

/* Nested menu ki position theek parent ke right me karni hai */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%; /* Opens exactly to the right */
    margin-top: -1px; /* Alignment fix */
    display: none; /* Default hide */
}

/* Invisible bridge so mouse doesn't lose hover when moving to submenu */
.dropdown-submenu > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -15px; 
    width: 15px;
    height: 100%;
    background: transparent;
}

/* Hover effect for desktop */
.dropdown-submenu:hover > .dropdown-menu {
    display: flex; /* Ya block, depending on your structure */
    flex-direction: column;
}


/* =======================================================
   MULTI-LEVEL DROPDOWN FIXES (MOBILE - MAX 900px)
   ======================================================= */

@media (max-width: 900px) {
    /* Mobile me nested menu absolute nahi, static hona chahiye */
    .dropdown-submenu > .dropdown-menu {
        position: static; 
        box-shadow: none;
        padding-left: 20px; /* Thoda andar shift karne ke liye */
        width: 100%;
        display: none; /* Default hide */
    }
    
    /* Jab mobile me JS se active class add ho tabhi show ho */
    .dropdown-submenu.active > .dropdown-menu {
        display: flex;
        flex-direction: column;
    }
}