/* Right-to-left overrides for index_uae.html.
 *
 * libs.min.css is Bootstrap 4 built LTR-only, and style.min.css hardcodes
 * physical directions (margin-left, text-align: right, left: 0). Setting
 * dir="rtl" flips inline text but leaves all of that pointing the wrong way,
 * so every such rule is mirrored below.
 *
 * Load order matters: this must come after libs.min.css and style.min.css.
 */

/* --- Typography -----------------------------------------------------------
 * style.min.css imports Raleway and Ubuntu from Google Fonts. Neither has
 * Arabic glyphs, so the browser would silently fall back per-glyph to whatever
 * the system offers. Name the fallbacks explicitly instead: Segoe UI/Tahoma on
 * Windows, SF Arabic/Geeza Pro on Apple, Noto on Android and Linux.
 */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] .btn,
[dir="rtl"] .header__btn,
[dir="rtl"] .footer__contact a,
[dir="rtl"] .fcontact__title {
	font-family: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", Arial, sans-serif;
}

/* Arabic script sits taller than Latin at the same size; a little extra
 * leading keeps diacritics and descenders from crowding. */
[dir="rtl"] body,
[dir="rtl"] p {
	line-height: 34px;
}

/* --- Grid -----------------------------------------------------------------
 * Bootstrap 4 offsets are margin-left. Under RTL that pushes the column
 * further away from the start edge instead of toward it.
 */
@media (min-width: 768px) {
	[dir="rtl"] .offset-md-1 {
		margin-left: 0;
		margin-right: 8.333333%;
	}
}

/* --- Header --------------------------------------------------------------- */
[dir="rtl"] .header__contact {
	text-align: left;
}

[dir="rtl"] .header__btn .fas {
	margin-right: 0;
	margin-left: 5px;
}

/* --- Hero -----------------------------------------------------------------
 * The copy sits in the start-edge column, so the illustration has to move to
 * the opposite edge.
 */
[dir="rtl"] .hero__bg {
	text-align: left;
}

/* --- About ----------------------------------------------------------------
 * The heading is in the narrow column and aligns toward the body text beside
 * it, which under RTL is on its left.
 */
[dir="rtl"] .about__title {
	text-align: left;
}

/* --- Bulleted lists -------------------------------------------------------
 * Belt and braces: UA default padding-inline-start already mirrors, but any
 * stylesheet in the chain setting an explicit padding-left would not.
 */
[dir="rtl"] ul {
	padding-left: 0;
	padding-right: 40px;
}

/* --- Contact --------------------------------------------------------------- */
[dir="rtl"] .contact__bg {
	left: auto;
	right: 0;
	text-align: right;
}

[dir="rtl"] .contact__content {
	margin-left: 0;
	margin-right: 80px;
}

/* --- Footer --------------------------------------------------------------- */
[dir="rtl"] .fcontact__title {
	margin-right: 0;
	margin-left: 10px;
}

/* --- Buttons --------------------------------------------------------------- */
[dir="rtl"] .btn-big span {
	margin-right: 0;
	margin-left: 20px;
}

/* --- Bidirectional isolation ----------------------------------------------
 * Email addresses and Latin acronyms embedded in Arabic text. Without
 * isolation the bidi algorithm reorders surrounding punctuation -- a trailing
 * full stop or a closing paren jumps to the wrong side of the run.
 */
[dir="rtl"] .ltr {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* --- Small screens --------------------------------------------------------- */
@media (max-width: 767px) {
	[dir="rtl"] .contact__content {
		margin-right: 0;
	}
}