/* ========================================================================== MISSION, VISION & VALUES (page 118) — ARABIC CORRECTIONS Every rule is behind [dir="rtl"], so the English page cannot match any of it. "Our Purpose" — the Mission / Vision row (5b4b69f). The row itself mirrors correctly in Arabic: Mission text on the right, the Vision photo panel on the left, same 40 / 60 split. What did not mirror are the side offsets set in the editor on the pieces inside it, which Elementor writes as physical left/right values. English offsets that pull an element outward, towards the left edge, kept pulling left in Arabic — where left is inward. So: - the Vision text block (6c59223) sat 200px in from the panel's reading edge instead of hugging it, with its heading and paragraph pushed in with it; - the Mission target icon (a31a179) sat 121px in from where English puts it, no longer over the start of the "Our Mission" heading. The fix gives each element the SAME offset the editor holds, on the reading start side instead of the physical left. No new values, nothing to the English page, and every breakpoint follows the editor's own breakpoints. ========================================================================== */ /* * 1. THE VISION TEXT BLOCK — a container. * * Elementor applies a container's margins through --margin-inline-start/-end. * Normally the editor's left margin is the start margin, so it mirrors on its * own. But WordPress marks the Arabic site with body.rtl, and for body.rtl * Elementor maps them the other way round (start = the editor's right margin), * on the assumption that the page was designed in Arabic. This page was designed * in English, so that keeps the English position instead of mirroring it. * * Restoring the normal mapping for this block lets the editor's own margin * variables mirror at every breakpoint. */ [dir="rtl"] .elementor-118 .elementor-element.elementor-element-6c59223 { --margin-inline-start: var(--margin-left); --margin-inline-end: var(--margin-right); } /* * 2. THE WIDGETS — the Mission icon, the Mission heading, the Vision heading * and the Vision paragraph. * * A widget's margin is written as one physical `margin` shorthand, with no * variables to remap, so the editor's left margin is applied here on the start * side, per breakpoint exactly as in the editor (tablet ≤1024px, mobile ≤767px). * The top and bottom margins are not touched. * * (The two short dividers in this section are hidden sitewide by * no-accent-dash.css, so they are left alone.) */ [dir="rtl"] .elementor-118 .elementor-element.elementor-element-a31a179 { margin-left: 0; margin-right: -121px; } /* Mission icon */ [dir="rtl"] .elementor-118 .elementor-element.elementor-element-862736a { margin-left: 0; margin-right: 3px; } /* "Our Mission" */ [dir="rtl"] .elementor-118 .elementor-element.elementor-element-2f4867f { margin-left: 0; margin-right: -27px; } /* "Our Vision" */ [dir="rtl"] .elementor-118 .elementor-element.elementor-element-ba6daba { margin-left: 0; margin-right: -36px; } /* Vision paragraph */ @media (max-width: 1024px) { [dir="rtl"] .elementor-118 .elementor-element:is( .elementor-element-a31a179, .elementor-element-862736a, .elementor-element-2f4867f, .elementor-element-ba6daba ) { margin-right: 0; } } /* * 4. THE MISSION ICON WAS 6px OFF THE SCREEN. * * The -139px above mirrors the editor's left margin, which is the right thing * to do for the WIDGET. It is the wrong thing for the ARTWORK, because the * artwork is not centred in its own file: inside the 300x168 png the icon * occupies x 122-191, so its centre sits 6.5px right of the picture's centre. * * Mirroring a margin flips the box but not that internal offset, so the 6.5px * lands on the other side and the error doubles to 13px. English insets the * icon 7px from the left edge; Arabic put it 6px PAST the right edge, where it * was clipped. Measured at 375, 390, 393, 412 and 430 - the same 6px at every * width, because both the margin and the picture are fixed. * * Giving the 13px back lands the artwork 7px inside the right edge: the exact * mirror of English. The widget, the picture and its size are unchanged; only * the one mirrored margin is corrected, and only on phones. */ @media (max-width: 767px) { [dir="rtl"] .elementor-118 .elementor-element.elementor-element-a31a179 { margin-right: -126px; } } /* * 3. THE VERTICAL GAP ABOVE THE MISSION ICON, ON PHONES. * * The Mission column (10b99b4) is a flex column with `justify-content: center` * and a fixed `--min-height: 620px`. Its contents are far shorter than that, so * the leftover room is split evenly above and below them — which means the * stack's position depends on how tall the copy happens to be. * * The Arabic paragraph sets shorter than the English one. Measured at 390px: * * paragraph English 159px Arabic 111px -48px * leftover split 2 x 203.5px split 2 x 227.5px +24px each side * ------------------------------------------------------------------ * title -> icon English 40px Arabic 64px * * So the icon, the "Our Mission" heading and the paragraph all sit 24px lower * in Arabic than in English, purely because there is less text to centre. That * 24px is the gap in the brief. Nothing is mis-mirrored here: the gaps BETWEEN * the pieces are already identical (icon -> heading is 5px in both). * * Taking 48px off the column's floor gives back exactly the 48px the Arabic * copy does not use, so the centring lands where English lands. Verified at * 360, 390 and 430: * * Arabic before Arabic after English * title -> icon 64 / 64 / 76 40 / 40 / 52 40 / 40 / 52 * icon -> heading 5 / 5 / 4 5 / 5 / 4 5 / 5 / 5 * text -> Vision 61 / 61 / 73 37 / 37 / 49 37 / 37 / 49 * * Phones only, so the Arabic tablet and desktop layouts are untouched, and * behind [dir="rtl"], so English cannot match it. Only the floor moves: the * column still grows if the copy ever needs more room. */ @media (max-width: 767px) { [dir="rtl"] .elementor-118 .elementor-element.elementor-element-10b99b4 { --min-height: 572px; min-block-size: 572px; } }