/* NJA Arabic — RTL layer. Only the 8 brand colours are used by the shared EN CSS; this file adds no new colours. */
html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] button, html[lang="ar"] input { font-family:'Tajawal',Arial,sans-serif; letter-spacing:0 !important; }
html[lang="ar"] .slogan-art text { font-family:'Tajawal',Arial,sans-serif; letter-spacing:0 !important; }
html[lang="ar"] .identity-your{font-size:34px} html[lang="ar"] .identity-resolve{font-size:30px}
/* mirror hero shape to the right in RTL */
[dir="rtl"] .hero .hero-shape{left:auto;right:-74%}
@media(max-width:767px){ [dir="rtl"] .hero .hero-shape{left:auto;right:-110%} }
/* mirror directional arrows */
[dir="rtl"] svg.nja-link-arrow{transform:scaleX(-1)}
/* hero photo focal: keep subjects visible with RTL shape */
[dir="rtl"] .hero .hero-photo[data-photo="0"]{background-position:right center}
[dir="rtl"] .hero .hero-photo[data-photo="3"]{background-position:60% center}
/* lists/tabs flow RTL automatically via dir; keep numeric hero selector order visual */
[dir="rtl"] .hero-selector{direction:rtl}
[dir="rtl"] .footer-brand img{object-position:center}

.ar-slogan{display:flex;flex-direction:column;align-items:flex-end;text-align:left;gap:2px;line-height:1.15;color:#FFF7EF;font-weight:700;font-size:30px;flex:none}
.ar-slogan em{color:#BD9B54;font-style:normal;font-weight:700;font-size:26px}
@media(max-width:767px){.ar-slogan{font-size:22px}.ar-slogan em{font-size:19px}}
[dir="rtl"] header .brand{gap:28px}
/* honeypot trap: move offscreen vertically in RTL so it cannot create horizontal overflow */
[dir="rtl"] .form-trap{left:auto;right:auto;top:-9999px}