/* ==========================================================================
   Home v2 theme — dark/teal redesign layer
   Loaded AFTER theme-tokens.css and home.css / home-ltr.css. Rules here
   are either:
   (a) scoped to .home (marketing homepage), or
   (b) unscoped but only reachable via the public marketing layout
       (_LayoutHome.cshtml) — nav / footer.
   Never touches admin/report/dashboard styling.g

   The 4-theme variable definitions (--gradient, --accent, --band-*, etc.)
   live in theme-tokens.css, shared across all 4 layouts. Every component
   below reads from those variables — no theme-specific component CSS.
   ========================================================================== */

/* ---------- Dark/alternate section band ---------- */
.home .section-dark {
    background: var(--band-bg);
    color: var(--band-text);
    position: relative;
}

    .home .section-dark .section-title,
    .home .section-dark h2,
    .home .section-dark h3,
    .home .section-dark h4,
    .home .section-dark h5 {
        color: var(--band-text);
    }

    .home .section-dark .section-subtitle {
        color: var(--band-text-muted);
    }

    .home .section-dark .service-card {
        background: var(--band-card-bg);
        border: 1px solid var(--band-card-border);
        box-shadow: none;
    }

        .home .section-dark .service-card .card-title {
            color: var(--band-text);
        }

        .home .section-dark .service-card .card-text {
            color: var(--band-text-muted);
        }

        .home .section-dark .service-card:hover {
            border-color: var(--accent);
        }

/* ---------- Hero ---------- */
.home .hero-section {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding-top: 150px;
    background: radial-gradient(120% 90% at 15% 15%, var(--hero-glow-1), transparent 60%), radial-gradient(90% 70% at 85% 85%, var(--hero-glow-2), transparent 55%), var(--hero-bg-base);
    overflow: hidden;
}

    /* Classic's hero-bg-base is fixed directly in :root (home.css) below,
   rather than overridden here, since :root already IS the light theme. */

    .home .hero-section .bottom-img {
        display: none;
    }

.home .hero-headline {
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.28;
    color: var(--hero-text);
    margin-bottom: 1.5rem;
}

.home .hero-section .text-accent {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--accent);
}

.home .hero-section .lead {
    color: var(--hero-text-muted);
    font-size: 1.15rem;
    line-height: 1.9;
}

.home .hero-section .client-section-wrap p {
    color: var(--hero-text-muted) !important;
}

/* ---------- Pill buttons ---------- */
.home .btn-pill-accent {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-weight: 700;
    padding: .9rem 2.4rem;
    border-radius: 999px;
    border: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

    .home .btn-pill-accent:hover {
        background: var(--btn-bg-strong);
        color: var(--btn-text);
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    }

.home .btn-pill-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .25);
    color: var(--hero-text);
    font-weight: 600;
    padding: .85rem 2.2rem;
    border-radius: 999px;
    transition: var(--transition);
}

    .home .btn-pill-outline:hover {
        border-color: var(--accent);
        color: var(--accent);
        transform: translateY(-3px);
    }

/* Footer CTA pills use the same classes outside .home, so define
   unscoped fallbacks too (footer sits outside the .home wrapper). */
.btn-pill-accent {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-weight: 700;
    padding: .8rem 2.1rem;
    border-radius: 999px;
    border: none;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

    .btn-pill-accent:hover {
        background: var(--btn-bg-strong);
        color: var(--btn-text);
        transform: translateY(-3px);
    }

.btn-pill-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .35);
    color: #ffffff;
    font-weight: 600;
    padding: .75rem 1.9rem;
    border-radius: 999px;
    text-decoration: none;
    transition: var(--transition);
}

    .btn-pill-outline:hover {
        border-color: var(--accent);
        color: var(--accent);
        transform: translateY(-3px);
    }

/* ---------- Vertical timeline (process section) ---------- */
.home .timeline {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

    .home .timeline::before {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 6px;
        inset-inline-start: 34px;
        width: 2px;
        background: rgba(0, 0, 0, 0.08);
    }

.home .timeline-item {
    position: relative;
    display: flex;
    gap: 1.75rem;
    margin-bottom: 3rem;
}

    .home .timeline-item:last-child {
        margin-bottom: 0;
    }

.home .timeline-node {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    color: var(--accent);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
}

.home .timeline-content {
    padding-top: .65rem;
}

    .home .timeline-content h5 {
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: .5rem;
    }

    .home .timeline-content p {
        color: #666;
        margin: 0;
        max-width: 560px;
    }

@media (max-width: 576px) {
    .home .timeline-node {
        width: 52px;
        height: 52px;
        font-size: 1rem;
        flex-basis: 52px;
    }

    .home .timeline::before {
        inset-inline-start: 25px;
    }

    .home .timeline-item {
        gap: 1.1rem;
    }
}

/* ---------- Solid-band override for the influencers & CTA bands ---------- */
.home #influencers.gradient-section,
.home #cta.gradient-section {
    background: radial-gradient(80% 60% at 50% 0%, var(--hero-glow-1), transparent 60%), var(--band-bg);
    color: var(--band-text);
}

    .home #influencers.gradient-section .section-title,
    .home #influencers.gradient-section .stat-number,
    .home #cta.gradient-section .cta-title {
        color: var(--band-text);
    }

    .home #influencers.gradient-section p,
    .home #influencers.gradient-section .stat-label,
    .home #cta.gradient-section .cta-lead,
    .home #cta.gradient-section .cta-text {
        color: var(--band-text-muted);
    }

.home .hero-trusted-by {
    color: var(--hero-text);
}

/* The static "trusted by" logo strip is white monochrome artwork (made for
   a dark hero) — invert it on Light theme so it's visible against the
   light background; dark theme needs no change. */
html[data-bs-theme="light"] .home .logos-slider-viewport img {
    filter: brightness(0);
    opacity: .75;
}

.home #cta .btn-outline-light {
    border: none;
}

/* ---------- Pricing tier accents ---------- */
.home .pricing-gradient-1 {
    background: #5B6472; /* Basic — neutral slate, stays theme-independent */
}

.home .pricing-gradient-4 {
    background: linear-gradient(120deg, #23a8ab, #1a8a8d); /* Standard — neutral deep teal */
}

.home .pricing-gradient-2 {
    background: var(--btn-bg); /* Gold / Popular — always matches the active theme */
}

.home .pricing-gradient-3 {
    background: linear-gradient(120deg, #152e53, #1e3a5f); /* Platinum — neutral graphite */
}

.home .btn-gradient-1 {
    background: #5B6472;
}

.home .btn-gradient-4 {
    background: linear-gradient(120deg, #23a8ab, #1a8a8d);
}

.home .btn-gradient-2 {
    background: var(--btn-bg);
    color: var(--btn-text);
}

.home .btn-gradient-3 {
    background: linear-gradient(120deg, #152e53, #1e3a5f);
}

.home .popular .pricing-header,
.home .popular .btn-gradient-2 {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

/* Prevent multi-word nav labels (e.g. "كونسبت بلس", "تسجيل دخول") from
   wrapping to 2 lines when the nav is tight. */
header .navbar .nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) {
    header .navbar .navbar-nav .nav-item {
        margin-inline-start: .1rem;
        margin-inline-end: .1rem;
    }
}

/* ---------- Nav: default (top-of-page transparent) text color ---------- */
.navbar.bg-transparent .navbar-nav .nav-link {
    color: var(--nav-text);
}

/* Fix nav labels wrapping onto 2 lines. Flex items shrink below their
   content's natural width by default, which was letting multi-word Arabic
   labels (e.g. "تسجيل دخول", "كونسبت بلس") wrap mid-phrase once the theme
   switcher + language button added extra width to an already-busy nav. */
header .navbar .navbar-nav .nav-item {
    flex-shrink: 0;
}

header .navbar .navbar-nav .nav-link {
    white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1300px) {
    header .navbar .navbar-nav .nav-link {
        padding-left: .6rem;
        padding-right: .6rem;
        font-size: .95rem;
    }
}

/* Vertically center all nav items (theme dots + language flag were sitting
   higher than the text links because the raw buttons have no line-height). */
header .navbar .navbar-nav {
    align-items: center;
}

/* In RTL, Bootstrap-4's ml-auto pushes the menu the wrong way; neutralize it
   and use the logical margin so the menu sits correctly on both sides. */

/* Keep the theme-switcher row from wrapping and align it to the nav line. */
header .navbar .theme-switcher-icons {
    white-space: nowrap;
}

header .navbar .btn-lang {
    display: inline-flex;
    align-items: center;
}

/* Hover/active always uses the accent, and must win over the rule above */
header .navbar .navbar-nav .nav-link:hover,
header .navbar .navbar-nav .nav-link.active {
    color: var(--accent);
}

/* Scrolled nav is always readable white-on-dark, regardless of theme */
.navbar.bg-transparent.affix .navbar-nav .nav-link {
    color: #ffffff;
}

    .navbar.bg-transparent.affix .navbar-nav .nav-link:hover,
    .navbar.bg-transparent.affix .navbar-nav .nav-link.active {
        color: var(--accent);
    }

/* Old template hardcodes the purple/blue brand gradient on the
   scrolled ("affix") nav state and on mobile — retint per theme. */
.affix {
    background-color: var(--chrome-bg) !important;
}

.bg-transparent.affix {
    background: var(--chrome-bg) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

@media (min-width: 320px) and (max-width: 992px) {
    .navbar {
        background: var(--chrome-bg) !important;
    }
}

/* The site logo is now full-color (navy + teal), not the old white
   line-work — no filter needed on a light background (natural contrast is
   already good). But the navy portion is too close in tone to the dark
   chrome-bg nav (dark theme throughout, and light theme once scrolled), so
   give it a light backdrop chip specifically wherever the nav goes dark. */
/* Logo: original navy+teal colors (no white box, no color filter). To keep
   the dark-navy parts legible on the dark nav, add a soft white glow behind
   the artwork via drop-shadow — subtle, not a hard box. */
html[data-bs-theme="dark"] .navbar-brand,
html[data-bs-theme="light"] .navbar-brand {
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    height: 66px;
}

html[data-bs-theme="dark"] .navbar-brand img,
html[data-bs-theme="light"] .navbar-brand img {
    max-height: 62px;
    width: auto;
    display: block;
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 1))
        drop-shadow(0 0 14px rgba(255, 255, 255, 0.85))
        drop-shadow(0 0 32px rgba(255, 255, 255, 0.5))
        drop-shadow(0 0 48px rgba(35, 168, 171, 0.4));
}

/* ---------- .app-nav / .app-bg (used by Views/Shared/_Layout.cshtml's
   nav, and shared with the homepage footer-top) ---------- */
.app-nav {
    background: var(--chrome-bg);
}

    .app-nav .nav-link:hover,
    .app-nav .nav-link.active {
        color: var(--accent);
    }

.app-bg {
    background: var(--chrome-bg);
}

.btn-hover:hover {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
}

footer.footer-section .footer-top {
    background: var(--chrome-bg);
}

.footer-cta-pills {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .home .hero-section {
        min-height: auto;
        padding: 8rem 0 4rem;
    }
}

/* ---------- Portfolio video panel (auto-scrolling marquee) ---------- */
.home .video-grid {
    overflow: hidden;
    direction: ltr;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.home .video-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: video-marquee 40s linear infinite;
}


.home .video-grid:hover .video-track {
    animation-play-state: paused;
}

@keyframes video-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home .video-track {
        animation: none;
    }
}

.home .video-card {
    flex: 0 0 240px;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ---------- Phone-frame mockup (pure CSS, no external image asset) ---------- */
.home .phone-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 19.5;
    background: #152e53;
    border-radius: 34px;
    padding: 10px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10), 0 20px 40px rgba(0, 0, 0, 0.35);
    transition: var(--transition);
}

.home .video-card:hover .phone-frame {
    transform: translateY(-6px);
    box-shadow: 0 0 0 2px var(--accent), 0 24px 44px rgba(0, 0, 0, 0.4);
}

.home .phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 20px;
    background: #152e53;
    border-radius: 12px;
    z-index: 3;
}

.home .phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: var(--band-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home .phone-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home .phone-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--band-text-muted);
    text-align: center;
    padding: 1rem;
    font-size: .85rem;
}

    .home .phone-placeholder i {
        font-size: 2rem;
        color: var(--accent);
    }

.home .phone-play-btn {
    position: absolute;
    bottom: 38px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
}

.home .phone-views {
    position: absolute;
    top: 32px;
    inset-inline-end: 10px;
    background: rgba(10, 13, 18, 0.65);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    z-index: 2;
}

.home .phone-scrubber {
    position: absolute;
    bottom: 14px;
    inset-inline-start: 14px;
    inset-inline-end: 14px;
    z-index: 2;
}

.home .phone-range {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, .3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 0;
}

    .home .phone-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--accent);
        cursor: pointer;
    }

    .home .phone-range::-moz-range-thumb {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--accent);
        border: none;
        cursor: pointer;
    }

/* Static TikTok thumbnail (served via /Home/VideoThumb — never expires).
   The whole card is a link; clicking opens the TikTok video in a new tab. */
.home .phone-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home .video-card-info {
    padding: .85rem .3rem 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: start;
}

/* The track above is forced direction:ltr to fix the marquee animation;
   re-establish RTL just for the caption text on Arabic pages so it stays
   correctly right-aligned (text-align:start otherwise resolves to "left"
   once it inherits the track's forced ltr). */
html[dir="rtl"] .home .video-card-info {
    direction: rtl;
}

.home .vc-campaign {
    color: var(--accent);
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home .vc-handle {
    color: var(--band-text, #fff);
    font-weight: 600;
    font-size: .82rem;
    opacity: .9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home .vc-title {
    color: var(--band-text-muted);
    font-size: .82rem;
    line-height: 1.45;
    margin-top: .15rem;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Legacy caption classes kept for safety (older markup). */
.home .video-card-client {
    color: var(--accent);
    font-weight: 700;
    font-size: .85rem;
}

.home .video-card-title {
    color: var(--band-text-muted);
    font-size: .9rem;
    line-height: 1.5;
}

/* Theme switcher icon styles now live in theme-tokens.css (shared
   across all 4 layouts). */

/* ---------- Illustration color treatment ----------
   The stock illustrations (concept_plus2-6.png) are a vivid cobalt blue,
   noticeably off the brand's muted navy/teal palette. mix-blend-mode:color
   takes the hue+saturation of an overlay and applies it to the image's
   existing luminosity — recoloring toward the brand family while keeping
   the illustration's original detail, contrast and readability intact
   (unlike a flat duotone, which would lose too much of the original art). */
.home .illustration-wrap {
    position: relative;
    overflow: hidden;
    display: block;
}

    .home .illustration-wrap img {
        display: block;
        width: 100%;
        filter: saturate(.85) brightness(.95);
    }

    .home .illustration-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--gradient);
        mix-blend-mode: color;
        opacity: .55;
        pointer-events: none;
    }

/* In dark mode the illustrations' baked-in near-white backgrounds stand
   out as bright boxes. Darken them and add a soft framing so they sit
   naturally inside the dark theme instead of glowing against it. */
html[data-bs-theme="dark"] .home .illustration-wrap {
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

    html[data-bs-theme="dark"] .home .illustration-wrap img {
        filter: saturate(.8) brightness(.72) contrast(1.02);
    }

    html[data-bs-theme="dark"] .home .illustration-wrap::after {
        background: linear-gradient(180deg, rgba(13, 27, 46, 0) 55%, rgba(13, 27, 46, 0.55) 100%), var(--gradient);
        opacity: .6;
        mix-blend-mode: normal;
        mix-blend-mode: color;
    }

/* ---------- Typography: cleaner headings (closer to DigitalDone) ----------
   The base template uses rounded "Comfortaa" for headings, which reads
   playful. DigitalDone uses a tight bold geometric sans. Tajawal (already
   loaded, and bilingual) is a much closer match. */
.home h1, .home h2, .home h3, .home h4, .home h5,
.home .section-title, .home .hero-headline,
.home .cta-title, .home .ugc-stat-number {
    font-family: "Tajawal", "Inter", sans-serif;
    letter-spacing: -0.01em;
}

/* ---------- TikTok video panel: static thumbnail in phone frame ---------- */
.home .phone-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #1a2438, #152e53);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    /* Fallback glyph shown only when there's no thumbnail image (or it errored). */
    .home .phone-cover.no-thumb::after {
        content: "\F5B0"; /* bi-tiktok */
        font-family: "bootstrap-icons";
        font-size: 2.6rem;
        color: var(--accent);
        opacity: .8;
    }

.home .phone-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(34, 211, 166, 0.92);
    color: #0d4a4c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform .2s ease, background .2s ease;
}

.home .video-card:hover .phone-play-badge {
    transform: translate(-50%, -50%) scale(1.12);
    background: var(--accent);
}

.home .video-track-static {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

/* ---------- Section headings: theme-reactive, not hardcoded ----------
   These were hardcoded to a fixed dark color under the assumption that
   "plain" sections (no explicit background of their own — About, Process,
   Projects, UGC Packages) always sit on a light page. That assumption
   broke once the page body itself became theme-reactive (dark in Dark
   theme): the same plain sections can now be dark too, and hardcoded dark
   text on a dark background is invisible. Theme-reactive color fixes this
   for every plain section at once; the dark-band overrides further below
   still correctly force light text on sections that are always dark by
   design (.section-dark, .gradient-section, etc), regardless of the
   site-wide theme. */
.home .section-title {
    color: var(--hero-text);
}

.home .section-subtitle {
    color: var(--hero-text-muted);
}

/* Bootstrap's .text-secondary is a fixed gray assuming a light page —
   same issue as section-title above, now that plain sections can be dark
   too. Only used once on the homepage (the smart-reports intro line). */
.home .text-secondary {
    color: var(--hero-text-muted) !important;
}

/* On dark bands + gradient sections, headings must be light again. */
.home .section-dark .section-title,
.home .gradient-section .section-title,
.home .gradient-section .section-subtitle,
.home .gradient-section h2,
.home .gradient-section h3 {
    color: var(--band-text, #fff);
}

/* The "gradient-text" sub-headline reads as invisible when the gradient is
   very light. Give it a solid accent-driven fallback that always has contrast. */
.home .gradient-text {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--accent-strong, #23a8ab);
}

/* Browser autofill (Chrome/Edge) applies its own pale blue/yellow tint by
   default to filled fields, regardless of site CSS — override it so forms
   stay visually consistent. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #152e53 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ---------- Auth pages (Login/Signup, _Layout.cshtml) — theme-aware ---------- */
/* Body theme — light and dark BOTH defined explicitly and keyed off the
   single data-bs-theme attribute, with background+text always paired in
   the same rule so they can never end up driven by different sources. */
html[data-bs-theme="light"] body,
body {
    background: #FFFFFF;
    color: #152e53;
}

html[data-bs-theme="dark"] body {
    background: var(--hero-bg-base);
    color: var(--hero-text);
}

.sign-up-form-wrap {
    color: var(--band-text);
}

    .sign-up-form-wrap .sign-up-form-header {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .sign-up-form-wrap .logo-title {
        padding: 14px 28px;
        border-radius: 14px;
    }

    .sign-up-form-wrap h4 {
        color: var(--band-text) !important;
    }

    .sign-up-form-wrap .form-control {
        color: var(--band-text);
    }

    .sign-up-form-wrap a:not(.btn) {
        color: var(--accent);
    }

    /* The submit button starts disabled (enabled via JS once the form
   validates). Bootstrap's default .disabled opacity washes the brand
   gradient out to a flat gray — use a deliberate muted brand tone instead
   so it still reads as "part of the site" while signaling not-yet-active. */
    .sign-up-form-wrap .btn.app-bg.disabled {
        opacity: 1;
        background: #5B6472 !important;
        background-image: none !important;
    }

.home .contact-us-content h3,
.home .contact-us-content h5 {
    color: var(--primary-dark) !important;
    opacity: 1 !important;
}

/* ---------- Testimonials (theme-aware) ---------- */
.home #testimonials.bg-light {
    background: var(--band-bg) !important;
}

.home #testimonials .section-title {
    color: var(--band-text);
}

.home #testimonials .section-subtitle {
    color: var(--band-text-muted);
}

.home #testimonials .testimonial-card {
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-border);
    box-shadow: none;
}

.home #testimonials .testimonial-text {
    color: var(--band-text-muted);
}

.home #testimonials .client-details h5 {
    color: var(--band-text);
}

.home #testimonials .testimonial-rating {
    color: #FFC53D;
}

/* ---------- UGC highlight stat panel (redesigned) ---------- */
.home .ugc-highlight-panel {
    border-radius: 24px;
    background: var(--band-bg);
    padding: 3px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
}

.home .ugc-highlight-inner {
    border-radius: 22px;
    padding: 3rem 2rem;
    background: radial-gradient(90% 70% at 50% 0%, var(--hero-glow-1), transparent 60%), var(--band-bg);
}

.home .ugc-stat-number {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(34, 211, 166, 0.35);
}

.home .ugc-stat-label {
    color: var(--band-text);
    font-weight: 600;
    margin-top: .5rem;
}

.home .ugc-stars {
    color: #FFC53D;
    font-size: 1.15rem;
    letter-spacing: 2px;
}

.home .ugc-feature-card {
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-border);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    transition: var(--transition);
}

    .home .ugc-feature-card:hover {
        border-color: var(--accent);
    }

.home .ugc-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .home .ugc-feature-list li {
        display: flex;
        align-items: center;
        gap: .75rem;
        color: var(--band-text);
        font-size: 1.05rem;
        padding: .6rem 0;
    }

        .home .ugc-feature-list li i {
            color: var(--accent);
            font-size: 1.2rem;
            flex-shrink: 0;
        }

/* ---------- Partner logos (static grid, DigitalDone-style) ----------
   Kept on a LIGHT background like DigitalDone: brand logos come in many
   colors and read best on white; a dark band would hide most of them. */


.home .partner-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 1.5rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 992px) {
    .home .partner-logos {
        grid-template-columns: repeat(6, 1fr);
    }
}

.home .partner-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 1rem;
}

    /* Soft mint diagonal brush shape behind each logo (like DigitalDone). */
    .home .partner-logo::before {
        content: "";
        position: absolute;
        inset: 12% 8%;
        background: linear-gradient(120deg, rgba(34, 211, 166, 0.16), rgba(34, 211, 166, 0.05));
        transform: skewX(-14deg) rotate(-3deg);
        border-radius: 6px;
        z-index: 0;
    }

    .home .partner-logo img {
        position: relative;
        z-index: 1;
        max-height: 56px;
        max-width: 85%;
        object-fit: contain;
        background: #ffffff;
        padding: .6rem .9rem;
        border-radius: .6rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        transition: transform .2s ease;
    }

    .home .partner-logo:hover img {
        transform: scale(1.06);
    }

@media (max-width: 575px) {
    .home .partner-logos {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem .75rem;
    }

    .home .partner-logo {
        min-height: 80px;
        padding: .5rem;
    }

        .home .partner-logo img {
            max-height: 50px;
        }
}

/* =====================================================================
   AUTHORITATIVE CONTRAST LAYER  (must stay at the very end of this file)
   ---------------------------------------------------------------------
   Root cause of the recurring dark-mode contrast bugs: the page body is
   theme-reactive (dark in Dark theme), but many text elements have either
   a hardcoded light-page color or NO color at all (so they inherit body).
   Instead of patching each class as it's reported, this block maps the
   text elements that sit DIRECTLY on the page background to theme
   variables, once, comprehensively.

   Safety principle — the reason this doesn't break light-surface content:
   elements that carry their own non-transparent background (cards, pricing
   cards, gradient bands, badges, buttons) are EXPLICITLY excluded / re-set
   to dark below. So "text on the page" follows the theme, while "text on a
   light card" stays dark, in both themes.
   ===================================================================== */

/* 1) Generic text sitting on the page background follows the theme.
      Defined explicitly per theme (not only via --hero-text) so it's
      pinned directly to data-bs-theme. */
html[data-bs-theme="light"] .home h1, html[data-bs-theme="light"] .home h2,
html[data-bs-theme="light"] .home h3, html[data-bs-theme="light"] .home h4,
html[data-bs-theme="light"] .home h5, html[data-bs-theme="light"] .home h6,
html[data-bs-theme="light"] .home p, html[data-bs-theme="light"] .home li,
html[data-bs-theme="light"] .home span, html[data-bs-theme="light"] .home label,
html[data-bs-theme="light"] .home address, html[data-bs-theme="light"] .home .lead,
html[data-bs-theme="light"] .home .card-title, html[data-bs-theme="light"] .home .card-text,
html[data-bs-theme="light"] .home .section-title,
html[data-bs-theme="light"] .home .section-subtitle {
    color: #152e53;
}

html[data-bs-theme="dark"] .home h1, html[data-bs-theme="dark"] .home h2,
html[data-bs-theme="dark"] .home h3, html[data-bs-theme="dark"] .home h4,
html[data-bs-theme="dark"] .home h5, html[data-bs-theme="dark"] .home h6,
html[data-bs-theme="dark"] .home p, html[data-bs-theme="dark"] .home li,
html[data-bs-theme="dark"] .home span, html[data-bs-theme="dark"] .home label,
html[data-bs-theme="dark"] .home address, html[data-bs-theme="dark"] .home .lead,
html[data-bs-theme="dark"] .home .card-title, html[data-bs-theme="dark"] .home .card-text,
html[data-bs-theme="dark"] .home .section-title,
html[data-bs-theme="dark"] .home .section-subtitle {
    color: #F2F6F6;
}

/* Muted/secondary text -> the muted theme tone. */
html[data-bs-theme="light"] .home .text-muted,
html[data-bs-theme="light"] .home .text-secondary,
html[data-bs-theme="light"] .home .section-subtitle,
html[data-bs-theme="light"] .home small {
    color: #4B6070 !important;
}

html[data-bs-theme="dark"] .home .text-muted,
html[data-bs-theme="dark"] .home .text-secondary,
html[data-bs-theme="dark"] .home .section-subtitle,
html[data-bs-theme="dark"] .home small {
    color: #9FB3BB !important;
}

/* 2) Anything on a LIGHT surface must stay dark, both themes. These
      selectors win because they're more specific than the blanket rule
      above (surface class + element). */
.home .pricing-card,
.home .pricing-card h1, .home .pricing-card h2, .home .pricing-card h3,
.home .pricing-card h4, .home .pricing-card h5, .home .pricing-card h6,
.home .pricing-card p, .home .pricing-card li, .home .pricing-card span,
.home .service-card .card-title, .home .service-card .card-text,
.home .testimonial-card p, .home .testimonial-card h1,
.home .testimonial-card h2, .home .testimonial-card h3,
.home .testimonial-card h4, .home .testimonial-card h5,
.home .testimonial-card h6, .home .testimonial-card span,
.home .band-card-bg, .home .fancy-card,
.home .card:not(.text-bg-primary):not(.text-bg-success):not(.text-bg-warning):not(.text-bg-danger) .card-title {
    color: var(--primary-dark);
}

    .home .pricing-card .text-muted,
    .home .pricing-card small,
    .home .service-card .card-text {
        color: #5B6B82 !important;
    }

/* 3) Accent-colored text (teal) stays accent — never overridden by the
      blanket rule, so re-assert it after. */
.home .text-accent, .home .gradient-text,
.home .vc-campaign, .home .price {
    color: var(--accent) !important;
}

.home .price {
    color: var(--accent-strong, var(--accent)) !important;
}

/* 4) .section-dark uses var(--band-bg) which FLIPS with the theme (dark in
      Dark theme, light in Light theme), so its text must follow the
      matching var(--band-text) — NOT a hardcoded light color, which would
      be light-on-light in Light theme. */
.home .section-dark .section-title,
.home .section-dark .section-subtitle,
.home .section-dark h1, .home .section-dark h2, .home .section-dark h3,
.home .section-dark h4, .home .section-dark p, .home .section-dark span {
    color: var(--band-text) !important;
}

/* #cta and #influencers use theme-flipping backgrounds (var(--band-bg):
   light in light mode, dark in dark mode), so their text must FLIP too via
   var(--band-text) — a hardcoded light color is invisible on the light
   background in light mode. */
.home #cta.gradient-section .cta-title,
.home #cta.gradient-section .cta-lead,
.home #cta.gradient-section .cta-text,
.home #cta.gradient-section h1, .home #cta.gradient-section h2,
.home #cta.gradient-section h3, .home #cta.gradient-section p,
.home #cta.gradient-section span,
.home #influencers.gradient-section .section-title,
.home #influencers.gradient-section .stat-number,
.home #influencers.gradient-section .stat-label,
.home #influencers.gradient-section h1, .home #influencers.gradient-section h2,
.home #influencers.gradient-section h3, .home #influencers.gradient-section p,
.home #influencers.gradient-section span {
    color: var(--band-text) !important;
}

.home #cta.gradient-section .cta-lead,
.home #cta.gradient-section .cta-text,
.home #influencers.gradient-section .stat-label {
    color: var(--band-text-muted) !important;
}

/* Only gradient sections that are genuinely always-dark (NOT #cta /
   #influencers) keep hardcoded light text in both themes. */
.home .gradient-section:not(#cta):not(#influencers) .section-title,
.home .gradient-section:not(#cta):not(#influencers) .section-subtitle,
.home .gradient-section:not(#cta):not(#influencers) h1,
.home .gradient-section:not(#cta):not(#influencers) h2,
.home .gradient-section:not(#cta):not(#influencers) h3,
.home .gradient-section:not(#cta):not(#influencers) h4,
.home .gradient-section:not(#cta):not(#influencers) p,
.home .gradient-section:not(#cta):not(#influencers) span {
    color: #F2F6F6 !important;
}

/* Buttons keep their own text color (white on accent fill). */
.home .btn-pill-accent, .home .btn-primary, .home .btn-whatsapp {
    color: #ffffff !important;
}

/* =====================================================================
   PRICING HEADER TITLE CONTRAST (per-header, both themes)
   ---------------------------------------------------------------------
   Each pricing card header has a different background colour. The
   Platinum header (pricing-gradient-3) is a DARK graphite in both themes,
   so its "الباقة البلاتينية" title was dark-on-dark = invisible (the
   authoritative layer pins all .pricing-title dark). The other three
   headers are mid/light enough that a light title reads well. Set each
   header's title colour to match ITS OWN background, in both themes.
   ===================================================================== */

/* Dark headers -> light title (Platinum graphite, Standard deep teal,
   Basic slate all read better with white text). */
.home .pricing-gradient-1 .pricing-title,
.home .pricing-gradient-2 .pricing-title,
.home .pricing-gradient-3 .pricing-title,
.home .pricing-gradient-4 .pricing-title {
    color: #FFFFFF !important;
}

/* =====================================================================
   PRICING PERIOD LABELS + REPORT-PREVIEW DISCLAIMER
   ---------------------------------------------------------------------
   (a) Duration labels ("شهر", "3 أشهر", ...) are the first <span> in each
       .pricing-duration-list row; they sit on the WHITE pricing card but
       render faint gray. Darken for readability.
   (b) The .report-preview block (intro + .note disclaimer) sits on the
       DARK PAGE background, not a white card, so it must FLIP with the
       theme (light in dark mode, dark in light mode).
   ===================================================================== */
.home .pricing-duration-list li > span:first-child {
    color: #33455F !important;
}

html[data-bs-theme="dark"] .home .report-preview p,
html[data-bs-theme="dark"] .home .report-preview .note {
    color: #9FB3BB !important;
}

html[data-bs-theme="light"] .home .report-preview p,
html[data-bs-theme="light"] .home .report-preview .note {
    color: #4B6070 !important;
}
/* =====================================================================
   SERVICES SECTION — DigitalDone-style connected cards
   Full-width dark cards in a single column, icon on the (RTL) right,
   connected by a teal down-arrow between each.
   ===================================================================== */
.home #services .row.g-4 {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.home #services .row.g-4 > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
    position: relative;
}

/* teal connector between cards — a simple thin GLOWING vertical line
   (matches DigitalDone exactly: no chevron, no badge, just a lit line). */
.home #services .row.g-4 > [class*="col-"]:not(:last-child) {
    margin-bottom: 60px;
}

.home #services .row.g-4 > [class*="col-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -50px;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow:
        0 0 6px rgba(35, 168, 171, 0.8),
        0 0 12px rgba(35, 168, 171, 0.5);
}

/* no second element needed — keep ::before empty/hidden */
.home #services .row.g-4 > [class*="col-"]:not(:last-child)::before {
    content: none;
}

.home #services .service-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1.75rem;
    text-align: right;
    padding: 2.25rem 2.5rem;
    min-height: 0;
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-border);
    border-radius: 20px;
}

.home #services .service-card .card-icon {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    margin: 0 !important;
    border-radius: 14px;
    background: rgba(35, 168, 171, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home #services .service-card .card-icon i {
    font-size: 1.6rem;
    color: var(--accent);
}

.home #services .service-card .card-body-text {
    flex: 1 1 auto;
    max-width: 60%;
}

.home #services .service-card .card-title {
    color: #ffffff !important;
    font-size: 1.4rem;
    margin-bottom: .6rem !important;
}

.home #services .service-card .card-text {
    color: var(--band-text-muted) !important;
    margin: 0;
    line-height: 1.9;
}

@media (max-width: 768px) {
    .home #services .service-card {
        padding: 1.5rem;
        gap: 1rem;
    }
    .home #services .service-card .card-body-text { max-width: 100%; }
}
/* =====================================================================
   PROCESS TIMELINE — DigitalDone-style alternating cards
   Light section, central line, teal numbered nodes, white cards
   alternating left/right with a pointer toward the line.
   ===================================================================== */
.home #process .timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0;
}

/* central vertical line */
.home #process .timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(0, 0, 0, 0.10);
}

.home #process .timeline-item {
    position: relative;
    width: 50%;
    margin-bottom: 3.5rem;
    display: block;
}

/* odd items -> right side (RTL: content sits on the right half) */
.home #process .timeline-item:nth-child(odd) {
    margin-inline-start: 50%;
    padding-inline-start: 3rem;
}

/* even items -> left side */
.home #process .timeline-item:nth-child(even) {
    margin-inline-start: 0;
    padding-inline-end: 3rem;
    text-align: right;
}

/* numbered teal node on the center line */
.home #process .timeline-node {
    position: absolute;
    top: 6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #0d4a4c;
    border: 4px solid var(--hero-bg-base, #152e53);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
    z-index: 2;
    flex: none;
}

.home #process .timeline-item:nth-child(odd) .timeline-node {
    inset-inline-start: -20px;
}

.home #process .timeline-item:nth-child(even) .timeline-node {
    inset-inline-end: -20px;
}

/* white card */
.home #process .timeline-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.75rem 2rem;
    box-shadow: 0 10px 30px rgba(16, 33, 60, 0.10);
    padding-top: 1.75rem;
}

.home #process .timeline-content h5 {
    color: #152e53 !important;
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: .6rem;
}

.home #process .timeline-content p {
    color: #5B6B82 !important;
    margin: 0;
    line-height: 1.9;
    max-width: none;
}

/* stack on mobile: everything to one side */
@media (max-width: 768px) {
    .home #process .timeline::before { left: 20px; }
    .home #process .timeline-item,
    .home #process .timeline-item:nth-child(odd),
    .home #process .timeline-item:nth-child(even) {
        width: 100%;
        margin-inline-start: 0;
        padding-inline-start: 3.5rem;
        padding-inline-end: 0;
        text-align: right;
    }
    .home #process .timeline-item:nth-child(odd) .timeline-node,
    .home #process .timeline-item:nth-child(even) .timeline-node {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }
}

/* =====================================================================
   ABOUT SECTION — mini cards (replacing the removed illustration)
   Two stacked dark cards (رؤيتنا / رسالتنا) in the left column, matching
   the DigitalDone reference. Row-reverse so icon sits on the RTL right.
   ===================================================================== */
.home #about .about-mini-card {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1.25rem;
    text-align: right;
    padding: 1.75rem 2rem;
    background: var(--band-card-bg);
    border: 1px solid var(--band-card-border);
    border-radius: 18px;
}

.home #about .about-mini-card .card-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin: 0 !important;
    border-radius: 12px;
    background: rgba(35, 168, 171, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home #about .about-mini-card .card-icon i {
    font-size: 1.4rem;
    color: var(--accent);
}

.home #about .about-mini-card .card-title {
    color: #ffffff !important;
    font-size: 1.25rem;
    margin-bottom: .5rem !important;
}

.home #about .about-mini-card .card-text {
    color: var(--band-text-muted) !important;
    margin: 0;
    line-height: 1.8;
}

/* =====================================================================
   SERVICES ANIMATION — cards fade+slide in, icon pulse on hover
   ===================================================================== */
@keyframes svc-fade-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.home #services .row.g-4 > [class*="col-"] {
    opacity: 0;
    animation: svc-fade-in .6s ease forwards;
}

.home #services .row.g-4 > [class*="col-"]:nth-child(1) { animation-delay: .05s; }
.home #services .row.g-4 > [class*="col-"]:nth-child(2) { animation-delay: .20s; }
.home #services .row.g-4 > [class*="col-"]:nth-child(3) { animation-delay: .35s; }
.home #services .row.g-4 > [class*="col-"]:nth-child(4) { animation-delay: .50s; }
.home #services .row.g-4 > [class*="col-"]:nth-child(5) { animation-delay: .65s; }

/* card lift + icon pop on hover */
.home #services .service-card {
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home #services .service-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.home #services .service-card .card-icon {
    transition: transform .25s ease, background .25s ease;
}

.home #services .service-card:hover .card-icon {
    transform: scale(1.12);
    background: rgba(35, 168, 171, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .home #services .row.g-4 > [class*="col-"] {
        opacity: 1;
        animation: none;
    }
}

/* =====================================================================
   FOUNDER SECTION — DigitalDone-style
   Photo (left) with teal chevron shapes behind it; name/title/bio/quote
   on the right. Section follows the page theme.
   ===================================================================== */
.home #founder .founder-photo-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 380px;
}

/* teal chevron shapes behind the photo */
.home #founder .founder-shape {
    position: absolute;
    background: var(--accent);
    z-index: 0;
}

.home #founder .founder-shape-1 {
    width: 120px;
    height: 220px;
    inset-inline-start: 8%;
    top: 18%;
    clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
    opacity: .9;
}

.home #founder .founder-shape-2 {
    width: 150px;
    height: 260px;
    inset-inline-start: 24%;
    top: 26%;
    clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
    opacity: .55;
}

.home #founder .founder-photo {
    position: relative;
    z-index: 1;
    max-height: 460px;
    max-width: 100%;
    object-fit: contain;
}

/* fallback if photo missing: show a teal silhouette block */
.home #founder .founder-photo-wrap.no-photo {
    min-height: 340px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(35,168,171,.18), rgba(21,46,83,.25));
    border: 1px dashed var(--band-card-border, rgba(255,255,255,.15));
}

.home #founder .founder-name {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--hero-text);
    margin-bottom: .35rem;
}

.home #founder .founder-title {
    color: var(--accent);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
}

.home #founder .founder-bio {
    color: var(--hero-text-muted);
    line-height: 2;
    margin-bottom: 1rem;
}

.home #founder .founder-quote {
    border-inline-start: 3px solid var(--accent);
    padding-inline-start: 1.25rem;
    margin: 1.75rem 0 0;
}

.home #founder .founder-quote p {
    color: var(--hero-text-muted);
    font-style: italic;
    line-height: 1.9;
    margin-bottom: .5rem;
}

.home #founder .founder-quote-tag {
    color: var(--accent) !important;
    font-weight: 700;
    font-style: normal !important;
    margin: 0 !important;
}

/* On LIGHT theme (matching the reference's light founder section) the
   name/bio go dark automatically via --hero-text/--hero-text-muted. */

@media (max-width: 768px) {
    .home #founder .founder-photo-wrap { min-height: 300px; }
    .home #founder .founder-shape-1,
    .home #founder .founder-shape-2 { display: none; }
}

/* =====================================================================
   SCROLL REVEAL — panels/cards fade+rise as they enter the viewport.
   Works via a tiny IntersectionObserver (added in a <script> in the
   layout, or inline). Elements start hidden and get .in-view when seen.
   Falls back to visible if JS is off (see :not(.reveal-ready)).
   ===================================================================== */
/* [duplicate reveal rule removed] */

.home.reveal-ready .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* stagger children when a container is revealed */
.home.reveal-ready .reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.home.reveal-ready .reveal-stagger.in-view > *          { opacity: 1; transform: translateY(0); }
.home.reveal-ready .reveal-stagger.in-view > *:nth-child(1) { transition-delay: .05s; }
.home.reveal-ready .reveal-stagger.in-view > *:nth-child(2) { transition-delay: .15s; }
.home.reveal-ready .reveal-stagger.in-view > *:nth-child(3) { transition-delay: .25s; }
.home.reveal-ready .reveal-stagger.in-view > *:nth-child(4) { transition-delay: .35s; }
.home.reveal-ready .reveal-stagger.in-view > *:nth-child(5) { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
    .home.reveal-ready .reveal,
    .home.reveal-ready .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =====================================================================
   COUNTER CARDS — label contrast fix
   .counter-card is white; the label had no color and inherited the
   theme's light text -> invisible on white. Pin it dark.
   ===================================================================== */
.home .counter-card .counter-label {
    color: #5B6B82 !important;
}

.home .counter-card .counter-number {
    color: var(--accent) !important;
}

/* =====================================================================
   SERVICES — lighter cards + "build on scroll" animation
   ---------------------------------------------------------------------
   Cards are a lighter tint than the page (DigitalDone-style), and reveal
   one-by-one as you scroll, with the connector arrow growing in AFTER its
   card lands — so it reads as "box appears, then arrow connects to next".
   ===================================================================== */

/* lighter card surface — clearly lighter than the dark page */
.home #services .service-card {
    background: #EEF3F6 !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}

/* text on the now-light card must be dark, in BOTH themes */
.home #services .service-card .card-title {
    color: #152e53 !important;
}

.home #services .service-card .card-text {
    color: #5B6B82 !important;
}

.home #services .service-card .card-icon {
    background: rgba(35, 168, 171, 0.14) !important;
}

html[data-bs-theme="light"] .home #services .service-card {
    background: #ffffff !important;
    border: 1px solid #e7edf2 !important;
    box-shadow: 0 8px 30px rgba(16, 33, 60, 0.06);
}

/* Build-on-scroll: each card column starts hidden; when the services row
   is revealed (.in-view via scroll-reveal.js), cards drop in one by one
   and the connector arrow grows after. */
.home.reveal-ready #services .row.g-4 > [class*="col-"] {
    opacity: 0;
    transform: translateY(28px) scale(.98);
    transition: opacity .55s ease, transform .55s ease;
}

.home.reveal-ready #services .row.g-4.in-view > [class*="col-"] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(1) { transition-delay: .00s; }
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(2) { transition-delay: .28s; }
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(3) { transition-delay: .56s; }
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(4) { transition-delay: .84s; }
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(5) { transition-delay: 1.12s; }

/* connector line grows in after its card lands */
.home.reveal-ready #services .row.g-4 > [class*="col-"]:not(:last-child)::after {
    opacity: 0;
    transform-origin: top center;
    transform: translateX(-50%) scaleY(0);
    transition: opacity .4s ease, transform .4s ease;
}
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:not(:last-child)::after {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
}
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(1)::after { transition-delay: .22s; }
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(2)::after { transition-delay: .50s; }
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(3)::after { transition-delay: .78s; }
.home.reveal-ready #services .row.g-4.in-view > [class*="col-"]:nth-child(4)::after { transition-delay: 1.06s; }

@media (prefers-reduced-motion: reduce) {
    .home.reveal-ready #services .row.g-4 > [class*="col-"],
    .home.reveal-ready #services .row.g-4 > [class*="col-"]::after {
        opacity: 1 !important;
        transform: translateX(-50%) !important;
    }
    .home.reveal-ready #services .row.g-4 > [class*="col-"] { transform: none !important; }
}

/* =====================================================================
   DIGITALDONE DESIGN SYSTEM — dd-* classes
   Dark mode = DigitalDone exact design
   Light mode = original site colors (white bg, navy text)
   ===================================================================== */

/* ── TOKENS ── */
:root {
  --dd-bg:       #152e53;
  --dd-bg-card:  #152e53;
  --dd-light:    #f5f7fa;
  --dd-teal:     #23a8ab;
  --dd-teal-600: #1a8a8d;
  --dd-teal-900: #0d4a4c;
  --dd-text:     #ffffff;
  --dd-muted:    rgba(255,255,255,.68);
  --dd-text-d:   #152e53;
  --dd-muted-d:  #4a5568;
  --dd-border:   rgba(255,255,255,.08);
  --dd-r-lg:     18px;
  --dd-r-xl:     26px;
}

/* ── SECTION WRAPPERS ──
   Dark sections ALWAYS dark bg (both themes)
   Light sections ALWAYS light bg (both themes) */
.dd-section        { padding: 88px 0; }
.dd-section-dark   { background: var(--dd-bg); }
.dd-section-light  { background: #ffffff; }

/* ── DARK SECTIONS — always white text regardless of theme ── */
.dd-section-dark,
.dd-section-dark h1, .dd-section-dark h2, .dd-section-dark h3,
.dd-section-dark h4, .dd-section-dark h5, .dd-section-dark h6,
.dd-section-dark p, .dd-section-dark li, .dd-section-dark span,
.dd-section-dark label {
    color: #f2f6f6 !important;
}
.dd-section-header h2     { color: #ffffff !important; }
.dd-section-header p      { color: rgba(255,255,255,.65) !important; }
.dd-section-label         { color: var(--dd-teal) !important; }

/* ── LIGHT SECTIONS — YOUR ORIGINAL colors ── */
.dd-section-light h1, .dd-section-light h2, .dd-section-light h3,
.dd-section-light h4, .dd-section-light h5, .dd-section-light h6 { color: #152e53 !important; }
.dd-section-light p, .dd-section-light li, .dd-section-light span { color: #4a5568 !important; }
.dd-section-label-light {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--dd-teal-600); font-weight: 700; font-size: .95rem;
    margin-bottom: 14px;
}
.dd-section-label-light::before, .dd-section-label-light::after {
    content: ''; display: inline-block; width: 28px; height: 2px;
    background: var(--dd-teal); border-radius: 2px;
}

/* ── SECTION HEADERS ── */
.dd-section-header { text-align: center; margin-bottom: 64px; }
.dd-section-header h2 { font-size: clamp(1.9rem,3.5vw,2.7rem); font-weight: 900; }
.dd-section-header p  { font-size: 1.05rem; max-width: 560px; margin: 12px auto 0; }

/* ── BUTTONS ── */
.dd-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 30px; border-radius: 50px;
    font-weight: 700; font-size: 1rem; transition: all .2s ease;
    cursor: pointer; text-decoration: none;
}
.dd-btn-primary {
    background: var(--dd-teal); color: #fff !important;
    box-shadow: 0 4px 18px rgba(42,182,152,.35);
}
.dd-btn-primary:hover { background: var(--dd-teal-600); transform: translateY(-2px); }
.dd-btn-ghost {
    background: transparent; color: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,.3);
}
.dd-btn-ghost:hover { border-color: var(--dd-teal); color: var(--dd-teal) !important; }

/* ── HERO (always dark in both themes) ── */
.dd-hero {
    min-height: 100vh; display: flex; flex-direction: column;
     background: var(--dd-bg);
    position: relative; overflow: hidden; padding: 140px 0 80px;
}
.dd-hero-glow {
    position: absolute; border-radius: 50%; pointer-events: none; filter: blur(90px);
}
.dd-hero-glow-1 { width: 520px; height: 420px; background: rgba(42,182,152,.11); top: 5%; right: 50%; }
.dd-hero-glow-2 { width: 320px; height: 320px; background: rgba(42,182,152,.07); bottom: 15%; right: 65%; }

.dd-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--dd-teal); font-weight: 700; font-size: .95rem; margin-bottom: 18px;
}
.dd-eyebrow::before {
    content: ''; display: inline-block; width: 30px; height: 2px;
    background: var(--dd-teal); border-radius: 2px;
}
.dd-hero-title {
    font-size: clamp(3rem,7vw,6rem); font-weight: 900;
    line-height: 1.08; margin-bottom: 24px; color: #fff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.dd-hero-done  { display: block; color: var(--dd-teal) !important; }
.dd-hero-sub   { font-size: 1.15rem; color: rgba(255,255,255,.72) !important; line-height: 1.9; max-width: 560px; margin-bottom: 40px; }
.dd-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.dd-logos-strip { margin-top: 56px; }
.dd-logos-label { color: rgba(255,255,255,.5) !important; font-size: .88rem !important;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px !important; }
.dd-logos-strip .logos-slider-block img { filter: brightness(0) invert(1); opacity: .5; }
.dd-logos-strip .logos-slider-block img:hover { opacity: .85; }

/* ── ABOUT ── */
.dd-about-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.dd-about-grid > *:first-child { order: 2; } /* cards → left in RTL */
.dd-about-grid > *:last-child  { order: 1; } /* text  → right in RTL */

.dd-about-cards { display: flex; flex-direction: column; gap: 16px; }
.dd-about-card {
    background: #fff; border-radius: var(--dd-r-lg); padding: 24px 28px;
    display: flex; flex-direction: row; align-items: flex-start; gap: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04);
    transition: transform .22s, box-shadow .22s;
}
.dd-about-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.1); }
.dd-about-icon {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    background: rgba(42,182,152,.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: var(--dd-teal);
}
.dd-about-card h4 { font-size: 1.1rem; font-weight: 700; color: #152e53 !important; margin-bottom: 5px; }
.dd-about-card p  { font-size: .93rem; color: #4a5568 !important; line-height: 1.75; margin: 0; }
.dd-about-headline { font-size: clamp(1.3rem,2.5vw,1.85rem); font-weight: 800; color: #152e53 !important; line-height: 1.4; margin-bottom: 16px; }
.dd-about-body     { font-size: 1rem; color: #4a5568 !important; line-height: 1.9; margin-bottom: 22px; }
.dd-tagline        { display: flex; align-items: center; gap: 12px; color: var(--dd-teal-600) !important; font-weight: 700; font-size: 1.05rem; }
.dd-tagline-bar    { display: inline-block; width: 4px; height: 24px; background: var(--dd-teal); border-radius: 4px; }

/* ── SERVICES (dark section — always dark) ── */
.dd-svc-list { display: flex; flex-direction: column; max-width: 880px; margin: 0 auto; }
.dd-svc-item {
    display: flex; flex-direction: row; align-items: center;
    gap: 28px; text-align: right;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--dd-r-xl); padding: 30px 36px;
    transition: border-color .22s, background .22s;
}
.dd-svc-item:hover { border-color: rgba(42,182,152,.35); background: rgba(42,182,152,.04); }
.dd-svc-icon {
    flex-shrink: 0; width: 56px; height: 56px;
    border-radius: 14px; background: rgba(42,182,152,.12);
    border: 1px solid rgba(42,182,152,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: var(--dd-teal); transition: background .22s;
}
.dd-svc-item:hover .dd-svc-icon { background: rgba(42,182,152,.2); }
.dd-svc-body h3 { font-size: 1.25rem; font-weight: 700; color: #fff !important; margin-bottom: 10px; }
.dd-svc-body p  { color: rgba(255,255,255,.65) !important; font-size: .97rem; line-height: 1.85; margin: 0; }

/* Connector: line + chevron arrowhead (matches DigitalDone exactly) */
.dd-svc-line {
    height: 64px; position: relative; display: flex;
    justify-content: center; align-items: flex-end;
}
.dd-svc-line::before {
    content: ''; position: absolute; top: 0; bottom: 18px; left: 50%;
    transform: translateX(-50%); width: 1.5px;
    background: var(--dd-teal);
}
.dd-svc-line::after {
    content: ''; position: absolute; bottom: 2px; left: 50%;
    width: 10px; height: 10px;
    border-right: 1.5px solid var(--dd-teal);
    border-bottom: 1.5px solid var(--dd-teal);
    transform: translateX(-50%) rotate(45deg);
}

/* ── PROCESS / TIMELINE (light section) ── */
.dd-timeline { position: relative; max-width: 980px; margin: 0 auto; }
.dd-timeline::before {
    content: ''; position: absolute; top: 20px; bottom: 20px;
    left: 50%; transform: translateX(-50%);
    width: 2px; background: rgba(35,168,171,.25); border-radius: 2px;
}
.dd-tl-step {
    display: grid; grid-template-columns: 1fr 48px 1fr;
    align-items: start; gap: 0; margin-bottom: 52px;
}
.dd-tl-step:last-child { margin-bottom: 0; }
.dd-tl-node {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--dd-teal); color: #fff !important;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: .9rem;
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(42,182,152,.25);
    position: relative; z-index: 1;
}
.dd-tl-card {
    background: #fff; border-radius: var(--dd-r-lg);
    padding: 22px 26px;
    box-shadow: 0 4px 22px rgba(0,0,0,.07);
    border: 1px solid rgba(0,0,0,.04);
}
.dd-tl-card h4 { font-size: 1.1rem; font-weight: 700; color: #152e53 !important; margin-bottom: 7px; }
.dd-tl-card p  { font-size: .93rem; color: #4a5568 !important; line-height: 1.8; margin: 0; }
.dd-tl-r { text-align: right; margin-inline-end: 16px; }
.dd-tl-l { text-align: right; margin-inline-start: 16px; }
.dd-tl-empty {}

/* ── FOUNDER (light section) ── */
.dd-founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.dd-founder-photo-wrap {
    position: relative; min-height: 400px;
    display: flex; align-items: flex-end; justify-content: center;
}
.dd-founder-shape { position: absolute; background: var(--dd-teal);
    clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); }
.dd-founder-s1 { width: 125px; height: 225px; inset-inline-start: 4%; top: 16%; opacity: .9; }
.dd-founder-s2 { width: 165px; height: 285px; inset-inline-start: 20%; top: 24%; opacity: .5; }
.dd-founder-photo { position: relative; z-index: 1; max-height: 450px; object-fit: contain; }
.dd-no-photo { min-height: 340px; border-radius: 20px; border: 2px dashed rgba(42,182,152,.4); background: rgba(42,182,152,.06); }
.dd-founder-name   { font-size: clamp(1.9rem,3.5vw,2.7rem); font-weight: 900; color: #152e53 !important; margin-bottom: 4px; }
.dd-founder-title  { color: var(--dd-teal-600) !important; font-weight: 700; font-size: 1.1rem; margin-bottom: 26px; }
.dd-founder-bio    { color: #4a5568 !important; line-height: 2; margin-bottom: 12px; font-size: 1rem; }
.dd-founder-quote  { border-inline-start: 3px solid var(--dd-teal); padding-inline-start: 18px; margin-top: 22px; }
.dd-founder-quote p { color: #4a5568 !important; font-style: italic; line-height: 1.9; margin-bottom: 6px; font-size: .97rem; }
.dd-founder-quote-tag { color: var(--dd-teal-600) !important; font-weight: 700; font-style: normal; }

/* ── STATS (dark section) ── */
.dd-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; max-width: 900px; margin: 0 auto; }
.dd-stat-card {
    background: var(--dd-bg-card); border: 1px solid var(--dd-border);
    border-radius: var(--dd-r-xl); padding: 40px 28px; text-align: center;
    transition: border-color .22s, transform .22s;
}
.dd-stat-card:hover { border-color: var(--dd-teal); transform: translateY(-4px); }
.dd-stat-num   { font-size: clamp(2.4rem,4.5vw,3.3rem); font-weight: 900; color: var(--dd-teal) !important; margin-bottom: 8px; }
.dd-stat-label { color: rgba(255,255,255,.65) !important; font-size: 1rem; font-weight: 500; margin: 0; }

/* ── CTA BAND ── */
.dd-cta-band-v2 {
    position: relative; overflow: hidden; padding: 100px 0; text-align: center;
    
}
.dd-cta-glow-v2 {
    position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
    width: 700px; height: 700px; border-radius: 50%;
    background: radial-gradient(rgba(42,182,152,.18), transparent 65%); pointer-events: none;
}
.dd-cta-inner-v2 h2 { font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 900; color: #ffffff !important; margin-bottom: 14px; }
.dd-cta-inner-v2 p  { color: rgba(255,255,255,.65) !important; font-size: 1.1rem; margin-bottom: 36px; }
.dd-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }

/* Social icons */
.dd-cta-socials { display: flex; gap: 12px; justify-content: center; }
.dd-social-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    color: #ffffff !important; font-size: 1.1rem;
    transition: background .2s, border-color .2s, transform .2s; text-decoration: none;
}
.dd-social-btn:hover { background: var(--dd-teal); border-color: var(--dd-teal); transform: translateY(-3px); }

/* ── PARTNER LOGOS ── */
.partner-logos-grid {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important; padding: 0 24px !important;
    max-width: 1100px; margin: 0 auto;
}
.partner-logos-grid .partner-logo {
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important; padding: 20px 24px !important; min-height: 90px !important;
    transition: background .22s, border-color .22s, transform .22s !important;
}
.partner-logos-grid .partner-logo:hover {
    background: rgba(255,255,255,.12) !important; border-color: rgba(42,182,152,.4) !important;
    transform: translateY(-3px) !important;
}
.partner-logos-grid .partner-logo img {
    max-height: 56px !important; max-width: 100% !important; object-fit: contain !important;
    opacity: 1 !important; transition: opacity .22s !important;
}
.partner-logos-grid .partner-logo:hover img { opacity: 1 !important; transform: scale(1.05) !important; }
@media (max-width: 768px) { .partner-logos-grid { grid-template-columns: repeat(2, 1fr) !important; } }

/* ── LOGO ── */
html[data-bs-theme="dark"] .navbar-brand,
html[data-bs-theme="light"] .navbar-brand {
    background: transparent !important; padding: 0 !important;
    display: inline-flex !important; align-items: center !important; height: 62px !important;
}
/* DARK MODE: pure white logo */
html[data-bs-theme="dark"] .navbar-brand img {
    max-height: 56px; width: auto; display: block;
    filter: brightness(0) invert(1) !important;
}
/* LIGHT MODE: original colors with subtle glow */
html[data-bs-theme="light"] .navbar-brand img {
    max-height: 56px; width: auto; display: block;
    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 10px rgba(255,255,255,.6))
        drop-shadow(0 0 20px rgba(35,168,171,.35)) !important;
}

/* ── NAV ── */
.header .navbar {
    background: #152e53 !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.header .navbar .nav-link { color: rgba(255,255,255,.82) !important; font-weight: 500; }
.header .navbar .nav-link:hover { color: var(--dd-teal) !important; }

/* ── DIRECTION FIX (RTL) ── */
@media (max-width: 900px) {
    .dd-about-grid > *:first-child { order: unset; }
    .dd-about-grid > *:last-child  { order: unset; }
    .dd-founder-grid { grid-template-columns: 1fr; gap: 36px; }
    .dd-stats-grid   { grid-template-columns: 1fr 1fr; }
    .dd-timeline::before { display: none; }
    .dd-tl-step { grid-template-columns: auto 1fr; }
    .dd-tl-empty { display: none; }
    .dd-tl-r, .dd-tl-l { margin: 0 0 0 12px; }
    .dd-svc-item { padding: 22px 20px; gap: 18px; }
}
@media (max-width: 600px) {
    .dd-hero-title { font-size: 2rem; }
    .dd-stats-grid { grid-template-columns: 1fr; }
    .dd-section { padding: 60px 0; }
}

/* ── SCROLL REVEAL ANIMATION ──
   Boxes appear as user scrolls down.
   scroll-reveal.js adds .reveal-ready to .home and .in-view when element enters viewport. */
.home.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
}
.home.reveal-ready .reveal.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* SERVICE BOXES — staggered appear animation */
.home.reveal-ready .dd-svc-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s ease, transform .5s ease, border-color .22s, background .22s;
}
.home.reveal-ready #svc-list.in-view .dd-svc-item { opacity: 1 !important; transform: translateY(0) !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(1) { transition-delay: .00s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(3) { transition-delay: .18s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(5) { transition-delay: .36s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(7) { transition-delay: .54s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(9) { transition-delay: .72s; }

/* Connector lines grow after each card */
.home.reveal-ready .dd-svc-line::before,
.home.reveal-ready .dd-svc-line::after {
    opacity: 0;
    transform-origin: top center;
    transition: opacity .4s ease, transform .4s ease;
}
.home.reveal-ready .dd-svc-line::before { transform: translateX(-50%) scaleY(0); }
.home.reveal-ready .dd-svc-line::after  { transform: translateX(-50%) rotate(45deg) scale(0); }

.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::after { opacity:1; transition-delay:.16s; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::after { opacity:1; transition-delay:.34s; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::after { opacity:1; transition-delay:.52s; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::after { opacity:1; transition-delay:.70s; }

.home.reveal-ready #svc-list.in-view .dd-svc-line::before { transform: translateX(-50%) scaleY(1); }
.home.reveal-ready #svc-list.in-view .dd-svc-line::after  { transform: translateX(-50%) rotate(45deg) scale(1); }

@media (prefers-reduced-motion: reduce) {
    .home.reveal-ready .reveal,
    .home.reveal-ready .dd-svc-item,
    .home.reveal-ready .dd-svc-line::before,
    .home.reveal-ready .dd-svc-line::after { opacity:1!important; transform:none!important; }
}

/* =====================================================================
   FINAL FIX — Animation, Logo White in Dark, Light Mode Colors
   ===================================================================== */

/* 1. LOGO — white in dark mode, original in light */
html[data-bs-theme="dark"] .navbar-brand .logo,
html[data-bs-theme="dark"] .navbar-brand img.logo {
    filter: brightness(0) invert(1) !important;
    max-height: 52px !important;
}
html[data-bs-theme="light"] .navbar-brand .logo,
html[data-bs-theme="light"] .navbar-brand img.logo {
    filter: none !important;
    max-height: 52px !important;
}

/* 3. LIGHT MODE — use original ConceptPlus colors everywhere
   Light bg: #F2F6F6 (band-bg), text: #152e53 (navy), accent: #23a8ab */

/* Light-mode section backgrounds */
html[data-bs-theme="light"] .home .dd-section-light {
    background: #F2F6F6 !important;
}
html[data-bs-theme="light"] .home .dd-about-card {
    background: #ffffff !important;
    border: 1px solid rgba(21,46,83,0.08) !important;
    box-shadow: 0 4px 20px rgba(21,46,83,0.06) !important;
}
html[data-bs-theme="light"] .home .dd-tl-card {
    background: #ffffff !important;
    border: 1px solid rgba(21,46,83,0.06) !important;
    box-shadow: 0 4px 22px rgba(21,46,83,0.07) !important;
}
html[data-bs-theme="light"] .home .dd-tl-node {
    background: #23a8ab !important;
    border-color: #F2F6F6 !important;
    box-shadow: 0 0 0 3px rgba(35,168,171,0.25) !important;
}
html[data-bs-theme="light"] .home .dd-timeline::before {
    background: rgba(21,46,83,0.15) !important;
}

/* Light-mode text */
html[data-bs-theme="light"] .home .dd-about-headline { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-about-body     { color: #4B6070 !important; }
html[data-bs-theme="light"] .home .dd-about-card h4  { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-about-card p   { color: #4B6070 !important; }
html[data-bs-theme="light"] .home .dd-about-icon     { background: rgba(35,168,171,0.12) !important; color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-tagline        { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-tagline-bar    { background: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-section-label-light { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-about-headline { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-tl-card h4     { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-tl-card p      { color: #4B6070 !important; }
html[data-bs-theme="light"] .home .dd-founder-name   { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-founder-title  { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-founder-bio    { color: #4B6070 !important; }
html[data-bs-theme="light"] .home .dd-founder-quote p { color: #4B6070 !important; }
html[data-bs-theme="light"] .home .dd-founder-quote  { border-color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-founder-quote-tag { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-founder-shape  { background: #23a8ab !important; }
html[data-bs-theme="light"] .home .section-title     { color: #152e53 !important; }
html[data-bs-theme="light"] .home .gradient-text     { background: linear-gradient(135deg, #152e53, #23a8ab, #23a8ab) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; }

/* Light-mode section headers on LIGHT sections */
html[data-bs-theme="light"] .home .dd-section-light .dd-section-header h2 { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-section-light .dd-section-header p  { color: #4B6070 !important; }
html[data-bs-theme="light"] .home .dd-section-light .dd-section-label { color: #23a8ab !important; }

/* ── Hero content centered ── */
.dd-hero-content { text-align: center !important; }
.dd-hero-sub     { margin-left: auto !important; margin-right: auto !important; }
.dd-hero-actions { justify-content: center !important; }
.dd-eyebrow      { justify-content: center !important; }

/* =====================================================================
   FINAL TARGETED FIXES
   ===================================================================== */

/* 1. Hero — force fully centered content horizontally */
.dd-hero {
    align-items: center !important;
}
.dd-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
}
.dd-hero-content {
    text-align: center !important;
    max-width: 900px;
    width: 100%;
    margin: 0 auto !important;
}
.dd-hero-title,
.dd-hero-sub,
.dd-eyebrow {
    text-align: center !important;
}
.dd-hero-sub {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 620px;
}
.dd-hero-actions {
    justify-content: center !important;
    width: 100%;
}
.dd-logos-strip {
    width: 100%;
    text-align: center !important;
}
.dd-logos-label {
    text-align: center !important;
}

/* 2. Partner logos — no filter, full opacity, show real colors */
.partner-logos-grid .partner-logo img,
.partner-logos-grid .partner-logo img:hover {
    filter: none !important;
    opacity: 1 !important;
}
.partner-logos-grid .partner-logo {
    background: rgba(255,255,255,.08) !important;
}

/* 3. CTA band — no background override (inherits dark page) */
/* CTA bg is gradient in both themes — see rule below */



/* =====================================================================
   SERVICES — DEFINITIVE: card styling + animation (single source)
   Must be LAST so nothing overrides these rules.
   ===================================================================== */

/* Card — matches DigitalDone exactly */
.home .dd-svc-list {
    display: flex !important;
    flex-direction: column !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    width: 100% !important;
}
.home .dd-svc-item {
    background: #1e3a5f !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    padding: 28px 36px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.home .dd-svc-item:hover {
    background: #23456e !important;
    border-color: rgba(42,182,152,0.3) !important;
    transform: translateY(-2px) !important;
}
.home .dd-svc-body {
    flex: 1 !important;
    text-align: right !important;
}
.home .dd-svc-body h3 {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}
.home .dd-svc-body p {
    color: rgba(255,255,255,0.80) !important;
    font-size: .97rem !important;
    line-height: 1.85 !important;
    margin: 0 !important;
}
.home .dd-svc-icon {
    flex-shrink: 0 !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 14px !important;
    background: #1e3a5f !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    color: #23a8ab !important;
}
.home .dd-svc-item:hover .dd-svc-icon {
    background: #374151 !important;
}

/* Connector */
.home .dd-svc-line {
    height: 52px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

/* ANIMATION — cards appear one by one when scrolled into view */
.home.reveal-ready .dd-svc-item {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .45s ease, transform .45s ease, border-color .22s, background .22s;
}
/* When svc-list gets .in-view, reveal cards with stagger */
.home.reveal-ready #svc-list.in-view .dd-svc-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(1)  { transition-delay: 0.00s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(3)  { transition-delay: 0.15s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(5)  { transition-delay: 0.30s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(7)  { transition-delay: 0.45s; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(9)  { transition-delay: 0.60s; }

/* Connector lines grow in after their card */
.home.reveal-ready .dd-svc-line::before,
.home.reveal-ready .dd-svc-line::after  {
    opacity: 0;
    transition: opacity .3s ease;
}
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::after  { opacity:1; transition-delay:.12s; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::after  { opacity:1; transition-delay:.28s; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::after  { opacity:1; transition-delay:.44s; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::after  { opacity:1; transition-delay:.60s; }

@media (prefers-reduced-motion: reduce) {
    .home.reveal-ready .dd-svc-item,
    .home.reveal-ready .dd-svc-line::before,
    .home.reveal-ready .dd-svc-line::after { opacity:1 !important; transform:none !important; }
}
@media (max-width:768px) {
    .home .dd-svc-item { padding:20px 18px !important; gap:16px !important; }
}

/* =====================================================================
   NAV LAYOUT — menu LEFT, logo RIGHT, space in middle (DigitalDone style)
   In RTL: DOM order is [logo, links]. Default RTL flex puts logo on RIGHT,
   links after it. We want links pushed to the far LEFT with space between.
   ===================================================================== */
.header .navbar > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}
/* Logo — first in DOM, sits on the RIGHT in RTL */
.header .navbar .navbar-brand {
    margin: 0 !important;
    order: 0 !important;
}
/* Links container — expands and pushes links to the far LEFT */
.header .navbar .navbar-collapse {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    order: 1 !important;
}
/* In RTL, flex-start = right; we want links at the LEFT edge = flex-end */
.header .navbar .navbar-nav {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: auto !important;   /* pushes links block to the LEFT in RTL */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
}
.header .navbar .nav-item .nav-link {
    padding: 6px 14px !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.85) !important;
}
.header .navbar .nav-item .nav-link:hover {
    color: #23a8ab !important;
}

/* =====================================================================
   MODAL — stronger text contrast (labels/captcha were too faint)
   ===================================================================== */
.mo-head h2 { color: #152e53 !important; opacity: 1 !important; }
.mo-head p  { color: #64748b !important; opacity: 1 !important; }
.mo-field label { color: #1e293b !important; font-weight: 600 !important; opacity: 1 !important; }
.mo-cap-label { color: #1e293b !important; font-weight: 700 !important; opacity: 1 !important; }
.mo-cap-q     { color: #152e53 !important; font-weight: 800 !important; font-size: 1.2rem !important; opacity: 1 !important; }
.mo-cap-eq    { color: #23a8ab !important; font-weight: 800 !important; opacity: 1 !important; }
.mo-field input, .mo-field select, .mo-field textarea {
    color: #152e53 !important;
}
.mo-field input::placeholder, .mo-field textarea::placeholder {
    color: #94a3b8 !important;
}
/* Calendar icon — always visible */
.mo-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    cursor: pointer !important;
    filter: invert(0.4) !important;
}
/* Prevent modal scrollbar unless truly needed */
.mo-box {
    max-height: 90vh !important;
}

/* =====================================================================
   [UPDATE 2026-09-14] — Navbar, Modal, Services, About fixes
   ===================================================================== */

/* ── 1. NAVBAR: logo RIGHT (stays), links LEFT, single-line look ── */
.header .navbar > .container {
    flex-direction: row !important;   /* logo=right in RTL DOM */
}
/* Ensure navbar stays 1 row on collapse — no flex-wrap */
.header .navbar .main-menu {
    justify-content: flex-end !important;
}
.header .navbar .navbar-nav {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}
.header .navbar .nav-item .nav-link {
    padding: 6px 10px !important;
    font-size: .88rem !important;
}

/* ── 2. MEETING MODAL — compact, no vertical scroll on normal screens ── */
.mo-box {
    padding: 20px 24px !important;
    max-height: 80vh !important;
    border-radius: 16px !important;
}
.mo-head { margin-bottom: 14px !important; }
.mo-head h2 { font-size: 1.15rem !important; }
.mo-head p  { font-size: .82rem !important; }
.mo-icon {
    width: 40px !important; height: 40px !important;
    font-size: 1.1rem !important;
    border-radius: 10px !important;
    margin-bottom: 7px !important;
}
.mo-row  { gap: 10px !important; margin-bottom: 10px !important; }
.mo-full { margin-bottom: 10px !important; }
.mo-field input, .mo-field select { padding: 7px 10px !important; font-size: .85rem !important; }
.mo-field textarea { rows: 2 !important; font-size: .85rem !important; resize: none !important; }
.mo-field label { font-size: .78rem !important; margin-bottom: 3px !important; }
.mo-captcha { padding: 7px 12px !important; margin-bottom: 10px !important; }
.mo-submit { padding: 10px !important; font-size: .93rem !important; }
@media (max-height: 700px) {
    .mo-box { max-height: 96vh !important; }
}

/* ── 3. SERVICES — card boxes (image style) ── */
/* Icon on the LEFT side of card in RTL = visual RIGHT of card */
/* text block on the right side = visual LEFT */
.home .dd-svc-item {
    background: #1e3a5f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
    padding: 28px 32px !important;
    display: flex !important;
    flex-direction: row !important;   /* icon-start, body-end in RTL → icon RIGHT, body LEFT */
    align-items: center !important;
    gap: 26px !important;
    text-align: right !important;
    transition: transform .22s ease, border-color .22s, background .22s !important;
}
.home .dd-svc-item:hover {
    transform: translateY(-3px) !important;
    background: #1e3a5f !important;
    border-color: rgba(42,182,152,0.38) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
}
/* Icon box — dark rounded square, teal icon inside */
.home .dd-svc-icon {
    flex-shrink: 0 !important;
    order: -1 !important;           /* always first in DOM = RIGHT in RTL */
    width: 62px !important; height: 62px !important;
    border-radius: 16px !important;
    background: #23456e !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.55rem !important;
    color: #23a8ab !important;
    transition: background .22s !important;
}
.home .dd-svc-item:hover .dd-svc-icon {
    background: #23a8ab14 !important;
    box-shadow: 0 0 0 1px rgba(42,182,152,.25) !important;
}
.home .dd-svc-body {
    flex: 1 !important;
    text-align: right !important;
}
.home .dd-svc-body h3 {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 9px !important;
    line-height: 1.3 !important;
}
.home .dd-svc-body p {
    font-size: .97rem !important;
    line-height: 1.85 !important;
    color: rgba(255,255,255,.68) !important;
    margin: 0 !important;
}

/* Arrow connector — teal vertical line + chevron arrowhead pointing DOWN */
.home .dd-svc-line {
    height: 56px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}
.home .dd-svc-line::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    background: var(--dd-teal, #23a8ab) !important;
    border-radius: 2px !important;
}
/* Chevron arrowhead — two lines forming a > rotated down */
.home .dd-svc-line::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 50% !important;
    width: 10px !important; height: 10px !important;
    border-right: 2px solid var(--dd-teal, #23a8ab) !important;
    border-bottom: 2px solid var(--dd-teal, #23a8ab) !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

/* Scroll animation — cards appear building down */
.home.reveal-ready .dd-svc-item {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity .45s ease, transform .45s ease,
                border-color .22s, background .22s !important;
}
.home.reveal-ready #svc-list.in-view .dd-svc-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Stagger: items are at positions 1,3,5,7,9 (lines at 2,4,6,8) */
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(1) { transition-delay: 0.00s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(3) { transition-delay: 0.14s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(5) { transition-delay: 0.28s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(7) { transition-delay: 0.42s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(9) { transition-delay: 0.56s !important; }

/* Connector lines animate in after their preceding card */
.home.reveal-ready .dd-svc-line::before,
.home.reveal-ready .dd-svc-line::after {
    opacity: 0 !important;
    transition: opacity .35s ease !important;
}
.home.reveal-ready #svc-list.in-view .dd-svc-line::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line::after { opacity: 1 !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::after { transition-delay: .10s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::after { transition-delay: .24s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::after { transition-delay: .38s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::after { transition-delay: .52s !important; }
@media (max-width: 768px) {
    .home .dd-svc-item { padding: 20px 18px !important; gap: 16px !important; }
    .home .dd-svc-icon { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; }
}

/* ── 4. ABOUT (من نحن) — match image 3:
   Light bg, two dark stacked cards LEFT (icon top-center, title, text),
   description text RIGHT ── */

/* Section background — theme-aware (see [data-bs-theme] rules) */

/* Grid: cards-col left, text-col right (RTL: first child = left=visual right, so swap order) */
.dd-about-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
}
/* In RTL: first child in DOM is on the right visually by default.
   We want: text on RIGHT (= first child in RTL), cards on LEFT (= second child).
   Current markup: first child = dd-about-cards, second = text div.
   So: cards should appear on LEFT visually = order:2 is CORRECT already.
   Just remove the order override to match new desired layout (cards RIGHT, text LEFT in image 3)
   Wait — image 3: cards on LEFT, title/text on RIGHT.
   In RTL grid: first DOM child = visually RIGHT, second = visually LEFT.
   Cards are first DOM child → visually RIGHT → we need cards LEFT → order: 2 (already set).
   But image shows TEXT on the RIGHT and CARDS on the LEFT.
   Current CSS already does: first child order:2 (cards left), last child order:1 (text right). ✓ */

/* Card styling — dark bg, icon centered at top */
.dd-about-card {
    background: #1e3a5f !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    padding: 32px 24px 28px !important;
    display: flex !important;
    flex-direction: column !important;   /* vertical: icon → title → text */
    align-items: center !important;       /* center everything */
    text-align: center !important;
    gap: 0 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
    transition: transform .22s, box-shadow .22s !important;
}
.dd-about-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.28) !important;
}
.dd-about-icon {
    width: 52px !important; height: 52px !important;
    border-radius: 50% !important;          /* circle like image 3 */
    background: #23a8ab !important;          /* solid teal */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    color: #fff !important;
    margin-bottom: 18px !important;
    flex-shrink: 0 !important;
}
.dd-about-card h4 {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    text-align: center !important;
}
.dd-about-card p {
    font-size: .94rem !important;
    color: rgba(255,255,255,.70) !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Text column (right in RTL) */
.dd-about-headline {
    font-size: clamp(1.25rem,2.3vw,1.75rem) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
}
.dd-about-body { font-size: 1rem !important; line-height: 1.9 !important; margin-bottom: 22px !important; }

/* Section label above "من نحن" heading */
.dd-section-label-light {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--dd-teal,#23a8ab) !important;
    font-weight: 700 !important;
    font-size: .92rem !important;
    margin-bottom: 14px !important;
}

/* Light-mode card override — force dark card even in light theme */
html[data-bs-theme="light"] .home .dd-about-card {
    background: #1e3a5f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
}
html[data-bs-theme="light"] .home .dd-about-card h4 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-about-card p  { color: rgba(255,255,255,.68) !important; }
html[data-bs-theme="light"] .home .dd-about-icon    { background: #23a8ab !important; color: #fff !important; }
html[data-bs-theme="light"] .home .dd-section-light { background: #f4f7f7 !important; }

@media (max-width: 900px) {
    .dd-about-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .dd-about-grid > *:first-child { order: unset !important; }
    .dd-about-grid > *:last-child  { order: unset !important; }
}

/* =====================================================================
   [UPDATE 2026-09-14 v2] — Navbar, Arrow, Animation, Headings, Stats, Partners
   ===================================================================== */

/* ── 1. NAVBAR: logo far RIGHT, empty middle, links far LEFT ──────── */
/* DOM in RTL: [logo] [toggler] [collapse>ul.navbar-nav]
   We want:   LEFT=[links]  CENTER=[space]  RIGHT=[logo]
   In RTL flex: "left" = end, "right" = start — use order values */
.header .navbar > .container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}
/* Logo (navbar-brand): keep at DOM start = visually RIGHT in RTL (order 0) */
.header .navbar .navbar-brand {
    order: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
/* Collapse wrapper: send to opposite end = visually LEFT in RTL */
.header .navbar .navbar-collapse {
    order: 2 !important;
    flex-grow: 0 !important;   /* do NOT expand — leave gap in middle */
    display: flex !important;
    justify-content: flex-end !important;  /* push ul to the far end (LEFT in RTL) */
}
/* Create the empty center gap by adding flex spacer between brand and collapse */
.header .navbar > .container::after {
    content: '' !important;
    flex: 1 !important;       /* takes all available space in the middle */
    order: 1 !important;
}
/* Nav items: horizontal row, no wrap */
.header .navbar .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 0 !important;
}
.header .navbar .nav-item .nav-link {
    padding: 6px 10px !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* ── 2. SERVICES ARROW — proper chevron ∨ (wider, more visible) ───── */
/* Remove all previous dd-svc-line overrides and redefine cleanly */
.home .dd-svc-line {
    height: 60px !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    margin: 0 auto !important;
    width: 100% !important;
}
/* Vertical line */
.home .dd-svc-line::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 22px !important;
    left: 50% !important;
    width: 2px !important;
    background: #23a8ab !important;
    transform: translateX(-50%) !important;
    border-radius: 2px !important;
}
/* Chevron arrowhead ∨ using border trick — wider and clearly visible */
.home .dd-svc-line::after {
    content: '' !important;
    position: absolute !important;
    bottom: 6px !important;
    left: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border-left: none !important;
    border-top: none !important;
    border-right: 2.5px solid #23a8ab !important;
    border-bottom: 2.5px solid #23a8ab !important;
    transform: translateX(-50%) rotate(45deg) !important;
    background: transparent !important;
}

/* ── 3. SERVICES ANIMATION — fix nth-child selector order ──────────
   HTML structure: item(1) line(2) item(3) line(4) item(5) line(6)...
   .dd-svc-item nth-child applies WITHIN dd-svc-list including lines.
   Better: use :nth-of-type won't work (same tag). Use direct nth-child. */
.home.reveal-ready #svc-list .dd-svc-item {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity .5s ease, transform .5s ease,
                border-color .22s, background .22s, box-shadow .22s !important;
}
.home.reveal-ready #svc-list.in-view .dd-svc-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Items at positions 1,3,5,7,9 within #svc-list */
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(1) { transition-delay: 0.00s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(3) { transition-delay: 0.15s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(5) { transition-delay: 0.30s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(7) { transition-delay: 0.45s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(9) { transition-delay: 0.60s !important; }

/* Line connectors fade in after their card */
.home.reveal-ready #svc-list .dd-svc-line::before,
.home.reveal-ready #svc-list .dd-svc-line::after {
    opacity: 0 !important;
    transition: opacity .4s ease !important;
}
.home.reveal-ready #svc-list.in-view .dd-svc-line::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line::after { opacity: 1 !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::after { transition-delay: .12s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::after { transition-delay: .27s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::after { transition-delay: .42s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::after { transition-delay: .57s !important; }

@media (prefers-reduced-motion: reduce) {
    .home.reveal-ready #svc-list .dd-svc-item,
    .home.reveal-ready #svc-list .dd-svc-line::before,
    .home.reveal-ready #svc-list .dd-svc-line::after {
        opacity: 1 !important; transform: none !important;
    }
}

/* ── 4. "من نحن" — big section title in about ────────────────────── */
.dd-about-section-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 900 !important;
    color: #152e53 !important;
    margin-bottom: 16px !important;
    line-height: 1.15 !important;
}
/* Subheadline under it becomes a body-size paragraph */
.dd-about-headline {
    font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
}
html[data-bs-theme="light"] .home .dd-about-section-title { color: #152e53 !important; }
html[data-bs-theme="dark"]  .home .dd-about-section-title { color: #152e53 !important; }

/* ── 5. STATS SECTION — match image 3 (dark band, big teal numbers) ─ */
/* Stats section sits in dd-section-dark — override card to look like image */
.home .dd-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.home .dd-stat-card {
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    padding: 48px 32px !important;
    text-align: center !important;
    transition: background .22s !important;
    transform: none !important;
}
.home .dd-stat-card:last-child { border-right: none !important; }
.home .dd-stat-card:hover { background: #1e3a5f !important; transform: none !important; border-color: rgba(255,255,255,.08) !important; }
.home .dd-stat-num {
    font-size: clamp(2.8rem, 6vw, 4.5rem) !important;
    font-weight: 900 !important;
    color: #23a8ab !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
    font-family: inherit !important;
}
.home .dd-stat-label {
    color: rgba(255,255,255,.72) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
}
/* Make stats section full-width (no container padding) */
#influencers .dd-stats-grid {
    width: 100% !important;
}
#influencers .container {
    max-width: 100% !important;
    padding: 0 !important;
}
@media (max-width: 768px) {
    .home .dd-stats-grid { grid-template-columns: 1fr !important; }
    .home .dd-stat-card  { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; padding: 36px 24px !important; }
    .home .dd-stat-card:last-child { border-bottom: none !important; }
}

/* ── 6. PARTNERS — light bg section, big heading ────────────────────*/
.dd-section-partners {
    background: #eef1f5 !important;
    padding-bottom: 60px !important;
}
.dd-partners-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 900 !important;
    color: #152e53 !important;
    margin: 0 0 12px !important;
    text-align: center !important;
}
.dd-partners-sub {
    font-size: 1.05rem !important;
    color: #64748b !important;
    text-align: center !important;
    margin: 0 !important;
}
/* Partner logo cards adapt to light bg */
.dd-section-partners .partner-logos-grid .partner-logo {
    background: #ffffff !important;
    border: 1px solid rgba(21,46,83,0.08) !important;
}
.dd-section-partners .partner-logos-grid .partner-logo:hover {
    background: #f0fdfb !important;
    border-color: rgba(42,182,152,.35) !important;
}

/* =====================================================================
   [UPDATE 2026-09-14 v3] — PARTNERS SECTION — full redesign
   ===================================================================== */

/* Section */
.dd-section-partners {
    background: #e8ecf2 !important;
    padding: 70px 0 80px !important;
}

/* Heading */
.dd-partners-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    font-weight: 900 !important;
    color: #152e53 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    letter-spacing: -.02em !important;
}
.dd-partners-sub {
    font-size: 1.05rem !important;
    color: #5a6e85 !important;
    text-align: center !important;
    margin: 0 0 52px !important;
    font-weight: 500 !important;
}

/* Grid */
.dd-section-partners .partner-logos-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding: 0 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Card */
.dd-section-partners .partner-logos-grid .partner-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(21,46,83,0.10) !important;
    border-radius: 18px !important;
    padding: 24px 28px !important;
    min-height: 110px !important;
    box-shadow: 0 2px 12px rgba(21,46,83,0.06) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Kill the old diagonal mint shape */
.dd-section-partners .partner-logos-grid .partner-logo::before {
    display: none !important;
    content: none !important;
}

/* Subtle teal accent line at top of card */
.dd-section-partners .partner-logos-grid .partner-logo::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 10% !important;
    width: 80% !important; height: 3px !important;
    background: linear-gradient(90deg, transparent, #23a8ab, transparent) !important;
    border-radius: 0 0 4px 4px !important;
    opacity: 0 !important;
    transition: opacity .22s !important;
}
.dd-section-partners .partner-logos-grid .partner-logo:hover::after {
    opacity: 1 !important;
}

/* Hover lift */
.dd-section-partners .partner-logos-grid .partner-logo:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 32px rgba(21,46,83,0.13) !important;
    border-color: rgba(42,182,152,.35) !important;
    background: #ffffff !important;
}

/* Logo image — clean, full opacity, no background box */
.dd-section-partners .partner-logos-grid .partner-logo img {
    max-height: 64px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: transform .22s ease !important;
    position: relative !important;
    z-index: 1 !important;
}
.dd-section-partners .partner-logos-grid .partner-logo:hover img {
    transform: scale(1.07) !important;
    opacity: 1 !important;
}

/* Responsive */
@media (max-width: 900px) {
    .dd-section-partners .partner-logos-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 0 24px !important;
    }
}
@media (max-width: 600px) {
    .dd-section-partners .partner-logos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 16px !important;
        gap: 14px !important;
    }
    .dd-section-partners .partner-logos-grid .partner-logo {
        min-height: 88px !important;
        padding: 18px 16px !important;
    }
}

/* =====================================================================
   [UPDATE 2026-09-14 v4] — PARTNERS: no cards, raw logos on grey bg
   ===================================================================== */

.dd-section-partners {
    background: #edf0f4 !important;
    padding: 70px 0 80px !important;
}
.dd-partners-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 900 !important;
    color: #152e53 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    letter-spacing: -.02em !important;
}
.dd-partners-sub {
    font-size: 1.05rem !important;
    color: #6b7e95 !important;
    text-align: center !important;
    margin: 0 0 56px !important;
    font-weight: 500 !important;
}

/* Grid — no card boxes */
.dd-section-partners .partner-logos-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 32px 24px !important;
    padding: 0 48px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    align-items: center !important;
}

/* Each logo cell — no box, just the logo centered */
.dd-section-partners .partner-logos-grid .partner-logo {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 8px !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .22s ease !important;
    position: relative !important;
    overflow: visible !important;
}

/* Mint diagonal shape behind logo — exactly like the reference */
.dd-section-partners .partner-logos-grid .partner-logo::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    inset: 8% 4% !important;
    background: linear-gradient(118deg,
        rgba(42,182,152,.18) 0%,
        rgba(42,182,152,.07) 60%,
        transparent 100%) !important;
    transform: skewX(-12deg) rotate(-2deg) !important;
    border-radius: 6px !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Kill hover top-line (v3 leftover) */
.dd-section-partners .partner-logos-grid .partner-logo::after {
    display: none !important;
    content: none !important;
}

/* Logo image — natural, no background box */
.dd-section-partners .partner-logos-grid .partner-logo img {
    position: relative !important;
    z-index: 1 !important;
    max-height: 60px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: transform .22s ease, opacity .22s !important;
}

.dd-section-partners .partner-logos-grid .partner-logo:hover {
    transform: translateY(-4px) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.dd-section-partners .partner-logos-grid .partner-logo:hover img {
    transform: scale(1.08) !important;
    opacity: 1 !important;
}

@media (max-width: 1100px) {
    .dd-section-partners .partner-logos-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        padding: 0 32px !important;
    }
}
@media (max-width: 768px) {
    .dd-section-partners .partner-logos-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 0 20px !important;
        gap: 24px 16px !important;
    }
}
@media (max-width: 480px) {
    .dd-section-partners .partner-logos-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 0 16px !important;
    }
}

/* =====================================================================
   [FINAL] — Navbar full-width + Partners clean grid (no shapes, no cards)
   This block is LAST — overrides everything above.
   ===================================================================== */

/* ── NAVBAR ── */
.header .navbar > .container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 0 20px !important;
    max-width: 100% !important;
    width: 100% !important;
}
.header .navbar .navbar-brand {
    order: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.header .navbar > .container::after {
    content: '' !important;
    flex: 1 !important;
    order: 1 !important;
}
.header .navbar .navbar-collapse {
    order: 2 !important;
    flex-grow: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}
.header .navbar .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 0 !important;
}
.header .navbar .nav-item .nav-link {
    padding: 6px 10px !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,.85) !important;
}
.header .navbar .nav-item .nav-link:hover { color: #23a8ab !important; }

/* ── PARTNERS — clean logo grid, no cards, no shapes ── */
.dd-section-partners {
    background: #edf0f4 !important;
    padding: 70px 0 80px !important;
}
.dd-partners-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 900 !important;
    color: #152e53 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
}
.dd-partners-sub {
    font-size: 1.05rem !important;
    color: #6b7e95 !important;
    text-align: center !important;
    margin: 0 0 56px !important;
}

/* Grid */
.dd-section-partners #partner-logos,
.dd-section-partners .partner-logos-grid {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 40px 28px !important;
    padding: 0 48px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
}

/* Logo cell — completely transparent, no box */
.dd-section-partners .partner-logos-grid .partner-logo,
.dd-section-partners #partner-logos .partner-logo {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px !important;
    min-height: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .22s ease !important;
    overflow: visible !important;
}

/* Kill ALL pseudo-elements on logo cells */
.dd-section-partners .partner-logos-grid .partner-logo::before,
.dd-section-partners .partner-logos-grid .partner-logo::after,
.dd-section-partners #partner-logos .partner-logo::before,
.dd-section-partners #partner-logos .partner-logo::after {
    display: none !important;
    content: none !important;
}

/* Logo image */
.dd-section-partners .partner-logos-grid .partner-logo img,
.dd-section-partners #partner-logos .partner-logo img {
    max-height: 64px !important;
    max-width: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    transition: transform .22s ease !important;
}

.dd-section-partners .partner-logos-grid .partner-logo:hover,
.dd-section-partners #partner-logos .partner-logo:hover {
    transform: translateY(-4px) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.dd-section-partners .partner-logos-grid .partner-logo:hover img,
.dd-section-partners #partner-logos .partner-logo:hover img {
    transform: scale(1.1) !important;
}

/* Responsive */
@media (max-width: 1100px) {
    .dd-section-partners .partner-logos-grid,
    .dd-section-partners #partner-logos {
        grid-template-columns: repeat(6, 1fr) !important;
        padding: 0 32px !important;
    }
}
@media (max-width: 768px) {
    .dd-section-partners .partner-logos-grid,
    .dd-section-partners #partner-logos {
        grid-template-columns: repeat(4, 1fr) !important;
        padding: 0 20px !important;
        gap: 28px 16px !important;
    }
}
@media (max-width: 480px) {
    .dd-section-partners .partner-logos-grid,
    .dd-section-partners #partner-logos {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: 0 16px !important;
    }
}

/* =====================================================================
   [FINAL v2] — Partners title color — force dark on light bg
   Beats the global dark-theme h2 rule above with higher specificity
   ===================================================================== */
html[data-bs-theme="dark"]  .home .dd-section-partners .dd-partners-title,
html[data-bs-theme="light"] .home .dd-section-partners .dd-partners-title,
.home .dd-section-partners .dd-partners-title {
    color: #152e53 !important;
}
html[data-bs-theme="dark"]  .home .dd-section-partners .dd-partners-sub,
html[data-bs-theme="light"] .home .dd-section-partners .dd-partners-sub,
.home .dd-section-partners .dd-partners-sub {
    color: #6b7e95 !important;
}

/* Partners subtitle — centered, visible */
html[data-bs-theme="dark"]  .home .dd-section-partners .dd-partners-sub,
html[data-bs-theme="light"] .home .dd-section-partners .dd-partners-sub,
.home .dd-section-partners .dd-partners-sub {
    color: #4a6080 !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Partners header — force center in RTL */
.dd-section-partners .dd-section-header,
.dd-section-partners .dd-section-header * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
}
.dd-section-partners .dd-partners-title,
.dd-section-partners .dd-partners-sub {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* =====================================================================
   [BRAND] — Concept Plus identity: colors #23a8ab + #152e53, fonts
   Sultan Display (AR headings) · Leelawadee (EN) · Noto Kufi Arabic (body)
   ===================================================================== */

/* ── 1. CSS VARIABLES — brand colors ── */
:root {
    --dd-teal:      #23a8ab !important;
    --dd-teal-600:  #1a8a8d !important;
    --dd-teal-900:  #0d4a4c !important;
    --dd-navy:      #152e53 !important;
    --dd-bg:        #152e53 !important;
    --dd-bg-card:   #1e3a5f !important;
}

/* ── 2. FONTS ── */
/* Arabic headings — Sultan Display, fall back to Noto Kufi */
.home h1, .home h2, .home h3, .home h4,
.home .section-title, .home .hero-headline,
.home .dd-hero-title, .home .dd-about-headline,
.home .dd-about-section-title, .home .dd-partners-title,
.home .dd-founders-name, .home .dd-stat-num,
.home .cta-title, .home .pricing-title,
.home .dd-svc-body h3, .home .dd-about-card h4,
.home .ugc-stat-number {
    font-family: 'Sultan', 'Noto Kufi Arabic', 'Tajawal', sans-serif !important;
}

/* Body / nav / labels — Leelawadee for EN, Noto Kufi Arabic for AR */
.home, .home p, .home li, .home span,
.home .nav-link, .home .dd-hero-sub,
.home .dd-about-body, .home .dd-svc-body p,
.home .dd-about-card p {
    font-family: 'Leelawadee UI', 'Leelawadee', 'Noto Kufi Arabic', 'Tajawal', sans-serif !important;
}

/* Nav specifically */
.header .navbar .nav-link,
.header .navbar .navbar-brand {
    font-family: 'Leelawadee UI', 'Leelawadee', 'Noto Kufi Arabic', 'Tajawal', sans-serif !important;
}

/* ── 3. TEAL ACCENT — apply brand #23a8ab everywhere teal appears ── */
/* Buttons */
.dd-btn-primary {
    background: #23a8ab !important;
    color: #fff !important;
}
.dd-btn-primary:hover { background: #1a8a8d !important; }
.dd-btn-ghost {
    border-color: rgba(35,168,171,.5) !important;
    color: #23a8ab !important;
}
.dd-btn-ghost:hover {
    border-color: #23a8ab !important;
    color: #23a8ab !important;
}

/* Hero done line */
.dd-hero-done { color: #23a8ab !important; }
.dd-eyebrow   { color: #23a8ab !important; }
.dd-eyebrow::before { background: #23a8ab !important; }

/* Section labels */
.dd-section-label       { color: #23a8ab !important; }
.dd-section-label-light { color: #23a8ab !important; }
.dd-section-label-light::before,
.dd-section-label-light::after { background: #23a8ab !important; }

/* About icon */
.dd-about-icon { background: #23a8ab !important; color: #fff !important; }
.dd-tagline    { color: #23a8ab !important; }
.dd-tagline-bar { background: #23a8ab !important; }

/* Services icon */
.home .dd-svc-icon { color: #23a8ab !important; }
.home .dd-svc-line::before { background: #23a8ab !important; }
.home .dd-svc-line::after  {
    border-right-color: #23a8ab !important;
    border-bottom-color: #23a8ab !important;
}

/* Stats numbers */
.home .dd-stat-num { color: #23a8ab !important; }

/* Timeline nodes */
.dd-tl-node { background: #23a8ab !important; }

/* Founder */
.dd-founder-title    { color: #23a8ab !important; }
.dd-founder-quote    { border-color: #23a8ab !important; }
.dd-founder-quote-tag { color: #23a8ab !important; }
.dd-founder-shape    { background: #23a8ab !important; }

/* CTA glow */
.dd-cta-glow-v2 {
    background: radial-gradient(rgba(35,168,171,.18), transparent 65%) !important;
}

/* Social buttons hover */
.dd-social-btn:hover {
    background: #23a8ab !important;
    border-color: #23a8ab !important;
}

/* Nav hover */
.header .navbar .nav-item .nav-link:hover { color: #23a8ab !important; }

/* Mo modal icon */
.mo-icon { background: linear-gradient(135deg, #152e53, #23a8ab) !important; }
.mo-submit { background: linear-gradient(135deg, #152e53, #23a8ab) !important; }
.mo-field input:focus, .mo-field select:focus, .mo-field textarea:focus {
    border-color: #23a8ab !important;
    box-shadow: 0 0 0 3px rgba(35,168,171,.12) !important;
}
.mo-captcha { border-color: #23a8ab !important; }
.mo-cap-eq  { color: #23a8ab !important; }

/* Pricing gradient overrides */
.pricing-gradient-1 { background: linear-gradient(135deg, #152e53, #23a8ab) !important; }
.btn-gradient-1     { background: linear-gradient(135deg, #152e53, #23a8ab) !important; color: #fff !important; }

/* Partners title stays navy on light bg */
.home .dd-section-partners .dd-partners-title { color: #152e53 !important; }
.home .dd-section-partners .dd-partners-sub   { color: #4a6080 !important; }

/* WhatsApp float — keep green, not brand */

/* ── 4. DARK SECTION BG — theme-aware (see theme-specific rules below) ── */
/* dd-svc-item bg is theme-aware — see [data-bs-theme] rules */

/* ── 5. LIGHT MODE — navy text, teal accent ── */
html[data-bs-theme="light"] .home .dd-about-section-title,
html[data-bs-theme="light"] .home .dd-about-headline,
html[data-bs-theme="light"] .home .section-title { color: #152e53 !important; }
html[data-bs-theme="light"] .home .gradient-text {
    background: linear-gradient(135deg, #152e53, #23a8ab) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* =====================================================================
   [LTR PAGE] — English page overrides (direction:ltr corrections)
   ===================================================================== */

/* About grid: in LTR — cards LEFT, text RIGHT (opposite of RTL) */
.ltr-page .dd-about-grid {
    direction: ltr !important;
}
.ltr-page .dd-about-grid > *:first-child { order: 1 !important; }  /* cards: left */
.ltr-page .dd-about-grid > *:last-child  { order: 2 !important; }  /* text: right */

/* About cards: in LTR the gap between stacked cards */
.ltr-page .dd-about-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* About section title: left-align in LTR */
.ltr-page .dd-about-section-title,
.ltr-page .dd-about-headline,
.ltr-page .dd-about-body {
    text-align: left !important;
}

/* Services: LTR — icon LEFT, text RIGHT (opposite of RTL order:-1) */
.ltr-page .dd-svc-item {
    flex-direction: row !important;
    text-align: left !important;
}
.ltr-page .dd-svc-icon {
    order: 0 !important;   /* icon first in DOM = LEFT in LTR */
}
.ltr-page .dd-svc-body {
    text-align: left !important;
}
.ltr-page .dd-svc-body h3,
.ltr-page .dd-svc-body p {
    text-align: left !important;
}

/* Services animation — same logic, different id */
.home.reveal-ready #svc-list-en .dd-svc-item {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity .5s ease, transform .5s ease,
                border-color .22s, background .22s, box-shadow .22s !important;
}
.home.reveal-ready #svc-list-en.in-view .dd-svc-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(1) { transition-delay: 0.00s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(3) { transition-delay: 0.15s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(5) { transition-delay: 0.30s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(7) { transition-delay: 0.45s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(9) { transition-delay: 0.60s !important; }
.home.reveal-ready #svc-list-en .dd-svc-line::before,
.home.reveal-ready #svc-list-en .dd-svc-line::after {
    opacity: 0 !important; transition: opacity .4s ease !important;
}
.home.reveal-ready #svc-list-en.in-view .dd-svc-line::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line::after { opacity: 1 !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(2)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(2)::after { transition-delay: .12s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(4)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(4)::after { transition-delay: .27s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(6)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(6)::after { transition-delay: .42s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(8)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(8)::after { transition-delay: .57s !important; }

/* Timeline: LTR — node LEFT, text RIGHT */
.ltr-page .dd-tl-item {
    direction: ltr !important;
}
.ltr-page .dd-tl-r {
    text-align: left !important;
    margin-inline-start: 16px !important;
    margin-inline-end: 0 !important;
}

/* Section headers: left-align in LTR */
.ltr-page .dd-section-header {
    text-align: left !important;
}
.ltr-page .dd-section-label {
    justify-content: flex-start !important;
}
.ltr-page .dd-section-label::before {
    order: -1 !important;
}

/* Partners heading: keep centered on LTR */
.ltr-page .dd-section-partners .dd-section-header,
.ltr-page .dd-section-partners .dd-partners-title,
.ltr-page .dd-section-partners .dd-partners-sub {
    text-align: center !important;
}

/* Hero: LTR center */
.ltr-page .dd-hero-content {
    text-align: center !important;
}
.ltr-page .dd-eyebrow {
    justify-content: center !important;
}
.ltr-page .dd-hero-btns {
    justify-content: center !important;
}

/* Modal: LTR */
.ltr-page .mo-box,
#meetingModal .mo-box {
    direction: ltr !important;
    text-align: left !important;
}

/* Founder grid: LTR — photo LEFT, text RIGHT */
.ltr-page .dd-founder-grid {
    direction: ltr !important;
}
.ltr-page .dd-founder-title,
.ltr-page .dd-founder-bio,
.ltr-page .dd-founder-name {
    text-align: left !important;
}
.ltr-page .dd-founder-quote {
    border-inline-start: 3px solid #23a8ab !important;
    border-inline-end: none !important;
    padding-inline-start: 18px !important;
    padding-inline-end: 0 !important;
    text-align: left !important;
}

/* Partners logos for EN (different id) */
.ltr-page #partner-logos-en {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 40px 28px !important;
    padding: 0 48px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    align-items: center !important;
}
.ltr-page #partner-logos-en .partner-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .22s ease !important;
}
.ltr-page #partner-logos-en .partner-logo::before,
.ltr-page #partner-logos-en .partner-logo::after {
    display: none !important; content: none !important;
}
.ltr-page #partner-logos-en .partner-logo img {
    max-height: 64px !important; max-width: 100% !important;
    object-fit: contain !important; opacity: 1 !important;
    filter: none !important; background: none !important;
    padding: 0 !important; box-shadow: none !important;
}
.ltr-page #partner-logos-en .partner-logo:hover {
    transform: translateY(-4px) !important;
}
@media (max-width: 1100px) {
    .ltr-page #partner-logos-en { grid-template-columns: repeat(6,1fr) !important; padding: 0 32px !important; }
}
@media (max-width: 768px) {
    .ltr-page #partner-logos-en { grid-template-columns: repeat(4,1fr) !important; padding: 0 20px !important; }
}

/* =====================================================================
   [LTR v2] — Font fix, timeline, buttons, service icon order
   ===================================================================== */

/* ── FONT: Sultan is Arabic only — English page uses Leelawadee/system ── */
.ltr-page h1, .ltr-page h2, .ltr-page h3, .ltr-page h4, .ltr-page h5,
.ltr-page .dd-hero-title, .ltr-page .dd-hero-done,
.ltr-page .dd-about-section-title, .ltr-page .dd-partners-title,
.ltr-page .dd-svc-body h3, .ltr-page .dd-about-card h4,
.ltr-page .dd-stat-num, .ltr-page .dd-founder-name,
.ltr-page .pricing-title, .ltr-page .dd-tl-en-body h5 {
    font-family: 'Leelawadee UI', 'Leelawadee', 'Segoe UI', Arial, sans-serif !important;
    letter-spacing: 0 !important;
}
.ltr-page p, .ltr-page span, .ltr-page a, .ltr-page li,
.ltr-page .dd-hero-sub, .ltr-page .dd-about-body,
.ltr-page .dd-svc-body p, .ltr-page .nav-link {
    font-family: 'Leelawadee UI', 'Leelawadee', 'Segoe UI', Arial, sans-serif !important;
}

/* ── SERVICE ITEMS: icon LEFT, text RIGHT in LTR ── */
.ltr-page .dd-svc-item,
.en-svc-item {
    flex-direction: row !important;
    text-align: left !important;
}
.ltr-page .dd-svc-icon,
.en-svc-item .dd-svc-icon {
    order: 0 !important;   /* LEFT in LTR */
    flex-shrink: 0 !important;
}
.ltr-page .dd-svc-body,
.en-svc-item .dd-svc-body {
    order: 1 !important;
    text-align: left !important;
}

/* ── BUTTONS: ghost button fix ── */
.ltr-page .dd-btn-ghost {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 28px !important;
    border: 2px solid rgba(35,168,171,.55) !important;
    border-radius: 50px !important;
    color: #23a8ab !important;
    font-weight: 600 !important;
    font-size: .98rem !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: border-color .22s, background .22s, color .22s !important;
    cursor: pointer !important;
}
.ltr-page .dd-btn-ghost:hover {
    border-color: #23a8ab !important;
    background: rgba(35,168,171,.08) !important;
    color: #23a8ab !important;
}
.ltr-page .dd-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    background: #23a8ab !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: .98rem !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background .22s, transform .2s !important;
}
.ltr-page .dd-btn-primary:hover {
    background: #1a8a8d !important;
    transform: translateY(-2px) !important;
}
.ltr-page .dd-hero-btns {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 32px !important;
}

/* ── TIMELINE (EN): vertical line + teal circle nodes ── */
.dd-tl-en {
    position: relative !important;
    padding-left: 40px !important;
    max-width: 760px !important;
}
.dd-tl-en::before {
    content: '' !important;
    position: absolute !important;
    left: 16px !important;
    top: 8px !important; bottom: 8px !important;
    width: 2px !important;
    background: rgba(35,168,171,.3) !important;
    border-radius: 2px !important;
}
.dd-tl-en-item {
    position: relative !important;
    margin-bottom: 36px !important;
    padding-left: 20px !important;
    display: flex !important;
    flex-direction: column !important;
}
.dd-tl-en-item:last-child { margin-bottom: 0 !important; }
.dd-tl-en-node {
    position: absolute !important;
    left: -40px !important;
    top: 0 !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: #23a8ab !important;
    color: #fff !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Leelawadee UI','Segoe UI',sans-serif !important;
    box-shadow: 0 0 0 4px rgba(35,168,171,.18) !important;
    flex-shrink: 0 !important;
}
.dd-tl-en-body h5 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 6px 0 6px !important;
    text-align: left !important;
}
.dd-tl-en-body p {
    font-size: .95rem !important;
    color: rgba(255,255,255,.68) !important;
    margin: 0 !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* ── ABOUT GRID in LTR ── */
.ltr-page .dd-about-grid {
    direction: ltr !important;
    grid-template-columns: 1fr 1fr !important;
}
.ltr-page .dd-about-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* ── SECTION HEADERS in LTR ── */
.ltr-page .dd-section-header { text-align: left !important; }
.ltr-page .dd-section-label  { justify-content: flex-start !important; }

/* =====================================================================
   [LTR v3] — English page font + layout fixes
   ===================================================================== */

/* Font: English page uses system sans, NOT Sultan */
.ltr-page h1,.ltr-page h2,.ltr-page h3,.ltr-page h4,.ltr-page h5,.ltr-page h6,
.ltr-page p,.ltr-page span,.ltr-page a,.ltr-page li,.ltr-page label,
.ltr-page .dd-hero-title,.ltr-page .dd-hero-done,.ltr-page .dd-hero-sub,
.ltr-page .dd-about-section-title,.ltr-page .dd-about-headline,.ltr-page .dd-about-body,
.ltr-page .dd-svc-body h3,.ltr-page .dd-svc-body p,
.ltr-page .dd-about-card h4,.ltr-page .dd-about-card p,
.ltr-page .dd-stat-num,.ltr-page .dd-stat-label,
.ltr-page .dd-partners-title,.ltr-page .dd-partners-sub,
.ltr-page .dd-founder-name,.ltr-page .dd-founder-title,
.ltr-page .dd-founder-bio,.ltr-page .dd-tl-card h4,.ltr-page .dd-tl-card p,
.ltr-page .pricing-title,.ltr-page .dd-tagline,
.ltr-page .dd-section-label,.ltr-page .dd-section-label-light,
.ltr-page .dd-light-h2,.ltr-page .dd-light-p {
    font-family: 'Leelawadee UI','Leelawadee','Segoe UI',Arial,sans-serif !important;
}

/* Services: icon LEFT in LTR */
.ltr-page .dd-svc-item,.en-svc {
    flex-direction: row !important;
    text-align: left !important;
}
.ltr-page .dd-svc-icon,.en-svc .dd-svc-icon { order: 0 !important; }
.ltr-page .dd-svc-body,.en-svc .dd-svc-body { order: 1 !important; text-align:left !important; }
.ltr-page .dd-svc-body h3,.en-svc .dd-svc-body h3 { text-align:left !important; }

/* About grid LTR: cards left, text right */
.ltr-page .dd-about-grid { direction:ltr !important; }
.ltr-page .dd-about-cards { display:flex !important; flex-direction:column !important; gap:24px !important; }

/* Tagline LTR */
.ltr-page .dd-tagline { justify-content:flex-start !important; }

/* Timeline LTR */
.ltr-page .dd-timeline { direction:ltr !important; }
.ltr-page .dd-tl-card { text-align:left !important; }

/* About section title on light bg */
.ltr-page .dd-about-section-title { color:#152e53 !important; }
.ltr-page .dd-about-headline { color:#4a5568 !important; font-size:1rem !important; font-weight:500 !important; }
.ltr-page .dd-about-body { color:#64748b !important; }

/* Section labels center on EN (kept same as AR) */
.ltr-page .dd-section-header { text-align:center !important; }

/* Founder quote border direction */
.ltr-page .dd-founder-quote {
    border-left: 3px solid #23a8ab !important;
    border-right: none !important;
    padding-left: 18px !important;
    padding-right: 0 !important;
}
/* Light section founder text color */
.ltr-page .dd-founder-name { color:#152e53 !important; }
.ltr-page .dd-founder-title { color:#23a8ab !important; }
.ltr-page .dd-founder-bio { color:#4a5568 !important; }

/* =====================================================================
   [FIX] — Section header h2 size enforced on both pages
   ===================================================================== */
.home .dd-section-header h2,
.home .dd-section-dark .dd-section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
}
.home .dd-section-light .dd-section-header h2,
.home .dd-section-light h2.dd-light-h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 900 !important;
    color: #152e53 !important;
}
/* Ensure ltr-page h2 inside section headers is big too */
.ltr-page .dd-section-header h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

/* =====================================================================
   [FIX] — Process label center, packages parity, text colors
   ===================================================================== */

/* dd-section-label-light CENTER fix — inline-flex blocks text-align */
.dd-section-label-light {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #23a8ab !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    width: 100% !important;
}
.dd-section-label-light::before,
.dd-section-label-light::after {
    content: '' !important;
    display: inline-block !important;
    width: 28px !important; height: 2px !important;
    background: #23a8ab !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* dd-section-label (dark bg) center */
.dd-section-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    color: #23a8ab !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    margin-bottom: 14px !important;
    width: 100% !important;
}

/* Packages section — match Arabic: white/light bg, same text colors */
.pricing-section {
    background: #fff !important;
    color: #152e53 !important;
}
.pricing-section .section-title,
.pricing-section h2,
.pricing-section h3,
.pricing-section h4 {
    color: #152e53 !important;
    font-family: 'Sultan','Noto Kufi Arabic','Tajawal',sans-serif !important;
}
.ltr-page .pricing-section .section-title,
.ltr-page .pricing-section h2,
.ltr-page .pricing-section h3,
.ltr-page .pricing-section h4 {
    font-family: 'Leelawadee UI','Leelawadee','Segoe UI',Arial,sans-serif !important;
}
.pricing-section .gradient-text {
    background: linear-gradient(135deg,#152e53,#23a8ab) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.pricing-section .text-secondary,
.pricing-section p { color: #4a5568 !important; }
.pricing-section .fs-5.fw-semibold { color: #152e53 !important; }

/* Pricing cards — same in both pages */
.pricing-card {
    background: #fff !important;
    border: 1.5px solid rgba(21,46,83,0.12) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(21,46,83,0.08) !important;
    transition: transform .22s, box-shadow .22s !important;
}
.pricing-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 36px rgba(21,46,83,0.14) !important;
}
.pricing-card .pricing-content { padding: 20px !important; }
.pricing-card .pricing-duration-list li {
    color: #152e53 !important;
    border-bottom: 1px solid rgba(21,46,83,0.07) !important;
}
.pricing-card .pricing-duration-list .price { color: #23a8ab !important; font-weight: 700 !important; }

/* Report preview section */
.report-preview { background: #f4f7f7 !important; }
.report-preview p { color: #4a5568 !important; }
.report-preview .note { color: #64748b !important; }

/* EN pricing section dark bg — override to light like AR */
#pricing.dd-section-dark {
    background: #fff !important;
}
#pricing.dd-section-dark .dd-section-header h2 { color: #152e53 !important; }
#pricing.dd-section-dark .dd-section-header p  { color: #4a5568 !important; }
#pricing.dd-section-dark .dd-section-label      { color: #23a8ab !important; }

/* =====================================================================
   [FIX] — آلية عملنا center + EN text colors matching AR
   ===================================================================== */

/* Force dd-section-label-light to always center */
.home .dd-section-header .dd-section-label-light {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* EN page: pricing/old-pricing section text colors matching AR */
.ltr-page .pricing-section .section-title,
.ltr-page .pricing-section h2,
.ltr-page .pricing-section h3,
.ltr-page .pricing-section h4 { color: #152e53 !important; }
.ltr-page .pricing-section p   { color: #4a5568 !important; }
.ltr-page .pricing-section .gradient-text {
    background: linear-gradient(135deg,#152e53,#23a8ab) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.ltr-page .pricing-section .text-secondary { color: #64748b !important; }

/* EN page: process section (light bg) text colors */
.ltr-page .dd-section-light .dd-tl-card h4 { color: #152e53 !important; }
.ltr-page .dd-section-light .dd-tl-card p  { color: #4a5568 !important; }
.ltr-page .dd-section-light .dd-light-h2   { color: #152e53 !important; }
.ltr-page .dd-section-light .dd-light-p    { color: #64748b !important; }

/* EN page: about section (light bg) */
.ltr-page .dd-section-light .dd-about-section-title { color: #152e53 !important; }
.ltr-page .dd-section-light .dd-about-headline      { color: #4a5568 !important; }
.ltr-page .dd-section-light .dd-about-body          { color: #64748b !important; }
.ltr-page .dd-section-light .dd-tagline             { color: #23a8ab !important; }

/* EN founder section (light bg) */
.ltr-page .dd-section-light .dd-founder-name       { color: #152e53 !important; }
.ltr-page .dd-section-light .dd-founder-title      { color: #23a8ab !important; }
.ltr-page .dd-section-light .dd-founder-bio        { color: #4a5568 !important; }
.ltr-page .dd-section-light .dd-founder-quote p    { color: #4a5568 !important; }
.ltr-page .dd-section-light .dd-founder-quote-tag  { color: #23a8ab !important; }

/* report-preview section */
.ltr-page .report-preview p      { color: #4a5568 !important; }
.ltr-page .report-preview .note  { color: #94a3b8 !important; }

/* =====================================================================
   [ANIMATION FINAL] — Service boxes build in on scroll (AR + EN)
   Single source of truth — overrides all earlier animation blocks.
   ===================================================================== */

/* ── INITIAL STATE: boxes hidden, shifted down ── */
.home.reveal-ready #svc-list .dd-svc-item,
.home.reveal-ready #svc-list-en .dd-svc-item {
    opacity: 0 !important;
    transform: translateY(48px) scale(0.97) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

/* ── CONNECTOR LINES: hidden initially ── */
.home.reveal-ready #svc-list .dd-svc-line::before,
.home.reveal-ready #svc-list .dd-svc-line::after,
.home.reveal-ready #svc-list-en .dd-svc-line::before,
.home.reveal-ready #svc-list-en .dd-svc-line::after {
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
}

/* ── REVEALED STATE: boxes visible ── */
.home.reveal-ready #svc-list.in-view .dd-svc-item,
.home.reveal-ready #svc-list-en.in-view .dd-svc-item {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* ── STAGGER: each box appears slightly after the previous ── */
/* AR list — items sit at positions 1,3,5,7,9 (lines at 2,4,6,8) */
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(1)  { transition-delay: 0.00s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(3)  { transition-delay: 0.18s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(5)  { transition-delay: 0.36s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(7)  { transition-delay: 0.54s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-item:nth-child(9)  { transition-delay: 0.72s !important; }

/* EN list */
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(1) { transition-delay: 0.00s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(3) { transition-delay: 0.18s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(5) { transition-delay: 0.36s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(7) { transition-delay: 0.54s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-item:nth-child(9) { transition-delay: 0.72s !important; }

/* ── LINES appear after their preceding box ── */
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(2)::after  { opacity:1 !important; transition-delay:0.14s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(4)::after  { opacity:1 !important; transition-delay:0.32s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(6)::after  { opacity:1 !important; transition-delay:0.50s !important; }
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::before,
.home.reveal-ready #svc-list.in-view .dd-svc-line:nth-child(8)::after  { opacity:1 !important; transition-delay:0.68s !important; }

.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(2)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(2)::after { opacity:1 !important; transition-delay:0.14s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(4)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(4)::after { opacity:1 !important; transition-delay:0.32s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(6)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(6)::after { opacity:1 !important; transition-delay:0.50s !important; }
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(8)::before,
.home.reveal-ready #svc-list-en.in-view .dd-svc-line:nth-child(8)::after { opacity:1 !important; transition-delay:0.68s !important; }

/* Accessibility: skip animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .home.reveal-ready #svc-list .dd-svc-item,
    .home.reveal-ready #svc-list-en .dd-svc-item,
    .home.reveal-ready #svc-list .dd-svc-line::before,
    .home.reveal-ready #svc-list .dd-svc-line::after,
    .home.reveal-ready #svc-list-en .dd-svc-line::before,
    .home.reveal-ready #svc-list-en .dd-svc-line::after {
        opacity: 1 !important; transform: none !important; transition-delay: 0s !important;
    }
}

/* =====================================================================
   [LIGHT THEME FINAL] — Full light mode fix: text/bg/logo/nav contrast
   ===================================================================== */

/* ── NAVBAR in light theme ── */
/* ── DARK SECTIONS: always keep white text even in light theme ── */
html[data-bs-theme="light"] .home .dd-section-dark h1,
html[data-bs-theme="light"] .home .dd-section-dark h2,
html[data-bs-theme="light"] .home .dd-section-dark h3,
html[data-bs-theme="light"] .home .dd-section-dark h4,
html[data-bs-theme="light"] .home .dd-section-dark h5,
html[data-bs-theme="light"] .home .dd-section-dark h6,
html[data-bs-theme="light"] .home .dd-section-dark p,
html[data-bs-theme="light"] .home .dd-section-dark li,
html[data-bs-theme="light"] .home .dd-section-dark span:not(.dd-hero-done):not(.dd-eyebrow-bar),
html[data-bs-theme="light"] .home .dd-section-dark label {
    color: inherit !important;
}
/* Hero specifically */
html[data-bs-theme="light"] .home .dd-hero h1,
html[data-bs-theme="light"] .home .dd-hero .dd-hero-title,
html[data-bs-theme="light"] .home .dd-hero p,
html[data-bs-theme="light"] .home .dd-hero .dd-hero-sub {
    color: #ffffff !important;
}
html[data-bs-theme="light"] .home .dd-hero .dd-hero-done,
html[data-bs-theme="light"] .home .dd-hero .dd-eyebrow {
    color: #23a8ab !important;
}
/* Services dark section */
html[data-bs-theme="light"] .home .dd-svc-body h3 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-svc-body p  { color: rgba(255,255,255,.68) !important; }
/* Stats dark section */
html[data-bs-theme="light"] .home .dd-stat-num   { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-stat-label { color: rgba(255,255,255,.72) !important; }
/* Videos dark section */
html[data-bs-theme="light"] .home .dd-section-dark .dd-section-header h2 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-section-dark .dd-section-header p  { color: rgba(255,255,255,.65) !important; }
html[data-bs-theme="light"] .home .dd-section-dark .dd-section-label     { color: #23a8ab !important; }

/* ── LIGHT SECTIONS: navy/grey text ── */
html[data-bs-theme="light"] .home .dd-section-light,
html[data-bs-theme="light"] .home .dd-section-partners {
    background: #f4f7f7 !important;
}
html[data-bs-theme="light"] .home .dd-section-light h1,
html[data-bs-theme="light"] .home .dd-section-light h2,
html[data-bs-theme="light"] .home .dd-section-light h3,
html[data-bs-theme="light"] .home .dd-section-light h4 { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-section-light p   { color: #4a5568 !important; }
html[data-bs-theme="light"] .home .dd-section-light .dd-section-label-light { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-section-light .dd-light-h2 { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-section-light .dd-light-p  { color: #64748b !important; }

/* About section (light bg) */
html[data-bs-theme="light"] .home .dd-about-section-title { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-about-headline      { color: #4a5568 !important; }
html[data-bs-theme="light"] .home .dd-about-body          { color: #64748b !important; }
html[data-bs-theme="light"] .home .dd-tagline             { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-about-icon          { background: #23a8ab !important; color: #fff !important; }
/* About cards stay dark on any theme */
html[data-bs-theme="light"] .home .dd-about-card {
    background: #1e3a5f !important;
    border-color: rgba(255,255,255,0.08) !important;
}
html[data-bs-theme="light"] .home .dd-about-card h4 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-about-card p  { color: rgba(255,255,255,.68) !important; }

/* Timeline (light bg) */
html[data-bs-theme="light"] .home .dd-tl-node { background: #23a8ab !important; color: #fff !important; }
html[data-bs-theme="light"] .home .dd-tl-card { background: #ffffff !important; border-color: rgba(21,46,83,0.12) !important; }
html[data-bs-theme="light"] .home .dd-tl-card h4 { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-tl-card p  { color: #4a5568 !important; }

/* Founder (light bg) */
html[data-bs-theme="light"] .home .dd-founder-name       { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-founder-title      { color: #23a8ab !important; }
html[data-bs-theme="light"] .home .dd-founder-bio        { color: #4a5568 !important; }
html[data-bs-theme="light"] .home .dd-founder-quote p    { color: #4a5568 !important; }
html[data-bs-theme="light"] .home .dd-founder-quote-tag  { color: #23a8ab !important; }

/* Partners (light bg) */
html[data-bs-theme="light"] .home .dd-partners-title { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-partners-sub   { color: #6b7e95 !important; }

/* Pricing section (light bg in old-pricing) */
html[data-bs-theme="light"] .home .pricing-section .section-title { color: #152e53 !important; }
html[data-bs-theme="light"] .home .pricing-section h2,
html[data-bs-theme="light"] .home .pricing-section h3,
html[data-bs-theme="light"] .home .pricing-section h4 { color: #152e53 !important; }
html[data-bs-theme="light"] .home .pricing-section p  { color: #4a5568 !important; }

/* SERVICE ITEM cards: dark ONLY in dark theme (light theme handled below) */
html[data-bs-theme="dark"] .home .dd-svc-item {
    background: #1e3a5f !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* removed: hero goes light in light theme */
html[data-bs-theme="light"] .home .dd-hero-glow,
html[data-bs-theme="light"] .home .dd-hero-glow-1,
html[data-bs-theme="light"] .home .dd-hero-glow-2 {
    opacity: 0.6 !important;
}

/* ── LOGO STRIP on light theme ── */
html[data-bs-theme="light"] .home .dd-logos-strip {
    background: rgba(21,46,83,0.04) !important;
    border-top: 1px solid rgba(21,46,83,0.08) !important;
}
html[data-bs-theme="light"] .home .logos-slider-viewport img {
    filter: grayscale(0%) !important;
    opacity: 0.85 !important;
}

/* Hero title: dd-hero-done wrapper = white, inner teal span stays teal */
.ltr-page .dd-hero-done {
    color: #ffffff !important;
    display: block !important;
}
.ltr-page .dd-hero-done span {
    color: #23a8ab !important;
}

/* ── Services + Work sections: always dark bg regardless of theme ── */
/* removed: services/work go light in light theme */
html[data-bs-theme="light"] .home #services .dd-section-header h2,
html[data-bs-theme="light"] .home #work .dd-section-header h2 {
    color: #ffffff !important;
}
html[data-bs-theme="light"] .home #services .dd-section-header p,
html[data-bs-theme="light"] .home #work .dd-section-header p {
    color: rgba(255,255,255,.65) !important;
}
html[data-bs-theme="light"] .home #services .dd-section-label,
html[data-bs-theme="light"] .home #work .dd-section-label {
    color: #23a8ab !important;
}

/* ── ALWAYS DARK — hero, services, work, stats: force dark bg in ALL themes ── */
.home .dd-hero,
.home #hero,
.home #services,
.home #work,
.home #process-dark {
    /* theme-aware — see [data-bs-theme] rules */
}
/* Kill any white gap between hero and services */
.home .dd-hero { margin-bottom: 0 !important; padding-bottom: 80px !important; }
.home #services { margin-top: 0 !important; }

/* body follows theme */
/* main follows theme */
/* Light theme navbar on home: keep transparent/dark so it blends with hero */
html[data-bs-theme="light"] .home ~ * .header .navbar,
html[data-bs-theme="light"] .header .navbar {
    background: #152e53 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link {
    color: rgba(255,255,255,.82) !important;
}
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link:hover {
    color: #23a8ab !important;
}

/* =====================================================================
   [BRAND COLORS FINAL] — Single source of truth
   Primary teal:  #23a8ab  (R35 G168 B171)
   Primary navy:  #152e53  (R21 G46 B83)
   Dark bg:       #152e53  (navy-derived dark)
   Card surface:  #1a2438  (navy-derived mid)
   Icon bg:       #1e2d47  (navy-derived light surface)
   Teal dark:     #1a8a8d  (teal hover/active)
   ===================================================================== */
:root {
    --dd-teal:      #23a8ab !important;
    --dd-teal-600:  #1a8a8d !important;
    --dd-navy:      #152e53 !important;
    --dd-bg:        #152e53 !important;
    --dd-bg-card:   #1e3a5f !important;
    --dd-bg-icon:   #23456e !important;
    --accent:       #23a8ab !important;
}

/* =====================================================================
   [BRAND CONSISTENCY FINAL] — Enforce #23a8ab + #152e53 in BOTH themes
   This block is LAST — guarantees brand colors everywhere.
   ===================================================================== */

/* ── CSS VARIABLES — both themes resolve to brand ── */
:root,
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --dd-teal:       #23a8ab;
    --dd-teal-600:   #1a8a8d;
    --dd-teal-900:   #0d4a4c;
    --dd-navy:       #152e53;
    --dd-bg:         #152e53;
    --dd-bg-card:    #1e3a5f;
    --dd-bg-icon:    #23456e;
    --accent:        #23a8ab;
    --accent-strong: #23a8ab;
    --primary-dark:  #152e53;
}

/* ── TEAL ELEMENTS — brand teal in both themes ── */
.home .dd-eyebrow, .home .dd-eyebrow-bar,
.home .dd-hero-done > span,
.home .dd-section-label, .home .dd-section-label-light,
.home .dd-svc-icon,
.home .dd-tagline, .home .dd-founder-title,
.home .dd-founder-quote-tag,
.home .stat-number, .home .dd-stat-num {
    color: #23a8ab !important;
}
.home .dd-eyebrow-bar,
.home .dd-tagline-bar,
.home .dd-section-label-light::before,
.home .dd-section-label-light::after,
.home .dd-svc-line::before,
.home .dd-tl-node,
.home .dd-about-icon,
.home .dd-founder-shape {
    background: #23a8ab !important;
}
.home .dd-svc-line::after {
    border-right-color: #23a8ab !important;
    border-bottom-color: #23a8ab !important;
}

/* ── BUTTONS — brand teal both themes ── */
.home .dd-btn-primary,
.ltr-page .dd-btn-primary,
.home .btn-gradient-2 {
    background: #23a8ab !important;
    color: #fff !important;
}
.home .dd-btn-primary:hover,
.ltr-page .dd-btn-primary:hover {
    background: #1a8a8d !important;
}
.home .dd-btn-ghost,
.ltr-page .dd-btn-ghost {
    border-color: rgba(35,168,171,.55) !important;
    color: #23a8ab !important;
    background: transparent !important;
}
.home .dd-btn-ghost:hover,
.ltr-page .dd-btn-ghost:hover {
    border-color: #23a8ab !important;
    background: rgba(35,168,171,.08) !important;
    color: #23a8ab !important;
}

/* ── PACKAGE GRADIENTS — brand-aligned ── */
.home .pricing-gradient-4,
.home .btn-gradient-4 {
    background: linear-gradient(120deg, #23a8ab, #1a8a8d) !important;
}
.home .pricing-gradient-2 {
    background: linear-gradient(120deg, #152e53, #23a8ab) !important;
}
.home .btn-gradient-2 {
    background: linear-gradient(120deg, #152e53, #23a8ab) !important;
    color: #fff !important;
}
.home .pricing-gradient-3,
.home .btn-gradient-3 {
    background: linear-gradient(120deg, #152e53, #1e3a5f) !important;
}

/* ── GRADIENT TEXT — brand navy→teal both themes ── */
.home .gradient-text,
html[data-bs-theme="light"] .home .gradient-text,
html[data-bs-theme="dark"] .home .gradient-text {
    background: linear-gradient(135deg, #152e53, #23a8ab) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── DARK SURFACES — brand navy-dark both themes ── */
/* removed no-selector dark block — theme-aware rules handle this */
html[data-bs-theme="dark"] .home .dd-svc-item,
html[data-bs-theme="dark"] .home .dd-about-card {
    background: #1e3a5f !important;
}
html[data-bs-theme="dark"] .home .dd-svc-icon {
    background: #23456e !important;
}

/* ── NAVY TEXT on light surfaces both themes ── */
.home .dd-section-light .dd-about-section-title,
.home .dd-section-light .dd-light-h2,
.home .dd-partners-title,
.home .pricing-section .section-title,
.home .dd-founder-name {
    color: #152e53 !important;
}

/* ── NAVBAR — dark with brand teal hover both themes ── */
.header .navbar {
    background: #152e53 !important;
}
.header .navbar .nav-item .nav-link:hover,
.header .navbar .nav-link:hover {
    color: #23a8ab !important;
}

/* ── MODAL — brand teal accents ── */
.mo-icon, .mo-submit {
    background: linear-gradient(135deg, #152e53, #23a8ab) !important;
}
.mo-captcha { border-color: #23a8ab !important; }
.mo-cap-eq { color: #23a8ab !important; }
.mo-field input:focus, .mo-field select:focus, .mo-field textarea:focus {
    border-color: #23a8ab !important;
    box-shadow: 0 0 0 3px rgba(35,168,171,.12) !important;
}

/* =====================================================================
   [NAVBAR FINAL] — Solid dark navbar, both themes, brand-consistent
   ===================================================================== */
.header .navbar,
html[data-bs-theme="light"] .header .navbar,
html[data-bs-theme="dark"] .header .navbar {
    background: #152e53 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.header .navbar .nav-item .nav-link,
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link,
html[data-bs-theme="dark"] .header .navbar .nav-item .nav-link {
    color: rgba(255,255,255,0.85) !important;
}
.header .navbar .nav-item .nav-link:hover,
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link:hover,
html[data-bs-theme="dark"] .header .navbar .nav-item .nav-link:hover {
    color: #23a8ab !important;
}


/* =====================================================================
   [NAVBAR + LOGO ABSOLUTE FINAL] — navbar dark & logo white, both themes
   Navbar bg is always dark #152e53, so logo must be WHITE in both themes.
   Maximum specificity to beat all earlier rules.
   ===================================================================== */

/* Navbar background — solid dark, every theme, max specificity */
html body .header nav.navbar,
html[data-bs-theme="light"] body .header nav.navbar,
html[data-bs-theme="dark"] body .header nav.navbar {
    background-color: #152e53 !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Logo — WHITE in both themes (navbar is dark in both) */
html[data-bs-theme="light"] .header .navbar-brand img,
html[data-bs-theme="light"] .header .navbar-brand img.logo,
html[data-bs-theme="dark"]  .header .navbar-brand img,
html[data-bs-theme="dark"]  .header .navbar-brand img.logo {
    filter: brightness(0) invert(1) !important;
    max-height: 52px !important;
    width: auto !important;
    opacity: 1 !important;
}

/* Nav links — white, teal hover, both themes */
html[data-bs-theme="light"] .header .navbar .nav-link,
html[data-bs-theme="dark"]  .header .navbar .nav-link,
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link,
html[data-bs-theme="dark"]  .header .navbar .nav-item .nav-link {
    color: rgba(255,255,255,0.85) !important;
}
html[data-bs-theme="light"] .header .navbar .nav-link:hover,
html[data-bs-theme="dark"]  .header .navbar .nav-link:hover {
    color: #23a8ab !important;
}

/* =====================================================================
   [LIGHTER LIGHT SECTIONS] — make light-theme sections near-white
   ===================================================================== */
/* LIGHT sections (about/process/partners/founder/pricing): WHITE in BOTH themes */
.home #about.dd-section-light,
.home #process.dd-section-light,
.home #founder.dd-section-light,
.home .dd-section-partners,
.home .pricing-section,
html[data-bs-theme="light"] .home #about.dd-section-light,
html[data-bs-theme="light"] .home #process.dd-section-light,
html[data-bs-theme="light"] .home #founder.dd-section-light,
html[data-bs-theme="light"] .home .dd-section-partners,
html[data-bs-theme="light"] .home .pricing-section,
html[data-bs-theme="dark"] .home #about.dd-section-light,
html[data-bs-theme="dark"] .home #process.dd-section-light,
html[data-bs-theme="dark"] .home #founder.dd-section-light,
html[data-bs-theme="dark"] .home .dd-section-partners,
html[data-bs-theme="dark"] .home .pricing-section {
    background: #ffffff !important;
}
/* Report preview — light in both */
.home .report-preview,
html[data-bs-theme="light"] .home .report-preview,
html[data-bs-theme="dark"] .home .report-preview {
    background: #f7f9fb !important;
}

/* =====================================================================
   [THEME-AWARE SECTIONS FINAL] — real light vs dark difference
   DARK theme  → dark sections #152e53, white text
   LIGHT theme → light sections #ffffff, navy text
   Navbar stays dark in both (it's a fixed bar with logo).
   ===================================================================== */

/* ══ DARK THEME: dark sections ══ */
html[data-bs-theme="dark"] .home .dd-hero,
html[data-bs-theme="dark"] .home #hero,
html[data-bs-theme="dark"] .home #services,
html[data-bs-theme="dark"] .home #work,
html[data-bs-theme="dark"] .home #influencers,
html[data-bs-theme="dark"] .home .dd-section-dark {
    background: #152e53 !important;
}
html[data-bs-theme="dark"] .home .dd-svc-item     { background: #1e3a5f !important; }
html[data-bs-theme="dark"] .home .dd-stat-card    { background: #152e53 !important; }
html[data-bs-theme="dark"] .home .dd-svc-icon     { background: #23456e !important; }
html[data-bs-theme="dark"] body                   { background: #152e53 !important; }

/* Dark theme text */
html[data-bs-theme="dark"] .home .dd-hero .dd-hero-title,
html[data-bs-theme="dark"] .home #services .dd-section-header h2,
html[data-bs-theme="dark"] .home #work .dd-section-header h2 { color: #ffffff !important; }
html[data-bs-theme="dark"] .home .dd-svc-body h3  { color: #ffffff !important; }
html[data-bs-theme="dark"] .home .dd-svc-body p   { color: rgba(255,255,255,.68) !important; }
html[data-bs-theme="dark"] .home .dd-stat-label   { color: rgba(255,255,255,.72) !important; }

/* ══ LIGHT THEME: light sections ══ */
/* ══ LIGHT THEME: dark sections use TEAL #23a8ab background, white text ══ */
html[data-bs-theme="light"] .home .dd-hero,
html[data-bs-theme="light"] .home #hero,
html[data-bs-theme="light"] .home #services,
html[data-bs-theme="light"] .home #work,
html[data-bs-theme="light"] .home #influencers,
html[data-bs-theme="light"] .home .dd-section-dark {
    background: #23a8ab !important;
}
html[data-bs-theme="light"] body { background: #ffffff !important; }

/* Light theme: cards — darker teal shade on teal bg, for depth */
html[data-bs-theme="light"] .home .dd-svc-item {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
}
html[data-bs-theme="light"] .home .dd-stat-card {
    background: transparent !important;
    border-color: rgba(255,255,255,0.20) !important;
}
html[data-bs-theme="light"] .home .dd-svc-icon {
    background: rgba(255,255,255,0.18) !important;
}

/* Light theme: WHITE text on teal sections */
html[data-bs-theme="light"] .home .dd-hero .dd-hero-title { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-hero .dd-hero-done { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-hero .dd-hero-done span,
html[data-bs-theme="light"] .home .dd-hero .dd-hero-title span[style*="23a8ab"] { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-hero .dd-hero-sub { color: rgba(255,255,255,0.90) !important; }
html[data-bs-theme="light"] .home .dd-hero .dd-eyebrow { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-hero .dd-eyebrow-bar { background: #ffffff !important; }

html[data-bs-theme="light"] .home #services .dd-section-header h2,
html[data-bs-theme="light"] .home #work .dd-section-header h2 { color: #ffffff !important; }
html[data-bs-theme="light"] .home #services .dd-section-header p,
html[data-bs-theme="light"] .home #work .dd-section-header p { color: rgba(255,255,255,0.90) !important; }
html[data-bs-theme="light"] .home #services .dd-section-label,
html[data-bs-theme="light"] .home #work .dd-section-label { color: #152e53 !important; }

html[data-bs-theme="light"] .home .dd-svc-body h3 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-svc-body p  { color: rgba(255,255,255,0.85) !important; }
html[data-bs-theme="light"] .home .dd-svc-icon i  { color: #ffffff !important; }

html[data-bs-theme="light"] .home .dd-stat-num   { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-stat-label { color: rgba(255,255,255,0.90) !important; }

/* Light theme: service connector line white */
html[data-bs-theme="light"] .home .dd-svc-line::before { background: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-svc-line::after {
    border-right-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

/* Light theme: hero glows very subtle */
html[data-bs-theme="light"] .home .dd-hero-glow { opacity: 0.10 !important; }

/* NAVBAR — stays dark in both themes (fixed bar, white logo) */
html body .header nav.navbar,
html[data-bs-theme="light"] body .header nav.navbar,
html[data-bs-theme="dark"] body .header nav.navbar {
    background-color: #152e53 !important;
    background-image: none !important;
}

/* =====================================================================
   [LIGHT THEME COHESIVE] — teal navbar, white cards, white-fill buttons
   Per design decision: light theme = teal identity everywhere
   ===================================================================== */

/* ══ 1. NAVBAR — TEAL in light theme ══ */
html[data-bs-theme="light"] body .header nav.navbar,
html[data-bs-theme="light"] .header .navbar {
    background-color: #23a8ab !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link,
html[data-bs-theme="light"] .header .navbar .nav-link {
    color: #ffffff !important;
}
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link:hover,
html[data-bs-theme="light"] .header .navbar .nav-link:hover {
    color: #152e53 !important;
}
/* Logo white on teal navbar in light theme */
html[data-bs-theme="light"] .header .navbar-brand img,
html[data-bs-theme="light"] .header .navbar-brand img.logo {
    filter: brightness(0) invert(1) !important;
}

/* ══ 2. ABOUT SECTION — teal bg, WHITE/translucent cards ══ */
html[data-bs-theme="light"] .home #about.dd-section-light,
html[data-bs-theme="light"] .home #about {
    background: #23a8ab !important;
}
/* About cards → white translucent */
html[data-bs-theme="light"] .home .dd-about-card {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
}
html[data-bs-theme="light"] .home .dd-about-card h4 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-about-card p  { color: rgba(255,255,255,0.90) !important; }
html[data-bs-theme="light"] .home .dd-about-icon {
    background: #ffffff !important;
    color: #23a8ab !important;
}
/* About text column → white on teal */
html[data-bs-theme="light"] .home #about .dd-about-section-title { color: #ffffff !important; }
html[data-bs-theme="light"] .home #about .dd-about-headline      { color: rgba(255,255,255,0.92) !important; }
html[data-bs-theme="light"] .home #about .dd-about-body          { color: rgba(255,255,255,0.85) !important; }
html[data-bs-theme="light"] .home #about .dd-tagline             { color: #ffffff !important; }
html[data-bs-theme="light"] .home #about .dd-tagline-bar         { background: #ffffff !important; }

/* ══ 3. PRIMARY BUTTONS — white fill, teal text in light theme ══ */
html[data-bs-theme="light"] .home .dd-btn-primary,
html[data-bs-theme="light"] .ltr-page .dd-btn-primary {
    background: #ffffff !important;
    color: #23a8ab !important;
    border: none !important;
}
html[data-bs-theme="light"] .home .dd-btn-primary:hover,
html[data-bs-theme="light"] .ltr-page .dd-btn-primary:hover {
    background: #f0fdfb !important;
    color: #1a8a8d !important;
}
/* Ghost button → white outline, white text in light theme */
html[data-bs-theme="light"] .home .dd-btn-ghost,
html[data-bs-theme="light"] .ltr-page .dd-btn-ghost {
    border: 2px solid rgba(255,255,255,0.7) !important;
    color: #ffffff !important;
    background: transparent !important;
}
html[data-bs-theme="light"] .home .dd-btn-ghost:hover,
html[data-bs-theme="light"] .ltr-page .dd-btn-ghost:hover {
    border-color: #ffffff !important;
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

/* =====================================================================
   [CTA GRADIENT] — navy→teal gradient background, both themes
   ===================================================================== */

/* CTA band — gradient in BOTH themes */
.home #cta.dd-cta-band-v2,
.dd-cta-band-v2,
html[data-bs-theme="dark"] .home .dd-cta-band-v2,
/* CTA: bright gradient in LIGHT mode */
html[data-bs-theme="light"] .home .dd-cta-band-v2,
html[data-bs-theme="light"] .home #cta.dd-cta-band-v2 {
    background: linear-gradient(135deg, #152e53 0%, #1a8a8d 60%, #23a8ab 100%) !important;
}
/* CTA: same #152e53 as أعمالنا تتحدث (#work) section in DARK mode */
html[data-bs-theme="dark"] .home .dd-cta-band-v2,
html[data-bs-theme="dark"] .home #cta.dd-cta-band-v2 {
    background: #152e53 !important;
}
/* CTA DARK mode buttons: teal fill primary, teal-outline ghost (like dark theme) */
html[data-bs-theme="dark"] .home #cta .dd-btn-primary {
    background: #23a8ab !important;
    color: #ffffff !important;
    border: none !important;
}
html[data-bs-theme="dark"] .home #cta .dd-btn-primary:hover {
    background: #1a8a8d !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] .home #cta .dd-btn-ghost {
    border: 2px solid rgba(35,168,171,0.55) !important;
    color: #23a8ab !important;
    background: transparent !important;
}
html[data-bs-theme="dark"] .home #cta .dd-btn-ghost:hover {
    border-color: #23a8ab !important;
    background: rgba(35,168,171,0.10) !important;
    color: #23a8ab !important;
}
/* CTA DARK mode social icons */
html[data-bs-theme="dark"] .home #cta .dd-social-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.85) !important;
}
html[data-bs-theme="dark"] .home #cta .dd-social-btn:hover {
    background: #23a8ab !important;
    color: #ffffff !important;
    border-color: #23a8ab !important;
}

/* CTA text — white, both themes */
.home .dd-cta-inner-v2 h2,
html[data-bs-theme="light"] .home .dd-cta-inner-v2 h2 {
    color: #ffffff !important;
}
.home .dd-cta-inner-v2 p,
html[data-bs-theme="light"] .home .dd-cta-inner-v2 p {
    color: rgba(255,255,255,0.85) !important;
}

/* CTA glow — subtle white/teal shimmer */
.home .dd-cta-glow-v2 {
    background: radial-gradient(rgba(255,255,255,.12), transparent 65%) !important;
}

/* CTA buttons — white fill / teal text for primary, white outline for ghost */
html[data-bs-theme="light"] .home #cta .dd-btn-primary,
html[data-bs-theme="light"] .home #cta .dd-btn-primary {
    background: #ffffff !important;
    color: #23a8ab !important;
    border: none !important;
}
html[data-bs-theme="light"] .home #cta .dd-btn-primary:hover,
.home #cta .dd-btn-primary:hover {
    background: #f0fdfb !important;
    color: #1a8a8d !important;
}
html[data-bs-theme="light"] .home #cta .dd-btn-ghost,
.home #cta .dd-btn-ghost {
    border: 2px solid rgba(255,255,255,0.7) !important;
    color: #ffffff !important;
    background: transparent !important;
}
html[data-bs-theme="light"] .home #cta .dd-btn-ghost:hover,
.home #cta .dd-btn-ghost:hover {
    border-color: #ffffff !important;
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

/* CTA social icons — white on translucent */
html[data-bs-theme="light"] .home #cta .dd-social-btn {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
}
html[data-bs-theme="light"] .home #cta .dd-social-btn:hover {
    background: #ffffff !important;
    color: #23a8ab !important;
    border-color: #ffffff !important;
}

/* =====================================================================
   [LIGHT THEME GRADIENT ALL SECTIONS] — navy→teal gradient everywhere
   ===================================================================== */

/* ALL dark-type sections → gradient in light theme */
html[data-bs-theme="light"] .home .dd-hero,
html[data-bs-theme="light"] .home #hero,
html[data-bs-theme="light"] .home #services,
html[data-bs-theme="light"] .home #work,
html[data-bs-theme="light"] .home #influencers,
html[data-bs-theme="light"] .home #about,
html[data-bs-theme="light"] .home #about.dd-section-light,
html[data-bs-theme="light"] .home .dd-section-dark {
    background: linear-gradient(135deg, #152e53 0%, #1a8a8d 55%, #23a8ab 100%) !important;
}

/* Light-type sections (process, partners, pricing) → same gradient */
html[data-bs-theme="light"] .home #process,
html[data-bs-theme="light"] .home #process.dd-section-light,
html[data-bs-theme="light"] .home #founder,
html[data-bs-theme="light"] .home #founder.dd-section-light,
html[data-bs-theme="light"] .home .dd-section-light,
html[data-bs-theme="light"] .home .dd-section-partners,
html[data-bs-theme="light"] .home #old-pricing.pricing-section,
html[data-bs-theme="light"] .home #pricing.pricing-section {
    background: linear-gradient(135deg, #152e53 0%, #1a8a8d 55%, #23a8ab 100%) !important;
}

/* Body → gradient base so no white gaps */
html[data-bs-theme="light"] body {
    background: linear-gradient(135deg, #152e53 0%, #23a8ab 100%) !important;
}

/* ── PROCESS section (light) text → white on gradient ── */
html[data-bs-theme="light"] .home #process .dd-light-h2,
html[data-bs-theme="light"] .home #process .dd-section-label-light { color: #ffffff !important; }
html[data-bs-theme="light"] .home #process .dd-light-p { color: rgba(255,255,255,0.85) !important; }
html[data-bs-theme="light"] .home .dd-tl-card {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
}
html[data-bs-theme="light"] .home .dd-tl-card h4 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-tl-card p  { color: rgba(255,255,255,0.85) !important; }
html[data-bs-theme="light"] .home .dd-tl-node {
    background: #ffffff !important;
    color: #23a8ab !important;
}

/* ── PARTNERS section (light) text → white on gradient ── */
html[data-bs-theme="light"] .home .dd-partners-title { color: #ffffff !important; }
html[data-bs-theme="light"] .home .dd-partners-sub   { color: rgba(255,255,255,0.85) !important; }
/* Partner logo cells → white cards so logos stay visible on gradient */
html[data-bs-theme="light"] .home .dd-section-partners .partner-logo {
    background: rgba(255,255,255,0.95) !important;
    border-radius: 12px !important;
    padding: 14px !important;
}
html[data-bs-theme="light"] .home .dd-section-partners .partner-logo::before {
    display: none !important;
}

/* ── FOUNDER section (light) text → white on gradient ── */
html[data-bs-theme="light"] .home #founder .dd-founder-name  { color: #ffffff !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-title { color: #ffffff !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-bio   { color: rgba(255,255,255,0.85) !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-quote p   { color: rgba(255,255,255,0.90) !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-quote-tag { color: #ffffff !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-quote {
    border-left-color: #ffffff !important;
    border-right-color: #ffffff !important;
}

/* ── PRICING sections (light) text → white on gradient ── */
html[data-bs-theme="light"] .home .pricing-section .section-title,
html[data-bs-theme="light"] .home .pricing-section h2,
html[data-bs-theme="light"] .home .pricing-section h3,
html[data-bs-theme="light"] .home .pricing-section h4 { color: #ffffff !important; }
html[data-bs-theme="light"] .home .pricing-section p { color: rgba(255,255,255,0.85) !important; }
html[data-bs-theme="light"] .home .pricing-section .section-subtitle { color: rgba(255,255,255,0.90) !important; }
html[data-bs-theme="light"] .home .pricing-section .gradient-text {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}
html[data-bs-theme="light"] .home .pricing-section .text-secondary { color: rgba(255,255,255,0.80) !important; }

/* Report preview → white translucent card on gradient */
html[data-bs-theme="light"] .home .report-preview {
    background: rgba(255,255,255,0.12) !important;
}
html[data-bs-theme="light"] .home .report-preview p    { color: rgba(255,255,255,0.90) !important; }
html[data-bs-theme="light"] .home .report-preview .note { color: rgba(255,255,255,0.70) !important; }

/* ── NAVBAR → keep the gradient too for full cohesion ── */
html[data-bs-theme="light"] body .header nav.navbar,
html[data-bs-theme="light"] .header .navbar {
    background: linear-gradient(135deg, #152e53 0%, #23a8ab 100%) !important;
    background-color: #1a8a8d !important;
}

/* =====================================================================
   [LIGHT MODE SPLIT] — gradient sections vs white sections
   GRADIENT: hero, services, work, influencers(stats), cta
   WHITE:    about, process, partners, founder
   ===================================================================== */

/* ══ WHITE SECTIONS in light mode (override earlier gradient) ══ */
html[data-bs-theme="light"] .home #about,
html[data-bs-theme="light"] .home #about.dd-section-light,
html[data-bs-theme="light"] .home #process,
html[data-bs-theme="light"] .home #process.dd-section-light,
html[data-bs-theme="light"] .home #founder,
html[data-bs-theme="light"] .home #founder.dd-section-light,
html[data-bs-theme="light"] .home #partners,
html[data-bs-theme="light"] .home .dd-section-partners,
html[data-bs-theme="light"] .home #old-pricing.pricing-section,
html[data-bs-theme="light"] .home #pricing.pricing-section {
    background: #ffffff !important;
}

/* ── ABOUT (white) — dark text, dark cards ── */
html[data-bs-theme="light"] .home #about .dd-about-section-title { color: #152e53 !important; }
html[data-bs-theme="light"] .home #about .dd-about-headline      { color: #4a5568 !important; }
html[data-bs-theme="light"] .home #about .dd-about-body          { color: #64748b !important; }
html[data-bs-theme="light"] .home #about .dd-tagline             { color: #23a8ab !important; }
html[data-bs-theme="light"] .home #about .dd-tagline-bar         { background: #23a8ab !important; }
/* About cards → dark navy for contrast on white */
html[data-bs-theme="light"] .home #about .dd-about-card {
    background: #152e53 !important;
    border: 1px solid rgba(21,46,83,0.10) !important;
    box-shadow: 0 4px 20px rgba(21,46,83,0.12) !important;
}
html[data-bs-theme="light"] .home #about .dd-about-card h4 { color: #ffffff !important; }
html[data-bs-theme="light"] .home #about .dd-about-card p  { color: rgba(255,255,255,0.80) !important; }
html[data-bs-theme="light"] .home #about .dd-about-icon {
    background: #23a8ab !important;
    color: #ffffff !important;
}

/* ── PROCESS (white) — dark text, white cards with border ── */
html[data-bs-theme="light"] .home #process .dd-light-h2            { color: #152e53 !important; }
html[data-bs-theme="light"] .home #process .dd-section-label-light { color: #23a8ab !important; }
html[data-bs-theme="light"] .home #process .dd-light-p            { color: #64748b !important; }
html[data-bs-theme="light"] .home #process .dd-tl-card {
    background: #ffffff !important;
    border: 1px solid rgba(21,46,83,0.12) !important;
    box-shadow: 0 2px 12px rgba(21,46,83,0.06) !important;
}
html[data-bs-theme="light"] .home #process .dd-tl-card h4 { color: #152e53 !important; }
html[data-bs-theme="light"] .home #process .dd-tl-card p  { color: #4a5568 !important; }
html[data-bs-theme="light"] .home #process .dd-tl-node {
    background: #23a8ab !important;
    color: #ffffff !important;
}

/* ── PARTNERS (white) — dark heading, logos on white ── */
html[data-bs-theme="light"] .home .dd-partners-title { color: #152e53 !important; }
html[data-bs-theme="light"] .home .dd-partners-sub   { color: #6b7e95 !important; }
html[data-bs-theme="light"] .home .dd-section-partners .partner-logo {
    background: transparent !important;
    padding: 8px !important;
}

/* ── FOUNDER (white) — dark text ── */
html[data-bs-theme="light"] .home #founder .dd-founder-name  { color: #152e53 !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-title { color: #23a8ab !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-bio   { color: #4a5568 !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-quote p   { color: #4a5568 !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-quote-tag { color: #23a8ab !important; }
html[data-bs-theme="light"] .home #founder .dd-founder-quote {
    border-left-color: #23a8ab !important;
    border-right-color: #23a8ab !important;
}

/* ── PRICING (white) — dark text, gradient-text accent ── */
html[data-bs-theme="light"] .home .pricing-section .section-title,
html[data-bs-theme="light"] .home .pricing-section h2,
html[data-bs-theme="light"] .home .pricing-section h3,
html[data-bs-theme="light"] .home .pricing-section h4 { color: #152e53 !important; }
html[data-bs-theme="light"] .home .pricing-section p { color: #4a5568 !important; }
html[data-bs-theme="light"] .home .pricing-section .section-subtitle { color: #4a5568 !important; }
html[data-bs-theme="light"] .home .pricing-section .gradient-text {
    background: linear-gradient(135deg, #152e53, #23a8ab) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
html[data-bs-theme="light"] .home .pricing-section .text-secondary { color: #64748b !important; }
html[data-bs-theme="light"] .home .report-preview {
    background: #f7f9fb !important;
}
html[data-bs-theme="light"] .home .report-preview p    { color: #4a5568 !important; }
html[data-bs-theme="light"] .home .report-preview .note { color: #94a3b8 !important; }

/* Body → white (gradient sections set their own bg) */
html[data-bs-theme="light"] body {
    background: #ffffff !important;
}

/* =====================================================================
   [WHITE SECTIONS TEXT] — dark text in BOTH themes (bg is white in both)
   About / Process / Partners / Founder / Pricing
   ===================================================================== */

/* ABOUT */
.home #about .dd-about-section-title,
html[data-bs-theme="light"] .home #about .dd-about-section-title,
html[data-bs-theme="dark"] .home #about .dd-about-section-title { color: #152e53 !important; }
.home #about .dd-about-headline,
html[data-bs-theme="light"] .home #about .dd-about-headline,
html[data-bs-theme="dark"] .home #about .dd-about-headline { color: #4a5568 !important; }
.home #about .dd-about-body,
html[data-bs-theme="light"] .home #about .dd-about-body,
html[data-bs-theme="dark"] .home #about .dd-about-body { color: #64748b !important; }
.home #about .dd-tagline,
html[data-bs-theme="light"] .home #about .dd-tagline,
html[data-bs-theme="dark"] .home #about .dd-tagline { color: #23a8ab !important; }
.home #about .dd-tagline-bar { background: #23a8ab !important; }
/* About cards — DARK theme: navy cards, white text (current) */
html[data-bs-theme="dark"] .home #about .dd-about-card {
    background: #152e53 !important;
    border: 1px solid rgba(21,46,83,0.10) !important;
    box-shadow: 0 4px 20px rgba(21,46,83,0.12) !important;
}
html[data-bs-theme="dark"] .home #about .dd-about-card h4 { color: #ffffff !important; }
html[data-bs-theme="dark"] .home #about .dd-about-card p  { color: rgba(255,255,255,0.80) !important; }
html[data-bs-theme="dark"] .home #about .dd-about-icon { background: #23a8ab !important; color: #ffffff !important; }

/* About cards — LIGHT theme: gradient background, white text */
html[data-bs-theme="light"] .home #about .dd-about-card {
    background: linear-gradient(135deg, #152e53 0%, #1a8a8d 55%, #23a8ab 100%) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 6px 24px rgba(21,46,83,0.18) !important;
}
html[data-bs-theme="light"] .home #about .dd-about-card h4 { color: #ffffff !important; }
html[data-bs-theme="light"] .home #about .dd-about-card p  { color: rgba(255,255,255,0.88) !important; }
html[data-bs-theme="light"] .home #about .dd-about-icon { background: rgba(255,255,255,0.20) !important; color: #ffffff !important; }

/* PROCESS */
.home #process .dd-light-h2,
html[data-bs-theme="light"] .home #process .dd-light-h2,
html[data-bs-theme="dark"] .home #process .dd-light-h2 { color: #152e53 !important; }
.home #process .dd-section-label-light,
html[data-bs-theme="light"] .home #process .dd-section-label-light,
html[data-bs-theme="dark"] .home #process .dd-section-label-light { color: #23a8ab !important; }
.home #process .dd-light-p,
html[data-bs-theme="light"] .home #process .dd-light-p,
html[data-bs-theme="dark"] .home #process .dd-light-p { color: #64748b !important; }
.home #process .dd-tl-card,
html[data-bs-theme="light"] .home #process .dd-tl-card,
html[data-bs-theme="dark"] .home #process .dd-tl-card {
    background: #ffffff !important;
    border: 1px solid rgba(21,46,83,0.12) !important;
    box-shadow: 0 2px 12px rgba(21,46,83,0.06) !important;
}
.home #process .dd-tl-card h4 { color: #152e53 !important; }
.home #process .dd-tl-card p  { color: #4a5568 !important; }
.home #process .dd-tl-node { background: #23a8ab !important; color: #ffffff !important; }

/* PARTNERS */
.home .dd-partners-title,
html[data-bs-theme="light"] .home .dd-partners-title,
html[data-bs-theme="dark"] .home .dd-partners-title { color: #152e53 !important; }
.home .dd-partners-sub,
html[data-bs-theme="light"] .home .dd-partners-sub,
html[data-bs-theme="dark"] .home .dd-partners-sub { color: #6b7e95 !important; }
.home .dd-section-partners .partner-logo,
html[data-bs-theme="light"] .home .dd-section-partners .partner-logo,
html[data-bs-theme="dark"] .home .dd-section-partners .partner-logo {
    background: transparent !important;
    padding: 8px !important;
}

/* FOUNDER */
.home #founder .dd-founder-name,
html[data-bs-theme="light"] .home #founder .dd-founder-name,
html[data-bs-theme="dark"] .home #founder .dd-founder-name { color: #152e53 !important; }
.home #founder .dd-founder-title,
html[data-bs-theme="light"] .home #founder .dd-founder-title,
html[data-bs-theme="dark"] .home #founder .dd-founder-title { color: #23a8ab !important; }
.home #founder .dd-founder-bio,
html[data-bs-theme="light"] .home #founder .dd-founder-bio,
html[data-bs-theme="dark"] .home #founder .dd-founder-bio { color: #4a5568 !important; }
.home #founder .dd-founder-quote p { color: #4a5568 !important; }
.home #founder .dd-founder-quote-tag { color: #23a8ab !important; }
.home #founder .dd-founder-quote {
    border-left-color: #23a8ab !important;
    border-right-color: #23a8ab !important;
}

/* PRICING */
.home .pricing-section .section-title,
.home .pricing-section h2, .home .pricing-section h3, .home .pricing-section h4,
html[data-bs-theme="light"] .home .pricing-section .section-title,
html[data-bs-theme="dark"] .home .pricing-section .section-title { color: #152e53 !important; }
.home .pricing-section p,
html[data-bs-theme="light"] .home .pricing-section p,
html[data-bs-theme="dark"] .home .pricing-section p { color: #4a5568 !important; }
.home .pricing-section .gradient-text,
html[data-bs-theme="light"] .home .pricing-section .gradient-text,
html[data-bs-theme="dark"] .home .pricing-section .gradient-text {
    background: linear-gradient(135deg, #152e53, #23a8ab) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.home .report-preview p { color: #4a5568 !important; }
.home .report-preview .note { color: #94a3b8 !important; }

/* =====================================================================
   [SERVICE CARDS THEME MATCH] — icon/text/colors per theme
   Section = #152e53 (dark) / gradient (light) ; cards = #1e3a5f
   ===================================================================== */

/* DARK theme services */
html[data-bs-theme="dark"] .home #services .dd-svc-item {
    background: #1e3a5f !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
html[data-bs-theme="dark"] .home #services .dd-svc-icon {
    background: #23456e !important;
    color: #23a8ab !important;
}
html[data-bs-theme="dark"] .home #services .dd-svc-icon i { color: #23a8ab !important; }
html[data-bs-theme="dark"] .home #services .dd-svc-body h3 { color: #ffffff !important; }
html[data-bs-theme="dark"] .home #services .dd-svc-body p  { color: rgba(255,255,255,0.68) !important; }
html[data-bs-theme="dark"] .home #services .dd-section-header h2 { color: #ffffff !important; }
html[data-bs-theme="dark"] .home #services .dd-section-header p  { color: rgba(255,255,255,0.65) !important; }
html[data-bs-theme="dark"] .home #services .dd-section-label { color: #23a8ab !important; }
/* Service connector — teal in dark */
html[data-bs-theme="dark"] .home #services .dd-svc-line::before { background: #23a8ab !important; }
html[data-bs-theme="dark"] .home #services .dd-svc-line::after {
    border-right-color: #23a8ab !important;
    border-bottom-color: #23a8ab !important;
}

/* LIGHT theme services (gradient section) — white text, translucent cards */
html[data-bs-theme="light"] .home #services .dd-svc-item {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
}
html[data-bs-theme="light"] .home #services .dd-svc-icon {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
}
html[data-bs-theme="light"] .home #services .dd-svc-icon i { color: #ffffff !important; }
html[data-bs-theme="light"] .home #services .dd-svc-body h3 { color: #ffffff !important; }
html[data-bs-theme="light"] .home #services .dd-svc-body p  { color: rgba(255,255,255,0.85) !important; }
html[data-bs-theme="light"] .home #services .dd-section-header h2 { color: #ffffff !important; }
html[data-bs-theme="light"] .home #services .dd-section-header p  { color: rgba(255,255,255,0.90) !important; }
html[data-bs-theme="light"] .home #services .dd-section-label { color: #152e53 !important; }
/* Service connector — white in light */
html[data-bs-theme="light"] .home #services .dd-svc-line::before { background: #ffffff !important; }
html[data-bs-theme="light"] .home #services .dd-svc-line::after {
    border-right-color: #ffffff !important;
    border-bottom-color: #ffffff !important;
}

/* =====================================================================
   [TIMELINE NODE THEME] — navy in dark, teal in light
   ===================================================================== */
/* DARK theme: navy node */
html[data-bs-theme="dark"] .home #process .dd-tl-node {
    background: #152e53 !important;
    color: #ffffff !important;
}
/* LIGHT theme: teal node */
html[data-bs-theme="light"] .home #process .dd-tl-node {
    background: #23a8ab !important;
    color: #ffffff !important;
}

/* =====================================================================
   [PRIMARY BUTTON HOVER — per theme]
   DARK: teal button → darker teal hover
   LIGHT: white button → off-white hover
   ===================================================================== */
/* DARK theme: teal → darker teal */
html[data-bs-theme="dark"] .home .dd-btn-primary:hover,
html[data-bs-theme="dark"] .ltr-page .dd-btn-primary:hover {
    background: #1a8a8d !important;
    color: #ffffff !important;
}
/* LIGHT theme: white → off-white, teal text */
html[data-bs-theme="light"] .home .dd-btn-primary:hover,
html[data-bs-theme="light"] .ltr-page .dd-btn-primary:hover {
    background: #f0fdfb !important;
    color: #1a8a8d !important;
}

/* =====================================================================
   [LOGO THEME TINT] — teal on dark navbar, navy on teal navbar
   Navbar: #152e53 (dark theme) / #23a8ab (light theme)
   Logo:   teal #23a8ab (dark) / navy #152e53 (light)
   CSS filter approximates the brand hex (source logo tinted to color)
   ===================================================================== */

/* DARK theme — navy navbar → TEAL logo (#23a8ab) */
html[data-bs-theme="dark"] .header .navbar-brand img,
html[data-bs-theme="dark"] .header .navbar-brand img.logo {
    filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(380%) hue-rotate(130deg) brightness(92%) contrast(88%) !important;
}

/* LIGHT theme — teal navbar → NAVY logo (#152e53) */
html[data-bs-theme="light"] .header .navbar-brand img,
html[data-bs-theme="light"] .header .navbar-brand img.logo {
    filter: brightness(0) saturate(100%) invert(11%) sepia(38%) saturate(2200%) hue-rotate(195deg) brightness(95%) contrast(96%) !important;
}

/* =====================================================================
   [NAV LINKS WHITE] — menu text white in both themes
   ===================================================================== */
.header .navbar .nav-link,
.header .navbar .nav-item .nav-link,
html[data-bs-theme="dark"] .header .navbar .nav-link,
html[data-bs-theme="dark"] .header .navbar .nav-item .nav-link,
html[data-bs-theme="light"] .header .navbar .nav-link,
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link {
    color: #ffffff !important;
}
.header .navbar .nav-link:hover,
.header .navbar .nav-item .nav-link:hover,
html[data-bs-theme="dark"] .header .navbar .nav-link:hover,
html[data-bs-theme="light"] .header .navbar .nav-link:hover {
    color: #23a8ab !important;
}
/* Dropdown toggle + any nav text */
.header .navbar .dropdown-toggle,
.header .navbar .navbar-nav .nav-item a {
    color: #ffffff !important;
}

/* Nav hover per theme: teal navbar (light) → navy hover; navy navbar (dark) → teal hover */
html[data-bs-theme="light"] .header .navbar .nav-link:hover,
html[data-bs-theme="light"] .header .navbar .nav-item .nav-link:hover {
    color: #152e53 !important;
}
html[data-bs-theme="dark"] .header .navbar .nav-link:hover,
html[data-bs-theme="dark"] .header .navbar .nav-item .nav-link:hover {
    color: #23a8ab !important;
}

/* =====================================================================
   [LOGO LIGHT MODE — darker] — deep navy for clear visibility on teal
   ===================================================================== */
html[data-bs-theme="light"] .header .navbar-brand img,
html[data-bs-theme="light"] .header .navbar-brand img.logo {
    filter: brightness(0) saturate(100%) invert(6%) sepia(30%) saturate(3500%) hue-rotate(200deg) brightness(70%) contrast(105%) !important;
}

/* =====================================================================
   [MOBILE NAVBAR FIX] — let Bootstrap collapse work on small screens
   The desktop rules above force .navbar-collapse { display:flex !important }
   which keeps the menu visible on mobile. Below lg, restore collapse.
   ===================================================================== */
@media (max-width: 991.98px) {
    /* Collapsed (hidden) state — Bootstrap toggles .show to open */
    .header .navbar .navbar-collapse:not(.show) {
        display: none !important;
    }
    .header .navbar .navbar-collapse.show,
    .header .navbar .navbar-collapse.collapsing {
        display: block !important;
        flex-grow: 1 !important;
        order: 99 !important;
        width: 100% !important;
        flex-basis: 100% !important;
        background: #152e53 !important;
        padding: 12px 8px !important;
        border-radius: 0 0 12px 12px !important;
    }
    html[data-bs-theme="light"] .header .navbar .navbar-collapse.show,
    html[data-bs-theme="light"] .header .navbar .navbar-collapse.collapsing {
        background: #23a8ab !important;
    }
    /* Stack nav items vertically on mobile */
    .header .navbar .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .header .navbar .nav-item {
        width: 100% !important;
    }
    .header .navbar .nav-item .nav-link {
        padding: 12px 14px !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        text-align: start !important;
    }
    /* Toggler visible + on the correct side */
    .header .navbar .navbar-toggler {
        display: block !important;
        order: 1 !important;
        border: none !important;
        background: transparent !important;
        padding: 6px !important;
    }
    /* Kill the desktop center spacer on mobile */
    .header .navbar > .container::after {
        display: none !important;
        content: none !important;
    }
    /* Brand + toggler on one row, space-between */
    .header .navbar > .container {
        flex-wrap: wrap !important;
    }
}

/* =====================================================================
   [MEETING MODAL RTL] — labels + inputs right-aligned in Arabic page
   The Arabic page is dir="rtl"; force the modal fields to follow it.
   ===================================================================== */
html[dir="rtl"] .mo-box,
html[lang="ar"] .mo-box {
    direction: rtl !important;
}
html[dir="rtl"] .mo-field label,
html[lang="ar"] .mo-field label {
    text-align: right !important;
    display: block !important;
    width: 100% !important;
}
html[dir="rtl"] .mo-field input,
html[dir="rtl"] .mo-field select,
html[dir="rtl"] .mo-field textarea,
html[lang="ar"] .mo-field input,
html[lang="ar"] .mo-field select,
html[lang="ar"] .mo-field textarea {
    direction: rtl !important;
    text-align: right !important;
}
/* Email + phone: LTR typing but right-aligned placeholder/text */
html[dir="rtl"] .mo-field input[type="email"],
html[dir="rtl"] .mo-field input[type="tel"],
html[lang="ar"] .mo-field input[type="email"],
html[lang="ar"] .mo-field input[type="tel"] {
    direction: ltr !important;
    text-align: right !important;
}
/* Placeholders right-aligned in RTL */
html[dir="rtl"] .mo-field input::placeholder,
html[dir="rtl"] .mo-field textarea::placeholder,
html[lang="ar"] .mo-field input::placeholder,
html[lang="ar"] .mo-field textarea::placeholder {
    text-align: right !important;
}

/* =====================================================================
   [KILL PARTNER SHAPE] — remove the mint diagonal ::before on ALL
   partner logos, every section/theme. Also normalise the logo cards.
   ===================================================================== */
.home .partner-logo::before,
.home .partner-logo::after,
.dd-section-partners .partner-logo::before,
.dd-section-partners .partner-logo::after,
.partner-logos-grid .partner-logo::before,
.partner-logos-grid .partner-logo::after {
    display: none !important;
    content: none !important;
    background: none !important;
}
/* Logo cards — clean white tiles, no teal parallelogram behind */
.home .partner-logo,
.dd-section-partners .partner-logo {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.home .partner-logo img,
.dd-section-partners .partner-logo img {
    position: relative !important;
    z-index: 1 !important;
    background: #ffffff !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important;
    max-height: 64px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}