body {
            font-family: 'Cairo', sans-serif;
            background-color: #0B1120 !important;
            color: #F8FAFC !important;
            scroll-behavior: smooth;
        }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #0B1120 !important; }
        ::-webkit-scrollbar-thumb { background: #FF7E14 !important; border-radius: 5px; }

        .hero-bg {
            background: radial-gradient(circle at top left, rgba(255, 126, 20, 0.12), transparent 40%) !important,
                        radial-gradient(circle at bottom right, rgba(11, 17, 32, 1), transparent 40%) !important;
        }

        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover {
            transform: translateY(-5px) !important;
            box-shadow: 0 10px 30px -10px rgba(255, 126, 20, 0.12) !important;
            border-color: #FF7E14 !important;
        }

        /* Form / contact area (harmonized with dark theme) */
        .right-side {
            flex: 1;
            background: linear-gradient(180deg, rgba(22,32,50,0.95), rgba(11,17,32,0.95)) !important;
            padding: 28px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.04);
            display: flex;
            flex-direction: column;
            gap: 12px;
            color: #E6EEF8 !important;
            min-width: 280px;
            max-width: 640px;
            margin: 0 auto;
        }

        .section-title {
            font-size: 14px;
            font-weight: 700;
            color: #E6EEF8 !important;
            margin-bottom: 8px;
            width: 100%;
        }

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

        .form-input,
        .country-select,
        .coupon-input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            font-size: 14px;
            background: rgba(255,255,255,0.02) !important;
            color: #E6EEF8 !important;
            direction: ltr !important;
            text-align: left !important;
        }

        .form-input::placeholder { color: rgba(230,238,248,0.45) !important; }

        .form-input:focus,
        .country-select:focus {
            outline: none;
            border-color: #FF7E14;
            box-shadow: 0 6px 20px rgba(255,126,20,0.06) !important;
        }

        /* Radios (single choice) */
        .form-radio {
            width: 18px;
            height: 18px;
            accent-color: #FF7E14 !important;
            -webkit-appearance: radio;
        }

        /* ---------- IMPORTANT: Position radio absolutely to the right ---------- */
        .project-options {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .project-options label {
            position: relative;           /* container for absolute radio */
            padding: 8px 44px 8px 12px;  /* space on the right for radio (44px) */
            border-radius: 8px;
            cursor: pointer;
            color: #E6EEF8 !important;
            display: block;
            text-align: right;           /* keep text right-aligned */
        }

        .project-options label:hover {
            background: rgba(255,255,255,0.02) !important;
        }

        .project-options label span {
            display: inline-block;
            width: calc(100% - 44px);    /* leave room for radio on the right */
            text-align: right;
        }

        .project-options input[type="radio"] {
            position: absolute;
            right: 12px;                 /* place radio at right edge inside label */
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
        }

        /* optional focus-visible for keyboard users */
        .project-options input[type="radio"]:focus-visible {
            outline: 2px solid rgba(255,126,20,0.25);
            outline-offset: 2px;
            border-radius: 50%;
        }

        .yellow-cta {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 10px;
            background: linear-gradient(90deg,#FF7E14,#E66A0A) !important;
            color: #081023 !important;
            font-weight: 900;
            font-size: 15px;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            margin-top: 6px;
        }
        .yellow-cta:hover { transform: translateY(-3px) !important; box-shadow: 0 16px 40px rgba(230,106,10,0.18) !important; }

        .form-note { font-size: 13px; color: rgba(230,238,248,0.6) !important; text-align: center; }

        /* Logo sizing helper (keeps image crisp and responsive) */
        .site-logo {
        height: 110px;    /* default / desktop */
        width: auto;
        max-width: 280px; /* prevent it from getting too wide on small desktop windows */
        object-fit: contain;
        }
        @media (min-width: 768px) {
        .site-logo { height: 140px; max-width: 320px; }
        }
        @media (min-width: 1024px) {
        .site-logo { height: 180px; max-width: 380px; }
        }
        @media (max-width: 480px) {
        .site-logo { height: 64px; max-width: 200px; }
        }
        @media (max-width: 360px) {
        .site-logo { height: 56px; max-width: 180px; }
        }
        /* small visibility/behavior fixes */
        button:focus { outline: none; box-shadow: none; }
/* === ALFORSA QUICK OVERRIDES (append to custom.css) === */

/* Force hero two-column layout & correct ordering on desktop */
@media (min-width:1024px) {
  .al-forsa-root #home .max-w-7xl > .grid,
  .al-forsa-root #home .max-w-7xl .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    align-items: center !important;
  }

  /* ensure the left/text block is first and mockup second */
  .al-forsa-root #home .max-w-7xl .grid > .text-center { grid-column: 1 !important; order: 1 !important; }
  .al-forsa-root #home .max-w-7xl .grid > .relative     { grid-column: 2 !important; order: 2 !important; }
}

/* Force CTA (اطلب عرض ثمن / any .al-forsa-cta) color exactly like original */
.al-forsa-root .al-forsa-cta,
.al-forsa-root a.al-forsa-cta {
  background: linear-gradient(90deg,#FF7E14,#E66A0A) !important;
  color: #081023 !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 40px rgba(230,106,10,0.18) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

/* Offset fixed nav when admin bar visible */
body.admin-bar .al-forsa-root nav.fixed,
body.admin-bar .al-forsa-root .fixed {
  top: 32px !important;
}

/* Ensure site-logo sizing inside this template */
.al-forsa-root .site-logo { height: 110px !important; max-width: 280px !important; }

/* Make sure the hero maintains RTL direction inside wrapper */
.al-forsa-root #home .grid,
.al-forsa-root #home .flex {
  direction: rtl !important;
}
/* ===== Quick overrides to restore orange colors & icon colors (append to custom.css) ===== */

/* Force the CTA color exactly like the original */
.al-forsa-root .al-forsa-cta,
.al-forsa-root a.al-forsa-cta,
.al-forsa-root .al-forsa-cta:hover {
  background: linear-gradient(90deg, #FF7E14, #E66A0A) !important;
  color: #081023 !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 40px rgba(230,106,10,0.18) !important;
}

/* Make small orange badge/labels and text-brand-orange use the correct color */
.al-forsa-root .text-brand-orange,
.al-forsa-root .text-brand-orange * {
  color: #FF7E14 !important;
  fill: #FF7E14 !important;
  stroke: #FF7E14 !important;
}

/* Specific: footer links / badges that should be orange */
.al-forsa-root footer .text-brand-orange,
.al-forsa-root footer .bg-brand-orange,
.al-forsa-root footer a:hover {
  color: #FF7E14 !important;
  background-color: transparent !important;
}

/* Lucide icons (SVGs): ensure they inherit the correct color when inside .text-brand-orange or .al-forsa-root areas */
.al-forsa-root svg,
.al-forsa-root [data-lucide],
.al-forsa-root [data-lucide] * {
  color: inherit !important;       /* lets color: #FF7E14 propagate */
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* If you want only icons inside .text-brand-orange to be orange (safer) */
.al-forsa-root .text-brand-orange svg,
.al-forsa-root .text-brand-orange [data-lucide],
.al-forsa-root .text-brand-orange [data-lucide] * {
  color: #FF7E14 !important;
  fill: #FF7E14 !important;
  stroke: #FF7E14 !important;
}

/* Some HelloElementor theme rules may target buttons with very specific selectors.
   Use a highly-specific selector for the nav CTA if needed. */
.al-forsa-root nav a.al-forsa-cta,
.al-forsa-root nav .al-forsa-cta {
  background: linear-gradient(90deg, #FF7E14, #E66A0A) !important;
  color: #081023 !important;
}

/* Keep fixed nav offset for admin-bar (logged in) */
body.admin-bar .al-forsa-root nav.fixed,
body.admin-bar .al-forsa-root .fixed {
  top: 32px !important;
}
/* ===== Al Forsa: Forced color overrides (append to custom.css) =====
   Scope: .al-forsa-root wrapper required around page content. */

.al-forsa-root {
  --af-orange: #FF7E14 !important;
  --af-orange-2: #E66A0A !important;
  --af-orange-text: #081023 !important; /* dark text on orange buttons */
}

/* Make sure utilities and text classes that reference text-brand-orange are enforced */
.al-forsa-root .text-brand-orange,
.al-forsa-root .text-brand-orange * {
  color: var(--af-orange) !important;
  fill: var(--af-orange) !important;
  stroke: var(--af-orange) !important;
}

/* Force background-brand-orange variants (buttons, badges) */
.al-forsa-root .bg-brand-orange,
.al-forsa-root .bg-brand-orange * {
  background: linear-gradient(90deg, var(--af-orange), var(--af-orange-2)) !important;
  background-color: var(--af-orange) !important;
  color: var(--af-orange-text) !important;
  fill: var(--af-orange) !important;
  stroke: var(--af-orange) !important;
}

/* Primary CTA (nav and hero CTA). Use .al-forsa-cta class on CTA anchors/buttons in template */
.al-forsa-root .al-forsa-cta,
.al-forsa-root a.al-forsa-cta,
.al-forsa-root .al-forsa-cta:hover,
.al-forsa-root a.al-forsa-cta:hover,
.al-forsa-root .yellow-cta,
.al-forsa-root .yellow-cta:hover {
  background: linear-gradient(90deg, var(--af-orange), var(--af-orange-2)) !important;
  color: var(--af-orange-text) !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 40px rgba(230,106,10,0.18) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

/* If the parent theme targets nav CTA with more specific selectors,
   include a more specific override for nav anchors inside our wrapper. */
.al-forsa-root nav a.al-forsa-cta,
.al-forsa-root nav .al-forsa-cta {
  background: linear-gradient(90deg, var(--af-orange), var(--af-orange-2)) !important;
  color: var(--af-orange-text) !important;
}

/* Force small orange badges and icons (e.g., .text-brand-orange inside cards/footer) */
.al-forsa-root .badge,
.al-forsa-root .label,
.al-forsa-root .text-brand-orange,
.al-forsa-root .text-brand-orange * {
  color: var(--af-orange) !important;
  fill: var(--af-orange) !important;
  stroke: var(--af-orange) !important;
}

/* SVG icons (Lucide) should inherit currentColor. Force inherit and allow overrides above. */
.al-forsa-root svg,
.al-forsa-root [data-lucide],
.al-forsa-root [data-lucide] * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Make icons that are inside text-brand-orange elements orange */
.al-forsa-root .text-brand-orange svg,
.al-forsa-root .text-brand-orange [data-lucide],
.al-forsa-root .text-brand-orange [data-lucide] * {
  color: var(--af-orange) !important;
  fill: var(--af-orange) !important;
  stroke: var(--af-orange) !important;
}

/* Border + focus accents */
.al-forsa-root .form-input:focus,
.al-forsa-root .country-select:focus,
.al-forsa-root .form-input:focus-visible {
  border-color: var(--af-orange) !important;
  box-shadow: 0 6px 20px rgba(255,126,20,0.06) !important;
}

/* Hover border for card-hover */
.al-forsa-root .card-hover:hover {
  border-color: var(--af-orange) !important;
  box-shadow: 0 10px 30px -10px rgba(255,126,20,0.12) !important;
}

/* Small CTA text inside footer or badges */
.al-forsa-root footer .text-brand-orange,
.al-forsa-root footer .text-brand-orange * {
  color: var(--af-orange) !important;
  fill: var(--af-orange) !important;
  stroke: var(--af-orange) !important;
}

/* Ensure fixed nav offset when WP admin bar visible (logged-in) */
body.admin-bar .al-forsa-root nav.fixed,
body.admin-bar .al-forsa-root .fixed {
  top: 32px !important;
}

/* As a fallback, force background color on elements which notoriously get overridden */
.al-forsa-root .bg-brand-orange,
.al-forsa-root .bg-brand-orange:hover,
.al-forsa-root .bg-brand-orange:focus {
  background-image: linear-gradient(90deg, var(--af-orange), var(--af-orange-2)) !important;
  background-color: var(--af-orange) !important;
  color: var(--af-orange-text) !important;
}

/* Small utility to reassert color on anchor text inside important containers */
.al-forsa-root a,
.al-forsa-root a * {
  color: inherit !important;
}
/* Append this to wp-content/themes/al-forsa-child/custom.css */

.al-forsa-root { --af-orange: #FF7E14; --af-orange-2: #E66A0A; --af-orange-text: #081023; }

/* Force CTA color & look (use .al-forsa-cta on CTAs) */
.al-forsa-root .al-forsa-cta,
.al-forsa-root a.al-forsa-cta {
  background: linear-gradient(90deg, var(--af-orange), var(--af-orange-2)) !important;
  color: var(--af-orange-text) !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 40px rgba(230,106,10,0.18) !important;
}

/* Small badges / icons using text-brand-orange */
.al-forsa-root .text-brand-orange,
.al-forsa-root .text-brand-orange * {
  color: var(--af-orange) !important;
  fill: var(--af-orange) !important;
  stroke: var(--af-orange) !important;
}

/* Ensure lucide SVGs inherit currentColor */
.al-forsa-root svg,
.al-forsa-root [data-lucide],
.al-forsa-root [data-lucide] * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Force hero two-column order on desktop (fixes swapped elements) */
@media (min-width:1024px) {
  .al-forsa-root #home .max-w-7xl .grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    align-items: center !important;
  }
  .al-forsa-root #home .max-w-7xl .grid > .text-center { grid-column:1 !important; order:1 !important; }
  .al-forsa-root #home .max-w-7xl .grid > .relative     { grid-column:2 !important; order:2 !important; }
}
/* NAV ordering fixes (append to custom.css) */
.al-forsa-root .al-forsa-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row !important; /* force row, don't let rtl utilities reverse it */
}

/* Order elements: brand, links, CTA on medium+ screens */
@media (min-width: 768px) {
  .al-forsa-root .nav-brand { order: 1; }
  .al-forsa-root .nav-links { order: 2; }
  .al-forsa-root .nav-cta   { order: 3; }
}

/* Keep nav-links readable directionally but don't reverse placement */
.al-forsa-root .nav-links { direction: ltr; } /* keeps link order as written */
.al-forsa-root .nav-links a { direction: rtl; } /* keeps Arabic text right-to-left inside the link */

/* Small spacing adjustments (optional) */
.al-forsa-root .nav-links .space-x-4 > * + * { margin-left: 1rem !important; margin-right: 0 !important; }

/* Ensure CTA uses the enforced brand style */
.al-forsa-root .al-forsa-cta {
  background: linear-gradient(90deg, #FF7E14, #E66A0A) !important;
  color: #081023 !important;
}
/* FIX: force nav items to keep the HTML order (logo, الرئيسية, كيف نشتغل, خدماتنا, أسئلة شائعة, CTA) */

/* Ensure the nav row uses normal row direction */
.al-forsa-root .al-forsa-nav-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important; /* prevent utilities or RTL flip from reversing the row */
}

/* Ensure nav-links group displays items left → right (DOM order)
   but keep the Arabic inside each link rtl for correct text rendering */
.al-forsa-root .nav-links {
  display: flex !important;
  gap: 1rem !important;   /* safer than space-x-reverse */
  direction: ltr !important; /* keeps children in DOM order visually L→R */
}
.al-forsa-root .nav-links a {
  direction: rtl !important; /* preserves Arabic reading inside each anchor */
  white-space: nowrap;
}

/* Make sure the order on medium+ screens is: brand (1) → links (2) → CTA (3) */
@media (min-width: 768px) {
  .al-forsa-root .nav-brand { order: 1 !important; }
  .al-forsa-root .nav-links { order: 2 !important; }
  .al-forsa-root .nav-cta   { order: 3 !important; }
}

/* If your theme uses space-x-reverse utilities, prevent them from flipping spacing */
.al-forsa-root .nav-links .space-x-reverse > * + * { margin-left: 0 !important; margin-right: 0 !important; }

/* Optional: small visual polish */
.al-forsa-root .nav-links a { padding: .5rem .75rem; }
.al-forsa-root .nav-links .active,
.al-forsa-root .nav-links a:hover { color: #FF7E14 !important; }
/* End of forced overrides */