/* ========================================================= ICME ACADEMY — RTL OVERRIDES (Arabic) Loaded on every page; only takes effect when is set by assets/js/i18n.js. Covers the parts of the site that are fully translated today (navbar, hero, footer) plus safe global flips. ========================================================= */ html[dir="rtl"] body { direction: rtl; text-align: right; font-family: "Cairo", "Tahoma", var(--font-primary); } /* ---------- Header ---------- */ html[dir="rtl"] .extra-nav { margin-left: 0; margin-right: auto; } html[dir="rtl"] .header-nav { margin-left: 0; margin-right: 30px; } html[dir="rtl"] .lang-switcher-menu { right: auto; left: 0; } html[dir="rtl"] .lang-switcher-menu button { text-align: right; } html[dir="rtl"] .dept-mega-item, html[dir="rtl"] .hero-info-item, html[dir="rtl"] .hero-floating-item, html[dir="rtl"] .lang-switcher-btn, html[dir="rtl"] .lang-switcher-menu button, html[dir="rtl"] .extra-phone, html[dir="rtl"] .hero-checklist li { direction: rtl; } html[dir="rtl"] .mega-menu { left: 50%; right: auto; transform: translate(-50%, 8px); } html[dir="rtl"] .header-nav .nav > li > a i.fa-chevron-down { margin-right: 4px; } /* ---------- Hero ---------- */ html[dir="rtl"] .hero-content { text-align: right; } html[dir="rtl"] .hero-content p { margin-right: 0; } html[dir="rtl"] .hero-buttons, html[dir="rtl"] .hero-info-row { justify-content: flex-start; } html[dir="rtl"] .hero-floating-item { text-align: right; } /* ---------- Buttons: keep icon on the correct side ---------- */ html[dir="rtl"] .btn i, html[dir="rtl"] .dept-mega-viewall i, html[dir="rtl"] .course-cta i { transform: scaleX(-1); } /* ---------- Footer ---------- */ html[dir="rtl"] .footer-grid { text-align: right; } html[dir="rtl"] .footer-contact li, html[dir="rtl"] .contact-info-item { flex-direction: row; } html[dir="rtl"] .footer-bottom { text-align: right; } /* ---------- Breadcrumbs, forms, misc ---------- */ html[dir="rtl"] .breadcrumb { flex-direction: row-reverse; justify-content: flex-end; } html[dir="rtl"] .form-group label { text-align: right; } html[dir="rtl"] .form-control { text-align: right; } html[dir="rtl"] .whatsapp-float { left: auto; right: 26px; } @media (max-width: 576px) { html[dir="rtl"] .whatsapp-float { right: 16px; } } html[dir="rtl"] .bgm-toggle { left: auto; right: 26px; } @media (max-width: 576px) { html[dir="rtl"] .bgm-toggle { right: 16px; } } html[dir="rtl"] .back-to-top { right: auto; left: 30px; } /* ---------- Mobile off-canvas nav ---------- */ @media (max-width: 991px) { html[dir="rtl"] .header-nav { left: auto; right: -300px; margin-right: 0; } html[dir="rtl"] .header-nav.show { right: 0; left: auto; } }