/* ============================================================ Dar Al Hashem — RTL (Arabic) Stylesheet Applied automatically when ============================================================ */ /* ── 1. Arabic Typography ─────────────────────────────────── */ [dir="rtl"] { --font-h: 'Cairo', 'Tajawal', sans-serif; --font-b: 'Cairo', 'Tajawal', sans-serif; } [dir="rtl"] body { font-family: var(--font-b); } [dir="rtl"] .section-heading em { font-style: normal; } /* ── 2. Section Labels ────────────────────────────────────── */ [dir="rtl"] .section-label::before { display: none; } [dir="rtl"] .section-label::after { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); } [dir="rtl"] .site-header { flex-direction: row; } /* ── 3. Navbar – Desktop ─────────────────────────────────── */ [dir="rtl"] .nav-inner { flex-direction: row; } [dir="rtl"] .primary-nav .nav-list { flex-direction: row-reverse; } [dir="rtl"] .nav-actions { flex-direction: row-reverse; } [dir="rtl"] .nav-arrow { margin-right: 4px; margin-left: 0; transform: none; } [dir="rtl"] .nav-link--cta { margin-left: 0; margin-right: 8px; } [dir="rtl"] .lang-switcher { font-family: 'Cairo', sans-serif; } /* Desktop dropdown: anchor to right edge */ [dir="rtl"] .nav-dropdown { left: 0; right: auto; text-align: right; } [dir="rtl"] .nav-item.has-dropdown:hover .nav-dropdown { left: 0; } /* Dropdown link accent: swap border from left to right */ [dir="rtl"] .nav-dropdown a { border-left: none; border-right: 2px solid transparent; padding-right: 20px; padding-left: 10px; } [dir="rtl"] .nav-dropdown a:hover { border-right-color: var(--gold); border-left-color: transparent; padding-right: 24px; padding-left: 10px; } /* ── 4. Navbar – Mobile ──────────────────────────────────── */ @media (max-width: 1024px) { [dir="rtl"] .primary-nav { transform: translateX(-100%); } [dir="rtl"] .primary-nav.is-open { transform: translateX(0); } [dir="rtl"] .nav-close { justify-content: flex-start; } [dir="rtl"] .primary-nav .nav-list { flex-direction: column; align-items: flex-end; } [dir="rtl"] .nav-inner { flex-direction: row; } [dir="rtl"] .nav-dropdown { text-align: right; padding: 0 16px 8px 0; } /* Mobile: no border accent on dropdown links */ [dir="rtl"] .nav-dropdown a { border-right: none; padding-right: 0; } [dir="rtl"] .nav-dropdown a:hover { padding-right: 8px; padding-left: 0; } } /* ── 5. Buttons & Text Links ─────────────────────────────── */ [dir="rtl"] .btn i, [dir="rtl"] .text-link i { transform: scaleX(-1); } /* text-link: arrow goes on the left in RTL */ [dir="rtl"] .text-link { flex-direction: row-reverse; } /* text-link: arrow goes on the left in RTL */ [dir="rtl"] .text-link { flex-direction: row-reverse; } /* ── 6. Page Hero (inner pages) ──────────────────────────── */ [dir="rtl"] .page-hero-breadcrumb { flex-direction: row-reverse; } [dir="rtl"] .page-hero-breadcrumb i { transform: scaleX(-1); } [dir="rtl"] .page-hero-content { text-align: right; } [dir="rtl"] .page-hero h1, [dir="rtl"] .page-hero p { text-align: right; } /* ── 7. Hero Slider ──────────────────────────────────────── */ [dir="rtl"] .hero-content { text-align: right; } [dir="rtl"] .hero-cta { justify-content: flex-start; } [dir="rtl"] .hero-label::before { display: none; } [dir="rtl"] .hero-stats-inner { direction: rtl; } [dir="rtl"] .hero-stat { text-align: center; } [dir="rtl"] .hs-counter { direction: ltr; } /* Swap prev/next arrow positions */ [dir="rtl"] .hs-prev { left: auto; right: 40px; } [dir="rtl"] .hs-next { right: auto; left: 40px; } /* ── 8. Welcome Section ──────────────────────────────────── */ [dir="rtl"] .welcome-grid { direction: rtl; } [dir="rtl"] .welcome-text { text-align: right; } [dir="rtl"] .welcome-text .section-heading, [dir="rtl"] .welcome-text .section-subtitle, [dir="rtl"] .welcome-text p { text-align: right; } [dir="rtl"] .welcome-cta { justify-content: flex-start; } [dir="rtl"] .gold-rule { margin-right: 0; } /* Swap badge from left corner to right corner */ [dir="rtl"] .welcome-image-badge { left: auto; right: -24px; } /* ── 9. Stats ────────────────────────────────────────────── */ [dir="rtl"] .stat-item { text-align: center; } /* ── 10. Achievements Strip ──────────────────────────────── */ [dir="rtl"] .achievement-item { flex-direction: row-reverse; } [dir="rtl"] .achievement-text { text-align: right; } /* ── 11. Expertise Section ───────────────────────────────── */ [dir="rtl"] .expertise-header { flex-direction: row; } [dir="rtl"] .expertise-header > :first-child { text-align: right; } /* card-body is a flex-column: use align-items to right-align children */ [dir="rtl"] .expertise-card-body { align-items: flex-end; text-align: right; } [dir="rtl"] .expertise-card h3, [dir="rtl"] .expertise-card p { text-align: right; width: 100%; } /* card-link: put arrow on the left in RTL */ [dir="rtl"] .expertise-card .card-link { flex-direction: row-reverse; } [dir="rtl"] .expertise-card .card-link i { transform: scaleX(-1); } /* Animate bottom border from right instead of left */ [dir="rtl"] .expertise-card::before { transform-origin: right; } /* ── 12. Sectors Section ─────────────────────────────────── */ [dir="rtl"] .sectors-header { flex-direction: row; } [dir="rtl"] .sectors-header > :first-child { text-align: right; } /* Animate top bar from right */ [dir="rtl"] .sector-card::before { transform-origin: right; } /* Sector inner-page rows */ [dir="rtl"] .sector-row-content { text-align: right; } [dir="rtl"] .sector-row-icon { align-self: flex-start; } /* ── 13. Projects Section ────────────────────────────────── */ [dir="rtl"] .projects-header { flex-direction: row; } [dir="rtl"] .projects-header > :first-child { text-align: right; } [dir="rtl"] .project-card-info { text-align: right; } [dir="rtl"] .projects-filter-row { flex-direction: row-reverse; } /* ── 14. Group Companies ─────────────────────────────────── */ [dir="rtl"] .group-header { flex-direction: row; } [dir="rtl"] .group-header > :first-child { text-align: right; } /* group-card-body is flex-column: align children to the end */ [dir="rtl"] .group-card-body { align-items: flex-end; text-align: right; } [dir="rtl"] .group-card-body p, [dir="rtl"] .group-card h3, [dir="rtl"] .group-card-tagline { text-align: right; width: 100%; } [dir="rtl"] .group-card::before { transform-origin: right; } /* visit-link: put arrow on the left in RTL */ [dir="rtl"] .group-card .visit-link { flex-direction: row-reverse; } [dir="rtl"] .group-card .visit-link i { transform: scaleX(-1); } /* ── 15. News Cards ──────────────────────────────────────── */ [dir="rtl"] .news-card-body { text-align: right; } [dir="rtl"] .news-card-date i { margin-right: 0; margin-left: 6px; } /* Move type badge to the right corner */ [dir="rtl"] .news-card-type { left: auto; right: 16px; } /* ── 16. Team Cards ──────────────────────────────────────── */ [dir="rtl"] .team-card-info { text-align: center; } /* ── 17. Contact Page ────────────────────────────────────── */ [dir="rtl"] .contact-info-item { flex-direction: row-reverse; } [dir="rtl"] .contact-info-text { text-align: right; } [dir="rtl"] .form-label { text-align: right; display: block; } /* ── 18. FAQ Accordion ───────────────────────────────────── */ [dir="rtl"] .faq-question { flex-direction: row-reverse; } [dir="rtl"] .faq-answer-inner { text-align: right; } [dir="rtl"] .faq-question h3 { text-align: right; } /* ── 19. Footer ──────────────────────────────────────────── */ [dir="rtl"] .footer-grid { direction: rtl; } [dir="rtl"] .footer-col { text-align: right; } [dir="rtl"] .footer-newsletter .newsletter-inner { flex-direction: row-reverse; } [dir="rtl"] .newsletter-text { text-align: right; } [dir="rtl"] .footer-bottom-inner { flex-direction: row-reverse; } /* Footer links: swap hover indent from left to right */ [dir="rtl"] .footer-links a:hover { padding-left: 0; padding-right: 6px; } /* Footer contact list: text right-aligned (icon order is correct via dir="rtl") */ [dir="rtl"] .footer-contact-list li { text-align: right; } /* ── 20. Pagination ──────────────────────────────────────── */ [dir="rtl"] .pagination { direction: ltr; } /* ── 21. About Page – inline-style containers ────────────── */ /* Flip icon + text flex rows in the values section */ [dir="rtl"] .about-value-item { flex-direction: row-reverse !important; } /* Right-align text in the story text column */ [dir="rtl"] .about-story-grid > div { text-align: right; } /* Flip the leadership section header (heading ↔ "Meet the Team" link) */ [dir="rtl"] .about-leadership-header { flex-direction: row-reverse !important; } [dir="rtl"] .about-leadership-header > :first-child { text-align: right; }