/* ==========================================================================
   CSR — "Environmental, Health, & Safety", the three photo cards — ARABIC

   Page 121, row ec67036, cards 96180da (Our People), 3ed6f6e (Our
   Environment), 3aa9979 (Our Responsibility).

   The section reuses the `sud-hv__*` class names from the Localization page, but
   those rules are scoped under a `.sud-hv` parent this section does not have, so
   none of them apply here. Everything about these cards is Elementor panel
   settings — which is where both RTL faults come from.

   Every rule below is behind [dir="rtl"], so the English page cannot match it.

   1. THE ICONS SIT ON THE LEFT IN ARABIC

      The icon widget's wrapper aligns with `text-align: end`. That is a LOGICAL
      value: `end` is the right-hand side in English, which is where the design
      puts the circle, and the LEFT side in Arabic. The circles are wanted on the
      right in both languages, so in RTL the side is stated physically.

   2. TWO CARDS OVERLAP AND THE ROW IS OFF-CENTRE (desktop only)

      The cards carry PHYSICAL left margins in the panel: Our People -60px, the
      other two +45px each, with 0 on tablet and phone. In English that reads
      as intended — People's -60 is on the row's outer edge and each +45 sits
      between two cards, so the photographs are 79px and 89px apart.

      In Arabic the row runs right to left, so People comes first on the right
      and its -60 now faces Our Environment, dragging the two together. And
      Responsibility's +45 lands on the row's outer left edge. Measured at
      1440px: People and Environment OVERLAPPING by 26px, and the row 27px
      right of centre.

      Rather than mirror a negative margin, the RTL row drops the panel margins
      and spaces the cards with the row's own gap — 69px, which is the English
      spacing exactly (24px gap + 45px margin), so the photographs end up the
      same 79px and 89px apart. `justify-content: center`, already set on the
      row, then centres it with nothing pushing it sideways.

      One 10px margin remains, on the outer (right) side of Our People. The
      other two cards have 10px of inner padding around their photograph and
      People has none, so centring the card BOXES left the photographs 5px off.
      This puts the photographs themselves on the centre line.

      Tablet and phone are untouched here: the panel margins are already 0 there
      and the rows measure centred in both languages.

   3. THE SECTION'S TITLE AND INTRO SIT AGAINST THE RIGHT EDGE (desktop)

      The "Environmental, Health, & Safety" eyebrow (2ccfa30) and the intro
      paragraph under it (a8da793) are indented with PHYSICAL left margins in
      the panel: 75px and 74px. In English that indents them from the reading
      edge, to 123px — in line with the other CSR sections (86-116px). In
      Arabic the same margins land on the left, the END of the line, so both
      started just 48px from the right edge, far outside everything else on the
      page.

      On desktop the two margins are applied on the start side instead: the
      same values, so the block starts 123px in from the right, the mirror of
      English. Tablet and phone are left as they are: there the English margins
      push the block well inside (tablet) or off the screen (phone, where the
      intro is 1000px wide), while the Arabic block already starts on the page's
      24px gutter like the other sections.

   Card widths, photographs, text, colours and type are not touched.
   ========================================================================== */

/* 1. Circles on the right, every breakpoint. */
[dir="rtl"] .elementor-121 .elementor-element-ec67036 .sud-hv__icon .elementor-icon-wrapper {
	text-align: right;
}

/*
 * 2. Spacing and centring — desktop, where the panel margins apply.
 *
 * Written as the exact complement of Elementor's tablet query rather than
 * `min-width: 1025px`. On a scaled display (125% here) the viewport can be a
 * fraction of a pixel wide — 1024.8px — where `max-width: 1024px` and
 * `min-width: 1025px` are BOTH false: Elementor's desktop margins still applied
 * and this correction did not, so the cards overlapped again. `not all and
 * (max-width: 1024px)` switches on at precisely the point Elementor's tablet
 * styles switch off, with no gap between them.
 */
@media not all and (max-width: 1024px) {
	[dir="rtl"] .elementor-121 .elementor-element.elementor-element-ec67036 {
		column-gap: 69px;
	}

	[dir="rtl"] .elementor-121 .elementor-element-ec67036 > .elementor-element.sud-hv__card {
		margin-inline: 0;
	}

	[dir="rtl"] .elementor-121 .elementor-element-ec67036 > .elementor-element.elementor-element-96180da {
		margin-inline-start: 10px;
	}

	/* 3. Title and intro: the editor's indent, on the reading-start side. */
	[dir="rtl"] .elementor-121 .elementor-element.elementor-element-2ccfa30 { margin-left: 0; margin-right: 75px; }
	[dir="rtl"] .elementor-121 .elementor-element.elementor-element-a8da793 { margin-left: 0; margin-right: 74px; }
}