/* ==========================================================================
   MANUFACTURE (page 549) — ARABIC CORRECTIONS

   One block per section. Every rule is behind [dir="rtl"], so the English page
   cannot match any of it, and each is scoped to its own section by element id.

     1. Manufacturing Expansion — the timeline line and dots
     2. Manufacturing Technologies — the circular icons
   ========================================================================== */

/* ==========================================================================
   1. "Manufacturing Expansion" timeline

   Section fb15026, timeline container 63e9911.

   Each item is an Elementor flex row — [number column 8%] [photograph 38%]
   [icon + text 54%] — and a flex row mirrors on its own in RTL. Measured at
   1440px, every one of those boxes already sits at the exact mirror position of
   its English counterpart.

   What does not mirror are the two things drawn by Custom CSS stored on the
   elements themselves (Advanced > Custom CSS in the editor), because both are
   placed with PHYSICAL `left` offsets:

     63e9911::before           the vertical line     left: 91.5px
     .timeline-number::before  the dot on each item  left: -7px

   In English those put the line 91.5px in from the left and each dot on the
   outer edge of its number column, over the line. In Arabic the line stayed on
   the far left, and each dot stayed on the left edge of a number column that
   had moved to the right — its inner edge, facing the photograph.

   Here the same offsets are applied from the right instead. Nothing else is
   touched: the line keeps its width, length, colour and top offset, the dots
   their size and colour, and the rows, photographs and text were already
   correct.

   The dots are addressed by their shared class, not by element id, so all
   three items are covered — including "Respiratory Manufacturing", which is
   currently hidden on every device but would be right if it is switched on.

   The line is already hidden on phones by mobile-fixes.css (it cannot span the
   stacked layout); this only moves it, so that still holds in both languages.

   Written one class heavier than the rules Elementor compiles from that Custom
   CSS into post-549.css, and behind [dir="rtl"] so English cannot match it.
   ========================================================================== */

[dir="rtl"] .elementor-549 .elementor-element.elementor-element-63e9911.e-con::before {
	left: auto;
	right: 91.5px;
}

[dir="rtl"] .elementor-549 .elementor-element-63e9911 .elementor-element.timeline-number::before {
	left: auto;
	right: -7px;
}

/* ==========================================================================
   2. "Manufacturing Technologies" — the five photo cards

   Section 4fc215e, row 787af7a, one icon widget per card (.sud-hv__icon).

   Each circle is an Elementor icon widget whose wrapper aligns it 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 — measured 22px in from
   the photograph's right edge on all five cards — and the LEFT side in Arabic,
   where all five came out 22px in from the left instead.

   The circles belong on the right in both languages, so in RTL the side is
   stated physically. Their size, colour, shadow and lift over the photograph
   are untouched, and so is everything else in the card.
   ========================================================================== */

[dir="rtl"] .elementor-549 .elementor-element-787af7a .sud-hv__icon .elementor-icon-wrapper {
	text-align: right;
}


/* ==========================================================================
   3. "Manufacturing Expansion" — the spacing between cards on a phone

   With the pasted markup taken out of the Insulin card, the two cards in this
   section sit at the distance the stylesheet actually asks for, and it is the
   wrong one on a phone. Two settings made for the desktop stagger are to
   blame, both stored on the elements themselves:

     3770b86   margin-top: -51px   the second card, pulled up over the first
     4df7df9   margin-top: -6px    its title block, pulled up over its own photo

   On a wide screen the cards are side by side and neither offset is felt. On a
   phone they are stacked, so the first pulls the second card to 6px below the
   end of the first card's text, and the second lifts the second card's title
   6px OVER the bottom of its own photograph.

   The first card does not do this: its title block is pulled up 8px and its
   title pushed down 14px, netting 6px of clear air below the photograph. So
   the second card is simply set up differently from the first, and these two
   rules bring it into line:

     - the card starts 28px below the text above it, within the 20-40px this
       section reads well at, instead of 6px;
     - its title clears its photograph by 6px, exactly as the first card's does.

   Nothing else moves. No image is resized, no type changes, and the cards keep
   their own widths and their own photographs. Phones only — the desktop
   stagger these numbers were written for is above this breakpoint and is left
   exactly as it is.
   ========================================================================== */

@media (max-width: 767px) {

	/* The second card: 28px of air above it instead of 6px. */
	[dir="rtl"] .elementor-549 .elementor-element.elementor-element-3770b86 {
		margin-top: -29px;
	}

	/* Its title, clear of its own photograph — the first card's 6px. */
	[dir="rtl"] .elementor-549 .elementor-element.elementor-element-4df7df9 {
		margin-top: 6px;
	}
}


/* ==========================================================================
   4. "Manufacturing Expansion" — the heading's top spacing on a phone

   The heading and its paragraph sit hard against the top of the section's
   content area — 20px ABOVE it, in fact, with the container's own 70px of top
   padding passing straight behind them. The heading widget carries
   margin-top: -90px, a desktop offset that lifts it alongside the artwork up
   there; on a phone there is nothing to lift it against, so it simply lands
   past the top.

   Taking 20px off that pull drops the heading, and the paragraph that follows
   it in the flex flow, 20px together. They move as one block: the 40px
   between heading and paragraph is untouched, and so is the 12px the
   paragraph keeps above the photograph below it.

   ON THE SECTION'S HEIGHT
   The brief asked for this without the section growing. That is not available
   here: measured on a fully settled page there are only 12px between the
   paragraph and the photograph beneath it, so holding the photograph still
   would drive the text 8px INTO it. Letting the section take the 20px instead
   keeps every spacing inside it exactly as it was and overlaps nothing, which
   is the lesser of the two departures from the brief.

   Phones only, Arabic only, this section only.
   ========================================================================== */

@media (max-width: 767px) {

	/* The heading and its paragraph, 20px lower. Nothing else is touched. */
	[dir="rtl"] .elementor-549 .elementor-element.elementor-element-cd2717a {
		margin-top: -70px;
	}
}

/* ==========================================================================
   5. "Manufacturing Expansion" — its reading-edge margin on a phone

   The heading and its paragraph sit flush against the right edge in Arabic,
   while the "Insulin Manufacturing" card below them keeps a 16px margin. The
   two blocks are set the same way, so the difference is not design.

   Both carry a PHYSICAL margin-left — 71px on the heading, 16px on the
   paragraph. In English the left IS the reading edge, so that margin is the
   indent and the paragraph lines up with the card below at 16px. In Arabic the
   reading edge moves to the right and the margin does not follow it: it piles
   up on the far side, where nothing needs it, and leaves the reading edge at
   zero. Measured at 390px:

                        English (left)     Arabic (right)
     heading                    71px               0px
     paragraph                  16px               0px
     insulin card               16px              16px

   So the margin is moved to the edge the text actually starts from, and set to
   the card's 16px so the three read as one column — which is what the brief
   asks for. Written as longhand left/right rather than the shorthand, so the
   heading keeps the margin-top set in section 4 above.

   Phones only, Arabic only, these two elements only. Nothing about the type,
   the copy, the image, the section's height or the English page changes.
   ========================================================================== */

@media (max-width: 767px) {

	[dir="rtl"] .elementor-549 .elementor-element.elementor-element-cd2717a,
	[dir="rtl"] .elementor-549 .elementor-element.elementor-element-a7b0bf0 {
		margin-left: 0;
		margin-right: 16px;
	}
}