/* ============================================================
   DARTAI LOGISTICS — style.css
   Professional logistics brand stylesheet
   Author: DarTai Dev Team  |  Version: 2.0
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
    /* Brand Colors */
    --color-navy:        #0b1c26;
    --color-navy-mid:    #0f2233;
    --color-navy-light:  #1a3448;
    --color-gold:        #e8a020;
    --color-gold-dark:   #c8861a;
    --color-gold-glow:   rgba(232, 160, 32, 0.18);

    /* Neutral Palette */
    --color-white:       #ffffff;
    --color-off-white:   #f4f6f8;
    --color-text:        #2b2b2b;
    --color-text-muted:  #6b7b8a;
    --color-border:      #dde2e8;

    /* Typography */
    --font-display: 'Barlow Condensed', 'Cairo', sans-serif;
    --font-body:    'Cairo', 'Segoe UI', Tahoma, sans-serif;

    /* Spacing Scale */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  48px;
    --space-xl:  80px;

    /* Borders & Shadows */
    --radius-sm:  5px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:  0 6px 24px rgba(0,0,0,0.10);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.14);

    /* Transitions */
    --transition: 0.28s ease;

    /* Container Width */
    --container-max: 1200px;
}


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family:      var(--font-body);
    background-color: var(--color-off-white);
    color:            var(--color-text);
    line-height:      1.7;
    -webkit-font-smoothing: antialiased;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul { list-style: none; }


/* ============================================================
   3. LAYOUT UTILITY — .container
   ============================================================ */
.container {
    width:     90%;
    max-width: var(--container-max);
    margin:    0 auto;
}


/* ============================================================
   4. SHARED SECTION TYPOGRAPHY HELPERS
   ============================================================ */

/* Small eyebrow text above headings */
.section-eyebrow {
    display:         inline-block;
    font-family:     var(--font-display);
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  3px;
    text-transform:  uppercase;
    color:           var(--color-gold);
    background:      var(--color-gold-glow);
    padding:         4px 14px;
    border-radius:   50px;
    margin-bottom:   var(--space-sm);
}

.section-eyebrow.light {
    color:       var(--color-gold);
    background:  rgba(255, 255, 255, 0.08);
}

/* Decorative accent line beneath headings */
.about-divider {
    width:        60px;
    height:       3px;
    background:   var(--color-gold);
    border-radius: 2px;
    margin:       var(--space-sm) auto var(--space-lg);
}

.about-divider.light {
    background: rgba(232, 160, 32, 0.6);
}

/* Section h2 base style */
h2 {
    font-family: var(--font-display);
    font-size:   clamp(26px, 4vw, 38px);
    font-weight: 800;
    color:       var(--color-navy);
    line-height: 1.2;
}

.why-us h2 { color: var(--color-white); }


/* ============================================================
   5. SHARED BUTTON STYLES
   ============================================================ */
.btn {
    display:         inline-block;
    background:      var(--color-gold);
    color:           var(--color-white);
    padding:         13px 34px;
    border-radius:   var(--radius-sm);
    font-family:     var(--font-body);
    font-size:       15px;
    font-weight:     700;
    border:          none;
    cursor:          pointer;
    letter-spacing:  0.3px;
    transition:      background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
    background:   var(--color-gold-dark);
    transform:    translateY(-2px);
    box-shadow:   0 8px 24px rgba(200, 134, 26, 0.35);
}

.btn:active {
    transform:  translateY(0);
    box-shadow: none;
}

/* Hero variant — slightly larger with a glow */
.btn-hero {
    padding:   16px 42px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(232, 160, 32, 0.4);
}

/* Submit button — full-width in form */
.btn-submit {
    width:      100%;
    padding:    16px;
    font-size:  16px;
    margin-top: var(--space-xs);
}


/* ============================================================
   6. LANGUAGE SWITCHER BAR
   ============================================================ */
.lang-bar {
    background:    var(--color-navy);
    padding:       8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.lang-buttons {
    display:         flex;
    justify-content: center;
    gap:             8px;
    flex-wrap:       wrap;
}

.lang-btn {
    background:    transparent;
    border:        1px solid rgba(232, 160, 32, 0.45);
    color:         #b0bec5;
    padding:       4px 16px;
    border-radius: 50px;
    cursor:        pointer;
    font-family:   var(--font-body);
    font-size:     12px;
    font-weight:   600;
    letter-spacing: 0.4px;
    transition:    background var(--transition), color var(--transition), border-color var(--transition);
}

.lang-btn:hover,
.lang-btn.active {
    background:   var(--color-gold);
    border-color: var(--color-gold);
    color:        var(--color-white);
}


/* ============================================================
   7. HEADER & NAVIGATION
   ============================================================ */
header {
    background:  var(--color-navy-mid);
    color:       var(--color-white);
    padding:     0;
    position:    sticky;
    top:         0;
    z-index:     1000;
    transition:  box-shadow var(--transition);
}

/* Shadow added via JS on scroll */
header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          70px;
    gap:             var(--space-md);
}

/* — Logo — */
.logo-container {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.brand-logo {
    height:        44px;
    width:         auto;
    object-fit:    contain;
    background:    var(--color-white);
    padding:       3px 6px;
    border-radius: var(--radius-sm);
}

.logo-text {
    font-family:    var(--font-display);
    font-size:      22px;
    font-weight:    800;
    letter-spacing: 0.5px;
    color:          var(--color-white);
}

.logo-text span { color: var(--color-gold); }

/* — Main Nav — */
#main-nav ul {
    display: flex;
    gap:     var(--space-md);
    align-items: center;
}

#main-nav ul li a {
    font-size:      15px;
    font-weight:    600;
    color:          #c8d6e0;
    padding:        6px 2px;
    border-bottom:  2px solid transparent;
    transition:     color var(--transition), border-color var(--transition);
    white-space:    nowrap;
}

#main-nav ul li a:hover {
    color:        var(--color-white);
    border-color: var(--color-gold);
}

/* CTA nav item */
#main-nav ul li a.nav-cta {
    background:    var(--color-gold);
    color:         var(--color-white);
    padding:       8px 18px;
    border-radius: var(--radius-sm);
    border-bottom: none;
}

#main-nav ul li a.nav-cta:hover {
    background: var(--color-gold-dark);
}

/* — Hamburger Toggle (mobile only) — */
.nav-toggle {
    display:        none;
    flex-direction: column;
    justify-content: space-between;
    width:          28px;
    height:         20px;
    background:     transparent;
    border:         none;
    cursor:         pointer;
    padding:        0;
    flex-shrink:    0;
}

.nav-toggle span {
    display:       block;
    width:         100%;
    height:        2px;
    background:    var(--color-white);
    border-radius: 2px;
    transition:    transform var(--transition), opacity var(--transition);
}

/* Hamburger → X animation */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


/* ============================================================
   8. HERO SECTION
   ============================================================ */
.hero {
    background:  linear-gradient(145deg, var(--color-navy) 0%, #0e2a3d 50%, #162f42 100%);
    color:       var(--color-white);
    padding-top: var(--space-xl);
    position:    relative;
    overflow:    hidden;
}

/* Subtle texture overlay */
.hero-overlay {
    position:   absolute;
    inset:      0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Two-column layout: text | maps */
.hero-layout {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-lg);
    position:        relative;
    z-index:         1;
}

/* — Hero Text Side — */
.hero-text-side { flex: 1; }

[dir="rtl"] .hero-text-side { text-align: right; }
[dir="ltr"] .hero-text-side { text-align: left; }

.hero-badge {
    display:        inline-block;
    font-family:    var(--font-display);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          var(--color-gold);
    border:         1px solid rgba(232, 160, 32, 0.4);
    padding:        5px 14px;
    border-radius:  50px;
    margin-bottom:  var(--space-sm);
}

.hero-text-side h1 {
    font-family:   var(--font-display);
    font-size:     clamp(28px, 4.5vw, 48px);
    font-weight:   800;
    line-height:   1.2;
    margin-bottom: var(--space-sm);
    color:         var(--color-white);
}

.hero-text-side p {
    font-size:     17px;
    color:         #9ab5c6;
    margin-bottom: var(--space-md);
    max-width:     520px;
    line-height:   1.8;
}

[dir="rtl"] .hero-text-side p { max-width: 100%; }

/* — Hero Maps/Graphics Side — */
.hero-graphics-side {
    flex:            1.1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-sm);
    background:      rgba(255,255,255,0.04);
    border:          1px solid rgba(255,255,255,0.08);
    border-radius:   var(--radius-lg);
    padding:         28px 24px;
}

.map-wrapper {
    flex:       1;
    text-align: center;
}

.hero-map {
    max-width:  100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    filter:     drop-shadow(0 6px 20px rgba(0,0,0,0.4));
    transition: transform var(--transition);
}

.hero-map:hover { transform: scale(1.05); }

.map-label {
    font-family:    var(--font-display);
    font-size:      11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.4);
    margin-top:     10px;
}

/* Animated shipping arrow */
.shipping-arrow {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.arrow-icon {
    font-size:  28px;
    color:      var(--color-gold);
    animation:  arrowPulse 1.8s ease-in-out infinite;
    display:    block;
}

@keyframes arrowPulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    50%  { transform: scale(1.25); opacity: 1;   }
    100% { transform: scale(1);    opacity: 0.7; }
}

/* — Hero Stats Bar — */
.hero-stats {
    margin-top:  var(--space-lg);
    background:  rgba(0,0,0,0.3);
    border-top:  1px solid rgba(255,255,255,0.07);
    padding:     20px 0;
    position:    relative;
    z-index:     1;
}

.hero-stats-inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-lg);
    flex-wrap:       wrap;
}

.stat-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            2px;
}

.stat-num {
    font-family:    var(--font-display);
    font-size:      32px;
    font-weight:    800;
    color:          var(--color-gold);
    line-height:    1;
}

.stat-lbl {
    font-size:      12px;
    letter-spacing: 1px;
    color:          rgba(255,255,255,0.5);
    text-transform: uppercase;
}

.stat-divider {
    width:      1px;
    height:     40px;
    background: rgba(255,255,255,0.12);
}


/* ============================================================
   9. ABOUT SECTION
   ============================================================ */
.about {
    padding:    var(--space-xl) 0;
    background: var(--color-white);
    text-align: center;
}

.about-inner { max-width: 850px; margin: 0 auto; }

.about p {
    font-size:   17px;
    color:       var(--color-text-muted);
    line-height: 1.9;
}


/* ============================================================
   10. SERVICES SECTION
   ============================================================ */
.services {
    padding:    var(--space-xl) 0;
    background: var(--color-off-white);
    text-align: center;
}

.services-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   var(--space-md);
    margin-top:            var(--space-lg);
}

.service-card {
    background:    var(--color-white);
    padding:       36px 28px;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-sm);
    border-top:    4px solid var(--color-navy-light);
    text-align:    center;
    transition:    transform var(--transition), border-top-color var(--transition), box-shadow var(--transition);
}

.service-card:hover {
    transform:       translateY(-6px);
    border-top-color: var(--color-gold);
    box-shadow:      var(--shadow-md);
}

.service-icon {
    font-size:     40px;
    margin-bottom: var(--space-sm);
    display:       block;
}

.service-card h3 {
    font-family:   var(--font-display);
    font-size:     20px;
    font-weight:   700;
    color:         var(--color-navy);
    margin-bottom: var(--space-xs);
}

.service-card p {
    font-size:   15px;
    color:       var(--color-text-muted);
    line-height: 1.7;
}


/* ============================================================
   11. WHY US SECTION
   ============================================================ */
.why-us {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 100%);
    color:      var(--color-white);
    padding:    var(--space-xl) 0;
    text-align: center;
}

.features {
    display:    flex;
    flex-direction: column;
    gap:        14px;
    max-width:  760px;
    margin:     var(--space-lg) auto 0;
}

[dir="rtl"] .features { text-align: right; }
[dir="ltr"] .features { text-align: left; }

.feature {
    font-size:   16px;
    line-height: 1.7;
    background:  rgba(255,255,255,0.06);
    padding:     20px 22px;
    border-radius: var(--radius-sm);
    border-left:   4px solid var(--color-gold);
    transition:   background var(--transition);
}

.feature:hover { background: rgba(255,255,255,0.10); }

[dir="rtl"] .feature {
    border-left:   none;
    border-right:  4px solid var(--color-gold);
}

.feature strong { color: var(--color-gold); }


/* ============================================================
   12. QUOTE / CONTACT FORM SECTION
   ============================================================ */
.quote {
    padding:    var(--space-xl) 0;
    background: var(--color-off-white);
    text-align: center;
}

/* Form container */
#quote-form {
    background:    var(--color-white);
    padding:       44px 48px;
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-md);
    max-width:     680px;
    margin:        0 auto;
    text-align:    start;   /* auto-respects dir attribute */
}

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

.form-group label {
    display:      block;
    margin-bottom: 8px;
    font-size:    14px;
    font-weight:  700;
    color:        #3d4f5c;
    letter-spacing: 0.2px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width:         100%;
    padding:       12px 16px;
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family:   var(--font-body);
    font-size:     15px;
    color:         var(--color-text);
    background:    var(--color-off-white);
    transition:    border-color var(--transition), box-shadow var(--transition), background var(--transition);
    appearance:    none;
    -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:      none;
    border-color: var(--color-gold);
    background:   var(--color-white);
    box-shadow:   0 0 0 3px rgba(232, 160, 32, 0.15);
}

.form-group textarea { resize: vertical; min-height: 110px; }

/* Custom select arrow */
.form-group select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7b8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: left 14px center;
    padding-left:        36px;
    cursor:              pointer;
}

[dir="rtl"] .form-group select {
    background-position: right 14px center;
    padding-left:        16px;
    padding-right:       36px;
}


/* ============================================================
   13. FOOTER
   ============================================================ */
footer {
    background:  var(--color-navy);
    color:       rgba(255,255,255,0.55);
    padding:     28px 0;
}

.footer-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-sm);
}

.footer-brand {
    font-family:    var(--font-display);
    font-size:      18px;
    font-weight:    800;
    color:          var(--color-white);
    letter-spacing: 0.5px;
}

.footer-brand span { color: var(--color-gold); }

#footer-text { font-size: 13px; }


/* ============================================================
   14. RESPONSIVE — Tablet (max 992px)
   ============================================================ */
@media (max-width: 992px) {

    .hero-layout {
        flex-direction: column;
        text-align:     center;
    }

    [dir="rtl"] .hero-text-side,
    [dir="ltr"] .hero-text-side {
        text-align: center;
    }

    .hero-text-side p { max-width: 100%; }

    .hero-graphics-side { width: 100%; }

    .hero-stats-inner { gap: var(--space-md); }
}


/* ============================================================
   15. RESPONSIVE — Mobile (max 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* — Mobile Header — */
    .header-inner { height: 62px; }

    /* Show hamburger, hide nav by default */
    .nav-toggle { display: flex; }

    #main-nav {
        position:   absolute;
        top:        62px;
        left:       0;
        right:      0;
        background: var(--color-navy-mid);
        border-top: 1px solid rgba(255,255,255,0.07);
        max-height: 0;
        overflow:   hidden;
        transition: max-height 0.35s ease;
        z-index:    999;
    }

    #main-nav.nav-open { max-height: 400px; }

    #main-nav ul {
        flex-direction: column;
        gap:            0;
        padding:        var(--space-sm) 0;
        align-items:    stretch;
    }

    #main-nav ul li a {
        display:     block;
        padding:     14px var(--space-md);
        font-size:   16px;
        border-bottom: none;
    }

    #main-nav ul li a:hover { background: rgba(255,255,255,0.05); }

    #main-nav ul li a.nav-cta {
        margin:        var(--space-xs) var(--space-md);
        border-radius: var(--radius-sm);
        text-align:    center;
    }

    /* — Mobile Hero — */
    .hero { padding-top: var(--space-lg); }

    .hero-text-side h1 { font-size: 26px; }

    .hero-graphics-side {
        padding:    var(--space-sm);
        gap:        var(--space-xs);
    }

    .hero-map { max-height: 130px; }

    .stat-divider { display: none; }

    .hero-stats-inner {
        gap:             var(--space-sm);
        justify-content: space-around;
    }

    /* — Mobile Form — */
    #quote-form {
        padding:       28px 20px;
        border-radius: var(--radius-md);
    }

    /* — Mobile Footer — */
    .footer-inner { justify-content: center; text-align: center; }
}


/* ============================================================
   16. RESPONSIVE — Small Mobile (max 480px)
   ============================================================ */
@media (max-width: 480px) {

    .hero-graphics-side { flex-direction: column; }

    .shipping-arrow { transform: rotate(90deg); }

    [dir="rtl"] .shipping-arrow { transform: rotate(90deg); }

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

    .stat-num { font-size: 26px; }
}