/* ========================================================= English (LTR) overrides — applied when . The base design is authored RTL; these flip direction and alignment so the English copy reads naturally left-to-right. ========================================================= */ /* Use Poetsen One for ALL text, not just headings (per request). This file loads after every section stylesheet, so this overrides their hard-coded Tajawal roots. Arabic keeps falling back to Tajawal (Poetsen One is Latin-only). */ .nav, .hero, .stats, .article, .gallery, .whyus, .howitworks, .pricing, .program, .faq, .contact, .location, .footer, .contact__input, .contact__submit, .pricing__cta, .nav__cta, .btn { font-family: var(--font); } /* flip sections that hard-code RTL */ html[dir="ltr"] .article, html[dir="ltr"] .gallery, html[dir="ltr"] .whyus, html[dir="ltr"] .howitworks, html[dir="ltr"] .pricing, html[dir="ltr"] .faq, html[dir="ltr"] .contact, html[dir="ltr"] .footer { direction: ltr; } /* neutralise inline dir="rtl" text nodes and right alignment */ html[dir="ltr"] [dir="rtl"] { direction: ltr; } /* ---- hero ---- */ html[dir="ltr"] .hero__sub { text-align: left; } /* ---- article ---- */ html[dir="ltr"] .article__eyebrow, html[dir="ltr"] .article__heading { text-align: center; } html[dir="ltr"] .article__facts-title, html[dir="ltr"] .article__lead, html[dir="ltr"] .article__para, html[dir="ltr"] .article__text { text-align: left; } html[dir="ltr"] .article__fact { align-items: flex-start; text-align: left; } html[dir="ltr"] .article__fact-num, html[dir="ltr"] .article__fact-label { text-align: left; } /* ---- whyus ---- */ html[dir="ltr"] .whyus-card { align-items: flex-start; } html[dir="ltr"] .whyus-card__title, html[dir="ltr"] .whyus-card__desc { text-align: left; } /* ---- pricing ---- */ /* keep the mirrored order in English too (desktop only): tournament (dark, featured) card on the left, starter on the right — matches the badge. Gated to ≥901px so it never overrides the mobile column-stacking rule. */ @media (min-width: 901px) { html[dir="ltr"] .pricing__cards { flex-direction: row-reverse; } } html[dir="ltr"] .pricing__card { align-items: flex-start; } html[dir="ltr"] .pricing__card-eyebrow, html[dir="ltr"] .pricing__price, html[dir="ltr"] .pricing__note, html[dir="ltr"] .pricing__desc { text-align: left; } html[dir="ltr"] .pricing__list { align-items: flex-start; } html[dir="ltr"] .pricing__feat { flex-direction: row-reverse; } html[dir="ltr"] .pricing__feat-text { text-align: left; } html[dir="ltr"] .pricing__badge { inset-inline-end: auto; inset-inline-start: 34px; } /* show "SAR" instead of the Arabic ﷼ glyph in English */ html[dir="ltr"] .pricing__riyal { display: none; } html[dir="ltr"] .pricing__price:has(.pricing__riyal)::after { content: "SAR"; margin-inline-start: 0; font-size: 0.72em; font-weight: 700; vertical-align: baseline; } /* ---- program ---- */ html[dir="ltr"] .program__outcomes { align-items: flex-start; } html[dir="ltr"] .program__outcomes-title { text-align: left; } html[dir="ltr"] .program__out { flex-direction: row-reverse; } html[dir="ltr"] .program__out p { text-align: left; } /* ---- faq ---- */ html[dir="ltr"] .faq__q, html[dir="ltr"] .faq__answer { text-align: left; } /* ---- contact ---- */ html[dir="ltr"] .contact__copy, html[dir="ltr"] .contact__title, html[dir="ltr"] .contact__lead, html[dir="ltr"] .contact__form-head, html[dir="ltr"] .contact__form-title, html[dir="ltr"] .contact__form-sub, html[dir="ltr"] .contact__field, html[dir="ltr"] .contact__label, html[dir="ltr"] .contact__status, html[dir="ltr"] .contact__input { text-align: left; } /* inputs/placeholders read left-to-right in English */ html[dir="ltr"] .contact__input { direction: ltr; } html[dir="ltr"] .contact__benefits { align-items: flex-start; } html[dir="ltr"] .contact__benefit { flex-direction: row; } html[dir="ltr"] .contact__benefit-text { text-align: left; } /* chevron on the select moves to the right in LTR */ html[dir="ltr"] .contact__select-icon { left: auto; right: 16px; } html[dir="ltr"] .contact__select { padding-left: 16px; padding-right: 42px; } /* custom dropdown reads left-to-right in English */ html[dir="ltr"] .contact__dd-trigger { text-align: left; padding: 0 42px 0 16px; } html[dir="ltr"] .contact__dd-option { text-align: left; } /* ---- location ---- */ html[dir="ltr"] .location__info { align-items: flex-start; } html[dir="ltr"] .location__info-head { align-items: flex-start; } html[dir="ltr"] .location__info-eyebrow, html[dir="ltr"] .location__info-title { text-align: left; } html[dir="ltr"] .location__row-text { align-items: flex-start; } html[dir="ltr"] .location__row-label, html[dir="ltr"] .location__row-value { text-align: left; } html[dir="ltr"] .location__badges, html[dir="ltr"] .location__badges-row { align-items: flex-start; justify-content: flex-start; } html[dir="ltr"] .location__map-card-text { text-align: left; } /* ---- footer ---- */ html[dir="ltr"] .footer__col { text-align: left; } html[dir="ltr"] .footer__tagline { text-align: left; } /* the drone cursor label stays LTR regardless */