/* ==========================================================================
   NAQLY — THEME MODES & DESIGN REFINEMENT SYSTEM (2026)
   - Strict separation between Light Mode (fresh light + green accents)
     and Dark Mode (deep forest obsidian + luminous emerald identity)
   - Site-wide typography enlargement & prominent Navbar
   - Structured Large Partner Showcase (No tiny generic tickers!)
   - Clear Green Section Boundaries & Framing to prevent bleed-through
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL TYPOGRAPHY & SITE-WIDE FONT SCALING
   -------------------------------------------------------------------------- */
html {
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 1.05rem !important; /* ~17px base font */
    line-height: 1.85 !important;
    letter-spacing: 0.15px;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Headings scale */
h1, .hero-title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

h2, h3, .section-title {
    font-size: clamp(1.85rem, 3.5vw, 2.45rem) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.75rem !important;
}

h4, .inner-page-title {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
}

h5 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

h6 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

p, .about-text, .download-app-desc {
    font-size: 1.05rem !important;
    line-height: 1.9 !important;
}

.the_title p,
.about-info > p,
.contact-info-col > p,
.section-sub {
    font-size: 1.12rem !important;
    line-height: 1.9 !important;
    max-width: 720px;
    margin-inline: auto;
}

/* Section dividers */
.section-divider {
    width: 68px !important;
    height: 4px !important;
    border-radius: 4px !important;
    margin: 14px auto 24px !important;
}

.section-divider-right {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}

/* Section labels (pill badges) */
.section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 20px !important;
    border-radius: 50px !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    margin-bottom: 14px !important;
    transition: all 0.3s ease;
}

.section-label i {
    font-size: 0.98rem;
}

/* Section padding */
.sec-padd {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

@media (max-width: 767.98px) {
    .sec-padd {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }
}

/* --------------------------------------------------------------------------
   2. NAVBAR & HEADER ENHANCEMENT
   -------------------------------------------------------------------------- */
header#site-header {
    padding: 14px 0 !important;
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    z-index: 1000 !important;
}

header#site-header .the-logo {
    max-height: 58px !important;
    width: auto !important;
    transition: transform 0.3s ease, max-height 0.3s ease !important;
}

header#site-header.scrolled {
    padding: 10px 0 !important;
}

header#site-header.scrolled .the-logo {
    max-height: 50px !important;
}

/* Navbar links - enlarged, bold, clearly readable */
.nav_bar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav_bar li a {
    font-size: 1.05rem !important; /* ~17px */
    font-weight: 700 !important;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    position: relative !important;
    display: inline-block !important;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    letter-spacing: 0.1px;
}

.nav_bar li a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 50% !important;
    left: 50% !important;
    height: 3px !important;
    border-radius: 3px !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    opacity: 0;
}

.nav_bar li a:hover::after,
.nav_bar li a.active::after {
    right: 14px !important;
    left: 14px !important;
    opacity: 1 !important;
}

/* Header action buttons (Theme toggle & Language dropdown) */
.header-actions {
    gap: 10px !important;
}

.intro-theme-toggle {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.intro-theme-toggle:hover {
    transform: translateY(-2px) rotate(15deg);
}

.lang-btn {
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

.lang-btn:hover {
    transform: translateY(-2px);
}

.dropdown-menu {
    border-radius: 14px !important;
    padding: 8px !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    min-width: 140px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18) !important;
}

.dropdown-item {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: all 0.2s ease !important;
}

/* --------------------------------------------------------------------------
   3. SECTION BOUNDARIES & GREEN FRAMING SYSTEM
   "وخلي فيه تحديد لكل السكاشن بان حدوده بالاخضر كده بشكل جميل لأن كله داخل في بعضه"
   -------------------------------------------------------------------------- */
.about-section,
.download-app-section,
.how-works-section,
.services-section,
.partners-section,
.testimonials-section,
.contact-section,
.faq-section {
    position: relative !important;
    border-top: 2px solid var(--intro-section-border) !important;
    border-bottom: 2px solid var(--intro-section-border) !important;
}

/* Signature center green seam on each section transition */
.about-section::before,
.how-works-section::before,
.services-section::before,
.partners-section::before,
.testimonials-section::before,
.contact-section::before,
.faq-section::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 150px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: var(--intro-section-seam) !important;
    box-shadow: 0 0 14px var(--intro-section-seam-glow) !important;
    z-index: 5 !important;
}

/* --------------------------------------------------------------------------
   4. PURE LIGHT MODE (Clean, Light Surfaces + Clear Green Accents & Framing)
   -------------------------------------------------------------------------- */
:root,
html[data-intro-theme="light"],
html:not([data-intro-theme="dark"]) {
    color-scheme: light;
    --intro-page-bg: #f5faf7;
    --intro-surface: #ffffff;
    --intro-surface-muted: #ebf5ee;
    --intro-text: #173325;
    --intro-text-headings: #003a22;
    --intro-text-muted: #415f50;
    --intro-text-soft: #6e8a7b;
    --intro-border: #b8dac5;
    --intro-section-border: #b8dac5;
    --intro-section-seam: #005936;
    --intro-section-seam-glow: rgba(0, 89, 54, 0.28);
    --intro-green-brand: #005936;
    --intro-green-accent: #007a4a;
    --intro-green-tint: rgba(0, 89, 54, 0.08);
    --intro-card-shadow: 0 10px 30px rgba(0, 45, 28, 0.06);
    --intro-card-shadow-hover: 0 18px 45px rgba(0, 89, 54, 0.14);
}

html[data-intro-theme="light"] body,
html:not([data-intro-theme="dark"]) body {
    background-color: var(--intro-page-bg) !important;
    color: var(--intro-text) !important;
}

/* ── Light Mode Header & Nav ── */
html[data-intro-theme="light"] header#site-header,
html:not([data-intro-theme="dark"]) header#site-header {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 2px solid var(--intro-border) !important;
}

html[data-intro-theme="light"] header#site-header.scrolled,
html:not([data-intro-theme="dark"]) header#site-header.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 2px solid var(--intro-green-brand) !important;
    box-shadow: 0 6px 28px rgba(0, 45, 28, 0.08) !important;
}

html[data-intro-theme="light"] .header-brand-name,
html:not([data-intro-theme="dark"]) .header-brand-name {
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .nav_bar li a,
html:not([data-intro-theme="dark"]) .nav_bar li a {
    color: #1a3828 !important;
}

html[data-intro-theme="light"] .nav_bar li a:hover,
html[data-intro-theme="light"] .nav_bar li a.active,
html:not([data-intro-theme="dark"]) .nav_bar li a:hover,
html:not([data-intro-theme="dark"]) .nav_bar li a.active {
    color: var(--intro-green-brand) !important;
    background: rgba(0, 89, 54, 0.07) !important;
}

html[data-intro-theme="light"] .nav_bar li a::after,
html:not([data-intro-theme="dark"]) .nav_bar li a::after {
    background: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .intro-theme-toggle,
html:not([data-intro-theme="dark"]) .intro-theme-toggle {
    background: rgba(0, 89, 54, 0.07) !important;
    border: 2px solid var(--intro-border) !important;
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .intro-theme-toggle:hover,
html:not([data-intro-theme="dark"]) .intro-theme-toggle:hover {
    background: rgba(0, 89, 54, 0.14) !important;
    border-color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .lang-btn,
html:not([data-intro-theme="dark"]) .lang-btn {
    background: rgba(0, 89, 54, 0.07) !important;
    border: 2px solid var(--intro-border) !important;
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .lang-btn:hover,
html:not([data-intro-theme="dark"]) .lang-btn:hover {
    background: rgba(0, 89, 54, 0.14) !important;
    border-color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .dropdown-menu,
html:not([data-intro-theme="dark"]) .dropdown-menu {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
}

html[data-intro-theme="light"] .dropdown-item,
html:not([data-intro-theme="dark"]) .dropdown-item {
    color: var(--intro-text) !important;
}

html[data-intro-theme="light"] .dropdown-item:hover,
html:not([data-intro-theme="dark"]) .dropdown-item:hover {
    background: var(--intro-surface-muted) !important;
    color: var(--intro-green-brand) !important;
}

/* ── Light Mode Hero Slider ── */
html[data-intro-theme="light"] .hero-slider-section,
html:not([data-intro-theme="dark"]) .hero-slider-section {
    background: linear-gradient(155deg, #eef7f2 0%, #ffffff 50%, #e6f4ec 100%) !important;
    border-bottom: 2px solid var(--intro-border) !important;
}

html[data-intro-theme="light"] .hero-slide,
html:not([data-intro-theme="dark"]) .hero-slide {
    background: transparent !important;
}

html[data-intro-theme="light"] .hero-overlay,
html:not([data-intro-theme="dark"]) .hero-overlay {
    background: radial-gradient(circle at 85% 20%, rgba(0, 89, 54, 0.08) 0%, transparent 60%),
                radial-gradient(circle at 15% 85%, rgba(0, 122, 74, 0.06) 0%, transparent 60%) !important;
}

html[data-intro-theme="light"] .hero-title,
html:not([data-intro-theme="dark"]) .hero-title {
    color: var(--intro-text-headings) !important;
}

html[data-intro-theme="light"] .hero-desc,
html:not([data-intro-theme="dark"]) .hero-desc {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="light"] .owl-index .owl-dot,
html:not([data-intro-theme="dark"]) .owl-index .owl-dot {
    background: rgba(0, 89, 54, 0.2) !important;
}

html[data-intro-theme="light"] .owl-index .owl-dot.active,
html:not([data-intro-theme="dark"]) .owl-index .owl-dot.active {
    background: var(--intro-green-brand) !important;
    width: 26px !important;
}

html[data-intro-theme="light"] .hero-slider-nav-btn,
html:not([data-intro-theme="dark"]) .hero-slider-nav-btn {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    color: var(--intro-green-brand) !important;
    box-shadow: 0 6px 18px rgba(0, 45, 28, 0.08) !important;
}

html[data-intro-theme="light"] .hero-slider-nav-btn:hover,
html:not([data-intro-theme="dark"]) .hero-slider-nav-btn:hover {
    background: var(--intro-green-brand) !important;
    color: #ffffff !important;
}

/* ── Light Mode Section Titles, Dividers, & Badges ── */
html[data-intro-theme="light"] .section-title,
html[data-intro-theme="light"] .section-title-dark,
html[data-intro-theme="light"] .section-title-white,
html:not([data-intro-theme="dark"]) .section-title,
html:not([data-intro-theme="dark"]) .section-title-dark,
html:not([data-intro-theme="dark"]) .section-title-white {
    color: var(--intro-text-headings) !important;
}

html[data-intro-theme="light"] .section-divider,
html:not([data-intro-theme="dark"]) .section-divider {
    background: linear-gradient(90deg, var(--intro-green-brand), var(--intro-green-accent)) !important;
}

html[data-intro-theme="light"] .section-label,
html[data-intro-theme="light"] .section-label-green,
html[data-intro-theme="light"] .section-label-gold-dark,
html:not([data-intro-theme="dark"]) .section-label,
html:not([data-intro-theme="dark"]) .section-label-green,
html:not([data-intro-theme="dark"]) .section-label-gold-dark {
    background: rgba(0, 89, 54, 0.08) !important;
    color: var(--intro-green-brand) !important;
    border: 1.5px solid var(--intro-border) !important;
}

html[data-intro-theme="light"] .the_title p,
html[data-intro-theme="light"] .grey-color,
html[data-intro-theme="light"] .section-sub,
html:not([data-intro-theme="dark"]) .the_title p,
html:not([data-intro-theme="dark"]) .grey-color,
html:not([data-intro-theme="dark"]) .section-sub {
    color: var(--intro-text-muted) !important;
}

/* ── Alternating Section Backgrounds (Light Mode) ── */
html[data-intro-theme="light"] .about-section,
html:not([data-intro-theme="dark"]) .about-section {
    background: #ffffff !important;
}

html[data-intro-theme="light"] .download-app-section,
html:not([data-intro-theme="dark"]) .download-app-section {
    background: #edf6f1 !important;
}

html[data-intro-theme="light"] .how-works-section,
html:not([data-intro-theme="dark"]) .how-works-section {
    background: #ffffff !important;
}

html[data-intro-theme="light"] .services-section,
html:not([data-intro-theme="dark"]) .services-section {
    background: #f1f7f3 !important;
}

html[data-intro-theme="light"] .partners-section,
html:not([data-intro-theme="dark"]) .partners-section {
    background: #f4f9f6 !important;
}

/* Light mode – marquee fade overlay matches bg */
html[data-intro-theme="light"] .prt-marquee-wrap::before,
html:not([data-intro-theme="dark"]) .prt-marquee-wrap::before {
    background: linear-gradient(90deg, #f4f9f6, transparent) !important;
}
html[data-intro-theme="light"] .prt-marquee-wrap::after,
html:not([data-intro-theme="dark"]) .prt-marquee-wrap::after {
    background: linear-gradient(270deg, #f4f9f6, transparent) !important;
}

/* Light mode – partner cards */
html[data-intro-theme="light"] .prt-card-inner,
html:not([data-intro-theme="dark"]) .prt-card-inner {
    --prt-card-bg: rgba(255,255,255,0.88) !important;
    --prt-card-border: rgba(0,89,54,0.14) !important;
    background: rgba(255,255,255,0.88) !important;
    border: 1.5px solid rgba(0,89,54,0.14) !important;
    box-shadow: 0 4px 20px rgba(0,89,54,0.08), 0 1px 4px rgba(0,0,0,0.06) !important;
}
html[data-intro-theme="light"] .prt-card-inner:hover,
html:not([data-intro-theme="dark"]) .prt-card-inner:hover {
    box-shadow: 0 14px 40px rgba(0,89,54,0.16), 0 0 0 2px rgba(0,89,54,0.22) !important;
    border-color: rgba(0,89,54,0.38) !important;
    transform: translateY(-10px) scale(1.04) !important;
}
html[data-intro-theme="light"] .prt-card-logo-wrap,
html:not([data-intro-theme="dark"]) .prt-card-logo-wrap {
    background: #f0f8f4 !important;
    border-color: rgba(0,89,54,0.12) !important;
}
html[data-intro-theme="light"] .prt-card-inner:hover .prt-card-logo-wrap,
html:not([data-intro-theme="dark"]) .prt-card-inner:hover .prt-card-logo-wrap {
    background: #e2f4ec !important;
}
html[data-intro-theme="light"] .prt-card-img,
html:not([data-intro-theme="dark"]) .prt-card-img {
    filter: grayscale(30%) brightness(0.95) !important;
    opacity: 0.85 !important;
}
html[data-intro-theme="light"] .prt-card-name,
html:not([data-intro-theme="dark"]) .prt-card-name {
    color: #2d5040 !important;
}
html[data-intro-theme="light"] .prt-card-inner:hover .prt-card-name,
html:not([data-intro-theme="dark"]) .prt-card-inner:hover .prt-card-name {
    color: #005936 !important;
}
html[data-intro-theme="light"] .prt-card-glow,
html:not([data-intro-theme="dark"]) .prt-card-glow {
    background: radial-gradient(circle, rgba(0,89,54,0.09) 0%, transparent 65%) !important;
}
html[data-intro-theme="light"] .prt-orb-1,
html:not([data-intro-theme="dark"]) .prt-orb-1 {
    background: radial-gradient(circle, rgba(0,89,54,0.12) 0%, transparent 70%) !important;
}
html[data-intro-theme="light"] .prt-orb-2,
html:not([data-intro-theme="dark"]) .prt-orb-2 {
    background: radial-gradient(circle, rgba(16,185,129,0.10) 0%, transparent 70%) !important;
}
html[data-intro-theme="light"] .prt-stats-bar,
html:not([data-intro-theme="dark"]) .prt-stats-bar {
    border-top-color: rgba(0,89,54,0.12) !important;
}
html[data-intro-theme="light"] .prt-card-shimmer,
html:not([data-intro-theme="dark"]) .prt-card-shimmer {
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%) !important;
    background-size: 200% 100% !important;
    background-position: -200% 0 !important;
}
html[data-intro-theme="light"] .prt-card-inner:hover .prt-card-shimmer,
html:not([data-intro-theme="dark"]) .prt-card-inner:hover .prt-card-shimmer {
    background-position: 200% 0 !important;
}

html[data-intro-theme="light"] .testimonials-section,
html:not([data-intro-theme="dark"]) .testimonials-section {
    background: #f1f7f3 !important;
}

html[data-intro-theme="light"] .contact-section,
html:not([data-intro-theme="dark"]) .contact-section {
    background: #ffffff !important;
}

html[data-intro-theme="light"] .faq-section,
html:not([data-intro-theme="dark"]) .faq-section {
    background: #f1f7f3 !important;
}

/* ── Light Mode: About Us Section ── */
html[data-intro-theme="light"] .about-feature-item,
html:not([data-intro-theme="dark"]) .about-feature-item {
    background: #ffffff;
    border: 2px solid var(--intro-border);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: var(--intro-card-shadow);
    transition: all 0.35s ease;
    margin-bottom: 16px;
}

html[data-intro-theme="light"] .about-feature-item:hover,
html:not([data-intro-theme="dark"]) .about-feature-item:hover {
    transform: translateY(-4px);
    border-color: var(--intro-green-brand);
    box-shadow: var(--intro-card-shadow-hover);
}

html[data-intro-theme="light"] .about-feature-icon,
html:not([data-intro-theme="dark"]) .about-feature-icon {
    background: linear-gradient(135deg, var(--intro-green-brand), var(--intro-green-accent)) !important;
    color: #ffffff !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    font-size: 1.3rem !important;
    box-shadow: 0 6px 18px rgba(0, 89, 54, 0.22) !important;
}

html[data-intro-theme="light"] .about-feature-text h6,
html:not([data-intro-theme="dark"]) .about-feature-text h6 {
    color: var(--intro-text-headings) !important;
    font-size: 1.18rem !important;
    margin-bottom: 4px !important;
}

html[data-intro-theme="light"] .about-feature-text p,
html:not([data-intro-theme="dark"]) .about-feature-text p {
    color: var(--intro-text-muted) !important;
}

/* ── Light Mode: Download App Section ── */
html[data-intro-theme="light"] .app-badge,
html:not([data-intro-theme="dark"]) .app-badge {
    background: var(--intro-green-brand) !important;
    border: 2px solid rgba(0, 89, 54, 0.35) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 12px 24px !important;
    box-shadow: 0 6px 22px rgba(0, 89, 54, 0.22) !important;
    transition: all 0.3s ease !important;
}

html[data-intro-theme="light"] .app-badge:hover,
html:not([data-intro-theme="dark"]) .app-badge:hover {
    background: var(--intro-green-accent) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(0, 89, 54, 0.32) !important;
}

html[data-intro-theme="light"] .app-badge i,
html:not([data-intro-theme="dark"]) .app-badge i {
    color: #ffffff !important;
    font-size: 1.7rem !important;
}

/* ── Light Mode: How It Works Section ── */
html[data-intro-theme="light"] .how-steps-wrapper::before,
html:not([data-intro-theme="dark"]) .how-steps-wrapper::before {
    background: repeating-linear-gradient(90deg, var(--intro-green-brand) 0, var(--intro-green-brand) 8px, transparent 8px, transparent 16px) !important;
    opacity: 0.35 !important;
}

html[data-intro-theme="light"] .how-step,
html:not([data-intro-theme="dark"]) .how-step {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 22px !important;
    padding: 26px 20px !important;
    margin: 12px !important;
    box-shadow: var(--intro-card-shadow) !important;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    min-width: 175px !important;
}

html[data-intro-theme="light"] .how-step:hover,
html:not([data-intro-theme="dark"]) .how-step:hover {
    transform: translateY(-8px) !important;
    border-color: var(--intro-green-brand) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="light"] .how-step-num,
html:not([data-intro-theme="dark"]) .how-step-num {
    background: linear-gradient(135deg, var(--intro-green-brand), var(--intro-green-accent)) !important;
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 89, 54, 0.3) !important;
}

html[data-intro-theme="light"] .how-step-img,
html:not([data-intro-theme="dark"]) .how-step-img {
    border: 2px solid var(--intro-border) !important;
    border-radius: 16px !important;
    background: var(--intro-surface-muted) !important;
    padding: 8px !important;
}

html[data-intro-theme="light"] .how-step-title,
html:not([data-intro-theme="dark"]) .how-step-title {
    color: var(--intro-text-headings) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
}

/* ── Light Mode: Services Section ── */
html[data-intro-theme="light"] .service-card,
html:not([data-intro-theme="dark"]) .service-card {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 24px !important;
    padding: 38px 30px !important;
    box-shadow: var(--intro-card-shadow) !important;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

html[data-intro-theme="light"] .service-card:hover,
html:not([data-intro-theme="dark"]) .service-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--intro-green-brand) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="light"] .service-icon-wrap,
html:not([data-intro-theme="dark"]) .service-icon-wrap {
    width: 68px !important;
    height: 68px !important;
    background: linear-gradient(135deg, var(--intro-green-brand), var(--intro-green-accent)) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(0, 89, 54, 0.24) !important;
}

html[data-intro-theme="light"] .service-icon-default,
html:not([data-intro-theme="dark"]) .service-icon-default {
    color: #ffffff !important;
    font-size: 1.65rem !important;
}

html[data-intro-theme="light"] .service-card h6,
html:not([data-intro-theme="dark"]) .service-card h6 {
    color: var(--intro-text-headings) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

html[data-intro-theme="light"] .service-card p,
html:not([data-intro-theme="dark"]) .service-card p {
    color: var(--intro-text-muted) !important;
    font-size: 1.02rem !important;
    line-height: 1.85 !important;
    margin-bottom: 22px !important;
}

html[data-intro-theme="light"] .service-card-link,
html:not([data-intro-theme="dark"]) .service-card-link {
    color: var(--intro-green-brand) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

/* ── Light Mode: Structured Large Partner Cards Showcase ── */
.partner-showcase-card {
    position: relative;
    border-radius: 26px !important;
    padding: 30px 24px !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    overflow: hidden;
}

html[data-intro-theme="light"] .partner-showcase-card,
html:not([data-intro-theme="dark"]) .partner-showcase-card {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="light"] .partner-showcase-card:hover,
html:not([data-intro-theme="dark"]) .partner-showcase-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: var(--intro-green-brand) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

.partner-card-header {
    margin-bottom: 14px;
}

.partner-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
}

html[data-intro-theme="light"] .partner-card-badge,
html:not([data-intro-theme="dark"]) .partner-card-badge {
    background: rgba(0, 89, 54, 0.08);
    color: var(--intro-green-brand);
    border: 1px solid var(--intro-border);
}

.partner-logo-stage {
    width: 100% !important;
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    border-radius: 18px !important;
    transition: all 0.3s ease !important;
}

html[data-intro-theme="light"] .partner-logo-stage,
html:not([data-intro-theme="dark"]) .partner-logo-stage {
    background: #f7faf8 !important;
    border: 1.5px solid #dcece2 !important;
}

.partner-img-main {
    max-height: 90px !important;
    max-width: 220px !important;
    width: auto !important;
    object-fit: contain !important;
    transition: transform 0.35s ease !important;
    filter: none !important;
    opacity: 1 !important;
}

.partner-showcase-card:hover .partner-img-main {
    transform: scale(1.1) !important;
}

.partner-card-footer {
    margin-top: 14px;
}

.partner-name-text {
    font-size: 1.1rem;
    font-weight: 700;
}

html[data-intro-theme="light"] .partner-name-text,
html:not([data-intro-theme="dark"]) .partner-name-text {
    color: var(--intro-text-headings);
}

.partner-glow-seam {
    position: absolute;
    bottom: 0;
    right: 50%;
    left: 50%;
    height: 4px;
    border-radius: 4px;
    transition: all 0.35s ease;
    opacity: 0;
}

html[data-intro-theme="light"] .partner-glow-seam,
html:not([data-intro-theme="dark"]) .partner-glow-seam {
    background: var(--intro-green-brand);
}

.partner-showcase-card:hover .partner-glow-seam {
    right: 20px;
    left: 20px;
    opacity: 1;
}

/* ── Light Mode: Stats Bar (Framed with Green Border) ── */
html[data-intro-theme="light"] .stats-bar,
html:not([data-intro-theme="dark"]) .stats-bar {
    background: linear-gradient(135deg, #eef7f2 0%, #f7faf8 100%) !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 28px !important;
    margin-top: 56px !important;
    padding: 46px 28px !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="light"] .stat-icon,
html:not([data-intro-theme="dark"]) .stat-icon {
    color: var(--intro-green-brand) !important;
    font-size: 1.9rem !important;
    margin-bottom: 6px;
    display: inline-block;
}

html[data-intro-theme="light"] .stat-number,
html:not([data-intro-theme="dark"]) .stat-number {
    color: var(--intro-text-headings) !important;
    font-size: 2.7rem !important;
    font-weight: 800 !important;
}

html[data-intro-theme="light"] .stat-label,
html:not([data-intro-theme="dark"]) .stat-label {
    color: var(--intro-text-muted) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

/* ── Light Mode: Testimonials Section ── */
html[data-intro-theme="light"] .testimonial-card,
html:not([data-intro-theme="dark"]) .testimonial-card {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 24px !important;
    padding: 34px !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="light"] .testimonial-card .testimonial-quote,
html:not([data-intro-theme="dark"]) .testimonial-card .testimonial-quote {
    color: var(--intro-text) !important;
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
}

html[data-intro-theme="light"] .testimonial-info h6,
html:not([data-intro-theme="dark"]) .testimonial-info h6 {
    color: var(--intro-text-headings) !important;
    font-size: 1.15rem !important;
}

html[data-intro-theme="light"] .testimonial-info span,
html:not([data-intro-theme="dark"]) .testimonial-info span {
    color: var(--intro-text-muted) !important;
}

/* ── Light Mode: Contact Us Section (#connect_us) ── */
html[data-intro-theme="light"] .contact-cards,
html:not([data-intro-theme="dark"]) .contact-cards {
    gap: 18px !important;
    margin-top: 26px;
}

html[data-intro-theme="light"] .contact-card,
html:not([data-intro-theme="dark"]) .contact-card {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 20px !important;
    padding: 22px 26px !important;
    box-shadow: var(--intro-card-shadow) !important;
    transition: all 0.3s ease !important;
}

html[data-intro-theme="light"] .contact-card:hover,
html:not([data-intro-theme="dark"]) .contact-card:hover {
    transform: translateX(-6px) !important;
    border-color: var(--intro-green-brand) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="light"] .contact-card-icon,
html:not([data-intro-theme="dark"]) .contact-card-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--intro-green-brand), var(--intro-green-accent)) !important;
    color: #ffffff !important;
    font-size: 1.4rem !important;
    box-shadow: 0 6px 18px rgba(0, 89, 54, 0.22) !important;
}

html[data-intro-theme="light"] .contact-card-info h6,
html:not([data-intro-theme="dark"]) .contact-card-info h6 {
    color: var(--intro-text-muted) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
}

html[data-intro-theme="light"] .contact-card-info span,
html[data-intro-theme="light"] .contact-card-info a,
html:not([data-intro-theme="dark"]) .contact-card-info span,
html:not([data-intro-theme="dark"]) .contact-card-info a {
    color: var(--intro-text-headings) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

html[data-intro-theme="light"] .contact-form-card,
html:not([data-intro-theme="dark"]) .contact-form-card {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 28px !important;
    padding: 46px 40px !important;
    box-shadow: 0 16px 50px rgba(0, 45, 28, 0.08) !important;
}

html[data-intro-theme="light"] .form-floating-group,
html:not([data-intro-theme="dark"]) .form-floating-group {
    position: relative !important;
    margin-bottom: 22px !important;
}

html[data-intro-theme="light"] .form-control,
html:not([data-intro-theme="dark"]) .form-control {
    background: #fbfdfc !important;
    border: 1.5px solid var(--intro-border) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    font-size: 1.05rem !important;
    color: var(--intro-text) !important;
    transition: all 0.25s ease !important;
    height: 56px !important;
}

html[data-intro-theme="light"] textarea.form-control,
html:not([data-intro-theme="dark"]) textarea.form-control {
    height: 140px !important;
    padding-top: 18px !important;
}

html[data-intro-theme="light"] .form-control:focus,
html:not([data-intro-theme="dark"]) .form-control:focus {
    background: #ffffff !important;
    border-color: var(--intro-green-brand) !important;
    box-shadow: 0 0 0 4px rgba(0, 89, 54, 0.12) !important;
}

html[data-intro-theme="light"] .form-floating-group label,
html:not([data-intro-theme="dark"]) .form-floating-group label {
    position: absolute !important;
    top: 16px !important;
    right: 20px !important;
    color: #6e8a7b !important;
    font-size: 1.02rem !important;
    pointer-events: none !important;
    transition: all 0.25s ease !important;
    background: transparent !important;
    padding: 0 6px !important;
    margin: 0 !important;
}

html[data-intro-theme="light"] .form-floating-group input:focus ~ label,
html[data-intro-theme="light"] .form-floating-group input:not(:placeholder-shown) ~ label,
html[data-intro-theme="light"] .form-floating-group textarea:focus ~ label,
html[data-intro-theme="light"] .form-floating-group textarea:not(:placeholder-shown) ~ label,
html:not([data-intro-theme="dark"]) .form-floating-group input:focus ~ label,
html:not([data-intro-theme="dark"]) .form-floating-group input:not(:placeholder-shown) ~ label,
html:not([data-intro-theme="dark"]) .form-floating-group textarea:focus ~ label,
html:not([data-intro-theme="dark"]) .form-floating-group textarea:not(:placeholder-shown) ~ label {
    top: -11px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--intro-green-brand) !important;
    background: #ffffff !important;
    border-radius: 4px !important;
}

html[data-intro-theme="light"] .contact-submit-btn,
html:not([data-intro-theme="dark"]) .contact-submit-btn {
    background: linear-gradient(135deg, var(--intro-green-brand), var(--intro-green-accent)) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    height: 56px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 24px rgba(0, 89, 54, 0.28) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

html[data-intro-theme="light"] .contact-submit-btn:hover,
html:not([data-intro-theme="dark"]) .contact-submit-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px rgba(0, 89, 54, 0.38) !important;
}

/* ── Light Mode: FAQ Section ── */
html[data-intro-theme="light"] .faq-tab-btn,
html:not([data-intro-theme="dark"]) .faq-tab-btn {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    color: var(--intro-text) !important;
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

html[data-intro-theme="light"] .faq-tab-btn:hover,
html:not([data-intro-theme="dark"]) .faq-tab-btn:hover {
    border-color: var(--intro-green-brand) !important;
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .faq-tab-btn.active,
html:not([data-intro-theme="dark"]) .faq-tab-btn.active {
    background: var(--intro-green-brand) !important;
    border-color: var(--intro-green-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 89, 54, 0.25) !important;
}

html[data-intro-theme="light"] .faq-item,
html:not([data-intro-theme="dark"]) .faq-item {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
    box-shadow: var(--intro-card-shadow) !important;
    transition: all 0.3s ease !important;
}

html[data-intro-theme="light"] .faq-item.open,
html:not([data-intro-theme="dark"]) .faq-item.open {
    border-color: var(--intro-green-brand) !important;
    border-inline-start: 6px solid var(--intro-green-brand) !important;
    background: #fbfdfc !important;
}

html[data-intro-theme="light"] .faq-question,
html:not([data-intro-theme="dark"]) .faq-question {
    color: var(--intro-text-headings) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    padding: 22px 26px !important;
}

html[data-intro-theme="light"] .faq-question-num,
html:not([data-intro-theme="dark"]) .faq-question-num {
    color: var(--intro-green-brand) !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

html[data-intro-theme="light"] .faq-chevron i,
html:not([data-intro-theme="dark"]) .faq-chevron i {
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .faq-answer p,
html:not([data-intro-theme="dark"]) .faq-answer p {
    color: var(--intro-text-muted) !important;
    font-size: 1.05rem !important;
    line-height: 1.9 !important;
    padding: 0 26px 22px 26px !important;
}

/* ── Light Mode: Footer ── */
html[data-intro-theme="light"] footer.site-footer,
html:not([data-intro-theme="dark"]) footer.site-footer {
    background: linear-gradient(180deg, #e4efe7 0%, #d5e8dc 100%) !important;
    border-top: 3px solid var(--intro-green-brand) !important;
    color: var(--intro-text) !important;
    padding-top: 0 !important;
}

html[data-intro-theme="light"] .footer-journey,
html:not([data-intro-theme="dark"]) .footer-journey {
    background: #ffffff !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 26px !important;
    box-shadow: 0 14px 40px rgba(0, 45, 28, 0.08) !important;
}

html[data-intro-theme="light"] .footer-journey__eyebrow,
html:not([data-intro-theme="dark"]) .footer-journey__eyebrow {
    color: var(--intro-green-brand) !important;
    font-weight: 700 !important;
}

html[data-intro-theme="light"] .footer-journey h2,
html:not([data-intro-theme="dark"]) .footer-journey h2 {
    color: var(--intro-text-headings) !important;
}

html[data-intro-theme="light"] .footer-journey p,
html:not([data-intro-theme="dark"]) .footer-journey p {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="light"] .footer-journey__icon,
html:not([data-intro-theme="dark"]) .footer-journey__icon {
    background: linear-gradient(135deg, var(--intro-green-brand), var(--intro-green-accent)) !important;
    color: #ffffff !important;
}

html[data-intro-theme="light"] .footer-journey__action,
html:not([data-intro-theme="dark"]) .footer-journey__action {
    background: var(--intro-green-brand) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0, 89, 54, 0.25) !important;
}

html[data-intro-theme="light"] .footer-journey__action:hover,
html:not([data-intro-theme="dark"]) .footer-journey__action:hover {
    background: var(--intro-green-accent) !important;
}

html[data-intro-theme="light"] .footer-brand-copy strong,
html[data-intro-theme="light"] .Tfooter,
html[data-intro-theme="light"] .footer-about h3,
html:not([data-intro-theme="dark"]) .footer-brand-copy strong,
html:not([data-intro-theme="dark"]) .Tfooter,
html:not([data-intro-theme="dark"]) .footer-about h3 {
    color: var(--intro-text-headings) !important;
    font-size: 1.25rem !important;
}

html[data-intro-theme="light"] .Tfooter::after,
html:not([data-intro-theme="dark"]) .Tfooter::after {
    background: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .footer-about__text,
html[data-intro-theme="light"] .footer-about__text p,
html:not([data-intro-theme="dark"]) .footer-about__text,
html:not([data-intro-theme="dark"]) .footer-about__text p {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="light"] .link-footer li a,
html:not([data-intro-theme="dark"]) .link-footer li a {
    color: #2c4d3b !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
}

html[data-intro-theme="light"] .link-footer li a:hover,
html:not([data-intro-theme="dark"]) .link-footer li a:hover {
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .link-footer li i,
html:not([data-intro-theme="dark"]) .link-footer li i {
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .footer-column__number,
html:not([data-intro-theme="dark"]) .footer-column__number {
    color: rgba(0, 89, 54, 0.2) !important;
}

html[data-intro-theme="light"] .footer-contact__item,
html:not([data-intro-theme="dark"]) .footer-contact__item {
    color: var(--intro-text) !important;
}

html[data-intro-theme="light"] .footer-contact__icon,
html:not([data-intro-theme="dark"]) .footer-contact__icon {
    background: #ffffff !important;
    border: 1.5px solid var(--intro-border) !important;
    color: var(--intro-green-brand) !important;
}

html[data-intro-theme="light"] .footer-contact__item strong,
html:not([data-intro-theme="dark"]) .footer-contact__item strong {
    color: var(--intro-text-headings) !important;
    font-size: 1.08rem !important;
}

html[data-intro-theme="light"] .social-m li a,
html:not([data-intro-theme="dark"]) .social-m li a {
    background: #ffffff !important;
    border: 1.5px solid var(--intro-border) !important;
    color: var(--intro-green-brand) !important;
    box-shadow: 0 4px 12px rgba(0, 45, 28, 0.05) !important;
}

html[data-intro-theme="light"] .social-m li a:hover,
html:not([data-intro-theme="dark"]) .social-m li a:hover {
    background: var(--intro-green-brand) !important;
    border-color: var(--intro-green-brand) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
}

html[data-intro-theme="light"] .under_footer,
html:not([data-intro-theme="dark"]) .under_footer {
    background: #c8dcd0 !important;
    border-top: 1.5px solid var(--intro-border) !important;
    color: #2b4536 !important;
    font-size: 1rem !important;
}

html[data-intro-theme="light"] .under_footer a,
html:not([data-intro-theme="dark"]) .under_footer a {
    color: var(--intro-green-brand) !important;
    font-weight: 700 !important;
}

html[data-intro-theme="light"] .mobile-footer-nav,
html:not([data-intro-theme="dark"]) .mobile-footer-nav {
    background: rgba(255, 255, 255, 0.97) !important;
    border-top: 2px solid var(--intro-border) !important;
    box-shadow: 0 -4px 20px rgba(0, 45, 28, 0.07) !important;
}

html[data-intro-theme="light"] .mobile-footer-nav .footer-nav-item,
html:not([data-intro-theme="dark"]) .mobile-footer-nav .footer-nav-item {
    color: #355443 !important;
}

html[data-intro-theme="light"] .mobile-footer-nav .footer-nav-item:hover,
html[data-intro-theme="light"] .mobile-footer-nav .footer-nav-item.active,
html:not([data-intro-theme="dark"]) .mobile-footer-nav .footer-nav-item:hover,
html:not([data-intro-theme="dark"]) .mobile-footer-nav .footer-nav-item.active {
    color: var(--intro-green-brand) !important;
}


/* --------------------------------------------------------------------------
   5. PURE DARK MODE (Cohesive Dark Forest Obsidian + Luminous Emerald Brand)
   "خلي الدارك دارك الي هو الهويه الخضراء"
   -------------------------------------------------------------------------- */
html[data-intro-theme="dark"] {
    color-scheme: dark;
    --intro-page-bg: #06150e;
    --intro-surface: #0e271c;
    --intro-surface-muted: #123324;
    --intro-text: #edf6f1;
    --intro-text-headings: #ffffff;
    --intro-text-muted: #9eb8aa;
    --intro-text-soft: #728c7f;
    --intro-border: rgba(16, 185, 129, 0.24);
    --intro-section-border: rgba(16, 185, 129, 0.22);
    --intro-section-seam: #10b981;
    --intro-section-seam-glow: rgba(16, 185, 129, 0.45);
    --intro-border-hover: #10b981;
    --intro-emerald: #10b981;
    --intro-card-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);
    --intro-card-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.55), 0 0 25px rgba(16, 185, 129, 0.18);
}

html[data-intro-theme="dark"] body {
    background-color: var(--intro-page-bg) !important;
    color: var(--intro-text) !important;
}

/* ── Dark Mode Header & Nav ── */
html[data-intro-theme="dark"] header#site-header {
    background: rgba(7, 21, 14, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 2px solid rgba(16, 185, 129, 0.18) !important;
}

html[data-intro-theme="dark"] header#site-header.scrolled {
    background: rgba(6, 19, 13, 0.97) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 2px solid var(--intro-emerald) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

html[data-intro-theme="dark"] .header-brand-name {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .nav_bar li a {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-intro-theme="dark"] .nav_bar li a:hover,
html[data-intro-theme="dark"] .nav_bar li a.active {
    color: var(--intro-emerald) !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

html[data-intro-theme="dark"] .nav_bar li a::after {
    background: var(--intro-emerald) !important;
    box-shadow: 0 0 10px var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .intro-theme-toggle {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 2px solid rgba(16, 185, 129, 0.3) !important;
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .intro-theme-toggle:hover {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .lang-btn {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 2px solid rgba(16, 185, 129, 0.3) !important;
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .lang-btn:hover {
    background: rgba(16, 185, 129, 0.22) !important;
    border-color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .dropdown-menu {
    background: #0c2016 !important;
    border: 2px solid rgba(16, 185, 129, 0.25) !important;
}

html[data-intro-theme="dark"] .dropdown-item {
    color: var(--intro-text) !important;
}

html[data-intro-theme="dark"] .dropdown-item:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--intro-emerald) !important;
}

/* ── Dark Mode Hero Slider ── */
html[data-intro-theme="dark"] .hero-slider-section {
    background: linear-gradient(145deg, #02120b 0%, #06281a 50%, #010d07 100%) !important;
    border-bottom: 2px solid var(--intro-border) !important;
}

html[data-intro-theme="dark"] .hero-slide {
    background: transparent !important;
}

html[data-intro-theme="dark"] .hero-overlay {
    background: radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 15% 85%, rgba(0, 89, 54, 0.35) 0%, transparent 65%) !important;
}

html[data-intro-theme="dark"] .hero-particles .hero-particle {
    background: var(--intro-emerald) !important;
    box-shadow: 0 0 12px var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .hero-title {
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

html[data-intro-theme="dark"] .hero-desc {
    color: rgba(255, 255, 255, 0.88) !important;
}

html[data-intro-theme="dark"] .owl-index .owl-dot {
    background: rgba(255, 255, 255, 0.25) !important;
}

html[data-intro-theme="dark"] .owl-index .owl-dot.active {
    background: var(--intro-emerald) !important;
    box-shadow: 0 0 12px var(--intro-emerald) !important;
    width: 26px !important;
}

html[data-intro-theme="dark"] .hero-slider-nav-btn {
    background: rgba(14, 38, 27, 0.8) !important;
    border: 2px solid rgba(16, 185, 129, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-intro-theme="dark"] .hero-slider-nav-btn:hover {
    background: var(--intro-emerald) !important;
    color: #07150e !important;
}

/* ── Dark Mode Section Titles, Dividers, & Badges ── */
html[data-intro-theme="dark"] .section-title,
html[data-intro-theme="dark"] .section-title-dark,
html[data-intro-theme="dark"] .section-title-white {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .section-divider {
    background: linear-gradient(90deg, var(--intro-emerald), #005936) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35) !important;
}

html[data-intro-theme="dark"] .section-label,
html[data-intro-theme="dark"] .section-label-green,
html[data-intro-theme="dark"] .section-label-gold-dark {
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--intro-emerald) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
}

html[data-intro-theme="dark"] .the_title p,
html[data-intro-theme="dark"] .grey-color,
html[data-intro-theme="dark"] .section-sub {
    color: var(--intro-text-muted) !important;
}

/* ── Alternating Section Backgrounds (Dark Mode) ── */
html[data-intro-theme="dark"] .about-section {
    background: #06150e !important;
}

html[data-intro-theme="dark"] .download-app-section {
    background: #0b2418 !important;
}

html[data-intro-theme="dark"] .how-works-section {
    background: #06150e !important;
}

html[data-intro-theme="dark"] .services-section {
    background: #092015 !important;
}

html[data-intro-theme="dark"] .partners-section {
    background: #06150e !important;
}

/* Dark mode – marquee fade overlay */
html[data-intro-theme="dark"] .prt-marquee-wrap::before {
    background: linear-gradient(90deg, #06150e, transparent) !important;
}
html[data-intro-theme="dark"] .prt-marquee-wrap::after {
    background: linear-gradient(270deg, #06150e, transparent) !important;
}

/* Dark mode – partner cards */
html[data-intro-theme="dark"] .prt-card-inner {
    background: rgba(8, 28, 18, 0.75) !important;
    border-color: rgba(16,185,129,0.18) !important;
    box-shadow: 0 4px 28px rgba(0,0,0,0.4), 0 0 0 0 rgba(16,185,129,0) !important;
}
html[data-intro-theme="dark"] .prt-card-inner:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,0.55),
                0 0 0 2px rgba(16,185,129,0.4),
                0 0 40px rgba(16,185,129,0.18) !important;
    border-color: rgba(16,185,129,0.55) !important;
}
html[data-intro-theme="dark"] .prt-card-logo-wrap {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.07) !important;
}
html[data-intro-theme="dark"] .prt-card-img {
    filter: grayscale(50%) brightness(1.6) !important;
    opacity: 0.72 !important;
}
html[data-intro-theme="dark"] .prt-card-name {
    color: rgba(180,220,200,0.75) !important;
}
html[data-intro-theme="dark"] .prt-card-inner:hover .prt-card-name {
    color: #10b981 !important;
}
html[data-intro-theme="dark"] .prt-stats-bar {
    border-top-color: rgba(16,185,129,0.12) !important;
}

html[data-intro-theme="dark"] .testimonials-section {
    background: #092015 !important;
}

html[data-intro-theme="dark"] .contact-section {
    background: #06150e !important;
}

html[data-intro-theme="dark"] .faq-section {
    background: #092015 !important;
}

/* ── Dark Mode: About Us Section ── */
html[data-intro-theme="dark"] .about-feature-item {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 20px !important;
    padding: 20px 24px !important;
    box-shadow: var(--intro-card-shadow) !important;
    margin-bottom: 16px;
}

html[data-intro-theme="dark"] .about-feature-item:hover {
    transform: translateY(-4px) !important;
    border-color: var(--intro-emerald) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="dark"] .about-feature-icon {
    background: linear-gradient(135deg, #005936, var(--intro-emerald)) !important;
    color: #ffffff !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    font-size: 1.3rem !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.28) !important;
}

html[data-intro-theme="dark"] .about-feature-text h6 {
    color: #ffffff !important;
    font-size: 1.18rem !important;
    margin-bottom: 4px !important;
}

html[data-intro-theme="dark"] .about-feature-text p {
    color: var(--intro-text-muted) !important;
}

/* ── Dark Mode: Download App Section ── */
html[data-intro-theme="dark"] .app-badge {
    background: var(--intro-surface) !important;
    border: 2px solid rgba(16, 185, 129, 0.35) !important;
    color: #ffffff !important;
    border-radius: 16px !important;
    padding: 12px 24px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-intro-theme="dark"] .app-badge:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: var(--intro-emerald) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.2) !important;
}

html[data-intro-theme="dark"] .app-badge i {
    color: var(--intro-emerald) !important;
}

/* ── Dark Mode: How It Works Section ── */
html[data-intro-theme="dark"] .how-steps-wrapper::before {
    background: repeating-linear-gradient(90deg, var(--intro-emerald) 0, var(--intro-emerald) 8px, transparent 8px, transparent 16px) !important;
    opacity: 0.35 !important;
}

html[data-intro-theme="dark"] .how-step {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 22px !important;
    padding: 26px 20px !important;
    margin: 12px !important;
    box-shadow: var(--intro-card-shadow) !important;
    min-width: 175px !important;
}

html[data-intro-theme="dark"] .how-step:hover {
    transform: translateY(-8px) !important;
    border-color: var(--intro-emerald) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="dark"] .how-step-num {
    background: linear-gradient(135deg, #005936, var(--intro-emerald)) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

html[data-intro-theme="dark"] .how-step-img {
    border: 2px solid var(--intro-border) !important;
    border-radius: 16px !important;
    background: var(--intro-surface-muted) !important;
}

html[data-intro-theme="dark"] .how-step-title {
    color: #ffffff !important;
}

/* ── Dark Mode: Services Section ── */
html[data-intro-theme="dark"] .service-card {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 24px !important;
    padding: 38px 30px !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="dark"] .service-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--intro-emerald) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="dark"] .service-icon-wrap {
    background: linear-gradient(135deg, #005936, var(--intro-emerald)) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.28) !important;
}

html[data-intro-theme="dark"] .service-icon-default {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .service-card h6 {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .service-card p {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="dark"] .service-card-link {
    color: var(--intro-emerald) !important;
}

/* ── Dark Mode: Structured Large Partner Cards Showcase ── */
html[data-intro-theme="dark"] .partner-showcase-card {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="dark"] .partner-showcase-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: var(--intro-emerald) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="dark"] .partner-card-badge {
    background: rgba(16, 185, 129, 0.14) !important;
    color: var(--intro-emerald) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
}

html[data-intro-theme="dark"] .partner-logo-stage {
    background: rgba(6, 21, 14, 0.75) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.2) !important;
}

html[data-intro-theme="dark"] .partner-name-text {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .partner-glow-seam {
    background: var(--intro-emerald) !important;
    box-shadow: 0 0 10px var(--intro-emerald) !important;
}

/* ── Dark Mode: Stats Bar (Framed with Green Border) ── */
html[data-intro-theme="dark"] .stats-bar {
    background: linear-gradient(135deg, #0c2419 0%, #0e2b1d 100%) !important;
    border: 2px solid var(--intro-border) !important;
    border-radius: 28px !important;
    margin-top: 56px !important;
    padding: 46px 28px !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="dark"] .stat-icon {
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .stat-number {
    color: #ffffff !important;
    text-shadow: 0 0 16px rgba(16, 185, 129, 0.3);
}

html[data-intro-theme="dark"] .stat-label {
    color: var(--intro-text-muted) !important;
}

/* ── Dark Mode: Testimonials Section ── */
html[data-intro-theme="dark"] .testimonial-card {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="dark"] .testimonial-card .testimonial-quote {
    color: var(--intro-text) !important;
}

html[data-intro-theme="dark"] .testimonial-info h6 {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .testimonial-info span {
    color: var(--intro-text-muted) !important;
}

/* ── Dark Mode: Contact Us Section (#connect_us) ── */
html[data-intro-theme="dark"] .contact-card {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="dark"] .contact-card:hover {
    transform: translateX(-6px) !important;
    border-color: var(--intro-emerald) !important;
    box-shadow: var(--intro-card-shadow-hover) !important;
}

html[data-intro-theme="dark"] .contact-card-icon {
    background: linear-gradient(135deg, #005936, var(--intro-emerald)) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3) !important;
}

html[data-intro-theme="dark"] .contact-card-info h6 {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="dark"] .contact-card-info span,
html[data-intro-theme="dark"] .contact-card-info a {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .contact-form-card {
    background: #0b2016 !important;
    border: 2px solid var(--intro-border) !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="dark"] .form-control {
    background: #0e271c !important;
    border: 1.5px solid rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .form-control:focus {
    background: #113123 !important;
    border-color: var(--intro-emerald) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25) !important;
}

html[data-intro-theme="dark"] .form-floating-group label {
    color: var(--intro-text-soft) !important;
}

html[data-intro-theme="dark"] .form-floating-group input:focus ~ label,
html[data-intro-theme="dark"] .form-floating-group input:not(:placeholder-shown) ~ label,
html[data-intro-theme="dark"] .form-floating-group textarea:focus ~ label,
html[data-intro-theme="dark"] .form-floating-group textarea:not(:placeholder-shown) ~ label {
    color: var(--intro-emerald) !important;
    background: #0b2016 !important;
}

html[data-intro-theme="dark"] .contact-submit-btn {
    background: linear-gradient(135deg, #007a4a, var(--intro-emerald)) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
}

html[data-intro-theme="dark"] .contact-submit-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px rgba(16, 185, 129, 0.45) !important;
}

/* ── Dark Mode: FAQ Section ── */
html[data-intro-theme="dark"] .faq-tab-btn {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    color: var(--intro-text) !important;
}

html[data-intro-theme="dark"] .faq-tab-btn:hover {
    border-color: var(--intro-emerald) !important;
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .faq-tab-btn.active {
    background: var(--intro-emerald) !important;
    border-color: var(--intro-emerald) !important;
    color: #061910 !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3) !important;
}

html[data-intro-theme="dark"] .faq-item {
    background: var(--intro-surface) !important;
    border: 2px solid var(--intro-border) !important;
    box-shadow: var(--intro-card-shadow) !important;
}

html[data-intro-theme="dark"] .faq-item.open {
    border-color: var(--intro-emerald) !important;
    border-inline-start: 6px solid var(--intro-emerald) !important;
    background: #102d20 !important;
}

html[data-intro-theme="dark"] .faq-question {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .faq-question-num {
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .faq-chevron i {
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .faq-answer p {
    color: var(--intro-text-muted) !important;
}

/* ── Dark Mode: Footer ── */
html[data-intro-theme="dark"] footer.site-footer {
    background: linear-gradient(180deg, #05140d 0%, #030c08 100%) !important;
    border-top: 3px solid var(--intro-emerald) !important;
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="dark"] .footer-journey {
    background: #091f15 !important;
    border: 2px solid rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
}

html[data-intro-theme="dark"] .footer-journey__eyebrow {
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .footer-journey h2 {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .footer-journey p {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="dark"] .footer-journey__icon {
    background: linear-gradient(135deg, #005936, var(--intro-emerald)) !important;
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .footer-journey__action {
    background: var(--intro-emerald) !important;
    color: #061910 !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.3) !important;
}

html[data-intro-theme="dark"] .footer-journey__action:hover {
    background: #ffffff !important;
    color: #061910 !important;
}

html[data-intro-theme="dark"] .footer-brand-copy strong,
html[data-intro-theme="dark"] .Tfooter,
html[data-intro-theme="dark"] .footer-about h3 {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .Tfooter::after {
    background: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .footer-about__text,
html[data-intro-theme="dark"] .footer-about__text p {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="dark"] .link-footer li a {
    color: var(--intro-text-muted) !important;
}

html[data-intro-theme="dark"] .link-footer li a:hover {
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .link-footer li i {
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .footer-column__number {
    color: rgba(16, 185, 129, 0.22) !important;
}

html[data-intro-theme="dark"] .footer-contact__item {
    color: var(--intro-text) !important;
}

html[data-intro-theme="dark"] .footer-contact__icon {
    background: var(--intro-surface) !important;
    border: 2px solid rgba(16, 185, 129, 0.28) !important;
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .footer-contact__item strong {
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .social-m li a {
    background: var(--intro-surface) !important;
    border: 2px solid rgba(16, 185, 129, 0.28) !important;
    color: #ffffff !important;
}

html[data-intro-theme="dark"] .social-m li a:hover {
    background: var(--intro-emerald) !important;
    border-color: var(--intro-emerald) !important;
    color: #061910 !important;
    transform: translateY(-3px);
}

html[data-intro-theme="dark"] .under_footer {
    background: #030a06 !important;
    border-top: 2px solid rgba(16, 185, 129, 0.16) !important;
    color: var(--intro-text-soft) !important;
}

html[data-intro-theme="dark"] .under_footer a {
    color: var(--intro-emerald) !important;
}

html[data-intro-theme="dark"] .mobile-footer-nav {
    background: rgba(7, 21, 14, 0.98) !important;
    border-top: 2px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.6) !important;
}

html[data-intro-theme="dark"] .mobile-footer-nav .footer-nav-item {
    color: rgba(255, 255, 255, 0.7) !important;
}

html[data-intro-theme="dark"] .mobile-footer-nav .footer-nav-item:hover,
html[data-intro-theme="dark"] .mobile-footer-nav .footer-nav-item.active {
    color: var(--intro-emerald) !important;
}

/* --------------------------------------------------------------------------
   6. UTILITY REFINEMENTS (Scroll-top, Scrollbar)
   -------------------------------------------------------------------------- */
.scroll-top-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 1.2rem !important;
    background: var(--intro-green-brand, #005936) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 89, 54, 0.3) !important;
    transition: all 0.3s ease !important;
}

html[data-intro-theme="dark"] .scroll-top-btn {
    background: var(--intro-emerald, #10b981) !important;
    color: #07150e !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
}

.scroll-top-btn:hover {
    transform: translateY(-4px) !important;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--intro-page-bg);
}

::-webkit-scrollbar-thumb {
    background: #005936;
    border-radius: 5px;
}

html[data-intro-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #10b981;
}