/* ==========================================================================
   site.css — Dr. Mohamed Atef custom styles
   Overrides layered on top of style.min.css. Do NOT edit template CSS files.
   ========================================================================== */

/* ---- Kill horizontal overflow / right-side white space ----
   body{overflow-x:hidden} (template) does NOT clip position:fixed panels — they're
   sized to the viewport, not body. The offcanvas-end (#support_item, 450px) parks
   off the right edge via translateX(100%) when closed, extending the scroll area
   (white space on the right, most visible on touch/tablet). Clipping at the root
   propagates to the viewport and clips fixed overflow too. `clip` (not `hidden`)
   avoids making html a scroll container, so position:sticky headers keep working. */
html {
	overflow-x: clip;
}

/* ---- Clinic logo image (replaces text wordmark) ---- */
.logo-img {
	height: 84px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	object-fit: contain;
}

/* Mobile: enlarge the header brand logo only (not the slide-out/offcanvas/footer marks).
   Template forces it to 38-40px at <=575px via higher-specificity selectors, so we match
   that specificity (.header-fourteen .header-nav .navbar-brand.logo .logo-img) to win. */
@media (max-width: 767.98px) {
	.header-fourteen .header-nav .navbar-brand.logo .logo-img {
		height: 56px;
	}
	/* Hero CTA spans the column on mobile */
	.banner-section-fourteen .banner-content .theme-14-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Transparent header over dark banner -> invert logo to white silhouette */
.header-fourteen.home-menu .logo .logo-img.normal-logo {
	filter: brightness(0) invert(1);
}

/* Fixed (scrolled) header has white bg -> show logo as-is (no filter) */
.header-fourteen.fixed .logo .logo-img.normal-logo {
	filter: none;
}

/* Hide the duplicate white-logo img (template toggles by class) */
.logo .logo-img.white-logo {
	display: none;
}

/* Mobile slide-out menu logo (light bg, no filter) */
.menu-logo .logo-img {
	height: 68px;
	filter: none;
}

/* Offcanvas logo */
.offcanvas-logo {
	height: 48px;
	width: auto;
	object-fit: contain;
}

/* Footer logo */
.footer-logo-img {
	height: 52px;
	width: auto;
	object-fit: contain;
}

/* ---- Floating WhatsApp + Phone buttons ---- */
.floating-contact {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.floating-btn {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 26px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.floating-btn:hover {
	color: #ffffff;
	transform: scale(1.08);
	opacity: 0.92;
}

.floating-whatsapp {
	background: #25D366;
}

.floating-phone {
	background: var(--secondary);
}

@media (max-width: 991.98px) {
	.floating-contact {
		right: 14px;
		bottom: 14px;
	}
	.floating-btn {
		width: 48px;
		height: 48px;
		font-size: 22px;
	}
}

/* ---- Navbar theme toggler + language button ---- */
.nav-theme-toggle {
	display: flex;
	align-items: center;
}

/* Single theme button, styled to match the language toggle (bordered circle,
   transparent bg). The icon (moon/sun) is swapped in JS to show the mode you'd
   switch TO. */
.nav-theme-toggle .theme-toggle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: #ffffff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.nav-theme-toggle .theme-toggle:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--secondary);
}

.header-fourteen.fixed .nav-theme-toggle .theme-toggle {
	border-color: var(--border-color);
	color: var(--gray-900);
}

.header-fourteen.fixed .nav-theme-toggle .theme-toggle:hover {
	background: var(--primary-transparent);
	color: var(--primary);
}

/* Language toggle button */
.lang-toggle-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: transparent;
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.lang-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--secondary);
}

.header-fourteen.fixed .lang-toggle-btn {
	border-color: var(--border-color);
	color: var(--gray-900);
}

.header-fourteen.fixed .lang-toggle-btn:hover {
	background: var(--primary-transparent);
	color: var(--primary);
}

@media (max-width: 991.98px) {
	/* Mobile top bar layout: logo on the far left, then the language + theme
	   toggles grouped with the hamburger on the far right (hamburger last).
	   The hamburger was moved out of .navbar-header to be the nav's last child
	   so it can sit just right of the toggles. */
	.header-fourteen .header-nav {
		flex-wrap: nowrap;
		align-items: center;
	}
	.header-fourteen .header-nav .navbar-header {
		width: auto;
		/* Eat all free space after the logo so the toggles + hamburger sit
		   flush right together (the theme pins .header-navbar-rht margin with
		   !important, so push from the logo side instead). */
		margin-inline-end: auto;
	}

	/* The theme hides the whole .header-navbar-rht below lg. Re-show it but keep
	   only the toggles (hide the Contact button + details icon). */
	.header-fourteen .header-nav .header-navbar-rht {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.header-fourteen .header-nav .header-navbar-rht > li {
		padding: 0;
	}
	.header-fourteen .header-nav .header-navbar-rht > li:not(.nav-lang-toggle):not(.nav-theme-toggle) {
		display: none;
	}
	.header-fourteen .header-nav #mobile_btn {
		margin: 0;
		margin-inline-start: 10px;
	}
}

html[dir="rtl"] .header-fourteen .header-nav .header-navbar-rht li {
	padding-right: 0;
	padding-left: 6px;
}

html[dir="rtl"] .header-fourteen .header-nav .header-navbar-rht li:last-child {
	padding-left: 0;
}

/* Mirror contact button icon gap for RTL (margin-right -> margin-left) */
html[dir="rtl"] .header-fourteen .header-nav .header-navbar-rht li .btn i {
	margin-right: 0;
	margin-left: 8px;
}

@media (max-width: 1199.98px) {
	html[dir="rtl"] .header-fourteen .header-nav .header-navbar-rht li .btn i {
		margin-left: 0;
	}
}

/* ---- Treatment section full-width image ---- */
.treatment-img-full {
	border-radius: 10px;
	overflow: hidden;
	margin-top: 24px;
}

.treatment-img-full img {
	border-radius: 10px;
}

/* ---- Footer logo ---- */
.footer-links .footer-logo-img {
	margin-bottom: 8px;
}

/* ==========================================================================
   IVF Program nav dropdown (template has-submenu / submenu convention)
   ========================================================================== */
.main-nav > li.has-submenu {
	position: relative;
}

/* Desktop only, and at template specificity: style.min.css sets
   `.header .header-nav .main-nav li a{display:block}` (3 classes), which beat the
   old 2-class selector here — the anchor stayed a block, `gap` did nothing, and the
   caret sat glued to the label in both EN and AR. Mobile keeps the template's
   flex/space-between row untouched. */
@media (min-width: 992px) {
	.header .header-nav .main-nav > li.has-submenu > a {
		display: inline-flex;
		align-items: center;
		/* 4px read as "glued to the word" in Arabic: Zain's glyphs sit tight to
		   their advance width, so the caret had no breathing room against the last
		   letter. 8px separates the affordance from the label in both scripts. */
		gap: 8px;
	}
}

/* Caret glyph. The bundled FontAwesome is v7, whose solid family is
   "Font Awesome 7 Free" — the old "Font Awesome 6 Free" name matches no loaded
   @font-face, so \f078 fell back to the body font and rendered as nothing (the
   IVF Program item looked like a plain link with no dropdown affordance). List
   the neighbouring major versions too so an FA bump can't silently break it
   again; all.min.css already declares the v5 aliases. */
.main-nav > li.has-submenu > a::after {
	content: "\f078";
	font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 11px;
	/* Zain's line box is much taller than Latin's, which pushed the caret off
	   the text's optical centre in Arabic. Pin the glyph's own line box to 1. */
	line-height: 1;
	opacity: 0.7;
	transition: transform 0.2s ease;
}

.main-nav > li.has-submenu:hover > a::after {
	transform: rotate(180deg);
}

.main-nav > li.has-submenu > ul.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: 10px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
	padding: 10px;
	margin: 8px 0 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 1050;
}

.main-nav > li.has-submenu:hover > ul.submenu,
.main-nav > li.has-submenu:focus-within > ul.submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav > li.has-submenu > ul.submenu > li {
	list-style: none;
}

.main-nav > li.has-submenu > ul.submenu > li > a {
	display: block;
	padding: 10px 14px;
	color: var(--gray-900);
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	transition: background 0.15s ease, color 0.15s ease;
}

.main-nav > li.has-submenu > ul.submenu > li > a:hover {
	background: var(--primary-transparent);
	color: var(--primary);
}

/* Mobile slide-out: expand submenu inline (no hover) */
@media (max-width: 991.98px) {
	.main-nav > li.has-submenu > ul.submenu {
		position: static;
		min-width: 0;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 14px;
		margin: 4px 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}
	.main-nav > li.has-submenu.submenu-open > ul.submenu {
		display: block;
	}
	.main-nav > li.has-submenu > a::after {
		transition: transform 0.2s ease;
	}
	.main-nav > li.has-submenu.submenu-open > a::after {
		transform: rotate(180deg);
	}
}

/* ==========================================================================
   IVF Program page — in-page nav + section aids
   ========================================================================== */
.ivf-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	justify-content: center;
}

.ivf-subnav a {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 30px;
	border: 1px solid var(--primary);
	color: var(--primary);
	font-size: 14px;
	font-weight: 500;
	background: transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ivf-subnav a:hover {
	background: var(--primary-transparent);
	border-color: var(--primary);
	color: var(--primary);
}

/* Dark mode: the page background is near-black, so white pills with brown text read poorly
   (and --gray-900 flips light). Use transparent pills with white text + a faint border, coral
   on hover, so the IVF sub-nav stays legible and on-brand in dark mode. */
:root.dark-mode .ivf-subnav a {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
:root.dark-mode .ivf-subnav a:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.ivf-section {
	scroll-margin-top: 120px;
}

.ivf-img img {
	width: 100%;
	object-fit: cover;
}

html[dir="rtl"] .about-lists li {
	padding-right: 26px;
	padding-left: 0;
}

.about-lists p {
	font-size: 13px;
	padding: 6px 22px 6px 38px;
	margin-bottom: 10px;
}

html[dir="rtl"] .about-lists p {
	padding: 6px 38px 6px 22px;
	font-size: 14px;
	max-width: 100%;
	white-space: nowrap;
}

html[dir="rtl"] .about-lists p::before {
	left: auto;
	right: 8px;
	transform: translateY(-50%) rotate(180deg) !important;
}

/* Show the top of the image on hover for items 2-4 (item 1 already looks right) */
.services-content-fourteen .services-item-fourteen:not(:first-child):hover .services-profile .large-img {
	object-position: top;
}

@media (max-width: 575.98px) {
	html[dir="rtl"] .about-lists p {
		font-size: 13px;
	}
}

@media (max-width: 575.98px) {
	.about-lists p {
		font-size: 12px;
		padding: 5px 18px 5px 34px;
	}
}

/* ==========================================================================
   Blog cards + grid layout (lightweight styling)
   ========================================================================== */
.blog-section .row > .col-12:first-child {
	padding-left: 12px;
	padding-right: 12px;
}

.blog-pagination {
	margin-top: 40px;
}

.blog-pagination .pagination {
	gap: 8px;
	justify-content: center;
}

.blog-pagination .page-link {
	min-width: 42px;
	height: 42px;
	border-radius: 10px;
	border: 1px solid var(--border-color);
	background: #ffffff;
	color: var(--gray-900);
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.blog-pagination .page-link:hover {
	background: var(--primary-transparent);
	color: var(--primary);
	border-color: var(--primary);
}

.blog-pagination .page-item.active .page-link {
	background: var(--primary);
	border-color: var(--primary);
	color: #ffffff;
}

.blog-pagination .page-item.disabled .page-link {
	opacity: 0.5;
	pointer-events: none;
}

html[dir="rtl"] .blog-pagination .pagination {
	padding-right: 0;
}

.blog-listing-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-listing-card:hover {
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07);
	transform: translateY(-3px);
}

.blog-listing-img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.blog-listing-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.blog-listing-card:hover .blog-listing-img img {
	transform: scale(1.04);
}

.blog-listing-content {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-meta {
	font-size: 12px;
	color: var(--gray-500);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.blog-list-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 8px;
}

.blog-list-title a {
	color: var(--gray-900);
}

.blog-list-title a:hover {
	color: var(--primary);
}

.blog-listing-content p {
	font-size: 13px;
	color: var(--gray-600);
	line-height: 1.6;
	margin-bottom: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-readmore {
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: auto;
	color: var(--primary);
}

.blog-readmore:hover {
	color: var(--primary-hover);
}

/* Single post page */
.single-post-hero {
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 26px;
}

.single-post-body p {
	margin-bottom: 16px;
	line-height: 1.8;
}

.single-post-tags a {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--border-color);
	border-radius: 30px;
	margin: 0 6px 8px 0;
	font-size: 13px;
}

/* ==========================================================================
   Legal / prose pages (terms, privacy)
   ========================================================================== */
.legal-content h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 28px 0 10px;
}

.legal-content p {
	line-height: 1.8;
	color: var(--gray-700);
}

.legal-content h3:first-child {
	margin-top: 0;
}

/* Single post body */
.single-post-body h2 {
	font-size: 28px;
	margin-bottom: 14px;
}

.single-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Mirror hero image position for RTL (right: 25% -> left: 25%) */
html[dir="rtl"] .banner-section-fourteen .banner-image {
	right: auto;
	left: 25%;
}

/* Tablet / iPad-landscape band (~1024px): hero image sits too far inward. Nudge
   it toward the edge — right in English, left in Arabic — by lowering the inset
   from 25% to 18%. Tune the 18% if you want more/less (lower = further out). */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.banner-section-fourteen .banner-image {
		right: 18%;
	}
	html[dir="rtl"] .banner-section-fourteen .banner-image {
		right: auto;
		left: 18%;
	}
}

/* FAQ accordion: drive brown highlight off Bootstrap open state (no custom JS) */
.faq-info.faq-info-fourteen .accordion-item:has(.accordion-button:not(.collapsed)) {
	background: var(--primary);
	border-color: var(--primary);
}
.faq-info.faq-info-fourteen .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-button {
	color: #fff;
}
.faq-info.faq-info-fourteen .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-content p {
	color: #fff;
}

/* Active nav link: dark --primary-hover was invisible on the dark hero.
   Use the coral accent so the current page reads on dark hero, brown header, and white scrolled header. */
.header .header-nav .main-nav > li.active > a {
	color: var(--secondary);
}

/* Inner pages (body.inner-page): the header is transparent with white text — fine over the
   home hero, invisible over light inner-page content. Give it a solid brand background.
   Sticky (not absolute) so it reserves space (no overlap, no scroll jump) and still pins on scroll.
   White text / logo / toggles already styled for the over-dark treatment. Turns white on scroll via .fixed. */
body.inner-page .header-fourteen {
	position: sticky;
	top: 0;
}
body.inner-page .header-fourteen:not(.fixed) {
	background: var(--primary);
}

/* About page "Why Choose" uses a centered, full-width header above the cards.
   The template makes .offer-section-fourteen .section-header sticky (top:80px) — right for the
   home page's two-column layout, but on the centered layout it just floats oddly. Pin off. */
.offer-section-fourteen .section-header-fourteen.text-center {
	position: static;
}

/* ==========================================================================
   Hero second line ("Personalized" / "مخصصة لكِ"). The template renders it as
   hollow outlined text via `-webkit-text-stroke: 1px #fff` on a transparent
   fill. Chrome strokes every glyph contour separately, so wherever a font's
   parts overlap — the r/n shoulder joins, the a bowl, the e crossbar — the
   seam gets stroked too and shows as a small spike inside the letter. It is a
   property of the technique, not of the stroke width or the typeface: Hanken
   Grotesk (EN) and Zain (AR) both show it.
   A translucent fill keeps the same two-tone hierarchy against the solid-white
   first line, with no seams to expose.
   ========================================================================== */
.banner-section-fourteen .banner-content h1 .subtitle {
	color: rgba(255, 255, 255, 0.45);
	-webkit-text-stroke: 0;
}

/* ==========================================================================
   Footer map (same Damanhour embed as the contact page) — right side of
   footer-top, beside the Quick Links and Contact widgets. Replaces the IVF
   promo image that used to sit here.
   Unlike the promo image this stays visible on mobile: the address text alone
   is not enough to find the clinic, so the map earns its footer height on
   small screens where the promo image did not.
   ========================================================================== */
.footer-promo {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.footer-map {
	width: 100%;
	max-width: 560px;
	border-radius: 16px;
	overflow: hidden;
	/* The iframe paints its own light chrome; a hairline keeps it from looking
	   like a hole punched in the dark footer. */
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-map iframe {
	display: block;
	width: 100%;
	height: 220px;
	border: 0;
}

/* Tablet / iPad-landscape band (~1024px): the map is wide enough to crowd the
   Contact column. (The wordmark's matching step lives in the display type
   ladder above, so the whole ladder stays in one place.) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.footer-map {
		max-width: 420px;
	}
	.footer-map iframe {
		height: 180px;
	}
}

/* Below lg the map drops under the widgets and spans the column, so drop the
   right-alignment and the desktop max-width. */
@media (max-width: 991.98px) {
	.footer-promo {
		justify-content: flex-start;
		margin-top: 24px;
	}
	.footer-map {
		max-width: 100%;
	}
	.footer-map iframe {
		height: 240px;
	}
}

/* RTL: the map column hugs the opposite edge. */
html[dir="rtl"] .footer-promo {
	justify-content: flex-start;
}
@media (max-width: 991.98px) {
	html[dir="rtl"] .footer-promo {
		justify-content: flex-end;
	}
}

/* About page badges: .about-wrap is a flex row [pills | abt-video image]. The pills size to the
   leftover space after the image. Home's abt-video is portrait (1122px intrinsic); the about
   page's is landscape (2048px), whose larger flex basis steals width from the pills — in English
   they wrap to extra lines, in Arabic (one-line, non-wrapping) they overflow the pill. Force the
   about-page abt-video to home's 1122px basis so the pill column gets the same width in both
   languages, while keeping the pills content-sized (no fixed width) exactly like home. */
body.inner-page .about-wrap .abt-video {
	flex: 0 1 1122px;
	min-width: 0;
}
body.inner-page .about-wrap .abt-video img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Dark mode — contact form. The template darkens .form-control but not the
   <select> (hardcoded white bg + dark dropdown arrow) and leaves the labels
   muted, so the form reads poorly in dark mode. Match the dark inputs.
   ========================================================================== */
.dark-mode .form-select {
	background-color: #121212;
	border-color: #1b1b1b;
	color: var(--gray-900);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23dadee6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.dark-mode .form-select option {
	background-color: #121212;
	color: var(--gray-900);
}
.dark-mode .contact-form-fourteen label {
	color: var(--gray-900);
}

/* ==========================================================================
   Contact info rows (mobile menu + floating contact offcanvas). .support-item
   is a flex row [avatar | text]. The long "General Inquiries" email has no
   wrap point, so flexbox shrinks the fixed-size .avatar into a squished oval
   (the short phone row keeps its avatar a circle). Stop the avatar shrinking
   and let the email wrap instead.
   ========================================================================== */
.support-item .avatar {
	flex-shrink: 0;
}
.support-item .link {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Display type: 10% down across the board

   The template's display sizes were tuned larger than this content wants — the
   client's note was that the site "looks great at 90% zoom". Rather than
   pick at individual headings, take the whole display ladder down ~10% and keep
   the steps proportional, so the rhythm between hero / section title / footer
   mark is unchanged and only the overall scale moves.

   Body copy is deliberately NOT touched. It is already at the 16px floor, and
   shrinking running text costs legibility rather than buying calm.
   ========================================================================== */

/* Hero headline: 80 70 60 52 42 38 -> 72 64 54 46 38 34 */
.banner-section-fourteen .banner-content h1 { font-size: 72px; }
@media (max-width: 1399.98px) { .banner-section-fourteen .banner-content h1 { font-size: 64px; } }
@media (max-width: 1199.98px) { .banner-section-fourteen .banner-content h1 { font-size: 54px; } }
@media (max-width: 991.98px)  { .banner-section-fourteen .banner-content h1 { font-size: 46px; } }
@media (max-width: 767.98px)  { .banner-section-fourteen .banner-content h1 { font-size: 38px; } }
@media (max-width: 575.98px)  { .banner-section-fourteen .banner-content h1 { font-size: 34px; } }

/* Section titles: 72 60 52 42 34 -> 64 54 46 38 30 */
.section-header-fourteen .section-title { font-size: 64px; }
@media (max-width: 1199.98px) { .section-header-fourteen .section-title { font-size: 54px; } }
@media (max-width: 991.98px)  { .section-header-fourteen .section-title { font-size: 46px; } }
@media (max-width: 767.98px)  { .section-header-fourteen .section-title { font-size: 38px; } }
@media (max-width: 575.98px)  { .section-header-fourteen .section-title { font-size: 30px; } }

/* Hero stat numbers: 64 56 42 30 -> 58 50 38 28 */
.banner-item-two h2 { font-size: 58px; }
@media (max-width: 1399.98px) { .banner-item-two h2 { font-size: 50px; } }
@media (max-width: 991.98px)  { .banner-item-two h2 { font-size: 38px; } }
@media (max-width: 767.98px)  { .banner-item-two h2 { font-size: 28px; } }

/* Footer wordmark: 238 200 156 119 62 -> 214 180 140 107 56.
   The whole ladder lives here, including the 992-1199 tablet step, so source
   order inside this one block decides the winner. Splitting it across the file
   is how the 214px base silently beat the tablet rule and pushed 99px of
   horizontal overflow at 1024. */
.footer-fourteen .animated-text { font-size: 214px; }
@media (max-width: 1199.98px) { .footer-fourteen .animated-text { font-size: 180px; } }
/* Tablet / iPad-landscape: the wordmark crowds the Contact column here, so this
   band runs smaller than its place in the ladder would suggest. */
@media (min-width: 992px) and (max-width: 1199.98px) { .footer-fourteen .animated-text { font-size: 144px; } }
@media (max-width: 991.98px)  { .footer-fourteen .animated-text { font-size: 140px; } }
@media (max-width: 767.98px)  { .footer-fourteen .animated-text { font-size: 107px; } }
/* Phones: a fixed 56px step is ~6px too wide for "DR. MOHAMED" at 390px and
   the wordmark gets clipped at the right edge. The longest line runs about
   6.65em, so below ~430px the size has to follow the viewport rather than sit
   on a fixed step. min() keeps 56px as the ceiling for the wider phones and
   scales down from there, leaving the line comfortably inside the container
   instead of just barely fitting. */
@media (max-width: 575.98px)  {
	.footer-fourteen .animated-text {
		font-size: min(56px, 12vw);
		padding-inline: 12px;
	}
}

/* ==========================================================================
   Services accordion: stop the rotated card labels being cut off

   .services-item-fourteen .title is a single white-space:nowrap line at 54px,
   rotated -90deg inside a 440px-tall card, so the label's *length* is measured
   against the card height. Anything longer than 440px gets chopped at BOTH ends
   (the title is centred), and the card's overflow:hidden makes the loss silent:

     EN  "Gynecological Laparoscopy"   675px  -> 235px lost
     AR  "الخصوبة والحقن المجهري"        643px  -> 203px lost
     AR  "رعاية ما قبل الولادة"          463px  ->  23px lost

   Sizing for the longest label instead: 54px * 420/675 ~= 33px leaves ~10px of
   breathing room at each end for the worst case in either language. Applied to
   both directions so the four cards stay optically consistent — the labels
   aren't decorative, they're the only thing identifying a collapsed card.
   Only relevant at >=992px; the template hides these labels below that.
   ========================================================================== */
@media (min-width: 992px) {
	.services-item-fourteen .title {
		font-size: 33px;
	}
}

/* ==========================================================================
   RTL: make Bootstrap's directional utilities actually directional

   assets/css/bootstrap.min.css is the LTR build, where the "logical" utilities
   are hard-coded to physical sides (.me-2 { margin-right: .5rem }). Bootstrap
   only emits real start/end semantics in its .rtl.css build, which this project
   doesn't ship. So in Arabic every me-*/ms-*/ps-*/pe-* lands on the wrong side:
   the hero CTA's <i class="isax isax-messages-3 me-2"> put its 8px on the
   outside edge and left the icon touching the Arabic label with 0px gap, while
   blog-details' <blockquote class="border-start ps-3"> indented away from its
   own border.

   Remap the whole 0-5 scale rather than only the four utilities in use today:
   the failure is silent (nothing breaks in English, and Arabic just looks
   slightly off), so the next me-3 someone adds would reintroduce it unnoticed.
   Scoped to [dir="rtl"] — English keeps stock Bootstrap behaviour.
   ========================================================================== */
html[dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; }
html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem !important; }
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

html[dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem !important; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

html[dir="rtl"] .pe-0 { padding-right: 0 !important; padding-left: 0 !important; }
html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem !important; }

html[dir="rtl"] .ps-0 { padding-left: 0 !important; padding-right: 0 !important; }
html[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem !important; }

html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }

html[dir="rtl"] .border-start { border-left: 0 !important; border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
html[dir="rtl"] .border-end { border-right: 0 !important; border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }

html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }

/* ==========================================================================
   Arabic: re-seat the coral highlight bar under .section-line

   The template draws the bar as a ::before pinned to `bottom: 2px` of the
   inline box, sized so its top edge lands on the Latin baseline — an underline
   that touches the word. Hanken Grotesk puts its baseline 0.25em above the box
   bottom; Zain, with a much deeper descent, puts it at 0.344em. Same 2px offset,
   but in Arabic the whole bar now sits below the baseline, in the empty
   descender band — it reads as a stray coral stripe floating under the heading
   rather than an underline.

   Translate the bar up by the 0.094em baseline difference. An em delta holds at
   every responsive font-size step and for both bar heights (18px / 10px on
   small screens), because it shifts the bar without resizing it.
   ========================================================================== */
html[dir="rtl"] .banner-section-fourteen .banner-content h1 .section-line::before,
html[dir="rtl"] .section-header-fourteen .section-line::before {
	bottom: calc(2px + 0.094em);
}

/* ==========================================================================
   Arabic typography — Zain (Google Fonts). Only applies in RTL mode, which
   site.js sets via <html dir="rtl"> on the AR toggle; English keeps the
   template's Hanken Grotesk.
   The universal selector is needed because the template hard-sets font-family
   on dozens of individual selectors (headings, .btn, .form-control, …), so a
   rule on <html> alone would be overridden. `:not(i)` spares the icon fonts —
   every icon in this site is an <i> (FontAwesome / iconsax / feather).
   ========================================================================== */
html[dir="rtl"],
html[dir="rtl"] :not(i) {
	font-family: "Zain", sans-serif;
}