/**
* OMS Saleri — Arabic / RTL only (`ar/*.html`)
* Load AFTER assets/css/custom.css so these win without cluttering the global file.
* Noto Sans Arabic is linked in each ar page .
*/
/* --------------------------------------------------------------------------
Typography
-------------------------------------------------------------------------- */
html[lang="ar"] body,
html[lang="ar"] .alt-font {
font-family: "Noto Sans Arabic", "Inter", sans-serif;
}
html[lang="ar"] .text-uppercase {
text-transform: none;
}
/* --------------------------------------------------------------------------
Bootstrap `text-*-start` = physical `left !important` in vendors.min.css.
Under `dir=rtl`, that wrongly pins copy (e.g. engineering strip eyebrow + h3)
to the left; use logical `start` so "start" = reading edge (right in Arabic).
Do NOT remap `text-*-end`: AR markup uses physical `end` on purpose (e.g. hero).
-------------------------------------------------------------------------- */
html[lang="ar"] .text-start {
text-align: start !important;
}
@media (min-width: 576px) {
html[lang="ar"] .text-sm-start {
text-align: start !important;
}
}
@media (min-width: 768px) {
html[lang="ar"] .text-md-start {
text-align: start !important;
}
}
@media (min-width: 992px) {
html[lang="ar"] .text-lg-start {
text-align: start !important;
}
}
@media (min-width: 1200px) {
html[lang="ar"] .text-xl-start {
text-align: start !important;
}
}
/* --------------------------------------------------------------------------
Footer — logo + intro blurb: column already `text-sm-start` (global remap above).
Direct children only — block `a` / `d-inline-block` `p` sometimes need explicit align.
-------------------------------------------------------------------------- */
@media (min-width: 576px) {
html[lang="ar"] footer.footer-dark.bg-extra-medium-slate-blue .last-paragraph-no-margin.order-1.order-lg-1 > a.footer-logo,
html[lang="ar"] footer.footer-dark.bg-extra-medium-slate-blue .last-paragraph-no-margin.order-1.order-lg-1 > p {
text-align: start !important;
}
}
/* --------------------------------------------------------------------------
Home — copy columns (about + supply): reading edge at lg+ (RTL start = right)
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
/* Column `text-lg-start` → already `text-align: start !important` via global Bootstrap fix (top of file). */
/* Body copy margins only (alignment inherits from column). */
html[lang="ar"] section.pb-8 .col-xl-5.text-lg-start > p,
html[lang="ar"] section.pb-0 .col-xl-5.text-lg-start > p {
margin-inline-start: 0;
margin-inline-end: 0;
}
/* About h3: mx-auto centers the block; remove at lg+ so text follows start edge */
html[lang="ar"] section.pb-8 .col-xl-5.text-lg-start h3.mx-auto {
margin-inline-start: 0;
margin-inline-end: 0;
}
/*
* Eyebrow pills (about + supply): `d-inline-block` + parent text-align can sit oddly in RTL.
* `margin-inline-end: auto` on a fit-content block pushes the pill toward inline-start (= right in RTL).
*/
html[lang="ar"] section.pb-8 .col-xl-5.text-lg-start > span.bg-solitude-blue.d-inline-block:first-child,
html[lang="ar"] section.pb-0 .col-xl-5.text-lg-start > span.bg-solitude-blue.d-inline-block:first-child {
display: block;
width: fit-content;
max-width: 100%;
margin-inline-end: auto;
margin-inline-start: 0;
}
}
/* --------------------------------------------------------------------------
Home hero (swiper) — defensive (column already has `text-md-end`):
- Do NOT use `margin-inline-start: auto` on `.w-90` here in RTL — that was the bug
(old selectors `.col-xl-7 .w-90` / `.col-lg-8 .w-90`): it shoves the narrow block
toward physical left; commenting it out but leaving only `margin-inline-end: 0`
is incomplete — use the pin below.
- `text-align:right` on titles/body beats broken inheritance + stale CDN CSS.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
html[lang="ar"] .section-dark.bg-dark-gray > .swiper .swiper-slide [class*="col-"].text-md-end h1.hero-slide-title,
html[lang="ar"] .section-dark.bg-dark-gray > .swiper .swiper-slide [class*="col-"].text-md-end h2.hero-slide-title {
text-align: right !important;
}
html[lang="ar"] .section-dark.bg-dark-gray > .swiper .swiper-slide [class*="col-"].text-md-end p.opacity-6,
html[lang="ar"] .section-dark.bg-dark-gray > .swiper .swiper-slide [class*="col-"].text-md-end > div > span.fs-20.opacity-6.d-inline-block {
text-align: right !important;
}
html[lang="ar"] .section-dark.bg-dark-gray > .swiper .swiper-slide [class*="col-"].text-md-end .w-90,
html[lang="ar"] .section-dark.bg-dark-gray > .swiper .swiper-slide [class*="col-"].text-md-end .xl-w-100 {
margin-inline-start: 0 !important;
margin-inline-end: auto !important;
}
}
/* --------------------------------------------------------------------------
Header — nav links (long Arabic words + RTL)
-------------------------------------------------------------------------- */
html[lang="ar"] header .oms-navbar-ar .navbar-nav .nav-link {
letter-spacing: 0;
line-height: 1.45;
padding-inline: 0.65rem;
}
html[lang="ar"] header .oms-navbar-ar .navbar-collapse .navbar-nav {
row-gap: 0.25rem;
column-gap: 0.35rem;
}
@media (min-width: 992px) {
html[lang="ar"] header .oms-navbar-ar .navbar-collapse .navbar-nav {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
column-gap: 0.35rem;
row-gap: 0.35rem;
}
}
html[lang="ar"] header .oms-navbar-ar .dropdown-with-icon-style02 .dropdown-menu {
text-align: right;
}
html[lang="ar"] header .oms-navbar-ar .dropdown-with-icon-style02 .dropdown-menu li a {
flex-direction: row-reverse;
}
/* --------------------------------------------------------------------------
Header — Arabic navbar row: LTR chrome (same physical order as English:
logo | language | burger). Page stays RTL; collapse + dropdowns stay RTL.
-------------------------------------------------------------------------- */
html[lang="ar"] header nav.oms-navbar-ar > .container-fluid {
direction: ltr;
unicode-bidi: isolate;
}
html[lang="ar"] header nav.oms-navbar-ar .navbar-collapse,
html[lang="ar"] header nav.oms-navbar-ar .dropdown-menu {
direction: rtl;
text-align: right;
}
/* --------------------------------------------------------------------------
Header — language switcher (icons vs text)
-------------------------------------------------------------------------- */
html[lang="ar"] header .header-icon {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 0.75rem 1rem;
}
html[lang="ar"] header nav.oms-navbar-ar .header-icon {
justify-content: center;
}
html[lang="ar"] header .oms-lang-switcher {
gap: 0.2rem;
padding-inline: 12px 16px;
}
html[lang="ar"] header .oms-lang-switcher__sep {
margin-inline: 10px;
}
@media (max-width: 991.98px) {
html[lang="ar"] header .oms-lang-switcher--solo {
gap: 0;
}
}
/* --------------------------------------------------------------------------
Home — trust strip / icon + text rows
-------------------------------------------------------------------------- */
html[lang="ar"] .icon-with-text-style-08 .feature-box.feature-box-left-icon-middle {
gap: 0.6rem;
max-width: 100%;
}
html[lang="ar"] .icon-with-text-style-08 .feature-box-icon {
flex-shrink: 0;
}
/* Trust strip columns use `text-sm-start` — covered by global remap; no extra text-align here. */
/* --------------------------------------------------------------------------
Video CTA block (RTL): body max-width anchored to reading edge
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
html[lang="ar"] .oms-video-cta .text-lg-end .oms-video-cta__title {
text-align: right;
}
html[lang="ar"] .oms-video-cta .text-lg-end .oms-video-cta__body {
margin-inline-start: auto;
margin-inline-end: 0;
text-align: right;
}
}
@media (max-width: 991.98px) {
html[lang="ar"] .oms-video-cta .oms-video-cta__title,
html[lang="ar"] .oms-video-cta .oms-video-cta__body {
text-align: center;
}
}
@media (max-width: 575.98px) {
html[lang="ar"] .oms-video-cta .video-icon-large.video-icon-box .video-icon i {
margin-left: 0;
margin-right: 3px;
}
}
/* --------------------------------------------------------------------------
Tabs — solitude section (RTL reading edge + icon/text rhythm; pairs custom.css 3.16)
-------------------------------------------------------------------------- */
html[lang="ar"] section.bg-solitude-blue .tab-style-05 .nav-tabs {
text-align: start;
}
html[lang="ar"] .tab-style-05 .nav-tabs .nav-link {
justify-content: flex-start;
gap: 0.65rem;
}
html[lang="ar"] .tab-style-05 .nav-tabs .nav-link span:not(.icon-extra-medium) {
padding-inline-start: 0.35rem;
line-height: 1.4;
}
/* --------------------------------------------------------------------------
Accordions / CTA rows
-------------------------------------------------------------------------- */
html[lang="ar"] .accordion-body .d-flex.align-items-end {
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
/* --------------------------------------------------------------------------
Inline icon + sentence (engineering strip, etc.)
-------------------------------------------------------------------------- */
html[lang="ar"] .feather.icon-very-small.me-10px,
html[lang="ar"] .feather.icon-small.me-10px {
margin-inline-end: 0.4rem;
margin-inline-start: 0;
}
/* --------------------------------------------------------------------------
About block — pie chart + caption (RTL: gap instead of me-25px clash)
-------------------------------------------------------------------------- */
html[lang="ar"] .oms-about-pie-row {
column-gap: 1.75rem;
row-gap: 1.25rem;
flex-wrap: wrap;
align-items: center;
}
html[lang="ar"] .oms-about-pie-row__chart {
margin-inline-end: 0 !important;
margin-inline-start: 0 !important;
}
html[lang="ar"] .oms-about-pie-row__caption {
flex: 1 1 12rem;
min-width: 0;
text-align: start;
}
/* Two stacked lines — mirrors EN “Backed by Italy,” / “finished in Dammam.” */
html[lang="ar"] .oms-about-pie-row__lines {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
width: 100% !important;
max-width: 22rem;
line-height: 1.5 !important;
}
html[lang="ar"] .oms-about-pie-row__lines .oms-about-pie-row__line {
line-height: 1.5;
}
/* --------------------------------------------------------------------------
Accordion (pricing-table-style-04) — RTL chevron
Theme: .icon-round absolute + top 50% + translateY(-50%); physical `right:0`.
Old AR override used position:static + space-between — chevrons sat low vs EN.
Keep same vertical math as theme; use inset-inline-end so RTL pins on reading end.
-------------------------------------------------------------------------- */
html[lang="ar"] .pricing-table-style-04 .accordion-item .accordion-title .icon-round {
position: absolute !important;
top: 50% !important;
right: auto !important;
left: auto !important;
inset-inline-end: 0 !important;
transform: translateY(-50%) !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-inline-start: 0;
}
html[lang="ar"] .pricing-table-style-04 .accordion-item .accordion-title .icon-round i {
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
}
/* --------------------------------------------------------------------------
Engineering strip — mail icon + sentence + link (RTL spacing)
-------------------------------------------------------------------------- */
html[lang="ar"] .oms-cta-mail-line {
gap: 0.65rem;
line-height: 1.45;
}
html[lang="ar"] .oms-cta-mail-line .feather.icon-feather-mail {
margin-inline-start: 0;
margin-inline-end: 0;
flex-shrink: 0;
align-self: center;
font-size: 1.05em;
}
@media (max-width: 991.98px) {
html[lang="ar"] .oms-cta-mail-line {
max-width: 90%;
margin-inline: auto;
gap: 0.65rem;
}
html[lang="ar"] .oms-cta-mail-line .feather.icon-feather-mail {
align-self: flex-start;
margin-top: 0.15em;
}
/* Tighter stack: question + link (avoid flex-basis stretching) */
html[lang="ar"] .oms-cta-mail-line__body {
gap: 0.28rem;
}
html[lang="ar"] .oms-cta-mail-line__text {
line-height: 1.4;
}
}
html[lang="ar"] .oms-cta-mail-line__link {
margin-inline-start: 0 !important;
flex-shrink: 0;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
Telephone / fax (ar/*) — KSA corporate standard: Western digits, LTR isolate
(tel: href stays ASCII; avoids RTL bidi reordering on +966 …)
-------------------------------------------------------------------------- */
html[lang="ar"] .oms-tel {
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
html[lang="ar"] footer .oms-tel,
html[lang="ar"] .oms-contact-info-panel .oms-tel {
text-align: left;
}
/* --------------------------------------------------------------------------
Contact (ar/contact.html) — same grid as EN: g-0 (image + panel flush), offset-lg-1 on form only
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
/* Image ↔ green panel: no gutter (matches contact.html) */
html[lang="ar"] .page-contact #down-section .oms-contact-col-image,
html[lang="ar"] .page-contact #down-section .oms-contact-col-info {
padding-inline: 0;
}
/* Gap only between panel and form — EN offset-lg-1 */
html[lang="ar"] .page-contact #down-section .oms-contact-col-form.offset-lg-1 {
margin-inline-start: 8.33333333%;
}
}
html[lang="ar"] .page-contact .contact-form-style-01 .form-icon {
left: auto;
right: 25px;
}
html[lang="ar"] .page-contact .contact-form-style-01 input.form-control,
html[lang="ar"] .page-contact .contact-form-style-01 textarea.form-control {
padding-left: 20px;
padding-right: 55px;
}
@media (max-width: 991.98px) {
html[lang="ar"] .page-contact #down-section .oms-contact-col-form {
margin-top: 1.5rem;
}
html[lang="ar"] .page-contact #down-section .oms-contact-col-info {
margin-top: 0;
}
}