/* ══════════════════════════════════════════════════════════ PROFITRACK — RTL (Arabic) Overrides Applied when is set by i18n.js ══════════════════════════════════════════════════════════ */ /* ─── Language toggle button (shared, always visible) ─── */ .lang-toggle { display: inline-flex; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 3px; cursor: pointer; flex-shrink: 0; gap: 0; } .lang-toggle span { font-size: .76rem; font-weight: 700; letter-spacing: .04em; padding: 4px 11px; border-radius: 99px; color: rgba(255,255,255,.55); transition: background .2s, color .2s; line-height: 1; user-select: none; } .lang-toggle span.active { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #fff; } .lang-toggle:hover span:not(.active) { color: rgba(255,255,255,.8); } /* ─── Global RTL ─── */ html[dir="rtl"] { font-family: 'Cairo', 'Inter', sans-serif; } html[dir="rtl"] body { direction: rtl; text-align: right; } /* ─── NAV ─── */ html[dir="rtl"] .nav-inner { flex-direction: row-reverse; } html[dir="rtl"] .nav-links { flex-direction: row-reverse; } html[dir="rtl"] .nav-right { flex-direction: row-reverse; } html[dir="rtl"] .dropdown { left: auto; right: 0; transform-origin: top right; } html[dir="rtl"] .dropdown a { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .dropdown a:hover { transform: translateX(-3px); } html[dir="rtl"] .dropdown-group-title { text-align: right; } html[dir="rtl"] .mobile-menu a { padding-right: 24px; padding-left: 16px; text-align: right; } html[dir="rtl"] .mobile-menu a:hover { padding-right: 30px; padding-left: 16px; } html[dir="rtl"] .mobile-menu .m-section { padding-right: 24px; padding-left: 0; } html[dir="rtl"] .mobile-lang-row { flex-direction: row-reverse; } /* ─── HERO ─── */ html[dir="rtl"] .hero-grid { direction: rtl; } html[dir="rtl"] .hero-top-badge { margin-left: auto; margin-right: 0; } html[dir="rtl"] .hero-stat { border-right: none; padding-right: 0; margin-right: 0; border-left: 1px solid rgba(255,255,255,.14); padding-left: 28px; margin-left: 28px; } html[dir="rtl"] .hero-stat:last-child { border-left: none; padding-left: 0; margin-left: 0; } html[dir="rtl"] .hero-scard { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .hero-scard:hover { transform: translateX(-5px); } html[dir="rtl"] .hero-float-badge { float: left; } /* ─── STRIP ─── */ html[dir="rtl"] .strip-inner { animation-direction: reverse; } /* ─── SERVICE CARDS ─── */ html[dir="rtl"] .service-card ul li { flex-direction: row-reverse; } html[dir="rtl"] .service-card .card-link { flex-direction: row-reverse; } /* ─── FEATURE CARDS ─── */ html[dir="rtl"] .feature-card { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .feature-card:hover { transform: translateX(-4px); } /* ─── PROCESS ─── */ html[dir="rtl"] .process-grid::before { display: none; } html[dir="rtl"] .process-step { text-align: right; } /* ─── PRICING ─── */ html[dir="rtl"] .price-card { text-align: right; } html[dir="rtl"] .price-list li { flex-direction: row-reverse; text-align: right; } /* ─── TESTIMONIALS ─── */ html[dir="rtl"] .testimonial-card { text-align: right; } html[dir="rtl"] .author-row { flex-direction: row-reverse; } html[dir="rtl"] .author-info { text-align: right; } html[dir="rtl"] .quote-mark { right: auto; left: 24px; } /* ─── BLOG ─── */ html[dir="rtl"] .blog-meta { flex-direction: row-reverse; } html[dir="rtl"] .blog-card-body { text-align: right; } html[dir="rtl"] .blog-read-more { flex-direction: row-reverse; } html[dir="rtl"] .blog-cat { left: auto; right: 14px; } /* ─── ACCORDION ─── */ html[dir="rtl"] .accordion-btn { flex-direction: row-reverse; text-align: right; } /* ─── FORMS ─── */ html[dir="rtl"] .form-group { text-align: right; } html[dir="rtl"] .form-row { direction: rtl; } /* ─── SECTION HEADINGS & TAGS ─── */ html[dir="rtl"] .text-center { text-align: center; } /* keep centred */ html[dir="rtl"] .tag { direction: rtl; } /* ─── PAGE HERO ─── */ html[dir="rtl"] .page-hero::after { right: auto; left: -100px; } html[dir="rtl"] .breadcrumb { flex-direction: row-reverse; } html[dir="rtl"] .page-hero-badges { flex-direction: row-reverse; } html[dir="rtl"] .page-hero { text-align: right; } /* ─── SIDEBAR ─── */ html[dir="rtl"] .sidebar-layout { direction: rtl; } html[dir="rtl"] .sidebar-links a { flex-direction: row-reverse; } html[dir="rtl"] .sidebar-links a:hover { padding-right: 4px; padding-left: 0; } html[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] .nav-phone, html[dir="rtl"] .sidebar-contact-card a[href^="tel:"], html[dir="rtl"] .btn[href^="tel:"], html[dir="rtl"] .footer-col a[href^="tel:"] { display: inline-flex; align-items: center; gap: 8px; } /* ─── STAT BOXES ─── */ html[dir="rtl"] .stat-box { direction: rtl; } /* ─── CARD LINKS ─── */ html[dir="rtl"] .card-link { flex-direction: row-reverse; } /* ─── CTA ─── */ html[dir="rtl"] .cta-actions { flex-direction: row-reverse; } html[dir="rtl"] .cta-section { text-align: center; } /* ─── FOOTER ─── */ html[dir="rtl"] .footer-grid { direction: rtl; } html[dir="rtl"] .footer-col ul a { direction: rtl; text-align: right; } html[dir="rtl"] .footer-col ul a:hover { padding-left: 0; padding-right: 4px; } html[dir="rtl"] .footer-social { flex-direction: row-reverse; } html[dir="rtl"] .footer-bottom { flex-direction: row-reverse; } html[dir="rtl"] .footer-brand p { text-align: right; } /* ─── ABOUT PAGE ─── */ html[dir="rtl"] .value-item { flex-direction: row-reverse; border-left: 3px solid var(--gold); border-right: none; text-align: right; } html[dir="rtl"] .why-list li { flex-direction: row-reverse; } html[dir="rtl"] .about-story p { text-align: right; } /* ─── WHY LEFT STAT BOXES ─── */ html[dir="rtl"] .why-left { direction: rtl; } html[dir="rtl"] .why-float { flex-direction: row-reverse; } /* ─── Responsive RTL ─── */ @media (max-width: 680px) { html[dir="rtl"] .hero-stat { padding-left: 18px; margin-left: 18px; } }