/* =========================================================
   BIGCARGO LOGISTICS - RESPONSIVE WEBSITE
   Replace images inside /images/ with your actual images.
========================================================= */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Arial,Helvetica,sans-serif;
    color:#092b57;
    background:#fff;
    line-height:1.5;
}
img{width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{width:92%;max-width:1180px;margin:auto}

/* =========================================================
   01. TOP BAR
========================================================= */
.topbar{
    height:31px;
    background:#082849;
    color:#fff;
    font-size:14px;
}
.topbar-inner{
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.top-links{display:flex;gap:20px}
.top-contact{display:flex;gap:22px}
.topbar i{margin-right:6px}

/* =========================================================
   02. MAIN HEADER
========================================================= */
.header{
    height:72px;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    position:relative;
    z-index:20;
}
.header-inner{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.logo{
    font-weight:900;
    font-size:28px;
    line-height:.8;
    letter-spacing:-1px;
    color:#153b68;
}
.logo span{color:#f15a24}
.logo small{
    display:block;
    font-size:8px;
    letter-spacing:3px;
    text-align:center;
    color:#17365b;
    margin-top:4px;
}
.nav{
    display:flex;
    align-items:center;
    gap:27px;
    font-size:14px;
    font-weight:700;
}
.nav a{transition:.2s}
.nav a:hover{color:#f15a24}
.nav .has-arrow i{font-size:8px;margin-left:5px}
.quote-btn,.orange-btn{
    background:#f4511e;
    color:#fff;
    border-radius:6px;
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
    display:inline-block;
    transition:.25s;
}
.quote-btn:hover,.orange-btn:hover{
    background:#d94113;
    transform:translateY(-2px);
}
.menu-toggle{
    display:none;
    border:0;
    background:none;
    font-size:23px;
    color:#082849;
}

/* =========================================================
   03. HERO
========================================================= */
.hero{
    min-height:365px;
    position:relative;
    background:
      linear-gradient(90deg,rgba(3,31,58,.95) 0%,rgba(3,31,58,.72) 36%,rgba(3,31,58,.05) 75%),
      url("img/banner.png") center/cover no-repeat;
    color:#fff;
    overflow:hidden;
}
.hero-content{
    min-height:365px;
    display:flex;
    align-items:center;
}
.hero-text{max-width:540px}
.hero-kicker{
    color:#ff5722;
    font-size:15px;
    font-weight:800;
    letter-spacing:.3px;
    margin-bottom:10px;
}
.hero h1{
    font-size:45px;
    line-height:1.02;
    margin-bottom:17px;
    color:#fff;
}
.hero p{
    max-width:470px;
    font-size:14px;
    margin-bottom:25px;
}
.hero-actions{display:flex;gap:10px}
.outline-btn{
    display:inline-block;
    border:1px solid #f4511e;
    color:#fff;
    border-radius:6px;
    padding:10px 17px;
    font-size:14px;
    font-weight:700;
}
.hero-arrows{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    transform:translateY(-50%);
    display:flex;
    justify-content:space-between;
    pointer-events:none;
}
.hero-arrow{
    width:30px;height:30px;
    background:rgba(0,0,0,.45);
    display:grid;
    place-items:center;
    color:#fff;
}
.hero-dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
}
.hero-dots span{
    width:28px;height:4px;border-radius:4px;background:#fff;opacity:.8;
}
.hero-dots span.active{background:#f4511e}

/* =========================================================
   04. FIVE FEATURE STRIP
========================================================= */
.feature-strip{
    background:#fff;
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
}
.feature{
    min-height:112px;
    padding:20px 20px;
    text-align:center;
    border-right:1px solid #e1e6ec;
}
.feature:last-child{border-right:0}
.feature-icon{
    color:#ff511d;
    font-size:30px;
    margin-bottom:7px;
}
.feature h3{font-size:18px;margin-bottom:5px}
.feature p{
    color:#4c5c6e;
    font-size:13px;
    max-width:170px;
    margin:auto;
}

/* =========================================================
   05. ABOUT
========================================================= */
.about{
    padding:14px 0 8px;
}
.about-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:25px;
    align-items:center;
}
.about-image{
    height:370px;
    overflow:hidden;
    border-radius:5px;
}
.about-image img{height:100%;object-fit:cover}
.section-kicker{
    color:#f4511e;
    font-size:15px;
    font-weight:800;
    margin-bottom:7px;
}
.about h2,.section-heading h2{
    font-size:27px;
    line-height:1.05;
    margin-bottom:15px;
}
.about p{
    color:#42536a;
    font-size:14px;
    margin-bottom:14px;
}
.about .orange-btn{margin-top:3px}

/* =========================================================
   06. SERVICES
========================================================= */
.services{
    background:#f1f5f9;
    padding:15px 0 18px;
}
.section-heading{text-align:center;margin-bottom:14px}
.section-heading h2{font-size:27px; padding-bottom: 13px;}
.services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}
.service-card{
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 2px 7px rgba(0,0,0,.04);
    text-align:center;
    padding-bottom:12px;
}
.service-card img{
    height:100px;
    object-fit:cover;
}
.service-icon{
    color:#f4511e;
    font-size:19px;
    margin:7px 0 3px;
}
.service-card h3{
    font-size:17px;
    line-height:1.25;
    min-height:25px;
}
.learn{
    color:#f4511e;
    font-size:13px;
    margin-top:10px;
    display:block;
}

/* =========================================================
   07. FEATURED ODC / OWC
========================================================= */
.featured{
    min-height:175px;
    color:#fff;
    background:
      linear-gradient(90deg,#062747 0%,rgba(5,40,71,.92) 42%,rgba(5,40,71,.15) 100%),
      url("img/background-feature.png") center/cover no-repeat;
}
.featured-inner{
    min-height:175px;
    display:flex;
    align-items:center;
}
.featured-copy{max-width:550px}
.featured h2{
    font-size:27px;
    line-height:1.05;
    margin:5px 0 16px;
}
.featured p{font-size:13px;margin-bottom:10px}
.check-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px 30px;
    font-size:14px;
    margin-bottom:16px;
}
.check-grid li:before{
    content:"✓";
    color:#ff5722;
    font-weight:bold;
    margin-right:8px;
}

/* =========================================================
   08. INDUSTRIES
========================================================= */
.industries{
    padding:14px 0 15px;
    background:#fff;
}
.industry-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}
.industry-card{
    text-align:center;
    background:#f4f6f8;
    overflow:hidden;
}
.industry-card img{
    object-fit:contain;
}
.industry-card span{
    display:block;
    padding:5px 2px;
    font-size:17px;
    font-weight:700;
}

/* =========================================================
   09. PROJECT PROCESS
========================================================= */
.process{
    background:#eef4f8;
    padding:15px 0 18px;
}
.process-grid{
    display:grid;
    grid-template-columns:1.05fr 2.4fr;
    gap:30px;
    align-items:center;
}
.process-intro h2{
    font-size:27px;
    line-height:1.1;
    margin:2px 0 10px;
}
.process-intro p{
    font-size:13px;
    color:#465a70;
    max-width:250px;
}
.process-steps{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    position:relative;
}
.process-steps:before{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    top:14px;
    height:1px;
    background:#9bb5ca;
}
.step{position:relative;z-index:1}
.step-number{
    width:29px;height:29px;
    border-radius:50%;
    background:#09539b;
    color:#fff;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:700;
    margin-bottom:8px;
}
.step h3{font-size:15px;margin-bottom:2px}
.step p{
    font-size:12px;
    color:#526579;
    max-width:90px;
}

/* =========================================================
   10. FOOTER
========================================================= */
.footer{
    background:#062541;
    color:#fff;
}
.footer-main{padding:20px 0 16px}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.15fr;
    gap:25px;
}
.footer-logo{color:#fff}
.footer-logo span{color:#f4511e}
.footer-brand p{
    font-size:12px;
    margin:10px 0 10px;
    color:#d5e0eb;
}
.socials{display:flex;gap:8px}
.socials a{
    width:24px;height:24px;
    border:1px solid #7890a5;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:13px;
}
.footer h4{font-size:15px;margin-bottom:8px}
.footer li{
    color:#d8e2eb;
    font-size:12px;
    margin-bottom:3px;
}
.footer li i{
    color:#fff;
    margin-right:4px;
}
.contact-item{
    display:flex;
    gap:8px;
    font-size:12px;
    color:#d8e2eb;
    margin-bottom:7px;
}
.contact-item i{width:10px}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    background:#031b2d;
    padding:9px 0;
    font-size:10px;
    color:#c7d2dc;
}
.footer-bottom-inner{
    display:flex;
    justify-content:space-between;
}

/* =========================================================
   11. FLOATING BUTTONS
========================================================= */
.float-buttons{
    position:fixed;
    right:17px;
    bottom:18px;
    display:flex;
    flex-direction:column;
    gap:9px;
    z-index:100;
}
.float-btn{
    width:44px;height:44px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.22);
}
.call{background:#075ca8}
.whatsapp{background:#25d366}

/* =========================================================
   TABLET
========================================================= */
@media(max-width:1000px){
    .nav{gap:15px}
    .services-grid{grid-template-columns:repeat(4,1fr)}
    .industry-grid{grid-template-columns:repeat(4,1fr)}
    .footer-grid{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================
   MOBILE
========================================================= */
@media(max-width:767px){
    .container{width:92%}

    .topbar{
        height:auto;
        padding:6px 0;
    }
    .topbar-inner{
        flex-direction:column;
        gap:3px;
        text-align:center;
    }
    .top-links{display:none}
    .top-contact{
        gap:10px;
        font-size:9px;
    }

    .header{height:62px}
    .logo{font-size:23px}
    .logo small{font-size:6px;letter-spacing:2px}
    .menu-toggle{display:block}
    .nav{
        display:none;
        position:absolute;
        top:62px;
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        box-shadow:0 7px 15px rgba(0,0,0,.12);
    }
    .nav.active{display:flex}
    .nav a{
        width:100%;
        padding:12px 5%;
        border-bottom:1px solid #eee;
    }
    .nav .quote-btn{
        margin:12px 5%;
        width:auto;
    }

    .hero{
        min-height:440px;
        background-position:center;
    }
    .hero-content{
        min-height:440px;
        align-items:flex-end;
        padding:0 0 45px;
    }
    .hero-text{max-width:100%}
    .hero h1{font-size:31px}
    .hero p{font-size:12px}
    .hero-actions{flex-wrap:wrap}
    .hero-arrows{display:none}

    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .feature{
        min-height:125px;
        border-bottom:1px solid #e1e6ec;
    }
    .feature:nth-child(2n){border-right:0}
    .feature:last-child{
        grid-column:1/-1;
        border-bottom:0;
    }

    .about{padding:25px 0}
    .about-grid{
        grid-template-columns:2fr;
        gap:18px;
    }
    .about-image{height:230px}
    .about h2,.section-heading h2{font-size:22px}

    .services{padding:25px 0}
    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .service-card img{height:100px}
    .service-card h3{font-size:10px}

    .featured{
        min-height:430px;
        background-position:center;
    }
    .featured-inner{
        min-height:430px;
        align-items:flex-end;
        padding:30px 0;
    }
    .featured-copy{max-width:100%}
    .featured h2{font-size:24px}
    .check-grid{font-size:10px}

    .industry-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .industry-card img{height:95px}

    .process{padding:25px 0}
    .process-grid{
        grid-template-columns:1fr;
        gap:25px;
    }
    .process-steps{
        grid-template-columns:repeat(2,1fr);
        gap:25px 10px;
    }
    .process-steps:before{display:none}
    .step p{max-width:130px}

    .footer-main{padding:28px 0}
    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:25px 15px;
    }
    .footer-brand{grid-column:1/-1}
    .footer-bottom-inner{
        flex-direction:column;
        gap:5px;
        text-align:center;
    }

    .float-buttons{
        right:12px;
        bottom:12px;
    }
}

/* SMALL MOBILE */
@media(max-width:430px){
    .hero h1{font-size:28px}
    .hero{min-height:410px}
    .hero-content{min-height:410px}
    .feature-grid{grid-template-columns:1fr}
    .feature{
        border-right:0;
    }
    .feature:last-child{grid-column:auto}
    .services-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr}
    .footer-brand{grid-column:auto}
}