/* ============================================================ IT Realms — rtl.css Right-to-Left overrides for the Arabic version of the site. Usage: Add dir="rtl" lang="ar" to on Arabic pages and include this file AFTER all other CSS files. Structure: 1. Arabic Typography 2. Layout & Frame 3. Navigation 4. Mobile Nav Drawer 5. Mega Nav Panel 6. Hero Section 7. Section Headers & Eyebrow 8. Home — Mission 9. Home — Sectors 10. Home — Delivery Model 11. Home — Services 12. Home — Trust / Clients 13. Credibility Strip 14. Footer 15. UI Library — Marquee 16. UI Library — Sidebar 17. UI Library — Space Section 18. UI Library — Scroll Gallery & Dark Gallery 19. Buttons, CTAs & Arrows 20. Transform Origins & Gradient Bars 21. Back-to-Top 22. Page-Specific: Services / Solutions / About / Blog ============================================================ */ /* ============================================================ 1. ARABIC TYPOGRAPHY Cairo: clean, modern Arabic typeface that pairs well with the existing Oswald / Inter / Orbitron design system. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap'); [dir="rtl"] { font-family: 'Cairo', 'Inter', sans-serif; } [dir="rtl"] body { font-family: 'Cairo', 'Inter', sans-serif; /* Slightly larger base size — Arabic text reads better slightly larger */ font-size: 1.02em; line-height: 1.85; } /* Headings: keep Oswald for Latin numerals/brand names, fall back to Cairo for Arabic text */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: 'Cairo', var(--font-heading), sans-serif; line-height: 1.3; } /* Mono / eyebrow text — use Cairo for Arabic labels */ [dir="rtl"] .section-eyebrow, [dir="rtl"] .ui-marquee-label, [dir="rtl"] .ui-nav-link, [dir="rtl"] .home-stat-number, [dir="rtl"] .cred-kpi-val { font-family: 'Cairo', var(--font-mono), sans-serif; letter-spacing: 0; /* Arabic doesn't use letter-spacing */ } /* All eyebrow / section-label classes: doubled for better readability in Arabic */ [dir="rtl"] .section-eyebrow { font-size: 1.44rem; } /* 0.72rem × 2 */ [dir="rtl"] .ui-fs-eyebrow { font-size: 1.36rem; } /* 0.68rem × 2 */ [dir="rtl"] .ui-stats-full-eyebrow { font-size: 1.40rem; } /* 0.70rem × 2 */ [dir="rtl"] .itr-eyebrow { font-size: 1.12rem; } /* 0.56rem × 2 */ [dir="rtl"] .srv-hero-eyebrow { font-size: 1.24rem; } /* 0.62rem × 2 */ [dir="rtl"] .srv-pillar-eyebrow { font-size: 1.20rem; } /* 0.60rem × 2 */ [dir="rtl"] .sol-hero-eyebrow { font-size: 1.24rem; } /* 0.62rem × 2 */ [dir="rtl"] .about-hero-eyebrow { font-size: 1.24rem; } /* 0.62rem × 2 */ [dir="rtl"] .msp-hero-eyebrow { font-size: 1.24rem; } /* 0.62rem × 2 */ [dir="rtl"] .port-hero-eyebrow { font-size: 1.24rem; } /* 0.62rem × 2 */ [dir="rtl"] .cntct-hero-eyebrow { font-size: 1.24rem; } /* 0.62rem × 2 */ [dir="rtl"] .careers-hero-eyebrow { font-size: 1.50rem; } /* 0.75rem × 2 */ [dir="rtl"] .careers-why-eyebrow { font-size: 1.50rem; } /* 0.75rem × 2 */ [dir="rtl"] .careers-cta-eyebrow { font-size: 1.50rem; } /* 0.75rem × 2 */ [dir="rtl"] .blog-hero-eyebrow { font-size: 1.50rem; } /* 0.75rem × 2 */ [dir="rtl"] .blog-newsletter-eyebrow { font-size: 1.50rem; } /* 0.75rem × 2 */ [dir="rtl"] .team-hero-eyebrow { font-size: 1.50rem; } /* 0.75rem × 2 */ [dir="rtl"] .team-cta-eyebrow { font-size: 1.50rem; } /* 0.75rem × 2 */ /* ============================================================ 2. LAYOUT & FRAME Body was indented 22px left for the frame strip. In RTL the frame moves to the right side. ============================================================ */ @media (min-width: 1250px) { [dir="rtl"] body { padding-left: 0; padding-right: 22px; } } /* Left frame strip → right side */ [dir="rtl"] .itr-frame--left { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(38, 204, 202, 0.1); } /* Frame lang link on Arabic pages: "English" reads naturally upward */ [dir="rtl"] .itr-frame-lang { letter-spacing: 0.04em; font-family: 'Cairo', var(--font-body), sans-serif; } /* Mega toggle inside frame: width fills strip */ [dir="rtl"] .itr-frame--left .itr-mega-toggle { width: 100%; } /* ============================================================ 3. NAVIGATION ============================================================ */ /* Flip the nav bar content order */ [dir="rtl"] .ui-nav-inner { flex-direction: row-reverse; } /* Nav links: direction:rtl (inherited from html) already flows items right→left naturally. No flex-direction override needed — adding row-reverse here would double-reverse back to LTR. */ /* Logo: no special margin needed after row-reverse */ [dir="rtl"] .ui-nav-logo { margin-right: 0; margin-left: 0; } /* Nav actions: keep right side items on the left in RTL */ [dir="rtl"] .ui-nav-actions { flex-direction: row-reverse; } /* Dropdown arrow chevron spacing */ [dir="rtl"] .ui-nav-chevron { margin-left: 0; margin-right: 2px; } /* Dropdown panel: flip position to open from right in RTL */ [dir="rtl"] .ui-dropdown-menu { left: auto; right: 50%; transform: translateX(50%) translateY(6px); border-left: none; border-right: 2px solid var(--teal); } [dir="rtl"] li.ui-nav-dropdown:hover .ui-dropdown-menu { transform: translateX(50%) translateY(0); } /* Mega panel toggle spacing in nav (tablet fallback) */ [dir="rtl"] .itr-mega-toggle--nav { margin-right: 0; margin-left: 8px; } /* CTA button */ [dir="rtl"] .ui-nav-cta { margin-left: 0; margin-right: 8px; } /* Scroll progress bar: stays at top, no change needed */ /* ============================================================ 4. MOBILE NAV DRAWER Currently slides in from the RIGHT (translateX(100%)). In RTL it should slide in from the LEFT. ============================================================ */ @media (max-width: 860px) { [dir="rtl"] .ui-nav-links { right: auto; left: 0; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1); } [dir="rtl"] .ui-nav-links.is-open { transform: translateX(0); } /* Burger button: flip spans for RTL hamburger feel */ [dir="rtl"] .ui-nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(-45deg); } [dir="rtl"] .ui-nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(45deg); } /* Mobile dropdown panel: indent from right */ [dir="rtl"] .ui-dropdown-menu { right: 0; left: auto; transform: none; border-right: 2px solid var(--teal); border-left: none; padding-right: 16px; padding-left: 0; } [dir="rtl"] li.ui-nav-dropdown:hover .ui-dropdown-menu { transform: none; } } /* ============================================================ 5. MEGA NAV PANEL Panel itself is full-screen, just set direction. ============================================================ */ [dir="rtl"] .itr-mega-panel { direction: rtl; text-align: right; } [dir="rtl"] .itr-mega-close { right: auto; left: 2rem; } [dir="rtl"] .itr-mega-tile-label, [dir="rtl"] .itr-mega-tile-title { text-align: right; } /* ============================================================ 6. HERO SECTION ============================================================ */ /* Slide content: center for Arabic (matches base hero.css default). The --right and default variants both become centered in Arabic. */ [dir="rtl"] .itr-hero .itr-slide-content, [dir="rtl"] .itr-hero .itr-slide-content.itr-slide-content--right { left: 50%; right: auto; transform: translate(-50%, calc(-50% + 40px)); text-align: center; align-items: center; } [dir="rtl"] .itr-hero .itr-slide-content.itr-slide-content--center { right: 50%; left: auto; transform: translate(50%, -50%); text-align: center; align-items: center; } /* Arrows: swap sides */ [dir="rtl"] .itr-hero .itr-arrow--prev { left: auto; right: 1.8rem; } [dir="rtl"] .itr-hero .itr-arrow--next { right: auto; left: 1.8rem; } /* Flip arrow icons to match their new RTL positions */ [dir="rtl"] .itr-hero .itr-arrow svg { transform: scaleX(-1); } @media (max-width: 900px) { [dir="rtl"] .itr-hero .itr-arrow--prev { left: auto; right: 0.8rem; } [dir="rtl"] .itr-hero .itr-arrow--next { right: auto; left: 0.8rem; } } /* Counter (slide number): swap to left, keep numerals LTR */ [dir="rtl"] .itr-hero .itr-counter { right: auto; left: 2.5rem; direction: ltr; } /* Scroll cue: swap to right */ [dir="rtl"] .itr-hero .itr-scroll-cue { left: auto; right: 2.5rem; } /* Progress bar: grows from right */ [dir="rtl"] .itr-hero .itr-progress-bar { transform-origin: right; } /* Tags, actions, stats: centered in Arabic slider */ [dir="rtl"] .itr-hero .itr-tags { justify-content: center; } [dir="rtl"] .itr-hero .itr-actions { justify-content: center; } [dir="rtl"] .itr-hero .itr-stats { justify-content: center; } /* Hero CTA pill */ [dir="rtl"] .itr-hero-cta-pill { flex-direction: row-reverse; } /* ============================================================ 7. SECTION HEADERS & EYEBROW ============================================================ */ /* Eyebrow: line (::before) stays first in DOM → naturally on the right in RTL flex row */ /* Centered eyebrows stay centered — no change needed */ /* Section header: default text alignment */ [dir="rtl"] .ui-section-header:not(.text-center) { text-align: right; } [dir="rtl"] .ui-section-header:not(.text-center) .section-eyebrow { justify-content: flex-start; /* flex-start in RTL = pack at right edge */ } /* Section lead */ [dir="rtl"] .ui-section-lead { text-align: right; } /* ============================================================ 8. HOME — MISSION SECTION ============================================================ */ [dir="rtl"] .home-mission-text { text-align: right; } [dir="rtl"] .msn-proof-block { text-align: right; /* RTL flex row naturally puts accent (first child) on the right edge */ } /* Stats: left-align content becomes right-align */ [dir="rtl"] .home-mission-stat { align-items: flex-end; text-align: right; } /* Stat card top accent: flip gradient direction */ [dir="rtl"] .home-mission-stat { border-top: 3px solid var(--teal); border-right: 1px solid var(--border); border-left: 1px solid var(--border); } [dir="rtl"] .home-mission-stat::before { background: linear-gradient(270deg, var(--teal) 0%, transparent 80%); } /* CTA link: RTL flex-direction:row already puts arrow on the left; row-reverse would double-reverse it back to the wrong side, so no override needed here. */ /* ============================================================ 9. HOME — SECTORS SECTION ============================================================ */ [dir="rtl"] .home-sector-card { text-align: right; } /* sc-top: RTL row already places icon on right — no override needed */ [dir="rtl"] .home-sector-card::before { background: linear-gradient(to left, var(--teal), transparent); transform-origin: right; } /* sc-footer: RTL row already places text on right, arrow on left — no override needed */ [dir="rtl"] .sc-caps { justify-content: flex-end; } [dir="rtl"] .sc-ghost-num { right: auto; left: 20px; } /* ============================================================ 10. HOME — DELIVERY MODEL ============================================================ */ [dir="rtl"] .hdel-split { direction: rtl; } /* hdel-phase: direction:rtl (inherited from hdel-split) already makes flex-direction:row flow right→left, so marker lands on the right naturally. row-reverse would double-reverse it back to the wrong side. */ [dir="rtl"] .hdel-phase { text-align: right; } [dir="rtl"] .hdel-phase-info { align-items: flex-end; } [dir="rtl"] .hdel-panel { text-align: right; direction: rtl; } [dir="rtl"] .hdel-panel-ghost { right: auto; left: 32px; } /* deliverables & outcome: direction:rtl on parent already puts icon on right; row-reverse would double-reverse, landing the icon on the left. */ [dir="rtl"] .hdel-deliverables li { /* no flex-direction override needed — RTL row is correct */ } [dir="rtl"] .hdel-outcome { /* no flex-direction override needed — RTL row is correct */ } /* Phase left connector: no order override — RTL row already puts it on the right */ [dir="rtl"] .hdel-phase-left { /* order removed — was fighting the correct RTL layout */ } /* ============================================================ 11. HOME — SERVICES SECTION ============================================================ */ [dir="rtl"] .hsv-card { text-align: right; } /* hsv-top: RTL row already places icon on right — no override needed */ [dir="rtl"] .hsv-card::before { transform-origin: right; background: linear-gradient(to left, var(--teal), transparent); } [dir="rtl"] .hsv-card-accent { transform-origin: right; background: linear-gradient(to left, var(--teal), transparent); } /* hsv-footer: RTL row already places text on right, arrow on left — no override needed */ [dir="rtl"] .hsv-tags { justify-content: flex-end; } [dir="rtl"] .hsv-ghost { right: auto; left: 16px; } /* ============================================================ 12. HOME — TRUST BAND & CLIENTS BAR ============================================================ */ [dir="rtl"] .home-clients-row { flex-direction: row-reverse; } [dir="rtl"] .home-client-item { text-align: right; } [dir="rtl"] .htb-items { flex-direction: row-reverse; } /* ============================================================ 13. CREDIBILITY STRIP ============================================================ */ [dir="rtl"] .cred-strip-inner { flex-direction: row-reverse; } [dir="rtl"] .cred-kpi { align-items: center; } /* stay centered */ /* ============================================================ 14. FOOTER ============================================================ */ [dir="rtl"] .ui-footer-grid { direction: rtl; } [dir="rtl"] .ui-footer-col { text-align: right; } [dir="rtl"] .ui-footer-col ul { padding-right: 0; } /* Footer logo: flip any left margin */ [dir="rtl"] .ui-footer-brand { text-align: right; } /* ============================================================ 15. UI LIBRARY — MARQUEE Reverse scroll direction for RTL. ============================================================ */ [dir="rtl"] .ui-marquee-track { animation-name: marqueeScrollRTL; } @keyframes marqueeScrollRTL { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } /* Fade masks: flip sides */ [dir="rtl"] .ui-marquee-section::before { left: auto; right: 0; background: linear-gradient(to left, #050510, transparent); } [dir="rtl"] .ui-marquee-section::after { right: auto; left: 0; background: linear-gradient(to right, #050510, transparent); } /* ============================================================ 16. UI LIBRARY — SIDEBAR ============================================================ */ [dir="rtl"] .ui-sidebar-link { border-left: none; border-right: 3px solid transparent; border-radius: 8px 0 0 8px; padding-left: 0; padding-right: 16px; text-align: right; } [dir="rtl"] .ui-sidebar-link:hover, [dir="rtl"] .ui-sidebar-link.active { border-right-color: var(--teal); border-left-color: transparent; } [dir="rtl"] .ui-sidebar-heading { padding-left: 0; padding-right: 16px; text-align: right; } [dir="rtl"] .ui-page-with-sidebar { direction: rtl; } /* ============================================================ 17. UI LIBRARY — SPACE SECTION (CTA on all pages) ============================================================ */ [dir="rtl"] .ui-space-content { text-align: right; direction: rtl; } [dir="rtl"] .ui-space-content .cta-btn-group { justify-content: center; } /* home-cta: override home.css specificity (0,2,0) with (0,2,1) so text aligns right */ [dir="rtl"] .home-cta .ui-space-content { text-align: right; direction: rtl; } [dir="rtl"] .home-cta .section-eyebrow { justify-content: flex-end !important; /* flex-end in RTL = right side */ margin-right: 0 !important; margin-left: unset !important; } [dir="rtl"] .home-cta .cta-btn-group { justify-content: center; } [dir="rtl"] .home-cta-stats { direction: rtl; justify-content: flex-start; /* flex-start in RTL = pack at right edge */ } /* Nebulas: mirror positions */ [dir="rtl"] .ui-space-nebula--blue { left: auto; right: 10%; } [dir="rtl"] .ui-space-nebula--teal { right: auto; left: 10%; } /* ============================================================ 18. UI LIBRARY — SCROLL GALLERY & DARK GALLERY ============================================================ */ /* Scroll gallery fades: flip */ [dir="rtl"] .ui-scroll-track::before { left: auto; right: 0; background: linear-gradient(to left, var(--dark) 0%, transparent 100%); } [dir="rtl"] .ui-scroll-track::after { right: auto; left: 0; background: linear-gradient(to right, var(--dark) 0%, transparent 100%); } [dir="rtl"] .ui-scroll-card-arrow { right: auto; left: 1.25rem; transform: translateX(-4px); } [dir="rtl"] .ui-scroll-card:hover .ui-scroll-card-arrow { transform: translateX(0); } /* Dark gallery arrow */ [dir="rtl"] .ui-dg-arrow { right: auto; left: 1rem; transform: translate(-6px, -6px); } [dir="rtl"] .ui-dg-card:hover .ui-dg-arrow { transform: translate(0, 0); } [dir="rtl"] .ui-dg-content { text-align: right; } /* Search overlay close */ [dir="rtl"] .ui-search-overlay__close { right: auto; left: 0.875rem; } /* ============================================================ 19. BUTTONS, CTAs & ARROWS ============================================================ */ /* Generic arrow-right icons in CTA links: flip */ [dir="rtl"] .msn-cta-link svg, [dir="rtl"] .sc-footer svg, [dir="rtl"] .hsv-footer svg, [dir="rtl"] .btn-arrow { transform: scaleX(-1); } /* Flip all lucide arrow-right icons in RTL context (forward = left in Arabic) */ [dir="rtl"] .lucide-arrow-right { transform: scaleX(-1); display: inline-block; } /* Primary / ghost buttons: reverse icon+label order */ [dir="rtl"] .itr-btn, [dir="rtl"] .ui-btn, [dir="rtl"] .ui-cta-btn { flex-direction: row-reverse; } /* CTA section button group */ [dir="rtl"] .cta-btn-group { flex-direction: row-reverse; justify-content: center; } /* Card block links */ [dir="rtl"] .ui-card-block-link { direction: rtl; } /* ============================================================ 20. TRANSFORM ORIGINS & GRADIENT BARS All elements that scale from the left now scale from right. ============================================================ */ [dir="rtl"] .ui-feature-accent, [dir="rtl"] .itr-progress-bar, [dir="rtl"] .hcap-gradient-bar, [dir="rtl"] .hsv-gradient-bar, [dir="rtl"] .ui-scroll-progress { transform-origin: right; } /* Gradient bars: flip direction */ [dir="rtl"] .hcap-gradient-bar, [dir="rtl"] .hsv-gradient-bar { background: linear-gradient(to left, var(--teal), transparent); } /* Accordion / FAQ expansion bars */ [dir="rtl"] .ui-faq-bar { transform-origin: right; } [dir="rtl"] .ui-faq-question { text-align: right; } /* Pricing plan border */ [dir="rtl"] .ui-pricing-plan { border-right: none; border-left: 1px solid rgba(38, 204, 202, 0.08); } /* Timeline: flip indent */ /* ui-timeline: mirror the entire structure to the right side */ [dir="rtl"] .ui-timeline { padding-left: 0; padding-right: 32px; /* mirrors LTR padding-left: 32px */ } [dir="rtl"] .ui-timeline::before { left: auto; right: 8px; /* line on right edge, mirrors LTR left: 8px */ background: linear-gradient(to bottom, var(--teal), rgba(38,204,202,0.1)); } [dir="rtl"] .ui-timeline-item { padding-left: 0; padding-right: 28px; /* mirrors LTR padding-left: 28px */ } [dir="rtl"] .ui-timeline-marker { left: auto; right: -32px; /* mirrors LTR left: -32px — centers dot on the right line */ } [dir="rtl"] .ui-timeline-date { text-align: right; } [dir="rtl"] .ui-timeline-desc { text-align: right; } /* ============================================================ 21. BACK-TO-TOP Moves from bottom-right to bottom-left. ============================================================ */ [dir="rtl"] .ui-back-to-top, [dir="rtl"] #uiBackToTop { right: auto; left: 28px; } @media (max-width: 1249px) { [dir="rtl"] .ui-back-to-top, [dir="rtl"] #uiBackToTop { left: 20px; right: auto; } } @media (max-width: 860px) { [dir="rtl"] .ui-back-to-top, [dir="rtl"] #uiBackToTop { left: 16px; right: auto; } } /* ============================================================ 22. PAGE-SPECIFIC OVERRIDES ============================================================ */ /* — About — */ [dir="rtl"] .about-hero-content { text-align: right; } [dir="rtl"] .about-hero-stats { justify-content: flex-start; } [dir="rtl"] .about-grid { direction: rtl; } [dir="rtl"] .itr-split-pane { flex-direction: row-reverse; } [dir="rtl"] .itr-split-pane__left { border-left: none; border-right: 3px solid var(--teal); } /* — Services — */ [dir="rtl"] .srv-hero-content { text-align: right; } [dir="rtl"] .srv-card-grid { direction: rtl; } [dir="rtl"] .srv-pillar-header { text-align: right; } /* — Solutions — */ [dir="rtl"] .sol-hero-content { text-align: right; } [dir="rtl"] .sol-split { direction: rtl; } [dir="rtl"] .sol-split--reverse { direction: ltr; } /* re-reverses to correct visual order */ /* How-We-Work step connectors: flip direction so lines point left (next step in RTL) */ [dir="rtl"] .sol-how-line { left: calc(-50% + 28px); right: calc(50% + 28px); background: linear-gradient(270deg, var(--teal) 0%, rgba(0,210,200,0.2) 100%); } /* — Portfolio — */ [dir="rtl"] .port-hero-content { text-align: right; } [dir="rtl"] .pf-deepdive-card { text-align: right; direction: rtl; } /* Flip decorative float screenshots to left side in RTL */ [dir="rtl"] .port-hero-float:nth-child(1) { right: auto; left: 8%; } [dir="rtl"] .port-hero-float:nth-child(2) { right: auto; left: 20%; } [dir="rtl"] .port-hero-float:nth-child(3) { right: auto; left: 5%; } /* — Blog — */ [dir="rtl"] .blog-featured-content { text-align: right; } [dir="rtl"] .blog-card { text-align: right; } /* — Contact — */ [dir="rtl"] .cntct-grid { direction: rtl; } [dir="rtl"] .cntct-info-card { text-align: right; } [dir="rtl"] .cntct-form-wrap { text-align: right; direction: rtl; } /* — Team — */ [dir="rtl"] .team-hero { text-align: right; } [dir="rtl"] .team-card { text-align: right; } /* — Careers — */ [dir="rtl"] .careers-hero { text-align: right; direction: rtl; } [dir="rtl"] .job-card { text-align: right; direction: rtl; } /* — MSP — */ [dir="rtl"] .msp-hero-content { text-align: right; direction: rtl; } [dir="rtl"] .msp-advantage-grid { direction: rtl; } [dir="rtl"] .msp-tier-grid { direction: rtl; } [dir="rtl"] .msp-timeline-item { text-align: right; direction: rtl; } /* — Feature matrix tables — */ [dir="rtl"] .feature-matrix th:first-child, [dir="rtl"] .feature-matrix td:first-child { text-align: right; } /* ============================================================ 23. MISSING TEXT-ALIGN OVERRIDES ============================================================ */ /* Pricing tier feature lists */ [dir="rtl"] .tier-features { text-align: right; } /* Page-specific FAQ accordion button */ [dir="rtl"] .faq-btn { text-align: right; } /* MSP deep-dive card lists */ [dir="rtl"] .msp-deep-card-list { text-align: right; } /* Services metrics — mobile layout (max-width: 640px) */ @media (max-width: 640px) { [dir="rtl"] .srv-metric { text-align: right; } } /* About page milestone year — mobile layout */ @media (max-width: 768px) { [dir="rtl"] .ui-milestone-year { text-align: right; } } /* ============================================================ 24. CARD CENTERING — icons, titles, descriptions, links ============================================================ */ /* ui-feature-card (white cards used in solution/service sections) */ /* Use inline-flex so the parent's text-align:center centers the icon box */ [dir="rtl"] .ui-feature-icon { display: inline-flex; margin-left: auto; margin-right: auto; } [dir="rtl"] .ui-feature-card h4 { text-align: center; } [dir="rtl"] .ui-feature-card p { text-align: center; } /* ui-card (service/solution cards with icon-wrap) */ [dir="rtl"] .ui-card { text-align: center; } [dir="rtl"] .ui-card-icon-wrap { display: inline-flex; margin-left: auto; margin-right: auto; } [dir="rtl"] .ui-card-title { text-align: center; } [dir="rtl"] .ui-card-desc { text-align: center; } [dir="rtl"] .ui-card-link { text-align: center; display: block; } /* ui-benefit-card (why-choose-us sections) */ [dir="rtl"] .ui-benefit-card { text-align: center; } [dir="rtl"] .ui-benefit-icon-wrap { display: inline-flex; margin-left: auto; margin-right: auto; } [dir="rtl"] .ui-benefit-title { text-align: center; } [dir="rtl"] .ui-benefit-desc { text-align: center; } /* srv-card (managed services / service overview cards) */ /* .srv-card already has text-align:center globally — just fix the icon */ [dir="rtl"] .srv-card-icon { display: inline-flex; margin-left: auto; margin-right: auto; } /* reach-card (about page reach section) */ [dir="rtl"] .reach-card { text-align: center; } [dir="rtl"] .reach-card-icon { display: inline-flex; margin-left: auto; margin-right: auto; } /* msp-deep-card */ /* .msp-deep-card already has text-align:center globally — just fix the icon */ [dir="rtl"] .msp-deep-card-icon { display: inline-flex; margin-left: auto; margin-right: auto; } /* Section CTA button groups */ [dir="rtl"] .cta-btn-group { justify-content: center; } /* ============================================================ 25. ACCENT BARS, BORDERS & DECORATIVE LINES ============================================================ */ /* Hover accent bars on feature cards and service cards — scale from right in RTL instead of from left */ [dir="rtl"] .ui-feature-accent, [dir="rtl"] .ui-card-accent, [dir="rtl"] .hsv-card-accent, [dir="rtl"] .home-sector-card::before { transform-origin: right; } /* Nav link underline grows from right in RTL */ [dir="rtl"] .ui-nav-links > li > a::after { transform-origin: right; } /* Recovery tier cards: teal accent border flips to right side */ [dir="rtl"] .recovery-card { border-left: 1px solid var(--border); border-right: 3px solid var(--teal); } /* Subsection labels: teal left-border + padding flip to right side */ [dir="rtl"] .subsection-label { border-left: none; border-right: 3px solid var(--teal); padding: 4px 12px 4px 0; text-align: right; } [dir="rtl"] .subsection-label.yellow { border-right-color: var(--yellow); } /* Delivery model phase list: active indicator flips to right side */ [dir="rtl"] .hdel-phase { border-left: none; border-right: 3px solid transparent; } [dir="rtl"] .hdel-phase.active { border-right-color: var(--teal); } @media (max-width: 860px) { [dir="rtl"] .hdel-phase.active { border-right: none; border-bottom: 3px solid var(--teal); } } /* Mission proof accent bar: flex order puts it on the right in RTL */ [dir="rtl"] .msn-proof-accent { order: 1; /* move after the text content (which is order 0 by default) */ background: linear-gradient(180deg, var(--teal), transparent); } /* Ecosystem flow line: padding flips to right side */ [dir="rtl"] .eco-flow-line { padding: 10px 112px 10px 0; } @media (max-width: 820px) { [dir="rtl"] .eco-flow-line { padding: 10px 84px 10px 0; } } @media (max-width: 560px) { [dir="rtl"] .eco-flow-line { padding: 10px 16px 10px 0; } } /* ============================================================ END OF RTL OVERRIDES ============================================================ */