/*
Theme Name:  Cargo
Theme URI:   https://muzamilcargo.com
Author:      Muzamil
Author URI:  https://muzamilcargo.com
Description: Professional Cargo & Logistics WordPress Theme by Muzamil. Includes Hero, Services, Tracking, Stats, Why Us, Process and Footer sections.
Version:     1.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cargo-theme
Tags: logistics, cargo, business, professional, custom-colors, full-width-template
*/

/* ============================================================
   CARGO PARENT THEME — CSS VARIABLES
   ============================================================ */
:root {
  --color-primary:       #f97316;
  --color-primary-dark:  #c2530a;
  --color-primary-light: #fdba74;
  --color-secondary:     #1e3a5f;
  --color-secondary-dark:#0f2040;
  --color-secondary-light:#2e5a8f;
  --color-bg:            #0d1117;
  --color-bg-alt:        #111820;
  --color-bg-card:       #161e2a;
  --color-surface:       #1e2a38;
  --color-text:          #e8edf2;
  --color-text-muted:    #7a8fa0;
  --color-text-subtle:   #3a4a58;
  --color-border:        rgba(249,115,22,0.12);
  --color-border-strong: rgba(249,115,22,0.35);
  --font-display:        'Barlow Condensed', sans-serif;
  --font-body:           'Barlow', sans-serif;
  --size-xs:    10px;
  --size-sm:    13px;
  --size-base:  15px;
  --size-md:    18px;
  --size-lg:    24px;
  --size-xl:    36px;
  --size-2xl:   52px;
  --size-3xl:   76px;
  --size-4xl:   110px;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;
  --leading-tight:  1.0;
  --leading-snug:   1.25;
  --leading-normal: 1.65;
  --leading-loose:  1.9;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0.02em;
  --tracking-wide:     0.12em;
  --tracking-wider:    0.25em;
  --tracking-widest:   0.4em;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --section-x:  70px;
  --section-y:  100px;
  --radius-none:0px; --radius-sm:3px; --radius-md:6px;
  --radius-lg:14px; --radius-full:9999px;
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.4);
  --shadow-md:    0 8px 30px rgba(0,0,0,0.5);
  --shadow-lg:    0 20px 60px rgba(0,0,0,0.65);
  --shadow-orange:0 0 40px rgba(249,115,22,0.18);
  --tx-fast:  all 0.2s ease;
  --tx-base:  all 0.35s ease;
  --tx-slow:  all 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  --z-nav: 100;
}

/* ── BASE RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--size-base);line-height:var(--leading-normal);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;border:none;outline:none;}
img{display:block;width:100%;}

/* ── TYPOGRAPHY ── */
.t-hero{font-family:var(--font-display);font-size:var(--size-4xl);font-weight:var(--weight-black);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-transform:uppercase;}
.t-heading{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);text-transform:uppercase;}
.t-eyebrow{font-family:var(--font-body);font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-primary);}
.t-body{font-family:var(--font-body);font-size:var(--size-sm);font-weight:var(--weight-light);line-height:var(--leading-loose);color:var(--color-text-muted);}
.t-accent{color:var(--color-primary);}

/* ── LAYOUT ── */
.section{padding:var(--section-y) var(--section-x);}
.section--alt{background:var(--color-bg-alt);}
.divider{height:1px;margin:0 var(--section-x);background:linear-gradient(to right,transparent,var(--color-border-strong),transparent);}
.eyebrow-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);}
.eyebrow-line{width:36px;height:2px;background:var(--color-primary);}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-body);font-size:var(--size-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wider);text-transform:uppercase;transition:var(--tx-base);position:relative;overflow:hidden;border-radius:var(--radius-sm);}
.btn--primary{padding:var(--space-4) var(--space-10);background:var(--color-primary);color:#fff;box-shadow:var(--shadow-orange);}
.btn--primary::before{content:'';position:absolute;inset:0;background:var(--color-primary-dark);transform:translateX(-100%);transition:var(--tx-base);}
.btn--primary:hover::before{transform:translateX(0);}
.btn--primary span,.btn--primary svg{position:relative;z-index:1;}
.btn--ghost{padding:var(--space-4) var(--space-10);background:transparent;color:var(--color-text);border:1px solid var(--color-border-strong);}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary);}
.btn--link{color:var(--color-text-muted);padding:0;font-size:var(--size-xs);}
.btn--link::after{content:'';display:block;width:28px;height:2px;background:var(--color-primary);transition:width var(--tx-base);}
.btn--link:hover{color:var(--color-primary);}
.btn--link:hover::after{width:50px;}

/* ── SERVICE CARD ── */
.service-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-8);transition:var(--tx-slow);position:relative;overflow:hidden;}
.service-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--color-primary);transition:height 0.4s ease;}
.service-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-orange);transform:translateY(-4px);}
.service-card:hover::before{height:100%;}
.service-card__icon{width:52px;height:52px;background:rgba(249,115,22,0.1);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:var(--space-5);transition:var(--tx-base);}
.service-card:hover .service-card__icon{background:var(--color-primary);}
.service-card__title{font-family:var(--font-display);font-size:var(--size-md);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-tight);margin-bottom:var(--space-3);}
.service-card__text{font-size:var(--size-sm);color:var(--color-text-muted);line-height:var(--leading-loose);}

/* ── STAT BOX ── */
.stat-box{text-align:center;padding:var(--space-8) var(--space-6);border-left:1px solid var(--color-border);}
.stat-box:first-child{border-left:none;}
.stat-box__num{display:block;font-family:var(--font-display);font-size:var(--size-3xl);font-weight:var(--weight-black);color:var(--color-primary);line-height:1;letter-spacing:var(--tracking-tight);}
.stat-box__label{font-size:var(--size-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);margin-top:var(--space-2);display:block;}

/* ── NAV ── */
.cargo-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);background:rgba(13,17,23,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);}
.nav__top{background:var(--color-secondary-dark);padding:var(--space-2) var(--section-x);display:flex;align-items:center;justify-content:space-between;}
.nav__top-text{font-size:var(--size-xs);letter-spacing:var(--tracking-wide);color:var(--color-text-muted);}
.nav__top-contact{display:flex;gap:var(--space-8);font-size:var(--size-xs);color:var(--color-text-muted);}
.nav__top-contact span{color:var(--color-primary);margin-right:var(--space-2);}
.nav__main{padding:var(--space-4) var(--section-x);display:flex;align-items:center;justify-content:space-between;}
.nav__logo{display:flex;align-items:center;gap:var(--space-3);}
.nav__logo-icon{width:38px;height:38px;background:var(--color-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:20px;}
.nav__logo-text{font-family:var(--font-display);font-size:var(--size-xl);font-weight:var(--weight-black);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1;}
.nav__logo-text span{display:block;font-size:var(--size-xs);font-weight:var(--weight-regular);letter-spacing:var(--tracking-widest);color:var(--color-text-muted);}
.nav__links{display:flex;gap:var(--space-8);}
.nav__links a{font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--color-text);opacity:0.7;transition:var(--tx-fast);position:relative;padding-bottom:2px;}
.nav__links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--color-primary);transition:width var(--tx-base);}
.nav__links a:hover{opacity:1;color:var(--color-primary);}
.nav__links a:hover::after{width:100%;}
.nav__cta{display:flex;gap:var(--space-3);align-items:center;}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px var(--section-x) var(--section-y);overflow:hidden;}
.hero__bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 75% 50%,rgba(249,115,22,0.06) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 10% 80%,rgba(30,58,95,0.2) 0%,transparent 50%),linear-gradient(160deg,var(--color-bg) 0%,#0a1020 100%);}
.hero__bg::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(249,115,22,0.015) 40px,rgba(249,115,22,0.015) 41px);}
.hero__line{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--color-border-strong),transparent);pointer-events:none;}
.hero__line--left{left:var(--section-x);}
.hero__line--right{right:var(--section-x);}
.hero__content{position:relative;z-index:2;max-width:700px;opacity:0;transform:translateY(30px);animation:fadeUp 1s ease 0.3s forwards;}
.hero__title{font-size:clamp(60px,7vw,var(--size-4xl));margin-bottom:var(--space-6);}
.hero__title em{font-style:italic;color:var(--color-primary);}
.hero__title .outline{-webkit-text-stroke:2px var(--color-primary);color:transparent;}
.hero__actions{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-10);}
.hero__right{position:absolute;right:0;top:0;bottom:0;width:44%;opacity:0;animation:fadeIn 1.4s ease 0.5s forwards;}
.hero__visual{position:absolute;top:10%;right:var(--section-x);bottom:10%;width:calc(100% - var(--section-x) * 2);background:var(--color-bg-card);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero__visual::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(249,115,22,0.08) 0%,transparent 70%);}
.hero__visual-icon{font-size:120px;opacity:0.12;position:relative;z-index:1;}
.hero__visual-badge{position:absolute;bottom:var(--space-6);left:var(--space-6);background:var(--color-primary);padding:var(--space-4) var(--space-6);border-radius:var(--radius-sm);}
.hero__visual-badge-num{font-family:var(--font-display);font-size:var(--size-2xl);font-weight:var(--weight-black);color:#fff;line-height:1;}
.hero__visual-badge-text{font-size:var(--size-xs);letter-spacing:var(--tracking-wide);color:rgba(255,255,255,0.7);margin-top:2px;}

/* ── TRACKING ── */
.tracking-section{padding:var(--space-12) var(--section-x);background:var(--color-secondary-dark);border-top:2px solid var(--color-primary);}
.tracking-inner{display:flex;align-items:center;gap:var(--space-8);}
.tracking-label{font-family:var(--font-display);font-size:var(--size-lg);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-tight);white-space:nowrap;color:#fff;}
.tracking-label span{color:var(--color-primary);}
.track-form{background:var(--color-bg-card);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-6);display:flex;gap:var(--space-3);align-items:center;flex:1;}
.track-form__input{flex:1;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);color:var(--color-text);font-family:var(--font-body);font-size:var(--size-sm);outline:none;transition:var(--tx-fast);}
.track-form__input::placeholder{color:var(--color-text-subtle);}
.track-form__input:focus{border-color:var(--color-primary);}

/* ── STATS STRIP ── */
.stats-strip{padding:var(--space-12) var(--section-x);background:var(--color-secondary-dark);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(30,58,95,0.5);border-bottom:1px solid rgba(30,58,95,0.5);}

/* ── SERVICES GRID ── */
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-16);}

/* ── WHY US ── */
.why-us{padding:var(--section-y) var(--section-x);background:var(--color-bg-alt);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-20);align-items:center;}
.why-us__visual{position:relative;height:520px;}
.why-us__main-box{position:absolute;top:0;left:0;right:var(--space-12);bottom:var(--space-12);background:var(--color-bg-card);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:100px;opacity:0.12;overflow:hidden;}
.why-us__accent{position:absolute;bottom:0;right:0;width:160px;height:160px;background:var(--color-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);}
.why-us__accent-num{font-family:var(--font-display);font-size:var(--size-3xl);font-weight:var(--weight-black);color:#fff;line-height:1;}
.why-us__accent-text{font-size:var(--size-xs);font-weight:var(--weight-semi);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:rgba(255,255,255,0.7);}
.why-us__list{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-8);}
.why-item{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:var(--tx-base);}
.why-item:hover{border-color:var(--color-border-strong);}
.why-item__icon{width:42px;height:42px;flex-shrink:0;background:rgba(249,115,22,0.1);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;transition:var(--tx-base);}
.why-item:hover .why-item__icon{background:var(--color-primary);}
.why-item__title{font-family:var(--font-display);font-size:var(--size-md);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-tight);margin-bottom:var(--space-1);}
.why-item__text{font-size:var(--size-sm);color:var(--color-text-muted);line-height:var(--leading-loose);}

/* ── PROCESS ── */
.process{padding:var(--section-y) var(--section-x);background:var(--color-bg);}
.process__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--space-16);position:relative;}
.process__steps::before{content:'';position:absolute;top:26px;left:10%;right:10%;height:2px;background:linear-gradient(to right,var(--color-primary),var(--color-secondary-light));}
.process__step{text-align:center;padding:0 var(--space-5);position:relative;z-index:1;}
.process__step-num{width:52px;height:52px;background:var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--size-md);font-weight:var(--weight-black);color:#fff;margin:0 auto var(--space-6);border:3px solid var(--color-bg);}
.process__step-title{font-family:var(--font-display);font-size:var(--size-md);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-tight);margin-bottom:var(--space-2);}
.process__step-text{font-size:var(--size-sm);color:var(--color-text-muted);line-height:var(--leading-loose);}

/* ── FOOTER ── */
.cargo-footer{background:var(--color-secondary-dark);border-top:2px solid var(--color-primary);}
.footer__main{padding:var(--space-16) var(--section-x);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-16);}
.footer__brand-logo{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);}
.footer__brand-icon{width:42px;height:42px;background:var(--color-primary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:22px;}
.footer__brand-name{font-family:var(--font-display);font-size:var(--size-xl);font-weight:var(--weight-black);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:1;}
.footer__brand-name span{display:block;font-size:var(--size-xs);font-weight:var(--weight-regular);letter-spacing:var(--tracking-widest);color:var(--color-text-muted);}
.footer__desc{font-size:var(--size-sm);color:var(--color-text-muted);line-height:var(--leading-loose);max-width:280px;}
.footer__col-title{font-size:var(--size-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-6);}
.footer__links{display:flex;flex-direction:column;gap:var(--space-3);}
.footer__links a{font-size:var(--size-sm);color:var(--color-text-muted);transition:var(--tx-fast);}
.footer__links a:hover{color:var(--color-primary);padding-left:var(--space-2);}
.footer__contact-item{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-4);}
.footer__contact-icon{color:var(--color-primary);font-size:var(--size-md);flex-shrink:0;}
.footer__contact-text{font-size:var(--size-sm);color:var(--color-text-muted);line-height:var(--leading-snug);}
.footer__bottom{padding:var(--space-5) var(--section-x);border-top:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;}
.footer__copy{font-size:var(--size-xs);color:var(--color-text-subtle);letter-spacing:var(--tracking-normal);}
.footer__socials{display:flex;gap:var(--space-3);}
.footer__social{width:34px;height:34px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--size-sm);font-weight:var(--weight-bold);color:var(--color-text-muted);transition:var(--tx-fast);}
.footer__social:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}
.reveal-delay-4{transition-delay:.4s;}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  :root{--section-x:32px;--size-4xl:76px;}
  .hero__right{display:none;}
  .services__grid{grid-template-columns:1fr 1fr;}
  .stats-strip{grid-template-columns:1fr 1fr;}
  .process__steps{grid-template-columns:1fr 1fr;gap:40px;}
  .process__steps::before{display:none;}
  .why-us{grid-template-columns:1fr;}
  .footer__main{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  :root{--section-x:20px;--section-y:60px;--size-4xl:52px;}
  .services__grid{grid-template-columns:1fr;}
  .footer__main{grid-template-columns:1fr;}
  .nav__links,.nav__cta{display:none;}
  .tracking-inner{flex-direction:column;}
}