/* 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) {
/* The scroll-only menu trigger mirrors to the left in Arabic. */
html[lang="ar"][dir="rtl"] .scroll-to-show-menu .hamburg-menu {
left: 32px !important;
right: auto !important;
}
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: auto !important;
margin-right: 0 !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: auto !important;
margin-right: 0 !important;
}
}
/* Keep the Arabic document locked to the viewport. The animated partner
rail and off-canvas drawer use translated elements; without this guard
those elements can widen the page and make it drift horizontally. */
html[lang="ar"][dir="rtl"],
html[lang="ar"][dir="rtl"] body {
overflow-x: clip !important;
overscroll-behavior-x: none !important;
}
html[lang="ar"][dir="rtl"] .our-partner-sec,
html[lang="ar"][dir="rtl"] .our-partner-marquee-viewport,
html[lang="ar"][dir="rtl"] .header-sidebar-wrap {
max-width: 100vw !important;
overflow-x: hidden !important;
contain: paint !important;
}
/* The anti-spam field was hidden at left:-9999px. In an RTL document that
becomes real horizontal page width and is exposed as soon as the sticky
menu changes the overflow state. Hide it accessibly without placing it
outside the viewport. */
html[lang="ar"][dir="rtl"] .honeypot {
position: fixed !important;
inset: 0 auto auto 0 !important;
left: 0 !important;
right: auto !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
pointer-events: none !important;
}
/* Keep the drawer scrollable without showing its RTL scrollbar in the
middle of the screen. */
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Pull the Arabic Follow Us rail slightly in from the laptop edge and make
it a little lighter visually. Phone/tablet geometry remains unchanged. */
@media (min-width: 992px) {
html[lang="ar"][dir="rtl"] .floating-social {
left: clamp(30px, 2vw, 40px) !important;
right: auto !important;
width: 44px !important;
padding: 22px 0 !important;
gap: 15px !important;
}
html[lang="ar"][dir="rtl"] .floating-social ul {
gap: 15px !important;
}
html[lang="ar"][dir="rtl"] .floating-social ul a,
html[lang="ar"][dir="rtl"] .floating-social ul button.midz-regional-trigger--float {
width: 22px !important;
height: 22px !important;
font-size: 13px !important;
}
html[lang="ar"][dir="rtl"] .floating-social .midz-language-switch--floating {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
font-size: 9px !important;
}
html[lang="ar"][dir="rtl"] .floating-social .follow-text {
font-size: 10px !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.
*/
/* Project Guidelines uses a physical leftward transform in JavaScript.
Keep this media-only rail LTR in Arabic so every panel follows the same
coordinates as English instead of moving into an empty black area. */
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-guidelines-viewport,
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-guidelines-track {
direction: ltr !important;
}
html[lang="ar"][dir="rtl"] body.midz-project-page .midz-project-guidelines-track .midz-project-media-frame {
direction: ltr !important;
}
/* Keep the native budget control physically consistent with its LTR progress
fill. The surrounding form remains RTL, but dragging right always increases
the value without the thumb jumping across the track. */
html[lang="ar"][dir="rtl"] .contact-form--advanced [data-budget-range] {
direction: ltr !important;
}
/* FAQ keeps its physical controls in place, while Arabic question and answer
copy always flows and aligns from right to left. */
html[lang="ar"][dir="rtl"] .faq-item .faq-question-text,
html[lang="ar"][dir="rtl"] .faq-item .accordion-body p {
direction: rtl !important;
text-align: right !important;
unicode-bidi: plaintext;
}
/* Desktop Arabic inner-page heroes mirror the English composition: copy on
the right and the floating icon on the left. Mobile/tablet stay unchanged. */
@media (min-width: 992px) {
/* Keep the navigation links centred; move only the portfolio arrow. */
html[lang="ar"][dir="rtl"] body .header-menu-wrap .header-right-info {
position: static !important;
width: 24px !important;
height: 24px !important;
margin-left: auto !important;
margin-right: 0 !important;
}
html[lang="ar"][dir="rtl"] body .header-menu-wrap .midz-header-slot-download {
position: absolute !important;
top: calc(var(--midz-header-pt) + ((var(--midz-header-row-h) - 24px) / 2)) !important;
left: 48px !important;
right: auto !important;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
}
html[lang="ar"][dir="rtl"] body.services-page .midz-services-hero-shape,
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-shape,
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-shape,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
left: clamp(40px, 4.5vw, 72px) !important;
right: auto !important;
bottom: -60px !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
mix-blend-mode: normal !important;
}
html[lang="ar"][dir="rtl"] body.services-page .midz-services-hero-content,
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content,
html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-content,
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-content,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
margin-left: auto !important;
margin-right: 0 !important;
text-align: right !important;
}
}
/* Arabic desktop drawer: same right-side opening as phone, with a small
breathing gap from the viewport edge. English remains unchanged. */
@media (min-width: 992px) {
html[lang="ar"][dir="rtl"] .header-sidebar-wrap .header-sidebar-content {
width: 42% !important;
margin-left: auto !important;
margin-right: clamp(12px, 1.2vw, 22px) !important;
}
}
/* Arabic phone/tablet inner-page heroes: keep the exact English geometry and
stacking, then mirror only the artwork side and text alignment for RTL. */
@media (max-width: 991px) {
html[lang="ar"][dir="rtl"] body.services-page .midz-services-hero-content,
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content,
html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-content,
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-content,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content,
html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-copy,
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-copy,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-copy,
html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-actions,
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-actions,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-actions {
text-align: right !important;
}
html[lang="ar"][dir="rtl"] body.services-page .midz-services-hero-shape,
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
html[lang="ar"][dir="rtl"] body.about-page .midz-page-hero-shape,
html[lang="ar"][dir="rtl"] body.projects-page .midz-page-hero-shape,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
position: absolute !important;
left: clamp(8px, 2vw, 20px) !important;
right: auto !important;
}
/* The English About artwork intentionally extends 40px beyond its side;
mirror that exact composition on Arabic. */
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape {
left: -40px !important;
right: auto !important;
}
}
/* Services archive: Arabic card copy and feature bullets start from the
physical right edge. English keeps the original left-to-right layout. */
html[lang="ar"][dir="rtl"] body.services-page .midz-service-card-copy,
html[lang="ar"][dir="rtl"] body.services-page .midz-service-card-copy h3,
html[lang="ar"][dir="rtl"] body.services-page .midz-service-card-copy p,
html[lang="ar"][dir="rtl"] body.services-page .midz-service-card-copy ul,
html[lang="ar"][dir="rtl"] body.services-page .midz-service-card-copy li {
direction: rtl !important;
text-align: right !important;
}
html[lang="ar"][dir="rtl"] body.services-page .midz-service-card-copy li {
padding-left: 0 !important;
padding-right: 18px !important;
}
html[lang="ar"][dir="rtl"] body.services-page .midz-service-card-copy li::before {
left: auto !important;
right: 0 !important;
}
@media (max-width: 767px) {
/* About: preserve the requested Latin/Roman step markers, but keep long
Arabic labels compact and readable on narrow screens. */
html[lang="ar"][dir="rtl"] body.about-page .awards-sec .awards-box .awards-inner h4 {
font-size: clamp(17px, 4.8vw, 22px) !important;
line-height: 1.35 !important;
letter-spacing: 0 !important;
}
html[lang="ar"][dir="rtl"] body.about-page .faq-sec .section-header .section-title {
font-size: clamp(26px, 7.2vw, 34px) !important;
line-height: 1.25 !important;
}
html[lang="ar"][dir="rtl"] body.about-page .faq-item .accordion-header button {
font-size: 15px !important;
line-height: 1.55 !important;
}
/* Contact mobile: copy occupies the first row; artwork and CTA share the
row beneath it, so the artwork cannot cover the paragraph. */
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"copy copy"
"shape actions" !important;
align-items: center !important;
column-gap: 12px !important;
row-gap: 22px !important;
}
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
display: contents !important;
}
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-copy {
grid-area: copy !important;
width: 100% !important;
}
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
grid-area: shape !important;
position: relative !important;
inset: auto !important;
width: min(47vw, 210px) !important;
max-width: 100% !important;
margin: 0 !important;
justify-self: start !important;
align-self: center !important;
}
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-actions {
grid-area: actions !important;
margin: 0 !important;
padding: 0 !important;
justify-self: end !important;
align-self: center !important;
}
}
/* Arabic service cards: keep copy on the right and artwork on the opposite
side on both desktop and mobile, with no artwork/text collision. */
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-media {
left: clamp(-36px, -2vw, -16px) !important;
right: auto !important;
}
@media (max-width: 767px) {
html[lang="ar"][dir="rtl"] body.services-page:not(.about-page) .midz-service-card-media {
left: auto !important;
right: auto !important;
align-self: flex-start !important;
margin: -6px -18px 0 0 !important;
}
}
/* Arabic desktop inner heroes: artwork is on the right; the RTL copy occupies
the left column so both remain fully visible. */
@media (min-width: 992px) {
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
left: auto !important;
right: clamp(40px, 4.5vw, 72px) !important;
}
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content {
max-width: min(760px, 56%) !important;
margin-left: 0 !important;
margin-right: auto !important;
}
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
direction: ltr !important;
grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.78fr) !important;
}
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
grid-column: 1 !important;
direction: rtl !important;
}
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
grid-column: 2 !important;
position: relative !important;
inset: auto !important;
justify-self: end !important;
direction: rtl !important;
}
}
/* Arabic phones: text, CTA, then artwork. Both CTA and artwork stay on the
right, away from the fixed Follow Us rail on the left. */
@media (max-width: 991px) {
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-inner,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-inner {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"copy"
"actions"
"shape" !important;
row-gap: 20px !important;
align-items: start !important;
}
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-content,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-content {
display: contents !important;
}
html[lang="ar"][dir="rtl"] body.about-page .midz-services-copy,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-copy {
grid-area: copy !important;
width: 100% !important;
}
html[lang="ar"][dir="rtl"] body.about-page .midz-services-actions,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-actions {
grid-area: actions !important;
justify-self: end !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
}
html[lang="ar"][dir="rtl"] body.about-page .midz-services-hero-shape,
html[lang="ar"][dir="rtl"] body.contact-page .midz-page-hero-shape {
grid-area: shape !important;
position: relative !important;
inset: auto !important;
justify-self: end !important;
align-self: center !important;
width: min(58vw, 240px) !important;
max-width: 70vw !important;
margin: 0 !important;
}
}