/* ===================================================================== RTL overrides — loaded only when (Arabic). The shell + solution CSS already use logical properties where possible; this file fixes the bundled LTR styles that use physical left/right. ===================================================================== */ [dir="rtl"] body, [dir="rtl"] .nav-link, [dir="rtl"] .btn, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button { font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; } /* Headings keep a strong Arabic face too */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: 'IBM Plex Sans Arabic', 'Space Grotesk', sans-serif; } /* General text flows right */ [dir="rtl"] .hero-content, [dir="rtl"] .hero-subtitle, [dir="rtl"] .contact-info, [dir="rtl"] .sol-hero-inner, [dir="rtl"] .proj-slide-info, [dir="rtl"] .feature-card-body, [dir="rtl"] .service-card-body, [dir="rtl"] .ecosystem-tier { text-align: right; } /* Section headers stay centered (already center in LTR) */ [dir="rtl"] .section-header { text-align: center; } /* Forms: labels + inputs align right */ [dir="rtl"] .form-group { text-align: right; } [dir="rtl"] .contact-form input, [dir="rtl"] .contact-form textarea { text-align: right; } /* Lists: bullets/padding on the correct side */ [dir="rtl"] .proj-impact ul, [dir="rtl"] ul { padding-right: 1.1rem; padding-left: 0; } /* Hero buttons + actions: start from the right */ [dir="rtl"] .hero-buttons, [dir="rtl"] .sol-hero-actions { justify-content: flex-start; } /* Service/feature cards: keep grid auto-mirrored; nudge tags */ [dir="rtl"] .service-card-tag, [dir="rtl"] .proj-tag { letter-spacing: 0; } /* Footer columns align right */ [dir="rtl"] .footer-col, [dir="rtl"] .footer-brand { text-align: right; } [dir="rtl"] .footer-col ul { padding-right: 0; } /* Contact detail icons sit to the right of text */ [dir="rtl"] .contact-detail { flex-direction: row-reverse; } /* Mega/dropdown already use inset-inline-start (logical) — no flip needed. Caret + arrows that point "forward" should mirror. */ [dir="rtl"] .btn-ai-arrow, [dir="rtl"] .proj-view svg { transform: scaleX(-1); } /* Old → new "shift" arrow points forward; mirror it in RTL so it leads from the old-way card (now on the right) toward the with-[Solution] card (now on the left). Desktop side-by-side only — on mobile the wrapper is rotated 90° to point down, which already reads correctly in both directions. */ @media (min-width: 861px) { [dir="rtl"] .sol-shift-arrow svg { transform: scaleX(-1); } } /* Lang toggle + actions spacing already gap-based — fine in RTL. */ /* Scroll progress bar grows from the right */ [dir="rtl"] .scroll-progress { right: 0; left: auto; transform-origin: right; } /* ---- Arabic line spacing ------------------------------------------- Arabic script (taller ascenders/descenders + diacritics) reads cramped at the Latin-tuned line-heights. Loosen it across body, paragraphs, headings, and lists — only in the RTL view. */ [dir="rtl"] body { line-height: 1.9; } [dir="rtl"] p, [dir="rtl"] .hero-subtitle, [dir="rtl"] .sol-hero-sub, [dir="rtl"] .service-card-body p, [dir="rtl"] .feature-card-body p, [dir="rtl"] .ecosystem-tier p, [dir="rtl"] .proj-desc, [dir="rtl"] .sol-value-card p, [dir="rtl"] .sol-step p, [dir="rtl"] .contact-info p { line-height: 2.05; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.5; } [dir="rtl"] .sol-hero-h1 { line-height: 1.35; } [dir="rtl"] li, [dir="rtl"] .proj-impact li { line-height: 1.95; margin-bottom: .35rem; } [dir="rtl"] .vx-mega-desc { line-height: 1.7; } [dir="rtl"] .footer-col li { line-height: 2; }