/* ============================================ OryxBit RTL Styles - Final Optimized Version Key Insight: dir="rtl" on automatically handles flex layout reversal. Do NOT add flex-direction: row-reverse as it causes double-reversal back to LTR. ============================================ */ /* =========================================== BASE RTL SETTINGS =========================================== */ html[dir="rtl"] { direction: rtl; max-width: 100%; overflow-x: hidden; } html[dir="rtl"] body { text-align: right; font-family: 'Tajawal', 'Inter', sans-serif; max-width: 100%; overflow-x: hidden; } /* =========================================== FIX: Explicitly set row direction (Prevents any inherited row-reverse issues) =========================================== */ html[dir="rtl"] .navbar .container, html[dir="rtl"] .nav-links, html[dir="rtl"] .nav-cta, html[dir="rtl"] .hero-stats, html[dir="rtl"] .hero-buttons, html[dir="rtl"] .footer-content, html[dir="rtl"] .footer-links, html[dir="rtl"] .why-feature, html[dir="rtl"] .contact-item, html[dir="rtl"] .stat-item, html[dir="rtl"] .logo, html[dir="rtl"] .btn { flex-direction: row; } /* =========================================== ARROW ICONS - Flip direction =========================================== */ html[dir="rtl"] .btn-arrow, html[dir="rtl"] .btn span[aria-hidden="true"]:last-child { transform: scaleX(-1); } html[dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1) translateX(4px); } /* =========================================== NAVIGATION & DROPDOWNS =========================================== */ html[dir="rtl"] .lang-dropdown { right: auto; left: 0; } html[dir="rtl"] .nav-links a::after { left: auto; right: 0; } /* =========================================== LOGICAL SPACING Using margin swaps for RTL positioning =========================================== */ html[dir="rtl"] .hero-badge::before { margin-right: 0; margin-left: 8px; } html[dir="rtl"] .service-features li::before { margin-right: 0; margin-left: 10px; } html[dir="rtl"] .why-feature-icon { margin-right: 0; margin-left: 16px; } html[dir="rtl"] .contact-item-icon { margin-right: 0; margin-left: 16px; } html[dir="rtl"] .stat-icon { margin-right: 0; margin-left: 12px; } /* =========================================== FORM INPUTS - Keep email/phone LTR =========================================== */ html[dir="rtl"] .contact-item-text a[href^="mailto"], html[dir="rtl"] .contact-item-text a[href^="tel"], html[dir="rtl"] input[type="email"] { direction: ltr; text-align: left; display: inline-block; } /* =========================================== WHY SECTION - Image positioning =========================================== */ @media (min-width: 1025px) { html[dir="rtl"] .why-visual { order: -1; } } /* =========================================== MOBILE MENU CONSISTENCY =========================================== */ @media (max-width: 768px) { html[dir="rtl"] .navbar .container { width: 100%; padding: 0 12px; } html[dir="rtl"] .mobile-menu-btn { margin-right: auto; margin-left: 0; } html[dir="rtl"] .nav-cta { margin-left: 0; margin-right: auto; } /* Hide logo text on mobile RTL too */ html[dir="rtl"] .logo-text { display: none; } /* Stack items vertically on mobile */ html[dir="rtl"] .hero-buttons { flex-direction: column; } html[dir="rtl"] .hero-stats { flex-direction: column; align-items: center; } html[dir="rtl"] .stat-item { flex-direction: row; text-align: center; width: 100%; justify-content: center; gap: 8px; } html[dir="rtl"] .stat-icon { margin-left: 0; margin-bottom: 0; } html[dir="rtl"] .why-feature { flex-direction: column; text-align: center; } html[dir="rtl"] .why-feature-icon { margin-left: 0; margin-bottom: 12px; } html[dir="rtl"] .contact-item { flex-direction: column; text-align: center; } html[dir="rtl"] .contact-item-icon { margin-left: 0; margin-bottom: 12px; } /* Ensure backgrounds don't overflow */ html[dir="rtl"] .hero-bg, html[dir="rtl"] .hero-grid { max-width: 100%; overflow: hidden; } } @media (max-width: 480px) { html[dir="rtl"] .container { padding: 0 12px; } html[dir="rtl"] .hero h1 { font-size: 22px; line-height: 1.4; } }