/* ============================================ Arabic RTL overrides (mirrored layout) Load AFTER style.css / style2.css / legal.css ============================================ */ [dir="rtl"] body { font-family: "Tajawal", "Poppins", "Segoe UI", Arial, sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5 { font-family: "Tajawal", "Poppins", "Segoe UI", Arial, sans-serif; } [dir="rtl"] .hero { background: linear-gradient( 90deg, rgba(238, 242, 248, 0) 42%, rgba(247, 249, 252, 0.9) 60%, #f7f9fc 72% ), url("../images/hero-pc.webp") left center / cover no-repeat; } [dir="rtl"] .hero-copy { margin-left: auto; margin-right: 0; text-align: right; } @media (max-width: 860px) { [dir="rtl"] .hero { background: #f7f9fc; } } [dir="rtl"] .hero-copy h1, [dir="rtl"] .hero-copy p.lead, [dir="rtl"] .eyebrow, [dir="rtl"] .section-head, [dir="rtl"] .section-title, [dir="rtl"] .section-sub, [dir="rtl"] .step-text, [dir="rtl"] .svc-title, [dir="rtl"] .svc-text, [dir="rtl"] .stat-item, [dir="rtl"] .stat-label, [dir="rtl"] .cta-title, [dir="rtl"] .cta-sub, [dir="rtl"] .why-text, [dir="rtl"] .feature-text, [dir="rtl"] .faq-question, [dir="rtl"] .faq-answer, [dir="rtl"] .contact-label, [dir="rtl"] .form-label { text-align: right; } [dir="rtl"] .stats-bar { direction: rtl; } [dir="rtl"] .stat-item { justify-content: flex-end; } [dir="rtl"] .why-grid, [dir="rtl"] .stats-bar, [dir="rtl"] .cards-grid, [dir="rtl"] .svc-card, [dir="rtl"] .step-card, [dir="rtl"] .feature-grid, [dir="rtl"] .faq-item, [dir="rtl"] .trust-mini, [dir="rtl"] .contact-info, [dir="rtl"] .features-list { text-align: right; } [dir="rtl"] .btn i, [dir="rtl"] .btn svg { margin-right: 0; margin-left: 8px; } [dir="rtl"] .form-group label, [dir="rtl"] .form-group input, [dir="rtl"] .form-group textarea, [dir="rtl"] .form-group select { text-align: right; } [dir="rtl"] .footer-bottom, [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .site-footer h4, [dir="rtl"] .site-footer p, [dir="rtl"] .site-footer li { text-align: right; } [dir="rtl"] .contact-list li { align-items: flex-end; text-align: right; } [dir="rtl"] .accordion .acc-header { text-align: right; } [dir="rtl"] .accordion .acc-icon { margin-left: 0; margin-right: auto; } [dir="rtl"] .acc-item .acc-content { text-align: right; } [dir="rtl"] .gallery-strip { direction: rtl; } [dir="rtl"] .hero__content, [dir="rtl"] .hero__title, [dir="rtl"] .hero__crumb { text-align: right; align-items: flex-end; } [dir="rtl"] .page-body, [dir="rtl"] .content-grid, [dir="rtl"] .main-col, [dir="rtl"] .clause, [dir="rtl"] .clause__icon, [dir="rtl"] .clause__body { text-align: right; } [dir="rtl"] .clause__icon { margin-left: 0; margin-right: 0; } [dir="rtl"] .license-row, [dir="rtl"] .help-row, [dir="rtl"] .feature-card, [dir="rtl"] .meta-bar, [dir="rtl"] .intro-text { text-align: right; } [dir="rtl"] .help-card__rows { text-align: right; } [dir="rtl"] .clause__text li { padding-left: 0; padding-right: 16px; } [dir="rtl"] .clause__text li::before { left: auto; right: 0; } [dir="rtl"] .step-connector { left: auto; right: 29px; } @media (min-width: 900px) { [dir="rtl"] .step-connector { top: 29px; left: calc(-100% + 58px); right: 58px; } } [dir="rtl"] .mobile-call-bar { direction: rtl; } [dir="rtl"] .breadcrumb, [dir="rtl"] .page-title, [dir="rtl"] .page-sub { text-align: right; } /* ============================================ English translation overrides (browser translate) Browsers set when the page is auto-translated to English. Flip layout + text alignment to LTR so the mirrored RTL styles do not apply to the translated English page. ============================================ */ html[lang="en"] { direction: ltr; } html[lang="en"] body { font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif; } html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] h5 { font-family: "Inter", "Poppins", "Segoe UI", Helvetica, Arial, sans-serif; } html[lang="en"] .hero-copy, html[lang="en"] .hero-copy h1, html[lang="en"] .hero-copy p.lead, html[lang="en"] .eyebrow, html[lang="en"] .section-head, html[lang="en"] .step-text, html[lang="en"] .svc-title, html[lang="en"] .svc-text, html[lang="en"] .stat-item, html[lang="en"] .stat-label, html[lang="en"] .cta-title, html[lang="en"] .cta-sub, html[lang="en"] .why-text, html[lang="en"] .feature-text, html[lang="en"] .faq-question, html[lang="en"] .faq-answer, html[lang="en"] .contact-label, html[lang="en"] .form-label, html[lang="en"] .why-grid, html[lang="en"] .cards-grid, html[lang="en"] .svc-card, html[lang="en"] .step-card, html[lang="en"] .feature-grid, html[lang="en"] .faq-item, html[lang="en"] .trust-mini, html[lang="en"] .contact-info, html[lang="en"] .features-list, html[lang="en"] .form-group label, html[lang="en"] .form-group input, html[lang="en"] .form-group textarea, html[lang="en"] .form-group select, html[lang="en"] .site-footer h4, html[lang="en"] .site-footer p, html[lang="en"] .site-footer li, html[lang="en"] .accordion .acc-header, html[lang="en"] .acc-item .acc-content, html[lang="en"] .hero__content, html[lang="en"] .hero__title, html[lang="en"] .hero__crumb, html[lang="en"] .page-body, html[lang="en"] .content-grid, html[lang="en"] .main-col, html[lang="en"] .clause, html[lang="en"] .clause__icon, html[lang="en"] .clause__body, html[lang="en"] .license-row, html[lang="en"] .help-row, html[lang="en"] .feature-card, html[lang="en"] .meta-bar, html[lang="en"] .intro-text, html[lang="en"] .help-card__rows, html[lang="en"] .breadcrumb, html[lang="en"] .page-title, html[lang="en"] .page-sub { text-align: left; } html[lang="en"] .section-title, html[lang="en"] .section-sub { text-align: center; } html[lang="en"] .stats-bar, html[lang="en"] .footer-bottom, html[lang="en"] .footer-grid, html[lang="en"] .gallery-strip, html[lang="en"] .mobile-call-bar { direction: ltr; } html[lang="en"] .stat-item { justify-content: flex-start; } html[lang="en"] .contact-list li { align-items: flex-start; } html[lang="en"] .btn i, html[lang="en"] .btn svg { margin-left: 0; margin-right: 8px; } html[lang="en"] .hero__content, html[lang="en"] .hero__title, html[lang="en"] .hero__crumb { align-items: flex-start; } html[lang="en"] .clause__text li { padding-right: 0; padding-left: 16px; } html[lang="en"] .clause__text li::before { right: auto; left: 0; } html[lang="en"] .step-connector { right: auto; left: 29px; } @media (min-width: 900px) { html[lang="en"] .step-connector { top: 29px; right: calc(-100% + 58px); left: 58px; } }