/* ============================================================================
   شركة البدري لنقل — El Badry Transport Company
   style.css — Mobile-first, RTL (dir="rtl"), responsive 320px → 1920px

   TABLE OF CONTENTS
   01. Design Tokens
   02. Reset & Base
   03. Typography & Utilities
   04. Buttons
   05. Header / Navbar / Mobile Drawer
   06. Hero
   07. Services
   08. Why Choose Us
   09. Stats Counters
   10. How It Works
   11. Global Network & Partners
   12. Gallery + Lightbox
   13. Testimonials
   14. Pricing
   15. Contact & Form
   16. Footer
   17. Floating Actions (WhatsApp / Back-to-top)
   18. Responsive Breakpoints
   19. Motion & Print Preferences
   ========================================================================== */

/* ============================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root{
    /* Brand colors */
    --navy:          #0B1F3A;   /* Primary  — trust / maritime */
    --navy-700:      #12294a;
    --navy-900:      #060f1e;
    --gold:          #F5A623;   /* Accent   — CTA / premium */
    --gold-dark:     #d98c0d;
    --sea:           #1B6CA8;   /* Secondary — shipping visuals */
    --white:         #FFFFFF;
    --bg:            #F5F7FA;   /* Alternating background */
    --text:          #1A1A1A;
    --muted:         #6B7280;
    --line:          #E5E9F0;
    --wa:            #25D366;   /* WhatsApp green */
    --danger:        #dc2626;
    --success:       #16a34a;

    /* Typography */
    --font-ar: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-en: 'Poppins', var(--font-ar);

    /* Layout */
    --maxw:          1200px;
    --radius:        14px;
    --radius-lg:     22px;
    --radius-pill:   999px;
    --header-h:      72px;

    /* Effects */
    --shadow-sm:  0 2px 10px rgba(11,31,58,.06);
    --shadow:     0 10px 30px rgba(11,31,58,.10);
    --shadow-lg:  0 22px 55px rgba(11,31,58,.18);
    --transition: .3s cubic-bezier(.4,0,.2,1);
}

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    scroll-padding-top: calc(var(--header-h) + 10px);
}

body{
    font-family:var(--font-ar);
    font-size:1rem;
    line-height:1.8;
    color:var(--text);
    background:var(--white);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; border:0; }
a{ color:inherit; text-decoration:none; transition:color var(--transition); }
ul,ol{ list-style:none; }
button,input,select,textarea{
    font:inherit; color:inherit; background:none; border:none; outline:none;
}
button{ cursor:pointer; }
figure{ margin:0; }

:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:3px;
    border-radius:4px;
}

::selection{ background:var(--gold); color:var(--navy); }

/* Skip link (accessibility) */
.skip-link{
    position:absolute; inset-inline-start:50%; transform:translateX(50%);
    top:-100px; z-index:2000;
    background:var(--navy); color:#fff; padding:.75rem 1.5rem;
    border-radius:0 0 10px 10px; font-weight:700;
    transition:top var(--transition);
}
.skip-link:focus{ top:0; }

/* ============================================================================
   03. TYPOGRAPHY & UTILITIES
   ========================================================================== */
h1,h2,h3,h4{ font-weight:800; line-height:1.35; color:var(--navy); }
h1{ font-size:clamp(1.75rem,5.2vw,3.25rem); font-weight:900; }
h2{ font-size:clamp(1.5rem,3.6vw,2.4rem); }
h3{ font-size:clamp(1.05rem,2.2vw,1.25rem); }

.container{
    width:100%;
    max-width:var(--maxw);
    margin-inline:auto;
    padding-inline:1rem;
}

.section{ padding:64px 0; position:relative; }
.section-alt{ background:var(--bg); }

.section-head{
    max-width:760px;
    margin:0 auto 40px;
    text-align:center;
}
.section-tag{
    display:inline-block;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--sea);
    background:rgba(27,108,168,.10);
    border:1px solid rgba(27,108,168,.22);
    padding:.35rem 1rem;
    border-radius:var(--radius-pill);
    margin-bottom:14px;
}
.section-tag-light{
    color:var(--gold);
    background:rgba(245,166,35,.12);
    border-color:rgba(245,166,35,.35);
}
.section-head h2{ margin-bottom:12px; }
.section-head p{ color:var(--muted); font-size:1.02rem; }

/* ============================================================================
   04. BUTTONS
   ========================================================================== */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    font-weight:700;
    font-size:.95rem;
    line-height:1;
    padding:.85rem 1.6rem;
    border-radius:var(--radius-pill);
    border:2px solid transparent;
    text-align:center;
    white-space:nowrap;
    transition:transform var(--transition), box-shadow var(--transition),
               background-color var(--transition), color var(--transition),
               border-color var(--transition);
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }

.btn-sm{ padding:.6rem 1.1rem; font-size:.85rem; }
.btn-lg{ padding:1rem 1.9rem; font-size:1.02rem; }
.btn-block{ display:flex; width:100%; }

.btn-gold{
    background:var(--gold);
    color:var(--navy);
    box-shadow:0 10px 24px rgba(245,166,35,.32);
}
.btn-gold:hover{ background:var(--gold-dark); color:var(--navy); box-shadow:0 14px 30px rgba(245,166,35,.42); }

.btn-primary{
    background:var(--navy); color:#fff;
    box-shadow:0 10px 24px rgba(11,31,58,.25);
}
.btn-primary:hover{ background:var(--navy-700); }

.btn-whatsapp{
    background:var(--wa); color:#fff;
    box-shadow:0 10px 24px rgba(37,211,102,.30);
}
.btn-whatsapp:hover{ background:#1ebe5b; }

.btn-outline-light{
    border-color:rgba(255,255,255,.65);
    color:#fff;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(4px);
}
.btn-outline-light:hover{ background:#fff; color:var(--navy); border-color:#fff; }

.btn-outline-navy{
    border-color:var(--navy); color:var(--navy); background:transparent;
}
.btn-outline-navy:hover{ background:var(--navy); color:#fff; }

.btn-outline{
    border-color:var(--gold); color:var(--navy); background:transparent;
}
.btn-outline:hover{ background:var(--gold); }

.btn[disabled]{ opacity:.7; pointer-events:none; }

/* ============================================================================
   05. HEADER / NAVBAR / MOBILE DRAWER
   ========================================================================== */
#header{
    position:fixed;
    top:0; inset-inline:0;
    z-index:1000;
    background:rgba(11,31,58,.30);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:background var(--transition), box-shadow var(--transition),
               border-color var(--transition), height var(--transition);
}
#header.scrolled{
    background:rgba(11,31,58,.94);
    box-shadow:0 6px 26px rgba(0,0,0,.28);
    border-bottom-color:rgba(245,166,35,.25);
}

.header-container{
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:1rem;
}

/* --- Logo --- */
.logo{ display:flex; align-items:center; gap:.6rem; margin-inline-end:auto; }
.logo-mark{
    width:42px; height:42px; flex:0 0 42px;
    display:grid; place-items:center;
    background:linear-gradient(135deg,var(--gold),#ffca6a);
    color:var(--navy);
    border-radius:12px;
    font-size:1.15rem;
    box-shadow:0 6px 16px rgba(245,166,35,.35);
}
.logo-text{ display:flex; flex-direction:column; line-height:1.2; }
.logo-text strong{ color:#fff; font-size:1.02rem; font-weight:800; }
.logo-text small{
    font-family:var(--font-en);
    color:var(--gold);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.8px;
    text-transform:uppercase;
}

/* --- Desktop nav --- */
#navbar ul{ display:flex; align-items:center; gap:.15rem; }
#navbar a{
    display:block;
    padding:.55rem .8rem;
    color:rgba(255,255,255,.88);
    font-size:.93rem;
    font-weight:600;
    border-radius:var(--radius-pill);
    position:relative;
}
#navbar a::after{
    content:"";
    position:absolute;
    inset-inline:.8rem; bottom:.28rem;
    height:2px; width:auto;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--transition);
}
#navbar a:hover,#navbar a.active{ color:#fff; }
#navbar a:hover::after,#navbar a.active::after{ transform:scaleX(1); }

.header-cta .btn{ box-shadow:0 8px 20px rgba(245,166,35,.28); }

/* --- Language toggle --- */
.lang-toggle{
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid rgba(255,255,255,.25); border-radius:8px;
    background:rgba(255,255,255,.08); color:#fff;
    padding:8px 14px; cursor:pointer; font-weight:700; font-size:14px;
    font-family:inherit; transition:background .25s;
}
.lang-toggle:hover{ background:rgba(255,255,255,.18); }

/* English mode: Latin-first typography (Cairo already covers Arabic) */
html[lang="en"] body{ font-family:'Poppins','Cairo',sans-serif; }

/* --- Hamburger (hidden on desktop) --- */
.menu-toggle{
    display:none;
    width:44px; height:44px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:10px;
    background:rgba(255,255,255,.10);
}
.menu-toggle .bar{
    display:block;
    width:22px; height:2.5px;
    background:#fff;
    border-radius:2px;
    transition:transform var(--transition), opacity var(--transition);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.nav-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    z-index:998;
    opacity:0;
    transition:opacity var(--transition);
}
.nav-overlay.show{ opacity:1; }

/* ============================================================================
   06. HERO
   ========================================================================== */
.hero{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    padding:calc(var(--header-h) + 48px) 0 90px;
    overflow:hidden;
    background:var(--navy-900);
}
.hero-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transform:scale(1.06);
    animation:heroZoom 18s ease-in-out infinite alternate;
}
.hero-overlay{
    position:absolute; inset:0;
    background:
        linear-gradient(to left, rgba(11,31,58,.55), rgba(11,31,58,.92)),
        linear-gradient(to top, rgba(6,15,30,.95) 0%, rgba(6,15,30,0) 55%);
}
@keyframes heroZoom{ from{ transform:scale(1.06) } to{ transform:scale(1.16) } }

.hero-content{ position:relative; z-index:2; max-width:940px; }

.hero-eyebrow{
    display:inline-block;
    font-family:var(--font-en);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gold);
    background:rgba(245,166,35,.12);
    border:1px solid rgba(245,166,35,.35);
    padding:.4rem 1.1rem;
    border-radius:var(--radius-pill);
    margin-bottom:1.1rem;
}
.hero h1{
    color:#fff;
    margin-bottom:1.1rem;
    text-shadow:0 4px 24px rgba(0,0,0,.45);
}
.hero-sub{
    color:rgba(255,255,255,.90);
    font-size:clamp(1rem,2.2vw,1.18rem);
    max-width:820px;
    margin-bottom:2rem;
    text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.hero-btns{
    display:flex;
    flex-wrap:wrap;
    gap:.85rem;
    margin-bottom:2.4rem;
}

/* --- Trust badges --- */
.trust-badges{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem .7rem;
}
.trust-badges li{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    font-size:.83rem;
    font-weight:600;
    color:#fff;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.20);
    backdrop-filter:blur(6px);
    padding:.45rem .85rem;
    border-radius:var(--radius-pill);
    transition:background var(--transition), border-color var(--transition);
}
.trust-badges li:hover{ background:rgba(245,166,35,.20); border-color:rgba(245,166,35,.55); }
.trust-badges i{ color:var(--gold); font-size:.9rem; }

.hero-scroll{
    position:absolute;
    bottom:26px; left:50%;
    transform:translateX(-50%);
    z-index:3;
    width:42px; height:42px;
    display:grid; place-items:center;
    color:#fff;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    animation:bob 2s ease-in-out infinite;
}
.hero-scroll:hover{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,8px) } }

/* ============================================================================
   07. SERVICES
   ========================================================================== */
.services-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
}
.service-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:1.8rem 1.5rem 1.6rem;
    overflow:hidden;
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card::before{
    content:"";
    position:absolute;
    inset-inline-start:0; top:0;
    width:100%; height:4px;
    background:linear-gradient(90deg,var(--gold),var(--sea));
    transform:scaleX(0);
    transform-origin:right;
    transition:transform var(--transition);
}
.service-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
    border-color:transparent;
}
.service-card:hover::before{ transform:scaleX(1); }

.service-icon{
    display:grid; place-items:center;
    width:60px; height:60px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(11,31,58,.08),rgba(27,108,168,.14));
    color:var(--navy);
    font-size:1.55rem;
    margin-bottom:1.1rem;
    transition:background var(--transition), color var(--transition), transform var(--transition);
}
.service-card:hover .service-icon{
    background:linear-gradient(135deg,var(--navy),var(--sea));
    color:var(--gold);
    transform:rotate(-6deg) scale(1.05);
}
.service-card h3{ margin-bottom:.5rem; }
.service-card p{ color:var(--muted); font-size:.93rem; margin-bottom:1rem; }

.card-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.87rem;
    font-weight:700;
    color:var(--sea);
}
.card-link:hover{ color:var(--gold-dark); gap:.65rem; }

/* ============================================================================
   08. WHY CHOOSE US
   ========================================================================== */
.features-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.1rem;
}
.feature-item{
    display:flex;
    gap:1rem;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:1.4rem 1.25rem;
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-item:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow);
    border-color:rgba(245,166,35,.5);
}
.feature-icon{
    flex:0 0 52px;
    width:52px; height:52px;
    display:grid; place-items:center;
    border-radius:14px;
    background:var(--navy);
    color:var(--gold);
    font-size:1.3rem;
    transition:background var(--transition);
}
.feature-item:hover .feature-icon{ background:var(--gold); color:var(--navy); }
.feature-item h3{ font-size:1.03rem; margin-bottom:.35rem; }
.feature-item p{ color:var(--muted); font-size:.9rem; line-height:1.75; }

/* ============================================================================
   09. STATS COUNTERS
   ========================================================================== */
.stats{
    background:
        linear-gradient(rgba(11,31,58,.94), rgba(6,15,30,.97)),
        url('images/port-shipping-sunset.jpg') center/cover fixed;
    padding:56px 0;
    border-block:4px solid var(--gold);
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.6rem 1rem;
    text-align:center;
}
.stat-item{ color:#fff; }
.stat-icon{
    display:grid; place-items:center;
    width:46px; height:46px;
    margin:0 auto .7rem;
    border-radius:50%;
    background:rgba(245,166,35,.15);
    border:1px solid rgba(245,166,35,.45);
    color:var(--gold);
    font-size:1.15rem;
}
.stat-number{
    font-family:var(--font-en);
    font-size:clamp(2rem,7vw,3.1rem);
    font-weight:700;
    line-height:1.1;
    color:var(--gold);
    letter-spacing:-1px;
}
.stat-label{
    font-size:.88rem;
    font-weight:600;
    color:rgba(255,255,255,.85);
    margin-top:.35rem;
}

/* ============================================================================
   10. HOW IT WORKS
   ========================================================================== */
.steps{
    display:grid;
    grid-template-columns:1fr;
    gap:1.4rem;
    position:relative;
    counter-reset:step;
}
.step-item{
    position:relative;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:2.4rem 1.5rem 1.6rem;
    text-align:center;
    transition:transform var(--transition), box-shadow var(--transition);
}
.step-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

.step-num{
    position:absolute;
    top:-20px; inset-inline-start:50%;
    transform:translateX(50%);
    width:42px; height:42px;
    display:grid; place-items:center;
    background:var(--gold);
    color:var(--navy);
    font-family:var(--font-en);
    font-weight:700;
    font-size:1.1rem;
    border-radius:50%;
    box-shadow:0 8px 18px rgba(245,166,35,.4);
    border:3px solid #fff;
}
.step-icon{
    display:grid; place-items:center;
    width:64px; height:64px;
    margin:0 auto .9rem;
    border-radius:50%;
    background:rgba(27,108,168,.10);
    color:var(--sea);
    font-size:1.5rem;
    transition:background var(--transition), color var(--transition);
}
.step-item:hover .step-icon{ background:var(--navy); color:var(--gold); }
.step-item h3{ margin-bottom:.45rem; }
.step-item p{ color:var(--muted); font-size:.92rem; }
.step-item p a{ color:var(--sea); font-weight:700; }
.step-item p a:hover{ color:var(--gold-dark); }

/* ============================================================================
   11. GLOBAL NETWORK & PARTNERS
   ========================================================================== */
.section-dark{
    background:linear-gradient(160deg,var(--navy) 0%, var(--navy-900) 100%);
    color:#fff;
    overflow:hidden;
}
.section-dark h2,.section-dark h3,.section-dark h4{ color:#fff; }

.network-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    align-items:center;
}
.network-copy h2{ margin:.6rem 0 1rem; }
.network-copy > p{
    color:rgba(255,255,255,.80);
    font-size:1.02rem;
    margin-bottom:1.4rem;
}
.network-points{ display:grid; gap:.7rem; margin-bottom:1.8rem; }
.network-points li{
    display:flex;
    align-items:center;
    gap:.65rem;
    font-size:.95rem;
    color:rgba(255,255,255,.92);
}
.network-points i{
    flex:0 0 24px;
    width:24px; height:24px;
    display:grid; place-items:center;
    background:rgba(245,166,35,.18);
    color:var(--gold);
    border-radius:50%;
    font-size:.7rem;
}

.network-visual{
    position:relative;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(255,255,255,.12);
}
.network-visual img{ width:100%; height:auto; object-fit:cover; }
.network-visual::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(to top,rgba(11,31,58,.45),transparent 60%);
    pointer-events:none;
}

/* --- Partners placeholder logos --- */
.partners{ margin-top:48px; }
.partners-title{
    text-align:center;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin-bottom:1.2rem;
}
.partners-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.8rem;
}
.partner-logo{
    display:grid; place-items:center;
    min-height:84px;
    padding:.9rem .7rem;
    text-align:center;
    font-size:.88rem;
    font-weight:800;
    line-height:1.5;
    color:rgba(255,255,255,.92);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius);
    transition:background var(--transition), border-color var(--transition),
               color var(--transition), transform var(--transition);
}
.partner-logo.is-latin{
    font-family:var(--font-en);
    font-weight:700;
    letter-spacing:2px;
}
.partner-logo:hover{
    background:rgba(245,166,35,.14);
    border-color:var(--gold);
    color:var(--gold);
    transform:translateY(-4px);
}
.partners-more{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top:1.5rem;
    text-align:center;
    font-size:.95rem;
    font-weight:700;
    color:rgba(255,255,255,.85);
}
.partners-more i{
    flex:0 0 30px;
    width:30px; height:30px;
    display:grid; place-items:center;
    background:rgba(245,166,35,.16);
    border:1px solid rgba(245,166,35,.5);
    color:var(--gold);
    border-radius:50%;
    font-size:.78rem;
}

/* ============================================================================
   12. GALLERY + LIGHTBOX
   ========================================================================== */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.75rem;
}
.gallery-item{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    cursor:zoom-in;
    background:var(--bg);
    aspect-ratio:4/3;
}
.gallery-item img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .55s ease;
}
.gallery-item::after{
    content:"\f00e";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%) scale(.6);
    width:52px; height:52px;
    display:grid; place-items:center;
    background:rgba(245,166,35,.92);
    color:var(--navy);
    border-radius:50%;
    font-size:1.2rem;
    opacity:0;
    transition:opacity var(--transition), transform var(--transition);
}
.gallery-item:hover img{ transform:scale(1.09); }
.gallery-item:hover::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.gallery-item figcaption{
    position:absolute;
    inset-inline:0; bottom:0;
    padding:1.6rem .8rem .7rem;
    font-size:.8rem;
    font-weight:700;
    color:#fff;
    background:linear-gradient(to top,rgba(6,15,30,.92),transparent);
    transform:translateY(100%);
    transition:transform var(--transition);
}
.gallery-item:hover figcaption{ transform:translateY(0); }

/* --- Lightbox --- */
.lightbox{
    position:fixed; inset:0;
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:1rem;
    background:rgba(6,15,30,.95);
    backdrop-filter:blur(6px);
    opacity:0;
    transition:opacity var(--transition);
}
.lightbox[hidden]{ display:none; }
.lightbox.show{ opacity:1; }
.lightbox img{
    max-width:min(92vw,1100px);
    max-height:80vh;
    width:auto;
    border-radius:10px;
    box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.lightbox-caption{
    position:absolute;
    bottom:22px; left:0; right:0;
    text-align:center;
    color:rgba(255,255,255,.85);
    font-size:.92rem;
    font-weight:600;
    padding-inline:1rem;
}
.lightbox-close{
    position:absolute;
    top:18px; inset-inline-end:18px;
    width:46px; height:46px;
    display:grid; place-items:center;
    background:rgba(255,255,255,.12);
    color:#fff;
    border-radius:50%;
    font-size:1.3rem;
    transition:background var(--transition), transform var(--transition);
}
.lightbox-close:hover{ background:var(--gold); color:var(--navy); transform:rotate(90deg); }

.lightbox-nav{
    flex:0 0 auto;
    width:48px; height:48px;
    display:grid; place-items:center;
    background:rgba(255,255,255,.12);
    color:#fff;
    border-radius:50%;
    font-size:1.2rem;
    transition:background var(--transition);
}
.lightbox-nav:hover{ background:var(--gold); color:var(--navy); }

/* ============================================================================
   13. TESTIMONIALS
   ========================================================================== */
.testimonials-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.2rem;
}
.testimonial-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:1.6rem 1.4rem;
    display:flex;
    flex-direction:column;
    gap:.9rem;
    transition:transform var(--transition), box-shadow var(--transition);
}
.testimonial-card::before{
    content:"\f10d";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    top:1.1rem; inset-inline-end:1.3rem;
    font-size:2.4rem;
    color:rgba(11,31,58,.07);
    line-height:1;
}
.testimonial-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

.stars{ display:flex; gap:.18rem; color:var(--gold); font-size:.95rem; }
.testimonial-card > p{
    color:#374151;
    font-size:.95rem;
    line-height:1.85;
    flex:1;
}
.testimonial-card footer{
    display:flex;
    align-items:center;
    gap:.75rem;
    border-top:1px solid var(--line);
    padding-top:.9rem;
}
.t-avatar{
    width:44px; height:44px;
    flex:0 0 44px;
    display:grid; place-items:center;
    background:linear-gradient(135deg,var(--navy),var(--sea));
    color:var(--gold);
    font-weight:800;
    font-size:1.1rem;
    border-radius:50%;
}
.testimonial-card footer span:last-child{ display:flex; flex-direction:column; line-height:1.45; }
.testimonial-card footer strong{ color:var(--navy); font-size:.95rem; }
.testimonial-card footer small{ color:var(--muted); font-size:.78rem; }

/* ============================================================================
   14. PRICING
   ========================================================================== */
.pricing-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.4rem;
    align-items:stretch;
}
.pricing-card{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:2px solid var(--line);
    border-radius:var(--radius-lg);
    padding:2rem 1.6rem;
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.pricing-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(11,31,58,.25); }

.pricing-card.featured{
    background:linear-gradient(165deg,var(--navy) 0%, var(--navy-700) 100%);
    border-color:var(--gold);
    box-shadow:var(--shadow-lg);
}
.pricing-card.featured h3,
.pricing-card.featured .price-features li{ color:#fff; }
.pricing-card.featured .price-sub{ color:rgba(255,255,255,.75); }
.pricing-card.featured .price-features li.muted{ color:rgba(255,255,255,.45); }
.pricing-card.featured .price-features i.fa-check{ color:var(--gold); background:rgba(245,166,35,.16); }

.badge{
    position:absolute;
    top:-14px; inset-inline-start:50%;
    transform:translateX(50%);
    background:var(--gold);
    color:var(--navy);
    font-size:.75rem;
    font-weight:800;
    padding:.35rem 1.1rem;
    border-radius:var(--radius-pill);
    box-shadow:0 8px 18px rgba(245,166,35,.45);
    white-space:nowrap;
}

.pricing-card header{ text-align:center; margin-bottom:1.3rem; padding-bottom:1.1rem; border-bottom:1px dashed var(--line); }
.pricing-card h3{ font-size:1.3rem; }
.price-sub{ color:var(--muted); font-size:.86rem; margin-top:.3rem; }

.price-features{ display:grid; gap:.75rem; margin-bottom:1.7rem; flex:1; }
.price-features li{
    display:flex;
    align-items:center;
    gap:.7rem;
    font-size:.93rem;
    color:#374151;
}
.price-features i{
    flex:0 0 22px;
    width:22px; height:22px;
    display:grid; place-items:center;
    background:rgba(27,108,168,.12);
    color:var(--sea);
    border-radius:50%;
    font-size:.66rem;
}
.price-features li.muted{ color:var(--muted); opacity:.7; }
.price-features li.muted i{ background:rgba(107,114,128,.12); color:var(--muted); }

/* ============================================================================
   15. CONTACT & FORM
   ========================================================================== */
.contact-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.6rem;
    align-items:start;
}

.contact-form-wrap{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:1.6rem 1.3rem;
    box-shadow:var(--shadow-sm);
}

.contact-form{ display:grid; gap:1.05rem; }
.form-row{ display:grid; grid-template-columns:1fr; gap:1.05rem; }
.form-group{ display:flex; flex-direction:column; gap:.4rem; }
.form-group label{
    font-size:.88rem;
    font-weight:700;
    color:var(--navy);
}
.req{ color:var(--danger); }

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:.85rem 1rem;
    background:var(--bg);
    border:1.5px solid var(--line);
    border-radius:12px;
    font-size:.95rem;
    color:var(--text);
    transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.form-group textarea{ resize:vertical; min-height:110px; }
.form-group input::placeholder,
.form-group textarea::placeholder{ color:#9CA3AF; }
.form-group select{
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:left 1rem center;
    padding-inline-end:1rem;
    padding-inline-start:1rem;
    cursor:pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:var(--gold);
    background:#fff;
    box-shadow:0 0 0 4px rgba(245,166,35,.18);
}
.form-group input.invalid,
.form-group select.invalid,
.form-group textarea.invalid{
    border-color:var(--danger);
    background:rgba(220,38,38,.04);
}
.field-error{
    font-size:.78rem;
    font-weight:600;
    color:var(--danger);
    min-height:1em;
}
.field-error:empty{ min-height:0; }

.form-note{
    font-size:.78rem;
    color:var(--muted);
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
}
.form-message{
    text-align:center;
    font-weight:700;
    font-size:.92rem;
    min-height:1.4em;
}
.form-message.success{ color:var(--success); }
.form-message.error{ color:var(--danger); }

.btn-spinner{ display:inline-flex; }

/* --- Contact info column --- */
.contact-info{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:1.6rem 1.3rem;
    box-shadow:var(--shadow-sm);
}
.contact-info h3{ margin-bottom:1.2rem; }

.info-list{ display:grid; gap:1.1rem; margin-bottom:1.4rem; }
.info-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.info-icon{
    flex:0 0 46px;
    width:46px; height:46px;
    display:grid; place-items:center;
    background:rgba(11,31,58,.08);
    color:var(--navy);
    border-radius:12px;
    font-size:1.1rem;
}
.info-icon-wa{ background:rgba(37,211,102,.14); color:var(--wa); }
.info-list h4{ font-size:.93rem; margin-bottom:.1rem; }
.info-list p{ font-size:.9rem; color:var(--muted); line-height:1.6; }
.info-list a{ color:var(--sea); font-weight:700; }
.info-list a:hover{ color:var(--gold-dark); }
.info-list strong{ color:var(--navy); }

.map-wrap{
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
    height:230px;
}
.map-wrap iframe{ width:100%; height:100%; border:0; }
.map-wrap iframe[hidden]{ display:none; }
.map-fallback{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--navy-900); padding:16px; text-align:center; }
.map-fallback[hidden]{ display:none; }
.map-fallback img{ max-height:150px; width:auto; max-width:100%; border-radius:8px; }
.map-fallback p{ color:rgba(255,255,255,.75); font-size:.9rem; margin:0; }

/* ============================================================================
   16. FOOTER
   ========================================================================== */
.site-footer{
    background:var(--navy-900);
    color:rgba(255,255,255,.78);
    padding-top:56px;
}
.footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
    padding-bottom:40px;
}
.logo-footer{ margin-bottom:1rem; }
.footer-about p{ font-size:.92rem; line-height:1.9; margin-bottom:1.1rem; }

.footer-phone{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-family:var(--font-en);
    font-weight:700;
    font-size:1.05rem;
    color:var(--gold);
    padding:.6rem 1.1rem;
    background:rgba(245,166,35,.10);
    border:1px solid rgba(245,166,35,.35);
    border-radius:var(--radius-pill);
    transition:background var(--transition), color var(--transition);
}
.footer-phone:hover{ background:var(--gold); color:var(--navy); }

.footer-grid h4{
    color:#fff;
    font-size:1rem;
    margin-bottom:1rem;
    position:relative;
    padding-bottom:.6rem;
}
.footer-grid h4::after{
    content:"";
    position:absolute;
    inset-inline-start:0; bottom:0;
    width:34px; height:3px;
    background:var(--gold);
    border-radius:2px;
}
.footer-links ul,.footer-services ul,.footer-contact ul{ display:grid; gap:.6rem; }
.footer-links a,.footer-services a{
    font-size:.92rem;
    color:rgba(255,255,255,.72);
    transition:color var(--transition), padding var(--transition);
}
.footer-links a:hover,.footer-services a:hover{ color:var(--gold); padding-inline-start:5px; }

.footer-contact ul li{
    display:flex;
    align-items:flex-start;
    gap:.6rem;
    font-size:.9rem;
    line-height:1.6;
}
.footer-contact ul li i{ color:var(--gold); margin-top:.3rem; width:16px; text-align:center; }
.footer-contact a:hover{ color:var(--gold); }

.social-icons{ display:flex; gap:.6rem; margin-top:1.3rem; }
.social-icons a{
    width:42px; height:42px;
    display:grid; place-items:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    color:#fff;
    font-size:1rem;
    transition:all var(--transition);
}
.social-icons a:hover{
    background:var(--gold);
    color:var(--navy);
    border-color:var(--gold);
    transform:translateY(-4px);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.10);
    padding:1.1rem 0;
    background:rgba(0,0,0,.30);
}
.footer-bottom-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.4rem;
    text-align:center;
    font-size:.85rem;
}
.footer-domain{ font-family:var(--font-en); color:var(--gold); font-weight:600; letter-spacing:.5px; }

/* ============================================================================
   17. FLOATING ACTIONS
   ========================================================================== */
.whatsapp-float{
    position:fixed;
    bottom:22px; left:20px;   /* spec: bottom-left */
    z-index:900;
    width:60px; height:60px;
    display:grid; place-items:center;
    background:var(--wa);
    color:#fff;
    font-size:1.85rem;
    border-radius:50%;
    box-shadow:0 12px 30px rgba(37,211,102,.45);
    transition:transform var(--transition), box-shadow var(--transition);
    animation:pulseWa 2.6s infinite;
}
.whatsapp-float:hover{ transform:scale(1.1); }
@keyframes pulseWa{
    0%{ box-shadow:0 12px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.55) }
    70%{ box-shadow:0 12px 30px rgba(37,211,102,.45), 0 0 0 20px rgba(37,211,102,0) }
    100%{ box-shadow:0 12px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0) }
}
.whatsapp-tip{
    position:absolute;
    left:calc(100% + 12px);   /* tooltip sits to the RIGHT of the float button */
    top:50%;
    transform:translateY(-50%);
    background:var(--navy);
    color:#fff;
    font-size:.78rem;
    font-weight:700;
    padding:.45rem .8rem;
    border-radius:8px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity var(--transition), visibility var(--transition);
    pointer-events:none;
}
.whatsapp-tip::before{
    content:"";
    position:absolute;
    left:-5px; top:50%;
    transform:translateY(-50%) rotate(45deg);
    width:10px; height:10px;
    background:var(--navy);
}
.whatsapp-float:hover .whatsapp-tip{ opacity:1; visibility:visible; }

.back-to-top{
    position:fixed;
    bottom:96px; left:20px;
    z-index:899;
    width:46px; height:46px;
    display:grid; place-items:center;
    background:var(--navy);
    color:var(--gold);
    font-size:1rem;
    border-radius:50%;
    border:2px solid rgba(245,166,35,.45);
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:all var(--transition);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--gold); color:var(--navy); border-color:var(--gold); }

/* ============================================================================
   18. RESPONSIVE BREAKPOINTS  (mobile-first → 1920px)
   ========================================================================== */

/* --- Small tablets --- */
@media (min-width:560px){
    .services-grid{ grid-template-columns:repeat(2,1fr); }
    .features-grid{ grid-template-columns:repeat(2,1fr); }
    .testimonials-grid{ grid-template-columns:repeat(2,1fr); }
    .gallery-grid{ grid-template-columns:repeat(3,1fr); }
    .partners-grid{ grid-template-columns:repeat(4,1fr); }
    .form-row{ grid-template-columns:1fr 1fr; }
    .footer-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-bottom-inner{ flex-direction:row; justify-content:space-between; text-align:start; }
}

/* --- Tablets / small laptops --- */
@media (min-width:768px){
    .section{ padding:84px 0; }
    .stats{ padding:72px 0; }
    .stats-grid{ grid-template-columns:repeat(4,1fr); }
    .steps{ grid-template-columns:repeat(2,1fr); gap:2.4rem 1.4rem; }
    .pricing-grid{ grid-template-columns:repeat(3,1fr); }
    .testimonials-grid{ grid-template-columns:repeat(3,1fr); }
    .features-grid{ grid-template-columns:repeat(2,1fr); gap:1.3rem; }
    .contact-form-wrap,.contact-info{ padding:2rem 1.8rem; }
    .network-grid{ grid-template-columns:1fr 1fr; gap:2.6rem; }
    .partners-grid{ grid-template-columns:repeat(4,1fr); gap:1rem; }
    .footer-grid{ grid-template-columns:repeat(2,1fr) 1fr; }
}

/* --- Desktop: mobile drawer OFF, full nav ON --- */
@media (min-width:992px){
    :root{ --header-h:78px; }

    .menu-toggle{ display:none !important; }
    .nav-overlay{ display:none !important; }

    #navbar{ display:block !important; }
    #navbar ul{ gap:.1rem; }
    #navbar a{ font-size:.95rem; padding:.55rem .85rem; }

    .services-grid{ grid-template-columns:repeat(4,1fr); }
    .features-grid{ grid-template-columns:repeat(3,1fr); }
    .steps{ grid-template-columns:repeat(4,1fr); }

    /* RTL timeline line across steps */
    .steps::before{
        content:"";
        position:absolute;
        top:22px; inset-inline:6%;
        height:2px;
        background:repeating-linear-gradient(to left,var(--line) 0 8px,transparent 8px 16px);
        z-index:0;
    }
    .step-item{ background:var(--white); z-index:1; }

    .contact-grid{
        grid-template-columns:1.05fr .95fr;
        gap:2rem;
    }
    /* DOM order: form first → lands on the RIGHT in RTL; info lands on the LEFT */
    .contact-form-wrap{ order:1; }
    .contact-info{ order:2; }

    .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; }
    .pricing-card.featured{ transform:scale(1.04); }
    .pricing-card.featured:hover{ transform:scale(1.04) translateY(-8px); }
}

/* --- Large desktop --- */
@media (min-width:1280px){
    .container{ padding-inline:1.5rem; }
    .hero{ min-height:92vh; }
    .section{ padding:96px 0; }
}

/* --- 1920px+ --- */
@media (min-width:1920px){
    :root{ --maxw:1440px; }
}

/* --- Very small screens (320px) --- */
@media (max-width:380px){
    .container{ padding-inline:.85rem; }
    .logo-text strong{ font-size:.92rem; }
    .logo-text small{ font-size:.55rem; }
    .hero-btns .btn{ width:100%; }
    .btn-lg{ padding:.95rem 1.2rem; font-size:.95rem; }
    .trust-badges li{ font-size:.76rem; padding:.4rem .7rem; }
    .header-cta .btn{ padding:.55rem .7rem; }
    .whatsapp-float{ width:54px; height:54px; font-size:1.6rem; bottom:16px; left:14px; }
    .back-to-top{ bottom:84px; left:14px; }
    .gallery-grid{ grid-template-columns:1fr 1fr; gap:.5rem; }
    .lightbox-nav{ display:none; }
}

/* Hamburger visible only below desktop */
@media (max-width:991px){
    .menu-toggle{ display:flex; }

    /* Header phone CTA becomes an icon-only button (keeps its accessible name) */
    .header-cta .btn{ padding:.62rem .85rem; position:relative; }
    .header-cta .btn span{
        position:absolute; width:1px; height:1px;
        padding:0; margin:-1px; overflow:hidden;
        clip:rect(0 0 0 0); white-space:nowrap; border:0;
    }

    /* Slide-in drawer (RTL: from the right) */
    #navbar{
        position:fixed;
        top:0; right:0;
        width:min(84vw,340px);
        height:100dvh;
        background:var(--navy);
        border-inline-start:3px solid var(--gold);
        padding:calc(var(--header-h) + 18px) 1.4rem 2rem;
        transform:translateX(105%);
        transition:transform .4s cubic-bezier(.4,0,.2,1);
        overflow-y:auto;
        box-shadow:-18px 0 50px rgba(0,0,0,.4);
        z-index:999;
    }
    #navbar.active{ transform:translateX(0); }

    #navbar ul{ flex-direction:column; align-items:stretch; gap:.25rem; }
    #navbar li{ border-bottom:1px solid rgba(255,255,255,.08); }
    #navbar li:last-child{ border-bottom:none; }
    #navbar a{
        padding:.95rem .4rem;
        font-size:1rem;
        border-radius:0;
        display:flex;
        align-items:center;
        gap:.6rem;
    }
    #navbar a::before{
        content:"\f105";
        font-family:"Font Awesome 6 Free";
        font-weight:900;
        color:var(--gold);
        opacity:0;
        transform:translateX(10px);
        transition:all var(--transition);
        font-size:.85rem;
    }
    #navbar a:hover::before,#navbar a.active::before{ opacity:1; transform:translateX(0); }
    #navbar a::after{ display:none; }

    body.nav-open{ overflow:hidden; }

    /* Fixed backgrounds are unreliable (and janky) on touch devices */
    .stats{ background-attachment:scroll; }
}

/* ============================================================================
   19. MOTION & PRINT PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
    .hero-bg{ animation:none; transform:none; }
    [data-aos]{ opacity:1 !important; transform:none !important; }
}

@media print{
    #header,.whatsapp-float,.back-to-top,.hero-scroll,.menu-toggle{ display:none !important; }
    body{ background:#fff; color:#000; }
    .hero{ min-height:auto; background:#fff; }
    .hero-overlay,.hero-bg{ display:none; }
    .hero h1,.hero-sub{ color:#000; text-shadow:none; }
}