/* ═══════════════════════════════════════════════════════════════
   HDT — Arabic RTL Stylesheet  |  dist/style-ar.css

   LOAD ORDER IN <head> (critical):
     1. Google Fonts (Noto Kufi Arabic)
     2. Font Awesome CSS       ← MUST be before this file
     3. dist/style.css
     4. dist/lang-switcher.css
     5. dist/style-ar.css      ← this file
   Then in <body>: <style> inline FA guard

   THE GOLDEN RULE: Never use html[lang="ar"] * { font-family }
   That * selector kills Font Awesome icons.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   1. DIRECTION & BASE
══════════════════════════════════════════ */

html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Kufi Arabic', sans-serif;
}

/* ══════════════════════════════════════════
   2. FONT — target text elements ONLY, never *
══════════════════════════════════════════ */

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] span:not([class^="fa"]):not([class*=" fa-"]),
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button:not(.lang-trigger):not(.drawer-close-btn):not(#mobileMenuBtn),
html[lang="ar"] div:not([class^="fa"]):not([class*=" fa-"]) {
    font-family: 'Noto Kufi Arabic', sans-serif;
    letter-spacing: 0 !important;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
    text-align: right;
    line-height: 1.3;
}

html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] label {
    text-align: right;
    line-height: 2;
}

/* ══════════════════════════════════════════
   3. FONT AWESOME — PROTECT ICONS (critical)
══════════════════════════════════════════ */

html[lang="ar"] i[class*="fa-"],
html[lang="ar"] .fa,
html[lang="ar"] .fas,
html[lang="ar"] .far,
html[lang="ar"] .fab,
html[lang="ar"] .fal,
html[lang="ar"] .fad,
html[lang="ar"] [class^="fa-"],
html[lang="ar"] [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Solid", FontAwesome !important;
    letter-spacing: normal !important;
}


html[lang="ar"] .uppercase,
html[lang="ar"] [style*="text-transform:uppercase"],
html[lang="ar"] [style*="text-transform: uppercase"] {
    text-transform: none !important;
}

html[lang="ar"] .tracking-widest,
html[lang="ar"] .tracking-wider,
html[lang="ar"] .tracking-wide,
html[lang="ar"] [style*="letter-spacing"] {
    letter-spacing: 0 !important;
}




html[lang="ar"] #header .hidden.lg\:flex.items-center.gap-3 {
    flex-direction: row-reverse;
}

html[lang="ar"] .nav-link.active::after {
    left: auto;
    right: 0;
}

/* Language dropdown opens to the LEFT on RTL */
html[lang="ar"] .lang-dropdown {
    right: auto !important;
    left: 0 !important;
    transform-origin: top left !important;
}

/* ── Mobile Drawer — slides in from right ── */
html[lang="ar"] #mobileDrawer {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

html[lang="ar"] #mobileDrawer.open {
    transform: translateX(0);
}



html[lang="ar"] .drawer-nav-link {
    text-align: right;
    border-left: none !important;
    border-right: 3px solid transparent;
}

html[lang="ar"] .drawer-nav-link:hover {
    border-right-color: var(--brand-border2) !important;
    padding-right: 32px !important;
    padding-left: 28px !important;
}

html[lang="ar"] .drawer-nav-link.active {
    border-right-color: var(--brand) !important;
}

html[lang="ar"] .drawer-nav-link .link-arrow {
    transform: rotate(180deg);
}

html[lang="ar"] .drawer-nav-link {
    opacity: 0;
    transform: translateX(16px);
}

html[lang="ar"] #mobileDrawer.open .drawer-nav-link {
    opacity: 1;
    transform: translateX(0);
}

html[lang="ar"] .drawer-footer {
    text-align: right;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s .3s, transform .3s .3s;
}

html[lang="ar"] #mobileDrawer.open .drawer-footer {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════
   6. HERO SECTION
══════════════════════════════════════════ */

html[lang="ar"] .hero-inner {
    direction: rtl;
}

html[lang="ar"] .hero-left {
    text-align: right;
}

html[lang="ar"] .hero-h1 .h1-white,
html[lang="ar"] .hero-h1 .h1-blue,
html[lang="ar"] .hero-h1 .h1-dim {
    display: block;
    text-align: right;
}

html[lang="ar"] .hero-desc {
    padding-left: 0;
    padding-right: 18px;
    border-left: none;
    border-right: 2px solid rgba(45,53,119,.7);
    text-align: right;
}





html[lang="ar"] .hero-stats .stat-item {
    align-items: flex-end;
    text-align: right;
    padding-right: 0;
    padding-left: 28px;
}

html[lang="ar"] .hero-stats .stat-item.has-divider {
    border-left: none;
    border-right: 1px solid rgba(255,255,255,.1);
    padding-left: 28px;
    padding-right: 0;
}

html[lang="ar"] .hero-corner.tl {
    border-left: none;
    border-right: 1px solid rgba(45,53,119,.5);
    left: auto;
    right: 28px;
}

html[lang="ar"] .hero-corner.br {
    border-right: none;
    border-left: 1px solid rgba(45,53,119,.5);
    right: auto;
    left: 28px;
}

/* Cap panel */
html[lang="ar"] .cap-panel-head {
    flex-direction: row-reverse;
}

html[lang="ar"] .cap-row {
    flex-direction: row-reverse;
    text-align: right;
}

html[lang="ar"] .cap-title,
html[lang="ar"] .cap-desc {
    text-align: right;
}

html[lang="ar"] .cap-foot-bar-l {
    background: linear-gradient(to left, rgba(45,53,119,.55), transparent);
}

html[lang="ar"] .cap-foot-bar-r {
    background: linear-gradient(to right, rgba(45,53,119,.55), transparent);
}

/* ══════════════════════════════════════════
   7. EYEBROW / SECTION LABELS
══════════════════════════════════════════ */



html[lang="ar"] .section-label {
    flex-direction: row-reverse;
}

html[lang="ar"] .section-label::after {
    background: linear-gradient(270deg, var(--brand-border2), transparent);
}

/* ══════════════════════════════════════════
   8. MARQUEE — keep LTR (Latin terms)
══════════════════════════════════════════ */

html[lang="ar"] .marquee-band-inner,
html[lang="ar"] .animate-marquee {
    direction: ltr !important;
}

/* ══════════════════════════════════════════
   9. IMAGE LABELS
══════════════════════════════════════════ */

html[lang="ar"] .platform-img .img-label,
html[lang="ar"] .about-hero-img .img-label,
html[lang="ar"] .services-hero-img .img-label,
html[lang="ar"] .card-hero-num,
html[lang="ar"] .card-img-num,
html[lang="ar"] .image-caption,
html[lang="ar"] .intro-img-badge {
    left: auto !important;
    right: 14px !important;
    text-align: right;
}

/* ══════════════════════════════════════════
   10. MINI STATS
══════════════════════════════════════════ */

html[lang="ar"] .mini-stat {
    text-align: right;
    border-top: none;
    border-right: 3px solid var(--brand);
    border-left: none;
}

/* ══════════════════════════════════════════
   11. CELL LINKS (home bottom 3)
══════════════════════════════════════════ */

html[lang="ar"] .cell-body {
    text-align: right;
}

html[lang="ar"] .cell-num {
    right: auto;
    left: 32px;
}

html[lang="ar"] .cell-arrow {
    right: auto !important;
    left: 36px !important;
    transform: rotate(180deg) translateX(-8px);
}

html[lang="ar"] .cell-link:hover .cell-arrow {
    transform: rotate(180deg) translateX(0);
}

/* ══════════════════════════════════════════
   12. PILLAR ROWS (about)
══════════════════════════════════════════ */

html[lang="ar"] .pillar-row {
    text-align: right;
}

html[lang="ar"] .pillar-row:hover {
    padding-left: 0 !important;
    padding-right: 8px !important;
}

/* ══════════════════════════════════════════
   13. BAND / FEATURE COLUMNS
══════════════════════════════════════════ */

html[lang="ar"] .band-col,
html[lang="ar"] .alt-band-col {
    text-align: right;
}

html[lang="ar"] .band-col::after,
html[lang="ar"] .alt-band-col::after {
    left: auto;
    right: 0;
}

/* ══════════════════════════════════════════
   14. SERVICE CARDS
══════════════════════════════════════════ */

html[lang="ar"] .service-card::before {
    left: auto;
    right: 0;
    transform-origin: top;
}

html[lang="ar"] .card-hero-num {
    left: auto !important;
    right: 16px !important;
}

html[lang="ar"] .service-card li {
    text-align: right;
}

html[lang="ar"] .engage-card,
html[lang="ar"] .engage-card .p-7 {
    text-align: right;
}

/* ══════════════════════════════════════════
   15. STRATEGIC FOCUS
══════════════════════════════════════════ */

html[lang="ar"] .focus-row {
    border-left: none !important;
    border-right: 3px solid transparent;
}

html[lang="ar"] .focus-row::before {
    left: auto;
    right: 0;
}

html[lang="ar"] .focus-row:hover {
    border-right-color: var(--brand-border2) !important;
}

html[lang="ar"] .focus-row.active {
    border-right-color: var(--brand) !important;
}

html[lang="ar"] .focus-row .flex {
    flex-direction: row-reverse;
}

html[lang="ar"] .row-arrow {
    transform: rotate(180deg);
}

html[lang="ar"] .detail-content {
    direction: rtl;
}

@media (min-width: 1024px) {
    html[lang="ar"] .detail-content .panel-text-col { order: 2; }
    html[lang="ar"] .detail-content .panel-img-col  { order: 1; }
}

html[lang="ar"] .detail-content .panel-text-col,
html[lang="ar"] .detail-content .panel-img-col {
    text-align: right;
}

html[lang="ar"] .image-caption {
    left: auto !important;
    right: 14px !important;
}

html[lang="ar"] .panel-glow {
    right: auto;
    left: -60px;
}

html[lang="ar"] .positioning-card {
    text-align: right;
}



html[lang="ar"] .detail-content .flex.justify-between {
    flex-direction: row-reverse;
}

html[lang="ar"] .deco-grid {
    right: auto;
    left: 0;
}

html[lang="ar"] .stat-chip {
    text-align: right;
}

/* ══════════════════════════════════════════
   16. WHY HDT CARDS
══════════════════════════════════════════ */

html[lang="ar"] .reason-card .card-content {
    text-align: right;
}



html[lang="ar"] .faded-number {
    right: auto;
    left: -10px;
}

html[lang="ar"] .card-img-num {
    left: auto !important;
    right: 14px !important;
}

html[lang="ar"] .intro-img-badge {
    left: auto;
    right: 16px;
}

/* ══════════════════════════════════════════
   17. MISSION / ABOUT CARD
══════════════════════════════════════════ */

html[lang="ar"] .mission-card {
    text-align: right;
}

html[lang="ar"] .mission-quote-mark {
    left: auto;
    right: 20px;
}

/* ══════════════════════════════════════════
   18. CONTACT PAGE
══════════════════════════════════════════ */



html[lang="ar"] .contact-row:hover {
    padding-left: 0 !important;
    padding-right: 6px !important;
}

html[lang="ar"] .form-label {
    text-align: right;
}

html[lang="ar"] .hdt-input {
    text-align: right;
    direction: rtl;
}

html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"] {
    text-align: left;
    direction: ltr;
}

html[lang="ar"] .consent-box + p {
    text-align: right;
}

html[lang="ar"] .form-success {
    direction: rtl;
}

/* ══════════════════════════════════════════
   19. BUTTONS
══════════════════════════════════════════ */

html[lang="ar"] .btn-primary,
html[lang="ar"] .btn-ghost {
    flex-direction: row-reverse;
}

html[lang="ar"] .btn-primary i,
html[lang="ar"] .btn-ghost i {
    margin-left: 8px;
    margin-right: 0;
}

/* ══════════════════════════════════════════
   20. MARKET / ENGAGE CARDS
══════════════════════════════════════════ */

html[lang="ar"] .market-card {
    text-align: right;
}

/* ══════════════════════════════════════════
   21. FOOTER
══════════════════════════════════════════ */

html[lang="ar"] #footer {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] #footer li a {
    justify-content: flex-start;
}

html[lang="ar"] #footer .flex.flex-col.md\:flex-row {
    flex-direction: row-reverse;
}

html[lang="ar"] #footer .flex.items-center.justify-between {
    flex-direction: row-reverse;
}

/* ══════════════════════════════════════════
   22. TAG PILLS & MISC
══════════════════════════════════════════ */

html[lang="ar"] .tag-pill {
    text-align: center;
}

html[lang="ar"] .contact-cta-card {
    text-align: center;
}
