/* ═══════════════════════════════════════ LANGUAGE TOGGLE + ARABIC / RTL SUPPORT ═══════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap'); /* ── Language toggle button (always visible) ── */ .lang-toggle { flex: none; margin-left: 8px; min-width: 46px; padding: 8px 14px; border: 1px solid var(--border-subtle); border-radius: 100px; background: rgba(255, 255, 255, 0.7); color: var(--text-primary); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .lang-toggle:hover { transform: translateY(-2px); border-color: transparent; background: var(--brand-gradient); color: #fff; } /* ═══════════════════════════════════════ RTL — applied when ═══════════════════════════════════════ */ /* Arabic typography everywhere */ body.rtl, body.rtl button, body.rtl input, body.rtl select, body.rtl textarea, body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6 { font-family: 'Cairo', sans-serif !important; } /* ── Navbar ── */ body.rtl .nav-links a::after { left: auto; right: 0; } body.rtl .lang-toggle { margin-left: 0; margin-right: 8px; } /* mobile drawer opens from the LEFT in RTL */ @media (max-width: 900px) { body.rtl .nav-links { right: auto; left: 0; align-items: flex-end; transform: translateX(-100%); box-shadow: 24px 0 60px -22px rgba(15, 37, 67, 0.45); } body.rtl .nav-links li { transform: translateX(-24px); text-align: right; width: 100%; } body.rtl .navbar.menu-open .nav-links { transform: translateX(0); } body.rtl .navbar.menu-open .nav-links li { transform: none; } } @media (max-width: 768px) { body.rtl .hero-text-content { right: 20px; left: auto; } } /* ── Hero ── */ body.rtl .hero-text-content { left: auto; right: 48px; text-align: right; } body.rtl .hero-eyebrow, body.rtl .hero-cta-row, body.rtl .hero-stats { flex-direction: row-reverse; } body.rtl .hero-stats .stat { text-align: right; padding-left: 0; padding-right: 18px; } body.rtl .hero-stats .stat::before { left: auto; right: 0; } body.rtl .hero-overlay-text { text-align: right; } /* image-side decorations mirror to the left (image moves left in RTL) */ body.rtl .hero-decor { right: auto; left: 48px; } body.rtl .hero-decor .live-badge { right: auto; left: 18px; } body.rtl .hero-decor .float-card { left: auto; right: -26px; } /* ── About ── */ body.rtl .about-shell, body.rtl .statement, body.rtl .timeline, body.rtl .pillars { text-align: right; } body.rtl .about-eyebrow { flex-direction: row-reverse; } body.rtl .node::before { left: auto; right: 0; } body.rtl .pillar::before { left: auto; right: 0; transform-origin: right; } /* ── Services ── */ body.rtl .services-head { text-align: right; } body.rtl .services-eyebrow { flex-direction: row-reverse; } body.rtl .svc-num { left: auto; right: 22px; } body.rtl .svc-tag { right: auto; left: 22px; } body.rtl .svc-body { text-align: right; } body.rtl .svc-more { flex-direction: row-reverse; } /* ── Projects carousel ── */ body.rtl .projects-heading { left: auto; right: 6vw; } body.rtl .pj-left { left: auto; right: 6vw; text-align: right; } body.rtl .pj-right { right: auto; left: 6vw; text-align: left; } body.rtl .pj-right .pj-logo img { margin-left: 0; margin-right: auto; } body.rtl .pj-viewall { right: auto; left: 6vw; } /* ── Clients ── */ body.rtl .clients-head { text-align: center; } /* keep the marquee laid out LTR so the infinite scroll still works */ body.rtl .marquee, body.rtl .cl-track { direction: ltr; } /* ── Contact ── */ body.rtl .ct-head, body.rtl .ct-info-card, body.rtl .ct-field label, body.rtl .ct-form-card { text-align: right; } body.rtl .ct-eyebrow { flex-direction: row-reverse; } body.rtl .ct-info-card { flex-direction: row-reverse; } body.rtl .ct-map .pin { left: auto; right: 18px; flex-direction: row-reverse; } body.rtl .ct-submit { flex-direction: row-reverse; } body.rtl .ct-submit svg, body.rtl .f-btn svg, body.rtl .hero-btn svg { transform: scaleX(-1); } /* ── Footer ── */ body.rtl .site-footer { text-align: right; } body.rtl .site-footer .cta { flex-direction: row-reverse; } body.rtl .site-footer .col a { flex-direction: row-reverse; } body.rtl .site-footer .contact li { flex-direction: row-reverse; } body.rtl .site-footer .news button svg { transform: scaleX(-1); } body.rtl .site-footer .bar { flex-direction: row-reverse; } /* Arrows that point "forward" should mirror in RTL */ body.rtl .pj-viewall svg { transform: scaleX(-1); }