/* ========================================================================== Right-to-left layer for Arabic (). Loaded ONLY on Arabic pages (see head.ejs), so every rule may assume RTL. Covers: self-hosted Arabic webfont, text direction, alignment, float and horizontal-spacing mirroring, and the key custom components. Flexbox rows reverse automatically under dir="rtl", so most header/footer layout flips for free. ========================================================================== */ /* ---- Cairo (Arabic + Latin), self-hosted — no external request ---------- */ @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/cairo-normal-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/cairo-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/cairo-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Arabic typography --------------------------------------------------- */ html[dir="rtl"] { --it-ff-body: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --it-ff-heading: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; } [dir="rtl"] body { direction: rtl; text-align: right; font-family: var(--it-ff-body); /* Keep Arabic shaping intact; theme letter-spacing breaks connected letters */ letter-spacing: normal; word-spacing: normal; text-rendering: optimizeLegibility; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .it-section-title, [dir="rtl"] .it-slider-title, [dir="rtl"] .it-breadcrumb-title, [dir="rtl"] .it-section-subtitle, [dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] button, [dir="rtl"] .it-btn-orange, [dir="rtl"] .it-btn-black, [dir="rtl"] .it-btn-white, [dir="rtl"] .aramko-topbar__text, [dir="rtl"] .itoffcanvas__info-address > span:first-child { letter-spacing: normal !important; word-spacing: normal; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] .it-section-title, [dir="rtl"] .it-slider-title, [dir="rtl"] .it-breadcrumb-title { font-family: var(--it-ff-heading); } [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button { font-family: var(--it-ff-body); letter-spacing: normal !important; } /* Do not force uppercase on Arabic labels (breaks readability) */ [dir="rtl"] .itoffcanvas__info-address > span:first-child, [dir="rtl"] .it-section-subtitle { text-transform: none; } /* ---- Direction utilities (flip Bootstrap + theme helpers) ---------------- */ [dir="rtl"] .text-start, [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-end, [dir="rtl"] .text-right { text-align: left !important; } [dir="rtl"] .float-start, [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-end, [dir="rtl"] .float-right { float: left !important; } [dir="rtl"] .me-auto { margin-right: unset !important; margin-left: auto !important; } [dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; } /* Horizontal spacing helpers actually used in the markup (mirror L <-> R). */ [dir="rtl"] .mr-30 { margin-right: 0; margin-left: 30px; } [dir="rtl"] .mr-20 { margin-right: 0; margin-left: 20px; } [dir="rtl"] .mr-15 { margin-right: 0; margin-left: 15px; } [dir="rtl"] .ml-20 { margin-left: 0; margin-right: 20px; } /* Lists lose their LTR indent; re-apply on the right. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 0; padding-left: 0; } [dir="rtl"] .it-list ul, [dir="rtl"] .list-wrap ul { padding-right: 20px; } /* Blockquotes / left-border accents flip to the right edge. */ [dir="rtl"] blockquote { border-left: 0; border-right: 4px solid var(--it-theme-1, #E30613); padding-left: 0; padding-right: 20px; } /* ---- Language switcher dropdown ----------------------------------------- */ [dir="rtl"] .it-lang-switcher__menu { left: auto; right: 0; text-align: right; } [dir="rtl"] .itoffcanvas div.it-lang-switcher.it-lang-switcher--offcanvas .it-lang-switcher__menu, [dir="rtl"] .itoffcanvas [data-lang-switcher].it-lang-switcher--offcanvas .it-lang-switcher__menu { left: 50% !important; right: auto !important; text-align: center !important; transform: translateX(-50%) translateY(6px) !important; } [dir="rtl"] .itoffcanvas div.it-lang-switcher.it-lang-switcher--offcanvas.is-open .it-lang-switcher__menu, [dir="rtl"] .itoffcanvas [data-lang-switcher].it-lang-switcher--offcanvas.is-open .it-lang-switcher__menu { transform: translateX(-50%) translateY(0) !important; } [dir="rtl"] .itoffcanvas .it-lang-switcher.it-lang-switcher--offcanvas .it-lang-switcher__option, [dir="rtl"] .itoffcanvas a.it-lang-switcher__option[role="menuitem"] { justify-content: center !important; text-align: center !important; } /* ---- Forms: labels/help text align to the start (right) ------------------ */ [dir="rtl"] label, [dir="rtl"] .aramko-flash { text-align: right; } /* ---- Homepage hero slider (RTL) ----------------------------------------- Theme sets subtitle/title/text to display:inline-block for fadeInUp. With a short Arabic subtitle that puts the label beside/inside the title. Force a clean vertical stack (subtitle ABOVE title) matching DE/EN. Arrows stay at right:15% in LTR (clear of left-aligned copy); in RTL the text column flips to the right, so move arrows to the left edge. */ [dir="rtl"] .it-slider-content { text-align: right; } [dir="rtl"] .it-slider-content .it-slider-subtitle, [dir="rtl"] .it-slider-content .it-slider-title, [dir="rtl"] .it-slider-content .it-slider-text, [dir="rtl"] .it-slider-content .it-slider-btn, [dir="rtl"] .it-slider-active .swiper-slide-active .it-slider-subtitle, [dir="rtl"] .it-slider-active .swiper-slide-active .it-slider-title, [dir="rtl"] .it-slider-active .swiper-slide-active .it-slider-text, [dir="rtl"] .it-slider-active .swiper-slide-active .it-slider-btn { display: block !important; width: 100%; max-width: 100%; } [dir="rtl"] .it-slider-subtitle { display: block !important; margin-bottom: 23px; text-align: right; } /* Red square marker: sit at the inline-start (right) of the Arabic label */ [dir="rtl"] .it-slider-subtitle::before { margin-right: 0; margin-left: 12px; } [dir="rtl"] .it-slider-title { display: block !important; text-transform: none; text-align: right; clear: both; } [dir="rtl"] .it-slider-text { display: block !important; text-align: right; } [dir="rtl"] .it-slider-text.d-flex { display: block !important; } /* Navigation arrows → opposite side from the text column */ [dir="rtl"] .it-slider-arrow-box { right: auto; left: 15%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { [dir="rtl"] .it-slider-arrow-box { left: 10%; right: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { [dir="rtl"] .it-slider-arrow-box { left: 7%; right: auto; } } [dir="rtl"] .it-slider-arrow-box .arrow-prev { margin-left: 0; margin-right: 45px; } /* Dark gradient follows the text side (right in RTL) */ [dir="rtl"] .it-slider-style-2 .it-slider-overlay::after { background: linear-gradient( 270deg, #0a0a0a 0%, rgba(10, 10, 10, 0.45) 99.99%, rgba(10, 10, 10, 0) 100% ); } /* ---- About Us (.it-about-5-area) — RTL layout lockdown ------------------- EN reference order (physical): [small thumb | text] [tall thumb] Theme breakers under dir=rtl: - img max-width:inherit + translateX(-70px) spill into neighbors - physical margin-left/right on content/text - col-xl/xxl only → below 1200px columns lose width and collide - flex min-width:auto → Arabic copy expands into the image track Strategy: keep the SAME physical column order as EN (so AR matches the EN composition), but lock tracks with flex-basis + minmax(0) + overflow so nothing can bleed. Text stays direction:rtl. LTR untouched. */ [dir="rtl"] .it-about-5-area { overflow-x: clip; } [dir="rtl"] .it-about-5-area .container { overflow: visible; } /* Kill every physical theme offset */ [dir="rtl"] .it-about-5-content { margin: 0 !important; margin-inline: 0 !important; padding-inline: 0; min-width: 0 !important; max-width: 100% !important; width: 100%; box-sizing: border-box; position: relative; z-index: 2; direction: rtl; text-align: right; overflow-wrap: anywhere; word-break: normal; } [dir="rtl"] .it-about-5-text, [dir="rtl"] .it-about-5-text p, [dir="rtl"] .it-about-5-area .it-section-title-box, [dir="rtl"] .it-about-5-area .it-section-title { margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } [dir="rtl"] .it-about-5-thumb, [dir="rtl"] .it-about-5-thumb.thumb-style-1 { transform: none !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; overflow: hidden; text-align: center; position: relative; z-index: 1; } [dir="rtl"] .it-about-5-area .it-about-5-thumb img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: cover; } [dir="rtl"] .it-about-5-shape-1 { inset-inline-end: 27%; inset-inline-start: auto; right: auto; left: auto; pointer-events: none; } /* ===== Desktop XL+: same composition as EN — copy | tall ===== */ @media (min-width: 1200px) { [dir="rtl"] .it-about-5-area > .container > .row.align-items-end { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-end !important; direction: ltr !important; /* physical EN order */ column-gap: 2rem; row-gap: 0; margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; min-width: 0 !important; float: none !important; } /* Copy cluster ≈ Bootstrap 9/12 */ [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xxl-9, [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xl-9 { flex: 0 1 calc(75% - 1rem) !important; flex-basis: calc(75% - 1rem) !important; width: calc(75% - 1rem) !important; max-width: calc(75% - 1rem) !important; order: 1 !important; direction: rtl; overflow: hidden; } /* Tall image ≈ Bootstrap 3/12 — NEVER overlaps copy */ [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xxl-3, [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xl-3 { flex: 0 0 calc(25% - 1rem) !important; flex-basis: calc(25% - 1rem) !important; width: calc(25% - 1rem) !important; max-width: calc(25% - 1rem) !important; order: 2 !important; overflow: hidden; } } /* Inner row: small thumb | text — same as EN */ @media (min-width: 992px) { [dir="rtl"] .it-about-5-area .col-xxl-9 > .row.align-items-center, [dir="rtl"] .it-about-5-area .col-xl-9 > .row.align-items-center { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; direction: ltr !important; column-gap: 1.75rem; margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .it-about-5-area .col-xxl-9 > .row.align-items-center > [class*="col-"], [dir="rtl"] .it-about-5-area .col-xl-9 > .row.align-items-center > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; min-width: 0 !important; float: none !important; } /* Small thumb ≈ col-lg-5 */ [dir="rtl"] .it-about-5-area .col-xxl-9 > .row.align-items-center > .col-lg-5, [dir="rtl"] .it-about-5-area .col-xl-9 > .row.align-items-center > .col-lg-5 { flex: 0 0 calc(38% - 0.875rem) !important; flex-basis: calc(38% - 0.875rem) !important; width: calc(38% - 0.875rem) !important; max-width: calc(38% - 0.875rem) !important; order: 1 !important; overflow: hidden; } /* Text ≈ col-lg-7 — locked so it cannot expand into either image */ [dir="rtl"] .it-about-5-area .col-xxl-9 > .row.align-items-center > .col-lg-7, [dir="rtl"] .it-about-5-area .col-xl-9 > .row.align-items-center > .col-lg-7 { flex: 0 1 calc(62% - 0.875rem) !important; flex-basis: calc(62% - 0.875rem) !important; width: calc(62% - 0.875rem) !important; max-width: calc(62% - 0.875rem) !important; order: 2 !important; direction: rtl; overflow: hidden; } } /* Below XL: outer cols have no Bootstrap width — force stack */ @media (max-width: 1199.98px) { [dir="rtl"] .it-about-5-area > .container > .row.align-items-end { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; direction: rtl; gap: 1.5rem; align-items: stretch; margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; } [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xxl-9, [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xl-9 { order: 1 !important; } [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xxl-3, [dir="rtl"] .it-about-5-area > .container > .row.align-items-end > .col-xl-3 { order: 2 !important; } } /* Funfact strip stays inside copy column */ [dir="rtl"] .it-about-5-area .it-about-2-funfact-wrap { margin-inline: 0 !important; max-width: 100%; overflow: hidden; } /* Below LG: full stack */ @media (max-width: 991.98px) { [dir="rtl"] .it-about-5-area .col-xxl-9 > .row.align-items-center, [dir="rtl"] .it-about-5-area .col-xl-9 > .row.align-items-center { display: flex !important; flex-direction: column !important; direction: rtl; gap: 1.25rem; margin-left: 0 !important; margin-right: 0 !important; } [dir="rtl"] .it-about-5-area .col-xxl-9 > .row.align-items-center > [class*="col-"], [dir="rtl"] .it-about-5-area .col-xl-9 > .row.align-items-center > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; order: 0 !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } } /* ---- About-section vehicle (train/truck shape) — RTL mirror ------------- GSAP translates `.train` / `.truck`. Mirror ONLY the inner artwork so scaleX is not overwritten. Position uses inset-inline-end on the base rule (main.css) → automatically anchors to the LEFT in RTL. */ [dir="rtl"] .train .train__img, [dir="rtl"] .truck .truck__img, [dir="rtl"] img.train__img, [dir="rtl"] img.truck__img { display: block; max-width: 100%; height: auto; transform: scaleX(-1); transform-origin: center center; } /* No physical left/right overrides — inset-inline-end from main.css handles LTR (right) vs RTL (left). Keep the vehicle fully inside the section. */ [dir="rtl"] .it-about-5-shape-2.train, [dir="rtl"] .it-about-5-shape-2.truck { inset-inline-end: 0; inset-inline-start: auto; margin-inline-end: 0; margin-inline-start: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { [dir="rtl"] .it-about-5-shape-2.train, [dir="rtl"] .it-about-5-shape-2.truck { /* Avoid negative bleed that caused horizontal overflow in RTL */ inset-inline-end: 0; } } /* Homepage about-5 train ONLY: keep physical RIGHT + no mirror (match LTR). Does not touch .it-about-5-shape-1, containers, or other section content. NOTE: do NOT set inset-inline-start:auto in RTL — that maps to physical `right` and cancels `right: 0`, leaving the node unanchored (static-start = left). */ html[dir="rtl"] body .it-about-5-area .it-about-5-shape-2.train, html[dir="rtl"] body .it-about-5-area div.it-about-5-shape-2.train.d-none.d-xl-block { position: absolute !important; top: 7% !important; left: auto !important; right: 0 !important; inset-inline-start: unset !important; inset-inline-end: unset !important; margin: 0 !important; margin-inline: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: min(420px, 45vw) !important; pointer-events: none !important; z-index: -1 !important; /* Isolate transform math to LTR so GSAP translateX matches DE/EN trajectory */ direction: ltr !important; unicode-bidi: isolate !important; } html[dir="rtl"] body .it-about-5-area .it-about-5-shape-2.train .train__img, html[dir="rtl"] body .it-about-5-area .it-about-5-shape-2.train img.train__img { display: block !important; max-width: 100% !important; height: auto !important; transform: none !important; -webkit-transform: none !important; scale: none !important; transform-origin: center center !important; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { html[dir="rtl"] body .it-about-5-area .it-about-5-shape-2.train, html[dir="rtl"] body .it-about-5-area div.it-about-5-shape-2.train.d-none.d-xl-block { /* Match LTR decorative bleed (main.css inset-inline-end: -12%) on the physical right */ right: -12% !important; left: auto !important; inset-inline-start: unset !important; inset-inline-end: unset !important; } } /* ---- Process steps connectors (01→02→03→04) — RTL only ------------------- LTR (main.css): ::after dashed line + ::before arrowhead use physical `right` and a right-pointing clip-path. Bootstrap RTL reverses the row, so step 01 sits on the right and the next step is to its left — connectors must aim inline-start (left) without touching DE/EN rules. */ @media (min-width: 1400px) { [dir="rtl"] .it-step-item::after { right: auto; left: -100%; /* Keep vertical centering from the theme */ transform: translateY(-50%); } [dir="rtl"] .it-step-item::before { right: auto; left: -36%; transform: translateY(-50%); /* Mirror the LTR triangle (0 0, 0 100%, 100% 50%) to point left */ clip-path: polygon(100% 0, 100% 100%, 0 50%); } /* Same as LTR: no outgoing connector after the final step (DOM last = 04) */ [dir="rtl"] .it-step-area .row [class*=col-]:last-child .it-step-item::after, [dir="rtl"] .it-step-area .row [class*=col-]:last-child .it-step-item::before { display: none; } } /* Step index badge sits on the inline-start corner of the icon in RTL */ [dir="rtl"] .it-step-icon > span { right: auto; left: -11%; } /* ---- Offcanvas logo (hamburger drawer) ----------------------------------- Two RTL-only defects put the logo too far right in Arabic: 1. aramko-custom.css enlarges the drawer logo below 1200px with `transform: scale(1.32)` anchored to `transform-origin: left center`. In RTL the logo box sits on the right, so scaling from its LEFT edge grew the artwork outward — past the box and into the drawer's padding. The mirror of that anchor is the right edge. 2. The close button only mirrored to the opposite corner below 992px (aramko-custom.css @media max-width:991px). Between 992–1199px — where the hamburger is still used — it stayed pinned at right:50px while the logo also aligned right, so the two shared the same corner. Mirror it at every width the drawer exists, matching the mobile behaviour. Defect 1 applies to every logo, not just the drawer: aramko-custom.css enlarges the header, drawer, search and footer marks with `transform: scale()` anchored to a physical `left` origin. In Arabic each sits at the right edge, so the artwork grew outward past the viewport — the header logo was visibly clipped. Mirror the anchor so it grows inward. */ [dir="rtl"] .it-header-logo .site-logo__img, [dir="rtl"] .itoffcanvas__logo .site-logo__img, [dir="rtl"] .search__logo .site-logo__img { transform-origin: right center; } [dir="rtl"] .it-footer-widget-logo .site-logo__img { transform-origin: right top; } @media (min-width: 992px) { [dir="rtl"] .itoffcanvas .itoffcanvas__close-btn button { right: auto; left: 50px; } }