/* =================================== VirtueNetz — RTL / Arabic Overrides Loaded only when Arabic mode is on (Gulf sub-sites, /sa/ar/). ⚠ RTL PRINCIPLE — DO NOT add `flex-direction: row-reverse`. ALREADY reverses every flex row automatically. Adding row-reverse on top double-reverses it back to LTR (icons/items land on the wrong side). For mirroring, rely on dir=rtl alone; here we only fix text-align, direction, logical margins/paddings and the arrow flip. =================================== */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap'); /* ── Base ── */ html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body, html[dir="rtl"] p, html[dir="rtl"] span, html[dir="rtl"] li, html[dir="rtl"] a, html[dir="rtl"] label, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] button, html[dir="rtl"] .btn, html[dir="rtl"] .section__label, html[dir="rtl"] .section__subtitle, html[dir="rtl"] .section__title, html[dir="rtl"] .vn-hero__title, html[dir="rtl"] .vn-hero__subtitle, html[dir="rtl"] .vn-hero__badge, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { font-family: 'Tajawal', sans-serif; letter-spacing: 0; } /* ── Bidi: let each text block take direction from its OWN content (like dir="auto"). While content is still English it reads LTR so trailing punctuation / numbers (".", "?", "+14") sit correctly; once a block is translated to Arabic it reads RTL. The block stays right-aligned either way. This fixes the "?that actually works" / ".timeline" type artifacts site-wide. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] blockquote, html[dir="rtl"] figcaption, html[dir="rtl"] .section__subtitle, html[dir="rtl"] .vn-hero__subtitle { unicode-bidi: plaintext; } /* ── Line-height: Arabic script carries diacritics above and glyph tails below the baseline, so it needs MORE vertical room than Latin — otherwise the lines look cramped/overlapping. Boost it for RTL only (English is untouched). !important so component inline styles don't shrink it back on the Arabic site. */ html[dir="rtl"] body, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] a, html[dir="rtl"] blockquote, html[dir="rtl"] figcaption, html[dir="rtl"] td, html[dir="rtl"] th, html[dir="rtl"] .section__subtitle, html[dir="rtl"] .vn-hero__subtitle, html[dir="rtl"] [class*="__desc"], html[dir="rtl"] [class*="__text"] { line-height: 1.8 !important; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] .section__title, html[dir="rtl"] .vn-hero__title, html[dir="rtl"] [class*="__title"], html[dir="rtl"] [class*="__heading"] { line-height: 1.5 !important; } /* ── Language Toggle Button ── */ .vn-lang-toggle { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 50px; border: 1.5px solid var(--orange); background: transparent; color: var(--orange); font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; text-decoration: none; white-space: nowrap; font-family: inherit; } .vn-lang-toggle:hover { background: var(--orange); color: #fff; } html[dir="rtl"] .vn-lang-toggle { font-family: 'Tajawal', sans-serif; } /* ── Header (dir=rtl mirrors logo→right, actions→left automatically) ── */ html[dir="rtl"] .hamburger { margin-left: 0; margin-right: auto; } /* ── Hero ── */ html[dir="rtl"] .vn-hero__inner { direction: rtl; } html[dir="rtl"] .vn-hero__content { text-align: right; } html[dir="rtl"] .vn-hero__actions { justify-content: flex-start; /* start = right in RTL */ } /* ── Sections ── */ html[dir="rtl"] .section__header:not(.section__header--center) { text-align: right; } html[dir="rtl"] .section__header--center { text-align: center; } /* ── About ── */ html[dir="rtl"] .vn-about__grid { direction: rtl; } html[dir="rtl"] .vn-about__content { text-align: right; } html[dir="rtl"] .vn-about__feature { text-align: right; } /* ── Portfolio ── */ html[dir="rtl"] .work__card { text-align: right; } /* Home portfolio header: dir=rtl already reverses the flex row (heading right, button left). Just right-align the text — no row-reverse (that double-reverses). */ html[dir="rtl"] .vn-work__head > div { text-align: right; } html[dir="rtl"] .vn-work__card { text-align: right; } /* ── Testimonials slider ── The slider moves via transform: translateX(-X%), which assumes an LTR track. Under dir=rtl the flex track anchors to the right edge and the math breaks (only one card shows, big empty gap). Keep the slider MECHANISM in LTR (track + nav arrows behave normally) and flip only the card CONTENT to RTL. */ html[dir="rtl"] .vn-testi__viewport, html[dir="rtl"] .vn-testi__track, html[dir="rtl"] .vn-testi__controls { direction: ltr; } html[dir="rtl"] .vn-testi__card { direction: rtl; text-align: right; } /* ── Service Detail ── */ html[dir="rtl"] .svc-detail__grid { direction: rtl; } html[dir="rtl"] .svc-detail__title, html[dir="rtl"] .svc-detail__desc { text-align: right; } /* ── Choose / ROI ── */ html[dir="rtl"] .sdp-choose__grid { direction: rtl; } html[dir="rtl"] .sdp-choose__content { text-align: right; } html[dir="rtl"] .sdp-choose__list { padding-right: 0; text-align: right; } /* ── Features / Why Cards ── */ html[dir="rtl"] .sdp-features__card, html[dir="rtl"] .sdp-why__card, html[dir="rtl"] .vn-about__feature { text-align: right; } html[dir="rtl"] .sdp-features__card-icon, html[dir="rtl"] .sdp-why__icon { margin-right: 0; } html[dir="rtl"] .sdp-features__num { right: auto; left: 24px; } /* Web-dev Features: force right-align on desktop (children override the card rule) */ @media (min-width: 769px) { html[dir="rtl"] #wd-features .sdp-features__card, html[dir="rtl"] #wd-features .sdp-features__card h3, html[dir="rtl"] #wd-features .sdp-features__card p, html[dir="rtl"] #wd-features .sdp-features__card > div { text-align: right; } } /* ── CTA Section ── */ html[dir="rtl"] .cta__inner { direction: rtl; text-align: right; } /* CTA form variant (.cta--form): its inline