/* ========================================================================== MOBILE IMAGE RATIOS THE PROBLEM The photo panels on this site are containers carrying a background image and a `min-height` chosen for the desktop layout — 498px, 596px, 620px. Those heights were never given a mobile value, so a 498px-tall box that is 1100px wide on a desktop becomes 498px tall and 279px WIDE on a phone. That inverts every one of them. Measured at 375px before this file: Strategic Partnerships 327 x 596 ratio 0.55 Localization 183 x 498 ratio 0.37 Mission, Vision 295 x 498 ratio 0.59 Research & Development 279 x 620 ratio 0.45 And almost every source image is LANDSCAPE — 1800x1125 (16:10), 1449x1085 (4:3), 1800x1080 (5:3). With `background-size: cover`, a 1.60 image in a 0.55 box shows a narrow vertical strip through the middle of it: roughly a third of the picture, stretched down the screen. The section grows enormously tall and the composition is lost. THE FIX Below the tablet breakpoint each panel drops its desktop min-height and takes an `aspect-ratio` instead. The ratio is NOT one shared number — it is taken from that panel's own source image, so `cover` has almost nothing left to crop and the picture reads the way it was framed. Panels are grouped by the ratio their own artwork actually has. Nothing here applies above 767px: desktop and tablet keep the fixed heights they were designed with. Radius, spacing, background-size and every deliberate background-position are left exactly as they are, except where a comment says otherwise and explains why. Written at four classes (`.e-con` is the fourth) because Elementor emits the min-height it is overriding at three, from a stylesheet that loads after this one. THESE ARE ELEMENT IDS, AND ELEMENT IDS DO NOT SURVIVE A REBUILD. Localization's "Supporting Saudi Vision 2030" section was rebuilt in the editor after this file was written. Elementor issued the new containers new ids, so the three selectors naming the old ones quietly stopped matching anything and the panel went back to 183 x 498 on a phone — the exact measurement this file opens by quoting. The ids were updated in place on 2026-10-06: photo 22104f1 -> 18c1c76 wrappers 490f74c -> 1aa6fff, 51ac264 -> 32f0c6d Nothing else changed: the artwork is still 1800x1125, so the panel is still in the 16:10 group it was always in, and the chain of pass-through wrappers still measures 279 -> 231 -> 183. If a section here ever looks wrong again on a phone, check first that its ids are still the ones written down. ========================================================================== */ @media (max-width: 767px) { /* * WHY THE LIST BELOW EXCLUDES ANY PANEL THAT HOLDS REAL CONTENT. * * Every Elementor container is a WRAPPING flex container. Give a COLUMN one * a fixed height — which an aspect-ratio does — and a child that no longer * fits does not overflow downwards: it wraps into a SECOND FLEX COLUMN, off * to the right, outside the parent entirely. * * That is how a 279px card put its paragraph at x=275, and it was the whole * of the Home page's 264px of sideways scroll. * * `flex-wrap: nowrap` looks like the general cure and is not: on the ROW * containers in this same list, wrapping is what keeps them inside the * viewport, and forcing nowrap pushed Research & Development 209px sideways. * * So the rule is about WHICH panels get a ratio, not about patching the * symptom: a panel that only carries a background image can be given a fixed * height; a panel that also lays out content cannot. The three Home panels * that hold an icon, heading, divider and paragraph were removed for exactly * that reason — see the note at the foot of this file. */ /* ---------------------------------------------------------------------- 16:10 — source artwork 1800 x 1125 The largest group. At 327px wide these become 204px tall instead of 596. -------------------------------------------------------------------- */ .elementor-120 .elementor-element.elementor-element-7fd0310.e-con, .elementor-120 .elementor-element.elementor-element-63bc768.e-con, .elementor-120 .elementor-element.elementor-element-00e99c9.e-con, .elementor-120 .elementor-element.elementor-element-b422052.e-con, .elementor-120 .elementor-element.elementor-element-b47a24c.e-con, .elementor-120 .elementor-element.elementor-element-b368a97.e-con, .elementor-120 .elementor-element.elementor-element-f2bf49e.e-con, .elementor-120 .elementor-element.elementor-element-ebf9d0d.e-con, .elementor-120 .elementor-element.elementor-element-2a4bce6.e-con, .elementor-124 .elementor-element.elementor-element-345e3f3.e-con, .elementor-125 .elementor-element.elementor-element-18c1c76.e-con { min-height: 0; aspect-ratio: 16 / 10; } /* * Same 16:10 artwork, but these two were framed off-centre on purpose — * `bottom left` on the Vision 2030 boardroom, `center left` on the Quality * panel. Keeping the position is what stops the subject sliding out of the * shorter frame, so it is restated rather than left to chance. */ .elementor-118 .elementor-element.elementor-element-c87571a.e-con { min-height: 0; aspect-ratio: 16 / 10; background-position: bottom left; } .elementor-1449 .elementor-element.elementor-element-64865d6.e-con { min-height: 0; aspect-ratio: 16 / 10; background-position: center left; } /* ---------------------------------------------------------------------- 4:3 — source artwork 1449 x 1085 -------------------------------------------------------------------- */ .elementor-118 .elementor-element.elementor-element-fed49e1.e-con, .elementor-120 .elementor-element.elementor-element-0292d85.e-con, .elementor-1450 .elementor-element.elementor-element-1b1263b.e-con, .elementor-93 .elementor-element.elementor-element-b115f3a.e-con, .elementor-93 .elementor-element.elementor-element-2be969a.e-con, .elementor-97 .elementor-element.elementor-element-227eb74.e-con { min-height: 0; aspect-ratio: 4 / 3; } /* ---------------------------------------------------------------------- "OUR VISION" (118 / cb6c80f) — A CONTENT PANEL, NOT A PHOTO PANEL This one was in the 4:3 list above and should never have been. The note at the head of this file draws the line it crossed: a panel that only carries a background image can be given a fixed height; a panel that also lays out content cannot. cb6c80f carries the Our Vision heading, its divider and its paragraph. A 4:3 ratio fixed it at 281px on a 390px screen while its content needs 416 — 80px of top padding, a 256px content group, 80px of bottom padding. Measured: scrollHeight 314 against clientHeight 281, and the last line of the paragraph sitting 8px BELOW the bottom edge of the green panel. That is the "text pushed to the bottom" that was reported. Its sibling fed49e1 stays in the list: that one really is empty. THE HEIGHT COMES BACK FROM THE CONTENT `aspect-ratio: auto` alone would hand the panel back to Elementor's `min-height: 620px`, which has no mobile value — measured, that gives a 620px panel with 330px of empty green under the paragraph, unbalanced the other way and a much taller section for no reason. `min-height: 0` as well lets the content set the height: 394px, the paragraph comfortably inside, 58px of green above the heading and 80px below the group. Mobile only. Desktop and tablet never saw either rule and are untouched. -------------------------------------------------------------------- */ .elementor-118 .elementor-element.elementor-element-cb6c80f.e-con { aspect-ratio: auto; min-height: 0; } /* * Cold-store photograph, 1305 x 1205 — nearly square, so 4:3 trims about a * fifth of its height. The worker, the carton and the -20°C display all sit * on the middle band, so a centred crop keeps the whole subject. */ .elementor-549 .elementor-element.elementor-element-aee6e96.e-con { min-height: 0; aspect-ratio: 4 / 3; } /* ---------------------------------------------------------------------- 5:3 — source artwork 1800 x 1080 -------------------------------------------------------------------- */ .elementor-1449 .elementor-element.elementor-element-fef4048.e-con { min-height: 0; aspect-ratio: 5 / 3; background-position: center left; } /* ---------------------------------------------------------------------- 3:2 and 16:9 — Home feature panels and the /about-us/ page -------------------------------------------------------------------- */ .elementor-87 .elementor-element.elementor-element-3f0d9113.e-con, .elementor-87 .elementor-element.elementor-element-63906d67.e-con, .elementor-87 .elementor-element.elementor-element-4835e973.e-con { min-height: 0; aspect-ratio: 3 / 2; } /* ---------------------------------------------------------------------- RESEARCH & DEVELOPMENT — cdbdec8, 27cdd4f and ee8b7f3 were here. All three are column containers that lay out content, and all three hit the wrap described at the top of this file: with a ratio capping their height their second child jumped to x=220 inside a 224px parent, taking the page 405px sideways at 320. Their height is content-driven again. -------------------------------------------------------------------- */ } /* ========================================================================== THREE PHOTOS THAT WERE ALSO TOO NARROW Turning a 498px-tall box into a 16:10 one makes its height follow its width — which is only useful if the width is reasonable. On these three the photo sat at the end of a chain of containers that each hold nothing but the next one, and each charge 24px a side. Measured at 375px: Localization 1aa6fff 279 -> 32f0c6d 231 -> photo 183 (96px of padding) Manufacture 0ccf177 327 -> 13562d7 279 -> photo 231 Contact Us c91614c 279 -> photo 231 A 183px-wide photograph is a thumbnail. Since every one of those wrappers is a single-child pass-through, dropping its inline padding on mobile costs nothing and hands the width back to the picture: 183 -> 279, 231 -> 327, 231 -> 279. Only wrappers that contain the photo ALONE are listed. Contact's `cb1e025` holds two children and keeps its padding. ========================================================================== */ @media (max-width: 767px) { .elementor-125 .elementor-element.elementor-element-1aa6fff.e-con, .elementor-125 .elementor-element.elementor-element-32f0c6d.e-con, .elementor-549 .elementor-element.elementor-element-0ccf177.e-con, .elementor-549 .elementor-element.elementor-element-13562d7.e-con, .elementor-97 .elementor-element.elementor-element-c91614c.e-con { padding-inline: 0; } } /* ========================================================================== PARTNER LOGO CARDS — Strategic Partnerships 9c70033 / 4f20ce5 / 1810397 A different fault in the same family, found while checking the above. These three do not use `cover`. They are logo plates: `background-size: initial` plus Elementor's `background_bg_width`, which renders as `background-size: 63% auto` — the logo drawn at 63% of the card. `background_bg_width` has no mobile value, so below the breakpoint Elementor emits no width at all and the size falls back to `auto`: the logo is painted at its natural 1800x1125 inside a 279px card, and the card shows whichever 279 x 317 patch of the artwork happens to sit under the middle. Two of the three came out completely blank on a phone — only AWS survived, because its mark happens to sit dead centre of its canvas. Carrying each card's own desktop percentage onto mobile restores the logo at the proportion it was designed at. Their 279 x 317 box is near square and is left alone — a logo plate is not one of the tall photographs above. ========================================================================== */ @media (max-width: 767px) { .elementor-120 .elementor-element.elementor-element-9c70033.e-con { background-size: 63% auto; } .elementor-120 .elementor-element.elementor-element-4f20ce5.e-con, .elementor-120 .elementor-element.elementor-element-1810397.e-con { background-size: 61% auto; } } /* ========================================================================== HOME "Our Mission" / "Our Vision" — 2f4452b and d54cee3 These two were in the 3:2 / 16:9 groups above and have been taken out. They are not photo panels. They are CONTENT cards — icon, heading, divider and a paragraph — that happen to carry a background image. Elementor makes every container a WRAPPING flex container, so the moment an aspect-ratio capped their height on a phone the paragraph had nowhere to go and wrapped into a second flex column, landing 275px inside a 279px-wide parent. That one detail was the whole of the Home page's 264px of horizontal overflow. A height cap and wrapping content do not mix. Their height is content-driven again, and the background simply fills whatever height the copy needs. ========================================================================== */ /* -------------------------------------------------------------------------- DELIBERATELY NOT TOUCHED - The board portraits on Leadership & Governance. Portrait artwork of a person in a portrait frame is correct; cropping those to landscape would cut the faces. - Logos, badges, icons and the page banners, which are already landscape. -------------------------------------------------------------------------- */