/* --------------------------------------------------------------------------- Right-to-left overrides, loaded by _Layout.cshtml only when the active language is Arabic (). Keep template-specific tweaks here so the default LTR English experience is untouched. --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); html[dir="rtl"] body, html[dir="rtl"] .th-btn, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .sec-title, html[dir="rtl"] .box-title, html[dir="rtl"] .sub-title, html[dir="rtl"] .hero-title { font-family: 'Tajawal', sans-serif !important; } /* Mirror the base text flow. */ html[dir="rtl"] body { text-align: right; } /* Lists/menus default to right-aligned, no left padding bullet indent. */ html[dir="rtl"] ul { padding-right: 0; } /* Keep the floating WhatsApp button anchored to the left in both languages (the tooltip still slides out to its right, same as LTR). */ /* The language toggle reads naturally either direction; keep it upright. */ html[dir="rtl"] .lang-toggle { direction: ltr; } /* Benefits card number: pinned right in English, mirror it to the left in Arabic. */ html[dir="rtl"] .why-card-1.style-2 .count { right: auto; left: 40px; } /* nice-select dropdown arrow: pinned right in English, mirror it to the left in Arabic. */ html[dir="rtl"] .nice-select:after { right: auto; left: 20px; } /* nice-select text + options: left-aligned by the plugin in English; right-align the selected value and every option in Arabic, and anchor the popup to the right edge. Padding is mirrored so the text clears the left-side arrow. */ html[dir="rtl"] .nice-select { text-align: right; padding-right: 18px; padding-left: 30px; } html[dir="rtl"] .nice-select .current { display: block; text-align: right; } html[dir="rtl"] .nice-select .list { right: 0; left: auto; text-align: right; } html[dir="rtl"] .nice-select .option { direction: rtl; text-align: right; padding-right: 18px; padding-left: 29px; } /* Accordion toggle icon: pinned right in English, mirror it to the left in Arabic. */ html[dir="rtl"] .accordion-card .accordion-button:after { right: auto; left: 40px; } /* Property Listing heading: left-aligned (text-start) in English, mirror to the right in Arabic. The .text-start utility is hard-coded to left !important, so override it with a more specific RTL-scoped rule. */ html[dir="rtl"] .th-sort-bar .box-title { text-align: right !important; } /* Form submit button (Contact Us / Consultation): left in English (text-start), mirror to the right in Arabic. Same .text-start !important override as above. */ html[dir="rtl"] .form-btn.text-start { text-align: right !important; } /* Breadcrumb separator chevron: points right in English, mirror it to point left in Arabic so it follows the RTL reading direction. Covers the shared .breadcumb-menu plus the DeveloperProjects .dev-breadcrumb and the ProjectDetails .project-breadcrumb variants. */ html[dir="rtl"] .breadcumb-menu .fa-angle-right, html[dir="rtl"] .dev-breadcrumb .fa-angle-right, html[dir="rtl"] .project-breadcrumb .fa-angle-right { transform: scaleX(-1); }