/* ============================================================ BITRION — RTL Layout Overrides Applied when is active (Arabic language). Uses [dir="rtl"] selector prefix for all rules. ============================================================ */ /* ── Arabic font ── */ [dir="rtl"] body, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] span, [dir="rtl"] label, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { font-family: 'Noto Kufi Arabic', 'Inter Tight', sans-serif; } /* Monospace elements keep their font */ [dir="rtl"] .nav-login, [dir="rtl"] .footer-col h4, [dir="rtl"] .footer-bottom p, [dir="rtl"] .lang-toggle, [dir="rtl"] code, [dir="rtl"] pre { font-family: 'Share Tech Mono', monospace; } /* ── Text alignment ── */ [dir="rtl"] .footer-brand p, [dir="rtl"] .footer-col a, [dir="rtl"] .about-desc { text-align: right; } /* ── Nav login/CTA hover line — fix transform-origin ── */ [dir="rtl"] .nav-login::before, [dir="rtl"] .nav-cta::before { transform-origin: right; } /* ── Tighten nav links gap in RTL (Arabic text is wider) ── */ [dir="rtl"] .nav-links { gap: 1.4rem; } [dir="rtl"] .nav-link { font-size: 0.72rem; letter-spacing: 0.04em; } /* ── Mobile nav services sub-list indent ── */ [dir="rtl"] .nav-mobile-services { padding-left: 0; padding-right: var(--sp-md); } /* ── Footer bottom row ── */ [dir="rtl"] .footer-bottom { flex-direction: row-reverse; } /* ── Footer social icons order ── */ [dir="rtl"] .footer-social { flex-direction: row-reverse; } /* ── Footer grid columns — right-to-left order ── */ [dir="rtl"] .footer-grid { direction: rtl; } /* ── Nav dropdown items ── */ [dir="rtl"] .nav-dd-item { flex-direction: row-reverse; } [dir="rtl"] .nav-dd-text { flex: 1; text-align: right; } [dir="rtl"] .nav-dd-title, [dir="rtl"] .nav-dd-desc { display: block; text-align: right; } [dir="rtl"] .nav-dd-all { text-align: center; } /* ── Hero section — keep centered like English ── */ /* (no forced text-align: hero/section headers stay centered) */ /* ── Contact form ── */ [dir="rtl"] .contact-field { text-align: right; direction: rtl; } /* Fix icon padding on select wrapper — swap sides */ [dir="rtl"] .contact-select-wrap .contact-field { padding-right: 1rem; padding-left: 2.2rem; } /* ── CTA avatar stack ── */ [dir="rtl"] .cta-btn-avatar + .cta-btn-avatar { margin-left: 0; margin-right: -10px; } /* ── Industry nav buttons ── */ [dir="rtl"] .ind-nav { flex-direction: row-reverse; } /* ── About section body ── */ [dir="rtl"] .about-header, [dir="rtl"] .about-body { direction: rtl; } /* ── About bg title — Arabic script needs more line-height ── */ [dir="rtl"] .about-bg-title { line-height: 1.1; padding-bottom: 1rem; } /* ── Plans / pricing features list ── */ [dir="rtl"] .plan-feature, [dir="rtl"] .plan-features li { text-align: right; flex-direction: row-reverse; } /* ── Breadcrumbs / address rows ── */ [dir="rtl"] .address-row, [dir="rtl"] .loc-address { flex-direction: row-reverse; text-align: right; } /* ── FAQ items ── */ [dir="rtl"] .faq-question, [dir="rtl"] .faq-answer { text-align: right; } /* ── Nav language dropdown RTL ── */ [dir="rtl"] .lang-dd-list { right: auto; left: 0; } /* ── Industries track: keep cards in LTR order in RTL mode ── */ [dir="rtl"] .ind-track { direction: ltr; } /* ── Mobile nav: keep logo-left / hamburger-right in RTL ── */ @media (max-width: 900px) { [dir="rtl"] .nav-inner { direction: ltr; } }