/* ============================================================ MSSC — RTL / Arabic overrides Loaded ONLY when the active language is Arabic (see _Layout / _TrainingLayout). The attribute already flips flex/inline order and logical alignment; this file fixes the remaining *physical* (left/right) declarations and swaps the Latin typefaces for an Arabic one. ============================================================ */ /* ---- Arabic typography ------------------------------------------------ */ :root { --font-primary: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Tajawal', 'Inter', sans-serif; } body { direction: rtl; text-align: right; font-family: var(--font-primary); letter-spacing: 0; /* Tajawal needs no tracking */ } /* Keep Latin/numeric content (phone, email, WhatsApp) left-to-right inside RTL so "+966 11 450 0896" is not reordered by the bidi algorithm. */ a[href^="tel:"], a[href^="mailto:"], a[href*="wa.me"], .ltr-text { direction: ltr; unicode-bidi: embed; } /* ---- Generic alignment flips ----------------------------------------- */ .about-content .section-label, .about-content .section-title, .author-info { text-align: right; } /* ---- Header / navigation --------------------------------------------- */ .nav-cta { margin-left: 0; margin-right: 12px; } /* Job detail badges */ .badge-department, .badge-type { margin-right: 0; margin-left: 10px; } .dropdown li a:hover { padding-left: 0; padding-right: 28px; } .footer-links ul li a:hover { padding-left: 0; padding-right: 5px; } /* ---- Hero floating cards (swap sides) -------------------------------- */ .hero-float-card.card-1 { left: auto; right: -40px; } .hero-float-card.card-2 { right: auto; left: -40px; } /* ---- About experience badge ------------------------------------------ */ .about-experience { right: auto; left: -24px; } /* ---- Testimonial quote mark ------------------------------------------ */ .testimonial-card::before { left: auto; right: 40px; } /* ---- Category icon ---------------------------------------------------- */ .category-icon { right: auto; left: 20px; } /* ---- Case study detail section icon ---------------------------------- */ .section-icon { left: auto; right: 30px; } /* ---- Training program badges (swap corners) -------------------------- */ .program-badge { left: auto; right: 15px; } .cert-badge { right: auto; left: 15px; } .featured-badge { left: auto; right: 15px; } /* ---- Program detail module list ------------------------------------- */ .module-topics { padding-left: 20px; padding-right: 75px; } .module-topics ul { padding-left: 0; padding-right: 20px; } /* ---- Breadcrumb separator -------------------------------------------- */ .page-hero .breadcrumb-item + .breadcrumb-item::before { margin-right: 0; margin-left: 8px; } /* ---- Accent borders (left → right) ----------------------------------- */ .training-connection-card, .connection-tagline, .offer-card .offer-suitable, .solution-row, .problem-row, .snapshot-card, .trainers-callout { border-left: none; border-right: 4px solid var(--secondary); } .offer-card .offer-suitable, .solution-row, .problem-row, .snapshot-card { border-right-width: 3px; border-right-color: var(--primary); } .solution-row-training { border-right-color: var(--secondary); } /* Legal/policy pages */ .policy-content ul { padding-left: 0; padding-right: 20px; } .policy-info-box { border-left: none; border-right: 4px solid var(--primary); } .cookie-table th { text-align: right; } .comparison-table th:first-child, .comparison-table td:first-child { text-align: right; } /* Engagement snapshot result list (check icon switches side) */ .snapshot-results li { padding: 4px 22px 4px 0; } .snapshot-results li i { left: auto; right: 0; } /* ---- FAQ accordion --------------------------------------------------- */ .faq-item summary { padding-right: 22px; padding-left: 44px; } .faq-item summary::after { right: auto; left: 22px; } /* ---- Offer deliverables checklist ------------------------------------ */ .offer-card .offer-deliverables li { padding: 5px 0 5px 0; padding-right: 22px; } .offer-card .offer-deliverables li::before { left: auto; right: 0; } /* ---- Bootstrap-style spacing utilities (start/end semantics) --------- */ .me-1 { margin-right: 0; margin-left: 0.25rem; } .me-2 { margin-right: 0; margin-left: 0.5rem; } .me-3 { margin-right: 0; margin-left: 1rem; } .me-4 { margin-right: 0; margin-left: 1.5rem; } .me-5 { margin-right: 0; margin-left: 3rem; } .ms-1 { margin-left: 0; margin-right: 0.25rem; } .ms-2 { margin-left: 0; margin-right: 0.5rem; } .ms-3 { margin-left: 0; margin-right: 1rem; } .ms-4 { margin-left: 0; margin-right: 1.5rem; } .ms-5 { margin-left: 0; margin-right: 3rem; } /* ---- Directional arrow glyphs (mirror for RTL reading) --------------- */ .btn .fa-arrow-right, .btn .fa-arrow-left, .btn .fa-long-arrow-alt-right, .btn .fa-long-arrow-alt-left, .btn .fa-chevron-right, .btn .fa-chevron-left, .hero-buttons .fa-arrow-right, .read-more .fa-arrow-right, .back-to-main .fa-arrow-left, .dir-arrow { display: inline-block; transform: scaleX(-1); } /* service-link arrow: keep the mirror and combine with the hover slide */ .service-link i { display: inline-block; transform: scaleX(-1); } .service-link:hover i { transform: scaleX(-1) translateX(5px); } /* ---- Home page inline-styled components ------------------------------ */ .case-study-industry, .insight-category { left: auto; right: 15px; } .case-study-results i { margin-right: 0; margin-left: 8px; }