/* MIDZ RTL layer
* Loaded only when . Keep structural CSS shared with English and
* mirror only directional pieces here. This avoids maintaining a second theme.
*/
/* Arabic typography — Arabic-only layer.
* Cairo is intentionally loaded only for Arabic. English keeps the original
* Urbanist/Arapey theme untouched.
*/
html[lang="ar"][dir="rtl"] {
--midz-arabic-font: "Cairo", "Tahoma", "Arial", sans-serif;
--font_arapey: var(--midz-arabic-font);
--font_urbanist: var(--midz-arabic-font);
}
html[lang="ar"][dir="rtl"] body {
font-family: var(--midz-arabic-font);
font-weight: 400;
line-height: 1.75;
direction: rtl;
text-align: start;
font-optical-sizing: auto;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Keep Arabic clean and editorial: body copy is relaxed, while headings use
* stronger Cairo weights instead of synthetic italics inherited from English. */
html[lang="ar"][dir="rtl"] body :where(p, li, label, input, textarea, select, option, small, blockquote) {
font-family: var(--midz-arabic-font) !important;
font-weight: 400;
font-style: normal !important;
letter-spacing: 0 !important;
}
html[lang="ar"][dir="rtl"] body :where(a, button) {
font-family: var(--midz-arabic-font) !important;
font-weight: 500;
font-style: normal !important;
letter-spacing: 0 !important;
}
html[lang="ar"][dir="rtl"] body :where(h1, h2, h3, h4, h5, h6, .section-title) {
font-family: var(--midz-arabic-font) !important;
font-weight: 600;
font-style: normal !important;
letter-spacing: 0 !important;
line-height: 1.18;
}
html[lang="ar"][dir="rtl"] body :where(strong, b) {
font-family: var(--midz-arabic-font) !important;
font-weight: 700;
font-style: normal !important;
letter-spacing: 0 !important;
}
html[lang="ar"][dir="rtl"] .aixor-main .section-subtitle,
html[lang="ar"][dir="rtl"] .header-menu-wrap .navbar .menu li a,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu a,
html[lang="ar"][dir="rtl"] .aixor-main .theme-btn {
font-family: var(--midz-arabic-font) !important;
font-style: normal !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
html[lang="ar"][dir="rtl"] .header-menu-wrap .navbar .menu li a {
font-weight: 500 !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .sidebar-menu a {
font-weight: 500 !important;
line-height: 1.35 !important;
}
/* Keep data that is naturally Latin/numeric readable inside an RTL document. */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] .ltr,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .regional-phone-code,
html[dir="rtl"] .regional-phone-number,
html[dir="rtl"] .footer-email-link {
direction: ltr;
unicode-bidi: isolate;
text-align: left !important;
}
html[dir="rtl"] input:not([type="email"]):not([type="tel"]):not([type="url"]),
html[dir="rtl"] textarea,
html[dir="rtl"] select {
text-align: start;
}
/* Header: mirror the English geometry instead of letting physical auto-margins fight RTL flexbox. */
@media (min-width: 992px) {
html[dir="rtl"] .header-menu-wrap .custom-container {
padding-left: 48px !important;
padding-right: 65px !important;
}
html[dir="rtl"] .header-menu-wrap .navbar {
margin-left: 42px !important;
margin-right: auto !important;
}
html[dir="rtl"] .header-menu-wrap .header-right-info {
margin-left: 0 !important;
margin-right: auto !important;
}
}
@media (max-width: 991px) {
html[dir="rtl"] .header-menu-wrap .logo img {
object-position: right center !important;
}
html[dir="rtl"] .header-menu-wrap .header-right-info {
margin-left: 0 !important;
margin-right: auto !important;
}
}
/* Sidebar / mobile navigation — direction only.
* Motion, visibility, dimensions and scroll state are owned by the shared
* header CSS/JS, exactly like English. Arabic only changes text flow.
*/
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
direction: rtl;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-top,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-top .regional-phones-list--sidebar,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-top .regional-phone-item {
text-align: start !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a {
text-align: right !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a::before {
left: auto !important;
right: 0 !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:hover,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:focus-visible,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a.active {
padding-left: 0 !important;
padding-right: 20px !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a > span {
margin-left: 0 !important;
margin-right: 4px !important;
}
/* Keep the decorative sidebar artwork on the opposite side of Arabic copy.
* The image itself is never mirrored. */
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-shape {
right: auto !important;
left: -128px !important;
}
@media (min-width: 641px) and (max-width: 991px) {
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:hover,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:focus-visible,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a.active {
padding-left: 0 !important;
padding-right: 14px !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-shape {
right: auto !important;
left: -100px !important;
}
}
@media (max-width: 640px) {
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-shape {
right: auto !important;
left: -88px !important;
}
}
/* Floating rail mirrors with the page. */
html[dir="rtl"] .floating-social {
right: auto !important;
left: 20px !important;
border-right: 0 !important;
border-left: 1px solid #333 !important;
}
/* Replace hard-coded English text alignment with flow-relative alignment. */
html[dir="rtl"] body.contact-page .midz-page-hero-copy,
html[dir="rtl"] body.about-page .midz-page-hero-copy,
html[dir="rtl"] .midz-services-heading,
html[dir="rtl"] .midz-service-section-head,
html[dir="rtl"] body.service-single-page .midz-service-single-copy,
html[dir="rtl"] body.service-single-page .midz-service-single-copy h1,
html[dir="rtl"] body.service-single-page .midz-service-single-copy p,
html[dir="rtl"] body.service-single-page .midz-services-kicker,
html[dir="rtl"] .midz-service-journey-copy,
html[dir="rtl"] body.projects-page .feature-sec .section-header.section-header2,
html[dir="rtl"] body.service-single-page .midz-service-work-sec .section-header.section-header2,
html[dir="rtl"] body.about-page.services-page .about-values-intro,
html[dir="rtl"] body.about-page.services-page .about-values-intro .about-values-text,
html[dir="rtl"] body.about-page.services-page .service-sec-2 .about-values-header,
html[dir="rtl"] body.about-page.services-page .service-sec-2 .about-values-header .section-subtitle,
html[dir="rtl"] body.about-page.services-page .service-sec-2 .service-lists-wrap,
html[dir="rtl"] body.about-page.services-page .service-sec-2 .service-feature-description,
html[dir="rtl"] body.about-page.services-page .awards-sec .section-header,
html[dir="rtl"] body.about-page.services-page .awards-sec .awards-box .awards-inner h4,
html[dir="rtl"] .contact-form--advanced,
html[dir="rtl"] .midz-regional-modal__option {
text-align: start !important;
}
/* Sections deliberately anchored to the English start edge must move to Arabic start. */
html[dir="rtl"] body.about-page.services-page .service-sec-2 > .custom-container {
margin-inline-start: 0 !important;
margin-inline-end: auto !important;
text-align: start !important;
}
/* Footer mirrors: company/contact are at start, social is at end. */
html[dir="rtl"] .footer-area .footer-nav-col,
html[dir="rtl"] .footer-area .footer-contact-infos,
html[dir="rtl"] .footer-area .footer-contact-infos .footer-widget-top,
html[dir="rtl"] .footer-area .footer-contact-infos .footer-widget-top .links,
html[dir="rtl"] .footer-area .footer-contact-infos .footer-whatsapp-link {
text-align: start !important;
}
html[dir="rtl"] .footer-area .footer-social-col,
html[dir="rtl"] .footer-area .footer-social-col .footer-widget-top,
html[dir="rtl"] .footer-area .footer-social-col ul,
html[dir="rtl"] .footer-area .footer-social-col ul li a,
html[dir="rtl"] .footer-area .footer-social-col .footer-social-link-btn,
html[dir="rtl"] .footer-area .footer-social-col .copyright {
text-align: end !important;
}
/* Previous/next cards keep their semantic sides after the grid mirrors. */
html[dir="rtl"] body.midz-project-page .midz-project-nav-link--prev {
justify-content: flex-start !important;
text-align: start !important;
}
html[dir="rtl"] body.midz-project-page .midz-project-nav-link--next {
justify-content: flex-end !important;
text-align: end !important;
}
html[dir="rtl"] body.midz-project-page .midz-project-nav-link--next .midz-project-nav-copy {
align-items: flex-end !important;
}
/* Never mirror artwork or icon glyphs in Arabic.
* RTL is expressed by layout/order/position only; the asset itself is unchanged.
*/
/* Project carousel intentionally keeps a stable physical scroll model; JS converts it to RTL logically. */
html[dir="rtl"] .midz-project-more-carousel-viewport {
direction: ltr;
}
html[dir="rtl"] .midz-project-more-carousel-track {
flex-direction: row-reverse;
}
html[dir="rtl"] .midz-project-more-carousel-track .midz-project-media-frame {
direction: rtl;
}
/* Language switch — Arabic-only treatment.
* Sidebar version is deliberately a calm control, not another navigation item. */
.midz-language-switch {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 38px;
padding: 8px 14px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
background: rgba(255,255,255,.035);
color: rgba(255,255,255,.82) !important;
font-family: var(--midz-arabic-font) !important;
font-size: 13px;
font-weight: 600 !important;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.midz-language-switch:hover,
.midz-language-switch:focus-visible {
background: #fff;
border-color: #fff;
color: #080808 !important;
transform: translateY(-1px);
outline: none;
}
.midz-language-switch--header {
margin-inline-end: 14px;
min-height: 34px;
padding-inline: 13px;
font-size: 12px;
}
.header-sidebar-wrap .header-sidebar-content .midz-language-switch-wrap {
width: 100%;
margin: 20px 0 4px !important;
padding: 0 var(--midz-sidebar-rail) !important;
box-sizing: border-box;
display: flex;
justify-content: flex-start;
}
.header-sidebar-wrap .header-sidebar-content .midz-language-switch {
min-width: 132px;
min-height: 42px;
justify-content: space-between;
padding: 9px 11px 9px 15px;
border-color: rgba(255,255,255,.16);
background: rgba(255,255,255,.055);
font-size: 13px;
}
.header-sidebar-wrap .header-sidebar-content .midz-language-switch::before {
content: "EN";
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
border-radius: 50%;
background: #fff;
color: #080808;
font-family: "Urbanist", Arial, sans-serif;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: .04em;
}
.header-sidebar-wrap .header-sidebar-content .midz-language-switch:hover::before,
.header-sidebar-wrap .header-sidebar-content .midz-language-switch:focus-visible::before {
background: #080808;
color: #fff;
}
@media (max-width: 640px) {
.header-sidebar-wrap .header-sidebar-content .midz-language-switch-wrap {
margin-top: 16px !important;
}
.header-sidebar-wrap .header-sidebar-content .midz-language-switch {
min-height: 40px;
min-width: 126px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* =========================================================
Arabic polish pass — 2026-08-31
Arabic-only: keep English stylesheet and behavior untouched.
========================================================= */
/* Keep Arabic typography consistently Cairo. Never inherit the English
display/italic families on Arabic glyphs. */
html[lang="ar"][dir="rtl"] .aixor-main :where(.section-title, .section-title2, .section-title2 em, .section-title2 span, h1, h2, h3, h4, h5, h6) {
font-family: var(--midz-arabic-font) !important;
font-style: normal !important;
letter-spacing: 0 !important;
}
/* Arabic sidebar = the same visual system as English, mirrored only where
direction requires it. No icon/image mirroring. */
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
direction: rtl;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul {
align-items: flex-start !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a {
white-space: normal !important;
word-break: normal !important;
text-align: right !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-bottom ul {
direction: rtl;
justify-content: flex-start !important;
}
@media (max-width: 640px) {
/* Keep the shared English sidebar sizing. Only the Arabic language control
needs RTL-aware placement. */
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content .midz-language-switch-wrap {
margin: 14px 0 18px !important;
padding: 0 var(--midz-sidebar-rail) !important;
justify-content: flex-start !important;
}
}
/* =========================================================
Arabic mobile stability — pass 04
=========================================================
The drawer and floating hamburger intentionally use the shared English
motion/state rules. This guarantees identical scroll behavior on phones.
Only RTL content alignment above is locale-specific.
*/