/* Black & White theme overrides - monochrome site and hide masthead images */
:root {
	--bw-bg: #000000; /* major color: black background */
	--bw-text: #ffffff; /* primary text becomes white */
	--bw-muted: #9aa3b2; /* subdued text */
	--bw-panel: #0b0b0b; /* panels slightly lighter than pure black */
}

/* Monochrome palette for alternating sections */
:root {
	--mono-0: #000000;
	--mono-1: #0a0a0a;
	--mono-2: #121212;
	--mono-3: #171717;
	--mono-4: #1d1d1d;
	--mono-5: #242424;
}

/* Global base */
html,
body {
	background: var(--bw-bg) !important;
	color: var(--bw-text) !important;
}

/* Force monochrome for common color properties */
* {
	color: #fff !important;
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Panels, cards */
.bg-white,
.bg-light-1,
.bg-light-2,
.bg-light-4,
.bg-light-6,
.header,
.header *,
.header -type-4 {
	background-color: var(--bw-panel) !important;
}

/* Links, remove colored accents */
a,
a:visited,
.text-purple-1,
.text-green-1,
.text-orange-1,
.text-blue-1 {
	color: var(--bw-text) !important;
	text-decoration: none !important;
}

/* Active/current nav link uses the same underline bar as hover, held fixed */
.header .menu__nav a.-is-current,
.header .menu__nav a[aria-current="page"] {
	text-decoration: none !important; /* remove old underline */
}
.header .menu__nav a.-is-current::after,
.header .menu__nav a[aria-current="page"]::after {
	transform: scaleX(1) !important; /* show bar fully */
}
.header .menu__nav a.-is-current,
.header .menu__nav a[aria-current="page"] {
	transform: none !important; /* no hover lift when current */
}

/* Neutralize framework 'text-dark' utility classes which were supplying the
   unwanted darker/purple tone in this theme. Force them to the bw text color. */
.text-dark,
.text-dark-1,
.text-dark-2 {
	color: var(--bw-text) !important;
	background-color: transparent !important;
}

/* Neutralize any purple utility/modifier classes (text, bg, button modifiers).
   Cover elements with 'purple' in their class name, their descendants, SVGs and
   common utility tokens used across the pages so framework specificity is
   unlikely to override this. */
[class*="purple"],
[class*="purple"] *,
.text-purple-1,
.text-purple-2,
.bg-purple-1,
.bg-purple-2,
.bg-purple-3,
.-purple-1,
.-purple-2,
.-purple-3,
.-outline-purple-1,
.button.-purple-1,
.button.-purple-3,
.px-15.rounded-200.bg-purple-1 {
	color: var(--bw-text) !important;
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, 0.06) !important;
	box-shadow: none !important;
	-webkit-text-fill-color: var(
		--bw-text
	) !important; /* webkit text rendering */
}

/* Ensure SVGs and icon children inside purple-classes render white */
[class*="purple"] svg,
[class*="purple"] svg *,
.text-purple-1 svg,
.text-purple-1 svg *,
.bg-purple-1 svg,
.bg-purple-1 svg * {
	fill: var(--bw-text) !important;
	color: var(--bw-text) !important;
}

/* Muted text */
.text-light-1,
.text-light-2,
.text-light-3,
.text-muted {
	color: var(--bw-muted) !important;
}

/* Buttons */
.button,
button {
	background: transparent !important;
	color: var(--bw-text) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Inputs */
input,
textarea,
select {
	background: #0b0b0b !important;
	color: var(--bw-text) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Hide decorative masthead elements but keep the main hero image visible */
.masthead-image__el1,
.masthead-image__el2,
.masthead-image__el3,
.img-el {
	display: none !important;
	visibility: hidden !important;
}

/* Ensure the masthead container and main image are visible and styled */
.masthead-image,
.masthead-image__img1 {
	display: block !important;
	visibility: visible !important;
}

/* Hero image: white background, padding, slight radius, lift it upward */
.masthead-image__img1 img {
	padding: 18px !important;
	border-radius: 12px !important;
	display: block !important;
	transform: translateY(-36px) !important;
	position: relative !important;
	z-index: 30 !important;
	/* enlarge the hero picture */
	width: 920px !important;
	max-width: 100% !important;
}

/* If images are background images on elements, force none */
[style*="background-image"] {
	background-image: none !important;
}

/* Ensure icons remain visible but monochrome */
.fa,
i {
	color: var(--bw-text) !important;
}

/* Footer / mobile footer readability */
.mobile-footer,
.mobile-footer__number,
.mobile-socials a {
	color: var(--bw-text) !important;
}

/* Keep preloader subtle */
.preloader__bg {
	background-color: var(--bw-panel) !important;
}

/* Keep specificity but minimal changes to prevent layout break */

/* End black & white overrides */

/* Responsive: scale down on smaller screens and reduce lift */
@media (max-width: 992px) {
	.masthead-image__img1 img {
		width: 680px !important;
		transform: translateY(-24px) !important;
		padding: 14px !important;
	}
}

@media (max-width: 576px) {
	.masthead-image__img1 img {
		width: 100% !important;
		transform: translateY(-8px) !important;
		padding: 10px !important;
	}
}

/* Mobile menu nav links: force monochrome and remove any gradient text styles */
.header-menu .menu__nav a,
.menu__nav a,
.menu__nav a:hover,
.menu__nav a:focus,
.menu__nav a:active {
	color: var(--bw-text) !important;
	-webkit-text-fill-color: var(--bw-text) !important;
	background: none !important;
	background-image: none !important;
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	text-shadow: none !important;
}

/* Ensure icons inside mobile menu links are also white */
.menu__nav a svg,
.menu__nav a svg *,
.menu__nav a i {
	fill: var(--bw-text) !important;
	color: var(--bw-text) !important;
}

/* Brand logo */
.brand-logo {
	display: inline-flex;
	align-items: baseline;
	white-space: nowrap;
	color: var(--bw-text) !important;
	margin-left: 22px;
}

/* Ensure correct spacing in RTL mode */
[dir="rtl"] .brand-logo {
	margin-left: 0;
	margin-right: 22px;
	direction: ltr; /* Force left-to-right direction for logo */
}
.brand-logo__letter {
	font-family: "Allura", cursive;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 400;
	letter-spacing: 0.2px;
}

/* Preserve logo letters in RTL mode */
[dir="rtl"] .brand-logo__letter {
	text-align: center; /* Center text instead of right-align */
	float: none; /* Remove float that would affect layout */
	transform: none !important; /* Prevent any transforms */
}
.brand-logo__sep {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-style: normal;
	font-size: 40px;
	line-height: 1.1;
	font-weight: 400; /* regular, not bold */
	padding: 0 6px;
}
@media (max-width: 992px) {
	.brand-logo__letter,
	.brand-logo__sep {
		font-size: 34px;
	}
}
@media (max-width: 576px) {
	.brand-logo__letter,
	.brand-logo__sep {
		font-size: 30px;
	}
}

/* Increase spacing between header menu items */
.header .menu__nav a {
	margin: 0 14px !important;
}
@media (max-width: 992px) {
	.header .menu__nav a {
		margin: 0 10px !important;
	}
}
@media (max-width: 576px) {
	.header .menu__nav a {
		margin: 0 8px !important;
	}
}

/* ===== Header menu animated hover (site-wide) ===== */
.header .menu__nav a {
	position: relative;
	display: inline-block;
	padding-bottom: 4px; /* room for underline */
	transition: transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Underline grow */
.header .menu__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.1px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0.9;
	will-change: transform;
}

/* Sweeping dot */
.header .menu__nav a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
	/* keep it invisible until hover to avoid a tiny speck on some GPUs */
	opacity: 0;
	filter: none;
	transform: translateX(0) scale(0.6);
	transform-origin: center;
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
	will-change: transform, opacity;
}

/* Trigger on hover/focus (exclude static current to avoid double underline with text-decoration) */
.header .menu__nav a:hover::after,
.header .menu__nav a:focus-visible::after,
.header .menu__nav a:active::after {
	transform: scaleX(1);
}
.header .menu__nav a:hover::before,
.header .menu__nav a:focus-visible::before,
.header .menu__nav a:active::before {
	transform: translateX(calc(100% - 8px)) scale(1);
	opacity: 1;
}
.header .menu__nav a:hover,
.header .menu__nav a:focus-visible {
	transform: translateY(-1px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.header .menu__nav a,
	.header .menu__nav a::before,
	.header .menu__nav a::after {
		transition: none !important;
	}
	.header .menu__nav a:hover,
	.header .menu__nav a:focus-visible {
		transform: none !important;
	}
}

/* Remove the hovering dot effect entirely */
.header .menu__nav a::before {
	content: none !important;
	display: none !important;
}

/* Mobile menu: keep underline white and match text width */
.header-menu .menu__nav a,
.header-menu__content .menu__nav a {
	color: var(--bw-text) !important;
	-webkit-text-fill-color: var(--bw-text) !important;
	display: inline-block !important; /* so ::after width follows text only */
	width: auto !important;
	padding: 10px 0 !important; /* vertical tap area, no horizontal padding */
}
.header-menu .menu__nav a::after,
.header-menu__content .menu__nav a::after {
	background: var(--bw-text) !important; /* force white underline */
	bottom: 0 !important; /* tighter to text */
}

/* Home page hero background image with overlay */
.home-page .masthead.-type-3 {
	position: relative !important;
	background: transparent !important; /* let pseudo overlay handle bg */
	overflow: hidden !important;
}

/* Background image layer */
	.home-page .masthead.-type-3::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url("/AWS/img/fadl/20240802-565A9947.jpg")!important;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 0;
		opacity: 1 !important;
	}

/* Dark overlay for text readability */
.home-page .masthead.-type-3::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
	z-index: 1;
}

/* Ensure inner content sits above overlay */
.home-page .masthead.-type-3 > .container,
.home-page .masthead.-type-3 .masthead__content,
.home-page .masthead.-type-3 .masthead__title,
.home-page .masthead.-type-3 .masthead__text {
	position: relative !important;
	z-index: 2 !important;
}

/* Vertical spacing to make hero feel like a full hero */
.home-page .masthead.-type-3 {
	padding-top: 230px !important;
	padding-bottom: 120px !important;
}

@media (max-width: 992px) {
	.home-page .masthead.-type-3 {
		padding-top: 70px !important;
		padding-bottom: 90px !important;
	}
}

@media (max-width: 576px) {
	.home-page .masthead.-type-3 {
		padding-top: 60px !important;
		padding-bottom: 70px !important;
	}
}

/* Home hero: place text/content on the left */
.home-page .masthead.-type-3 .row.justify-center {
	justify-content: flex-start !important;
}
.home-page .masthead.-type-3 .masthead__content,
.home-page .masthead.-type-3 .masthead__title,
.home-page .masthead.-type-3 .masthead__text {
	text-align: left !important;
}

/* Override for Arabic language - align homepage hero text to the right */
.lang-ar.home-page .masthead.-type-3 .masthead__title,
.lang-ar.home-page .masthead.-type-3 .masthead__text,
.lang-ar.home-page .masthead.-type-3 p,
.lang-ar.home-page .masthead.-type-3 h1,
.lang-ar.home-page .masthead.-type-3 h2,
.lang-ar.home-page .masthead.-type-3 h3,
.lang-ar.home-page .masthead.-type-3 span,
.home-page.lang-ar .masthead.-type-3 .masthead__title,
.home-page.lang-ar .masthead.-type-3 .masthead__text,
.home-page.lang-ar .masthead.-type-3 p,
.home-page.lang-ar .masthead.-type-3 h1,
.home-page.lang-ar .masthead.-type-3 h2,
.home-page.lang-ar .masthead.-type-3 h3,
.home-page.lang-ar .masthead.-type-3 span {
	text-align: right !important;
}

/* Ensure proper content hierarchy in RTL mode */
.lang-ar.home-page .masthead.-type-3 .masthead__content,
.home-page.lang-ar .masthead.-type-3 .masthead__content {
	display: flex;
	flex-direction: column;
}

/* Mobile menu containers readable on dark */
.js-mobile-bg,
.header-menu__content,
.header-menu-bg,
.mobile-footer {
	background-color: var(--bw-panel) !important;
}

/* ========== About Page scoped adjustments ========== */
.about-page .masthead.-type-3 {
	/* Make hero tall and allow child columns to stretch */
	min-height: 80vh !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	position: relative;
}

.about-page .masthead__title {
	margin-bottom: 10px !important;
}

.about-page .masthead__text {
	margin-top: 16px !important;
}

.about-page .masthead-stats .masthead-stat + .masthead-stat {
	margin-left: 28px !important;
}

.about-page .masthead.-type-3 .row.items-center {
	/* Ensure columns stretch full hero height */
	align-items: stretch !important;
}

/* Vertically center the text column content while image column stays full-height */
.about-page .masthead.-type-3 .col-xl-7.col-lg-11.relative {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* Remove extra paddings so centering is exact */
.about-page .masthead.-type-3 .masthead__content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Give text content breathing room now that section paddings are removed */
.about-page .masthead.-type-3 .masthead__content {
	padding-top: 60px !important;
	padding-bottom: 40px !important;
}

/* Make the image fill the full height of the hero column */
.about-page .masthead.-type-3 .masthead-image,
.about-page .masthead.-type-3 .masthead-image__img1 {
	height: 100% !important;
}
.about-page .masthead.-type-3 .masthead-image__img1 img {
	height: 100% !important;
	width: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	/* remove previous decorative padding/radius/offset so it can touch edges */
	padding: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
	max-height: none !important;
}

/* Normalize section paddings across about page */
.about-page section[class*="layout-pt-"] {
	padding-top: 64px !important;
}
.about-page section[class*="layout-pb-"] {
	padding-bottom: 64px !important;
}
.about-page .bg-light-3,
.about-page .bg-dark-5,
.about-page .border-top-light,
.about-page .border-bottom-light {
	/* ensure consistent vertical rhythm even when utilities stack */
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}

/* Section titles spacing */
.about-page .sectionTitle__title {
	margin-bottom: 8px !important;
}
.about-page .sectionTitle__text {
	margin-top: 8px !important;
}

/* Grid spacing overrides (cards/rows) */
.about-page .row.y-gap-30 > [class*="col-"] {
	margin-top: 60px !important;
}
.about-page .row.y-gap-30 {
	row-gap: 28px !important;
}
.about-page .row.y-gap-50 {
	row-gap: 36px !important;
}
.about-page .row.y-gap-20 {
	row-gap: 20px !important;
}
.about-page .row.y-gap-15 {
	row-gap: 16px !important;
}

/* Cards breathing room */
.about-page .coursesCard.-type-1 .h-100 {
	padding-left: 24px !important;
	padding-right: 28px !important;
}
.about-page .coursesCard.-type-1 .coursesCard__image {
	max-height: 200px !important;
}
.about-page .coursesCard.-type-3 .coursesCard__content {
	margin-top: 20px !important;
}

/* Category cards tighter */
.about-page .categoryCard.-type-3 .categoryCard__title {
	margin-bottom: 6px !important;
}
.about-page .categoryCard.-type-3 .categoryCard__icon {
	margin-right: 16px !important;
}

/* Counters spacing */
.about-page .counter.-type-1 .counter__number {
	margin-bottom: 4px !important;
}

/* CTA blocks */
.about-page .d-inline-block.mt-60 {
	margin-top: 32px !important;
}
.about-page .pt-60 {
	padding-top: 40px !important;
}
.about-page .lg\:pt-50 {
	padding-top: 36px !important;
}

/* Video/centres preview cards */
.about-page .coursesCard.-type-1 .coursesCard__image_overlay {
	opacity: 0.08 !important;
}
.about-page .coursesCard.-type-1 .text-17 {
	margin-top: 8px !important;
}

/* Testimonials paddings */
.about-page .testimonials.-type-3 {
	padding: 28px 22px !important;
}

/* Remove photos from testimonials (site-wide) */
.testimonials .testimonials__image,
.testimonials .col-md-auto {
	display: none !important;
}
.testimonials .col-md {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Move rating row to the bottom, keep text and name above */
.testimonials .col-md > .d-flex.items-center {
	order: 3 !important;
	margin-top: 15px !important;
}
.testimonials .col-md > .testimonials__text {
	order: 1 !important;
}
.testimonials .col-md > .mt-15 {
	order: 2 !important; /* name/role block */
}

/* Footer spacing inside about */
.about-page .footer-header {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}
.about-page .footer-footer {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

@media (max-width: 992px) {
	.about-page .masthead.-type-3 {
		min-height: 60vh !important;
	}
	.about-page .masthead.-type-3 .masthead__content {
		padding-top: 40px !important;
		padding-bottom: 28px !important;
	}
	.about-page section[class*="layout-pt-"] {
		padding-top: 48px !important;
	}
	.about-page section[class*="layout-pb-"] {
		padding-bottom: 48px !important;
	}
}

@media (max-width: 576px) {
	.about-page .masthead.-type-3 {
		min-height: 50vh !important;
	}
	.about-page section[class*="layout-pt-"] {
		padding-top: 40px !important;
	}
	.about-page section[class*="layout-pb-"] {
		padding-bottom: 40px !important;
	}
}

/* ========== Global alternating monochrome sections ========== */
/* Base variables and background for any top-level section under content wrapper */
.content-wrapper > section {
	/* defaults, will be overridden by nth-of-type below */
	--sec-bg: var(--mono-2);
	--sec-text: var(--bw-text);
	--sec-muted: var(--bw-muted);
	--sec-panel: #141414; /* slight lift for cards/panels */
	--sec-border: rgba(255, 255, 255, 0.06);

	background-color: var(--sec-bg) !important;
	color: var(--sec-text) !important;
}

/* 6-step alternating pattern for section backgrounds */
.content-wrapper > section:nth-of-type(6n + 1) {
	--sec-bg: var(--mono-0);
	--sec-panel: #101010;
	--sec-border: rgba(255, 255, 255, 0.08);
}
.content-wrapper > section:nth-of-type(6n + 2) {
	--sec-bg: var(--mono-2);
	--sec-panel: #1a1a1a;
	--sec-border: rgba(255, 255, 255, 0.07);
}
.content-wrapper > section:nth-of-type(6n + 3) {
	--sec-bg: var(--mono-3);
	--sec-panel: #202020;
	--sec-border: rgba(255, 255, 255, 0.07);
}
.content-wrapper > section:nth-of-type(6n + 4) {
	--sec-bg: var(--mono-4);
	--sec-panel: #242424;
	--sec-border: rgba(255, 255, 255, 0.06);
}
.content-wrapper > section:nth-of-type(6n + 5) {
	--sec-bg: var(--mono-5);
	--sec-panel: #2a2a2a;
	--sec-border: rgba(255, 255, 255, 0.06);
}
.content-wrapper > section:nth-of-type(6n) {
	/* 6th item */
	--sec-bg: var(--mono-1);
	--sec-panel: #121212;
	--sec-border: rgba(255, 255, 255, 0.07);
}

/* Inner elements adapt to section variables */
.content-wrapper > section * {
	color: var(--sec-text) !important;
	border-color: var(--sec-border) !important;
}

/* Cards/panels adopt the section panel color instead of a fixed bw-panel */
.content-wrapper > section .bg-white,
.content-wrapper > section .bg-light-1,
.content-wrapper > section .bg-light-2,
.content-wrapper > section .bg-light-3,
.content-wrapper > section .bg-light-4,
.content-wrapper > section .bg-light-5,
.content-wrapper > section .bg-light-6,
.content-wrapper > section .bg-light-7,
.content-wrapper > section .bg-light-8,
.content-wrapper > section .bg-light-9,
.content-wrapper > section .bg-light-10,
.content-wrapper > section .bg-light-11,
.content-wrapper > section .bg-light-12,
.content-wrapper > section .bg-dark-1,
.content-wrapper > section .bg-dark-2,
.content-wrapper > section .bg-dark-3,
.content-wrapper > section .bg-dark-4,
.content-wrapper > section .bg-dark-5 {
	background-color: var(--sec-panel) !important;
}

/* Common components: cards, testimonials, category tiles */
.content-wrapper > section .coursesCard,
.content-wrapper > section .categoryCard,
.content-wrapper > section .testimonials,
.content-wrapper > section .featureCard,
.content-wrapper > section .blogCard,
.content-wrapper > section .teamCard,
.content-wrapper > section .pricingCard {
	background-color: var(--sec-panel) !important;
}

/* Forms inside sections */
.content-wrapper > section input,
.content-wrapper > section textarea,
.content-wrapper > section select {
	background-color: var(--sec-panel) !important;
	color: var(--sec-text) !important;
	border-color: var(--sec-border) !important;
}

/* Buttons: keep transparent but ensure borders/readability on dark */
.content-wrapper > section .button,
.content-wrapper > section button {
	background-color: transparent !important;
	color: var(--sec-text) !important;
	border-color: var(--sec-border) !important;
}

/* Subtle dividers respect section border tone */
.content-wrapper > section .border-top-light,
.content-wrapper > section .border-bottom-light,
.content-wrapper > section .border-left-light,
.content-wrapper > section .border-right-light,
.content-wrapper > section .border-light {
	border-color: var(--sec-border) !important;
}

/* ===== Auth pages (Login/Signup) 50/50 layout with full-height image ===== */
/* Shared base for both pages */
.login-page .form-page {
	display: flex !important;
	min-height: calc(100vh - 80px) !important; /* header height approx */
	margin: 0 !important; /* avoid being hidden under header */
}
.signup-page .form-page {
	display: flex !important;
	min-height: calc(100vh - 80px) !important; /* header height approx */
	margin: 90px 0 100px 0 !important; /* avoid being hidden under header */
}
.login-page .form-page__img,
.login-page .form-page__content,
.signup-page .form-page__img,
.signup-page .form-page__content {
	flex: 0 0 50% !important;
	max-width: 50% !important;
}
/* Left side: requested image fills area */
.signup-page .form-page__img {
	position: relative !important;
	background-image: url("../img/fadl/20240802-565A9664.jpg") !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	min-height: 160% !important;
}
.login-page .form-page__img {
	position: relative !important;
	background-image: url("../img/fadl/20240802-565A9664.jpg") !important;
	background-size: cover !important;
	background-position: center 30% !important;
	background-repeat: no-repeat !important;
	min-height: 100% !important;
}
/* Remove decorative composition layers on auth pages */
.login-page .form-page__img .form-page-composition,
.signup-page .form-page__img .form-page-composition {
	display: none !important;
}

/* Right side content: center vertically */
.login-page .form-page__content,
.signup-page .form-page__content {
	display: flex !important;
	align-items: center !important;
	background: var(--bw-bg) !important;
}
.login-page .form-page__content .container,
.signup-page .form-page__content .container {
	max-width: 100% !important;
}
.login-page .form-page__content .row.justify-center,
.signup-page .form-page__content .row.justify-center {
	justify-content: flex-start !important;
}
/* Make the inner grid column use full width of the right half */
.login-page .form-page__content [class^="col-"],
.login-page .form-page__content [class*=" col-"],
.signup-page .form-page__content [class^="col-"],
.signup-page .form-page__content [class*=" col-"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
/* Stretch the card and form controls to fill available width */
.login-page .form-page__content .shadow-1.rounded-16,
.signup-page .form-page__content .shadow-1.rounded-16 {
	width: 100% !important;
}
.login-page .form-page__content input,
.login-page .form-page__content select,
.login-page .form-page__content textarea,
.login-page .form-page__content button,
.signup-page .form-page__content input,
.signup-page .form-page__content select,
.signup-page .form-page__content textarea,
.signup-page .form-page__content button {
	width: 100% !important;
}
.login-page .form-page__content .bg-white,
.signup-page .form-page__content .bg-white {
	background: var(--bw-panel) !important;
}
.login-page .form-page__content h3,
.login-page .form-page__content p,
.login-page .form-page__content label,
.signup-page .form-page__content h3,
.signup-page .form-page__content p,
.signup-page .form-page__content label {
	color: var(--bw-text) !important;
}
.login-page .form-page__content a,
.signup-page .form-page__content a {
	color: var(--bw-text) !important;
	text-decoration: underline !important;
}

/* Mobile: stack with image on top */
@media (max-width: 992px) {
	.login-page .form-page,
	.signup-page .form-page {
		flex-direction: column !important;
		margin-top: 0 !important; /* keep image flush under header */
	}
	.login-page .form-page__img,
	.login-page .form-page__content,
	.signup-page .form-page__img,
	.signup-page .form-page__content {
		flex: 0 0 auto !important;
		max-width: 100% !important;
	}
	/* Mobile image override when stacked */
	.login-page .form-page__img,
	.signup-page .form-page__img {
		height: 40vh !important;
		background-image: url("../img/fadl/20240802-565A9842.jpg") !important;
		background-position: center 20% !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}

/* Example: page-specific tweaks (feel free to adjust independently) */
.login-page .form-page__content {
	margin-top: 80px !important;
}
.signup-page .form-page__content {
	margin-top: 80px !important;
}

/* Hero Video Background Styles - About Page */
.hero-video-background {
	position: absolute;
	top: 70px;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

.hero-video {
	position: absolute;
	top: 40%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 1;
}

.hero-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 2;
	pointer-events: none;
}

.masthead {
	position: relative;
	min-height: 100vh;
	height: 100vh;
	display: flex;
	align-items: center;
	padding: 0;
}

.masthead .container {
	z-index: 10;
	position: relative;
}

.masthead__title {
	font-size: 4rem;
	line-height: 1.2;
	margin-bottom: 2rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.masthead__text {
	font-size: 1.25rem;
	line-height: 1.6;
	max-width: 800px;
	margin: 0 auto;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.masthead-stats {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.masthead-stat {
	text-align: center;
	min-width: 150px;
}

.masthead-stat .text-32 {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.masthead-stat .text-16 {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Ensure overlay is visible */
.hero-video-background::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 3;
	pointer-events: none;
}

/* Mobile optimizations */
@media (max-width: 768px) {
	.masthead {
		min-height: 100vh;
		height: 100vh;
		padding: 0;
	}

	.hero-video-overlay {
		background: rgba(0, 0, 0, 0.7);
	}

	.masthead__title {
		font-size: 2.5rem;
	}

	.masthead__text {
		font-size: 1.1rem;
	}

	.masthead-stats {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
	}

	.masthead-stat {
		margin: 0 !important;
	}
}

@media (max-width: 480px) {
	.hero-video-overlay {
		background: rgba(0, 0, 0, 0.75);
	}

	.masthead__title {
		font-size: 2rem;
	}

	.masthead__text {
		font-size: 1rem;
	}
}

/* Ensure video is hidden if not supported */
@media (prefers-reduced-motion: reduce) {
	.hero-video {
		display: none;
	}

	.hero-video-background {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
}

/* ===== COURSES PAGE VIDEO MODAL AND CARDS STYLING ===== */

/* Arabic font support */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap");

/* Video Modal Styling */
.video-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	backdrop-filter: blur(5px);
}

.video-modal.active {
	opacity: 1;
}

.video-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.video-modal__content {
	position: relative;
	width: 90%;
	max-width: 1200px;
	height: 80%;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	transform: scale(0.8);
	transition: transform 0.3s ease;
}

.video-modal.active .video-modal__content {
	transform: scale(1);
}

.video-modal__header {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 10;
}

.video-modal__close {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-modal__close:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.1);
}

.video-modal__close i {
	color: #333;
	font-size: 16px;
}

.video-modal__body {
	width: 100%;
	height: 100%;
}

.video-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Course Card Styling */
.course-card {
	position: relative;
	transition: all 0.3s ease;
	border: 1px solid rgba(0, 0, 0, 0.06);
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
}

.course-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
	border-color: #10b981;
}

.course-card__image {
	position: relative;
	height: 240px;
	overflow: hidden;
}

.course-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s ease;
}

.course-card:hover .course-card__image img {
	transform: scale(1.05);
}

.course-card__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
	pointer-events: none;
}

.course-card:hover .course-card__overlay {
	opacity: 1;
	pointer-events: all;
}

.play-button {
	width: 70px;
	height: 70px;
	background: rgba(255, 0, 0, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	border: 3px solid rgba(255, 255, 255, 0.3);
	pointer-events: all;
	z-index: 10;
	position: relative;
	overflow: hidden;
}

.play-button:hover {
	transform: scale(1.1);
	background: rgba(255, 0, 0, 1);
	border-color: rgba(255, 255, 255, 0.8);
}

.play-button i {
	color: white;
	font-size: 24px;
	margin-left: 3px;
}

.play-button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease;
}

.play-button:hover::before {
	width: 100%;
	height: 100%;
}

.course-duration {
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 2;
}

.course-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: #ffffff;
}

.course-category {
	margin-bottom: 15px;
}

.course-category .badge {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 8px 15px;
	border-radius: 6px;
	font-size: 13px;
	display: inline-block;
	font-family: "Cairo", sans-serif;
}

.course-title {
	line-height: 1.4;
	color: #1a1a1a;
	margin-bottom: 15px;
	text-align: right;
	font-family: "Cairo", sans-serif;
	font-size: 20px;
	font-weight: 600;
}

.course-description {
	line-height: 1.6;
	color: #666666;
	flex: 1;
	text-align: right;
	font-family: "Cairo", sans-serif;
	font-size: 15px;
	margin-bottom: 20px;
}

.course-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.free-badge {
	display: flex;
	align-items: center;
}

.free-badge span {
	font-size: 18px;
	font-weight: 700;
	color: #10b981;
}

.course-card .button {
	border-radius: 8px;
	font-weight: 600;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
	padding: 12px 25px;
	font-size: 14px;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

.course-card .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Color variants for buttons */
.button.-purple-1 {
	background: #6366f1;
	color: #ffffff;
}

.button.-blue-1 {
	background: #3b82f6;
	color: #ffffff;
}

.button.-green-1 {
	background: #10b981;
	color: #ffffff;
}

.button.-orange-1 {
	background: #f59e0b;
	color: #ffffff;
}

.button.-red-1 {
	background: #ef4444;
	color: #ffffff;
}

.button.-yellow-1 {
	background: #eab308;
	color: #1a1a1a;
}

/* Color variants for text */
.text-purple-1 {
	color: #6366f1;
}
.text-blue-1 {
	color: #3b82f6;
}
.text-green-1 {
	color: #10b981;
}
.text-orange-1 {
	color: #f59e0b;
}
.text-red-1 {
	color: #ef4444;
}
.text-yellow-1 {
	color: #eab308;
}

/* Badge background colors */
.bg-purple-1 {
	background-color: #6366f1;
}
.bg-blue-1 {
	background-color: #3b82f6;
}
.bg-green-1 {
	background-color: #10b981;
}
.bg-orange-1 {
	background-color: #f59e0b;
}
.bg-red-1 {
	background-color: #ef4444;
}
.bg-yellow-1 {
	background-color: #eab308;
}

/* Free badge styling */
.course-duration span {
	background: linear-gradient(135deg, #10b981, #34d399);
	color: white;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Video thumbnail hover effect */
.course-card__image::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		45deg,
		rgba(255, 0, 0, 0.1),
		rgba(255, 0, 0, 0.05)
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.course-card:hover .course-card__image::before {
	opacity: 1;
}

/* Animation for cards appearing */
.course-card {
	animation: fadeInUp 0.6s ease forwards;
}

.course-card:nth-child(2) {
	animation-delay: 0.1s;
}
.course-card:nth-child(3) {
	animation-delay: 0.2s;
}
.course-card:nth-child(4) {
	animation-delay: 0.3s;
}
.course-card:nth-child(5) {
	animation-delay: 0.4s;
}
.course-card:nth-child(6) {
	animation-delay: 0.5s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Loading state */
.course-card.loading {
	opacity: 0.7;
	pointer-events: none;
}

.course-card.loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #6366f1;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	z-index: 10;
}

@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Improved shadow for better depth */
.shadow-4 {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Enhanced section title */
.sectionTitle__title {
	background: linear-gradient(135deg, #6366f1, #8b5cf6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Prevent body scroll when modal is open */
body.modal-open {
	overflow: hidden;
}

/* Responsive adjustments for courses */
@media (max-width: 992px) {
	.course-card__image {
		height: 200px;
	}

	.video-modal__content {
		width: 95%;
		height: 70%;
	}
}

@media (max-width: 768px) {
	.course-card {
		margin-bottom: 30px;
	}

	.course-card__image {
		height: 180px;
	}

	.course-card__content {
		padding: 25px 20px;
	}

	.play-button {
		width: 60px;
		height: 60px;
	}

	.play-button i {
		font-size: 20px;
	}

	.course-title {
		font-size: 18px;
	}

	.video-modal__content {
		width: 95%;
		height: 60%;
	}
}

@media (max-width: 576px) {
	.course-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.course-footer .button {
		width: 100%;
		text-align: center;
	}

	.video-modal__content {
		width: 98%;
		height: 50%;
	}

	.play-button {
		width: 50px;
		height: 50px;
	}

	.play-button i {
		font-size: 18px;
	}
}

/* ===== CENTRE CARDS STYLING ===== */

/* Centre card styling for about page */
.centre-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #f1f1f1;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.centre-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.centre-card__image {
	position: relative;
	height: 200px;
	overflow: hidden;
}

.centre-card__image img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.centre-card:hover .centre-card__image img {
	transform: scale(1.05);
}

.centre-card__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.centre-card:hover .centre-card__overlay {
	opacity: 1;
}

/* Ensure consistent card heights */
.centre-card .p-40 {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Responsive adjustments for centre cards */
@media (max-width: 768px) {
	.centre-card__image {
		height: 180px;
	}

	.centre-card .p-40 {
		padding: 30px !important;
	}
}

@media (max-width: 576px) {
	.centre-card__image {
		height: 160px;
	}

	.centre-card .p-40 {
		padding: 25px !important;
	}
}

/* ===== LEARNING FEATURE CARDS STYLING ===== */

/* Enhanced styling for "Start Learning with Mr. Fadl" section cards */
.coursesCard.-type-3 {
	position: relative;
	padding: 40px 30px;
	transition: all 0.4s ease;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: #ffffff;
	height: 100%;
	overflow: hidden;
}

.coursesCard.-type-3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(99, 102, 241, 0.03),
		rgba(168, 85, 247, 0.03)
	);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 1;
}

.coursesCard.-type-3:hover::before {
	opacity: 1;
}

.coursesCard.-type-3:hover {
	transform: translateY(-8px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
	border-color: rgba(99, 102, 241, 0.2);
}

/* Icon container styling */
.coursesCard.-type-3 .coursesCard__icon {
	position: relative;
	z-index: 2;
	width: 80px;
	height: 80px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	transition: all 0.4s ease;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.coursesCard.-type-3:hover .coursesCard__icon {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Icon image styling */
.coursesCard.-type-3 .coursesCard__icon img {
	width: 40px;
	height: 40px;
	transition: all 0.3s ease;
	filter: brightness(1.1);
}

.coursesCard.-type-3:hover .coursesCard__icon img {
	transform: scale(1.05);
}

/* Content styling */
.coursesCard.-type-3 .coursesCard__content {
	position: relative;
	z-index: 2;
}

.coursesCard.-type-3 .coursesCard__title {
	color: #1a1a1a;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 15px;
	transition: color 0.3s ease;
}

.coursesCard.-type-3:hover .coursesCard__title {
	color: #6366f1;
}

.coursesCard.-type-3 .coursesCard__text {
	color: #666666;
	line-height: 1.6;
	font-size: 15px;
	transition: color 0.3s ease;
}

.coursesCard.-type-3:hover .coursesCard__text {
	color: #555555;
}

/* Enhanced Expertise Cards */
.expertise-card {
	position: relative;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border-radius: 20px;
	padding: 40px 30px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.expertise-card__bg {
	position: absolute;
	top: 0;
	right: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	opacity: 0.1;
	transition: all 0.4s ease;
	transform: translate(40px, -40px);
}

.expertise-card--philosophy .expertise-card__bg {
	background: linear-gradient(135deg, #8b5cf6, #a855f7);
}

.expertise-card--psychology .expertise-card__bg {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.expertise-card:hover {
	transform: translateY(-12px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.expertise-card:hover .expertise-card__bg {
	transform: translate(20px, -20px) scale(1.2);
	opacity: 0.15;
}

.expertise-card__content {
	position: relative;
	z-index: 2;
}

.expertise-card__icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25px;
}

.expertise-card__icon {
	width: 70px;
	height: 70px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: white;
	position: relative;
	overflow: hidden;
}

.expertise-card--philosophy .expertise-card__icon {
	background: linear-gradient(135deg, #8b5cf6, #a855f7);
	box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.expertise-card--psychology .expertise-card__icon {
	background: linear-gradient(135deg, #3b82f6, #2563eb);
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.expertise-card__icon::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.expertise-card:hover .expertise-card__icon::before {
	opacity: 1;
}

.expertise-card__badge {
	background: linear-gradient(135deg, #f59e0b, #f97316);
	color: white;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.expertise-card__title {
	font-size: 24px;
	font-weight: 700;
	color: #1f2937;
	margin-bottom: 15px;
	line-height: 1.3;
}

.expertise-card__description {
	color: #6b7280;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 25px;
}

.expertise-card__features {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #374151;
	font-weight: 500;
}

.feature-item i {
	color: #10b981;
	font-size: 16px;
	flex-shrink: 0;
}

.expertise-card:hover .feature-item i {
	transform: scale(1.1);
	transition: transform 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.expertise-card {
		padding: 30px 25px;
	}

	.expertise-card__icon {
		width: 60px;
		height: 60px;
		font-size: 24px;
	}

	.expertise-card__title {
		font-size: 20px;
	}
}

/* Subject Cards Styling (keeping for other sections) */
.subjectCard {
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.subjectCard:hover {
	transform: translateY(-8px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.subjectCard__icon .size-80 {
	transition: all 0.3s ease;
}

.subjectCard:hover .subjectCard__icon .size-80 {
	transform: scale(1.1);
}

/* White background for all icons with black SVG icons */
.coursesCard.-type-3 .coursesCard__icon {
	background: #ffffff !important;
	border: 2px solid #f3f4f6;
}

.coursesCard.-type-3 .coursesCard__icon img {
	filter: brightness(0) saturate(100%);
}

/* Add subtle animation */
@keyframes floatUp {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-3px);
	}
}

.coursesCard.-type-3:hover {
	animation: floatUp 2s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.coursesCard.-type-3 {
		padding: 35px 25px;
		margin-bottom: 30px;
	}

	.coursesCard.-type-3 .coursesCard__icon {
		width: 70px;
		height: 70px;
	}

	.coursesCard.-type-3 .coursesCard__icon img {
		width: 35px;
		height: 35px;
	}
}

@media (max-width: 576px) {
	.coursesCard.-type-3 {
		padding: 30px 20px;
	}

	.coursesCard.-type-3 .coursesCard__title {
		font-size: 17px;
	}

	.coursesCard.-type-3 .coursesCard__text {
		font-size: 14px;
	}
}

/* Subjects Showcase Styles */
.subjects-showcase {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

.subject-panel {
	display: flex;
	align-items: center;
	margin-bottom: 60px;
	position: relative;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.05) 100%
	);
	border-radius: 20px;
	padding: 40px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.4s ease;
	overflow: hidden;
}

.subject-panel:last-child {
	margin-bottom: 0;
}

.subject-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(139, 69, 193, 0.1) 0%,
		rgba(139, 69, 193, 0.05) 100%
	);
	opacity: 0;
	transition: opacity 0.4s ease;
	border-radius: 20px;
}

.subject-panel:hover::before {
	opacity: 1;
}

.subject-panel:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(139, 69, 193, 0.2);
}

.subject-panel--left {
	flex-direction: row;
}

.subject-panel--right {
	flex-direction: row-reverse;
}

.subject-panel__content {
	flex: 1;
	z-index: 2;
	position: relative;
}

.subject-panel--left .subject-panel__content {
	padding-right: 60px;
}

.subject-panel__header {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
}
/* RTL: flip icon and meta order in desktop Arabic mode
[dir="rtl"] .subject-panel__header {
	flex-direction: row-reverse;
}
/* RTL: restore normal order for right panels */
/* [dir="rtl"] .subject-panel--right .subject-panel__header {
	flex-direction: row !important;
}
[dir="rtl"] .subject-panel__icon-container {
	margin-left: 20px !important;
	margin-right: 0 !important;
} */

.subject-panel__icon {
	width: 70px;
	height: 70px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	position: relative;
	overflow: hidden;
}

.philosophy-icon {
	background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%);
	color: white;
}

.psychology-icon {
	background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%);
	color: white;
}

.subject-panel__icon::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transition: left 0.6s ease;
}

.subject-panel:hover .subject-panel__icon::before {
	left: 100%;
}

.subject-panel__meta {
	flex: 1;
}

.subject-panel__category {
	display: inline-block;
	background: rgba(139, 69, 193, 0.2);
	color: #8b45c1;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.subject-panel__title {
	color: white;
	font-size: 28px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.subject-panel__body {
	margin-top: 20px;
}

.subject-panel__description {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 30px;
}

.subject-panel__stats {
	display: flex;
	flex-direction: row;
	gap: 40px;
}

.stat-item {
	text-align: center;
}

.stat-number {
	display: block;
	color: #8b45c1;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.stat-label {
	display: block;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-weight: 500;
	margin-top: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.subject-panel__visual {
	width: 200px;
	height: 200px;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.visual-element {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}

.philosophy-visual {
	background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 50%, #ffab40 100%);
	position: relative;
}

.psychology-visual {
	background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 50%, #1e88e5 100%);
	position: relative;
}

.visual-element::before {
	content: "";
	position: absolute;
	top: 20%;
	left: 20%;
	right: 20%;
	bottom: 20%;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	animation: pulse 3s ease-in-out infinite;
}

.visual-element::after {
	content: "";
	position: absolute;
	top: 35%;
	left: 35%;
	right: 35%;
	bottom: 35%;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	animation: pulse 3s ease-in-out infinite 1.5s;
}

@keyframes pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.7;
	}
	50% {
		transform: scale(1.1);
		opacity: 1;
	}
}

/* Responsive Design */
@media (max-width: 991px) {
	.subject-panel {
		flex-direction: column !important;
		text-align: center;
		padding: 30px;
	}

	.subject-panel--left .subject-panel__content,
	.subject-panel--right .subject-panel__content {
		padding: 0;
	}

	.subject-panel__visual {
		width: 150px;
		height: 150px;
		margin-bottom: 30px;
	}

	.subject-panel__header {
		justify-content: center;
		flex-direction: column;
	}

	.subject-panel__icon-container {
		margin-right: 0;
		margin-bottom: 15px;
	}

	.subject-panel__stats {
		justify-content: center;
		gap: 30px;
	}
}

@media (max-width: 575px) {
	.subjects-showcase {
		padding: 0 15px;
	}

	.subject-panel {
		padding: 25px 20px;
		margin-bottom: 40px;
	}

	.subject-panel__title {
		font-size: 24px;
	}

	.subject-panel__visual {
		width: 120px;
		height: 120px;
	}

	.subject-panel__icon {
		width: 60px;
		height: 60px;
		font-size: 24px;
	}

	.subject-panel__stats {
		gap: 20px;
	}

	.stat-number {
		font-size: 20px;
	}
}

/* Language Switcher Styles */
.language-switcher {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 12px;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.language-switcher:hover {
	background: rgba(139, 69, 193, 0.1);
	color: #8b45c1 !important;
}

.language-switcher .lang-text {
	margin-left: 8px;
}

[dir="rtl"] .language-switcher .lang-text {
	margin-left: 0;
	margin-right: 8px;
}

/* RTL Styles - Modified to affect only text content */
[dir="rtl"] {
	text-align: right;
}

/* Text-only RTL adjustments */
[dir="rtl"] .menu__nav a,
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] span:not(.brand-logo__letter),
[dir="rtl"] div > span:not(.brand-logo__letter),
[dir="rtl"] li,
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] .text-content {
	text-align: right;
	float: inline-start;
}

/* Text alignment for buttons and content */
[dir="rtl"] .header-right__buttons .button span,
[dir="rtl"] .masthead__content p,
[dir="rtl"] .masthead__content h1,
[dir="rtl"] .masthead__content h2,
[dir="rtl"] .masthead__content h3,
[dir="rtl"] .masthead__content div,
[dir="rtl"] .subject-panel--left .subject-panel__text,
[dir="rtl"] .subject-panel--right .subject-panel__text,
[dir="rtl"] .subject-panel--left .subject-panel__title,
[dir="rtl"] .subject-panel--right .subject-panel__title {
	text-align: right;
}

[dir="rtl"] .subject-panel--left .subject-panel__content {
	padding-right: 0;
	padding-left: 60px;
}

[dir="rtl"] .subject-panel--right .subject-panel__content {
	padding-left: 0;
}

[dir="rtl"] .subject-panel__icon-container {
	margin-right: 0;
	margin-left: 20px;
}

/* Arabic Font Support */
.lang-ar {
	font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	text-align: right;
}

.lang-ar .masthead__title {
	font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 700;
}

.lang-ar .sectionTitle__title {
	font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 600;
}

.lang-ar .subject-panel__title {
	font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 700;
}

/* Language-specific spacing adjustments */
.lang-ar .header-right__buttons .button:first-child {
	margin-right: 0;
}

/* General Arabic text alignment - Modified to affect only text content */
[lang="ar"],
.arabic-text {
	text-align: right;
	font-family: "Cairo", sans-serif;
}

/* Apply RTL direction only to text content, not layout */
[lang="ar"]
	*:not(svg):not(img):not(canvas):not(video):not(iframe):not(object):not(
		button
	):not(input[type="button"]):not(input[type="submit"]):not(
		input[type="reset"]
	),
.arabic-text
	*:not(svg):not(img):not(canvas):not(video):not(iframe):not(object):not(
		button
	):not(input[type="button"]):not(input[type="submit"]):not(
		input[type="reset"]
	) {
	text-align: right;
	unicode-bidi: embed;
}

/* Exclude slider navigation arrows from RTL changes */
.slider-nav-arrow,
.slick-arrow,
.swiper-button-next,
.swiper-button-prev,
.carousel-control,
.owl-nav,
.owl-prev,
.owl-next,
[class*="slider-arrow"],
[class*="slider-nav"],
[class*="slider-btn"],
[class*="carousel-arrow"],
[class*="carousel-nav"],
[class*="-slider-prev"],
[class*="-slider-next"],
.slider-navigation button,
.carousel-navigation button,
.nav-arrow {
	direction: ltr !important;
	transform: none !important;
}

.lang-ar .header-right__buttons .button:last-child {
	margin-left: 0;
	margin-right: 20px;
}

/* Mobile RTL adjustments */
@media (max-width: 991px) {
	[dir="rtl"] .masthead__content {
		padding-left: 0;
	}

	[dir="rtl"] .subject-panel {
		text-align: center;
	}

	[dir="rtl"] .subject-panel__header {
		flex-direction: column;
	}

	[dir="rtl"] .subject-panel__icon-container {
		margin-left: 0;
		margin-bottom: 15px;
	}
}

/* Additional RTL fixes for better layout */
[dir="rtl"] .pl-30 {
	padding-left: 0 !important;
	padding-right: 30px !important;
}

[dir="rtl"] .xl\:pl-20 {
	padding-left: 0 !important;
	padding-right: 20px !important;
}

[dir="rtl"] .ml-30 {
	margin-left: 0 !important;
	margin-right: 30px !important;
}

[dir="rtl"] .ml-20 {
	margin-left: 0 !important;
	margin-right: 20px !important;
}

[dir="rtl"] .mr-8 {
	margin-right: 0 !important;
	margin-left: 8px !important;
}

[dir="rtl"] .mr-10 {
	margin-right: 0 !important;
	margin-left: 10px !important;
}

[dir="rtl"] .mr-20 {
	margin-right: 0 !important;
	margin-left: 20px !important;
}

[dir="rtl"] .mr-30 {
	margin-right: 0 !important;
	margin-left: 30px !important;
}

[dir="rtl"] .px-20 {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* Keep language switcher and logo text in standard alignment */
[dir="rtl"] .language-switcher .icon {
	text-align: center;
}

[dir="rtl"] .language-switcher button {
	text-align: center;
}

/* No special text alignment needed for logo images */

/* Text alignment in the header based on language direction */
[dir="rtl"] .header__container .row .header-logo span,
[dir="rtl"] .header__container .row .text-content,
[dir="rtl"] .header__container .row h1,
[dir="rtl"] .header__container .row h2,
[dir="rtl"] .header__container .row h3,
[dir="rtl"] .header__container .row p {
	text-align: right;
}

/* Text alignment for header elements */
[dir="rtl"] .header-left .text-content,
[dir="rtl"] .header-left span,
[dir="rtl"] .header-left p,
[dir="rtl"] .header-left h1,
[dir="rtl"] .header-left h2,
[dir="rtl"] .header-left h3 {
	text-align: right;
}

/* Ensure stats keep vertical layout in RTL mode */
[dir="rtl"] .masthead-stats,
.lang-ar .masthead-stats {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

[dir="rtl"] .subject-panel__stats,
.lang-ar .subject-panel__stats {
	display: flex;
	flex-direction: row;
	gap: 40px;
}

/* Text alignment for header right elements */
[dir="rtl"] .header-right .text-content,
[dir="rtl"] .header-right span,
[dir="rtl"] .header-right p,
[dir="rtl"] .header-right h1,
[dir="rtl"] .header-right h2,
[dir="rtl"] .header-right h3 {
	text-align: right;
}

/* Text alignment for menu items */
[dir="rtl"] .header-menu a,
[dir="rtl"] .header-menu span {
	text-align: right;
}

/* Text alignment for language switcher */
[dir="rtl"] .language-switcher span,
[dir="rtl"] .language-switcher .lang-text {
	text-align: right;
}

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

[dir="rtl"] .contact-form input:not([type="email"]),
[dir="rtl"] .contact-form textarea,
[dir="rtl"] .contact-form select {
	text-align: right;
}

[dir="rtl"] .contact-form input[type="email"] {
	text-align: left;
}

/* Text alignment for header elements */
[dir="rtl"] .header__container .header-menu a,
[dir="rtl"] .header__container .header-menu span,
[dir="rtl"] .header-right .text-content,
[dir="rtl"] .header-right .button span,
[dir="rtl"] .header-right__icons span {
	text-align: right;
}

@media (max-width: 575px) {
	.language-switcher .lang-text {
		display: none;
	}

	.language-switcher {
		padding: 8px;
	}
}

/* RTL/LTR Text Alignment Control for Login and Signup pages */
/* Maintain form layout while allowing text alignment changes */

/* Text alignment for form elements */
[dir="rtl"] .login-page .form-page__content p,
[dir="rtl"] .login-page .form-page__content h1,
[dir="rtl"] .login-page .form-page__content h2,
[dir="rtl"] .login-page .form-page__content h3,
[dir="rtl"] .login-page .form-page__content label,
[dir="rtl"] .signup-page .form-page__content p,
[dir="rtl"] .signup-page .form-page__content h1,
[dir="rtl"] .signup-page .form-page__content h2,
[dir="rtl"] .signup-page .form-page__content h3,
[dir="rtl"] .signup-page .form-page__content label {
	text-align: right;
}

/* Form elements RTL styling - text alignment only */
[dir="rtl"] .login-page .form-page__content input[type="text"],
[dir="rtl"] .login-page .form-page__content input[type="password"],
[dir="rtl"] .login-page .form-page__content input[type="email"],
[dir="rtl"] .login-page .form-page__content textarea,
[dir="rtl"] .signup-page .form-page__content input[type="text"],
[dir="rtl"] .signup-page .form-page__content input[type="password"],
[dir="rtl"] .signup-page .form-page__content input[type="email"],
[dir="rtl"] .signup-page .form-page__content textarea {
	text-align: right;
}
[dir="rtl"] .form-page__content input:not([type="email"]),
[dir="rtl"] .form-page__content textarea,
[dir="rtl"] .form-page__content select {
	text-align: right !important;
	direction: rtl !important;
}

/* Keep email inputs with left text alignment for better UX */
[dir="rtl"] .form-page__content input[type="email"] {
	text-align: left !important;
}

/* Form labels and text RTL alignment - text only, no container direction */
[dir="rtl"] .form-page__content label {
	text-align: right !important;
}

[dir="rtl"] .form-page__content h3 {
	text-align: right !important;
}

[dir="rtl"] .form-page__content p:not(.text-center) {
	text-align: right !important;
}

/* Keep centered elements centered */
[dir="rtl"] .form-page__content .text-center {
	text-align: center !important;
}

/* Buttons stay centered */
[dir="rtl"] .form-page__content .button,
[dir="rtl"] .form-page__content button {
	text-align: center !important;
}

/* Links internal text alignment */
[dir="rtl"] .form-page__content a:not(.button) {
	text-align: right !important;
}

/* Checkbox internal alignment without moving container */
[dir="rtl"] .form-page__content .form-check {
	text-align: right !important;
}

[dir="rtl"] .form-page__content .form-check input[type="checkbox"] {
	margin-left: 8px !important;
	margin-right: 0 !important;
}

/* Input groups and form controls internal alignment */
[dir="rtl"] .form-page__content .form-control {
	text-align: right !important;
}

[dir="rtl"] .form-page__content .form-control:not([type="email"]) {
	direction: rtl !important;
}

/* Remove the image reflection since we want image area to stay constant */
/* Commented out the previous reflection rules */
/*
[dir="rtl"] .form-page-composition img {
  transform: scaleX(-1);
}

[dir="rtl"] .form-page-composition .-bg img,
[dir="rtl"] .form-page-composition .-el-1 img,
[dir="rtl"] .form-page-composition .-el-2 img,
[dir="rtl"] .form-page-composition .-el-3 img,
[dir="rtl"] .form-page-composition .-el-4 img {
  transform: scaleX(-1);
}

[dir="rtl"] .form-page-composition [data-move="30"].js-mouse-move {
  transform: scaleX(-1) !important;
}

[dir="rtl"] .form-page-composition [data-move="20"].js-mouse-move {
  transform: scaleX(-1) !important;
}

[dir="rtl"] .form-page-composition [data-move="40"].js-mouse-move {
  transform: scaleX(-1) !important;
}

[dir="rtl"] .form-page-composition img.js-mouse-move {
  transform: scaleX(-1) !important;
}
*/

/* Preserve slider arrow functionality in RTL mode */
[dir="rtl"] .slider-nav-arrow,
[dir="rtl"] .slick-arrow,
[dir="rtl"] .slick-prev,
[dir="rtl"] .slick-next,
[dir="rtl"] .swiper-button-next,
[dir="rtl"] .swiper-button-prev,
[dir="rtl"] .carousel-control,
[dir="rtl"] .carousel-control-prev,
[dir="rtl"] .carousel-control-next,
[dir="rtl"] .owl-nav,
[dir="rtl"] .owl-prev,
[dir="rtl"] .owl-next,
[dir="rtl"] [class*="slider-arrow"],
[dir="rtl"] [class*="slider-nav"],
[dir="rtl"] [class*="slider-btn"],
[dir="rtl"] [class*="carousel-arrow"],
[dir="rtl"] [class*="carousel-nav"],
[dir="rtl"] [class*="-slider-prev"],
[dir="rtl"] [class*="-slider-next"],
[dir="rtl"] .slider-navigation button,
[dir="rtl"] .carousel-navigation button,
[dir="rtl"] .nav-arrow {
	unicode-bidi: normal !important;
	text-align: center !important;
}

/* Preserve content hierarchy in RTL mode - enforce vertical layout for sections that should stack */
[lang="ar"] .section-content,
.lang-ar .section-content,
[lang="ar"] .content-block,
.lang-ar .content-block,
[lang="ar"] .masthead__content,
.lang-ar .masthead__content,
[lang="ar"] .sectionTitle,
.lang-ar .sectionTitle,
[lang="ar"] .subject-panel__content,
.lang-ar .subject-panel__content {
	display: flex;
	flex-direction: column;
}

/* ======================================
   Footer Centering Styles 
   ====================================== */
.footer-footer__copyright {
	text-align: center !important;
	width: 100% !important;
	font-size: 14px !important;
	padding: 15px 0 !important;
}

.footer-footer .row {
	justify-content: center !important;
	align-items: center !important;
}

.footer-footer .col-md-6 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* Hide the empty right column */
.footer-footer .col-auto {
	display: none !important;
}

/* Ensure responsive behavior */
@media (max-width: 767px) {
	.footer-footer__copyright {
		font-size: 12px !important;
		padding: 10px 15px !important;
	}
}

/* Add some space around footer */
.footer-footer {
	padding-bottom: 10px !important;
}

/* ======================================
   RTL Numbers Fix
   ====================================== */
/* Special rules for numbers in RTL mode */
[dir="rtl"] .stat-number,
[dir="rtl"] .counter__number,
[dir="rtl"] .rank-number,
.lang-ar .stat-number,
.lang-ar .counter__number,
.lang-ar .rank-number {
	direction: ltr; /* Force LTR direction for numbers */
	unicode-bidi: isolate; /* Isolate numbers from surrounding RTL text */
	display: inline-block; /* Ensure proper rendering */
}

/* Ensure counters keep proper layout */
[dir="rtl"] .counter,
.lang-ar .counter {
	text-align: right; /* Right-align the counter block */
}

[dir="rtl"] .counter__number,
.lang-ar .counter__number {
	text-align: center; /* Center the actual number */
}

/* ======================================
   Auth RTL Fix
   ====================================== */
/* Prevent image reflections that might be happening in RTL mode */
html[dir="rtl"] .form-page-composition img,
html[dir="ltr"] .form-page-composition img,
.form-page-composition img {
	transform: none !important;
}

/* Ensure image backgrounds and positioning remain consistent in RTL */
html[dir="rtl"] .form-page__img-container,
html[dir="ltr"] .form-page__img-container,
.form-page__img-container {
	transform: none !important;
	left: 0 !important;
	right: auto !important;
}

/* Remove any RTL transforms on the image elements */
html[dir="rtl"] .form-page-composition [data-move].js-mouse-move,
html[dir="ltr"] .form-page-composition [data-move].js-mouse-move,
.form-page-composition [data-move].js-mouse-move {
	transform: none !important;
}

/* FORM CONTENT ALIGNMENT - Different for each language */
/* Arabic RTL: Form content aligned to the right */
html[dir="rtl"] .form-page__content {
	text-align: right !important;
	direction: rtl !important;
}

/* English LTR: Form content aligned to the left */
html[dir="ltr"] .form-page__content {
	text-align: left !important;
	direction: ltr !important;
}

/* Ensure the overall form-page layout doesn't flip in RTL mode */
html[dir="rtl"] .form-page,
html[dir="ltr"] .form-page,
.form-page {
	display: flex !important;
	flex-direction: row !important; /* Force left-to-right layout always */
	direction: ltr !important; /* Force container to be LTR */
}

/* Keep the image ALWAYS on the left side */
html[dir="rtl"] .form-page__img,
html[dir="ltr"] .form-page__img,
.form-page__img {
	order: 1 !important; /* Force to be first element */
	flex: 0 0 50% !important; /* Fixed width */
	position: relative !important;
	left: 0 !important;
	right: auto !important;
}

/* Keep the form content ALWAYS on the right side */
html[dir="rtl"] .form-page__content,
html[dir="ltr"] .form-page__content,
.form-page__content {
	order: 2 !important; /* Force to be second element */
	flex: 0 0 50% !important; /* Fixed width */
	padding-left: 0 !important;
	padding-right: 30px !important;
}

/* FORM ELEMENTS ALIGNMENT FOR EACH LANGUAGE */
/* Arabic RTL: Form elements aligned to the right */
html[dir="rtl"] .form-page__content form input,
html[dir="rtl"] .form-page__content form textarea,
html[dir="rtl"] .form-page__content form label,
html[dir="rtl"] .form-page__content form .text-input,
html[dir="rtl"] .form-page__content form p,
html[dir="rtl"] .form-page__content form h3,
html[dir="rtl"] .form-page__content form span {
	text-align: right !important;
	direction: rtl !important;
}

/* English LTR: Form elements aligned to the left */
html[dir="ltr"] .form-page__content form input,
html[dir="ltr"] .form-page__content form textarea,
html[dir="ltr"] .form-page__content form label,
html[dir="ltr"] .form-page__content form .text-input,
html[dir="ltr"] .form-page__content form p,
html[dir="ltr"] .form-page__content form h3,
html[dir="ltr"] .form-page__content form span {
	text-align: left !important;
	direction: ltr !important;
}

/* PLACEHOLDER TEXT ALIGNMENT */
/* Arabic RTL placeholders */
html[dir="rtl"] .form-page__content form input::placeholder {
	text-align: right !important;
	direction: rtl !important;
}

/* English LTR placeholders */
html[dir="ltr"] .form-page__content form input::placeholder {
	text-align: left !important;
	direction: ltr !important;
}

/* RESPONSIVE DESIGN - IMAGE ALWAYS STAYS ON TOP IN MOBILE */
@media (max-width: 991px) {
	/* Force vertical layout on mobile/tablet */
	html[dir="rtl"] .form-page,
	html[dir="ltr"] .form-page,
	.form-page {
		flex-direction: column !important;
		direction: ltr !important; /* Keep container LTR */
	}

	/* Image always on top */
	html[dir="rtl"] .form-page__img,
	html[dir="ltr"] .form-page__img,
	.form-page__img {
		order: 1 !important;
		flex: 0 0 auto !important;
	}

	/* Form content always below image */
	html[dir="rtl"] .form-page__content,
	html[dir="ltr"] .form-page__content,
	.form-page__content {
		order: 2 !important;
		flex: 0 0 auto !important;
		padding-right: 15px !important;
		padding-left: 15px !important;
	}

	/* Arabic: Keep form content RTL on mobile */
	html[dir="rtl"] .form-page__content {
		direction: rtl !important;
		text-align: right !important;
	}

	/* English: Keep form content LTR on mobile */
	html[dir="ltr"] .form-page__content {
		direction: ltr !important;
		text-align: left !important;
	}

	/* Fix button alignment on mobile */
	html[dir="rtl"] .button,
	html[dir="ltr"] .button,
	.button {
		width: 100% !important;
		text-align: center !important;
	}
}