/* The Caden — RTL overrides, active only when (Arabic). Most new blocks already use CSS logical properties (inset-inline / border-inline / padding-inline / text-align:start), so this file handles direction + the developer's legacy left/right rules and icon mirroring. */ html[dir="rtl"] body { direction: rtl; text-align: right; font-family: "Cairo", "Tajawal", "Avenir LT Std", "Roboto", sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] .banner-heading, html[dir="rtl"] #hero h1 { font-family: "Cairo", "Tajawal", "Avenir LT Std", sans-serif; } /* Generic direction fixes for the developer's grid/menu */ html[dir="rtl"] .text-end { text-align: left !important; } html[dir="rtl"] .text-start { text-align: right !important; } html[dir="rtl"] .action-btn.text-end { text-align: left !important; } html[dir="rtl"] .main-menu { padding-right: 0; } /* Arrow icons inside buttons point the other way */ html[dir="rtl"] .butn svg, html[dir="rtl"] .btn-arrow-primary svg, html[dir="rtl"] .btn-arrow-secondary svg { transform: scaleX(-1); } html[dir="rtl"] .butn:hover svg { transform: scaleX(-1) translateX(5px); } /* Hero */ html[dir="rtl"] #hero { text-align: right; } html[dir="rtl"] #hero .hero-loc { flex-direction: row-reverse; } /* Investment / lead cards already use logical props; ensure text aligns */ html[dir="rtl"] .invest-card, html[dir="rtl"] .lead-card { text-align: right; } /* Floating CTA: desktop panel moves to the LEFT edge */ @media (min-width: 768px) { html[dir="rtl"] #caden-fab { right: auto; left: 0; transform: translateY(-50%) translateX(-10px); } html[dir="rtl"] #caden-fab.is-visible { transform: translateY(-50%); } } /* Modal close button to the left */ html[dir="rtl"] #lead-modal .lm-close { inset-inline-end: auto; left: 14px; } /* Plans note border on the right (logical prop already handles, keep explicit) */ html[dir="rtl"] .plans-note { border-inline-start: 3px solid var(--caden-ink); } /* Burger / collapsed mobile menu aligns right */ html[dir="rtl"] .navbar-collapse { text-align: right; } html[dir="rtl"] .submenu { margin-right: .75rem; margin-left: 0; } /* Footer contact icons spacing */ html[dir="rtl"] .foo-contact-details a { padding-right: 2%; padding-left: 0 !important; } html[dir="rtl"] .social-links ul { flex-direction: row-reverse; }