/* ══════════════════════════════════════════════ ar-rtl.css — Arabic / RTL overrides Loaded only on the Arabic version of the site. Assumes [dir="rtl"] is set on or . ══════════════════════════════════════════════ */ /* ── Google Font: Tajawal ──────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap'); /* ══════════════════════════════════════════════ 1. ARABIC FONT + BASE DIRECTION ══════════════════════════════════════════════ */ :root { --font: 'Tajawal', 'Poppins', sans-serif; } [dir="rtl"] body { font-family: 'Tajawal', 'Poppins', sans-serif; direction: rtl; text-align: right; } /* Tajawal has looser metrics — tighten line-height slightly */ [dir="rtl"] .section-body, [dir="rtl"] .footer-brand-body, [dir="rtl"] .about-body-text, [dir="rtl"] .service-hero-desc, [dir="rtl"] .brief-body { line-height: 1.75; } /* ══════════════════════════════════════════════ 2. NAV RTL FIXES ══════════════════════════════════════════════ */ /* CTA / lang button: swap margin side */ [dir="rtl"] .nav-cta, [dir="rtl"] .lang-btn { margin-left: 0; margin-right: 12px; } /* Nav verb underline: flip transform-origin */ [dir="rtl"] .nav-verb::after { transform-origin: right; } /* Dropdown: align to right edge of parent instead of centred-left */ [dir="rtl"] .nav-dropdown { left: auto; right: 0; transform: translateY(-6px); } [dir="rtl"] .nav-more-wrap:hover .nav-dropdown { transform: none; } /* Mobile menu items: right-align text */ [dir="rtl"] .mm-item { text-align: right; } /* ══════════════════════════════════════════════ 3. SECTION TAG — line appears on the RIGHT ══════════════════════════════════════════════ */ /* Reverse flex so the decorative line trails on the right */ [dir="rtl"] .section-tag { flex-direction: row-reverse; justify-content: flex-end; } /* Eyebrow lines that use ::before pseudo-element */ [dir="rtl"] .hero-eyebrow, [dir="rtl"] .brief-eyebrow, [dir="rtl"] .speed-eyebrow { flex-direction: row-reverse; } /* ══════════════════════════════════════════════ 4. HERO ══════════════════════════════════════════════ */ /* Gradient: flip — dark on RIGHT for text legibility */ [dir="rtl"] .hero::before { background: linear-gradient(to left, rgba(4,4,4,.93) 0%, rgba(4,4,4,.80) 45%, rgba(4,4,4,.45) 100%), linear-gradient(to top, rgba(4,4,4,.88) 0%, transparent 35%); } /* Watermark drifts from the left side */ [dir="rtl"] .hero-wm { right: auto; left: -40px; } /* Underline on hero headline line-2: flip scale origin */ [dir="rtl"] .hero-h1 .line-2::after { transform-origin: right; } /* Hero stats: natural RTL flow is fine — ensure flex doesn't break */ [dir="rtl"] .hero-stats { flex-direction: row-reverse; } [dir="rtl"] .hero-stat { border-right: none; border-left: 1px solid rgba(255,255,255,.08); } [dir="rtl"] .hero-stat:last-child { border-left: none; } /* ══════════════════════════════════════════════ 5. FOOTER ══════════════════════════════════════════════ */ /* Footer link hover: slide right instead of left */ [dir="rtl"] .footer-links-list button, [dir="rtl"] .footer-links-list a { text-align: right; transition: color .2s, padding-right .2s; } [dir="rtl"] .footer-links-list button:hover, [dir="rtl"] .footer-links-list a:hover { padding-left: 0; padding-right: 8px; } /* Footer legal text: left-align in RTL context */ [dir="rtl"] .footer-legal { text-align: left; } /* ══════════════════════════════════════════════ 6. LANG TOGGLE BUTTON ══════════════════════════════════════════════ */ .lang-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: border-color 0.2s, color 0.2s; flex-shrink: 0; } .lang-toggle:hover { border-color: #D21F27; color: #D21F27; } [dir="rtl"] .lang-toggle { margin-left: 0; margin-right: 12px; } /* ══════════════════════════════════════════════ 7. SERVICE HERO GRID — flip panel to the left ══════════════════════════════════════════════ */ /* In RTL, CSS grid visual order flips automatically with direction:rtl. The panel (second column) will render on the left — correct for Arabic. */ [dir="rtl"] .service-hero { direction: rtl; } /* Flip the overlay gradient to dark on right */ [dir="rtl"] .service-hero::before { background: linear-gradient(to left, rgba(4,4,4,.96) 0%, rgba(4,4,4,.88) 50%, rgba(4,4,4,.72) 100%), linear-gradient(to top, rgba(4,4,4,.88) 0%, transparent 40%); } /* Service list bullet: flip the red dash to the right */ [dir="rtl"] .service-hero-items li { flex-direction: row-reverse; } /* Service panel: top border stays, form labels right-align */ [dir="rtl"] .service-form-field label { text-align: right; } /* ══════════════════════════════════════════════ 8. ABOUT HERO ══════════════════════════════════════════════ */ /* About hero overlay: dark on right */ [dir="rtl"] .about-hero::before { background: linear-gradient(to left, rgba(4,4,4,.96) 0%, rgba(4,4,4,.88) 55%, rgba(4,4,4,.60) 100%), linear-gradient(to top, rgba(4,4,4,.80) 0%, transparent 45%); } /* Eyebrow rule: flip direction */ [dir="rtl"] .about-hero-eyebrow { flex-direction: row-reverse; } /* ══════════════════════════════════════════════ 9. PROCESS STEPS — left accent bar → right ══════════════════════════════════════════════ */ [dir="rtl"] .process-step::before { left: auto; right: 0; transform-origin: top; } [dir="rtl"] .process-step { padding-left: 20px; padding-right: 20px; } /* ══════════════════════════════════════════════ 10. TESTIMONIAL SECTION — quote mark ══════════════════════════════════════════════ */ [dir="rtl"] .testimonial-section::before { left: auto; right: 40px; content: '"'; /* Arabic opening quote */ } [dir="rtl"] .t-tag { margin-left: 0; margin-right: auto; } /* ══════════════════════════════════════════════ 11. MOMENTUM TICKER — reverse scroll direction ══════════════════════════════════════════════ */ @keyframes momentum-scroll-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes ticker-scroll-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } } [dir="rtl"] .momentum-track { animation-name: momentum-scroll-rtl; } [dir="rtl"] .ticker { animation-name: ticker-scroll-rtl; } /* Ticker fade edges: flip the fade gradients */ [dir="rtl"] .ticker-wrap::before { left: auto; right: 0; background: linear-gradient(to left, var(--surface), transparent); } [dir="rtl"] .ticker-wrap::after { right: auto; left: 0; background: linear-gradient(to right, var(--surface), transparent); } /* ══════════════════════════════════════════════ 12. CASE STUDY STRIP — corner tag flip ══════════════════════════════════════════════ */ /* Triangle corner: mirror to top-left */ [dir="rtl"] .cs-card-corner { right: auto; left: 0; border-left: none; border-right: 28px solid transparent; } /* Hover arrow button: slide in from left instead of right */ [dir="rtl"] .cs-card-hover-btn { right: auto; left: 18px; transform: translateX(-6px); } [dir="rtl"] .cs-card:hover .cs-card-hover-btn { transform: none; } /* Arrow icon on featured link: flip to Arabic left-pointing */ [dir="rtl"] .cs-featured-link::after { content: '←'; } /* ══════════════════════════════════════════════ 13. GALLERY / WORK CARDS — corner + arrow ══════════════════════════════════════════════ */ [dir="rtl"] .gallery-corner { right: auto; left: 0; border-left: none; border-right: 40px solid transparent; } [dir="rtl"] .gallery-arrow, [dir="rtl"] .wfc-arrow { right: auto; left: 20px; } [dir="rtl"] .cs-mini-corner { right: auto; left: 0; border-left: none; border-right: 32px solid transparent; } /* ══════════════════════════════════════════════ 14. BRIEF PAGE — eyebrow line ══════════════════════════════════════════════ */ [dir="rtl"] .brief-eyebrow { flex-direction: row-reverse; } [dir="rtl"] .brief-promise-item { flex-direction: row-reverse; } [dir="rtl"] .brief-form-wrap::before { /* top red bar — stays, no change needed */ } /* ══════════════════════════════════════════════ 15. SPEED / PROCESS — left border line ══════════════════════════════════════════════ */ [dir="rtl"] .speed-eyebrow { flex-direction: row-reverse; } [dir="rtl"] .speed-wm { left: auto; right: -10px; }