/* ============================================================================ CloudTart — RTL layer (cloudtart-rtl.css) ============================================================================ Loaded LAST and ONLY for RTL locales (fa_IR, ar, …) via is_rtl() in functions.php, so it wins the cascade without !important and never touches LTR visitors. Scope: STATIC LAYOUT ONLY. The document already flows RTL because header.php emits (language_attributes), so native text-align, flex and grid ordering mostly self-correct. This file fixes what does NOT auto-mirror: • explicit physical declarations (left/right, margin-/padding-left/right, float, text-align:left, border-left/right); • fixed/absolute anchors (the vertical header rail, scroll-to-top); • Bootstrap's PHYSICAL utilities/offsets (text-start, offset-*, ms/me); • a few static-positioning transforms (the rotated header phone number). GSAP / Swiper / marquee animation DIRECTION is intentionally left untouched. Selector convention: html[dir="rtl"] … — one extra type+attribute of specificity, enough to beat the source rules cleanly. ============================================================================ */ /* ------------------------------------------------------------------ * * 0) PERSIAN / ARABIC FONT — "Lahzeh" * ------------------------------------------------------------------ */ /* Funnel Display/Sans (the LTR brand fonts) ship Latin glyphs only, so RTL text fell back to a generic system font. Lahzeh is a dedicated Persian/Arabic face; it is declared HERE (in the RTL-only stylesheet) so its files download only on RTL pages, never weighing down the LTR site. We then point the theme's two typography variables at it — the theme applies those variables to body + headings with !important, so this single override re-skins ALL RTL type. */ @font-face { font-family: 'Lahzeh'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/lahzeh/Lahzeh-Light.woff2') format('woff2'), url('../fonts/lahzeh/Lahzeh-Light.woff') format('woff'); } @font-face { font-family: 'Lahzeh'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/lahzeh/Lahzeh-Regular.woff2') format('woff2'), url('../fonts/lahzeh/Lahzeh-Regular.woff') format('woff'); } @font-face { font-family: 'Lahzeh'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/lahzeh/Lahzeh-Medium.woff2') format('woff2'), url('../fonts/lahzeh/Lahzeh-Medium.woff') format('woff'); } @font-face { font-family: 'Lahzeh'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/lahzeh/Lahzeh-Bold.woff2') format('woff2'), url('../fonts/lahzeh/Lahzeh-Bold.woff') format('woff'); } @font-face { font-family: 'Lahzeh'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/lahzeh/Lahzeh-ExtraBold.woff2') format('woff2'), url('../fonts/lahzeh/Lahzeh-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Lahzeh'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/lahzeh/Lahzeh-Black.woff2') format('woff2'), url('../fonts/lahzeh/Lahzeh-Black.woff') format('woff'); } /* Re-point the theme's display + body type to Lahzeh for RTL (higher specificity than the :root defaults in cloudtart-fonts.css). Latin brand names are kept as a fallback purely for any stray Latin glyphs (Lahzeh covers Latin too). */ html[dir="rtl"] { --ct-font-display: 'Lahzeh', 'Funnel Display', Tahoma, Arial, sans-serif; --ct-font-body: 'Lahzeh', 'Funnel Sans', Tahoma, Arial, sans-serif; } /* Safety net for any element that hard-codes a family instead of the variable. */ html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] button, html[dir="rtl"] textarea, html[dir="rtl"] select { font-family: var(--ct-font-body) !important; } /* ------------------------------------------------------------------ * * 1) GLOBAL BASE & BOOTSTRAP PHYSICAL UTILITIES * ------------------------------------------------------------------ */ html[dir="rtl"] body { text-align: right; } /* Bootstrap text utilities are physical (not logical) — flip the ones used. */ html[dir="rtl"] .text-start { text-align: right !important; } html[dir="rtl"] .text-end { text-align: left !important; } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } /* Float utilities */ html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } /* Auto-margin utilities */ html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; } html[dir="rtl"] .ml-auto { margin-right: auto; margin-left: 0; } html[dir="rtl"] .mr-auto { margin-left: auto; margin-right: 0; } /* Bootstrap grid offsets are margin-left based — convert to margin-right. They MUST be scoped to the SAME breakpoint Bootstrap applies them at, otherwise the margin leaks onto smaller screens and pushes the column off-centre (this was the bug shoving the contact form / FAQ / CTA — all in .offset-xxl-2 — to the left edge on mobile). */ @media only screen and (min-width: 1400px) { html[dir="rtl"] .offset-xxl-1 { margin-left: 0; margin-right: 8.33333%; } html[dir="rtl"] .offset-xxl-2 { margin-left: 0; margin-right: 16.66667%; } html[dir="rtl"] .offset-xxl-3 { margin-left: 0; margin-right: 25%; } } @media only screen and (min-width: 1200px) { html[dir="rtl"] .offset-xl-1 { margin-left: 0; margin-right: 8.33333%; } html[dir="rtl"] .offset-xl-2 { margin-left: 0; margin-right: 16.66667%; } } @media only screen and (min-width: 992px) { html[dir="rtl"] .offset-lg-1 { margin-left: 0; margin-right: 8.33333%; } html[dir="rtl"] .offset-lg-2 { margin-left: 0; margin-right: 16.66667%; } } /* Generic form controls follow the reading direction. */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } /* ------------------------------------------------------------------ * * 2) HEADER — fixed vertical rail: left → right (+ vertical phone number) * ------------------------------------------------------------------ */ /* The luxury rail is position:fixed; left:0; border-right. Mirror it to the right edge with a left border. Widths/heights are unchanged. */ html[dir="rtl"] .header__area { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(240, 240, 240, 0.07); } /* The phone number reads vertically along the rail. Keep the SAME rotation as LTR (rotate(-90deg) from the base rule) so the number sits at the top of the rotated box and is fully visible — flipping to rotate(90deg) pushed it to the bottom where it got clipped against the viewport floor. The rail itself is already moved to the right edge above; we only need extra bottom clearance so the rotated number never touches the bottom of the screen. */ html[dir="rtl"] .header__inner { padding-bottom: 140px; } /* ------------------------------------------------------------------ * * 3) OFF-CANVAS — full-screen 3-column overlay (NOT a side drawer) * ------------------------------------------------------------------ */ /* The overlay covers the whole viewport via opacity/visibility — it must NOT be translated off-screen. We only reverse the inner column order. */ html[dir="rtl"] .offcanvas__body { direction: rtl; } /* Inner blocks read right-to-left. */ html[dir="rtl"] .offcanvas__menu-wrapper, html[dir="rtl"] .offcanvas__social, html[dir="rtl"] .offcanvas__links, html[dir="rtl"] .offcanvas__contact, html[dir="rtl"] .offcanvas__search, html[dir="rtl"] .menu-anim { text-align: right; } /* mean-menu vertical reveal sits on the opposite edge in RTL. */ html[dir="rtl"] .mean-bar { right: 0; left: auto; text-align: right; } html[dir="rtl"] .meanmenu-reveal { right: auto !important; left: 0 !important; } /* Close button: absolute top:right in LTR → move fully to the LEFT so it no longer collides with the (now right-hand) logo. */ html[dir="rtl"] .offcanvas__close { right: auto; left: 40px; } /* The left column (logo / social / links) now sits on the RIGHT after the grid reverse. Its inner padding-left must become padding-right so its contents keep a proper gutter from the screen edge instead of hugging it, and its divider border flips to the left (inner) side. */ html[dir="rtl"] .offcanvas__left { border-right: none; border-left: 1px solid var(--black-4); } html[dir="rtl"] .offcanvas__logo { padding-left: 0; padding-right: 50px; } html[dir="rtl"] .offcanvas__social { padding-left: 0; padding-right: 50px; } html[dir="rtl"] .offcanvas__links { padding-left: 0; padding-right: 50px; } /* Phone & email are Latin/numeric — force LTR so the +, spaces and digits don't get visually reordered (scrambled) inside the RTL flow. Applies in the open off-canvas and the footer (and anywhere a tel:/mailto: link appears). */ html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: embed; display: inline-block; } /* The closed-state rail phone is a rotated vertical block. In RTL the user wants it to read TOP→BOTTOM with the label (e.g. «استعلام») on top, then the number (+98 26 …). Flip the base rotate(-90deg) → rotate(90deg) so the line reads downward, and switch text-align:right → left: with CW rotation the LEFT of the line maps to the TOP, so left-alignment keeps the text in the SAME visible upper part of the strip (a naïve rotate(90deg) with the inherited right-align would shove it down and clip against the viewport floor). direction:ltr keeps the digits in the correct order. */ html[dir="rtl"] .header__support p { direction: ltr; unicode-bidi: embed; text-align: left; -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* Menu links indent from the LEFT in LTR (padding-left). Mirror to the right at every breakpoint the source defines a value for. */ html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 1400px) and (max-width: 1919px) { html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { padding-left: 0; padding-right: 60px; } html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { padding-left: 0; padding-right: 90px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { padding-left: 0; padding-right: 50px; } html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a { padding-left: 0; padding-right: 80px; } html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a { padding-left: 0; padding-right: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { padding-left: 0; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { padding-left: 0; padding-right: 20px; } } @media only screen and (max-width: 767px) { html[dir="rtl"] .offcanvas__menu-wrapper.mean-container .mean-nav ul li a { padding-left: 0; padding-right: 15px; } } /* ------------------------------------------------------------------ * * 4) HERO BLOCKS (all templates) * ------------------------------------------------------------------ */ html[dir="rtl"] .hero__title, html[dir="rtl"] .hero__sub-title, html[dir="rtl"] .hero__text, html[dir="rtl"] .hero__content, html[dir="rtl"] .portfolio__hero-right-2 { text-align: right; } /* The home hero subtitle uses `text-align: justify; text-align-last: left` in the source, which keeps it left-anchored under RTL. Force a clean right edge. */ html[dir="rtl"] .hero__sub-title { text-align: right; text-align-last: right; } /* Highlight / stroke spans keep their inline-block boxes intact when mirrored. */ html[dir="rtl"] .text-stroke, html[dir="rtl"] .highlight-cloudtart { display: inline-block; } /* ------------------------------------------------------------------ * * 5) HOME SECTIONS * ------------------------------------------------------------------ */ /* About: the right-hand image stack hugs the opposite side. */ html[dir="rtl"] .about__img-right { margin-left: 0; margin-right: auto; } /* The about heading under the hero ("Epic Growth, Results That Scale") has `text-align: left; text-align-last: left` in the source — the second of which was dragging the wrapped last word ("می‌گیرند") to the left. Flip BOTH. */ html[dir="rtl"] .about__title-wrapper { text-align: right; } html[dir="rtl"] .about__title-wrapper .header_v1 { text-align: right; text-align-last: right; } /* Home about section: leave it in its natural RTL flow (image mirrors to the right, content to the left). Forcing the image left via direction:ltr made the parallax image (.img-anim, data-speed) fail to render on FA desktop, so we keep RTL here and just ensure the copy is right-aligned. */ html[dir="rtl"] .about__content { text-align: right; } /* Three-pillars ("CRAFTING DIGITAL LEGACIES" → items 1/2/3): - Keep the COLUMNS in English order: floating image column on the LEFT, items column on the RIGHT (`.service__list-wrapper { direction: ltr }`). - Flow each ITEM's internal 4-col grid (number / title / description / arrow) RTL, so each card reads number+title on the RIGHT → description → arrow on the FAR LEFT (`.service__list { direction: rtl }`). */ html[dir="rtl"] .service__list-wrapper { direction: ltr; } html[dir="rtl"] .service__list { direction: rtl; } /* Floating per-card image: the column structure already matches English (image column on the LEFT, cards on the RIGHT), so we KEEP the English slide transforms — anything more negative slid the image OUT of its overflow:hidden frame. Raise stacking so it sits ON TOP, and (user-supplied fix) nudge the inner right by 55px so it no longer tucks UNDER the cards in RTL. */ html[dir="rtl"] .service__img-wrapper { position: relative; z-index: 4; } html[dir="rtl"] .service__list-wrapper .service__img { z-index: 4; } html[dir="rtl"] .service__list-wrapper .service__img-wrapper img { left: 55px; } /* Services stack banners (Web & Experience, Growth & Performance, …): in LTR the text column is 60% on the left and the product image is pinned to the RIGHT edge (.service-img right:-15% / right:0). Under RTL the text column moves to the right on its own (flex-start follows direction), so the image must move to the LEFT edge — otherwise text and image overlap on the right. The round arrow control (absolute top:right) moves to top:left. */ @media only screen and (min-width: 992px) { html[dir="rtl"] .services-stack__image .service-img { right: auto; left: -15%; } } @media only screen and (min-width: 1200px) { html[dir="rtl"] .services-stack__image .service-img { right: auto; left: 0; } } /* The round arrow control is position:absolute top:right at EVERY width (on mobile the stack becomes flex-column cards but the control stays absolute), so its mirror must NOT be desktop-scoped — otherwise it overlaps the right-aligned banner title on phones/tablets. */ html[dir="rtl"] .mxd-services-stack__controls { right: auto; left: 1rem; } /* The banner copy has an explicit `text-align: left` in the source — flip the title, description, tags and control link to the right so each banner reads right-to-left with its title anchored to the right side of the card. */ html[dir="rtl"] .services-stack .mxd-services-stack__title, html[dir="rtl"] .services-stack .mxd-services-stack__title h3, html[dir="rtl"] .services-stack .mxd-services-stack__info, html[dir="rtl"] .services-stack .mxd-services-stack__info p, html[dir="rtl"] .services-stack .mxd-services-cards__tags .tag, html[dir="rtl"] .services-stack .mxd-services-stack__controls a { text-align: right; } /* The 60%-wide title/info columns hug the right edge of the card. */ html[dir="rtl"] .mxd-services-stack__title.width-60, html[dir="rtl"] .mxd-services-stack__title.width-70, html[dir="rtl"] .mxd-services-stack__info.width-60, html[dir="rtl"] .mxd-services-stack__info.width-70 { margin-left: auto; margin-right: 0; } /* Tags row flows from the right. */ html[dir="rtl"] .mxd-services-cards__tags { justify-content: flex-start; } /* Mobile banner image — MIRROR of the LTR corner placement (cloudtart-overrides .css): put the photo in the BOTTOM-LEFT corner with its bottom-left + top-right corners rounded. Only the horizontal margins and the two rounded corners flip; the bottom margin (vertical) stays shared with the LTR rule. */ @media only screen and (max-width: 991px) { html[dir="rtl"] .services-stack__image { margin-left: -2rem; /* flush to the LEFT edge */ margin-right: auto; border-top-left-radius: 0; border-bottom-right-radius: 0; border-top-right-radius: 55px; border-bottom-left-radius: 55px; } } @media only screen and (max-width: 767px) { html[dir="rtl"] .services-stack__image { margin-left: -1.5rem; margin-right: auto; } } @media only screen and (max-width: 575px) { html[dir="rtl"] .services-stack__image { border-top-right-radius: 45px; border-bottom-left-radius: 45px; } } /* Portfolio Categories gallery: the expanding tiles + vertical labels. The flex row reverses naturally under RTL; keep the vertical label glyph orientation but align the revealed panel copy (.ct-cat__panel) to the right. */ html[dir="rtl"] .ct-cat__panel, html[dir="rtl"] .ct-cat__title, html[dir="rtl"] .ct-cat__desc { text-align: right; } /* ------------------------------------------------------------------ * * 6) PORTFOLIO PAGE * ------------------------------------------------------------------ */ html[dir="rtl"] .portfolio__overlay, html[dir="rtl"] .portfolio__content { text-align: right; } html[dir="rtl"] .portfolio__filter-wrapper { text-align: center; } /* Portfolio hero + section headings: right-align them (the source left-aligns) and, on desktop, trim the oversized Persian display type. Lahzeh renders heavier than the Latin face, so the theme's big Latin sizes looked oversized / overflowed in فارسی — worst on very wide monitors. • Hero title is a FLAT size in the source (133px ≥1200) → set a flat RTL size. • The section headings use a vw clamp (--fs-main-sub-head: clamp(37px,3vw+2px, 130px)) → we only LOWER THE CAP, so responsive scaling is kept on normal screens (hard-coded px would inflate laptops). Persian also needs more line-height than the source's `line-height:1`. `.text-start` (Bootstrap, text-align:left !important) is why the testimonials heading stayed left in RTL — override it. */ html[dir="rtl"] .portfolio__hero-right-2 .title, html[dir="rtl"] .portfolio__hero-right-2 .animate_content { text-align: right; } html[dir="rtl"] .service__area-portfolio .sec-title-wrapper h2 { text-align: right; } /* Testimonials heading + subtitle: the source uses Bootstrap `.text-start` AND a mobile `text-align:center` — override both with the id for full weight, target the h2/p directly so split/inline children obey too. Desktop + mobile. */ html[dir="rtl"] #testimonials .testimonial__content, html[dir="rtl"] #testimonials .testimonial__content h2, html[dir="rtl"] #testimonials .testimonial__content p { text-align: right !important; } html[dir="rtl"] .service__area-portfolio .service__top-text p, html[dir="rtl"] .service__area-portfolio .service__top-text p div { text-align: right !important; } /* Service-list cards (Custom Logo Design, …): the theme explicitly left-aligns the card title-wrapper + this page's sec-title (main.css ~5070). Right-align the card titles + body in RTL. */ html[dir="rtl"] .service__area-portfolio .service__title-wrapper, html[dir="rtl"] .service__area-portfolio .service__title, html[dir="rtl"] .service__area-portfolio .service__text, html[dir="rtl"] .service__area-portfolio .service__text p { text-align: right; } @media (min-width: 1200px) { html[dir="rtl"] .portfolio__hero-right-2 .title { font-size: 110px; line-height: 1.1; } html[dir="rtl"] .service__area-portfolio .sec-title-wrapper h2 { font-size: clamp(37px, 3vw + 2px, 92px); line-height: 1.35; } html[dir="rtl"] #testimonials .testimonial__content h2 { font-size: clamp(37px, 3vw + 2px, 100px); line-height: 1.3; } } /* ------------------------------------------------------------------ * * 6b) SINGLE-PROJECT PAGE (the new dark project-detail design) * ------------------------------------------------------------------ */ /* Hero: mirror the LTR swap → project image on the LEFT, title/copy on the RIGHT. (overrides.css forces the inner to a LTR flex row-reverse; here we set it back to `row` so the markup order [image, text] reads image-left, text-right.) */ html[dir="rtl"] body.single-project .service__hero-inner-2 { flex-direction: row; } html[dir="rtl"] body.single-project .service__hero-right-2 { direction: rtl; text-align: right; } @media (max-width: 767px) { html[dir="rtl"] body.single-project .service__hero-inner-2 { flex-direction: column-reverse; } } /* The magnetic title is a fit-content block — push it to the right edge. */ html[dir="rtl"] body.single-project .single-project-hero .ct-mag { margin-left: auto; margin-right: 0; } /* Body copy + feature cards read right-to-left. */ html[dir="rtl"] body.single-project .single__content, html[dir="rtl"] body.single-project .single__content h2, html[dir="rtl"] body.single-project .single__content h3, html[dir="rtl"] body.single-project .feature__title { text-align: right; } /* Fan-out gallery: flip the header (title right, arrow points the other way) and mirror the stack so the frames pile on the RIGHT and fan out to the LEFT. */ html[dir="rtl"] body.single-project .ct-fan__head { flex-direction: row-reverse; } html[dir="rtl"] body.single-project .ct-fan__title, html[dir="rtl"] body.single-project .ct-fan__hint { text-align: right; } html[dir="rtl"] body.single-project .ct-fan__arrow { transform: scaleX(-1); } html[dir="rtl"] body.single-project .ct-fan:hover .ct-fan__arrow { transform: scaleX(-1) translateX(6px); } html[dir="rtl"] body.single-project .ct-fan__frame { left: auto; right: calc(var(--i) * 9%); } html[dir="rtl"] body.single-project .ct-fan:hover .ct-fan__frame { left: auto; right: calc(var(--i) * 54% / max(1, var(--n) - 1)); transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * -5deg)); } /* Hovered frame grows/lifts with the mirrored tilt. */ html[dir="rtl"] body.single-project .ct-fan:hover .ct-fan__frame:hover { transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * -5deg)) scale(1.1) translateY(-18px); } /* ------------------------------------------------------------------ * * 7) ABOUT US PAGE * ------------------------------------------------------------------ */ html[dir="rtl"] .team__hero-stats { direction: rtl; } html[dir="rtl"] .culture__item, html[dir="rtl"] .culture__title, html[dir="rtl"] .culture__text { text-align: right; } html[dir="rtl"] .careers__list { text-align: right; padding-left: 0; padding-right: 1.5em; } /* Team Stats banner cards (the bottom section): in LTR the 3D product image is pinned to the BOTTOM-RIGHT corner (position:absolute; right) and the round arrow button to the TOP-RIGHT, while the counter text is right-aligned — so under RTL the right-side image overlapped the (right-aligned) text, and the left-aligned cards read the wrong way. Mirror each card: image + button to the LEFT, all counters anchored to the RIGHT. No width media query → applies on desktop AND mobile (each card is full-width on phones). */ html[dir="rtl"] .mxd-stats-cards__image { right: auto; left: -20px; } html[dir="rtl"] .mxd-stats-cards-image-1 { right: auto; left: 10px; } html[dir="rtl"] .mxd-stats-cards-image-3 { right: auto; left: 0; } html[dir="rtl"] .mxd-stats-cards-image-4 { right: auto; left: 10px; } html[dir="rtl"] .mxd-stats-cards__btngroup .btn { right: auto; left: 30px; } html[dir="rtl"] .mxd-counter { text-align: right; padding-left: 0; padding-right: 20px; } /* ------------------------------------------------------------------ * * 8) CONTACT PAGE * ------------------------------------------------------------------ */ html[dir="rtl"] .contact__form-group label, html[dir="rtl"] .contact__form-group input, html[dir="rtl"] .contact__form-group textarea, html[dir="rtl"] .contact__form-group select, html[dir="rtl"] .contact__info-content, html[dir="rtl"] .contact__form-checkbox { text-align: right; } html[dir="rtl"] .business__hours-list .business__hours-item { flex-direction: row-reverse; } html[dir="rtl"] .business__hours-image { text-align: left; } html[dir="rtl"] .cta__actions { justify-content: flex-end; } /* FAQ rows: icon side + toggle side. */ html[dir="rtl"] .faq__question { flex-direction: row-reverse; text-align: right; } html[dir="rtl"] .faq__icon { margin-right: 0; margin-left: 12px; } html[dir="rtl"] .faq__toggle { margin-left: 0; margin-right: auto; } /* ------------------------------------------------------------------ * * 9) WHAT WE DO / LEADERS CHOICE * ------------------------------------------------------------------ */ html[dir="rtl"] .service__item-large, html[dir="rtl"] .service__text, html[dir="rtl"] .service__title, html[dir="rtl"] .additional__features, html[dir="rtl"] .seo__item, html[dir="rtl"] .workflow__item, html[dir="rtl"] .feature__item, html[dir="rtl"] .feature-content, html[dir="rtl"] .feature__title { text-align: right; } /* Feature check-lists indent from the right. */ html[dir="rtl"] .service__features, html[dir="rtl"] .hero-feature-list { padding-left: 0; padding-right: 1.25em; } /* ------------------------------------------------------------------ * * 10) BLOG / ARCHIVE / SINGLE / SEARCH / COMMENTS / SIDEBAR * ------------------------------------------------------------------ */ html[dir="rtl"] .blog__meta, html[dir="rtl"] .blog__meta-2, html[dir="rtl"] .single__content, html[dir="rtl"] .single__related, html[dir="rtl"] .widget { text-align: right; } html[dir="rtl"] .pagination, html[dir="rtl"] .nav-links { direction: rtl; } /* Comment thread (nested replies) indentation flips side. */ html[dir="rtl"] .single__comments-list .children { margin-left: 0; margin-right: 30px; padding-left: 0; padding-right: 24px; } /* Search form input + submit button. */ html[dir="rtl"] .ct-search-form input[type="search"], html[dir="rtl"] .search-form input[type="search"] { text-align: right; } html[dir="rtl"] .ct-search-form button, html[dir="rtl"] .search-form button { right: auto; left: 0; } /* ------------------------------------------------------------------ * * 11) FOOTER * ------------------------------------------------------------------ */ /* The footer is now CENTRED for every language and width (per the user's request) — that styling lives in cloudtart-overrides.css so it applies to LTR and RTL alike. Nothing direction-specific is needed here anymore; phone/email inside it still flow LTR via the a[href^="tel:"]/[mailto:] rule above. */ /* ------------------------------------------------------------------ * * 12) FORMS (Gravity Forms bridge) * ------------------------------------------------------------------ */ html[dir="rtl"] .gform_fields { direction: rtl; } html[dir="rtl"] .gfield label, html[dir="rtl"] .gfield input, html[dir="rtl"] .gfield textarea, html[dir="rtl"] .gfield select { text-align: right; } html[dir="rtl"] .gform_button { float: none; } /* ------------------------------------------------------------------ * * 13) DIRECTIONAL ICONS & MISC * ------------------------------------------------------------------ */ /* Font Awesome 6 arrow/angle/chevron glyph swaps. */ html[dir="rtl"] .fa-arrow-right:before { content: "\f060"; } /* → becomes ← */ html[dir="rtl"] .fa-arrow-left:before { content: "\f061"; } html[dir="rtl"] .fa-angle-right:before { content: "\f104"; } html[dir="rtl"] .fa-angle-left:before { content: "\f105"; } html[dir="rtl"] .fa-chevron-right:before { content: "\f053"; } html[dir="rtl"] .fa-chevron-left:before { content: "\f054"; } html[dir="rtl"] .fa-long-arrow-right:before { content: "\f177"; } html[dir="rtl"] .fa-long-arrow-left:before { content: "\f178"; } /* Phosphor arrows (services stack, stats cards) mirror horizontally. */ html[dir="rtl"] .ph-arrow-up-right, html[dir="rtl"] .ph-arrow-down-right, html[dir="rtl"] .ph-bold.ph-arrow-up-right, html[dir="rtl"] .ph-bold.ph-arrow-down-right { transform: scaleX(-1); } /* Swiper sliders: keep the engine LTR for sane math, flip the slide content. */ html[dir="rtl"] .swiper { direction: ltr; } html[dir="rtl"] .swiper-slide { direction: rtl; text-align: right; } html[dir="rtl"] .testimonial__content { text-align: right; } /* Slider arrows: the nav is display:flex, so under RTL the items reversed and the glyphs pointed INWARD [→ ←]. Keep the glyphs as-authored (← prev, → next) and force the nav's internal order back to LTR so they read OUTWARD [← →]; push the pair to the right (flex-end) so it sits on the RTL side. Desktop + mobile (this overrides the mobile `justify-content:center`). */ html[dir="rtl"] .testimonial__navigation { direction: ltr; justify-content: flex-end; } /* Scroll-to-top button hugs the opposite corner. */ html[dir="rtl"] .scroll-top { right: auto; left: 30px; } /* Language switcher reads right-to-left. */ html[dir="rtl"] .ct-lang-switcher { direction: rtl; } /* ==================================================================== * * RESPONSIVE RTL — mobile (≤767) & tablet (768–991) * ==================================================================== * The theme switches to different layouts below 992px (off-canvas becomes a * vertical column, footer stacks/centres, the services stack becomes flex- * column cards, the contact form stacks). The desktop RTL rules above don't * fully cover those, so this block mirrors the direction-sensitive bits that * only appear at small widths. Existing overflow guards * (html,body{overflow-x:clip}; .mxd-section{overflow:clip}) stay in charge of * spill — here we make content FIT and align, not add new guards. * ==================================================================== */ /* ----- Section headings the source explicitly LEFT-aligns at mobile/tablet * breakpoints (so the all-width heading rules above don't reach them). * Mirror to the right; correct in RTL at every width. ----- */ html[dir="rtl"] .hero__title-wrapper, html[dir="rtl"] .service__area .service__heading-row .header_v2, html[dir="rtl"] .service__area-portfolio .service__title-wrapper, html[dir="rtl"] .portfolio__area-2 .sec-title-wrapper { text-align: right; } /* ----- Contact page / form (alignment is direction-sensitive at all widths, * but the breakage is most visible once fields stack on mobile) ----- */ /* Radio "service" cards: icon + label flip side; the label gap mirrors. */ html[dir="rtl"] .service-option { text-align: right; } html[dir="rtl"] .service-text { margin-left: 0; margin-right: 10px; } /* Privacy checkbox row already uses flex `gap` (direction-agnostic); just keep its label right-aligned. */ html[dir="rtl"] .contact__form-checkbox label { text-align: right; } /* Defensive: the stacked form must never push wider than its column. */ html[dir="rtl"] .contact__form-inner, html[dir="rtl"] .contact__form-inner .row { max-width: 100%; } @media only screen and (max-width: 991px) { /* Service-needed grid is 2-col on tablet, 1-col on phone (theme rule); both read right-to-left so the cards order from the right. */ html[dir="rtl"] .service-options { direction: rtl; } /* CTA actions row: keep it centred (it is in LTR too) but allow wrapping so the circular buttons never bleed past the viewport at narrow widths. */ html[dir="rtl"] .cta__actions { flex-wrap: wrap; } } /* ----- Off-canvas menu, mobile: it becomes a single vertical column with 24px * padding (responsive.css). The desktop column gutters (padding-right:50px * on logo/social/links) would double-indent against that 24px, so collapse * them and let the 24px body padding provide the gutter. Blocks stay * right-aligned; the close button keeps its top breathing room. ----- */ @media only screen and (max-width: 991px) { html[dir="rtl"] .offcanvas__logo, html[dir="rtl"] .offcanvas__social, html[dir="rtl"] .offcanvas__links { padding-right: 0; } html[dir="rtl"] .offcanvas__left { border-left: none; } } /* (Footer centring is handled globally in cloudtart-overrides.css for both directions and all widths — see the footer block there.) */ /* ----- Header rail bottom clearance is desktop-only; on mobile the header is a * horizontal top bar (the vertical phone is display:none), so undo the * 140px bottom padding there to avoid a tall empty bar. ----- */ @media only screen and (max-width: 991px) { html[dir="rtl"] .header__inner { padding-bottom: 0; } } /* Front-page "INSIDE THE LAB" heading — RTL keeps the title right-aligned (the general overrides.css rule left-aligns it ≤1867 for LTR). */ @media only screen and (max-width: 1867px) { html[dir="rtl"] .blog__animation .sec-title-wrapper span { text-align: right; text-align-last: right; } }