/* ============================================================
RTL.CSS — ZAMCO Industries Arabic pages
Load this AFTER style.css / services.css / gallery.css on
every Arabic page:
And set on :
Most spacing/flex layout mirrors automatically once dir="rtl"
is set. These rules fix the specific things in your CSS that
use physical left/right values or LTR-only effects.
============================================================ */
body {
font-family: 'Tajawal', 'Cairo', var(--font-body);
}
/* Headline / display font (Bebas Neue) has no Arabic glyphs —
fall back to the Arabic-friendly font for anything using it */
.hero-headline, .section-title, .nav-logo, .loader-logo,
.about-corner .num, .why-circle-core .big-num, .counter-num,
.svc-title, .mini-num, .service-num, .footer-brand .logo {
font-family: 'Tajawal', 'Cairo', var(--font-body);
}
.hero-headline .line1
{
margin-bottom: 0.20em;
}
.hero-headline .line3 {
margin-bottom: 0.15em;
}
/* Nav underline + active indicator anchors to the wrong side */
.nav-links a::after {
left: auto;
right: 0;
transform-origin: right;
}
/* Hero stats block is pinned to physical right; flip to the
visual-right side which is now the LEFT edge in RTL, and
right-align its own text so numbers still line up naturally */
.hero-stats {
right: auto;
left: 4vw;
}
.stat-item {
text-align: left;
}
/* About "years of excellence" corner badge */
.about-corner {
right: auto;
left: -30px;
}
/* Service card decorative number */
.service-num {
right: auto;
left: 2rem;
}
/* Back-to-top button */
#btt {
right: auto;
left: 2rem;
}
/* Nav CTA spacing (was margin via gap, this covers manual cases) */
.nav-cta {
margin-right: 0;
margin-left: 12px;
}
/* Client list bullet + name row: dot should sit on the right */
/* .client-item {
flex-direction: row-reverse;
justify-content: flex-end;
} */
/* Footer column text-align and link hover padding direction */
.footer-col ul a:hover {
padding-left: 0;
padding-right: 6px;
}
/* svc-grid-rev alternates direction for zig-zag layout — in
RTL this needs to flip the OTHER way so the pattern still
alternates visually instead of collapsing to one side */
.svc-grid-rev {
direction: ltr;
}
.svc-grid-rev > * {
direction: rtl;
}
/* Orbit icon tooltip label position (was centered, stays fine,
but ensure text renders RTL inside it) */
.orbit-icon span {
direction: rtl;
}
/* Phone field: dial code selector sits before the number in
Arabic reading order too, but the input itself + numbers
should stay LTR so digits don't reverse */
/* .phone-field {
flex-direction: row-reverse;
} */
.dial-trigger {
border-radius: 0 2px 2px 0;
border-right: 1px solid rgba(255,255,255,.08);
border-left: none;
}
.phone-field input[type="tel"] {
border-radius: 2px 0 0 2px;
direction: ltr;
text-align: right;
}
/* Keep phone numbers, emails, and the website URL untouched by
RTL mirroring wherever they appear in text */
/* .ltr-text,
a[href^="tel:"],
a[href^="mailto:"],
.contact-item-text a[href^="http"],
.footer-col a[href^="http"] {
direction: ltr;
unicode-bidi: embed;
display: inline-block;
} */
/* Map filter/border unaffected — no change needed there */
@media (max-width: 1024px) {
.hero-stats { display: none; }
}
/* ============================================================
MOBILE / RESPONSIVE FIXES FOR RTL
These address things that only break at narrow widths:
the full-screen mobile nav sliding from the wrong side, the
hero ticker scrolling the "wrong" way for RTL reading, the
phone country dropdown overflowing off-screen, and general
horizontal-scroll leaks caused by mirrored positioning.
============================================================ */
/* Full-screen mobile nav: slide in from the LEFT in RTL instead
of the right, so it enters from the same visual side a user
reading right-to-left expects new content to come from */
.mobile-nav {
transform: translateX(-100%);
}
.mobile-nav.open {
transform: translateX(0);
}
/* Hero ticker: scroll right-to-left (reverse direction) so the
marquee reads in the natural RTL direction instead of LTR */
.ticker-track {
animation-direction: reverse;
}
/* Phone country dropdown menu can overflow off the left edge
of narrow screens since it's positioned from a fixed side.
Cap its width and let it anchor to whichever edge has room. */
.dial-menu {
width: min(270px, 85vw);
right: 0;
left: auto;
}
@media (max-width: 768px) {
/* Breadcrumb, page hero text, and section labels can wrap
awkwardly at narrow widths with longer Arabic words —
give them a touch more line-height and reduced letter
spacing pressure */
.section-title {
line-height: 1.15;
}
.section-label {
letter-spacing: .15em;
}
/* Service/mini cards: ensure icon + heading don't get
squeezed against the card edge once text is RTL-aligned */
.service-card, .mini-card-body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
/* Contact form phone field: stacking the dial-code selector
above the number field reads more naturally than a
cramped row-reverse at narrow widths */
.dial-trigger {
border-radius: 2px;
border: 1px solid rgba(255,255,255,.08);
width: 100%;
justify-content: flex-start;
}
.phone-field input[type="tel"] {
border-radius: 2px;
}
.dial-menu {
width: 100%;
}
}
@media (max-width: 480px) {
/* Hero headline lines can still crowd on very small screens
even with the increased line-height — add a bit more */
.hero-headline {
line-height: 1.45;
}
.phone-field {
flex-direction: column;
gap: 8px;
}
}