/* ============================================ NURI GROUP - Arabic / RTL Overrides Applied only when (Arabic locale). The browser's native RTL engine now handles: - direction cascading - flex-direction row = right-to-left - default text-align: right (start) This file only adds what native RTL doesn't cover. ============================================ */ /* =================================== 1. FONT FAMILY =================================== */ html, body, * { font-family: 'Tajawal', 'Outfit', 'DM Sans', sans-serif !important; } /* =================================== 2. LETTER-SPACING Arabic script must not have letter-spacing. =================================== */ [dir="rtl"] .nv2-hero__label, [dir="rtl"] .nv2-section-label, [dir="rtl"] .nv2-hero__cta, [dir="rtl"] .nv2-header__menu-item a, [dir="rtl"] .nv2-footer__title, [dir="rtl"] .nv2-pillar__title, [dir="rtl"] .nv2-page-hero__date span, [dir="rtl"] .nv2-grid-section .nv2-grid-card__category { letter-spacing: 0 !important; } /* =================================== 3. SECTION LABEL Icon is first in HTML → in RTL row it naturally appears on the right. No flex-direction override needed. Centered labels need explicit centering. =================================== */ [dir="rtl"] .nv2-section-header--center .nv2-section-label { justify-content: center !important; } /* =================================== 4. SECTION HEADER TEXT ALIGNMENT =================================== */ [dir="rtl"] .nv2-section-header:not(.nv2-section-header--center) { text-align: right !important; } /* =================================== 5. RICH-TEXT CONTENT (blog / news body) =================================== */ [dir="rtl"] .nv2-content { text-align: right !important; } [dir="rtl"] .nv2-content ul, [dir="rtl"] .nv2-content ol { padding-left: 0 !important; padding-right: var(--space-lg) !important; } /* =================================== 6. BREADCRUMB In RTL, flex row already flows right→left. flex-start is the right edge → items anchor right. The separator arrow (::after) must point left. =================================== */ [dir="rtl"] .nv2-breadcrumb__list { justify-content: flex-start !important; } [dir="rtl"] .nv2-breadcrumb__item:not(:last-child)::after { transform: rotate(180deg) !important; } /* =================================== 7. CARD & GRID CONTENT — text alignment =================================== */ [dir="rtl"] .nv2-grid-section .nv2-grid-card__content, [dir="rtl"] .nv2-detail-related .nv2-section-header, [dir="rtl"] .nv2-detail-related .nv2-grid-card__content, [dir="rtl"] .nv2-related__header .nv2-section-header, [dir="rtl"] .nv2-related .nv2-grid-card__content, [dir="rtl"] .nv2-news-card__content, [dir="rtl"] .nv2-project-card__content, [dir="rtl"] .nv2-subsidiary-card__content, [dir="rtl"] .nv2-subsidiary-item-card__content, [dir="rtl"] .nv2-contact__info, [dir="rtl"] .nv2-contact__item-content, [dir="rtl"] .nv2-about__text, [dir="rtl"] .nv2-about__feature-text, [dir="rtl"] .nv2-ceo__content, [dir="rtl"] .nv2-ceo__message, [dir="rtl"] .nv2-service-card { text-align: right !important; } /* =================================== 8. SVG ARROW / ICON MIRRORS Directional arrows rendered as SVG must be flipped horizontally in RTL. =================================== */ [dir="rtl"] .nv2-grid-section .nv2-grid-card__view svg, [dir="rtl"] .nv2-related__link svg, [dir="rtl"] .nv2-subsidiary-card__link svg, [dir="rtl"] .nv2-projects__nav-btn svg, [dir="rtl"] .nv2-hero__nav-btn svg { transform: scaleX(-1) !important; } [dir="rtl"] .nv2-subsidiary-card__link:hover svg { transform: scaleX(-1) translateX(-4px) !important; } /* =================================== 9. CONTACT ITEM LABEL =================================== */ [dir="rtl"] .nv2-contact__item-label { display: block !important; letter-spacing: 0 !important; } [dir="rtl"] .nv2-contact__item-value { display: block !important; } /* =================================== 10. SLIDERS — scroll direction =================================== */ [dir="rtl"] .nv2-news__slider { direction: rtl !important; } [dir="rtl"] .nv2-news-card { scroll-snap-align: end !important; } [dir="rtl"] .nv2-projects__slider { direction: rtl !important; } /* =================================== 11. SUBSIDIARY ITEMS =================================== */ [dir="rtl"] .nv2-subsidiary-items__group-title, [dir="rtl"] .nv2-subsidiary-items__grid, [dir="rtl"] .nv2-subsidiary-item-card, [dir="rtl"] .nv2-subsidiary-item-card__meta { direction: rtl; } /* =================================== 12. CEO INFO BLOCK line | name — keep row order, anchor right =================================== */ [dir="rtl"] .nv2-ceo__info { justify-content: flex-start !important; } [dir="rtl"] .nv2-ceo__info-text { align-items: flex-start !important; text-align: right !important; } /* =================================== 13. SERVICE CARD =================================== */ [dir="rtl"] .nv2-service-card::before { transform-origin: right !important; } /* =================================== 14. HERO SECTION — decorative positioning The diagonal accent, progress dots and nav arrows swap sides in RTL. =================================== */ [dir="rtl"] .nv2-hero__slide-overlay { background: linear-gradient(225deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.7) 50%, rgba(10, 10, 10, 0.5) 100%) !important; } [dir="rtl"] .nv2-hero__diagonal { right: auto !important; left: -20% !important; transform: skewX(12deg) !important; } [dir="rtl"] .nv2-hero__progress { left: auto !important; right: var(--space-lg) !important; } [dir="rtl"] .nv2-hero__nav { right: auto !important; left: var(--space-lg) !important; } [dir="rtl"] .nv2-hero .nv2-container { display: flex; } [dir="rtl"] .nv2-hero__content { margin-left: auto !important; margin-right: 0 !important; text-align: right !important; } [dir="rtl"] .nv2-hero__title-word { left: auto !important; right: 0 !important; } /* =================================== 15. HERO LABEL — line position In RTL flex-row, lower order = rightmost (start). Override landing-v2.css which mistakenly sets order:1 (which puts the line on the left). order:-1 ensures the decorative line sits to the RIGHT of the text. =================================== */ [dir="rtl"] .nv2-hero__label::before { order: -1 !important; }