/* PAK Filters — right-to-left support
The Indofact theme ships no rtl.css of its own (every conventional path —
rtl.css, style-rtl.css, assets/css/rtl.css — returns 404), so WordPress has
nothing to load for Arabic beyond setting dir="rtl" and the .rtl body class.
Core, Elementor, Contact Form 7 and WooCommerce each bring their own RTL
sheet; the theme's layout does not. This file covers the gaps that actually
break the Arabic pages. */
/* ---- Elementor stretched sections ----
Elementor stretches a section to full width with an inline offset measured
from the viewport's left edge. Under RTL it emits that offset with the wrong
sign — left:367.5px instead of -367.5px — which shoves the whole section off
the right of the screen and clips its content. Replacing the offset with a
direction-agnostic full-bleed keeps it edge to edge whichever way the page
runs. */
[dir="rtl"] .elementor-section.elementor-section-stretched {
left: auto !important;
right: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* ---- Latin data inside an Arabic page ----
Phone numbers, email addresses, opening hours and the copyright line are
Latin text. In an RTL paragraph the bidi algorithm reorders their leading
and trailing runs, so "+20 150 5555 577" renders as "577 5555 150 20+" and
"9 To 5 Working Hours" as "To 5 Working Hours 9". Isolating them in their
own LTR run fixes the order without moving the block. */
/* Only the phone number is unconditionally Latin, and it is the one string
with no strong directional character of its own — just digits and a plus —
so in an RTL paragraph its groups get laid out right to left and it reads
"+577 5555 150 20". The address, the opening hours and the copyright are
Arabic now, and an email address carries its own strong direction, so none
of those should be forced. */
.rtl .ftr-phn {
direction: ltr !important;
unicode-bidi: isolate !important;
}
/* The header's two contact blocks are each an Arabic label on one line and a
Latin value on the next ("اتصل بنا
+20 150 5555 577"). Forcing the whole
item to LTR fixed the number but left the label running the wrong way.
unicode-bidi: plaintext resolves each line separately from its own first
strong character, so the label comes out RTL and the number LTR, with both
lines still hugging the right edge. */
[dir="rtl"] .header6 ul.header-info li {
direction: rtl;
unicode-bidi: plaintext;
text-align: right;
}
/* The phone number needs more than plaintext. plaintext picks a line's
direction from its first strong character, and "+20 150 5555 577" has none
— only neutrals and digits — so it inherits RTL and the three numeric runs
get laid out right to left: "+577 5555 150 20". The link around it is a
reliable hook for forcing a single LTR run. */
[dir="rtl"] .header6 ul.header-info a[href^="tel:"] {
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
/* The footer's contact row mirrors like the header's: items run from the
right, each icon sits on the right of its text, and each line resolves its
own direction so the Arabic address and the Latin email can share a row. */
[dir="rtl"] ul.footer-info li {
float: right;
text-align: right;
direction: rtl;
unicode-bidi: plaintext;
padding-left: 40px;
padding-right: 35px;
}
[dir="rtl"] ul.footer-info li::before {
left: auto !important;
right: 0 !important;
}
/* ---- stray float on Elementor sections ----
The theme floats sections left. That is harmless in LTR but in RTL it
pulls them against the wrong edge, so neutralise it. */
[dir="rtl"] .elementor-section {
float: none !important;
}
/* ---- the Bootstrap grid ----
The theme's header, footer and inner layouts are built on Bootstrap 3,
whose columns float left. Without a mirrored grid the whole chrome keeps
its left-to-right arrangement under Arabic: logo on the left, contact
details on the right, menu on the left. Flip the float inside the same
breakpoints Bootstrap floats them in, so nothing gains a float where it
previously had none. */
[dir="rtl"] [class*="col-xs-"] {
float: right;
}
@media (min-width: 768px) {
[dir="rtl"] [class*="col-sm-"] {
float: right;
}
}
@media (min-width: 992px) {
[dir="rtl"] [class*="col-md-"] {
float: right;
}
}
@media (min-width: 1200px) {
[dir="rtl"] [class*="col-lg-"] {
float: right;
}
}
/* ---- the navigation bar ----
The menu and the "Request A Quote" button are floated independently of the
grid, so they need mirroring of their own. */
[dir="rtl"] .navbar-nav,
[dir="rtl"] .navbar-nav > li,
[dir="rtl"] .navbar-collapse .nav {
float: right;
}
[dir="rtl"] a.header-requestbtn {
float: left;
}
[dir="rtl"] .navbar-right {
float: left !important;
}
[dir="rtl"] .navbar-left {
float: right !important;
}
/* The black wedge behind the menu is anchored to the left and leaves room on
the right for the quote button. With the button mirrored to the left, the
wedge has to swap ends and its diagonal has to point the other way. */
@media (min-width: 992px) {
[dir="rtl"] .header6 #main-navigation::before {
left: auto !important;
right: 0 !important;
transform: scaleX(-1);
transform-origin: center;
}
}
/* ---- Bootstrap float helpers ----
.pull-right / .pull-left are pure positioning, so they mirror like the
grid. Without this the footer's right-hand column keeps floating right in
Arabic and collides with the copyright line. */
[dir="rtl"] .pull-right {
float: left !important;
}
[dir="rtl"] .pull-left {
float: right !important;
}
/* The footer's bottom row aligns its two halves to opposite edges; mirror
those too, scoped so deliberate alignment elsewhere is left alone. */
[dir="rtl"] .footer-btm .text-right {
text-align: left;
}
[dir="rtl"] .footer-btm .text-left {
text-align: right;
}
/* ---- the header's contact icons ----
Each item in ul.header-info carries its icon as an absolutely positioned
::before pinned to left:0, with the text cleared by a matching padding-left
(45px for the phone, 37px for the address). Neither property mirrors on its
own, so in Arabic the icon stayed on the left of a right-aligned block and
left a gap on the wrong side. Swap both ends. */
[dir="rtl"] .header6 ul.header-info li::before {
left: auto !important;
right: 0 !important;
}
[dir="rtl"] .header6 ul.header-info li.phnClass,
[dir="rtl"] .header6 ul.header-info li.phn {
padding-left: 0;
padding-right: 45px;
}
[dir="rtl"] .header6 ul.header-info li.address {
padding-left: 0;
padding-right: 37px;
}
/* ---- the top bar's angled band ----
The welcome band is a ::before whose colour is a 64px bottom border and
whose diagonal comes from a 25px transparent border on its right edge. The
band itself mirrors with the grid, but a border cannot swap sides, so the
diagonal stayed on the right while the band moved to the right of the bar —
putting the slope off-screen and a hard vertical cut where the slope
belongs. Same scaleX fix as the navigation wedge below it. */
@media (min-width: 992px) {
[dir="rtl"] .headerTopSec::before {
transform: scaleX(-1);
transform-origin: center;
}
/* The welcome heading's 10px stand-off from the diagonal is a
padding-left, which in Arabic sits against the outer edge instead. */
[dir="rtl"] .headerTopSec h3 {
padding-left: 0;
padding-right: 10px;
}
}
/* ---- the phone header ----
assets/css/pak-mobile-header.css rebuilds the header below 992px as two
rows: the logo on the left of row 1 with the menu button pinned to the
right, and the language switch and socials on row 2. Both of row 1's
anchors are physical — a padding-right on the logo column and right:15px
on the button — so Arabic kept an English arrangement. Swap the ends.
Row 2 needs nothing here: it is deliberately laid out left-to-right in
every language, so the languages stay in the left corner and the socials
in the right one. */
@media (max-width: 991px) {
/* justify-content is not mirrored here on purpose: a row flex container
in RTL already runs right to left, so the mobile sheet's flex-start
puts the logo against the right edge by itself. Overriding it to
flex-end would send the logo back to the left. Only the physical
padding that keeps the logo clear of the button has to swap. */
[dir="rtl"] .header6 .headerMiddleSec .logoSec {
text-align: right;
padding-right: 0;
padding-left: 76px;
}
[dir="rtl"] .header6 .navbar-header {
right: auto;
left: 15px;
justify-content: flex-start;
}
}
/* ---- Cairo for Arabic ----
The theme sets Poppins for headings and Open Sans for body text, and
Elementor writes a font-family into the per-widget CSS it generates. None
of those carry Arabic glyphs, so Arabic fell back to whatever each browser
happened to choose. Cairo is a proper Arabic family with a matching Latin
set, so mixed lines stay consistent.
Only text elements are listed. Icon fonts are deliberately left out: Font
Awesome and Elementor's eicons both work by setting a font-family on the
element itself, and sweeping those into Cairo would turn every icon on the
Arabic pages into a stray letter. */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] label,
[dir="rtl"] blockquote,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] .elementor-heading-title,
[dir="rtl"] .elementor-image-box-title,
[dir="rtl"] .elementor-image-box-description,
[dir="rtl"] .elementor-text-editor,
[dir="rtl"] .elementor-widget-text-editor,
[dir="rtl"] .widget-title,
[dir="rtl"] .navbar-nav > li > a {
font-family: "Cairo", sans-serif !important;
}
/* ---- Elementor image boxes ----
The "Why Choose Us" blurbs are image boxes set to image-on-the-left.
Elementor honours that physically in RTL by giving the wrapper
flex-direction: row-reverse — a flex row in an RTL container already runs
right to left, so reversing it pushes the icon back to the left. On a
translated page that is backwards: the icon should lead the text, which in
Arabic means it sits on the right. Dropping back to a plain row does that,
and the mirror image of the setting is applied to image-on-the-right. */
[dir="rtl"] .elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper {
/* !important because Elementor's own RTL rule is !important too. */
flex-direction: row !important;
}
[dir="rtl"] .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
flex-direction: row-reverse !important;
}
/* The separators between the footer's contact items are a border-right plus
a 49px margin-right on every item but the last — a trailing gap in LTR.
Neither mirrors, so in Arabic the first item (now the rightmost) drew its
rule against the outer right edge and held itself 49px off it, while the
last item (now the leftmost) had no rule at all and the pair beside it ran
together. Moving both to the other side restores one rule between each
pair and lets the row sit flush against the right edge. */
[dir="rtl"] ul.footer-info li {
border-right: 0;
border-left: 1px solid #ccc;
margin-right: 0;
margin-left: 49px;
}
[dir="rtl"] ul.footer-info li:last-child {
border-left: 0;
margin-left: 0;
}
/* The "Why Choose Us" intro is a heading beside a text column, with a hairline
between them drawn as an absolutely positioned ::after on the text column,
pinned to left:0. In English the text column is the right-hand one, so
left:0 is its inner edge and the rule lands between the two. Under Arabic
the columns swap and the text column moves to the left, where left:0 is now
the outer edge — so the rule was stranded against the page margin instead
of separating anything. The inner edge is the right one here. */
[dir="rtl"] .vertival-divider::after {
left: auto;
right: 0;
}
/* ---- the header's contact group ----
The two contact blocks are floated right inside their column. In English
the column sits on the right of the header, so floating right packs them
against the outer edge, away from the logo. Mirrored, the column moves to
the left but the float does not, so the pair ended up against the inner
edge — crowded up beside the logo with the whole left half of the header
empty. A flex row packs them at the far edge instead; in RTL the main axis
ends on the left, so flex-end is the outer edge, and the blocks keep their
right-to-left order within the group. */
@media (min-width: 992px) {
[dir="rtl"] .header6 ul.header-info {
display: flex;
align-items: center;
justify-content: flex-end;
}
[dir="rtl"] .header6 ul.header-info li {
float: none;
}
}