/* ---- RTL overrides ---- CSS Grid/Flexbox layouts mirror automatically once dir="rtl" is set on . This file only fixes the pieces that use explicit left/right positioning, which never mirrors on its own. */ body{ font-family:'Cairo', sans-serif; } h1,h2,h3,h4, .eyebrow, nav.links a, .brand, .btn, .foot-col a, .offcanvas-links a{ font-family:'Cairo', sans-serif; } /* Decorative gradient line on the eyebrow label */ .eyebrow::before{ background:linear-gradient(270deg, transparent, var(--gold)); } .eyebrow.center::after{ background:linear-gradient(270deg, var(--gold), transparent); } /* Hero mosque illustration mirrors to the opposite corner */ .hero-mosque-decor{ right:auto; left:-60px; } /* Floating stat cards in the hero */ .hero-stats-float{ right:auto; left:6%; } @media (max-width:1100px){ .hero-stats-float{ left:4%; } } .hero-stats-float .stat-glass::before{ right:0; left:auto; background:linear-gradient(180deg, var(--gold-bright), transparent); } /* About section's floating badge card */ .about-badge{ left:auto; right:-28px; } @media(max-width:560px){ .about-badge{ right:16px; left:auto; } } /* Enquire tooltip arrow + positioning on the services page */ .enq-tooltip{ left:auto; right:0; text-align:right; } .enq-tooltip::after{ left:auto; right:22px; } @media(max-width:600px){ .enq-tooltip{ left:50%; right:auto; } .enq-tooltip::after{ left:50%; right:auto; } } /* Marquee scrolls the opposite way so it still reads start-to-end */ .marquee-track{ animation-name:scroll-right; } @keyframes scroll-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } } /* Section corner ornaments / auth hero circles are purely decorative and already centered, so they need no changes. */ /* Authorities page — bullet list markers */ .auth-card ul li{ padding-left:0; padding-right:14px; } .auth-card ul li::before{ left:auto; right:0; } /* Footer column heading underline */ .foot-col h5::after{ left:auto; right:0; }