/* =========================================================
   SASA CLEAN — Bold Violet + Pink theme (RTL)
   A ground-up redesign. No shared look with the turquoise original.
   NOTE: accent vars keep the legacy --orange* names so the whole
   stylesheet keeps working; they now hold violet→pink values.
   ========================================================= */

:root {
    /* ===== DARK THEME (default) — neutral charcoal + fiery orange ===== */
    --ink:        #1a1a1a;   /* page bg — neutral charcoal */
    --ink-2:      #222222;   /* raised — cards */
    --ink-3:      #2c2c2c;   /* hover / subtle fills */
    --surface:    #222222;   /* navbar / footer / card surface */
    --surface-rgb: 34,34,34; /* rgb of --surface for translucent bars */
    --line:       rgba(255,255,255,0.10);
    --line-2:     rgba(255,255,255,0.16);

    --orange:     #f97316;   /* primary accent — fiery orange */
    --orange-2:   #fb923c;   /* secondary accent — lighter orange (gradient end) */
    --orange-deep:#ea580c;   /* deep orange */
    --accent-rgb: 249,115,22;/* rgb of --orange for translucent accents */
    --glow:       rgba(249,115,22,0.30);

    --white:      #f4f4f5;   /* headings / strong text (neutral light) */
    --fog:        #c2c2c6;   /* body text (neutral grey) */
    --fog-dim:    #8a8a90;   /* muted text */

    --radius:     22px;
    --radius-sm:  14px;
    --shadow:     0 20px 50px rgba(0,0,0,0.45);
    --shadow-orange: 0 18px 40px var(--glow);

    --font: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --ink:        #f5f3fb;   /* page bg — soft violet-tinted white */
    --ink-2:      #ffffff;   /* raised — cards (white) */
    --ink-3:      #efeaf8;   /* hover / subtle fills */
    --surface:    #ffffff;
    --surface-rgb: 255,255,255;
    --line:       rgba(30,21,48,0.10);
    --line-2:     rgba(30,21,48,0.16);

    /* light theme keeps the violet/pink accent */
    --orange:     #a855f7;
    --orange-2:   #ec4899;
    --orange-deep:#7c3aed;
    --accent-rgb: 168,85,247;
    --glow:       rgba(168,85,247,0.30);

    --white:      #1e1530;   /* headings / strong text (dark on light) */
    --fog:        #4a4458;   /* body text */
    --fog-dim:    #8b8499;   /* muted text */

    --shadow:     0 20px 50px rgba(124,58,237,0.12);
}

* { box-sizing: border-box; }

html, body {
    overflow-x: hidden;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background: var(--ink);
    color: var(--fog);
    line-height: 1.85;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================
   PRELOADER — themed splash shown until the page finishes loading
   ========================================================= */
.preloader {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 30px;
    background: var(--ink);
    transition: opacity .6s ease, visibility .6s ease;
}
/* faint accent glow behind the loader */
.preloader::before {
    content: "";
    position: absolute; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, var(--glow), transparent 70%);
    filter: blur(40px); opacity: .6;
}
/* hidden state (added by JS once loaded) */
.preloader.is-hidden { opacity: 0; visibility: hidden; }
body.preloading { overflow: hidden; }

.pl-ring {
    position: relative; z-index: 1;
    width: 110px; height: 110px;
    display: grid; place-items: center;
}
/* two counter-rotating gradient arcs */
.pl-ring::before, .pl-ring::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
}
.pl-ring::before {
    border-top-color: var(--orange);
    border-right-color: var(--orange-2);
    animation: pl-spin 1s linear infinite;
}
.pl-ring::after {
    inset: 14px;
    border-bottom-color: var(--orange-deep);
    border-left-color: var(--orange);
    animation: pl-spin 1.4s linear infinite reverse;
}
/* bubbles icon in the centre, gently pulsing */
.pl-ring .pl-icon {
    font-size: 34px; color: var(--orange);
    animation: pl-pulse 1.3s ease-in-out infinite;
}
.pl-brand {
    position: relative; z-index: 1;
    font-weight: 900; font-size: 26px; letter-spacing: 1px;
    color: var(--white);
}
.pl-brand .hi {
    background: linear-gradient(120deg, var(--orange), var(--orange-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* thin progress bar that fills under the brand */
.pl-bar {
    position: relative; z-index: 1;
    width: 180px; height: 4px; border-radius: 4px;
    background: var(--ink-3); overflow: hidden;
}
.pl-bar::after {
    content: ""; position: absolute; inset: 0;
    width: 40%; border-radius: 4px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
    animation: pl-load 1.1s ease-in-out infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .7; } }
@keyframes pl-load { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
    .pl-ring::before, .pl-ring::after, .pl-ring .pl-icon, .pl-bar::after { animation: none; }
}

img { max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }

/* ambient orange glow blobs that sit behind sections */
body::before,
body::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}
body::before {
    width: 480px; height: 480px;
    background: radial-gradient(circle, var(--glow), transparent 70%);
    top: -120px; left: -120px;
}
body::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, var(--glow), transparent 70%);
    opacity: 0.32;
    bottom: -160px; right: -160px;
}

.page-area, .header-area, .footer, .sections-area { position: relative; z-index: 1; }

/* shared section title kit ------------------------------------------------ */
.kicker {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--orange);
    background: rgba(var(--accent-rgb),0.10);
    border: 1px solid rgba(var(--accent-rgb),0.30);
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 18px;
}
.section-heading {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 900;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.section-heading .hi { color: var(--orange); }
.section-sub {
    font-size: 17px;
    color: var(--fog-dim);
    max-width: 640px;
    margin: 0 auto 50px;
}

/* generic button ---------------------------------------------------------- */
.btn-x {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 16px;
    padding: 15px 34px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    line-height: 1;
}
.btn-x-solid {
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: var(--white);
    box-shadow: var(--shadow-orange);
}
.btn-x-solid:hover { transform: translateY(-3px); box-shadow: 0 24px 50px var(--glow); color: #fff; }
.btn-x-ghost {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--line-2);
}
.btn-x-ghost:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-3px); }

/* =========================================================
   NAVBAR
   ========================================================= */
.header-area { position: absolute; top: 0; width: 100%; z-index: 999; }

.navbar {
    position: relative;
    width: 100%;
    padding: 22px 0;
    transition: background .35s ease, padding .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.navbar.navbar-scrolled {
    position: fixed;
    top: 0; left: 0;
    padding: 12px 0;
    background: rgba(var(--surface-rgb), 0.85);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(124,58,237,0.12);
    border-bottom: 1px solid var(--line);
}
.navbar.navbar-solid {
    background: rgba(var(--surface-rgb), 0.95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 4px 24px rgba(124,58,237,0.08);
}

.navbar .navbar-brand {
    height: 64px;
    max-width: 170px;
    transition: height .35s ease;
}
.navbar.navbar-scrolled .navbar-brand { height: 50px; }
.navbar .navbar-brand .logo {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: right center;
}

.navbar[dir="rtl"] .navbar-nav.ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.navbar .navbar-nav { align-items: center; gap: 4px; }

.navbar .nav-link {
    color: var(--fog);
    font-weight: 700;
    font-size: 15.5px;
    padding: 9px 18px !important;
    position: relative;
    transition: color .25s ease;
}
.navbar .nav-link::after {
    content: "";
    position: absolute;
    right: 18px; left: 18px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .28s ease;
}
.navbar .nav-link:hover { color: var(--white); }
.navbar .nav-link:hover::after,
.navbar .nav-item.active .nav-link::after { transform: scaleX(1); }
.navbar .nav-item.active .nav-link { color: var(--white); }

/* HOME hero : the bar is transparent over a dark hero photo, so the links
   need to be light. Once scrolled (white bar) they revert to dark. */
.navbar:not(.navbar-solid):not(.navbar-scrolled) .nav-link { color: rgba(255,255,255,0.9); }
.navbar:not(.navbar-solid):not(.navbar-scrolled) .nav-link:hover,
.navbar:not(.navbar-solid):not(.navbar-scrolled) .nav-item.active .nav-link { color: #ffffff; }

.navbar .nav-link-phone {
    color: var(--white) !important;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    border-radius: 50px;
    padding: 11px 22px !important;
    font-weight: 800;
    margin-right: 14px;
    box-shadow: var(--shadow-orange);
    transition: transform .25s ease;
}
.navbar[dir="rtl"] .nav-link-phone { margin-right: 14px; margin-left: 0; }
.navbar .nav-link-phone::after { display: none; }
.navbar .nav-link-phone:hover { transform: translateY(-2px); color: #fff !important; }

/* theme (dark/light) toggle button */
.theme-toggle {
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line-2);
    background: rgba(var(--surface-rgb), 0.18);
    color: var(--white);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 17px;
    margin-right: 14px;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.navbar[dir="rtl"] .theme-toggle { margin-right: 14px; margin-left: 0; }
.theme-toggle:hover { transform: translateY(-2px); color: var(--orange); border-color: var(--orange); }
/* over the transparent hero bar the icon must read as light */
.navbar:not(.navbar-solid):not(.navbar-scrolled) .theme-toggle {
    color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12);
}
/* show the right glyph per theme: sun = "switch to light" shows in dark mode */
.theme-toggle .icon-to-light { display: inline-block; }
.theme-toggle .icon-to-dark  { display: none; }
[data-theme="light"] .theme-toggle .icon-to-light { display: none; }
[data-theme="light"] .theme-toggle .icon-to-dark  { display: inline-block; }

.navbar-toggler { border: 1px solid var(--line-2); border-radius: 10px; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f97316' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a855f7' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================================================
   HERO  (replaces the old carousel slider)
   ========================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 130px 0 80px;
}
.hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(30,21,48,0.72) 0%, rgba(30,21,48,0.40) 40%, rgba(30,21,48,0.05) 75%, transparent 100%),
        linear-gradient(0deg, rgba(245,243,251,0.85) 0%, transparent 28%);
}
.navbar[dir="rtl"] ~ .page-area .hero-bg::after,
.hero[dir="rtl"] .hero-bg::after {
    background:
        linear-gradient(-90deg, rgba(30,21,48,0.72) 0%, rgba(30,21,48,0.40) 40%, rgba(30,21,48,0.05) 75%, transparent 100%),
        linear-gradient(0deg, rgba(245,243,251,0.85) 0%, transparent 28%);
}

/* decorative ghost headlines on the hero sides (vertical) ----------------- */
.hero-ghost {
    position: absolute; top: 50%; z-index: 1;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-weight: 900;
    font-size: clamp(40px, 9vh, 110px);
    line-height: 1;
    letter-spacing: 2px;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.22);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.hero-ghost-right { right: -6px; }
.hero-ghost-left  { left: -6px; -webkit-text-stroke-color: rgba(var(--accent-rgb), 0.40); }
@media (max-width: 991px) { .hero-ghost { display: none; } }

/* decorative split headline : line 1 pinned right, line 2 pinned left ------ */
.hero-title-split {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none; user-select: none;
}
.hero-title-split .hts-part {
    position: absolute;
    font-weight: 900;
    font-size: clamp(34px, 6vw, 88px);
    line-height: 1;
    letter-spacing: -1px;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.18);
}
/* first part hugs the right edge, upper area */
.hero-title-split .hts-right { top: 22%; right: 4%; }
/* second part hugs the left edge, lower area, tinted with the accent */
.hero-title-split .hts-left  { bottom: 24%; left: 4%; -webkit-text-stroke-color: rgba(var(--accent-rgb), 0.35); }
@media (max-width: 991px) { .hero-title-split { display: none; } }

.hero-inner { position: relative; z-index: 2; max-width: 720px; }
/* widen the inner column when the two titles sit side by side */
.hero-inner:has(.hero-titles-row) { max-width: 1040px; }

/* ---- centered hero : whole column centered in the page ---- */
.hero-inner:has(.hero-titles-row) {
    margin-inline: auto;          /* centre the column itself */
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.hero-inner:has(.hero-titles-row) .hero-desc { max-width: 620px; margin-inline: auto; }
.hero-inner:has(.hero-titles-row) .hero-cta { justify-content: center; }
.hero-inner:has(.hero-titles-row) .hero-stats { justify-content: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 700; font-size: 14px;
    color: #ffffff;
    margin-bottom: 26px;
}
.hero-badge i { color: var(--orange); }
.hero-title {
    font-size: clamp(40px, 7vw, 78px);
    font-weight: 900;
    line-height: 1.05;
    color: #ffffff;
    letter-spacing: -1px;
    margin-bottom: 22px;
}
/* two matching titles side by side : original (right) + duplicate (left) */
.hero-titles-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: clamp(40px, 9vw, 130px);
    flex-wrap: nowrap;
}
.hero-titles-row .hero-title {
    margin-bottom: 22px;
    /* shrink so both fit on one row */
    font-size: clamp(28px, 4vw, 56px);
    white-space: nowrap;
}
@media (max-width: 991px) {
    /* both titles stay, but stack one above the other so they don't crowd */
    .hero-titles-row {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .hero-titles-row .hero-title { font-size: clamp(34px, 9vw, 60px); }
}
/* highlighted word styling lives in the HERO ANIMATIONS block below */
.hero-desc {
    font-size: 19px;
    color: rgba(255,255,255,0.82);
    max-width: 560px;
    margin-bottom: 38px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }

.hero-stats {
    display: flex; flex-wrap: wrap;
    gap: 38px;
    margin-top: 56px;
    padding-top: 34px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-stat .num {
    font-size: 40px; font-weight: 900; color: #ffffff;
    line-height: 1;
}
.hero-stat .num span { color: var(--orange-2); }
.hero-stat .lbl { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 6px; }

/* =========================================================
   HERO ANIMATIONS
   - staggered entrance (runs once on load)
   - looping ambient motion that never stops (shimmer / pulse / float)
   ========================================================= */

/* entrance: each .hero-anim starts hidden and slides up in sequence */
.hero-anim {
    opacity: 0;
    transform: translateY(26px);
    animation: heroIn .8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroIn {
    to { opacity: 1; transform: translateY(0); }
}

/* --- title reveals WORD BY WORD before anything else continues --- */
.hero-title .hero-line {
    display: block;
    line-height: 1.18;            /* room for descenders (the ـر in يُبهر) */
}
.hero-title .hero-word {
    display: inline-block;
    line-height: 1.18;
    padding-bottom: .08em;        /* keep clipped-text glyph tails visible */
    opacity: 0;
    transform: translateY(22px);
    will-change: transform;       /* promote to its own GPU layer → smoother, cheaper wave */
    /* 1) enter once  2) then loop a visible wave (bob + tilt) forever.
       per-word delays are set individually below so the wave ripples. */
    animation:
        heroWordIn .55s cubic-bezier(.22,.61,.36,1) forwards,
        heroWave 2.4s ease-in-out infinite;
}
@keyframes heroWordIn {
    to { opacity: 1; transform: translateY(0); }
}
/* a clearly felt wave: lift, tiny tilt, settle */
@keyframes heroWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(-2deg); }
}
/* badge first, then each word ~0.18s apart; the SECOND delay value is the
   wave start — staggered by .12s so the motion travels word to word */
.hero-badge.hero-anim                 { animation-delay: .15s; }
.hero-title .hero-word:nth-child(1)   { animation-delay: .35s, 1.45s; }  /* لمعان */
.hero-title .hero-word:nth-child(2)   { animation-delay: .50s, 1.55s; }  /* يُبهر */
.hero-line:nth-child(2) .hero-word:nth-child(1) { animation-delay: .65s, 1.65s; }  /* في */
.hero-line:nth-child(2) .hero-word:nth-child(2) { animation-delay: .80s, 1.75s; }  /* كل */
.hero-line:nth-child(2) .hero-word:nth-child(3) { animation-delay: .95s, 1.85s; }  /* تفصيلة */
/* the rest enters right as the last word lands (no dead gap) */
.hero-desc.hero-anim   { animation-delay: 1.15s; }
.hero-cta.hero-anim    { animation-delay: 1.30s; }
.hero-stats.hero-anim  { animation-delay: 1.45s; }

/* --- looping ambient motion : starts ONLY after the words finish (~2s) --- */

/* NOTE: the whole-title float was removed — the per-word wave (heroWave)
   now carries the motion, so stacking a second float on .hero-title would
   only muddy it. */

/* highlighted word: solid gradient while revealing, then the looping shimmer
   kicks in after it has appeared (delay covers the word's entrance) */
.hero-title .hero-word.hi {
    background: linear-gradient(120deg,
        var(--orange) 0%, var(--orange-2) 25%, #ffffff 50%,
        var(--orange-2) 75%, var(--orange) 100%);
    background-size: 250% 100%;
    background-position: 200% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    will-change: transform;
    /* transform-channel: enter once, then the SAME wave as the others.
       colour-channel: shimmer. shadow-channel: a felt glow pulse.
       three separate properties → no conflict, all run together. */
    animation:
        heroWordIn .55s cubic-bezier(.22,.61,.36,1) .50s forwards,
        heroWave 2.4s ease-in-out 1.55s infinite,
        heroShimmer 4s linear 1.3s infinite,
        heroGlow 2.4s ease-in-out 1.55s infinite;
}
@keyframes heroShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -50% 0; }
}
/* glow pulse uses text-shadow (cheaper than an animated filter:drop-shadow,
   which re-rasterises the layer every frame) and stays off the transform channel */
@keyframes heroGlow {
    0%, 100% { text-shadow: 0 0 0 rgba(var(--accent-rgb),0); }
    50%      { text-shadow: 0 4px 26px rgba(var(--accent-rgb),0.55); }
}

/* badge keeps a soft breathing pulse + a glint sliding over its icon */
.hero-badge {
    position: relative;
    animation:
        heroIn .8s cubic-bezier(.22,.61,.36,1) .15s forwards,
        heroBadgePulse 3.2s ease-in-out 2.2s infinite;
}
@keyframes heroBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
    50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0.05); }
}
.hero-badge i { animation: heroGlint 2.6s ease-in-out infinite; }
@keyframes heroGlint {
    0%, 70%, 100% { transform: scale(1) rotate(0); opacity: 1; }
    82%           { transform: scale(1.25) rotate(-12deg); opacity: .85; }
}

/* solid CTA gets a slow light sweep so it draws the eye continuously */
.hero-cta .btn-x-solid {
    position: relative;
    overflow: hidden;
}
.hero-cta .btn-x-solid::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    will-change: transform;
    animation: heroSweep 3.5s ease-in-out 2s infinite;
}
/* animate transform (GPU, no reflow) instead of `left` (triggers layout) */
@keyframes heroSweep {
    0%, 60% { transform: translateX(-160%) skewX(-20deg); }
    100%    { transform: translateX(360%) skewX(-20deg); }
}

/* respect users who prefer no motion: show everything, kill the loops */
@media (prefers-reduced-motion: reduce) {
    .hero-anim,
    .hero-title .hero-word { opacity: 1; transform: none; animation: none; }
    .hero-title,
    .hero-title .hero-word.hi,
    .hero-badge,
    .hero-badge i,
    .hero-cta .btn-x-solid::after { animation: none; }
}

/* generic page hero (sub-pages) ------------------------------------------- */
.page-hero {
    position: relative;
    padding: 180px 0 90px;
    text-align: center;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(800px 400px at 50% -10%, rgba(var(--accent-rgb),0.18), transparent 70%);
    z-index: 0;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .ph-title {
    font-size: clamp(34px, 6vw, 60px);
    font-weight: 900;
    color: var(--white);
    margin-bottom: 14px;
}
.page-hero .ph-title .hi { color: var(--orange); }
.page-hero .crumbs {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--fog-dim);
    background: var(--ink-2);
    border: 1px solid var(--line);
    padding: 8px 18px;
    border-radius: 50px;
    box-shadow: var(--shadow);
}
.page-hero .crumbs a { color: var(--fog); transition: color .2s; }
.page-hero .crumbs a:hover { color: var(--orange); }
.page-hero .crumbs .current { color: var(--orange); font-weight: 700; }

/* =========================================================
   HOME — welcome / professional block
   ========================================================= */
.welcome { padding: 110px 0; position: relative; }
.welcome-img-wrap { position: relative; }
.welcome-img-wrap img {
    border-radius: var(--radius);
    width: 100%;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}
.welcome-img-wrap::before {
    content: "";
    position: absolute;
    inset: -16px -16px auto auto;
    width: 140px; height: 140px;
    background: linear-gradient(135deg, var(--orange), transparent);
    border-radius: var(--radius);
    z-index: -1;
    opacity: .6;
}
.welcome-badge-float {
    position: absolute;
    bottom: 24px; left: 24px;
    background: var(--ink-2);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: 16px 22px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: var(--shadow);
}
.welcome-badge-float .ic {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    display: grid; place-items: center;
    color: #fff; font-size: 22px;
}
.welcome-badge-float .t { font-weight: 900; color: var(--white); font-size: 20px; line-height: 1; }
.welcome-badge-float .s { font-size: 13px; color: var(--fog-dim); }

.welcome-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.welcome-tag {
    background: var(--ink-2);
    border: 1px solid var(--line);
    color: var(--white);
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 50px;
    transition: border-color .25s, transform .25s;
    cursor: default;
}
.welcome-tag i { color: var(--orange); margin-left: 8px; }
.welcome-tag:hover { border-color: var(--orange); transform: translateY(-3px); }

/* =========================================================
   SERVICES (cards / carousel)
   ========================================================= */
.services-section { padding: 100px 0; position: relative; }
.section-center { text-align: center; }

.svc-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    height: 100%;
}
.svc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--accent-rgb),0.5);
    box-shadow: var(--shadow);
}
.svc-card-img { position: relative; height: 230px; overflow: hidden; }
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .svc-card-img img { transform: scale(1.08); }
.svc-card-img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(22,18,31,0.85), transparent 55%);
}
.svc-card-num {
    position: absolute; top: 16px; right: 16px;
    background: rgba(var(--accent-rgb),0.9);
    color: #fff; font-weight: 900;
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    z-index: 2; backdrop-filter: blur(4px);
}
.svc-card-body { padding: 26px 24px 30px; }
.svc-card-body .t {
    font-size: 21px; font-weight: 800; color: var(--white);
    margin-bottom: 10px;
}
.svc-card-body .d { color: var(--fog-dim); font-size: 15px; margin-bottom: 18px; }
.svc-card-link {
    color: var(--orange); font-weight: 800; font-size: 15px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: gap .25s;
}
.svc-card-link:hover { gap: 14px; color: var(--orange-2); }
.svc-card-link i { transition: transform .25s; }

/* services list page grid */
.svc-grid .col-6 { margin-bottom: 26px; }

/* =========================================================
   CTA banner  (was: carpet)
   ========================================================= */
.cta-banner {
    position: relative;
    margin: 40px 0;
    padding: 90px 0;
    overflow: hidden;
    border-radius: var(--radius);
}
.cta-banner-bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner-bg::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(124,58,237,0.92), rgba(22,18,31,0.82));
}
.cta-banner .container { position: relative; z-index: 2; text-align: center; }
.cta-banner .cta-kicker {
    color: #ffe2cf; font-weight: 800; letter-spacing: 3px;
    text-transform: uppercase; font-size: 13px; margin-bottom: 12px; display:block;
}
.cta-banner .cta-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 900; color: #fff;
    margin-bottom: 14px;
}
.cta-banner .cta-desc { color: rgba(255,255,255,0.9); font-size: 18px; margin-bottom: 30px; }
.cta-banner .cta-phone {
    display: inline-flex; align-items: center; gap: 12px;
    background: #fff; color: var(--ink);
    font-weight: 900; font-size: 20px;
    padding: 16px 36px; border-radius: 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transition: transform .25s;
}
.cta-banner .cta-phone i { color: var(--orange); }
.cta-banner .cta-phone:hover { transform: translateY(-3px); color: var(--ink); }

/* =========================================================
   PROJECTS / CLIENTS
   ========================================================= */
.projects-section { padding: 100px 0; }
.project-card {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    height: 320px;
    border: 1px solid var(--line);
}
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project-card:hover img { transform: scale(1.08); }
.project-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(22,18,31,0.95) 0%, transparent 60%);
}
.project-card-info {
    position: absolute; bottom: 0; right: 0; left: 0;
    z-index: 2; padding: 24px;
    transform: translateY(8px);
    transition: transform .35s ease;
}
.project-card:hover .project-card-info { transform: translateY(0); }
.project-card-info .pname { color: #fff; font-weight: 800; font-size: 20px; }
.project-card-info .pgo {
    color: var(--orange); font-weight: 800; font-size: 14px;
    opacity: 0; transition: opacity .35s ease; margin-top: 6px; display: inline-block;
}
.project-card:hover .project-card-info .pgo { opacity: 1; }

/* two big cards grouped in the centre of the row */
.projects-row {
    column-gap: clamp(24px, 4vw, 56px);
    justify-content: center;
}
.projects-row > [class*="col-"] { flex: 0 0 auto; max-width: none; width: auto; }

/* let this row break out wider than the container so the images get more room.
   centre it against the VIEWPORT (not the padded container) so both side
   margins are perfectly equal */
@media (min-width: 992px) {
    .projects-section .projects-row {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-inline: clamp(20px, 3vw, 60px);
    }
    /* each group keeps a sensible width instead of stretching to half the row */
    .projects-section .projects-group { width: clamp(440px, 38vw, 620px); }
}

/* group of 3 projects sitting side by side as tall vertical columns */
.projects-group {
    display: flex;
    gap: 3px;
    height: 460px;
}
.projects-group .project-card--sm {
    flex: 1;            /* 3 equal vertical columns */
    height: 100%;
    min-width: 0;
}
.projects-group .project-card--sm .project-card-info { padding: 16px 14px; }
.projects-group .project-card--sm .project-card-info .pname {
    font-size: 15px; line-height: 1.3;
    writing-mode: horizontal-tb;
}
.projects-group .project-card--sm .project-card-info .pgo { font-size: 12px; }
@media (max-width: 575px) {
    /* stack the trio on very small screens */
    .projects-group { flex-direction: column; height: auto; }
    .projects-group .project-card--sm { height: 200px; }
}

/* =========================================================
   FAQ + video
   ========================================================= */
.faq-section { padding: 100px 0; }
.faq-video { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.faq-video video, .faq-video img { width: 100%; display: block; }

.faq-list { }
.faq-item {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .25s;
}
.faq-item.open { border-color: rgba(var(--accent-rgb),0.5); }
.faq-q {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 800; color: var(--white); font-size: 17px;
}
.faq-q .ic {
    width: 34px; height: 34px; flex: none;
    border-radius: 10px;
    background: rgba(var(--accent-rgb),0.12);
    color: var(--orange);
    display: grid; place-items: center;
    transition: transform .3s, background .3s, color .3s;
}
.faq-item.open .faq-q .ic { background: var(--orange); color: #fff; transform: rotate(180deg); }
.faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
}
.faq-a-inner { padding: 0 24px 22px; color: var(--fog-dim); }

/* =========================================================
   FRESH / final block
   ========================================================= */
.fresh-section { padding: 100px 0; }
.fresh-card {
    background: linear-gradient(135deg, var(--ink-2), var(--ink-3));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 50px;
    box-shadow: var(--shadow);
}
.fresh-card .fresh-title { font-size: clamp(26px,4vw,40px); font-weight:900; color: var(--white); margin-bottom: 18px; }
.fresh-card .fresh-desc { color: var(--fog); font-size: 17px; }
.fresh-img-area img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }

/* =========================================================
   ABOUT cards
   ========================================================= */
.about-section { padding: 110px 0; }
.about-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 38px 32px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .3s, border-color .3s;
}
.about-card:hover { transform: translateY(-8px); border-color: rgba(var(--accent-rgb),0.5); }
.about-card .about-no {
    font-size: 64px; font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--accent-rgb),0.45);
    line-height: 1; display: block; margin-bottom: 14px;
}
.about-card .about-title { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 12px; }
.about-card .about-desc { color: var(--fog-dim); font-size: 15.5px; }
.about-card .about-ic {
    position: absolute; top: 30px; left: 30px;
    font-size: 26px; color: var(--orange); opacity: .8;
}

/* =========================================================
   CONTACTS
   ========================================================= */
.contacts-section { padding: 110px 0; }
.contact-form-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 44px;
    box-shadow: var(--shadow);
}
.input-x {
    width: 100%;
    background: var(--ink);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    color: var(--white);
    padding: 15px 20px;
    font-family: var(--font);
    font-size: 16px;
    margin-bottom: 18px;
    transition: border-color .25s, box-shadow .25s;
}
.input-x::placeholder { color: var(--fog-dim); }
.input-x:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.12);
}
textarea.input-x { min-height: 140px; resize: vertical; }
.contact-errors { color: #ff8a8a; background: rgba(255,80,80,0.08); border:1px solid rgba(255,80,80,0.3); padding: 14px 20px; border-radius: var(--radius-sm); margin-bottom: 18px; }

.contact-info-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 28px;
    text-align: center;
    height: 100%;
    transition: transform .3s, border-color .3s;
}
.contact-info-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb),0.5); }
.contact-info-card .ic {
    width: 60px; height: 60px; border-radius: 16px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    display: grid; place-items: center; color: #fff; font-size: 24px;
    box-shadow: var(--shadow-orange);
}
.contact-info-card .lbl { color: var(--fog-dim); font-size: 14px; }
.contact-info-card .val { color: var(--white); font-weight: 700; margin-top: 4px; }

/* =========================================================
   SERVICE DETAILS
   ========================================================= */
.sd-section { padding: 60px 0 90px; }
.sd-base-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); margin-bottom: 40px; }
.sd-base-img img { width: 100%; display: block; }
.sd-meta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 24px 0 10px; }
.sd-meta li {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink-2); border: 1px solid var(--line);
    color: var(--white); font-weight: 700; font-size: 15px;
    padding: 10px 20px; border-radius: 50px;
}
.sd-meta li i { color: var(--orange); }
.sd-block {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 36px; margin-bottom: 26px;
}
.sd-block .sd-block-title {
    font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
}
.sd-block .sd-block-title::before {
    content: ""; width: 8px; height: 28px; border-radius: 4px;
    background: linear-gradient(var(--orange), var(--orange-deep));
}
.sd-block p { color: var(--fog); }
.sd-list { margin-top: 18px; }
.sd-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--fog); margin-bottom: 12px; }
.sd-list li i { color: var(--orange); margin-top: 5px; }

.sd-gallery-img { border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 1px solid var(--line); position: relative; }
.sd-gallery-img img { width: 100%; height: 280px; object-fit: cover; transition: transform .4s; }
.sd-gallery-img:hover img { transform: scale(1.06); }

/* =========================================================
   PROJECT DETAILS
   ========================================================= */
.pd-hero {
    position: relative; min-height: 60vh;
    display: flex; align-items: flex-end;
    background-size: cover; background-position: center;
    padding: 160px 0 60px;
}
.pd-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, var(--ink) 5%, rgba(22,18,31,0.6) 60%, rgba(22,18,31,0.85));
}
.pd-hero .container { position: relative; z-index: 2; }
.pd-hero-badge {
    display: inline-block; background: var(--orange); color: #fff;
    font-weight: 800; font-size: 13px; padding: 7px 18px; border-radius: 50px; margin-bottom: 16px;
}
.pd-hero-title { font-size: clamp(32px,5vw,56px); font-weight: 900; color: #fff; }
.pd-hero-sub { color: var(--fog); font-size: 18px; margin-top: 8px; }

.pd-main { padding: 60px 0; }
.pd-block { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px; }
.pd-client { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.pd-client-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); }
.pd-client-name { font-weight: 800; color: var(--white); font-size: 19px; }
.pd-client-role { color: var(--fog-dim); font-size: 14px; }
.pd-section-title { font-size: 22px; font-weight: 800; color: var(--white); margin: 24px 0 12px; }
.pd-text { color: var(--fog); }
.pd-highlights { margin-top: 20px; }
.pd-highlights li { display: flex; gap: 12px; color: var(--fog); margin-bottom: 12px; }
.pd-highlights li i { color: var(--orange); margin-top: 5px; }
.pd-quote {
    margin-top: 26px; padding: 24px 28px;
    background: var(--ink); border-right: 4px solid var(--orange);
    border-radius: var(--radius-sm); color: var(--white); font-size: 18px; font-style: italic;
}
.pd-quote i { color: var(--orange); margin-left: 8px; }
.pd-quote cite { display: block; margin-top: 10px; color: var(--fog-dim); font-style: normal; font-weight: 700; }

.pd-sidebar { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; position: sticky; top: 100px; }
.pd-sidebar-title { font-weight: 800; color: var(--white); font-size: 20px; margin-bottom: 20px; }
.pd-info-list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pd-info-list li:last-child { border-bottom: none; }
.pd-info-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--accent-rgb),0.12); color: var(--orange); display: grid; place-items: center; }
.pd-info-label { color: var(--fog-dim); font-size: 14px; }
.pd-info-value { color: var(--white); font-weight: 700; }
.pd-sidebar .pd-cta-btn {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    width: 100%; margin-top: 24px;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff; font-weight: 800; padding: 15px; border-radius: 50px;
    box-shadow: var(--shadow-orange); transition: transform .25s;
}
.pd-sidebar .pd-cta-btn:hover { transform: translateY(-3px); color: #fff; }

.pd-gallery { padding: 30px 0 0; }
.pd-gallery-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pd-gallery-item { border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 1px solid var(--line); }
.pd-gallery-item img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s; }
.pd-gallery-item:hover img { transform: scale(1.06); }
.pd-gallery-item--feature { grid-column: span 2; grid-row: span 2; }
.pd-gallery-item--feature img { height: 100%; }

/* ---- RTL fixes for project-details (Bootstrap ships LTR) ---- */
.project-details { 
    direction: rtl; 
    text-align: right; 
    margin-bottom: 100px; 
}
.project-details-section-heading {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 900;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
}
/* the row's flow is reversed so the main content sits on the right,
   the sidebar on the left — the natural RTL reading order */
.project-details .pd-main { flex-direction: row-reverse; }
/* breadcrumb : compact rounded pill, right-aligned, even spacing */
.project-details .crumbs {
    direction: rtl;
    display: inline-flex; align-items: center; gap: 10px;
    width: auto; max-width: 100%; flex-wrap: wrap;
    font-size: 14px;
    padding: 9px 20px;
    border-radius: 50px;
    backdrop-filter: blur(6px);
    margin-bottom: 18px;
}
.project-details .crumbs a,
.project-details .crumbs .current { white-space: nowrap; }
.project-details .crumbs a { transition: opacity .2s; }
.project-details .crumbs a:hover { opacity: .75; }
/* separators: smaller, dimmed, point along the RTL reading direction */
.project-details .crumbs i {
    font-size: 11px;
    opacity: .6;
    margin: 0 2px;
}
/* quote accent bar belongs on the right edge in RTL */
.pd-quote { border-right: 4px solid var(--orange); border-left: none; }
.pd-quote i { margin-left: 8px; margin-right: 0; }
/* gallery mosaic: feature tile anchored to the right */
.pd-gallery-mosaic { direction: rtl; }
/* sidebar info icon sits first (right) in the RTL grid — already grid, just ensure alignment */
.pd-info-list li { direction: rtl; }
/* lightbox close: mirror to the right in RTL */
.project-details .pd-lightbox-close { left: auto; right: 30px; }

/* lightbox */
.pd-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(10,11,14,0.94);
    display: none; align-items: center; justify-content: center; padding: 30px;
}
.pd-lightbox.is-open { display: flex; }
.pd-lightbox-img { max-width: 92%; max-height: 88%; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.pd-lightbox-close { position: absolute; top: 24px; left: 30px; background: none; border: none; color: #fff; font-size: 44px; cursor: pointer; line-height: 1; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-top: 72px;
    position: relative;
    overflow: hidden;
}
/* subtle accent glow + top hairline */
.footer::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--orange), var(--orange-2), transparent);
    opacity: .8;
}
.footer::after {
    content: "";
    position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
    width: 560px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, var(--glow), transparent 70%);
    opacity: .35; pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }
/* RTL: Bootstrap ships LTR, so reverse the column flow to read
   right-to-left (logo first on the right, تابعنا last on the left).
   Only on ≥992px where columns sit side-by-side; below that they
   stack and should keep their natural top-to-bottom order. */
.footer { direction: rtl; text-align: right; }
.footer .row { row-gap: 12px; }
@media (min-width: 992px) {
    /* .footer .row { flex-direction: row-reverse; } */
}

.footer-logo { height: 54px; margin-bottom: 20px; }
.footer-desc { color: var(--fog-dim); font-size: 15px; line-height: 1.9; max-width: 320px; }

.footer .head-list, .footer .head-list-contact {
    color: var(--white); font-weight: 800; font-size: 18px;
    margin-bottom: 22px; position: relative; padding-bottom: 12px;
}
.footer .head-list::after, .footer .head-list-contact::after {
    content: ""; position: absolute; bottom: 0; right: 0;
    width: 36px; height: 3px; background: var(--orange); border-radius: 3px;
}

.footer .content-list li { margin-bottom: 13px; }
.footer .content-list li a {
    color: var(--fog-dim); transition: color .2s, padding .2s;
    display: inline-flex; align-items: center; gap: 9px;
}
/* small chevron bullet that slides on hover */
.footer .content-list li a::before {
    content: "\f104"; /* fa angle-left (RTL points inward) */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 12px; color: var(--orange);
    opacity: 0; transform: translateX(6px);
    transition: opacity .2s, transform .2s;
}
.footer .content-list li a:hover { color: var(--white); padding-right: 4px; }
.footer .content-list li a:hover::before { opacity: 1; transform: translateX(0); }

/* contact rows : clean flex instead of bootstrap grid */
.footer-contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.footer-contact-item .footer-icon {
    flex: none; width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; margin: 0;
    background: rgba(249,115,22,0.12); color: var(--orange); font-size: 16px;
}
.footer-info { color: var(--fog-dim); font-size: 14px; line-height: 1.7; }
.footer-info strong { color: var(--white); font-weight: 700; display: block; margin-bottom: 2px; font-size: 13px; }
.footer-icon { color: var(--orange); font-size: 18px; margin-top: 4px; }

.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center; color: var(--fog);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.footer-socials a:hover {
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff; transform: translateY(-4px);
    border-color: transparent; box-shadow: 0 12px 24px var(--glow);
}

.last-erea {
    margin-top: 56px; border-top: 1px solid var(--line);
    padding: 22px 0; text-align: center;
}
.all-reserved { color: var(--fog-dim); font-size: 14px; margin: 0; }

/* floating whatsapp */
.fab-wa {
    position: fixed; bottom: 24px; left: 24px; z-index: 900;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: grid; place-items: center; font-size: 28px;
    box-shadow: 0 10px 30px rgba(37,211,102,0.5);
    transition: transform .25s;
}
.fab-wa:hover { transform: scale(1.1); color: #fff; }

/* =========================================================
   OWL dots / responsive
   ========================================================= */
.owl-carousel .owl-dots { text-align: center; margin-top: 30px; }
.owl-carousel .owl-dot span { width: 10px; height: 10px; background: var(--line-2) !important; border-radius: 50%; margin: 0 5px; transition: all .25s; display: inline-block; }
.owl-carousel .owl-dot.active span { background: var(--orange) !important; width: 28px; border-radius: 6px; }

@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(var(--surface-rgb), 0.98);
        backdrop-filter: blur(14px);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow);
        margin-top: 14px; padding: 16px;
    }
    /* the open menu has a solid panel, so links must use the themed
       text colour — override the transparent-hero light colour */
    .navbar:not(.navbar-solid):not(.navbar-scrolled) .navbar-collapse .nav-link,
    .navbar-collapse .nav-link { color: var(--fog); }
    .navbar:not(.navbar-solid):not(.navbar-scrolled) .navbar-collapse .nav-link:hover,
    .navbar:not(.navbar-solid):not(.navbar-scrolled) .navbar-collapse .nav-item.active .nav-link,
    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-item.active .nav-link { color: var(--white); }
    /* stack the menu items with a little breathing room */
    .navbar-collapse .navbar-nav { align-items: flex-start; gap: 2px; width: 100%; }
    .navbar-collapse .nav-item { width: 100%; }
    .navbar .nav-link-phone { margin: 10px 0 0 !important; display: inline-flex; }
    /* inside the solid open menu the toggle sits on a light panel —
       force themed colours so it stays visible (the transparent-hero
       white-on-white rule above would otherwise hide it) */
    .navbar .navbar-collapse .theme-toggle,
    .navbar:not(.navbar-solid):not(.navbar-scrolled) .navbar-collapse .theme-toggle {
        margin: 12px 0 0 !important;
        color: var(--white);
        background: rgba(var(--surface-rgb), 0.18);
        border-color: var(--line-2);
    }
    .pd-gallery-mosaic { grid-template-columns: repeat(2, 1fr); }
    .pd-gallery-item--feature { grid-column: span 2; grid-row: auto; }
    .pd-gallery-item--feature img { height: 220px; }
    .pd-sidebar { position: static; margin-top: 24px; }
    .hero { padding-top: 110px; }
}
@media (max-width: 575px) {
    .fresh-card, .contact-form-card { padding: 28px; }
    .sd-block { padding: 24px; }
    .pd-gallery-mosaic { grid-template-columns: 1fr; }
    /* single column: the feature tile must not span 2 rows or stretch
       to 100% height (the desktop rule) — that leaves a huge gap */
    .pd-gallery-item--feature { grid-column: auto; grid-row: auto; }
    .pd-gallery-item img,
    .pd-gallery-item--feature img { height: 200px; }
    .hero-stats { gap: 24px; }
    .hero-stat .num { font-size: 32px; }
}

/* =========================================================
   NEW DESIGN SYSTEM — sections unique to this site
   (used by the redesigned pages: steps, feature strip,
    stats band, testimonials, split blocks, marquee, alt grids)
   ========================================================= */

/* split hero variant (sub-pages or home alt) ------------------------------ */
.hero-split { padding: 150px 0 90px; position: relative; }
.hero-split .hero-photo {
    border-radius: 28px; overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid var(--line);
    position: relative;
}
.hero-split .hero-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }

/* feature strip : row of icon features over a card -------------------------- */
.feature-strip { position: relative; margin-top: -50px; z-index: 5; }
.feature-strip-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.feature-cell {
    text-align: center; padding: 24px 18px;
    border-radius: var(--radius-sm);
    transition: background .25s, transform .25s;
}
.feature-cell:hover { background: var(--ink-3); transform: translateY(-4px); }
.feature-cell .fic {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff; display: grid; place-items: center; font-size: 24px;
    box-shadow: var(--shadow-orange);
}
.feature-cell .ft { font-weight: 800; color: var(--white); font-size: 17px; margin-bottom: 4px; }
.feature-cell .fd { color: var(--fog-dim); font-size: 13.5px; }

/* how-we-work : numbered steps -------------------------------------------- */
.steps-section { padding: 100px 0; }
.step-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 38px 28px 30px;
    height: 100%;
    position: relative;
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.step-card:hover { transform: translateY(-8px); border-color: rgba(var(--accent-rgb),0.45); box-shadow: var(--shadow); }
.step-card .step-no {
    position: absolute; top: -22px; right: 28px;
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff; font-weight: 900; font-size: 22px;
    display: grid; place-items: center;
    box-shadow: var(--shadow-orange);
}
.step-card .step-ic { font-size: 30px; color: var(--orange); margin: 14px 0 16px; }
.step-card .step-t { font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.step-card .step-d { color: var(--fog-dim); font-size: 15px; }
/* dashed connector between steps (desktop) */
.steps-row { position: relative; }

/* stats band : bold full-width numbers ------------------------------------ */
.stats-band {
    margin: 30px 0;
    border-radius: var(--radius);
    background: linear-gradient(120deg, var(--orange-deep), var(--orange-2));
    padding: 56px 30px;
    position: relative; overflow: hidden;
}
.stats-band::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(600px 200px at 80% -20%, rgba(255,255,255,0.18), transparent 70%);
}
.stats-band .row { position: relative; z-index: 2; }
.stat-box { text-align: center; color: #fff; }
.stat-box .sb-num { font-size: 48px; font-weight: 900; line-height: 1; }
.stat-box .sb-lbl { font-size: 15px; opacity: .92; margin-top: 8px; }
.stat-box + .stat-box { border-right: 1px solid rgba(255,255,255,0.25); }

/* testimonials ------------------------------------------------------------ */
.testimonials-section { padding: 100px 0; }
.testi-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 30px;
    height: 100%;
    position: relative;
    transition: transform .3s, border-color .3s;
}
.testi-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb),0.45); }
.testi-card .tq { font-size: 30px; color: var(--orange); opacity: .55; }
.testi-card .tt { color: var(--fog); font-size: 16px; margin: 10px 0 20px; }
.testi-stars { color: #f5b301; margin-bottom: 18px; font-size: 14px; }
.testi-who { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.testi-who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); }
.testi-who .twn { font-weight: 800; color: var(--white); }
.testi-who .twr { color: var(--fog-dim); font-size: 13px; }

/* split media block (alternating image + text) ---------------------------- */
.split-block { padding: 90px 0; }
.split-media {
    border-radius: 28px;
    position: relative;
    padding: 38px;
    background:
        radial-gradient(120% 120% at 80% 0%, var(--glow), transparent 55%),
        var(--ink-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .4s ease, box-shadow .4s ease;
}
.split-media:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,0.28); }
/* decorative dashed ring behind the artwork */
.split-media::before {
    content: "";
    position: absolute; inset: 22px;
    border: 2px dashed var(--line-2);
    border-radius: 22px;
    pointer-events: none;
    opacity: .5;
}
.split-media img {
    width: 100%; display: block; position: relative; z-index: 1;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,0.18));
}
.split-media .sm-tag {
    position: absolute; bottom: 24px; right: 24px; z-index: 2;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px 18px;
    display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
}
.split-media .sm-tag.sm-tag-top { bottom: auto; top: 24px; right: auto; left: 24px; }
.split-media .sm-tag .ic { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff; display:grid; place-items:center; }
.split-media .sm-tag .ic.ic-2 { background: linear-gradient(135deg,var(--orange-2),var(--orange)); }
.split-media .sm-tag .t { font-weight: 900; color: var(--white); line-height: 1; }
.split-media .sm-tag .s { font-size: 12px; color: var(--fog-dim); }
.split-list { margin-top: 24px; }
.split-list li {
    display: flex; gap: 14px; align-items: flex-start;
    margin-bottom: 12px; padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.split-list li:hover { background: var(--ink-3); border-color: var(--line); transform: translateX(-4px); }
.split-list li .lic {
    width: 34px; height: 34px; flex: none; border-radius: 9px;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff; display: grid; place-items: center; margin-top: 2px;
    box-shadow: 0 6px 14px var(--glow);
}
.split-list li .lt { font-weight: 800; color: var(--white); display: block; }
.split-list li .ld { color: var(--fog-dim); font-size: 14px; }

/* brand marquee : scrolling tags ------------------------------------------ */
.marquee {
    overflow: hidden; padding: 22px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: var(--ink-3);
}
.marquee-track { display: flex; gap: 50px; width: max-content; animation: marquee 22s linear infinite; }
.marquee-track span { font-size: 22px; font-weight: 800; color: var(--fog-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; }
.marquee-track span i { color: var(--orange); font-size: 16px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* big CTA (dark accent, stands out on light page) ------------------------- */
.cta-final { padding: 0 0 90px; }
.cta-final-card {
    border-radius: 28px;
    background: linear-gradient(130deg, var(--orange-deep), var(--orange) 55%, var(--orange-2));
    padding: 70px 40px; text-align: center; position: relative; overflow: hidden;
    box-shadow: var(--shadow-orange);
}
.cta-final-card::after { content:""; position:absolute; inset:0; background: radial-gradient(500px 240px at 15% 120%, rgba(255,255,255,0.18), transparent 70%); }
.cta-final-card > * { position: relative; z-index: 2; }
.cta-final-card .cf-title { font-size: clamp(28px,5vw,46px); font-weight: 900; color: #fff; margin-bottom: 12px; }
.cta-final-card .cf-sub { color: rgba(255,255,255,0.92); font-size: 18px; margin-bottom: 28px; }
.cta-final-card .btn-x-solid { background: #fff; color: var(--orange-deep); box-shadow: 0 16px 36px rgba(0,0,0,0.2); }
.cta-final-card .btn-x-solid:hover { color: var(--orange-deep); }
.cta-final-card .btn-x-ghost { border-color: rgba(255,255,255,0.6); color: #fff; }
.cta-final-card .btn-x-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.12); }

/* pricing-style service cards (alt layout for services page) -------------- */
.svc-row-card {
    display: flex; gap: 22px; align-items: center;
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px; height: 100%;
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.svc-row-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb),0.45); box-shadow: var(--shadow); }
.svc-row-card .src-ic {
    width: 70px; height: 70px; flex: none; border-radius: 18px;
    background: linear-gradient(135deg, var(--orange), var(--orange-deep));
    color: #fff; font-size: 28px; display: grid; place-items: center; box-shadow: var(--shadow-orange);
}
.svc-row-card .src-t { font-weight: 800; color: var(--white); font-size: 19px; margin-bottom: 6px; }
.svc-row-card .src-d { color: var(--fog-dim); font-size: 14.5px; }
.svc-row-card .src-go { margin-right: auto; color: var(--orange); font-size: 18px; transition: transform .25s; }
.svc-row-card:hover .src-go { transform: translateX(-6px); }

@media (max-width: 991px) {
    .feature-strip { margin-top: 0; }
    .feature-strip-card { grid-template-columns: repeat(2, 1fr); }
    .stat-box + .stat-box { border-right: none; }
}
@media (max-width: 575px) {
    .feature-strip-card { grid-template-columns: 1fr; }
    .stats-band { padding: 40px 20px; }
    .stat-box { margin-bottom: 22px; }
    .cta-final-card { padding: 48px 24px; }
}