/* ═══════════════════════════════════════════════════════════════ SR Group KSA — Arabic / RTL overrides Applies when is set. Uses [dir="rtl"] selectors so switching back to LTR is instant. ═══════════════════════════════════════════════════════════════ */ /* ── Arabic font (Cairo covers both Arabic & Latin nicely) ── */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap'); [dir="rtl"] { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif; } /* ── Base direction ── */ [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6, [dir="rtl"] span, [dir="rtl"] div { text-align: right; } /* ── Preserve centering for section headers, hero, and text-center elements ── */ [dir="rtl"] .section-header, [dir="rtl"] .section-header *, [dir="rtl"] .text-center, [dir="rtl"] .text-center *, [dir="rtl"] .hero-content, [dir="rtl"] .hero-content * { text-align: center !important; } /* ── Navbar ── */ [dir="rtl"] .navbar .navbar-brand { margin-right: 0; margin-left: auto; } [dir="rtl"] .navbar-nav { padding-right: 0; } [dir="rtl"] .navbar-nav .nav-item { text-align: right; } [dir="rtl"] .navbar-collapse .d-flex { flex-direction: row-reverse; } [dir="rtl"] .dropdown-menu { right: 0 !important; left: auto !important; text-align: right; } [dir="rtl"] .dropdown-menu .dropdown-item { text-align: right; } /* Flip Bootstrap's ms-auto / me-auto helpers */ [dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: unset !important; } [dir="rtl"] .me-auto { margin-left: auto !important; margin-right: unset !important; } /* ── Flex gap / order helpers ── */ [dir="rtl"] .flex-row { flex-direction: row-reverse !important; } [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .me-1,[dir="rtl"] .me-2,[dir="rtl"] .me-3,[dir="rtl"] .me-4 { margin-right: 0 !important; } [dir="rtl"] .ms-1,[dir="rtl"] .ms-2,[dir="rtl"] .ms-3,[dir="rtl"] .ms-4 { margin-left: 0 !important; } [dir="rtl"] .me-1 { margin-left: .25rem !important; } [dir="rtl"] .me-2 { margin-left: .5rem !important; } [dir="rtl"] .me-3 { margin-left: 1rem !important; } [dir="rtl"] .me-4 { margin-left: 1.5rem !important; } [dir="rtl"] .ms-1 { margin-right: .25rem !important; } [dir="rtl"] .ms-2 { margin-right: .5rem !important; } [dir="rtl"] .ms-3 { margin-right: 1rem !important; } [dir="rtl"] .ms-4 { margin-right: 1.5rem !important; } [dir="rtl"] .pe-1,[dir="rtl"] .pe-2,[dir="rtl"] .pe-3,[dir="rtl"] .pe-4 { padding-right: 0 !important; } [dir="rtl"] .ps-1,[dir="rtl"] .ps-2,[dir="rtl"] .ps-3,[dir="rtl"] .ps-4 { padding-left: 0 !important; } [dir="rtl"] .pe-1 { padding-left: .25rem !important; } [dir="rtl"] .pe-2 { padding-left: .5rem !important; } [dir="rtl"] .pe-3 { padding-left: 1rem !important; } [dir="rtl"] .pe-4 { padding-left: 1.5rem !important; } [dir="rtl"] .ps-1 { padding-right: .25rem !important; } [dir="rtl"] .ps-2 { padding-right: .5rem !important; } [dir="rtl"] .ps-3 { padding-right: 1rem !important; } [dir="rtl"] .ps-4 { padding-right: 1.5rem !important; } /* ── Hero section ── */ [dir="rtl"] .hero-content, [dir="rtl"] .hero-text { text-align: right; } [dir="rtl"] .hero-content .d-flex, [dir="rtl"] .hero-btns { flex-direction: row-reverse; justify-content: flex-start; } /* ── Section headers ── */ [dir="rtl"] .section-header, [dir="rtl"] .section-label, [dir="rtl"] .sec-header-wrap { text-align: right; } /* ── Cards ── */ [dir="rtl"] .card-body, [dir="rtl"] .service-card, [dir="rtl"] .industry-card, [dir="rtl"] .job-card { text-align: right; } /* ── Icon + text rows ── */ [dir="rtl"] .d-flex.gap-2, [dir="rtl"] .d-flex.gap-3 { flex-direction: row-reverse; } [dir="rtl"] .d-flex.align-items-center { flex-direction: row-reverse; } /* ── Footer ── */ [dir="rtl"] .main-footer { text-align: right; } [dir="rtl"] .footer-links { text-align: right; } [dir="rtl"] .footer-links a { display: block; text-align: right; } [dir="rtl"] .footer-social-icon { margin-right: 0; margin-left: .75rem; } /* ── Forms ── */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } [dir="rtl"] .form-label { text-align: right; display: block; } [dir="rtl"] .input-group { flex-direction: row-reverse; } [dir="rtl"] .input-group .form-control { border-radius: 0 .375rem .375rem 0 !important; } [dir="rtl"] .input-group .btn { border-radius: .375rem 0 0 .375rem !important; } /* ── Breadcrumb ── */ [dir="rtl"] .breadcrumb { flex-direction: row-reverse; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-right: 0; padding-left: .5rem; content: "/"; } /* ── List groups ── */ [dir="rtl"] .list-group-item { text-align: right; } /* ── Pagination ── */ [dir="rtl"] .pagination { flex-direction: row-reverse; } /* ── Testimonials ── */ [dir="rtl"] .testimonial-card, [dir="rtl"] .testimonial-text { text-align: right; } [dir="rtl"] .testimonial-author { flex-direction: row-reverse; } /* ── Page Banner ── */ [dir="rtl"] .page-banner, [dir="rtl"] .page-banner h1, [dir="rtl"] .page-banner p { text-align: center; } /* ── Stats ── */ [dir="rtl"] .stat-item, [dir="rtl"] .stat-card { text-align: center; } /* ── Job cards ── */ [dir="rtl"] .job-meta, [dir="rtl"] .job-tags { flex-direction: row-reverse; } /* ── Contact page ── */ [dir="rtl"] .contact-info-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .contact-info-item .icon { margin-right: 0; margin-left: 1rem; } /* ── Blog / post ── */ [dir="rtl"] .post-meta { flex-direction: row-reverse; } [dir="rtl"] .post-content { text-align: right; } /* ── MUI Admin overrides ── */ [dir="rtl"] .MuiDrawer-paper { right: 0 !important; left: auto !important; } [dir="rtl"] .MuiListItemIcon-root { margin-right: 0; margin-left: 16px; } [dir="rtl"] .MuiTableCell-root { text-align: right; } [dir="rtl"] .MuiInputBase-root input, [dir="rtl"] .MuiInputBase-root textarea { text-align: right; direction: rtl; } [dir="rtl"] .MuiFormLabel-root { right: 14px; left: auto; transform-origin: top right; } [dir="rtl"] .MuiOutlinedInput-notchedOutline { text-align: right; } [dir="rtl"] .MuiAlert-message { text-align: right; } [dir="rtl"] .MuiChip-label { direction: rtl; } [dir="rtl"] .MuiTab-root { font-family: 'Cairo', sans-serif; } [dir="rtl"] .MuiButton-root { font-family: 'Cairo', sans-serif; } [dir="rtl"] .MuiTypography-root { font-family: 'Cairo', sans-serif; } /* ── Language toggle pill ── */ .lang-toggle { display: inline-flex; align-items: center; border: 1.5px solid rgba(255,255,255,0.55); border-radius: 20px; overflow: hidden; background: transparent; } .lang-toggle-opt { padding: 5px 12px; border: none; background: transparent; color: rgba(255,255,255,0.65); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .18s, color .18s; font-family: 'Cairo', 'Inter', sans-serif; letter-spacing: .3px; white-space: nowrap; line-height: 1; } .lang-toggle-opt:first-child { border-right: 1px solid rgba(255,255,255,0.3); } [dir="rtl"] .lang-toggle-opt:first-child { border-right: none; border-left: 1px solid rgba(255,255,255,0.3); } .lang-toggle-opt--active { background: rgba(255,255,255,0.22); color: #fff; font-weight: 700; } .lang-toggle-opt:hover:not(.lang-toggle-opt--active) { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); } /* dark variant (used on light backgrounds) */ .lang-toggle--dark { border-color: rgba(0,0,0,0.2); } .lang-toggle--dark .lang-toggle-opt { color: rgba(10,30,60,0.45); } .lang-toggle--dark .lang-toggle-opt:first-child { border-right-color: rgba(0,0,0,0.15); } [dir="rtl"] .lang-toggle--dark .lang-toggle-opt:first-child { border-left-color: rgba(0,0,0,0.15); } .lang-toggle--dark .lang-toggle-opt--active { background: rgba(0,0,0,0.09); color: #0A1E3C; } .lang-toggle--dark .lang-toggle-opt:hover:not(.lang-toggle-opt--active) { background: rgba(0,0,0,0.05); color: rgba(10,30,60,0.7); } /* ── Marquee / scroll direction ── */ [dir="rtl"] .client-scroll-wrap { animation-direction: reverse; } /* ── Collapse toggle icon ── */ [dir="rtl"] .dropdown-toggle::after { margin-left: 0; margin-right: .255em; } /* ── Navbar right-side ordering ── */ /* LTR: Switcher | Request | Register | Vision */ .vision-logo { order: 99; } /* RTL (row-reverse): Vision | Request | Register | Switcher */ [dir="rtl"] .vision-logo { order: -1; margin-left: 0; margin-right: 8px; } [dir="rtl"] .lang-toggle { order: 99; } /* ── Top bar ── */ [dir="rtl"] .top-bar { direction: rtl; } /* ── Smooth transition when switching direction ── */ body { transition: direction 0.1s; } /* ═══════════════════════════════════════════════════════════════ ARABIC TYPOGRAPHY OVERRIDES Cairo replaces Syne/Inter for all Arabic headings and text. Letter-spacing is always 0 — positive spacing breaks Arabic cursive joins. Line-heights are increased for Arabic descenders. ═══════════════════════════════════════════════════════════════ */ /* All headings: switch to Cairo, zero letter-spacing, generous line-height */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; letter-spacing: 0 !important; line-height: 1.5 !important; } /* Larger hero/banner titles need slightly more room */ [dir="rtl"] .page-banner-title, [dir="rtl"] .page-title-wrap h1 { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; font-size: clamp(1.7rem, 3.5vw, 2.6rem) !important; line-height: 1.55 !important; letter-spacing: 0 !important; } /* Section titles that normally use Syne display font */ [dir="rtl"] .section-title { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; font-size: clamp(1.55rem, 3vw, 2.1rem) !important; line-height: 1.5 !important; letter-spacing: 0 !important; } /* Hero h1 */ [dir="rtl"] .hero-content h1, [dir="rtl"] .sr-hero2-content h1 { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; font-size: clamp(2rem, 4vw, 2.8rem) !important; line-height: 1.5 !important; letter-spacing: 0 !important; } /* Section header h2 (inner pages) */ [dir="rtl"] .section-header h2 { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; font-size: clamp(1.6rem, 3vw, 2.1rem) !important; line-height: 1.5 !important; letter-spacing: 0 !important; } /* Stat numbers */ [dir="rtl"] .stat-num, [dir="rtl"] .stat-big, [dir="rtl"] .stat-number, [dir="rtl"] .sr-hero2-stat-item h3 { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; letter-spacing: 0 !important; } /* Strip letter-spacing from badges, chips, tags — they break Arabic */ [dir="rtl"] .badge-chip, [dir="rtl"] .chip, [dir="rtl"] .tag, [dir="rtl"] .tag-pill, [dir="rtl"] .svc-badge, [dir="rtl"] .section-header .badge, [dir="rtl"] .sr-hero2-badge { letter-spacing: 0 !important; font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; } /* Body text: Cairo + generous line-height for Arabic */ [dir="rtl"] p { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; line-height: 1.9 !important; letter-spacing: 0 !important; } [dir="rtl"] li, [dir="rtl"] .small, [dir="rtl"] .text-secondary { font-family: 'Cairo', 'Segoe UI', Arial, sans-serif !important; line-height: 1.85 !important; letter-spacing: 0 !important; } /* Page subtitle / sub text */ [dir="rtl"] .page-banner-sub, [dir="rtl"] .section-header p, [dir="rtl"] .page-title-wrap p { line-height: 1.95 !important; } /* Service item body text */ [dir="rtl"] .svc-item-body p { line-height: 1.85 !important; } /* ═══════════════════════════════════════════════════════════════ FULL LAYOUT MIRRORING Every LTR flex row, icon position, glow, hover, and animation is inverted for RTL. ═══════════════════════════════════════════════════════════════ */ /* Page banner glow: top-right → top-left */ [dir="rtl"] .page-banner-glow { right: auto !important; left: -80px; } [dir="rtl"] .page-title-glow { right: auto !important; left: -60px; } /* ── Icon box: align to right side inside cards ── */ [dir="rtl"] .icon-box { margin-left: auto; margin-right: 0; } /* ── Check lists: icon on right, text flows right ── */ [dir="rtl"] .check-list li { flex-direction: row-reverse; text-align: right; } /* ── Danger lists (fraud alert, etc.) ── */ [dir="rtl"] .danger-list li { flex-direction: row-reverse; text-align: right; } /* ── Process steps: number circle on right ── */ [dir="rtl"] .process-step { flex-direction: row-reverse; text-align: right; } /* ── Contact info lines ── */ [dir="rtl"] .contact-line { flex-direction: row-reverse; text-align: right; } /* ── Services page item head (num + icon + body) ── */ [dir="rtl"] .svc-item-head { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .svc-item-body { text-align: right; } [dir="rtl"] .svc-badge-row { flex-direction: row-reverse; } [dir="rtl"] .svc-actions { flex-direction: row-reverse; } /* Feature grid items (icon + text) */ [dir="rtl"] .svc-feat-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .svc-feat-grid { direction: rtl; } /* ── Section headers: left-aligned variant flips to right ── */ [dir="rtl"] .section-header.left, [dir="rtl"] .section-head.left { text-align: right !important; } /* ── Reveal animations: mirror X axis ── */ [dir="rtl"] .reveal-left { transform: translateX(30px); } [dir="rtl"] .reveal-right { transform: translateX(-30px); } [dir="rtl"] .reveal-left.visible, [dir="rtl"] .reveal-right.visible { transform: none; } /* ── Footer hover: slide right instead of left ── */ [dir="rtl"] .footer-links a:hover { transform: translateX(-3px) !important; padding-left: 0; padding-right: 4px; } /* ── Hero2 layout: image on left in RTL (handled via JSX order:2 on .sr-hero2-image) ── */ [dir="rtl"] .sr-hero2-btn-group { flex-direction: row-reverse; } [dir="rtl"] .sr-hero2-stats { flex-direction: row-reverse; } [dir="rtl"] .sr-hero2-content { text-align: right; } [dir="rtl"] .sr-hero2-badge { text-align: right; } /* ── Hero points strip ── */ [dir="rtl"] .hero-points { flex-direction: row-reverse; } /* ── CTA buttons row ── */ [dir="rtl"] .cta-buttons { flex-direction: row-reverse; } /* ── Page banner breadcrumb ── */ [dir="rtl"] .breadcrumb-nav { flex-direction: row-reverse; } /* ── Dropdown hover: slide right not left ── */ [dir="rtl"] .dropdown-item:hover { padding-left: 14px !important; padding-right: 28px !important; } /* ── Table layout ── */ [dir="rtl"] table { direction: rtl; } [dir="rtl"] th, [dir="rtl"] td { text-align: right !important; } /* ── Job / browse page filter row ── */ [dir="rtl"] .job-filter-row { flex-direction: row-reverse; } /* ── Scale card body icons ── */ [dir="rtl"] .scale-card-body i { display: block; text-align: right; } /* ── Highlight box ── */ [dir="rtl"] .highlight-box { text-align: right; } /* ── Warning box (fraud alert) ── */ [dir="rtl"] .warning-box { text-align: right; } /* ── Report box ── */ [dir="rtl"] .report-box { text-align: right; } /* ── Industry cards: keep centered ── */ [dir="rtl"] .industry-card { text-align: center; } /* ── Gap-4 flex rows ── */ [dir="rtl"] .d-flex.gap-4 { flex-direction: row-reverse; } /* ── Flex-wrap button groups ── */ [dir="rtl"] .d-flex.flex-wrap { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════════════════════ Global mobile overflow fix (applies to both LTR & RTL) Fixes horizontal "jump" while scrolling on phones — caused by flex children (esp. hero images) not shrinking below their natural content width on narrow viewports. ═══════════════════════════════════════════════════════════════ */ html, body { overflow-x: hidden; max-width: 100%; } img, svg, video { max-width: 100%; height: auto; } .sr-hero2-grid, .sr-hero2-content, .sr-hero2-image, .hero-content, .row, [class*="col-"] { min-width: 0; } @media (max-width: 800px) { .sr-hero2-image { flex: 1 1 100%; padding: 16px; } .sr-hero2-content { flex: 1 1 100%; } .sr-hero2-content p { max-width: 100%; } } /* ── mt-4 / mt-3 action button groups inside cards ── */ [dir="rtl"] .mt-4.d-flex, [dir="rtl"] .mt-3.d-flex { flex-direction: row-reverse; }