html[dir=rtl] body,html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] h4,html[dir=rtl] p{font-family:"Noto Naskh Arabic",Tahoma,sans-serif}
html[dir=rtl] body{direction:rtl;text-align:right}
html[dir=rtl] .lang-switcher{justify-content:flex-start}
html[dir=rtl] .ml-auto{margin-left:0!important;margin-right:auto!important}
html[dir=rtl] .mr-auto{margin-right:0!important;margin-left:auto!important}
html[dir=rtl] .text-left{text-align:right!important}
html[dir=rtl] .header-left{margin-left:auto}
html[dir=rtl] .owl-carousel{direction:ltr}
html[dir=rtl] .owl-carousel .owl-item>*{direction:rtl}
html[dir=rtl] .float-left{float:right!important}
html[dir=rtl] .float-right{float:left!important}
html[dir=rtl] .text-right{text-align:left!important}
html[dir=rtl] .fa-arrow-right,html[dir=rtl] .fa-chevron-right,html[dir=rtl] .fa-angle-right{transform:scaleX(-1)}
html[dir=rtl] bdi[dir=ltr]{unicode-bidi:isolate}
/* 27 Oct: ard-slider.min.js scrolls to slide.offsetLeft, which only works in an LTR scroller. Keep the track LTR, content RTL. */
html[dir=rtl] .ard-sl-track{direction:ltr}
html[dir=rtl] .ard-sl-slide>*{direction:rtl}
/* 27 Oct: mobile menu slides in from the right in RTL */
html[dir=rtl] .mobile-menu-container{left:auto;right:0;transform:translateX(100%);border-right:0!important;border-left:1px solid var(--ad-gold-line)}
html[dir=rtl] .mmenu-active .mobile-menu-container,html[dir=rtl] .mobile-menu-visible .mobile-menu-container{transform:translateX(0)}
html[dir=rtl] .sf-with-ul:after{margin-left:0;margin-right:5px}
html[dir=rtl]{overflow-x:hidden}
/* 27 Oct: submenu toggle sat on top of the Arabic label (right:0!important); move it to the left in RTL */
html[dir=rtl] .mobile-menu .mmenu-btn{right:auto!important;left:0!important}
/* 27 Oct: Nastaliq needs taller lines; headings overlapped at line-height 1.08 */
html[lang=ur] h1,html[lang=ur] h2,html[lang=ur] h3{line-height:1.9!important}
html[lang=ur] p,html[lang=ur] li{line-height:2.1}
/* 27 Oct (QA-BINA R2): root cause. The live <576px float-lane block (LTR) does five things together: main/footer padding-right:52px, hero margin-right:-52px,
   hero .wrap padding-right:68px, caption padding-right:70px, next arrow right:62px. Only the main padding was mirrored before (and at 767px, not 575.98px),
   so the hero kept margin-right:-52px (ran 52..412 at 360) and its text kept the right-side lane. Mirror the whole block at the same breakpoint. */
@media (max-width:575.98px){html[dir=rtl] body.ad-theme main.main,html[dir=rtl] body.ad-theme footer.footer{padding-right:0!important;padding-left:52px!important}
html[dir=rtl] body.ad-theme .ard-sh-hero{margin-right:0!important;margin-left:-52px!important}
html[dir=rtl] body.ad-theme .ard-sh-hero>.wrap{padding-right:16px!important;padding-left:68px!important}
html[dir=rtl] body.ad-theme .ard-sh-hero>.ard-sl .ard-sl-cap{padding-right:18px!important;padding-left:70px!important}
/* QA-BINA r2 N1: true mirror of LTR <576 arrows (prev left:12px, next right:62px) -> RTL prev right:12px, next left:62px */
html[dir=rtl] body.ad-theme .ard-sh-hero>.ard-sl .ard-sl-next{right:auto!important;left:62px!important}
html[dir=rtl] body.ad-theme .ard-sh-hero>.ard-sl:not(.ard-sl--single) .ard-sl-prev{left:auto!important;right:12px!important}}