@font-face{font-family:'NRT';src:url('NRT-Reg.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
.lang-toggle{border:1px solid var(--ink,#102d2a);border-radius:50px;background:none;color:inherit;font:12px Arial,sans-serif;padding:9px 16px;cursor:pointer;letter-spacing:normal;white-space:nowrap}
.lang-toggle:hover{background:var(--ink,#102d2a);color:var(--mint,#00a99d)}
html[dir="rtl"] body{font-family:'NRT','Noto Sans Arabic',Tahoma,Arial,sans-serif}
.lang-rtl h1,.lang-rtl h2,.lang-rtl h3,.lang-rtl .eyebrow,.lang-rtl p,.lang-rtl span,.lang-rtl a,.lang-rtl button,.lang-rtl li{letter-spacing:normal!important}
.lang-rtl .headline-line>span[data-i18n="hero.title2"] em,.lang-rtl .hero-destination em{font-style:normal;font-family:inherit}

/* Keep the hero's text column pinned to the left so it doesn't collide with the
   device mockups / logo, which stay anchored on the right (via physical "right"
   offsets) regardless of language. Without this, dir="rtl" flips the h1's own box
   to the right edge too, and it overlaps the device stack. */
.lang-rtl .hero h1{margin-left:0!important;margin-right:auto!important;text-align:right}
.lang-rtl .hero-caption span:last-child{margin-left:0;margin-right:auto}

/* .hero-bottom's intro paragraph auto-mirrors under dir="rtl", which drags it
   over to the right — straight into the device screens. Force it back to the
   same left-hand column as the heading, keeping the Kurdish text itself
   right-aligned and correctly shaped. */
.lang-rtl .hero .hero-bottom{direction:ltr}
.lang-rtl .hero .intro{direction:rtl;text-align:right}
@media(max-width:600px){.lang-toggle{padding:7px 12px;font-size:11px}}