/* ========================================================================== RTL (Right-to-Left) Overrides — Arabic IMPORTANT: With dir="rtl" on , browsers automatically reverse flex-direction:row and CSS Grid flow. We do NOT need flex-direction:row-reverse. We only need to fix: 1) Explicit left/right CSS properties 2) Explicit text-align: left 3) margin-left / padding-left that should flip 4) Transforms and animations that are directional ========================================================================== */ /* -------------------------------------------------------------------------- 0. Global Font -------------------------------------------------------------------------- */ [dir="rtl"] body { font-family: 'Noto Sans Arabic', 'Open Sans', sans-serif; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: 'Noto Sans Arabic', 'Open Sans', sans-serif; line-height: 1.8; } /* -------------------------------------------------------------------------- 1. Components — Skip Link, Buttons -------------------------------------------------------------------------- */ [dir="rtl"] .skip-link { left: auto; right: 0; } /* Flip directional arrow icons in buttons */ [dir="rtl"] .btn svg { transform: scaleX(-1); } /* -------------------------------------------------------------------------- 2. Header — Nav link underline -------------------------------------------------------------------------- */ [dir="rtl"] .main-nav__link::after { left: auto; right: 0; } /* -------------------------------------------------------------------------- 3. Language Switcher -------------------------------------------------------------------------- */ [dir="rtl"] .language-switcher__arrow { margin-left: 0; margin-right: 2px; } [dir="rtl"] .language-switcher__menu { right: auto; left: 0; } [dir="rtl"] .main-nav__actions .language-switcher { margin-right: 0; margin-left: var(--space-sm); } /* -------------------------------------------------------------------------- 4. Hero Section -------------------------------------------------------------------------- */ [dir="rtl"] .hero__content { align-items: flex-start; } /* -------------------------------------------------------------------------- 5. Services Section -------------------------------------------------------------------------- */ [dir="rtl"] .services__header-left { align-items: flex-start; } /* -------------------------------------------------------------------------- 6. Marquee — Reverse scroll direction -------------------------------------------------------------------------- */ [dir="rtl"] .marquee__track { animation: marquee-scroll-rtl var(--marquee-duration, 40s) linear infinite; } @keyframes marquee-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } /* -------------------------------------------------------------------------- 7. About Section -------------------------------------------------------------------------- */ [dir="rtl"] .about__content { align-items: flex-start; } [dir="rtl"] .hero__title { text-align: right; line-height: 1.8; } [dir="rtl"] .services__title { text-align: right; line-height: 1.8; } [dir="rtl"] .about__title { text-align: right; line-height: 1.8; } [dir="rtl"] .about__bio p { text-align: right; } /* -------------------------------------------------------------------------- 8. Process Section -------------------------------------------------------------------------- */ /* Step number badge — flip left to right */ [dir="rtl"] .process__step-number { left: auto; right: 10px; } /* Curved arrows between steps — flip horizontally */ [dir="rtl"] .process__arrow { transform: translateY(-50%) scaleX(-1); } /* -------------------------------------------------------------------------- 9. Footer -------------------------------------------------------------------------- */ /* Footer links hover — flip padding */ [dir="rtl"] .footer-links a { transition: color var(--transition-fast), padding-right var(--transition-fast); } [dir="rtl"] .footer-links a:hover { padding-left: 0; padding-right: 4px; } /* Flip the » chevron for RTL */ [dir="rtl"] .footer-link-icon { transform: scaleX(-1); } /* -------------------------------------------------------------------------- 10. Page — Services -------------------------------------------------------------------------- */ [dir="rtl"] .services-hero__content { align-items: flex-start; } /* Disclaimer text */ [dir="rtl"] .services-disclaimer { text-align: right; } /* FAQ toggle margin */ [dir="rtl"] .faq__question { text-align: right; } [dir="rtl"] .faq__toggle { margin-left: 0; margin-right: 20px; } /* Select dropdown arrow for RTL */ [dir="rtl"] .form-select { background-position: left 12px center; padding-right: 16px; padding-left: 36px; } /* -------------------------------------------------------------------------- 11. Page — Team -------------------------------------------------------------------------- */ [dir="rtl"] .team-hero__content { align-items: flex-start; } /* Modal close button — flip position */ [dir="rtl"] .team-modal__close { right: auto; left: var(--space-md); } /* -------------------------------------------------------------------------- 12. Page — Contact -------------------------------------------------------------------------- */ [dir="rtl"] .contact-hero__content { align-items: flex-start; } /* Contact info cards — border flip */ [dir="rtl"] .contact-info__card { border-right: none; border-left: 1px solid rgba(255, 255, 255, 0.1); } [dir="rtl"] .contact-info__card:last-child { border-left: none; } /* Form inputs — align text right */ [dir="rtl"] .form-input, [dir="rtl"] .form-select, [dir="rtl"] .form-textarea { text-align: right; } @media (max-width: 1200px) { [dir="rtl"] .contact-info__card { border-left: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } /* -------------------------------------------------------------------------- 13. Page — Privacy Policy -------------------------------------------------------------------------- */ [dir="rtl"] .privacy-section { text-align: right; } [dir="rtl"] .privacy-list li { padding-left: 0; padding-right: var(--space-xl); text-align: right; } [dir="rtl"] .privacy-list li::before { left: auto; right: 0; } /* -------------------------------------------------------------------------- 14. Responsive RTL Overrides -------------------------------------------------------------------------- */ @media (max-width: 768px) { [dir="rtl"] .hero__content { align-items: center; text-align: center; } [dir="rtl"] .about__bio p { text-align: right; } [dir="rtl"] .contact-info__card { border-left: none; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } [dir="rtl"] .contact-info__card:last-child { border-bottom: none; } } @media (max-width: 1024px) { [dir="rtl"] .services__header { align-items: flex-start; } }