/* * Arabic storefront layer. * The document direction is set on ; this file completes component * alignment without changing the English layout. */ html:lang(ar) { --font-arabic: 'Noto Kufi Arabic', 'Manrope', Arial, sans-serif; --font-body: var(--font-arabic); --font-display: var(--font-arabic); --sora-serif: var(--font-arabic); } html:lang(ar) body.site-frontend, html:lang(ar) body.site-frontend :where( h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, option, textarea, span, li, strong, b, em, small, time, summary, blockquote, figcaption, dt, dd, th, td ) { font-family: var(--font-arabic) !important; } :lang(ar) body { direction: rtl; text-align: right; } :lang(ar) input[type="email"], :lang(ar) input[type="tel"], :lang(ar) .phone-input-group, :lang(ar) .sora-lead__phone, :lang(ar) [dir="ltr"] { direction: ltr; text-align: left; } :lang(ar) .sora-nav, :lang(ar) .sora-utility__inner, :lang(ar) .sora-header__inner, :lang(ar) .sora-footer__bottom, :lang(ar) .detail-breadcrumb { direction: rtl; } html:lang(ar) .sora-footer__brand { align-items: flex-start; text-align: right; } html:lang(ar) .sora-footer__bottom > span:first-child { direction: ltr; unicode-bidi: isolate; } :lang(ar) .sora-link svg, :lang(ar) .sora-footer__links a svg, :lang(ar) .button svg { transform: scaleX(-1); } :lang(ar) .sora-guidance__content ol::before { inset-inline-start: 27px; inset-inline-end: auto; } :lang(ar) .sora-guidance { background: radial-gradient(circle at 28% 22%, rgba(71, 183, 255, .11), transparent 23%), #f4f9fe; } :lang(ar) .sora-guidance::before { background: radial-gradient(circle at 22% 25%, rgba(22, 135, 217, .22), transparent 28%), linear-gradient(215deg, #03182f 0%, #06284d 56%, #03182f 100%); } :lang(ar) .sora-guidance__statement > span:first-child { letter-spacing: .02em; } :lang(ar) .sora-guidance__statement h2 { line-height: 1.18; letter-spacing: -.025em; } :lang(ar) .sora-guidance__content li:hover, :lang(ar) .sora-guidance.is-motion-ready.is-inview .sora-guidance__content li:hover { transform: translateX(-8px); } :lang(ar) .sora-guidance__content > a svg { transform: scaleX(-1); } :lang(ar) .sora-guidance__content > a:hover svg { transform: scaleX(-1) translateX(5px); } :lang(ar) .sora-guidance__watermark { direction: ltr; } :lang(ar) .contact-map-badge, :lang(ar) .contact-split__item, :lang(ar) .sora-lead__alert, :lang(ar) .detail-stat, :lang(ar) .footer-contact-row { text-align: right; } :lang(ar) .lpop__close { inset-inline-start: 16px; inset-inline-end: auto; } @media (max-width: 860px) { :lang(ar) .sora-nav { text-align: right; } } @media (max-width: 640px) { html:lang(ar) .sora-footer__brand { align-items: center; text-align: center; } html:lang(ar) .sora-footer__bottom { align-items: center; text-align: center; } }