/* ============================================================ Lavand Group — Arabic / RTL layer Loaded ONLY on /ar/ pages (after app.css + custom.css). app.css is a purged Tailwind build using PHYSICAL direction utilities (ml-*, mr-*, pl-*, pr-*, left-0, float-*) that do NOT auto-flip. dir="rtl" on reverses flex/inline order for free; this file flips the physical bits that remain. Spacing scale == pixels (matches the template). ============================================================ */ /* ---------- Cairo (self-hosted, Arabic subset) ---------- */ @font-face { font-family:'Cairo'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/cairo-arabic-400.woff2') format('woff2'); } @font-face { font-family:'Cairo'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/cairo-arabic-600.woff2') format('woff2'); } @font-face { font-family:'Cairo'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/cairo-arabic-700.woff2') format('woff2'); } /* Cairo for Arabic glyphs; Open Sans (already loaded) covers Latin/digits */ html[lang="ar"], html[lang="ar"] body, html[lang="ar"] .heading, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] li, html[lang="ar"] span, html[lang="ar"] strong, html[lang="ar"] label, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] button, html[lang="ar"] .btn { font-family: 'Cairo', 'Open Sans', -apple-system, 'Segoe UI', Tahoma, sans-serif !important; } /* Fontello glyph spans must keep their icon font */ html[lang="ar"] .icon { font-family: 'fontello' !important; } /* Arabic reads a touch larger/looser for legibility */ html[lang="ar"] body { line-height: 1.75; } /* ---------- Text alignment ---------- */ [dir=rtl] .text-left, [dir=rtl] .sm\:text-left { text-align: right; } /* ---------- Inline icon ↔ text gaps (swap side) ---------- */ [dir=rtl] .mr-6 { margin-right: 0; margin-left: 6px; } [dir=rtl] .mr-8 { margin-right: 0; margin-left: 8px; } [dir=rtl] .mr-10 { margin-right: 0; margin-left: 10px; } [dir=rtl] .ml-3 { margin-left: 0; margin-right: 3px; } [dir=rtl] .ml-14 { margin-left: 0; margin-right: 14px; } [dir=rtl] .ml-15 { margin-left: 0; margin-right: 15px; } [dir=rtl] .ml-auto { margin-left: 0; margin-right: auto; } /* ---------- Directional padding (non-responsive) ---------- */ [dir=rtl] .pl-35 { padding-left: 0; padding-right: 35px; } [dir=rtl] .pl-49 { padding-left: 0; padding-right: 49px; } /* ---------- Directional padding (responsive) ---------- */ @media (min-width: 640px) { [dir=rtl] .sm\:pl-20 { padding-left: 0; padding-right: 20px; } [dir=rtl] .sm\:pr-15 { padding-right: 0; padding-left: 15px; } } @media (min-width: 768px) { [dir=rtl] .md\:pr-40 { padding-right: 0; padding-left: 40px; } [dir=rtl] .md\:pr-20 { padding-right: 0; padding-left: 20px; } [dir=rtl] .md\:pl-20 { padding-left: 0; padding-right: 20px; } [dir=rtl] .md\:pr-0 { padding-right: 20px; } [dir=rtl] .md\:pl-0 { padding-left: 20px; } } /* ---------- Floats ---------- */ [dir=rtl] .float-right { float: left; } /* ---------- Absolute-positioned components ---------- */ [dir=rtl] .breadcrumbs-wrapper { left: auto; right: 0; padding-left: 0; padding-right: 35px; } [dir=rtl] .header-main-nav-l2 { left: auto; right: 0; } [dir=rtl] .quote-wrapper-with-image__image { left: auto; right: 0; } /* ---------- Feature check-bullet lists ---------- */ [dir=rtl] .text-block-with-image ul li { padding-left: 0; padding-right: 28px; } [dir=rtl] .text-block-with-image ul li:before { left: auto; right: 0; } /* ---------- Chevron "read more" arrows point left in RTL ---------- */ [dir=rtl] .icon-angle-right:before { display: inline-block; transform: scaleX(-1); } /* ---------- Mobile nav slides in from the left in RTL ---------- */ [dir=rtl] #mobile-nav { right: auto; left: 0; transform: translateX(-100%); } [dir=rtl] #mobile-nav.open { transform: translateX(0); } /* ---------- Services "solutions" block: mirror the desktop overlap ---------- */ @media (min-width: 1024px) { [dir=rtl] .black-color-block .bg-black { padding-right: 40px; padding-left: 145px; } } @media (min-width: 1280px) { [dir=rtl] .black-color-block .bg-black { padding-right: 50px; padding-left: 125px; } } /* ---------- Language switcher pill ---------- */ .lang-switch { font-weight: 600; font-size: 14px; letter-spacing: .02em; } .lang-switch a { color: #0d42ff; padding: 4px 6px; } .lang-switch a:hover { text-decoration: underline; }