/* 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 — mirror the English typography system.
* English uses Arapey for display copy and Urbanist for UI/body copy. Those
* two fonts do not contain Arabic glyphs, so Arabic falls back per-script:
* Amiri for Arapey-style display text and IBM Plex Sans Arabic for Urbanist-
* style UI/body text. Latin words and numbers still render in the exact
* English fonts because Arapey/Urbanist stay first in each stack.
*/
html[dir="rtl"] {
--midz-arabic-display-font: "Arapey", "Amiri", Georgia, serif;
--midz-arabic-ui-font: "Urbanist", "IBM Plex Sans Arabic", "Tahoma", "Arial", sans-serif;
--midz-arabic-font: var(--midz-arabic-ui-font);
--font_arapey: var(--midz-arabic-display-font);
--font_urbanist: var(--midz-arabic-ui-font);
}
html[dir="rtl"] body {
font-family: var(--font_urbanist);
direction: rtl;
text-align: start;
}
/* UI/body copy follows the same Urbanist role used by English. */
html[dir="rtl"] .header-menu-wrap .navbar .menu li a,
html[dir="rtl"] .header-sidebar-wrap .sidebar-menu a,
html[dir="rtl"] .midz-language-switch,
html[dir="rtl"] .aixor-main .theme-btn,
html[dir="rtl"] .aixor-main .section-subtitle,
html[dir="rtl"] .aixor-main button,
html[dir="rtl"] .aixor-main input,
html[dir="rtl"] .aixor-main textarea,
html[dir="rtl"] .aixor-main select {
font-family: var(--font_urbanist) !important;
}
/* Arabic should not inherit Latin tracking. Keep each component's original
* font family, weight and italic treatment so the hierarchy matches English. */
html[dir="rtl"] .aixor-main h1,
html[dir="rtl"] .aixor-main h2,
html[dir="rtl"] .aixor-main h3,
html[dir="rtl"] .aixor-main h4,
html[dir="rtl"] .aixor-main h5,
html[dir="rtl"] .aixor-main h6,
html[dir="rtl"] .aixor-main .section-title,
html[dir="rtl"] .aixor-main .section-subtitle,
html[dir="rtl"] .header-menu-wrap .navbar .menu li a,
html[dir="rtl"] .header-sidebar-wrap .sidebar-menu a {
letter-spacing: 0 !important;
}
html[dir="rtl"] .header-menu-wrap .navbar .menu li a,
html[dir="rtl"] .header-sidebar-wrap .sidebar-menu a {
text-transform: none !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;
}
}
html[dir="rtl"] .scroll-to-show-menu .hamburg-menu {
right: auto !important;
left: 35px !important;
}
/* Sidebar panel lives on the left in Arabic. */
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
margin-left: 0 !important;
margin-right: auto !important;
}
html[dir="rtl"] .header-sidebar-wrap:not(.active) .header-sidebar-content {
transform: translate3d(-100%, 0, 0) !important;
}
html[dir="rtl"] .header-sidebar-wrap .close-header-sidebar {
right: auto !important;
left: 60px !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-shape {
right: auto !important;
left: -128px !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-top,
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-top .regional-phones-list--sidebar,
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-top .regional-phone-item {
text-align: start !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a::before {
left: auto !important;
right: 0 !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:hover,
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:focus-visible,
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a.active {
padding-left: 0 !important;
padding-right: 20px !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a > span {
margin-left: 0 !important;
margin-right: 4px !important;
}
@media (min-width: 641px) and (max-width: 991px) {
html[dir="rtl"] .scroll-to-show-menu .hamburg-menu {
left: 24px !important;
right: auto !important;
}
html[dir="rtl"] .header-sidebar-wrap .close-header-sidebar {
left: 22px !important;
right: auto !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:hover,
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a:focus-visible,
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a.active {
padding-left: 0 !important;
padding-right: 14px !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a > span {
margin-left: 0 !important;
margin-right: 2px !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-bottom {
padding: 0 var(--midz-sidebar-rail) 40px 0 !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-shape {
right: auto !important;
left: -100px !important;
}
}
@media (min-width: 992px) {
html[dir="rtl"] .scroll-to-show-menu .hamburg-menu {
left: 5px !important;
right: auto !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .sidebar-menu ul li a > span {
margin-left: 0 !important;
margin-right: 3px !important;
}
html[dir="rtl"] .header-sidebar-wrap .header-sidebar-content .header-sidebar-bottom {
padding: 0 var(--midz-sidebar-rail) 50px 0 !important;
}
}
@media (max-width: 640px) {
html[dir="rtl"] .scroll-to-show-menu .hamburg-menu {
left: 20px !important;
right: auto !important;
}
html[dir="rtl"] .header-sidebar-wrap .close-header-sidebar {
left: 20px !important;
right: auto !important;
}
html[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;
}
.midz-language-switch {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
white-space: nowrap;
}
.midz-language-switch--header {
margin-inline-end: 14px;
font-weight: 600;
}
.midz-language-switch-wrap {
margin-block: 14px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}