/* ========================================================================== RTL.CSS — loaded only when the active locale is right-to-left (Arabic) ========================================================================== style.css was converted to logical properties (margin-inline-start, inset-inline-end, text-align: start …), so the layout mirrors on its own once is set. Bootstrap is swapped for bootstrap.rtl.min.css in the layout. This file handles only what logical properties CANNOT express: 1. Icons that carry a physical direction (arrows) 2. Animations with a hard-coded axis (the marquee) 3. Text that must stay left-to-right inside an RTL page Do not add generic spacing rules here — if something needs mirroring, the fix belongs in style.css as a logical property. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DIRECTIONAL ICONS Every arrow is a Font Awesome fa-arrow-right, but they do NOT all start at the same angle, so they do not all mirror the same way. The card arrows carry a -45° base in style.css (they point up-and-right), so their mirror is -135°, up-and-left. The button icon has NO base rotation — it points straight right. Lumping it in with the others rotated it to up-and-left when it should simply point left, which is 180°. That was the ↖ arrow reported in the Arabic build. -------------------------------------------------------------------------- */ [dir="rtl"] .service__arrow i, [dir="rtl"] .blog-card__arrow i { transform: rotate(-135deg); } [dir="rtl"] .btn-icon i { transform: rotate(180deg); } /* The button's icon circle rotates on hover; mirror that too. */ [dir="rtl"] .btn-std:hover .btn-icon { transform: rotate(45deg); } /* Arrows that are NOT rotated in the base stylesheet simply flip. */ [dir="rtl"] .admin__back { display: inline-block; } /* The article back-arrow points at the news list, which sits the other way round in RTL — so both the glyph and its hover nudge invert. */ [dir="rtl"] .article__back i { transform: scaleX(-1); } /* The before/after connector points from the old state to the new one. The grid mirrors on its own, so only the glyph has to turn round. */ [dir="rtl"] .compare__arrow i { transform: scaleX(-1); } /* Stacked, the connector points down in both directions — rotate from the already-flipped glyph so it lands pointing down, not up. */ @media (max-width: 767.98px) { [dir="rtl"] .compare__arrow i { transform: none; } } [dir="rtl"] .article__back:hover { transform: translateX(3px); } /* The chevron on the services dropdown points down in both directions — its 180° hover flip is vertical, so it needs no change. */ /* -------------------------------------------------------------------------- 2. MARQUEE The track is duplicated and translated by -50% to loop seamlessly. In RTL the flex row starts at the right edge, so the travel direction inverts. -------------------------------------------------------------------------- */ @keyframes marqueeScrollRtl { from { transform: translateX(0); } to { transform: translateX(50%); } } [dir="rtl"] .marquee__track { animation-name: marqueeScrollRtl; } /* -------------------------------------------------------------------------- 3. LTR-LOCKED CONTENT Latin brand names, phone numbers, email addresses and years must not be re-ordered by the bidirectional algorithm. `direction: ltr` with `text-align: right` keeps them readable while staying visually anchored to the RTL flow. -------------------------------------------------------------------------- */ [dir="rtl"] .timeline__year, [dir="rtl"] .history__watermark, [dir="rtl"] .stat__num, [dir="rtl"] .skill__value, [dir="rtl"] .admin__locale, [dir="rtl"] .admin__agent { direction: ltr; unicode-bidi: isolate; } /* Contact details in the topbar and footer: keep "+971 566 88 3083" and the email address in logical order rather than letting bidi reverse them. */ [dir="rtl"] .topbar-list a[href^="tel:"], [dir="rtl"] .topbar-list a[href^="mailto:"], [dir="rtl"] .footer__contact a[href^="tel:"], [dir="rtl"] .footer__contact a[href^="mailto:"], [dir="rtl"] .footer__contact a[href^="http"], [dir="rtl"] .faq__meta { direction: ltr; unicode-bidi: isolate; text-align: right; } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY Poppins has no Arabic coverage, so Arabic text falls through to the system Arabic face. Nudge the line height up — Arabic script sits taller than Latin at the same size and the tight Latin leading crowds it. -------------------------------------------------------------------------- */ [dir="rtl"] body { font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Traditional Arabic', sans-serif; } [dir="rtl"] p, [dir="rtl"] .faq-item__a-inner p, [dir="rtl"] .legal__body p { line-height: 1.95; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: 'Segoe UI', Tahoma, 'Noto Naskh Arabic', 'Traditional Arabic', sans-serif; line-height: 1.45; } /* The section eyebrow uses wide letter-spacing, which breaks Arabic joining. */ [dir="rtl"] .section-label { letter-spacing: 0; } /* Uppercase has no meaning in Arabic and the marquee relies on it. */ [dir="rtl"] .marquee__item, [dir="rtl"] .admin__table th { text-transform: none; letter-spacing: 0; }