/* ============================================================ HOMAX — Arabic / RTL Override Stylesheet Apply to with: dir="rtl" lang="ar" Plus: add class "lang-ar" to ============================================================ */ /* ── Arabic Fonts ──────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Noto+Sans+Arabic:wght@300;400;500;600;700;800;900&display=swap'); /* ── Direction & Font ──────────────────────────────────────── */ [lang="ar"], .lang-ar { direction: rtl; font-family: 'Cairo', 'Noto Sans Arabic', sans-serif; } .lang-ar body, [lang="ar"] body { font-family: 'Cairo', 'Noto Sans Arabic', sans-serif; } /* All text elements */ .lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar h5, .lang-ar h6, .lang-ar p, .lang-ar span, .lang-ar a, .lang-ar button, .lang-ar li, .lang-ar label, .lang-ar input, .lang-ar textarea, .lang-ar select { font-family: 'Cairo', 'Noto Sans Arabic', sans-serif; } /* ── Arabic line-height & letter-spacing ───────────────────── */ .lang-ar p, .lang-ar li, .lang-ar span { line-height: 1.9; letter-spacing: 0; } .lang-ar h1, .lang-ar h2, .lang-ar h3 { line-height: 1.4; letter-spacing: 0; } /* ============================================================ TOP INFO BAR — RTL ============================================================ */ .lang-ar #top-bar .d-flex { flex-direction: row-reverse; } /* ============================================================ NAVBAR — RTL ============================================================ */ .lang-ar .nav-inner .d-flex, .lang-ar .navbar-inner-flex { flex-direction: row-reverse; } .lang-ar .navbar-nav { flex-direction: row-reverse; } .lang-ar .nav-dropdown .dropdown-menu { right: 0; left: auto; } /* CTA arrow in nav — flip */ .lang-ar .nav-cta .arrow-icon { transform: scaleX(-1); } /* Offcanvas — slide from left in Arabic */ .lang-ar .offcanvas.offcanvas-end { right: auto; left: 0; transform: translateX(-100%); } .lang-ar .offcanvas.show.offcanvas-end { transform: translateX(0); } .lang-ar .mobile-nav-link { text-align: right; } .lang-ar .mobile-sub-link { text-align: right; } /* ============================================================ HERO SLIDER — RTL ============================================================ */ .lang-ar .hero-content-inner { text-align: center; } /* keep centered */ /* Arrow icons flip */ .lang-ar .hero-btn-primary .arrow-icon, .lang-ar .learn-more-btn .arrow-icon { transform: scaleX(-1); } /* Arrow button positions unchanged — only icon flips */ .lang-ar .hero-arrow-prev { left: auto; right: 1rem; } .lang-ar .hero-arrow-next { right: auto; left: 1rem; } /* Dots dir */ .lang-ar .hero-dots { direction: ltr; } /* keep visual order */ /* ============================================================ SECTION LABELS — RTL ============================================================ */ .lang-ar .section-label { flex-direction: row; } /* stays centered */ .lang-ar .contact-section-label { flex-direction: row-reverse; justify-content: flex-end; } /* ============================================================ SERVICES SECTION — RTL ============================================================ */ .lang-ar .service-meta { flex-direction: row-reverse; justify-content: flex-start; } .lang-ar .service-feature { flex-direction: row-reverse; justify-content: flex-end; } .lang-ar .learn-more-btn { flex-direction: row-reverse; padding: .375rem 1rem .375rem .375rem; } .lang-ar .learn-more-btn .icon-circle { transform: scaleX(-1); } /* ============================================================ WHY US SECTION — RTL ============================================================ */ .lang-ar .pillar-point { flex-direction: row-reverse; text-align: right; } .lang-ar .pillar-card .d-flex.align-items-center { flex-direction: row-reverse; } /* Orange accent top-right → top-left in Arabic */ .lang-ar .pillar-card-accent-1::before { right: auto; left: 0; border-radius: 0 0 6rem 0; } /* Blue accent top-left → top-right in Arabic */ .lang-ar .pillar-card-accent-2::before { left: auto; right: 0; border-radius: 0 0 0 6rem; } /* ============================================================ CTA SECTION — RTL ============================================================ */ .lang-ar .cta-btn-primary .arrow-icon { transform: scaleX(-1); } .lang-ar .cta-contacts { flex-direction: row-reverse; justify-content: center; } /* ============================================================ WORK WITH US / CONTACT FORM — RTL ============================================================ */ .lang-ar .contact-info-card { flex-direction: row-reverse; text-align: right; } .lang-ar .contact-info-label, .lang-ar .contact-info-value { text-align: right; } /* Input text align */ .lang-ar .contact-form input, .lang-ar .contact-form textarea { text-align: right; direction: rtl; } .lang-ar .contact-submit-btn { flex-direction: row-reverse; } .lang-ar .contact-submit-btn .submit-arrow { transform: scaleX(-1); } /* Social icons row */ .lang-ar .social-icons-row { flex-direction: row-reverse; } /* ============================================================ FOOTER — RTL ============================================================ */ .lang-ar #main-footer .text-md-end { text-align: start !important; } .lang-ar #main-footer .text-md-start { text-align: end !important; } .lang-ar .footer-contact-item { flex-direction: row-reverse; text-align: right; } .lang-ar .footer-link-list { text-align: right; } .lang-ar .footer-link-list a { text-align: right; } .lang-ar .footer-bottom .d-flex { flex-direction: row-reverse; } .lang-ar .footer-copy { text-align: right; } /* ============================================================ PAGE HERO (inner pages) — RTL ============================================================ */ .lang-ar .page-hero-title, .lang-ar .page-hero-desc { text-align: center; /* keep centered */ } /* ============================================================ CONTACT PAGE — RTL ============================================================ */ .lang-ar .contact-info-card-box { flex-direction: row-reverse; text-align: right; } .lang-ar .contact-form-box .row { direction: rtl; } .lang-ar .form-input, .lang-ar .form-select-custom { text-align: right; direction: rtl; } /* ============================================================ SERVICES LIST PAGE — RTL ============================================================ */ .lang-ar .service-list-card { text-align: right; } /* ============================================================ SCROLL ANIMATIONS — mirror X transforms ============================================================ */ .lang-ar .fade-left { transform: translateX(30px); } .lang-ar .fade-left.visible { transform: translateX(0); } .lang-ar .fade-right { transform: translateX(-30px); } .lang-ar .fade-right.visible { transform: translateX(0); } /* ============================================================ BOOTSTRAP RTL helpers ============================================================ */ .lang-ar .ms-auto { margin-right: auto !important; margin-left: 0 !important; } .lang-ar .me-auto { margin-left: auto !important; margin-right: 0 !important; } .lang-ar .text-start { text-align: right !important; } .lang-ar .text-end { text-align: left !important; } .lang-ar .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; } .lang-ar .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; } /* ============================================================ WHATSAPP BUTTON — RTL (mirror position) ============================================================ */ .lang-ar #whatsapp-btn { left: auto; right: 1.5rem; } .lang-ar #scroll-top-btn { right: auto; left: 5.5rem; } /* ============================================================ MISCELLANEOUS RTL TWEAKS ============================================================ */ /* Phone / email addresses always LTR */ .lang-ar [dir="ltr"], .lang-ar .ltr-text { direction: ltr; display: inline-block; } /* Numbers */ .lang-ar .num { direction: ltr; unicode-bidi: embed; } /* Arabic font size compensation — Arabic needs slightly larger text */ .lang-ar .hero-desc { font-size: 1rem; } .lang-ar .pillar-point-text { font-size: 1rem; } .lang-ar .service-card-desc { font-size: .9375rem; } .lang-ar .footer-desc { font-size: .9375rem; } /* Arabic logo slider — reverse direction */ .lang-ar .logos-track { animation-direction: reverse; }