/* ==========================================================================
   CSR (page 121) — "SCIENTIFIC & MEDICAL PARTNERSHIPS" HEADING BLOCK, ARABIC

   Three lines stacked at the reading start: the eyebrow (8367db2), the
   subtitle (4a4c44a) and the description (a007629). In English each is pulled
   ~26-30px out towards the left edge by an editor margin, so they start
   together.

   In Arabic they came apart:
     - the subtitle is an Elementor v4 heading, whose -27px is stored as a
       LOGICAL start margin — it mirrors on its own and was pulled out to the
       right, as it should be;
     - the eyebrow (-30px) and the description (-26px) are v3 widgets, whose
       margins are written as PHYSICAL left margins — they kept pulling left,
       which in Arabic is inward.
   So the subtitle stood 27px proud of the other two.

   The fix applies those two widgets' own editor margins on the start side, so
   on desktop the three lines start exactly where their English counterparts
   do, mirrored (see the tablet note below). Behind [dir="rtl"] — the English
   page cannot match.
   ========================================================================== */

[dir="rtl"] .elementor-121 .elementor-element.elementor-element-8367db2 { margin-left: 0; margin-right: -30px; } /* eyebrow     */
[dir="rtl"] .elementor-121 .elementor-element.elementor-element-a007629 { margin-left: 0; margin-right: -26px; } /* description */

/*
 * Tablet and below: all three lines start at the section's own edge.
 *
 * Mirroring the editor exactly would reproduce a stagger the English tablet
 * layout has: the eyebrow is set to 0 from tablet down, but the subtitle and
 * description are only reset on mobile, so on a tablet they keep their desktop
 * -27/-26px and start ~27px outside the eyebrow — 3px past the section's edge.
 * On mobile the editor already has all three at 0; this starts that from tablet
 * so the Arabic block is aligned at every width.
 */
@media (max-width: 1024px) {
	[dir="rtl"] .elementor-121 .elementor-element.elementor-element-8367db2,
	[dir="rtl"] .elementor-121 .elementor-element.elementor-element-a007629 {
		margin-right: 0;
	}

	[dir="rtl"] .elementor-121 .elementor-element-de4337f .e-4a4c44a-737cf5c { /* subtitle (v4 heading) */
		margin-inline-start: 0;
	}
}

/* ==========================================================================
   THE LOGO GRIDS — ARABIC

   Two grids of logo tiles on this page, each tile a column of one logo (an
   image widget) over one name (a v4 heading):
     a243f53            "Scientific & Medical Partnerships" (6 tiles)
     da21920, b85ff90   "Supporting Patient Communities"    (4 + 4 tiles)

   Horizontally the tiles were already right: every logo and every name is
   centred in its tile, and the logo-to-name gap is the tile's own 16px.

   What broke the grid is vertical, and it comes from two editor settings:

   1. Each tile centres its CONTENT vertically (justify-content: center). The
      logo therefore sits wherever half of the leftover space puts it — and the
      leftover space depends on how many lines the name wraps to. Arabic names
      wrap differently from the English ones (1-3 lines against 2-5), so across
      a row the logos stepped up and down: 7px to 26px from the tile's top.

   2. Four logos carry their own top margins — -9, -11, +7 and -11px — that were
      nudged by hand to line them up against the English line counts. Against
      the Arabic ones they push those four further out of line.

   The fix is to stack each tile from the top, as a grid of logos over captions
   is read: the logo first, at the tile's top padding, then the name below it at
   the tile's own 16px gap, however many lines it takes. The four hand nudges
   are cleared, since nothing is left for them to compensate. The tiles keep
   their size and position (the rows already stretch them to equal height);
   logos, names and spacing are unchanged.
   ========================================================================== */

[dir="rtl"] .elementor-121 .elementor-element:is(
	.elementor-element-a243f53,
	.elementor-element-da21920,
	.elementor-element-b85ff90
) > .e-con.elementor-element {
	--justify-content: flex-start;
}

[dir="rtl"] .elementor-121 .elementor-element:is(
	.elementor-element-a243f53,
	.elementor-element-da21920,
	.elementor-element-b85ff90
) > .e-con > .elementor-widget-image.elementor-element {
	margin-block-start: 0;
}