html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--primaryClr: #284587;
	--secondaryClr: #F3C102;
	--whiteClr: #ffffff;
	--blackClr: #000000;

}


body {
	font-family: "Poppins", sans-serif;
	background-color: #FFFDDA;
	line-height: 1.5;
	color: var(--blackClr);
}

button,
input,
textarea,
select {
	font: inherit;
}

img {
	max-width: 100%;
	display: block;
}

a {
	text-decoration: none;
}

.container {
	max-width: 1720px;
	width: 95%;
	margin: 0 auto;
}

.btn {
	font-size: 18px;
	font-family: "Montserrat", sans-serif;
	padding: 18px 28px;
	border-radius: 50px;
	font-weight: 700;
	text-transform: uppercase;
	background: var(--secondaryClr);
	color: var(--primaryClr);
}

.btn:hover {
	background: var(--primaryClr);
	color: #fff;
	transition: all 0.3s ease;
}

/* ================= FLOATING BUTTON ================= */

.floatingCall {
	position: fixed;
	right: 50px;
	bottom: 50px;
	z-index: 9999;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.callPulse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);

	width: 70px;
	height: 70px;
	border-radius: 50%;

	background: rgba(243, 193, 2, 0.35);

	animation: pulseWave 1.8s ease-out infinite;
	z-index: 1;
}

.callBtn {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #F3C102, #ffd84d);
	color: #284587;
	font-size: 24px;
	cursor: pointer;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
	transition: 0.3s;
}

.callBtn:hover {
	transform: scale(1.1);
}


.callPopup {
	position: fixed;
	right: 25px;
	bottom: 120px;
	background: #fff;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: 0.3s;
	z-index: 9999;
}

.callPopup.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}


.callTitle {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
	color: #284587;
}


.callNumbersRow {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.callNumber {
	font-size: 18px;
	font-weight: 600;
	color: #000;
	text-decoration: none;
	transition: 0.3s;
}

.callNumber:hover {
	color: #F3C102;
}

@keyframes pulseWave {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.6;
	}

	100% {
		transform: translate(-50%, -50%) scale(1.8);
		opacity: 0;
	}
}

/* ===================== HEADER ===================================*/


.mainHeader {
	position: absolute;
	top: 20px;
	width: 100%;
	z-index: 100;
}

.headerContainer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #ffffff;
	border-radius: 60px;
	padding: 10px 40px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

}

.headerLogo {
	width: auto;
	height: 85px;
}

.headerRight {
	display: flex;
	gap: 20px;
	align-items: center;
}

.heroWrap {
	position: relative;
	overflow: visible;
}

.heroSection {
	position: relative;
	width: 100%;
	height: 845px;
	padding: 40px 0;
	background: url(../images/hero-banner.webp) no-repeat;
	background-size: cover;
	overflow: hidden;
	display: flex;
	align-items: center;
	max-width: 1920px;
	margin: 0 auto;
}


.heroContent {
	position: relative;
	z-index: 6;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 455px;
}


/* ================= HERO CONTENT ================= */

/* Hanging */
.heroHanging {
	position: absolute;
	top: 90px;
	left: 110px;
	z-index: 5;
	animation: swing 4s infinite ease-in-out;
}

.heroHanging img {
	width: 520px;
}

@keyframes swing {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(2deg);
	}

	100% {
		transform: rotate(0deg);
	}
}


.admissionText {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.5;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.mbaBox {
	display: inline-block;
	background: #F2C001;
	padding: 5px 28px;
	max-width: 340px;
	border-radius: 40px 0 40px 0;
	position: relative;
	text-align: center;
	margin: 10px 0;
	box-shadow: 0px 14px 14px 0px #00000040;

}

.mbaBox span {
	font-size: 120px;
	font-weight: 900;
	color: #fff6cc;
	text-shadow:
		0 4px 0 #d4a300,
		0 8px 12px rgba(0, 0, 0, 0.25),
		-2px -2px 2px rgba(255, 255, 255, 0.6);
	line-height: 1;
}

.mbaBox::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px dashed rgba(255, 255, 255, 0.6);
	border-radius: 40px 0 40px 0;
}

.heroDesc {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
}


.studentsPic {
	position: absolute;
	bottom: 0px;
	left: 35%;
	width: fit-content;
	z-index: 2;
	pointer-events: none;
}

.studentsPic img {
	width: auto;
	height: 676px;
	display: block;
}

/* Form */
.form {
	width: 100%;
	height: auto;
	position: absolute;
	right: 75px;
	min-height: 550px;
	border-radius: 20px;
	max-width: 400px;
	top: 150px;
	text-align: center;
	/* padding: 10px; */
	scroll-margin-top: 120px;
	/* background: #031d4ca1; */
	/* background: rgba(0, 0, 0, 0.5); */

	z-index: 9999;
}

.enquiryTitle {
	font-size: 16px;
	font-weight: 700;
	color: #ffc540;
	margin-bottom: 5px;
}


/* ================= PLACEMENT SECTION ================= */

.placementSection {
	padding: 100px 0 30px;
}

.placementWrap {
	text-align: center;
}

.placementWrap.container {
	max-width: 1430px;
}

.placementTitle {
	font-size: 48px;
	font-weight: 400;
	margin-bottom: 10px;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.placementGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	gap: 100px;
}

.placementCard {
	width: 100%;
	min-width: 410px;
	position: relative;
	border-radius: 20px;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);

	padding: 5px;
}

.placementInner {
	border-radius: 18px;
	padding: 25px 30px;
	text-align: center;
	border: 1px dashed #FFFFFF;
}

.placementValue {
	font-size: 64px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.currency {
	font-size: 32px;
	font-weight: 400;
	position: relative;
	top: -8px;
}

.unit {
	font-size: 32px;
	font-weight: 600;
}

.placementLabel {
	font-size: 24px;
	font-weight: 500;
	color: #fff;
}


/* ================= RECRUITER SECTION ================= */

.recruiterSection {
	padding: 40px 0;
	overflow: hidden;
}

.recruiterWrap {
	display: flex;
	align-items: center;
}

.recruiterLeft {
	width: 280px;
	flex-shrink: 0;
}

.recruiterTitle {
	font-size: 45px;
	font-weight: 400;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.recruiterRight {
	flex: 1;
	overflow: hidden;
	margin-right: calc((100vw - 100%) / -2);
}

.recruiterSlider {
	width: 100%;
}

.recruiterSlider .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear !important;
}

.recruiterSlider .swiper-slide {
	width: auto !important;
}

.swiper.recruiterSlider {
	padding: 5px;
}



.recruiterCard {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: 0px 4px 4px 0px #00000040;
}

.recruiterCard img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}


/* ================= BBC SECTION ================= */
.bbcSection {
	padding: 40px 0 0;
	position: relative;
	overflow: hidden;
}

.bbcSection::before {
	content: "";
	position: absolute;

	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);

	width: 900px;
	height: 900px;

	background: url('../images/bbc-bg.svg') no-repeat center;
	background-size: contain;

	z-index: 0;
}

.bbcSection .container {
	position: relative;
	z-index: 2;
}

.bbcHeader {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 20px;
}

.bbcTitle {
	font-size: 48px;
	font-weight: 500;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.bbcDesc {
	margin-top: 15px;
	font-size: 20px;
	font-weight: 400;
	color: var(--primaryClr);
	line-height: 1.5;
}

.bbcDesc span {
	font-weight: 600;
}

.bbcGrid {
	display: grid;
	grid-template-columns: 1fr 550px 1fr;
	align-items: center;
}

.bbcCol {
	display: flex;
	flex-direction: column;
	gap: 65px;
}

.bbcLeft .bbcItem {
	text-align: right;
	padding-right: 20px;

	border-right: 2px solid;
	border-image: linear-gradient(180deg, #284587 0%, #F2C001 100%);
	border-image-slice: 1;
}

.bbcRight .bbcItem {
	text-align: left;
	padding-left: 30px;

	border-left: 2px solid;
	border-image: linear-gradient(180deg, #284587 0%, #F2C001 100%);
	border-image-slice: 1;
}

.bbcItem h3 {
	font-size: 24px;
	font-weight: 500;
	color: var(--primaryClr);
	margin-bottom: 20px;
}

.bbcItem p {
	font-size: 18px;
	font-weight: 300;
	color: var(--blackClr);
	line-height: 1.5;
}

.bbcCenter {
	text-align: center;
}

.bbcCenter img {
	width: 100%;
	max-width: 520px;
}


/* ================= About SECTION ================= */

.aboutSection {
	padding: 100px 0;
	background: #ffffff url('../images/about-bg.webp') repeat;
	position: relative;
}

.aboutHeader {
	text-align: center;
	max-width: 1100px;
	margin: 0 auto 40px;
}

.aboutTitle {
	font-size: 48px;
	font-weight: 400;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.aboutTitle span {
	color: #d4a300;
}

.aboutDesc {
	margin-top: 20px;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--primaryClr);
}

.aboutDesc span {
	font-weight: 600;
}

.aboutStats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	position: relative;
}

.aboutItem {
	text-align: center;
	position: relative;
}

.aboutNumber {
	font-size: 64px;
	font-weight: 400;
	position: relative;
	z-index: 2;

	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.aboutItem::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: linear-gradient(90deg, #E2EBFF 0%, #FFF9E0 100%);
	z-index: 1;
}

.aboutItem::after {
	content: "";
	position: absolute;
	right: 0;
	top: 25%;
	height: 50%;
	width: 1px;
	opacity: 0.2;
	background: var(--blackClr);
}

.aboutItem:nth-child(4n)::after {
	content: none;
}

.aboutItem p {
	margin-top: 30px;
	font-weight: 500;
	font-size: 24px;
	color: var(--primaryClr);
}


/* =================CAMPU SECTION ================= */
.campusSection {
	padding: 100px 0;
	background: url('../images/loc-bg.webp') no-repeat center;
	border-radius: 60px;
	background-size: cover;


}

.campusWrap {
	color: #fff;
}


.campusHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.campusTitle {
	font-size: 48px;
	font-weight: 400;
	color: #F2C001;
}

.campusDesc {
	margin-top: 10px;
	font-size: 20px;
	font-weight: 400;
}


.campusRight {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
}

.campusPlay {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid #ffffff;
	box-shadow: 0px 0px 14px 0px #00000080;

}

.campusRight p {
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}

.campusCards {
	overflow: hidden;
}

.campusCard {
	border-radius: 20px;
	padding: 20px;
	border: 1px solid transparent;

	background-clip: padding-box;
	position: relative;
	backdrop-filter: blur(10px)
}

.campusCard::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	padding: 1px;
	background: linear-gradient(90deg, #f2c001, #fff);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}


.campusImg {
	border-radius: 15px;
	overflow: hidden;
	position: relative;
}

.campusImg img {
	width: 100%;
	display: block;
}


.campusCard p {
	margin-top: 15px;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
}

.campusModal {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}

.campusModal.active {
	display: flex;
}

.modalContent {
	background: #fff;
	padding: 50px;
	border-radius: 20px;
	width: 80%;
	max-width: 1400px;
	max-height: 800px;
	position: relative;
}

.modalContent iframe {
	width: 100%;
	height: 500px;
}

.modalClose {
	position: absolute;
	top: 5px;
	right: 5px;
	background: #2c3e70;
	color: #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	border: none;
	cursor: pointer;
}

.campusCards .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.campusCard {
	width: 100%;
}


/* ================= SECTION ================= */
.infraSection {
	padding: 100px 0;
	background: #ffffff;
	overflow: hidden;
}

.infraWrap {
	display: flex;
	position: relative;
}

.infraLeft {
	width: 50%;
	flex-shrink: 0;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.infraTitle {
	font-size: 84px;
	line-height: 1;
	color: var(--primaryClr);
	/* color: transparent;
	background: #00249f;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	text-shadow: 0px 3px 3px rgba(172, 172, 172, 0.5); */
}

.infraNav {
	margin-top: 0px;
	display: flex;
	gap: 16px;
}

.infraPrev,
.infraNext {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);

}

.infraPrev:hover,
.infraNext:hover {
	transform: scale(1.08);
	background: #000000;
}


.infraPrev img,
.infraNext img {
	width: 40px;
	height: auto;
}

.infraRight {
	flex: 1;
	min-width: 0;
	margin-right: calc((100vw - 100%) / -2);
}

.infraSlider {
	overflow: visible;
	padding: 0 0 0 30px;
}

.infraCard {
	border-radius: 24px;
	padding: 20px 20px 25px 20px;
	position: relative;
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	cursor: pointer;
}


.infraCard::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	padding: 1px;

	background: linear-gradient(180deg, #F1E404 0%, #8ACBE3 100%);

	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.infraImg {
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.infraImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.infraCard p {
	margin-top: 20px;
	font-size: 24px;
	font-weight: 400;
	display: inline-block;
	background: linear-gradient(90deg, #2c4f84 60%, #f1e404 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}


/* ================= Admission SECTION ================= */

.admissionSection {
	padding: 100px 0;
	background: #F8F9FE;
	text-align: center;
}

.admissionTitle {
	font-size: 48px;
	font-weight: 500;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.admissionSteps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
}

.admissionItem {
	position: relative;
}

.admissionCircle {
	width: 380px;
	height: 380px;
	position: relative;
	border-radius: 50%;
	overflow: hidden;
}

.circleBg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.circleContent {
	position: relative;
	z-index: 2;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 30px;
	text-align: center;
}

.circleContent h4 {
	font-size: 32px;
	font-weight: 400;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.circleContent img {
	width: 80px;
	margin: 10px 0;
}

.circleContent p {
	font-size: 20px;
	font-weight: 400;
	color: #2c4f84;
	line-height: 1.5;
}

.admissionArrow img {
	width: 50px;
}


.bg {
	background: #ffffff url('../images/bottom-bg.webp') repeat;
}


/* ================= Testimonial  SECTION ================= */
.testimonialSection {
	padding: 100px 0 10px;
	text-align: center;
	background: transparent;
}

.testimonialTitle {
	font-size: 48px;
	font-weight: 400;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.testimonialTabs {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 30px;
}

.tabBtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;

	padding: 20px 40px;
	min-width: 390px;

	border-radius: 20px;
	border: 1px solid #000;
	background: transparent;
	cursor: pointer;
	font-size: 24px;
	font-weight: 600;
}

.tabBtn.active {
	background: linear-gradient(90deg, #284587, #F2C001);
	color: #fff;
	border: none;
}


.tabBtn img {
	width: 40px;
	transition: 0.3s;
	filter: brightness(0);
}

.tabBtn.active img {

	filter: brightness(0) invert(1);
}

.testimonialBox {
	margin-top: 20px;
	padding: 50px 100px;
	border-radius: 20px;
	border: 1px solid #F2C001;
	background: linear-gradient(180deg, rgba(40, 69, 135, 0.1) 0%, rgba(242, 192, 1, 0.1) 100%);
}

.testimonialSlider {
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

.testimonialSlider.active {
	opacity: 1;
	visibility: visible;
	height: auto;
}

.testimonialSlider .swiper-wrapper {
	display: flex !important;
}

.testimonialSlider .swiper-slide {
	flex-shrink: 0;
}

.testimonialCard {
	padding: 0 30px;
	text-align: left;
	position: relative;
}

.testimonialCard::after {
	content: "";
	position: absolute;
	right: 0;
	top: 20%;
	height: 60%;
	width: 1px;
	background: rgba(0, 0, 0, 0.15);
}

.swiper-slide:last-child .testimonialCard::after {
	display: none;
}

.testimonialCard p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}

.testimonialCard h4 {
	margin-top: 20px;
	font-weight: 600;
}

.testimonialNav {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	gap: 30px;
}


.testiPrev,
.testiNext {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);

}

.testiPrev:hover,
.testiNext:hover {
	transform: scale(1.08);
	background: #000000;
}


.testiPrev img,
.testiNext img {
	width: 40px;
	height: auto;
}

/* ===================== CTA SECTION ========================== */

.ctaSection {
	position: relative;
	/* background: url('../images/cta-bg.png') no-repeat center;
	background-size: cover; */
	overflow: hidden;
}

.ctaWrap {
	display: flex;
	align-items: center;
}

.ctaLeft {
	width: 55%;
}

.ctaTitle {
	font-size: 60px;
	font-weight: 800;
	color: #2c4f84;
	line-height: 1.1;
	text-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.highlight {
	background: #f2c001;
	padding: 5px 20px;
	border-radius: 8px;
	display: inline-block;
	transform: rotate(-3deg);
}

.ctaSub {
	font-weight: 700;
	font-size: 32px;
	color: #2c4f84;
	display: inline-block;
	background: linear-gradient(90deg, #284587 0%, #F2C001 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ctaBottom {
	margin-top: 10px;
	display: flex;
	align-items: flex-end;
	gap: 30px;
}


.ctaRight {
	width: 45%;
	position: relative;
}

.ctaRight img {
	width: 100%;
	position: relative;
	z-index: 2;
}

.ctaFooter {
	background: #284587;
	color: #fff;
	text-align: center;
	padding: 12px;
	font-size: 20px;
	font-weight: 400;
	border-top: 3px solid #F1E404;
}


/*========================== ABOUT PROGRAM ANIMATED ==============================*/
.aboutProgSection {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;


	background:
		url('../images/blue-bg.webp') no-repeat center,
		radial-gradient(ellipse 80% 60% at 50% 50%,
			#1a2f80 0%,
			#0d1a5c 55%,
			#070e36 100%);

	background-size: cover, cover;
	border-radius: 60px;
}

.aboutProgSection::after {
	content: "";
	position: absolute;
	top: -6px;
	right: 10%;

	width: 200px;
	height: 150px;

	background: url('../images/2-year-badge.svg') no-repeat center;
	background-size: contain;

}


.aboutProgStickyWrap {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	z-index: 1;
}

.aboutProgTextBlock {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
	text-align: center;
	padding: 0 20px;
	pointer-events: none;
}

.aboutProgTitle {
	font-size: clamp(40px, 8vw, 120px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: #FFFDDA;
}

.aboutProgDesc {
	margin-top: 28px;
	font-size: 24px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.82);
	max-width: 1090px;
	line-height: 1.75;
	will-change: opacity;
}


.aboutProgCardsOuter {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	z-index: 3;
	pointer-events: none;
}

.aboutProgCardsTrack {
	display: flex;
	align-items: center;
	gap: 28px;
	transform: translateX(60vw);
	will-change: transform;
	padding: 0 80px;
}

.aboutProgCard {
	width: 400px;
	height: 460px;
	border-radius: 22px;
	position: relative;
	overflow: hidden;
	cursor: pointer;

	backdrop-filter: blur(10px);
	padding: 20px;

	box-shadow:
		0 10px 40px rgba(0, 0, 0, 0.45),
		inset 0 0 0 1px rgba(241, 228, 4, 0.4);

	transition: all 0.35s ease;
}

.aboutProgCardImg {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	transition: transform 0.5s ease;
}

.aboutProgCardLabel {
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 8px;

	padding: 32px 14px 14px;
	border-radius: 0 0 16px 16px;


	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}

.aboutProgCard:hover .aboutProgCardImg {
	transform: scale(1.05);
}


.aboutProgCard:hover {
	transform: rotate(0deg) scale(1.05) translateY(-8px) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1.5px rgba(241, 228, 4, 0.7);
	z-index: 10;
}


.aboutProgCard:hover {
	transform: rotate(0deg) scale(1.05) translateY(-8px) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1.5px rgba(241, 228, 4, 0.7);
	z-index: 10;
}

.aboutProgScrollSpacer {
	height: 800vh;
	position: relative;
	z-index: 0;
}