/* ==========================================================================
   Site-wide theme layer
   Brings every page onto the same design language introduced by the
   UAE Residency / UAE Internship / Portfolio Building pages:
   deep green + gold accent + cream, Playfair Display for headings,
   DM Sans for body copy. Loaded after style.css/common.css/responsive.css
   so these rules win the cascade for shared selectors.
   ========================================================================== */

:root {
	--green-deep: #1a3d2b;
	--green-mid: #2d6a4f;
	--green-bright: #40916c;
	--green-light: #74c69d;
	--green-pale: #d8f3dc;
	--gold: #c9a84c;
	--gold-light: #e8d5a3;
	--cream: #faf7f2;
	--cream-dark: #f0ebe0;
	--text-dark: #1a1a1a;
	--text-mid: #3d3d3d;
	--text-light: #777;
	--border: rgba(26, 61, 43, .12);
}

/* Dark, text-on-light section headings across the site -> Playfair Display */
.better-education h2,
.contact-left h2,
.details-heading h2,
.heading h2,
.our-enquiry h2,
.right-side h2,
.study-program-right h2,
.subscription-process h2,
.title,
.instrator-name,
.program-head,
.rightB h2,
.container-right h2,
.top-left h2,
.page-heading h2,
.heads-faq h2 {
	font-family: "Playfair Display", serif !important;
	font-weight: 800;
	color: var(--green-deep);
}

/* .cardA / .mission-cards / EMREE page headings all moved to dark-green
   backgrounds — keep Playfair Display but with light text so headings
   stay visible on the dark bg. */
.cardA h3,
.mission-cards h4,
.emree h1,
.emree-right h4,
.about-emree h2,
.register h2 {
	font-family: "Playfair Display", serif !important;
	font-weight: 800;
	color: #ffffff !important;
}

.cardA h3 {
	font-size: 24px !important;
}

.mission-cards h4 {
	font-size: 27px !important;
}

.emree-right h4,
.about-emree h2,
.register h2 {
	font-size: 27px !important;
}

/* Subtitle under the EMREE hero heading — italic Playfair, like the reference hero-subhead */
.emree h4 {
	font-family: "Playfair Display", serif !important;
	font-style: italic;
	font-weight: 400 !important;
	font-size: 21px !important;
	color: var(--gold-light) !important;
}

/* Light-text headings on dark backgrounds keep their color, just change typeface */
.bio-right h2,
.choose-emree-prep h3,
.study-programA-rightA h2 {
	font-family: "Playfair Display", serif !important;
	font-weight: 800;
}

.highlight-text,
.container-right h4,
.top-left span,
.heads-faq h3 {
	color: var(--green-bright);
}

/* Body copy unified on DM Sans */
body {
	font-family: "DM Sans", sans-serif;
}

/* "ABOUT US" home-page label -> same small-caps gold-dash label used across the reference pages */
.right-side h4 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "DM Sans", sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--green-bright);
}

.right-side h4::before {
	content: '';
	width: 28px;
	height: 2px;
	background: var(--gold);
}

.right-side p {
	color: var(--green-deep);
	font-size: 17px;
	line-height: 1.7;
}

.about-us-list {
	list-style: none;
	margin: 4px 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.about-us-list li {
	position: relative;
	padding-left: 28px;
	font-family: "DM Sans", sans-serif;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--green-deep);
}

.about-us-list li::before {
	content: '\f00c';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--gold);
	font-size: 12px;
}

/* Recolor the old cyan tick/check icons toward the green brand tone */
.blue-tickimage,
.study-program-right ul li img {
	filter: hue-rotate(-45deg) saturate(1.4);
}

/* ==========================================================================
   Shared hero system — same component the UAE Residency / UAE Internship /
   Portfolio Building pages built inline. Centralized here so any page can
   opt into the same bold, full-bleed hero treatment.
   ========================================================================== */

.hero .container,
.container {
	width: min(90%, 1400px);
	margin: 0 auto;
}

.hero {
	min-height: 88vh;
	background: var(--green-deep);
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(64, 145, 108, .18) 0%, transparent 70%);
	top: -200px;
	right: -200px;
}

.hero::after {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	border: 1px solid rgba(201, 168, 76, .15);
	border-radius: 50%;
	bottom: -150px;
	left: 10%;
}

.hero-inner {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 80px;
	align-items: center;
	padding: 90px 0 80px;
	position: relative;
	z-index: 2;
}

.hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(201, 168, 76, .12);
	border: 1px solid rgba(201, 168, 76, .3);
	color: var(--gold-light);
	padding: 8px 18px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 28px;
}

.hero-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
	animation: heroPulse 2s infinite;
}

@keyframes heroPulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .5;
		transform: scale(.7);
	}
}

.hero-left h1 {
	font-family: "Playfair Display", serif !important;
	font-size: clamp(38px, 4.5vw, 61px);
	font-weight: 900;
	color: var(--white, #fff);
	line-height: 1.12;
	margin-bottom: 18px;
}

.hero-left h1 em {
	font-style: italic;
	color: var(--gold);
}

.hero-subhead {
	font-family: "Playfair Display", serif;
	font-size: 20px;
	color: var(--gold-light);
	font-weight: 400;
	margin-bottom: 14px;
	font-style: italic;
}

.hero-desc {
	color: rgba(255, 255, 255, .72);
	font-size: 16.5px;
	line-height: 1.9;
	max-width: 760px;
	margin-bottom: 34px;
}

.hero-btns {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.hero-btns .btn-primary,
a.btn-primary {
	background: var(--gold);
	color: var(--green-deep);
	padding: 15px 32px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: all .3s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

a.btn-primary:hover {
	background: var(--gold-light);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(201, 168, 76, .3);
}

.hero-btns .btn-outline,
a.btn-outline {
	border: 1px solid rgba(255, 255, 255, .3);
	color: rgba(255, 255, 255, .9);
	padding: 15px 32px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: all .3s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

a.btn-outline:hover {
	border-color: var(--gold);
	background: rgba(201, 168, 76, .14);
	color: var(--gold-light);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.hero-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
	padding: 38px 34px;
	backdrop-filter: blur(20px);
	animation: heroFadeUp .8s ease .15s both;
}

.hero-card h3 {
	font-family: "Playfair Display", serif !important;
	font-size: 21px;
	color: #fff;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.stat-row {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 16px;
}

.stat-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(64, 145, 108, .2);
	border: 1px solid rgba(64, 145, 108, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.stat-icon i {
	color: var(--green-light);
	font-size: 18px;
}

.stat-text strong {
	display: block;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 3px;
}

.stat-text span {
	color: var(--cream) !important;
	font-size: 13.5px;
}

.hero-note {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--cream) !important;
	font-size: 14px !important;
	line-height: 1.7;
}

.hero-left {
	animation: heroFadeUp .8s ease both;
}

@keyframes heroFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1050px) {
	.hero-inner {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 30px 0 !important;
	}

	.hero-card {
		max-width: 520px;
	}

	.hero {
		min-height: unset;
	}
}

/* ==========================================================================
   Shared section vocabulary — label / heading / paragraph — same pattern
   used throughout the reference pages for section intros.
   ========================================================================== */

.section-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--green-bright);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.section-label::before {
	content: '';
	width: 28px;
	height: 2px;
	background: var(--gold);
}

.section-heading {
	font-family: "Playfair Display", serif !important;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 800;
	color: var(--green-deep);
	line-height: 1.18;
	margin-bottom: 16px;
}

.section-heading em {
	font-style: italic;
	color: var(--green-bright);
}

.section-para {
	color: var(--green-deep);
	font-size: 16px;
	line-height: 1.85;
	max-width: 680px;
}

/* ==========================================================================
   Featured review — a single standout testimonial styled like a pull-quote
   card, matching the same white-card-on-cream language as the rest of the
   site.
   ========================================================================== */

.featured-review-section {
	background: var(--cream);
	padding: 70px 0 60px;
}

.featured-review-section .item-A.featured-item {
	max-width: 820px;
	margin: 0 auto;
	display: block;
	border: 1px solid var(--border);
	border-radius: 20px;
	background: #fff;
	padding: 40px 44px;
	box-shadow: 0 18px 40px rgba(26, 61, 43, .08);
	position: relative;
	overflow: hidden;
}

.featured-review-section .item-A.featured-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 5px;
	height: 100%;
	background: linear-gradient(to bottom, var(--gold), var(--green-bright));
}

.featured-quote-icon {
	position: absolute;
	top: 42px;
	right: 40px;
	font-size: 64px;
	color: rgba(201, 168, 76, .12);
	z-index: 0;
}

.featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(201, 168, 76, .12);
	border: 1px solid rgba(201, 168, 76, .3);
	color: var(--gold);
	padding: 7px 16px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.featured-review-section .review_date {
	margin-bottom: 14px;
}

.featured-review-section .review_date span {
	color: #FFC523;
	font-size: 20px;
}

.featured-review-section .review.featured-review p {
	font-family: "DM Sans", sans-serif;
	font-size: 17px;
	line-height: 1.9;
	color: var(--green-deep);
	font-style: italic;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

.featured-reviewer {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
	position: relative;
	z-index: 1;
}

.featured-avatar {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--gold);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 18px;
}

.featured-reviewer-info h3 {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 700;
	font-size: 17px;
	color: var(--green-deep);
	margin-bottom: 2px;
}

.featured-reviewer-info span {
	font-size: 13px;
	color: var(--green-deep);
}

/* ==========================================================================
   Awards & Recognition — centered intro + a row of achievement cards
   (circular photo on a deep-green header, title/subtitle/location below).
   ========================================================================== */

.awards-section {
	background: var(--cream);
	padding: 80px 0 84px;
}

.awards-section .section-intro-center {
	max-width: 700px;
	margin: 0 auto 48px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.awards-section .section-intro-center .featured-badge {
	margin-bottom: 18px;
}

.awards-section .section-intro-center .section-heading {
	margin-bottom: 12px;
}

.awards-section .section-intro-center .section-para {
	max-width: 560px;
}

.awards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.award-card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(26, 61, 43, .08);
	transition: transform .3s ease, box-shadow .3s ease;
}

.award-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(26, 61, 43, .14);
}

.award-image-wrap {
	background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
	padding: 40px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.award-image-wrap img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
	border: 4px solid var(--gold);
	box-shadow: 0 0 0 6px rgba(201, 168, 76, .15);
}

.award-info {
	padding: 26px 28px 30px;
	text-align: center;
}

.award-info h3 {
	font-family: "Playfair Display", serif !important;
	font-size: 20px;
	font-weight: 800;
	color: var(--green-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 6px;
}

.award-info h3 i {
	color: var(--gold);
}

.award-sub {
	color: var(--text-mid);
	font-size: 17px;
	margin-bottom: 16px;
}

.award-tag {
	display: inline-block;
	background: rgba(201, 168, 76, .12);
	border: 1px solid rgba(201, 168, 76, .35);
	color: var(--green-deep);
	font-weight: 700;
	font-size: 13px;
	padding: 6px 16px;
	border-radius: 100px;
}

@media (max-width: 900px) {
	.awards-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Login page — full redesign onto the hero language: dark green backdrop
   with decorative circles, a bigger card, Playfair heading, gold CTA.
   ========================================================================== */

.main-containerlogin {
	padding: 0 !important;
	height: 100vh;
	background: var(--green-deep);
	position: relative;
}

.login-back-btn {
	position: absolute;
	top: 26px;
	left: 32px;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .85);
	font-family: "DM Sans", sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	padding: 9px 18px;
	border-radius: 100px;
	transition: all .25s ease;
}

.login-back-btn:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
	transform: translateX(-2px);
}

/* Mobile: the split stacks (card on top, green panel below) via
   column-reverse, so an absolutely-positioned back button ends up
   overlapping the white card with the wrong (light-on-dark) colors.
   Dock it in normal flow above everything instead. */
@media (max-width: 768px) {
	.login-back-btn {   
		top: 10px;
        left: 0px;
		color: #1a3d2b;
	}
}

/* Full-bleed split layout — no floating card, no shadow/margins. The two
   panels each fill the page edge-to-edge, same as the reference layout. */
.main-containerlogin .login.login-split {
	width: 100%;
	max-width: none;
	margin: 0;
	gap: 0;
	border-radius: 0;
	box-shadow: none;
	align-items: stretch !important;
}

.login-split .right-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 50px;
}

/* Two distinct blocks inside the right panel: a plain header block
   (logo/heading) and a separately-styled, tinted form panel below it. */
.login-header-block,
.login-form-panel {
	width: 100%;
}

.login-header-block>img {
	width: 130px !important;
	margin-bottom: 6px;
}

.login-form-panel {
	margin-top: 26px;
	overflow: hidden;
}

/* The Google reCAPTCHA widget has its own fixed native width and can run
   wider than usual (e.g. its "unsupported domain" warning state) — never
   let it push past the card edge. */
.login-form .g-recaptcha {
	margin-left: 0 !important;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

.login-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--green-pale);
	color: var(--green-deep);
	padding: 7px 16px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 12px auto 8px;
}

.login-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
	animation: loginPulseDot 2s infinite;
}

.right-login p {
	font-family: "Playfair Display", serif !important;
	font-weight: 900;
	font-size: 34px !important;
	color: var(--green-deep) !important;
}

.right-login p.login-subtext {
	font-family: "DM Sans", sans-serif !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	color: var(--green-deep) !important;
	margin-top: -4px !important;
	margin-bottom: 10px !important;
}

.login-form input {
	border-radius: 0;
	transition: border-color .3s ease;
}

.login-form input:focus {
	border-bottom: 1px solid var(--green-bright);
}

.loginbtn {
	background-color: var(--gold) !important;
	color: var(--green-deep) !important;
	font-weight: 700 !important;

	width: 95% !important;
	margin: 0 auto !important;
	transition: all .3s ease;
}

.loginbtn:hover {
	background-color: var(--gold-light) !important;
	transform: translateY(-2px);
	outline-color: rgba(26, 61, 43, .3);
	box-shadow: 0 14px 30px rgba(201, 168, 76, .35);
}

/* Split login layout — dark benefits panel + white form card, same pattern
   as Dr. Afreen's Academy's login page, recolored onto EMREE Prep's palette */

.login-split {
	align-items: stretch !important;
	overflow: visible;
	background: transparent !important;
}

.login-left-panel {
	background: var(--green-deep);
	position: relative;
	overflow: hidden;
	padding: 50px 65px;
	display: flex;
	align-items: center;
}

.right_loginsplit {
	width: 50%;
	height: 100vh;
	padding: 50px 65px;
	background-color: var(--cream);
	box-shadow: 0px 3px 6px 0px #0000001A;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@keyframes loginSlideUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes loginPulseDot {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .55;
		transform: scale(.72);
	}
}

@keyframes goldSheen {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

.login-left-content {
	animation: loginSlideUp .8s ease both;
}

.login-left-content>* {
	animation: loginSlideUp .7s ease both;
}

.login-left-tag {
	animation-delay: .05s;
}

.login-left-heading {
	animation-delay: .12s;
}

.login-left-tagline {
	animation-delay: .18s;
}

.login-left-desc {
	animation-delay: .24s;
}

.login-left-checklist {
	animation-delay: .3s;
}

/* The white form panel is its own distinct, inset card — solid white,
   clearly separate from the green left panel — sitting on the green
   backdrop with a margin gap, rounded corners, and a shimmering gold
   border traced on top via a dedicated overlay (::before) rather than a
   fragile shared-background trick. Left panel stays sharp/flush, full-bleed. */
.login-split .right-login {
	position: relative;
	margin: 0 auto;
	width: 80%;
	padding: 30px 40px;
	border-radius: 24px;
	background-color: #ffffff;
	box-shadow: 0 25px 60px rgba(0, 0, 0, .22);
	animation: loginSlideUp .8s ease .2s both;
}

.login-split .right-login::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 4px;
	pointer-events: none;
	background: linear-gradient(90deg, var(--gold-light), var(--gold) 35%, var(--gold-light) 65%, var(--gold-light));
	background-size: 200% 100%;
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	animation: goldSheen 6s linear infinite;
}

.login-left-panel {
	background-image:
		radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(var(--green-deep), var(--green-deep));
	background-size: 22px 22px, 100% 100%;
}

.login-left-panel::before {
	content: '';
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(64, 145, 108, .3) 0%, transparent 70%);
	top: -140px;
	right: -140px;
}

.login-left-panel::after {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	border: 1px solid rgba(201, 168, 76, .12);
	border-radius: 50%;
	bottom: -130px;
	left: -80px;
}

.login-left-panel .login-left-content {
	position: relative;
}

.login-left-panel .login-left-content::before {
	content: '';
	position: absolute;
	width: 160px;
	height: 160px;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 50%;
	top: 40%;
	right: -60px;
	pointer-events: none;
}

.login-left-content {
	position: relative;
	z-index: 2;
	text-align: left;
}

.login-left-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(201, 168, 76, .12);
	border: 1px solid rgba(201, 168, 76, .3);
	color: var(--gold-light);
	padding: 7px 16px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 22px;
}

.login-left-heading {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-style: italic;
	font-size: 32px;
	color: #fff;
	line-height: 1.25;
	margin-bottom: 10px;
}

.login-left-heading em {
	font-style: italic;
	color: var(--gold-light);
}

.login-left-tagline {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 20px;
	color: var(--green-light);
	margin-bottom: 18px;
}

.login-left-desc {
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .65);
	margin-bottom: 26px;
	max-width: 380px;
}

.login-left-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.login-left-checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: "DM Sans", sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, .88);
	transition: transform .3s ease, color .3s ease;
}

.login-left-checklist li:hover {
	transform: translateX(6px);
	color: #fff;
}

.login-left-checklist li:hover .login-check-dot {
	background: var(--gold-light);
	transform: scale(1.12);
}

.login-check-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--gold);
	color: var(--green-deep);
	transition: transform .3s ease, background .3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
}

/* Boxed, icon-prefixed inputs for the login form */
.login-form {
	text-align: left;
	width: 100%;
	margin: 0px auto;
}

.login-input-wrap {
	position: relative;
	margin-bottom: 18px;
	width: 100%;
}

.login-input-wrap input {
	width: 100%;
	margin-bottom: 10px;
}

.login-input-icon {
	position: absolute;
	left: 16px;
	top: 39%;
	transform: translateY(-50%);
	color: var(--green-bright);
	font-size: 14px;
}

.login-form .login-input-wrap input {
	border: 1px solid rgba(26, 61, 43, .15) !important;
	border-radius: 10px !important;
	padding: 15px 42px 15px 42px !important;
	background: #fbfcfb;
	font-size: 14.5px;
	box-shadow: 0 2px 6px rgba(26, 61, 43, .04);
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.login-form .login-input-wrap input:focus {
	border: 1px solid var(--green-bright) !important;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(64, 145, 108, .1);
}

.login-password-toggle {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--green-deep);
	font-size: 14px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 4px;
}

.login-password-toggle:hover {
	color: var(--green-bright);
}

.loginbtn:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(201, 168, 76, .3);
}

.login-header-block>img {
	transition: transform .3s ease;
}

.login-header-block>img:hover {
	transform: scale(1.05);
}

.login-input-wrap:has(input:focus) .login-input-icon {
	color: var(--gold);
	transform: translateY(-50%) scale(1.1);
}

.login-form .error-message {
	display: block;
	margin-top: -12px;
	margin-bottom: 10px;
}

.login-form .switch {
	margin-top: 4px;
}

.login-left-stats {
	display: flex;
	gap: 28px;
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.login-left-stat {
	display: flex;
	align-items: center;
	gap: 12px;
}

.login-left-stat-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(64, 145, 108, .2);
	border: 1px solid rgba(64, 145, 108, .3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.login-left-stat-icon i {
	color: var(--green-light);
	font-size: 15px;
}

.login-left-stat strong {
	display: block;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: "DM Sans", sans-serif;
}

.login-left-stat span {
	color: rgba(255, 255, 255, .55);
	font-size: 12px;
}

.right-login p.login-footnote {
	margin-top: 22px !important;
	font-family: "DM Sans", sans-serif !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	color: var(--green-deep) !important;
}

.login-footnote a {
	color: var(--green-bright);
	font-weight: 700;
	text-decoration: none;
	transition: color .2s ease;
}

.login-footnote a:hover {
	color: var(--gold);
	text-decoration: underline;
}

@media (max-width: 900px) {

	.login-left-panel,
	.login-split .left-login,
	.login-split .right-login {
		width: 100% !important;
	}
}


.achievement-spotlight-section {
	background: var(--green-deep);
	padding: 80px 0;
}

.achievement-spotlight {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 64px;
	align-items: center;
}

.achievement-spotlight-image {
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: #0f2419;
	border: 3px solid var(--gold);
	box-shadow: 0 0 0 8px rgba(201, 168, 76, .12);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.achievement-spotlight-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.achievement-tag {
	display: inline-block;
	background: rgba(201, 168, 76, .16);
	border: 1px solid rgba(201, 168, 76, .4);
	color: var(--gold-light);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 6px 18px;
	border-radius: 100px;
	margin-bottom: 20px;
}

.achievement-spotlight-content h2 {
	font-family: "Playfair Display", serif !important;
	font-style: italic;
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 44px);
	color: #ffffff !important;
	line-height: 1.2;
	margin-bottom: 12px;
}

.achievement-source {
	color: var(--gold-light);
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 20px;
}

.achievement-desc {
	color: var(--cream);
	font-size: 17px;
	line-height: 1.85;
	max-width: 90%;
}

@media (max-width: 800px) {
	.achievement-spotlight {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 32px;
	}

	.achievement-spotlight-image {
		width: 220px;
		height: 220px;
		margin: 0 auto;
	}
}