/* ==========================================================================
   Jemas Healthcare — Arabic / RTL corrections
   Loaded only when is_rtl() is true (see functions.php).

   Nurse ships no front-end RTL stylesheet and Elementor generates no RTL
   variant for per-page CSS, so every direction-sensitive value from
   post-32.css, post-93.css and post-99.css lands unmirrored on /ar/.
   Those files are regenerated by Elementor and must never be edited —
   corrections go here instead.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Typography

   The theme exposes its whole type scale as custom properties on :root, so the
   Arabic face is applied by redefining a handful of variables rather than
   chasing selectors. html[dir="rtl"] outranks :root, which also means these
   values survive the responsive redefinitions inside __custom.css media
   queries — no need to repeat them per breakpoint.

   font-size is deliberately left alone. Only three things change:

     family          Work Sans has no Arabic glyphs.
     line-height     1.0–1.14em clips Arabic ascenders (ل ك ط) and descenders
                     (ج ح خ ع غ م ي). Arabic needs noticeably more room.
     letter-spacing  Every heading carried a negative value (down to -0.04em).
                     Latin tolerates tightening; Arabic is a connected script
                     and tightening degrades the joins.
   -------------------------------------------------------------------------- */

html[dir="rtl"] {
	--jemas-font-ar: "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;

	--theme-font-p_font-family: var(--jemas-font-ar);
	--theme-font-h1_font-family: var(--jemas-font-ar);
	--theme-font-h2_font-family: var(--jemas-font-ar);
	--theme-font-h3_font-family: var(--jemas-font-ar);
	--theme-font-h4_font-family: var(--jemas-font-ar);
	--theme-font-h5_font-family: var(--jemas-font-ar);
	--theme-font-h6_font-family: var(--jemas-font-ar);
	--theme-font-menu_font-family: var(--jemas-font-ar);
	--theme-font-submenu_font-family: var(--jemas-font-ar);
	--theme-font-button_font-family: var(--jemas-font-ar);
	--theme-font-input_font-family: var(--jemas-font-ar);
	--theme-font-info_font-family: var(--jemas-font-ar);

	--theme-font-h1_line-height: 1.4em;
	--theme-font-h2_line-height: 1.4em;
	--theme-font-h3_line-height: 1.45em;
	--theme-font-h4_line-height: 1.5em;
	--theme-font-h5_line-height: 1.5em;
	--theme-font-h6_line-height: 1.55em;
	--theme-font-p_line-height: 1.85em;
	--theme-font-menu_line-height: 1.6em;
	--theme-font-info_line-height: 1.6em;
	--theme-font-input_line-height: 1.7em;

	--theme-font-h1_letter-spacing: 0;
	--theme-font-h2_letter-spacing: 0;
	--theme-font-h3_letter-spacing: 0;
	--theme-font-h4_letter-spacing: 0;
	--theme-font-h5_letter-spacing: 0;
	--theme-font-h6_letter-spacing: 0;
	--theme-font-button_letter-spacing: 0;
	--theme-font-logo_letter-spacing: 0;

	/* Elementor keeps its own global type scale, independent of the theme's. */
	--e-global-typography-primary-font-family: "Tajawal";
	--e-global-typography-secondary-font-family: "Tajawal";
	--e-global-typography-text-font-family: "Tajawal";
	--e-global-typography-accent-font-family: "Tajawal";
}

/* The Elementor kit sets font-family on its own wrapper class, which the theme
   variables above never reach. Scoped to [dir="rtl"] so it outranks the kit
   without !important, and kept to these two elements so icon fonts (fontello,
   eicons, trx_addons_icons) keep their own families. */
[dir="rtl"] body,
[dir="rtl"] .elementor-kit-1 {
	font-family: var(--jemas-font-ar);
}

/* Buttons keep their fixed 19px line-height so button heights do not shift,
   but the family and spacing still need correcting. */
[dir="rtl"] .sc_button,
[dir="rtl"] button,
[dir="rtl"] input[type="submit"],
[dir="rtl"] .elementor-button {
	font-family: var(--jemas-font-ar);
	letter-spacing: 0;
}


/* --------------------------------------------------------------------------
   2. Heading scale

   Arabic has no upper and lower case, and its letterforms fill far more of the
   em box than Latin ones do, so a heading set at the size that suits English
   reads noticeably larger and heavier in Arabic. The theme's scale was tuned
   for Work Sans, and every heading inherits it unchanged.

   The two knobs below are deliberately separate: --jemas-ar-heading-scale
   trims the theme's own scale, while the hero is pulled back further because
   68px was the single most oversized value on the site.

   Sizes are derived with calc() from the theme's own variables, so the
   responsive steps in __custom.css keep working and there is nothing to
   maintain per breakpoint.
   -------------------------------------------------------------------------- */

html[dir="rtl"] {
	--jemas-ar-heading-scale: 0.9;
	--jemas-ar-hero-scale: 0.93;
}

[dir="rtl"] h1 { font-size: calc(var(--theme-font-h1_font-size) * var(--jemas-ar-heading-scale)); }
[dir="rtl"] h2 { font-size: calc(var(--theme-font-h2_font-size) * var(--jemas-ar-heading-scale)); }
[dir="rtl"] h3 { font-size: calc(var(--theme-font-h3_font-size) * var(--jemas-ar-heading-scale)); }
[dir="rtl"] h4 { font-size: calc(var(--theme-font-h4_font-size) * var(--jemas-ar-heading-scale)); }

/* Elementor writes explicit pixel sizes onto .elementor-heading-title, which
   never consult the theme variables above. Only the hero is far enough out to
   need its own line — the other headings on the page sit at 24–26px and read
   fine once the family and line-height are corrected.

   The doubled .elementor-element.elementor-element-XXX is not a typo: it is how
   Elementor writes its own selector, and matching that shape is what lets this
   rule reach the same weight. Loading later then settles it, so no !important.

   NOTE: 68px mirrors the value stored in Elementor for element e5703bb. If that
   heading is ever resized in the editor, this line has to move with it. */
[dir="rtl"] .elementor-element.elementor-element-e5703bb .elementor-heading-title {
	font-size: calc(68px * var(--jemas-ar-hero-scale));

	/* 1.4em came from section 1, where it stops Arabic ascenders being clipped
	   at body sizes. On a 63px display line it is far more room than the script
	   needs: measured, the ink of this heading in Tajawal spans 1.20em, so 1.28
	   clears it with margin while pulling the two lines back into one block.
	   English sits at 1.02 for the same heading. */
	line-height: 1.28;

	/* Tried at 700 to match the optical weight of the Latin face, which reads
	   heavier at the same number. The client preferred the lighter setting, so
	   it stays at the theme's 500 — the size and leading below carry the
	   presence instead. */
	font-weight: 500;

	/* Where the line breaks, measured rather than guessed. Left to the full
	   773px the heading split as "…مؤهّلة… تصل" / "إلى بيتك", stranding two
	   words on their own; text-wrap: balance moved the break but to a worse
	   place, cutting between "رعاية تمريضية" and "مؤهّلة". Anywhere from 620 to
	   700px it falls on the ellipsis — where the sentence itself pauses — so
	   the two lines read as two phrases. This only caps the line; narrower
	   screens are unaffected. */
	max-width: 660px;
}

/* Elementor sizes this heading twice: 68px, and 38px below 767px. Pinning a
   single value overrode both, so phones were being served a desktop-sized
   headline — five lines deep on a 390px screen. Each breakpoint now gets the
   Arabic scale applied to its own value. */
@media (max-width: 767px) {
	[dir="rtl"] .elementor-element.elementor-element-e5703bb .elementor-heading-title {
		font-size: calc(38px * var(--jemas-ar-hero-scale));
	}
}

/* The eyebrow above it — the page's H1, kept as an H1. It carried the same
   navy as the headline at 24px, so the two levels read as one, and the whole
   hero was a single colour on a pale ground. Teal is the brand's second
   colour, already used by the button and every link. */
[dir="rtl"] .elementor-element.elementor-element-32100d5 .elementor-heading-title {
	font-size: 19px;
	font-weight: 700;
	color: #017C7A;
	margin-bottom: 6px;
	/* no letter-spacing here on purpose: section 14 forces normal tracking on
	   all Arabic text, and it is right to. */
}

/* The card heading over the hero form. At 31.5px it competed with the 63px
   headline a few centimetres away — two things asking to be read first. It is
   a label on a form, not a second headline, so it steps back. */
[dir="rtl"] .elementor-element.elementor-element-6f9d96d3 .elementor-heading-title {
	font-size: 27px;
}

/* The hero paragraph is left at the width Elementor gives it.

   It was capped at 515px for a while to shorten the line, but that left the
   column stepping 773 / 660 / 515 down its left edge and the client read the
   three indents as untidy. Removing the cap turns out to align it: the
   heading's box is 660px, yet its longest line only inks to 592px, and the
   paragraph's natural 596px lands within 4px of that — so the two blocks
   share a visible edge without either being forced.

   The cost is a long line, 86 characters at its longest against a comfortable
   65. Narrowing it again would reopen the stepped edge, so the edge won. */

/* Elementor sizes this heading twice: 68px, and 38px below 767px. Pinning a
   single value overrode both, so phones were being served a desktop-sized
   headline — five lines deep on a 390px screen. Each breakpoint now gets the
   Arabic scale applied to its own value. */
@media (max-width: 767px) {
	[dir="rtl"] .elementor-element.elementor-element-e5703bb .elementor-heading-title {
		font-size: calc(38px * var(--jemas-ar-hero-scale));
	}
}

/* The eyebrow above it — the page's H1, kept as an H1. It carried the same
   navy as the headline at 24px, so the two levels read as one, and the whole
   hero was a single colour on a pale ground. Teal is the brand's second
   colour, already used by the button and every link. */
[dir="rtl"] .elementor-element.elementor-element-32100d5 .elementor-heading-title {
	font-size: 19px;
	font-weight: 700;
	color: #017C7A;
	margin-bottom: 6px;
	/* no letter-spacing here on purpose: section 14 forces normal tracking on
	   all Arabic text, and it is right to. */
}

/* The card heading over the hero form. At 31.5px it competed with the 63px
   headline a few centimetres away — two things asking to be read first. It is
   a label on a form, not a second headline, so it steps back. */
[dir="rtl"] .elementor-element.elementor-element-6f9d96d3 .elementor-heading-title {
	font-size: 27px;
}

/* The hero paragraph ran 86 characters on its longest line — counted line by
   line, not estimated. Comfortable reading tops out near 65; past that the eye
   loses the return sweep and hunts for the start of the next line, which costs
   more in a right-to-left script because that sweep is the long one.

   Measured at three widths, 515px read best: 72/74/70, three evenly filled
   lines. But it left the column stepping 773 / 660 / 515 down its left edge,
   three different indents, and the client found that untidy — so the
   paragraph now shares the heading's 660px and the edge resolves to two
   lines instead of three. The line runs longer than ideal; that was the
   trade accepted, knowingly.

   The cap goes on the paragraph, not the widget: Elementor holds the widget's
   width itself and only an !important would move it, while nothing contests
   the paragraph inside. */
[dir="rtl"] .elementor-element.elementor-element-4626a539 p {
	max-width: 660px;
}

/* Measured down the hero column, the gaps ran 21px, 10px, 24px: the paragraph
   was closer to the headline than the eyebrow above it, which reads as the
   paragraph having slipped up into the heading. Evening it out gives 21/24/24
   — a rhythm rather than three arbitrary distances. */
[dir="rtl"] .elementor-element.elementor-element-4626a539 {
	margin-top: 14px;
}

/* The hero text column packs its children to the bottom. English fills it
   because its headline runs to three lines; the Arabic runs to two, so the
   leftover 49px all surfaced above the first line as dead space. Starting
   from the top puts that space back under the image, where it reads as
   breathing room rather than a gap. */
[dir="rtl"] .elementor-element.elementor-element-5cb72405 {
	--justify-content: flex-start;

	/* Anchoring to the top alone left the eyebrow 14px under a 96px header,
	   which trades one problem for its opposite. 26px here sets it 40px clear
	   of the header — deliberate breathing room rather than leftover space. */
	--padding-top: 26px;
}


/* --------------------------------------------------------------------------
   3. Circular "Get in touch" badge

   The Text Path widget carries letter-spacing: 6.5px, which is what gives the
   English caption its airy look around the ring. Arabic is a connected script:
   the same 6.5px prises every joined letter apart, so تواصل arrives on screen
   as five loose shapes rather than one word.

   Zeroing it on RTL pages only leaves the English badge exactly as designed.
   -------------------------------------------------------------------------- */

[dir="rtl"] .elementor-widget-text-path svg text,
[dir="rtl"] .elementor-widget-text-path svg textPath,
[dir="rtl"] .elementor-widget-text-path .e-text-path text {
	letter-spacing: 0;
	word-spacing: 0.15em;
}


/* --------------------------------------------------------------------------
   4. Header — menu spacing and dropdown arrows

   Elementor writes the header widget's spacing settings into post-99.css as
   physical four-value shorthands. It emits no RTL variant, so on /ar/ every one
   of these lands on the wrong side: the gap that should sit between a menu item
   and its dropdown arrow opens on the far side of the arrow instead, and the
   submenu drifts away from the item that owns it.

   ThemeREX does ship body.rtl variants for some widgets — the icon lists in
   post-32.css mirror themselves correctly — but the nav menu is not among them.

   Each rule below is the same declaration with left and right swapped, scoped
   to [dir="rtl"] and carrying Elementor's own selector so it outranks the
   original without !important. Values are mirrored, never redesigned.
   -------------------------------------------------------------------------- */

/* logo / widget gap */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-5bbcc31 > .elementor-widget-container {
	margin: 0px 10px 0px 0px;
}

/* main menu — dropdown arrow beside the top-level item */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-main-nav-menu > .trx-addons-nav-menu-item > .trx-addons-menu-link .trx-addons-dropdown-icon {
	margin: -1px 6px 0px 0px;
}

/* main menu — first-level submenu panel */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-nav-menu-container > .trx-addons-nav-menu > .trx-addons-nav-menu-item > .trx-addons-submenu,
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-mobile-menu-container > .trx-addons-nav-menu > .trx-addons-nav-menu-item > .trx-addons-submenu {
	margin: 7px -5px 0px 0px;
}

/* main menu — nested submenu panel */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-nav-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu,
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-mobile-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu {
	margin: -14px 5px 0px 0px;
}

/* main menu — arrow inside a submenu row */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-main-nav-menu .trx-addons-submenu .trx-addons-submenu-link .trx-addons-dropdown-icon {
	margin: 1px 0px -1px 10px;
}

/* main menu — submenu row padding (25/20 either side, so it does show) */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-cf56939 .trx-addons-main-nav-menu .trx-addons-submenu .trx-addons-submenu-item > .trx-addons-submenu-link {
	padding: 8px 20px 8px 25px;
}

/* mobile / hamburger menu widget — same three shapes again */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-main-nav-menu > .trx-addons-nav-menu-item > .trx-addons-menu-link .trx-addons-dropdown-icon {
	margin: -3px 8px 0px 0px;
}

[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-nav-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu,
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-mobile-menu-container .trx-addons-submenu .trx-addons-nav-menu-item > .trx-addons-submenu {
	margin: 0px 10px 0px 0px;
}

[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-main-nav-menu .trx-addons-submenu .trx-addons-submenu-link .trx-addons-dropdown-icon {
	margin: -2px 8px 0px 0px;
}

/* drawer close button — pinned to the far corner, so it must swap corners */
[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-mobile-menu-outer-container .trx-addons-mobile-menu-close {
	margin: 30px 0px 0px 30px;
}

@media (max-width: 767px) {
	[dir="rtl"] .elementor-99 .elementor-element.elementor-element-8152eff .trx-addons-mobile-menu-outer-container .trx-addons-mobile-menu-close {
		margin: 22px 0px 0px 20px;
	}
}


/* --------------------------------------------------------------------------
   5. Home page — counters, accordion, tabs

   The four statistic counters are pinned text-align: left, which in an Arabic
   column leaves the numbers hanging off the wrong edge of their own block.
   -------------------------------------------------------------------------- */

[dir="rtl"] .elementor-32 .elementor-element.elementor-element-6566f8d1 .trx-addons-counter-container,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-48d4b458 .trx-addons-counter-container,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-5d85313f .trx-addons-counter-container,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-18fd66c2 .trx-addons-counter-container {
	text-align: right;
}

/* the "+" after each number sits on the wrong side of it */
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-6566f8d1 .trx-addons-counter-number-suffix,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-48d4b458 .trx-addons-counter-number-suffix,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-5d85313f .trx-addons-counter-number-suffix,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-18fd66c2 .trx-addons-counter-number-suffix {
	margin-left: 0px;
	margin-right: 5px;
}

/* accordion — leading icon and the open/close toggle */
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-1904657d .trx-addons-accordion .trx-addons-accordion-tab-title .trx-addons-accordion-tab-icon {
	margin-right: 0px;
	margin-left: 10px;
}

[dir="rtl"] .elementor-32 .elementor-element.elementor-element-1904657d .trx-addons-toggle-icon-align-left .trx-addons-accordion-toggle-icon {
	margin-right: 0px;
	margin-left: 30px;
}

[dir="rtl"] .elementor-32 .elementor-element.elementor-element-1904657d .trx-addons-toggle-icon-align-right .trx-addons-accordion-toggle-icon {
	margin-left: 0px;
	margin-right: 30px;
}

/* tabs — the separator border belongs on the opposite edge */
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-73ade3d.elementor-widget-n-tabs.e-n-tabs-heading-border-as-separator.e-n-tabs-direction-block-start .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:first-child,
[dir="rtl"] .elementor-32 .elementor-element.elementor-element-73ade3d.elementor-widget-n-tabs.e-n-tabs-heading-border-as-separator.e-n-tabs-direction-block-end .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:first-child {
	border-left-color: transparent;
	border-right-color: var( --e-global-color-theme_color_bd_color );
}

/* Section 6 (hero header clearance) was removed: the hero section's desktop top
   padding was the real culprit — 50px against a 96px header, where tablet and
   mobile already used 110px and 100px. Corrected to 150px in Elementor, which
   fixes both languages at once and needs no per-language CSS. */


/* --------------------------------------------------------------------------
   7. Header — menu weight and the button's gap

   Tajawal at 400 is noticeably lighter than Work Sans at 400: Arabic strokes
   are thinner and more uniform, so the same numeric weight reads faint against
   the header. 500 restores the presence the English menu has without changing
   the size or the layout.

   The "تواصل معنا" button carries margin-left: 1.3vw from Elementor — a
   physical side. Mirrored in Arabic it opens the gap away from the social
   icons instead of between them and the button.
   -------------------------------------------------------------------------- */

html[dir="rtl"] {
	--theme-font-menu_font-weight: 500;
	--theme-font-submenu_font-weight: 500;
}

[dir="rtl"] .elementor-99 .elementor-element.elementor-element-74dea66 {
	margin-left: 0;
	margin-right: 1.3vw;
}


/* --------------------------------------------------------------------------
   8. Inner pages — the main menu runs backwards

   Inner pages do not use the Elementor header (layout 99) that the home page
   uses; they fall back to the theme's own top_panel_default markup, so none of
   the header mirroring in section 4 reaches them.

   That header lays its menu out with float: left on each item. Floats are
   physical — they do not follow direction — so in Arabic the items still stack
   from the left edge rightwards and the whole menu reads back to front:
   الرئيسية lands furthest left where it should be furthest right.

   Floating them right restores the reading order. The submenus need the same
   treatment or they open from the wrong edge of their parent.
   -------------------------------------------------------------------------- */

[dir="rtl"] .sc_layouts_menu_nav > li,
[dir="rtl"] ul.sc_layouts_menu_nav > li {
	float: right;
}

[dir="rtl"] .sc_layouts_menu_nav li > ul {
	left: auto;
	right: 0;
	text-align: right;
}

[dir="rtl"] .sc_layouts_menu_nav li > ul li > ul {
	left: auto;
	right: 100%;
}

/* The theme's header columns carry physical alignment classes. Mirroring the
   flex order moves the columns to the correct sides, but the alignment inside
   each one keeps pointing the old way: the menu column lands on the left while
   its contents still hug the right, so the menu ends up pressed against the
   logo instead of sitting out at the edge of the header. Swapping the two
   classes puts each column's contents on its outer edge, as in the English
   header. */

[dir="rtl"] .sc_layouts_column_align_right {
	text-align: left;
}

[dir="rtl"] .sc_layouts_column_align_left {
	text-align: right;
}


/* --------------------------------------------------------------------------
   9. Blog — the sidebar sits on the wrong side

   Same cause as the header menu in section 8: the theme positions the sidebar
   and the content column with float, and floats are physical. The theme option
   is "sidebar on the right", which is right for English, but in Arabic the
   reading column belongs on the right and the sidebar on the left. Left
   unmirrored, the Arabic reader starts at the far side of the page.

   Swapped for both possible settings so the rule survives if the option is
   ever changed in Theme Options.
   -------------------------------------------------------------------------- */

[dir="rtl"] .content_wrap > .sidebar.right,
[dir="rtl"] .content_wrap > aside.sidebar.right {
	float: left;
}

[dir="rtl"] .content_wrap > .sidebar.left,
[dir="rtl"] .content_wrap > aside.sidebar.left {
	float: right;
}

[dir="rtl"] body.sidebar_right .content_wrap > .content,
[dir="rtl"] .content_wrap > .sidebar.right + .content,
[dir="rtl"] .content_wrap > .content {
	float: right;
}

[dir="rtl"] body.sidebar_left .content_wrap > .content {
	float: left;
}


/* --------------------------------------------------------------------------
   10. Sidebar — the widgets were still laid out for English

   A sweep of the theme's own stylesheets found 226KB of CSS containing exactly
   zero RTL rules, and 67 unmirrored physical declarations — 41 of them in the
   sidebar and widgets.

   These rules carry !important, which nothing else in this project does. The
   sidebar is built from Elementor widgets, so the competing declarations live
   in the page's own post-NN.css with a longer selector chain and load after
   this file. Matching that chain would mean hard-coding an element id per page
   and re-doing it whenever a widget is moved, which is more fragile than the
   flag. Verified: without !important these rules parse, match the element, and
   still lose.
   -------------------------------------------------------------------------- */

/* The sidebar's rule and its inset both sit on the left: a border-left on the
   outer Elementor container plus 40px of padding-left inside it. Mirrored, the
   rule has to move to the edge facing the article and the inset with it, or the
   thumbnails end up pressed against the line while 40px goes to waste on the
   far side.

   Scoped to that one container by id. An earlier attempt used
   `.sidebar .elementor-element.e-con` and drew a line down five nested
   containers at once. */
[dir="rtl"] .sidebar .elementor-element.elementor-element-40a5bf60 {
	border-left-width: 0 !important;
	border-right-width: 1px !important;
	border-right-style: solid !important;
	border-right-color: var( --e-global-color-theme_color_bd_color, #DDE8EC ) !important;
	padding-left: 0 !important;
	padding-right: 40px !important;
}

/* …and nothing nested inside it should carry a rule of its own. */
[dir="rtl"] .sidebar .elementor-element.elementor-element-40a5bf60 .e-con,
[dir="rtl"] .content_wrap > .sidebar > .sidebar_inner {
	border-left-width: 0 !important;
	border-right-width: 0 !important;
}

/* The search button is pinned with left: 0 and the field reserves its 42px of
   room for the icon on the same physical side, so the placeholder ran under the
   magnifier once the icon crossed over. */
[dir="rtl"] .sidebar .search_form .search_submit,
[dir="rtl"] .search_wrap .search_form .search_submit {
	left: auto !important;
	right: 0 !important;
}

[dir="rtl"] .sidebar .search_form .search_field,
[dir="rtl"] .search_wrap .search_form .search_field {
	padding-left: 12px !important;
	padding-right: 42px !important;
	text-align: right !important;
}

/* margin-right: 22px opened a gap against the sidebar's outer edge and left the
   title touching the thumbnail. Moving it puts the breathing room back between
   the picture and the text it belongs to. */
[dir="rtl"] .sidebar .post_item .post_thumb,
[dir="rtl"] .widget_recent_posts .post_item .post_thumb {
	margin-left: 22px !important;
	margin-right: 0 !important;
}

[dir="rtl"] .sidebar .post_item,
[dir="rtl"] .widget_recent_posts .post_item,
[dir="rtl"] .sidebar .post_item .post_title,
[dir="rtl"] .sidebar .post_item .post_info,
[dir="rtl"] .sidebar .post_item .post_date,
[dir="rtl"] .sidebar .widget_title,
[dir="rtl"] .sidebar aside > h5 {
	text-align: right !important;
}


/* --------------------------------------------------------------------------
   11. What the live audit turned up last

   Rather than parse the theme's CSS again, this pass walked the rendered
   Arabic page and flagged every element whose box was physically asymmetric.
   Most of what it found was the mirroring already done above; these were the
   genuine leftovers.
   -------------------------------------------------------------------------- */

/* The mobile drawer's menu is left-aligned, so Arabic labels sat away from the
   edge the reader starts from. */
[dir="rtl"] .menu_mobile_nav_area,
[dir="rtl"] ul.menu_mobile_nav,
[dir="rtl"] ul.menu_mobile_nav li,
[dir="rtl"] ul.menu_mobile_nav li > a {
	text-align: right;
}

/* The blog grid is built from a negative gutter on the row and matching padding
   on each column, both on the right. Unmirrored, the whole grid shifts 30px off
   its container in Arabic. */
[dir="rtl"] .posts_container.classic_wrap,
[dir="rtl"] .posts_container.columns_wrap {
	margin-right: 0;
	margin-left: -30px;
}

[dir="rtl"] .posts_container.classic_wrap > [class*="column-"],
[dir="rtl"] .posts_container.columns_wrap > [class*="column-"] {
	padding-right: 0;
	padding-left: 30px;
}

/* The category label reserves a 42px indent with padding, so its text started
   42px inside the box while the title beneath began at the box edge — the two
   lines did not share a margin. Same cascade problem as the rest of the
   sidebar, so the same flag. */
[dir="rtl"] .post_categories,
[dir="rtl"] .post_item .post_categories {
	padding-right: 0 !important;
	padding-left: 42px !important;
}

/* The search icon is pinned with right: 0 but keeps its inset as margin-left,
   which does nothing to an element positioned from the right. English shows a
   17px gap from the field edge; Arabic showed the icon flush against it. */
[dir="rtl"] .sidebar .search_form .search_submit,
[dir="rtl"] .search_wrap .search_form .search_submit {
	margin-left: 0 !important;
	margin-right: 17px !important;
}


/* --------------------------------------------------------------------------
   12. Everything the page-by-page sweep found

   Walked the rendered Arabic markup on the single post, the contact page and
   the services page, flagging boxes that were still physically asymmetric and
   excluding the ones sections 1–11 mirror on purpose. These are the remainder.
   -------------------------------------------------------------------------- */

/* -- Main menu text (inner-page header) ------------------------------------
   The nav itself was mirrored in section 8, but the text inside every level
   still aligned left. */
[dir="rtl"] .menu_main_nav_area,
[dir="rtl"] ul.sc_layouts_menu_nav,
[dir="rtl"] ul.sc_layouts_menu_nav li,
[dir="rtl"] ul.sc_layouts_menu_nav li > a,
[dir="rtl"] ul.sc_layouts_menu_nav li > a > span {
	text-align: right;
}

/* -- Info boxes (the service cards) ----------------------------------------
   The whole widget subtree carries text-align: left, so every card's icon,
   heading and description sat against the wrong edge. */
[dir="rtl"] .trx-addons-info-box {
	/* the outer box is styled per-element by Elementor, so it needs the flag
	   for the same reason the sidebar widgets did */
	text-align: right !important;
}

[dir="rtl"] .trx-addons-info-box-icon-wrap,
[dir="rtl"] .trx-addons-info-box-content,
[dir="rtl"] .trx-addons-info-box-title-wrap,
[dir="rtl"] .trx-addons-info-box-title-container,
[dir="rtl"] .trx-addons-info-box-title,
[dir="rtl"] .trx-addons-info-box-description {
	text-align: right;
}

/* -- Icon lists ------------------------------------------------------------
   ThemeREX ships body.rtl variants for some icon lists but not this wrapper. */
[dir="rtl"] .trx-addons-icon-wrapper {
	margin-left: 0;
	margin-right: 14px;
}

/* -- Column grids ----------------------------------------------------------
   Section 11 caught the blog's grid; the same negative gutter is used by the
   bare .columns_wrap on the contact and services pages. */
[dir="rtl"] .columns_wrap {
	margin-right: 0;
	margin-left: -30px;
}

[dir="rtl"] .columns_wrap > [class*="column-"] {
	padding-right: 0;
	padding-left: 30px;
}

/* -- Previous / next post navigation ---------------------------------------
   Floated and aligned left, so on an Arabic post the "previous" link sat where
   the reader expects "next". */
[dir="rtl"] .nav-links,
[dir="rtl"] .nav-links .nav-arrow-label,
[dir="rtl"] .nav-links h6.post-title {
	text-align: right;
}

[dir="rtl"] .nav-links .nav-previous {
	float: right;
	padding-right: 0;
	padding-left: 15px;
	text-align: right;
}

[dir="rtl"] .nav-links .nav-next {
	float: left;
	padding-left: 0;
	padding-right: 15px;
	text-align: left;
}

/* -- Comment form ----------------------------------------------------------
   Name and email sit side by side using floats, which put them in the reverse
   order in Arabic. */
[dir="rtl"] .comments_field.comments_author {
	float: right;
}

[dir="rtl"] .comments_field.comments_email {
	float: left;
}

/* -- Checkbox and radio labels ---------------------------------------------
   The label reserves room for its box with padding-left. */
[dir="rtl"] input[type="checkbox"] + label,
[dir="rtl"] input[type="radio"] + label,
[dir="rtl"] label.optional {
	padding-left: 0;
	padding-right: 24px;
}

/* -- Core block lists ------------------------------------------------------ */
[dir="rtl"] ul.wp-block-latest-posts__list,
[dir="rtl"] ol.wp-block-latest-comments,
[dir="rtl"] .wp-block-latest-comments {
	padding-left: 0;
	padding-right: 19.2px;
}


/* --------------------------------------------------------------------------
   13. Icons sitting flush against their labels

   Every icon in the post meta, the icon lists and the menus reserves its gap
   with a right-hand margin. In Arabic the icon moves to the right of its label,
   so that margin now opens on the outside and the icon ends up touching the
   word: the calendar glyph runs straight into the date, the speech bubble into
   "لا توجد تعليقات".

   The gaps are mirrored rather than resized — same values, other side.
   -------------------------------------------------------------------------- */

/* The side is right; the size was not. 4.2px was tuned for Work Sans, where the
   glyphs are narrow and upright. Arabic letters are wider and sit closer to the
   baseline, so the same gap reads as the icon touching the word. Measured on the
   page: the calendar sat 4px from the date and looked joined to it. */
[dir="rtl"] .post_meta_item::before,
[dir="rtl"] .post_meta .post_meta_item::before,
[dir="rtl"] .post_meta_item > .trx_addons_icon::before,
[dir="rtl"] .post_meta a.post_meta_item::before,
[dir="rtl"] .post_meta span.post_meta_item::before {
	margin-right: 0 !important;
	margin-left: 8px !important;
}

[dir="rtl"] .post_meta_item + .post_meta_item::before {
	margin-left: 4.2px;
}

/* Elementor icon lists: the SVG or icon span, then its text. */
[dir="rtl"] .elementor-icon-list-item .elementor-icon-list-icon,
[dir="rtl"] .elementor-icon-list-item svg {
	margin-right: 0;
	margin-left: 9px;
}

[dir="rtl"] .elementor-icon-list-text {
	padding-right: 0;
	padding-left: 5px;
}

/* ThemeREX icon wrapper — the earlier rule set the outer gap; this is the one
   between the glyph and the words next to it. */
[dir="rtl"] .trx-addons-icon-wrapper {
	margin-right: 8px;
	margin-left: 14px;
}

/* Header columns hold their inner gutter on the left. */
[dir="rtl"] .sc_layouts_column {
	padding-left: 0;
	padding-right: 30px;
}

/* The "more" ellipsis in the menu keeps an asymmetric pad for its caret. */
[dir="rtl"] .sc_layouts_menu_nav a.sf-with-ul {
	padding-left: 16px;
	padding-right: 32px;
}


/* --------------------------------------------------------------------------
   14. letter-spacing has no place in Arabic

   Section 1 zeroed the theme's own heading variables, but Elementor sets
   letter-spacing per element too — the small eyebrow labels above headings
   carry 0.07rem, and the category links 1.12px. On a connected script that
   spacing does not "breathe", it severs the joins: نهتم بأحبائكم renders as a
   row of loose glyphs.

   So this is deliberately broad. Arabic is cursive; there is no case where
   positive tracking helps it, and the rule is scoped to [dir="rtl"] so the
   English design keeps its tracking untouched.

   text-transform goes with it: uppercase does nothing to Arabic letterforms,
   and leaving it set only invites the next person to add tracking back.
   -------------------------------------------------------------------------- */

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li,
[dir="rtl"] div, [dir="rtl"] label, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] blockquote,
[dir="rtl"] .elementor-heading-title,
[dir="rtl"] .elementor-widget-text-editor,
[dir="rtl"] .post_title, [dir="rtl"] .post_categories,
[dir="rtl"] .trx-addons-info-box-title,
[dir="rtl"] .trx-addons-info-box-description,
[dir="rtl"] .sc_layouts_title_caption {
	letter-spacing: normal !important;
	word-spacing: normal;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .elementor-heading-title,
[dir="rtl"] .post_categories,
[dir="rtl"] .post_categories a {
	text-transform: none !important;
}

/* The rotating badge is the one place a gap is wanted — between whole words,
   never between letters. word-spacing does that safely. */
[dir="rtl"] .elementor-widget-text-path svg text,
[dir="rtl"] .elementor-widget-text-path svg textPath {
	letter-spacing: 0 !important;
	word-spacing: 0.08em;
}

/* Icon fonts are exempt: their glyphs are not script and some rely on spacing. */
[dir="rtl"] [class^="trx_addons_icon-"],
[dir="rtl"] [class*=" trx_addons_icon-"],
[dir="rtl"] .elementor-icon,
[dir="rtl"] i[class*="icon"] {
	letter-spacing: normal !important;
}


/* --------------------------------------------------------------------------
   15. The scrolling banner

   Elementor emits the marquee gutter as padding-left on every element, which is
   why the first CSS sweep counted ~200 of these and dismissed them as unused
   boilerplate. On the About page the widget is real, and in Arabic the gutter
   opened on the trailing side — the text ran up against the edge it scrolls
   toward and left a gap behind it.
   -------------------------------------------------------------------------- */

/* Elementor writes this gutter per element with a five-class selector, so the
   flag is needed here for the same reason as the sidebar widgets. */
[dir="rtl"] .trx_addons_marquee_wrap:not(.trx_addons_marquee_reverse) .trx_addons_marquee_element {
	padding-left: 0 !important;
	padding-right: 50px !important;
}

[dir="rtl"] .trx_addons_marquee_wrap.trx_addons_marquee_reverse .trx_addons_marquee_element {
	padding-right: 0 !important;
	padding-left: 50px !important;
}


/* --------------------------------------------------------------------------
   16. Search results page

   The no-results page was laid out for English: its heading, its explanatory
   line and the search field under them all aligned left, so the Arabic ran
   away from the edge the reader starts at. The stray full stop that appeared
   at the start of the sentence was the same cause — a left-aligned line in an
   RTL paragraph puts its terminal punctuation on the wrong end.
   -------------------------------------------------------------------------- */

[dir="rtl"] .search_wrap_page,
[dir="rtl"] .page_content_wrap .search_wrap,
[dir="rtl"] body.search .content,
[dir="rtl"] body.search .content_wrap,
[dir="rtl"] .search_results_notice,
[dir="rtl"] .post_item_none_search,
[dir="rtl"] .post_item_none_search .post_content,
[dir="rtl"] .post_item_none_search .post_title {
	text-align: right !important;
	direction: rtl;
}

[dir="rtl"] .post_item_none_search .search_form,
[dir="rtl"] body.search .search_form {
	margin-left: auto;
	margin-right: 0;
}

[dir="rtl"] .post_item_none_search .search_field,
[dir="rtl"] body.search .search_field {
	text-align: right !important;
	padding-right: 42px !important;
	padding-left: 12px !important;
}

[dir="rtl"] .post_item_none_search .search_submit,
[dir="rtl"] body.search .search_submit {
	left: auto !important;
	right: 0 !important;
	margin-left: 0 !important;
	margin-right: 17px !important;
}


/* --------------------------------------------------------------------------
   17. The scrolling banner

   An earlier attempt here set animation-direction: reverse. It did nothing:
   measured on the page, these elements carry animation: none — the movement
   comes from the widget's own script, not from CSS. Removed rather than left
   in place looking like it does something.

   The real fault was a race, and it is fixed in functions.php: the widget
   clones its text until the row is wide enough, measuring the original as it
   goes. TranslatePress swaps the text after that, so in Arabic the widget
   measured an empty element, cloned it 31 times (English needs 3), and only
   the first clone ever received the Arabic.

   What is left here is direction, which CSS does own. */
[dir="rtl"] .trx_addons_marquee_wrap,
[dir="rtl"] .trx_addons_bg_text {
	direction: rtl;
	unicode-bidi: isolate;
}

/* The banner pins its line of text to the top of the strip: a 126px line in a
   155px strip, with the 29px of slack all below. Latin ascenders fit in that;
   Arabic dots do not. The dot of ض and the two dots of ة were being clipped
   clean off, so "راحة ورعاية لكل مريض" was reading on screen as
   "راحه ورعايه لكل مريص" — a spelling mistake made entirely by CSS.

   Centring the line in the strip it already occupies puts about 15px above and
   below. No extra height, no shift to anything around it. */
[dir="rtl"] .trx_addons_bg_text.trx_addons_marquee_wrap,
[dir="rtl"] .trx_addons_bg_text {
	align-items: center;
}


/* --------------------------------------------------------------------------
   18. Arrows, icon boxes and post navigation

   Four separate faults, all the same shape: a value that reads correctly in
   English and is simply wrong once the page runs right-to-left. */

/* 18.1  The CTA arrows on the services page point the way you read. In Arabic
   that is leftwards. Scoped to the "icon on the right" widgets, which on this
   site are only ever arrows and chevrons — the tick marks on the home page
   use the "icon on the left" variant and must not be flipped. */
[dir="rtl"] .trx-addons-icon-right .trx-addons-icon-list-icon svg {
	transform: scaleX(-1);
}

/* 18.2  Post-card meta. The icon carries margin-right, which in RTL puts the
   gap on the outside and leaves the icon touching the text it labels. */
[dir="rtl"] .trx-addons-posts-item-meta .trx-addons-icon {
	margin-right: 0 !important;
	margin-left: 8px !important;
}

/* 18.3  Icon boxes set to "start" alignment. Elementor writes text-align:end
   for them, which resolves to the right in English and to the LEFT in Arabic
   — so both the icon and the heading drifted to the wrong edge with 100px of
   dead space beside them. Pinned to the right for the start-aligned preset. */
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-icon,
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-content,
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-title,
[dir="rtl"] .elementor-position-block-start .elementor-icon-box-description {
	text-align: right;
}

/* 18.4  Previous / next post links. The two blocks already swap sides, but
   three things inside them did not: the headings still hug the inner edge,
   and both arrow glyphs point inwards with their gap on the wrong side. */
[dir="rtl"] .nav-links-single .nav-previous .post-title,
[dir="rtl"] .nav-links-single .nav-previous .post_date,
[dir="rtl"] .nav-links-single .nav-previous a {
	text-align: right;
}

[dir="rtl"] .nav-links-single .nav-next .post-title,
[dir="rtl"] .nav-links-single .nav-next .post_date,
[dir="rtl"] .nav-links-single .nav-next a {
	text-align: left;
}

[dir="rtl"] .nav-links-single .nav-arrow-label::before,
[dir="rtl"] .nav-links-single .nav-arrow-label::after {
	display: inline-block;
	transform: scaleX(-1);
}

[dir="rtl"] .nav-links-single .nav-previous .nav-arrow-label::before {
	margin-right: 0;
	margin-left: 0.36em;
}

[dir="rtl"] .nav-links-single .nav-next .nav-arrow-label::after {
	margin-left: 0;
	margin-right: 0.36em;
}


/* 19. The scrolling banner, Arabic sizing.

   15em is tuned for Latin capitals. Arabic sits taller and heavier at the
   same size, so the band read as a wall of type. Dropped to 12.5em and to a
   medium weight — closer in visual weight to the English original, and it
   gives the dots more clearance inside the strip as a side effect. */
[dir="rtl"] .elementor-element.elementor-element-c1b37ed .trx_addons_bg_text_char {
	font-size: 129px;
}

@media (max-width: 1279px) {
	[dir="rtl"] .elementor-element.elementor-element-c1b37ed .trx_addons_bg_text_char {
		font-size: 82px;
	}
}

@media (max-width: 767px) {
	[dir="rtl"] .elementor-element.elementor-element-c1b37ed .trx_addons_bg_text_char {
		font-size: 49px;
	}
}


/* 19b. The strip is still too short for Arabic.

   Centring the line (section 17) was enough at the desktop size but not at the
   tablet one: the theme sets line-height 0.8em, which is shorter than the font
   asks for, and the strip is then pinned to a fixed pixel height. Whatever the
   breakpoint, the dot of ض and the dots of ة sat above the ceiling and were
   sliced off — measured and photographed at both sizes before changing this.

   Letting the strip size itself and giving the line a full 1.0em is the least
   that renders every letter. It makes the band taller in Arabic than it is in
   English; that is the price of showing the text correctly, and English is
   untouched. */
[dir="rtl"] .trx_addons_bg_text.trx_addons_marquee_wrap {
	height: auto !important;
	min-height: 0 !important;
}

[dir="rtl"] .trx_addons_bg_text .trx_addons_bg_text_inner .trx_addons_bg_text_char {
	line-height: 1em !important;
}


/* 20. Phone numbers keep their country code on the left.

   "+974 44156516" is two digit runs with a space between them and no strong
   character anywhere. Inside an RTL paragraph the bidi algorithm is entitled
   to reorder the runs, and it does: the number rendered as "44156516 974+".
   Measured, not guessed — the "+974" range sat to the right of the rest.

   unicode-bidi: plaintext resolves each item's direction from its own first
   strong character, so a digits-only string falls to LTR and reads correctly
   while an Arabic label in the same list stays RTL. No need to mark up which
   list items happen to be phone numbers. */
[dir="rtl"] .elementor-icon-list-text,
[dir="rtl"] .trx-addons-icon-list-text,
[dir="rtl"] a[href^="tel:"] {
	unicode-bidi: plaintext;
}