/* ========================================================================== ESNAD — RTL overrides for Arabic (/ar/) Load this AFTER style.css, only on RTL pages, together with . Most directional spacing already uses logical properties (margin-inline, inset-inline-*) in style.css, so this file only handles the exceptions: text alignment, transforms, and font-family swaps. ========================================================================== */ body { direction: rtl; text-align: right; } /* Font families — placeholder system stacks; swap for real webfonts later. Arabic and Urdu render best with dedicated typefaces (e.g. Cairo/Tajawal for Arabic, Noto Nastaliq Urdu / Jameel Noori for Urdu). Drop files in /assets/fonts/ and define @font-face, then update these vars. */ :root { --font-base: "Segoe UI", "Tahoma", system-ui, sans-serif; --font-heading: "Segoe UI", "Tahoma", system-ui, sans-serif; } /* Hero: mirror the two-column layout so text stays on the reading side */ .hero__inner { direction: rtl; } /* Footer bottom row keeps its space-between but mirrors naturally via flex. Icon+text contact rows: flex already flips with direction:rtl. */ /* Elements that use physical transforms need mirroring */ .card:hover { transform: translateY(-4px); } /* unchanged, vertical only */ /* WhatsApp pulse ring uses scale only — safe in RTL, no change needed. */ /* Any decorative gradients anchored to a physical corner can be mirrored here if needed; the hero radial gradients are symmetric enough to leave. */ /* Lists / bullets that used physical padding-left should use padding-inline; add fixes here if a specific component still uses left/right. */ /* Language switcher menu already uses inset-inline-end, so it aligns correctly under the toggle in RTL automatically. */