:root {
	--maroon: #a30e28;
	/*--navy: #080d38;*/
	--navy: #58595b;
	--ink: #111633;
	--muted: #606579;
	--soft: #f5f7fb;
	--line: #dfe3ec;
	--white: #fff
}



* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--ink);
	background: #fff
}

.container {
	width: min(1180px, 92%);
	margin: auto
}





/*start slider image desktop, tab and mobile view*/
<style>
/* Default (Desktop) */
.desktop-img {
    display: block;
}

.tablet-img,
.mobile-img {
    display: none;
}

.hero-slide-img {
    width: 100%;
    height: auto;
    display: block;
}



#applyDrawerClose{
    display:none;
}






.main-header {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 1px 8px #00000012
}

.nav {
	height: 76px;
	display: flex;
	align-items: center;
	gap: 28px
}

.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap
}

.crest {
	width: 36px;
	height: 42px;
	background: var(--ink);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 22px
}

.brand strong {
	font-family: Georgia, serif;
	font-size: 17px
}

.brand b {
	color: #126b7b
}

.brand small {
	font-size: 8px
}

.divider {
	height: 38px;
	width: 1px;
	background: #aaa
}

.nav nav {
	display: flex;
	justify-content: center;
	gap: 25px;
	flex: 1
}

.nav a {
	text-decoration: none;
	color: var(--ink);
	/*font-size: 13px;*/
		font-size: 18px;
	font-weight: 700
}

.btn {
	border: 0;
	border-radius: 7px;
	padding: 13px 27px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	display: inline-block
}

.primary {
	background: linear-gradient(135deg, #b30d2c, #8c0b22);
	color: #fff !important
}

.menu-btn {
	display: none
}

.side-apply-btn {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	background: linear-gradient(135deg, #b30d2c, #8c0b22);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 18px 10px;
	border-radius: 8px 0 0 8px;
	box-shadow: 0 2px 12px #00000040;
	z-index: 55;
	transition: padding .2s ease, right .2s ease
}

.side-apply-btn:hover {
	padding-right: 16px
}



@media(max-width:560px) {
	.side-apply-btn {
		font-size: 12px;
		padding: 14px 7px
	}
}

.quickbar {
	background: var(--navy);
	color: #fff
}

.quicklinks {
	height: 44px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	text-align: center
}

.quicklinks a {
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	border-right: 1px solid #ffffff55
}

.hero {
	position: relative;
	padding: 28px 0;
	width: 100%;
	overflow: hidden;
}

/* ==========================================================
   HERO IMAGE SLIDER
   Replaces the old CSS background-image banner with real <img>
   slides so the browser can scale/lazy-load them properly and
   the section can rotate through several images.

   Sizing: the slider is absolutely positioned to fill whatever
   height the .hero-grid content (mainly the application form
   card) establishes -- so it always matches the responsive hero
   height already set up via .hero-copy's clamp() padding below,
   at every breakpoint, without a separate height calculation.
   ========================================================== */
.hero-slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--navy);
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
	z-index: 1;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.hero-slide picture,
.hero-slide-img {
	display: block;
	width: 100%;
	height: 100%;
}

.hero-slide-img {
	object-fit: cover;
	object-position: center;
}

/* readability scrim so the form card + any future headline text
   always contrast against whatever photo is showing */
.hero-slider::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	/*background: linear-gradient(100deg, rgba(8, 13, 56, .55) 0%, rgba(8, 13, 56, .18) 45%, rgba(8, 13, 56, 0) 70%);*/
	pointer-events: none;
}

.hero-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--navy);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	transition: background .2s ease, transform .2s ease;
}

.hero-slider-arrow:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.06);
}

.hero-slider-arrow.prev { left: 16px; }
.hero-slider-arrow.next { right: 16px; }

.hero-slider-dots {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 8px;
}

.hero-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .85);
	background: rgba(255, 255, 255, .35);
	padding: 0;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, width .2s ease;
}

.hero-dot.is-active {
	background: #fff;
	width: 22px;
	border-radius: 5px;
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide {
		transition: none;
	}
	.hero-slider-arrow,
	.hero-dot {
		transition: none;
	}
}

/* tablets: keep arrows but tuck them in a little tighter */
@media (max-width: 900px) {
	.hero-slider-arrow {
		width: 34px;
		height: 34px;
		font-size: 18px;
	}
	.hero-slider-arrow.prev { left: 10px; }
	.hero-slider-arrow.next { right: 10px; }
}

/* small phones: hide arrows (swipe still works), keep dots compact */
@media (max-width: 560px) {
	.hero-slider-arrow {
		display: none;
	}
	.hero-slider-dots {
		bottom: 10px;
		gap: 6px;
	}
	.hero-dot {
		width: 7px;
		height: 7px;
	}
	.hero-dot.is-active {
		width: 18px;
	}
}

.hero-grid {
	position: relative;
	/*z-index: 60;*/
	z-index: 2;
	display: grid;
	grid-template-columns: 1.55fr .65fr;
	gap: clamp(20px, 4vw, 45px);
	align-items: center;
	min-width: 0;
}

/* Belt-and-suspenders: the form card itself always wins any
   stacking comparison against the hero slider or page chrome,
   independent of where it sits in the DOM. */
.apply-drawer {
	position: relative;
	z-index: 10;
}





.hero-copy {
	/*padding: 25px 20px*/
		padding: clamp(60px, 22vw, 235px) 20px;
		min-width: 0;
}

.hero h1 {
	font-size: 42px;
	line-height: 1.18;
	margin: 0 0 18px;
	max-width: 600px
}

.hero h1 span {
	color: var(--maroon);
	display: block
}

.hero-copy>p {
	font-size: 17px;
	max-width: 500px;
	line-height: 1.6
}

.stat-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 25px
}

.stat-cards article,
.feature-grid article {
	background: #fff;
	/*border: 1px solid var(--line);*/
	border-radius: 9px;
	padding: 17px;
	text-align: center;
	box-shadow: 0 3px 12px #0000000d
}

.stat-cards article {
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(26px);
	transition: transform .55s cubic-bezier(.22, .61, .36, 1),
		box-shadow .45s ease,
		border-color .45s ease,
		opacity .55s ease;
}

.stat-cards article.in-view {
	opacity: 1;
	transform: translateY(0);
}

.stat-cards article:nth-child(1) { transition-delay: .05s; }
.stat-cards article:nth-child(2) { transition-delay: .17s; }
.stat-cards article:nth-child(3) { transition-delay: .29s; }
.stat-cards article:nth-child(4) { transition-delay: .41s; }

.stat-cards article::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--maroon), var(--navy));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.stat-cards article:hover {
	transform: translateY(-9px);
	box-shadow: 0 20px 36px rgba(18, 30, 80, .16);
	border-color: var(--maroon);
}

.stat-cards article:hover::before {
	transform: scaleX(1);
}

.stat-cards b {
	font-size: 26px;
	display: block;
	transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.stat-cards article:hover b {
	transform: scale(1.2) rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
	.stat-cards article {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.stat-cards b {
	font-size: 26px;
	display: block
}

.stat-cards strong {
	color: var(--maroon);
	display: block;
	margin: 8px 0
}

.stat-cards span {
	font-size: 12px
}

.apply-card {
	background: #fff;
	padding: 26px;
	border-radius: 16px;
	box-shadow: 0 14px 40px #15244a2b;
	display: grid;
	gap: 12px
}

.apply-card h2 {
	text-align: center;
	margin: 0 0 7px
}

.apply-card input,
.apply-card select {
	height: 45px;
	border: 1px solid #ccd1dc;
	border-radius: 5px;
	padding: 0 14px
}

.apply-card small {
	text-align: center
}

.dates {
	padding: 16px 0
}
/*
.date-grid {
	background: var(--soft);
	display: grid;
	grid-template-columns: 1.1fr repeat(4, 1fr) 1.15fr;
	grid-template-columns: 1.1fr repeat(2, 1fr) 1.15fr;
	align-items: center;
	border-radius: 6px;
	padding: 8px 15px
}
*/
.date-grid {
  background: var(--soft);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.date-grid {
  align-items: center;
  border-radius: 6px;
  padding: 8px 15px;
}





.date-grid>div {
	padding: 9px 16px;
	border-left: 1px solid var(--line)
}

.date-grid span {
	/*font-size: 11px;*/
		font-size: 13px;
	display: block
}

.date-grid b {
	font-size: 12px
}

.countdown {
	text-align: center;
	color: var(--maroon)
}

.countdown b {
	font-size: 19px
}

.section {
	padding: 16px 0
}

.section-title {
	text-align: center;
	margin: 8px 0 14px;
	font-size: 24px
}

.section-title.small {
	font-size: 16px
}

.five-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px
}

.feature-grid i {
	font-style: normal;
	font-size: 31px
}

.feature-grid h3 {
	font-size: 15px
}

.feature-grid p {
	/*font-size: 12px;*/
	font-size: 14px !important;
	line-height: 1.5
}

/* ==========================================================
   WHY CHOOSE NMIMS SBM — hover animation + staggered reveal
   ========================================================== */
#why .feature-grid article {
	position: relative;
	overflow: visible;
	/*cursor: pointer;*/
	/*outline: 2px solid rgba(163, 14, 40, 0);*/
	outline-offset: 0px;
	transition:
		transform .4s cubic-bezier(.22, .61, .36, 1),
		box-shadow .4s ease,
		border-color .4s ease,
		background .4s ease,
		outline-color .45s ease,
		outline-offset .45s cubic-bezier(.22, .61, .36, 1);
}

/* colour bar that sweeps in from the left on hover */
#why .feature-grid article::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--maroon, #a30e28), #e14a63);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	border-radius: inherit;
	overflow: hidden;
}

/* corner-bracket frame that draws itself around the card on hover —
   built from 4 small L-shaped corners so it reads as a "box" forming */
#why .feature-grid article::after {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	border-radius: 14px;
	background-image:
		linear-gradient(var(--maroon, #a30e28), var(--maroon, #a30e28)),
		linear-gradient(var(--maroon, #a30e28), var(--maroon, #a30e28)),
		linear-gradient(var(--maroon, #a30e28), var(--maroon, #a30e28)),
		linear-gradient(var(--maroon, #a30e28), var(--maroon, #a30e28));
	background-repeat: no-repeat;
	background-size: 18px 3px, 3px 18px, 18px 3px, 3px 18px;
	/*background-position: top left, top left, bottom right, bottom right;*/
	opacity: 0;
	transform: scale(.85);
	pointer-events: none;
	transition: opacity .35s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

#why .feature-grid article:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: 0 18px 34px rgba(8, 13, 56, .14);
	border-color: var(--maroon, #a30e28);
	background: #fffdfd;
	outline-color: rgba(163, 14, 40, .45);
	outline-offset: 6px;
}

#why .feature-grid article:hover::before {
	transform: scaleX(1);
}

#why .feature-grid article:hover::after {
	opacity: 1;
	transform: scale(1);
}

#why .feature-grid article i {
	display: inline-block;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

#why .feature-grid article:hover i {
	transform: scale(1.22) rotate(-8deg);
}

#why .feature-grid article h3 {
	transition: color .3s ease;
}

#why .feature-grid article:hover h3 {
	color: var(--maroon, #a30e28);
}

/* staggered fade-up-into-view, reusing the site-wide .reveal mechanism */
#why .section-title.reveal,
#why .feature-grid article.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
#why .section-title.reveal.is-visible,
#why .feature-grid article.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
#why .feature-grid article.reveal:nth-child(1) { transition-delay: .05s; }
#why .feature-grid article.reveal:nth-child(2) { transition-delay: .13s; }
#why .feature-grid article.reveal:nth-child(3) { transition-delay: .21s; }
#why .feature-grid article.reveal:nth-child(4) { transition-delay: .29s; }
#why .feature-grid article.reveal:nth-child(5) { transition-delay: .37s; }

@media (prefers-reduced-motion: reduce) {
	#why .feature-grid article,
	#why .feature-grid article i,
	#why .feature-grid article::before,
	#why .feature-grid article::after {
		transition: none;
	}
	#why .feature-grid article:hover {
		transform: none;
		outline-offset: 0px;
	}
}

.accreditations {
	background: #fff
}

.accred-track .accred-item {
	flex: 0 0 calc((100% - 72px)/4);
	text-align: center
}

.accred-item {
	padding: 0 8px
}

.accred-badge {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center
}

.laurel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%
}

.accred-icon {
	position: relative;
	font-size: 32px;
	z-index: 2
}

.accred-icon-img {
	position: relative;
	max-width: 56px;
	max-height: 56px;
	object-fit: contain;
	z-index: 2
}

.accred-item h3 {
	font-size: 16px;
	color: var(--navy);
	margin: 0 0 6px
}

.accred-item p {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.55;
	margin: 0
}

.accred-item p strong {
	color: var(--ink)
}

@media(max-width:900px) {
	.accred-track .accred-item {
		flex-basis: calc((100% - 18px)/2)
	}
}

@media(max-width:560px) {
	.accred-track .accred-item {
		flex-basis: 100%
	}
}

.placement {
	background: linear-gradient(100deg, #080d38, #111a4e);
	color: #fff;
	border-radius: 5px;
	display: grid;
	grid-template-columns: 1.7fr .65fr;
	overflow: hidden;
	margin-top: 8px
}

.placement>div:first-child {
	padding: 25px 30px
}

.placement h2 {
	margin-top: 0
}

.placement-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr)
}

.placement-stats p {
	/*border-right: 1px solid #ffffff55*/
		border-right: 0px solid #ffffff
}

.placement-stats b {
	font-size: 24px;
	color: #fff1a7;
	display: block
}

.placement-stats span {
	font-size: 11px
}

.visual {
	min-height: 210px;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 32px;
	font-weight: 900;
	background: linear-gradient(135deg, #c7d3df, #eef2f5);
	color: #172144
}

.logo-row {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 30px;
	overflow: auto;
	padding: 10px;
	font-size: 22px
}

.programs {
	background: var(--soft)
}

.four-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px
}

.program-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 9px;
	overflow: hidden;
	padding-bottom: 18px;
	display: flex;
	flex-direction: column;
	transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease, border-color .5s ease;
}

.program-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 22px 42px rgba(18, 30, 80, .18);
	border-color: var(--maroon);
}

.card-img {
	height: 125px;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 900;
	font-size: 24px;
	background: linear-gradient(135deg, #313d62, #929bb0);
	overflow: hidden;
}

.card-img img {
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.program-card:hover .card-img img {
	transform: scale(1.1);
}

.hr {
	background: linear-gradient(135deg, #7a4a3d, #d3b39c)
}

.pharma {
	background: linear-gradient(135deg, #216a83, #b9e5ed)
}

.analytics {
	background: linear-gradient(135deg, #16486e, #78b4df)
}

.program-card h3,
.program-card p,
.program-card span,
.program-card a {
	margin-left: 15px;
	margin-right: 15px
}

.program-card h3 {
	/*font-size: 15px;*/
		font-size: 16px;
	min-height: 34px
}

.program-card p,
.program-card span {
	/*font-size: 11px;*/
		font-size: 14px !important;
	line-height: 1.5
}

.program-card span {
	display: block;
	margin-top: 12px
}

.program-card a {
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: #121e8d;
	display: block;
	margin-top: 12px
}

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

.testimonials article {
	min-height: 165px;
	border-radius: 9px;
	color: #fff;
	padding: 20px;
	position: relative;
	background: linear-gradient(100deg, #344351, #9cabb6)
}

.testimonials span {
	background: var(--maroon);
	padding: 5px 8px;
	border-radius: 4px;
	font-size: 9px
}

.testimonials h3 {
	margin-bottom: 3px
}

.testimonials p {
	font-size: 12px;
	width: 65%;
	line-height: 1.6
}

.play {
	position: absolute;
	right: 18px;
	bottom: 18px;
	border: 0;
	border-radius: 50%;
	width: 36px;
	height: 36px
}


/*Start Campus Slider*/
/* =========================================
   LIFE AT NMIMS SBM SLIDER
========================================= */

.campus-slider {
    position: relative;

    padding: 0 50px;
}


.campus-viewport {
    width: 100%;

    overflow: hidden;
}


.campus-track {
    display: flex;

    gap: 18px;

    transition: transform 0.6s ease;

    will-change: transform;
}


/* 4 IMAGES ON DESKTOP */

.campus-slide {
    flex: 0 0 calc((100% - 54px) / 4);

    min-width: calc((100% - 54px) / 4);

    height: 190px;

    border-radius: 10px;

    overflow: hidden;

    background: #f5f7fb;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.10);
}


.campus-slide img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;
}


.campus-slide:hover img {
    transform: scale(1.06);
}


/* ARROWS */

.campus-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 42px;
    height: 42px;

    border: 1px solid #dfe3ec;

    border-radius: 50%;

    background: #ffffff;

    color: #080d38;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    display: flex;

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

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.15);

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.campus-arrow:hover {
    background: #a30e28;

    color: #ffffff;
}


.campus-prev {
    left: 0;
}


.campus-next {
    right: 0;
}


/* TABLET - 2 IMAGES */

@media (max-width: 900px) {

    .campus-slide {
        flex: 0 0 calc((100% - 18px) / 2);

        min-width: calc((100% - 18px) / 2);
    }

}


/* MOBILE - 1 IMAGE */

@media (max-width: 560px) {

    .campus-slider {
        padding: 0 38px;
    }


    .campus-slide {
        flex: 0 0 100%;

        min-width: 100%;

        height: 220px;
    }


    .campus-arrow {
        width: 36px;
        height: 36px;

        font-size: 26px;
    }

}
/*End Campus Slider*/
.campus-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px
}

.campus-grid div {
	height: 125px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 800;
	background: linear-gradient(135deg, #44556b, #b2bec8)
}

.steps {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	text-align: center
}

.steps article {
	position: relative
}

.steps b {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--maroon);
	color: #fff;
	margin: auto;
	font-size: 20px
}

.steps article:nth-child(even) b {
	background: var(--navy)
}

.steps h3 {
	font-size: 14px
}

.steps p {
	/*font-size: 11px*/
	font-size: 13px
}






.final-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 20px
}

.faq-wrap {
	background: var(--soft);
	padding: 20px;
	border-radius: 6px
}

.faq-wrap h2 {
	font-size: 18px
}

.faq-item {
	border-bottom: 1px solid #ccd1dc
}

.faq-q {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
	padding: 10px 0;
	display: flex;
	justify-content: space-between;
	cursor: pointer;
	font-size:16px !important;
}

.faq-a {
	display: none;
	/*font-size: 12px;*/
	font-size: 14px;
	line-height: 1.5;
	padding: 0 0 12px
}

.faq-item.open .faq-a {
	display: block
}

/* ============================================================
   FAQ "Read More" trigger button
   ============================================================ */
.faq-readmore-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 20px;
	background: var(--white);
	color: var(--maroon);
	border: 1.5px solid var(--maroon);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .2px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.faq-readmore-btn svg {
	transition: transform .2s ease;
}

.faq-readmore-btn:hover,
.faq-readmore-btn:focus-visible {
	background: var(--maroon);
	color: var(--white);
	box-shadow: 0 6px 16px rgba(163, 14, 40, .25);
	outline: none;
}

.faq-readmore-btn:hover svg,
.faq-readmore-btn:focus-visible svg {
	transform: translateX(3px);
}

.faq-readmore-btn:active {
	transform: scale(.97);
}

/* ============================================================
   FAQ Read More Popup (Modal)
   Centered card on desktop/tablet; slides up as a bottom sheet
   on small/mobile screens. Pure CSS transitions + JS toggling
   the [hidden] attribute and an .is-open class.
   ============================================================ */
.faq-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 22, 51, .55);
	backdrop-filter: blur(2px);
	z-index: 1000;
	opacity: 0;
	transition: opacity .25s ease;
}

.faq-modal-overlay.is-open {
	opacity: 1;
}

.faq-modal {
	position: fixed;
	z-index: 1001;
	left: 50%;
	top: 50%;
	width: min(720px, 92vw);
	max-height: min(82vh, 780px);
	transform: translate(-50%, -50%) scale(.96);
	background: var(--white);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(17, 22, 51, .3);
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.faq-modal.is-open {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

.faq-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(110deg, #a30e28, #7a0b1f);
	border-radius: 16px 16px 0 0;
	flex-shrink: 0;
}

.faq-modal-header h3 {
	color: #fff;
	font-size: 19px;
	margin: 0;
}

.faq-modal-close {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, transform .15s ease;
}

.faq-modal-close:hover,
.faq-modal-close:focus-visible {
	background: rgba(255, 255, 255, .3);
	outline: none;
}

.faq-modal-close:active {
	transform: scale(.92);
}

.faq-modal-body {
	padding: 8px 24px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.faq-modal-list .faq-item {
	border-bottom: 1px solid var(--line);
}

.faq-modal-list .faq-item:last-child {
	border-bottom: 0;
}

.faq-modal-list .faq-q {
	font-size: 15px !important;
	color: var(--ink);
}

.faq-modal-list .faq-q b {
	color: var(--maroon);
	flex-shrink: 0;
	margin-left: 12px;
	transition: transform .2s ease;
}

.faq-modal-list .faq-item.open .faq-q b {
	transform: rotate(180deg);
}

.faq-modal-list .faq-a {
	color: var(--muted);
}

.faq-modal-body::-webkit-scrollbar {
	width: 8px;
}

.faq-modal-body::-webkit-scrollbar-track {
	background: transparent;
}

.faq-modal-body::-webkit-scrollbar-thumb {
	background: #d8b6bd;
	border-radius: 8px;
}

.faq-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--line);
	text-align: center;
	flex-shrink: 0;
	background: var(--soft);
	border-radius: 0 0 16px 16px;
}

.faq-modal-footer .btn.primary {
	background: var(--maroon);
	color: #fff;
	border: 0;
	padding: 11px 28px;
	border-radius: 8px;
	font-weight: 700;
	display: inline-block;
	text-decoration: none;
	transition: background .2s ease, transform .15s ease;
}

.faq-modal-footer .btn.primary:hover {
	background: #7a0b1f;
	transform: translateY(-1px);
}

body.faq-modal-locked {
	overflow: hidden;
}

/* Tablet */
@media (max-width: 900px) {
	.faq-modal {
		width: 94vw;
		max-height: 86vh;
	}
}

/* Mobile: bottom-sheet style, full width, easier to reach with thumb */
@media (max-width: 600px) {
	.faq-modal {
		left: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		max-height: 88vh;
		border-radius: 18px 18px 0 0;
		transform: translateY(100%);
	}

	.faq-modal.is-open {
		transform: translateY(0);
	}

	.faq-modal-header {
		border-radius: 18px 18px 0 0;
		padding: 16px 18px;
	}

	.faq-modal-header h3 {
		font-size: 17px;
	}

	.faq-modal-body {
		padding: 4px 18px;
	}

	.faq-readmore-btn {
		width: 100%;
		justify-content: center;
	}
}

.cta {
	background: linear-gradient(110deg, #a30e28dd, #9a1027aa), linear-gradient(135deg, #5b6d80, #dce3e8);
	border-radius: 6px;
	padding: 38px;
	color: #fff
}

.cta h2 {
	font-size: 20px;
	line-height: 1.5
}

.light {
	background: #fff;
	color: var(--maroon)
}

footer {
    background: #000;
	/*background: var(--navy);*/
	color: #fff;
	/*padding: 20px 0*/
		padding: 1px 0
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/*text-align: center;*/
	text-align: left;
	font-size: 12px
	
}

.toast {
	position: fixed;
	right: 25px;
	bottom: 25px;
	background: var(--navy);
	color: #fff;
	padding: 15px 20px;
	border-radius: 7px;
	transform: translateY(100px);
	opacity: 0;
	transition: .3s;
	z-index: 100
}

.toast.show {
	transform: translateY(0);
	opacity: 1
}

/* ==========================================================
   TABLET REFINEMENT: smooths the hero banner between the
   two-column desktop layout and the stacked mobile layout so
   the form card doesn't feel cramped against the image on
   mid-size tablets/small laptops.
   ========================================================== */
@media (max-width: 1100px) {
	.hero-grid {
		grid-template-columns: 1.3fr .7fr;
		gap: 24px;
	}

	.hero-copy {
		padding: clamp(50px, 18vw, 150px) 16px;
	}
}

@media(max-width:900px) {
	.nav nav {
		display: none;
		position: absolute;
		top: 76px;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20px;
		flex-direction: column
	}

	.nav nav.open {
		display: flex
	}

	.menu-btn {
		display: block;
		margin-left: auto
	}

	.nav>.primary {
		display: none
	}

	.hero-grid,
	.placement,
	.final-grid {
		grid-template-columns: 1fr
	}

	.hero-grid .apply-drawer {
		order: -1
	}

	.hero-grid .hero-copy {
		order: 2
	}

	.five-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.four-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.date-grid {
		grid-template-columns: 1fr 1fr
	}

	.date-grid>strong {
		grid-column: 1/-1;
		padding: 10px
	}

	.three-grid {
		grid-template-columns: 1fr
	}

	.campus-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.steps {
		grid-template-columns: repeat(2, 1fr)
	}

	.hero h1 {
		font-size: 34px
	}

	.hero-copy {
		padding: clamp(40px, 55vw, 260px) 14px 24px;
	}

	.stat-cards {
		grid-template-columns: repeat(2, 1fr)
	}
}


@media (max-width: 900px) {
  #applyDrawerClose {
    display: block;
  }
}


@media(max-width:560px) {
	.brand {
		transform: scale(.85);
		transform-origin: left
	}

#applyDrawerClose{
    display:block;
}


	.quicklinks {
		grid-template-columns: 1fr 1fr;
		height: auto
	}

	.quicklinks a {
		padding: 12px
	}

	.hero h1 {
		font-size: 29px
	}

	.hero-copy {
		padding: clamp(30px, 50vw, 220px) 12px 20px;
	}

	.hero-grid {
		gap: 16px;
	}

	.four-grid,
	.five-grid,
	.steps,
	.footer-grid {
		grid-template-columns: 1fr
	}

	.placement-stats {
		grid-template-columns: 1fr 1fr
	}

	.campus-grid {
		grid-template-columns: 1fr 1fr
	}

	.date-grid {
		grid-template-columns: 1fr
	}

	.logo-row {
		justify-content: flex-start
	}
}

.carousel-shell {
	position: relative;
	padding: 0 44px
}

.carousel-viewport {
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none
}

.carousel-viewport.is-dragging {
	cursor: grabbing
}

.carousel-track {
	display: flex;
	gap: 18px;
	transition: transform .9s cubic-bezier(.22, .61, .36, 1)
}

.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
	font-size: 28px;
	cursor: pointer
}

.carousel-arrow.prev {
	left: 0
}

.carousel-arrow.next {
	right: 0
}

.recruiter-logo {
	/*flex: 0 0 180px;
	height: 78px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff*/
	
	flex: 0 0 202px;
    height: 135px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.recruiter-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px
}

.program-track .program-card {
	flex: 0 0 calc((100% - 54px)/4)
}

.program-card-body {
	padding: 0 15px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.program-card-body h3,
.program-card-body p,
.program-card-body span {
	margin-left: 0;
	margin-right: 0
}

.program-card-body p {
	font-size: 12px;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 74px
}

.program-link {
	border: 0;
	background: none;
	padding: 0;
	color: #121e8d;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	margin-top: auto;
	padding-top: 12px;
	display: inline-block;
	width: fit-content;
	transition: transform .35s cubic-bezier(.22,.61,.36,1), color .35s ease;
}

.program-link:hover {
	color: var(--maroon);
	transform: translateX(5px);
}

.digital {
	background: linear-gradient(135deg, #5a174f, #c34f8c)
}

.program-modal {
	position: fixed;
	inset: 0;
	background: #080d38b8;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px
}

.program-modal.open {
	display: flex
}

.program-modal-card {
	background: #fff;
	width: min(760px, 96%);
	max-height: 86vh;
	overflow: auto;
	border-radius: 12px;
	padding: 32px;
	position: relative
}

.modal-close {
	position: absolute;
	right: 18px;
	top: 12px;
	border: 0;
	background: none;
	font-size: 32px;
	cursor: pointer
}

.program-modal-card h2 {
	color: var(--maroon)
}

.program-modal-card p,
.program-modal-card li {
	font-size: 14px;
	line-height: 1.65;
	color: #3e4357
}

@media(max-width:900px) {
	.program-track .program-card {
		flex-basis: calc((100% - 18px)/2)
	}
}

@media(max-width:560px) {
	.carousel-shell {
		padding: 0 36px
	}

	.program-track .program-card {
		flex-basis: 100%
	}

	.recruiter-logo {
		flex-basis: 145px
	}
}

.voices-track .voice-card {
	flex: 0 0 calc((100% - 36px)/3);
	min-height: 185px;
	border-radius: 9px;
	color: #fff;
	padding: 20px;
	position: relative;
	background: linear-gradient(100deg, #344351, #9cabb6)
}

.voice-card span {
	background: var(--maroon);
	padding: 5px 8px;
	border-radius: 4px;
	font-size: 9px
}

.voice-card h3 {
	margin-bottom: 3px
}

.voice-card p {
	font-size: 12px;
	width: 68%;
	line-height: 1.6
}

.alumni {
	background: linear-gradient(135deg, #2a5298, #080d38);
	color: #fff
}

.alumni .section-title {
	color: #fff
}

.alumni-track .alumni-card {
	flex: 0 0 calc((100% - 54px)/4);
	background: #fff;
	border-radius: 10px;
	padding: 0 0 22px;
	position: relative;
	text-align: left;
	color: var(--ink);
	overflow: hidden;
	transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}

/* accent bar that sweeps in along the top on hover */
.alumni-track .alumni-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--maroon, #a30e28), #e14a63);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
	z-index: 2;
}

.alumni-track .alumni-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 34px rgba(8,13,56,.22);
}

.alumni-track .alumni-card:hover::before {
	transform: scaleX(1);
}

.alumni-photo {
	position: relative;
	width: 100%;
	height: 210px;
	background: #eef1f7;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.alumni-photo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius:	73px;	
	object-fit: contain;
	display: block;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}

.alumni-track .alumni-card:hover .alumni-photo img {
	transform: scale(1.08) rotate(-1deg);
}

.batch-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #eaf1fb;
	color: var(--navy);
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	line-height: 1.35;
	padding: 5px 10px;
	border-radius: 6px;
	z-index: 2;
	transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s ease, color .35s ease;
}

.alumni-track .alumni-card:hover .batch-badge {
	transform: scale(1.08);
	background: var(--maroon, #a30e28);
	color: #fff;
}

.alumni-card h3 {
	margin: 16px 18px 6px;
	font-size: 16px;
	color: var(--navy);
	transition: color .3s ease;
}

.alumni-track .alumni-card:hover h3 {
	color: var(--maroon, #a30e28);
}

.alumni-card p {
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted);
	min-height: 52px;
	/*margin: 0 18px 14px*/
		margin: 0 18px 0px
}

.alumni-company {
	/*height: 28px;*/
	display: flex;
	align-items: center;
	margin: 0 18px;
	transition: transform .35s ease;
}

.alumni-track .alumni-card:hover .alumni-company {
	transform: translateX(3px);
}

.alumni-company img {
	max-height: 100%;
	max-width: 130px;
	object-fit: contain;
	filter: grayscale(45%);
	opacity: .82;
	transition: filter .4s ease, opacity .4s ease;
}

.alumni-track .alumni-card:hover .alumni-company img {
	filter: grayscale(0%);
	opacity: 1;
}

/* fade-up-into-view for the heading + carousel shell */
.alumni .section-title.reveal,
.alumni .carousel-shell.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.alumni .section-title.reveal.is-visible,
.alumni .carousel-shell.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.alumni-track .alumni-card,
	.alumni-track .alumni-card::before,
	.alumni-photo img,
	.batch-badge,
	.alumni-card h3,
	.alumni-company,
	.alumni-company img {
		transition: none;
	}
	.alumni-track .alumni-card:hover {
		transform: none;
	}
}

@media(max-width:900px) {
	.alumni-track .alumni-card {
		flex-basis: calc((100% - 18px)/2)
	}
}

@media(max-width:560px) {
	.alumni-track .alumni-card {
		flex-basis: 100%
	}
}

.video-modal {
	position: fixed;
	inset: 0;
	background: #080d38d9;
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px
}

.video-modal.open {
	display: flex
}

.video-modal-card {
	width: min(900px, 95%);
	background: #000;
	border-radius: 12px;
	position: relative;
	overflow: hidden
}

.video-modal video {
	width: 100%;
	max-height: 78vh;
	display: block
}

.video-close {
	position: absolute;
	right: 12px;
	top: 8px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #111;
	font-size: 28px;
	cursor: pointer
}

.steps {
	display: grid;
	grid-template-columns: 1fr 55px 1fr 55px 1fr 55px 1fr 55px 1fr 55px 1fr;
	gap: 0;
	align-items: start;
	text-align: center
}

.step-arrow {
	font-size: 40px;
	color: var(--maroon);
	font-weight: 700;
	align-self: start;
	padding-top: 6px
}



@media (max-width: 900px) {
    .steps {
        display: grid;
        grid-template-columns: 1fr 35px 1fr;
        row-gap: 25px;
        column-gap: 15px;
    }

    .steps article:nth-of-type(3),
    .steps article:nth-of-type(4) {
        margin-top: 0;
    }
    
    .step-arrow:nth-of-type(4) {
    display: none;
}

    .step-arrow {
        font-size: 30px;
    }

    /* Hide the vertical arrow between rows */
    .step-arrow:nth-of-type(2) {
        display: none;
    }
}


/*
@media(max-width:900px) {
	.voices-track .voice-card {
		flex-basis: calc((100% - 18px)/2)
	}

	.steps {
		grid-template-columns: 1fr 35px 1fr 
	}

	.steps article:nth-of-type(3),
	.steps article:nth-of-type(4) {
		margin-top: 25px
	}

	.step-arrow {
		font-size: 30px
	}

	.step-arrow:nth-of-type(2) {
		display: none
	}
}
*/


@media(max-width:560px) {
	.voices-track .voice-card {
		flex-basis: 100%
	}

	/* Mobile step layout: number circle on the LEFT, heading +
	   description on the RIGHT (row layout instead of the old
	   stacked/centered layout), with a downward arrow connecting
	   each step to the next -- aligned under the number column so
	   it lines up correctly at any phone width. */
	.steps {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0
	}

	.steps article {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		width: 100%;
		margin: 0 !important;
		text-align: left
	}

	.steps article b {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin: 2px 0 0;
		font-size: 17px
	}

	.steps article h3,
	.steps article p {
		text-align: left
	}

	.steps article h3 {
		margin: 0 0 4px
	}

	.steps article p {
		margin: 0
	}

	.step-arrow {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		margin: 4px 0 !important;
		padding: 0;
		transform: rotate(90deg);
		font-size: 22px
	}
}
















/*start*/
/* VIDEO MODAL BACKGROUND */

.video-modal {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(8, 13, 56, 0.95);

    z-index: 99999;

    display: none;

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

    padding: 30px;
}


.video-modal.open {
    display: flex;
}


/* LARGE YOUTUBE VIDEO CONTAINER */

.video-modal-card {
    position: relative;

    width: 95vw;
    max-width: 1000px;

    background: #000000;

    border-radius: 14px;

    overflow: visible;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.60);
}


/* YOUTUBE VIDEO */

.youtube-video-wrapper {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000;

    border-radius: 14px;

    overflow: hidden;
}


.youtube-video-wrapper iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    border-radius: 14px;
}


/* CLOSE BUTTON */

.video-close {
    position: absolute;

    top: -22px;
    right: -22px;

    z-index: 999999;

    width: 52px;
    height: 52px;

    padding: 0;

    border: 3px solid #ffffff;

    border-radius: 50%;

    background: #a30e28;

    color: #ffffff;

    font-size: 32px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    display: flex;

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

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);

    transition: transform 0.2s ease,
                background 0.2s ease;
}


.video-close:hover {
    background: #7f091e;

    transform: scale(1.08);
}


.video-close:active {
    transform: scale(0.95);
}


/* TABLET */

@media (max-width: 900px) {

    .video-modal {
        padding: 25px;
    }

    .video-modal-card {
        width: 96vw;
    }

    .video-close {
        top: -18px;
        right: -10px;

        width: 48px;
        height: 48px;

        font-size: 28px;
    }

}


/* MOBILE */

@media (max-width: 560px) {

    .video-modal {
        padding: 15px;
    }

    .video-modal-card {
        width: 100%;
    }

    .video-close {
        top: -20px;
        right: 0;

        width: 44px;
        height: 44px;

        font-size: 26px;
    }

}
/*end*/




/*Start*/


/* =========================================
   VOICES OF SUCCESS
========================================= */

.voices-track {
    display: flex;
    gap: 20px;
}


/* 3 CARDS PER SLIDE */

.voices-track .voice-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: calc((100% - 40px) / 3);

    box-sizing: border-box;
}


/* YOUTUBE CARD */

.youtube-card {
    position: relative;

    height: 270px;

    border-radius: 12px;

    overflow: hidden;

    background: #080d38;

    padding: 0 !important;

    cursor: pointer;
}


/* YOUTUBE THUMBNAIL */

.video-thumbnail {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    z-index: 1;

    transition: transform 0.5s ease;
}


.youtube-card:hover .video-thumbnail {
    transform: scale(1.06);
}


/* DARK GRADIENT */

.video-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
        to top,
        rgba(8, 13, 56, 0.98) 0%,
        rgba(8, 13, 56, 0.65) 38%,
        rgba(8, 13, 56, 0.10) 70%,
        rgba(8, 13, 56, 0) 100%
    );
}


/* STUDENT CONTENT */

.voice-content {
    position: absolute;

    left: 22px;
    bottom: 20px;

    z-index: 3;

    color: #ffffff;
}


.voice-content h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 21px;

    font-weight: 700;
}


.voice-content small {
    display: block;

    margin-bottom: 5px;

    color: #ffffff;

    font-size: 12px;

    opacity: 0.85;
}


.voice-content p {
    margin: 0;

    width: 100%;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;
}


/* PLAY BUTTON */

.youtube-card .play {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 5;

    width: 62px;
    height: 62px;

    border: 3px solid #ffffff;

    border-radius: 50%;

    background: rgba(163, 14, 40, 0.92);

    color: #ffffff;

    font-size: 24px;

    cursor: pointer;

    display: flex;

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

    padding: 0 0 0 4px;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.youtube-card .play:hover {
    transform: translate(-50%, -50%) scale(1.12);

    background: #a30e28;
}


/* TABLET - 2 CARDS */

@media (max-width: 900px) {

    .voices-track .voice-card {
        flex: 0 0 calc((100% - 20px) / 2);
        min-width: calc((100% - 20px) / 2);
    }

}


/* MOBILE - 1 CARD */

@media (max-width: 560px) {

    .voices-track .voice-card {
        flex: 0 0 100%;
        min-width: 100%;
    }


    .youtube-card {
        height: 240px;
    }


    .youtube-card .play {
        width: 54px;
        height: 54px;

        font-size: 21px;
    }

}



/*start campus slider*/
/* =====================================
   LIFE AT NMIMS SBM SLIDER
===================================== */

.life-slider {
    position: relative;

    width: 100%;

    padding: 0 50px;

    box-sizing: border-box;
}


.life-viewport {
    width: 100%;

    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.life-viewport.is-dragging {
    cursor: grabbing;
}


.life-track {
    display: flex;

    gap: 15px;

    transition: transform 0.6s ease;

    will-change: transform;
}


/* 4 IMAGES ON DESKTOP */

.life-slide {
    position: relative;

    flex: 0 0 calc((100% - 45px) / 4);

    min-width: calc((100% - 45px) / 4);

    height: 190px;

    border-radius: 10px;

    overflow: hidden;

    background: #f5f7fb;

    box-sizing: border-box;

    box-shadow: 0 3px 12px rgba(0,0,0,.06);

    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}

.life-slide:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(8,13,56,.18);
}


.life-slide img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease, filter .5s ease;
}


.life-slide:hover img {
    transform: scale(1.1);
}

/* caption bar at the bottom of each image box */
.life-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 20px 12px 10px;

    background: linear-gradient(to top, rgba(8,13,56,.88), rgba(8,13,56,0));

    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    line-height: 1.3;

    transform: translateY(6px);
    opacity: .92;

    transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .35s ease, padding-top .4s ease;
}

.life-caption::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin-bottom: 6px;
    border-radius: 2px;
    background: #e14a63;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

.life-slide:hover .life-caption {
    transform: translateY(0);
    opacity: 1;
    padding-top: 30px;
}

.life-slide:hover .life-caption::before {
    transform: scaleX(1);
}

/* staggered fade-up-into-view */
#campus .section-title.reveal,
.life-slider.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
#campus .section-title.reveal.is-visible,
.life-slider.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .life-slide,
    .life-slide img,
    .life-caption,
    .life-caption::before {
        transition: none;
    }
    .life-slide:hover {
        transform: none;
    }
    .life-slide:hover img {
        transform: none;
    }
    .life-caption {
        transform: none;
        padding-top: 20px;
    }
}


/* ARROWS */

.life-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid #dfe3ec;

    border-radius: 50%;

    background: #ffffff;

    color: #080d38;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.15);
}


.life-arrow:hover {
    background: #a30e28;

    color: #ffffff;
}


.life-prev {
    left: 0;
}


.life-next {
    right: 0;
}


/* TABLET */

@media (max-width: 900px) {

    .life-slide {
        flex: 0 0 calc((100% - 15px) / 2);

        min-width: calc((100% - 15px) / 2);
    }

}


/* MOBILE */

@media (max-width: 560px) {

    .life-slider {
        padding: 0 40px;
    }


    .life-slide {
        flex: 0 0 100%;

        min-width: 100%;

        height: 220px;
    }


    .life-arrow {
        width: 36px;
        height: 36px;

        font-size: 25px;
    }

}
/*end campus slider*/

/*STEP1 AND STEP2 FORM START*/
/* =========================================================
   NMAT HERO FORM BEAUTIFICATION
   ONLY FORM / STEP 1 / STEP 2
   HERO CONTENT IS NOT TOUCHED
========================================================= */


/* RIGHT FORM CARD */

.hero .apply-card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    padding: 22px 24px 20px;
    box-shadow: 0 24px 60px rgba(7, 15, 55, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}


/* FORM TITLE */

.hero .apply-card > h2 {
    margin: 0 0 16px;
    color: #111633;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
}


/* =========================================================
   STEP 1 / STEP 2 TABS
========================================================= */

.hero .apply-card #myTab {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    margin: 0 0 20px !important;
    padding: 4px;

    border: 0;
    border-radius: 12px;

    background: #f3f5f9;

    list-style: none;
}


.hero .apply-card #myTab .nav-item {
    flex: 1;
    margin: 0;
    border: 0 !important;
}


.hero .apply-card #myTab .nav-link {
    position: relative;

    width: 100%;
    min-height: 44px;

    padding: 11px 15px !important;

    border: 0;
    border-radius: 9px;

    color: #73798a;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;

    text-align: center;
    text-decoration: none;

    background: transparent;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}


.hero .apply-card #myTab .nav-link.active {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #8f0c22,
        #b51431
    );

    box-shadow: 0 7px 18px rgba(163, 14, 40, 0.25);
}


.hero .apply-card #myTab .nav-link:hover {
    color: #a30e28;
}


.hero .apply-card #myTab .nav-link.active:hover {
    color: #ffffff;
}


/* STEP CONTENT */

.hero .apply-card .tab-content {
    width: 100%;
}


.hero .apply-card .tab-pane {
    width: 100%;
}


.hero .apply-card .tab-pane.fade {
    display: none;
}


.hero .apply-card .tab-pane.fade.show.active {
    display: block;
}


/* =========================================================
   REMOVE BOOTSTRAP NEGATIVE ROW MARGINS INSIDE FORM
========================================================= */

.hero .apply-card .row {
    margin-left: 0;
    margin-right: 0;
}


.hero .apply-card [class*="col-"] {
    box-sizing: border-box;
}


/* =========================================================
   STEP 1 FORM
========================================================= */

.hero .apply-card #mainApplicationForm {
    width: 100%;
    margin: 0;
}


.hero .apply-card .formDiv,
.hero .apply-card .models_formDiv__xNk0h {
    width: 100%;
}


.hero .apply-card .models_formCont__g0yzh {
    display: flex;
    flex-wrap: wrap;

    row-gap: 11px;

    margin: 0;
}


/* FORM COLUMN SPACING */

.hero .apply-card .px-md-2 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}


.hero .apply-card .col-md-12 {
    width: 100%;
}


.hero .apply-card .col-md-6,
.hero .apply-card .col-lg-6 {
    width: 50%;
}


/* =========================================================
   INPUTS + SELECTS
========================================================= */

.hero .apply-card .models_fieldGroup__C0awJ {
    width: 100%;
    margin: 0;
}


.hero .apply-card input:not([type="hidden"]):not([type="checkbox"]),
.hero .apply-card select {
    width: 100%;
    height: 46px;

    margin: 0;
    padding: 0 13px;

    border: 1px solid #d9dee8;
    border-radius: 8px;

    outline: none;

    background: #f9fafc;
    color: #252a3a;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.hero .apply-card input:not([type="hidden"]):not([type="checkbox"])::placeholder {
    color: #8a91a1;
    opacity: 1;
}


.hero .apply-card input:not([type="hidden"]):not([type="checkbox"]):focus,
.hero .apply-card select:focus {
    border-color: #a30e28;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(163, 14, 40, 0.09);
}


.hero .apply-card select {
    cursor: pointer;

    appearance: auto;
}


/* =========================================================
   MOBILE NUMBER FIELD
========================================================= */

.hero .apply-card .mobile-input-group {
    display: flex;

    width: 100%;
    height: 46px;
}


.hero .apply-card #countryCodeInput {
    width: 60px !important;
    min-width: 60px;

    padding: 0 !important;

    border-radius: 8px 0 0 8px !important;

    background: #eef1f6 !important;

    color: #30384b;

    text-align: center;

    font-weight: 700;
}


.hero .apply-card #mobile {
    flex: 1;

    min-width: 0;

    border-left: 0 !important;

    border-radius: 0 8px 8px 0 !important;
}


/* REMOVE NUMBER ARROWS */

.hero .apply-card #mobile::-webkit-inner-spin-button,
.hero .apply-card #mobile::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* =========================================================
   OTP FIELD
========================================================= */

.hero .apply-card .models_OTPButton__osVob {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

    width: 100%;
}


.hero .apply-card #genarteOTP,
.hero .apply-card .genarteOTPBtn {
    width: 100%;
    height: 46px;

    padding: 0 8px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #101b73,
        #182a9b
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    box-shadow: 0 6px 14px rgba(17, 30, 138, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.hero .apply-card #genarteOTP:hover {
    transform: translateY(-1px);

    box-shadow: 0 9px 18px rgba(17, 30, 138, 0.25);
}


.hero .apply-card #otpInput_enquirey_form {
    width: 100%;
}


.hero .apply-card #otpInput_enquirey_form:disabled {
    background: #eef0f4;

    color: #9ba1ad;

    cursor: not-allowed;
}


/* =========================================================
   FEEDBACK / OTP MESSAGE
========================================================= */

.hero .apply-card #feedback {
    width: 100%;

    margin: 0;
    padding: 9px 11px;

    border-radius: 7px;

    font-size: 11px;
    line-height: 1.4;

    box-sizing: border-box;
}


/* =========================================================
   STATE + CITY
========================================================= */

.hero .apply-card #inputState,
.hero .apply-card #inputDistrict {
    width: 100%;
}


/* =========================================================
   CONSENT
========================================================= */

.hero .apply-card #applicationFields {
    width: 100%;

    margin-top: 3px !important;
    padding: 10px 6px 4px !important;

    box-sizing: border-box;
}


.hero .apply-card #applicationFields .form-check {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin: 0;
    padding: 0;
}


.hero .apply-card #defaultCheck1 {
    width: 16px;
    height: 16px;

    min-width: 16px;

    margin: 2px 0 0;

    accent-color: #a30e28;

    cursor: pointer;
}


.hero .apply-card #applicationFields label {
    margin: 0;

    color: #616878;

    font-size: 10px;
    line-height: 1.45;

    cursor: pointer;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.hero .apply-card #submitApplicationButton {
    width: 100%;
    height: 46px;

    margin-top: 2px;

    padding: 0 18px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #8f0c22,
        #b51431
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.5px;

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(163, 14, 40, 0.23);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


.hero .apply-card #submitApplicationButton:not(:disabled):hover {
    transform: translateY(-1px);

    box-shadow: 0 11px 24px rgba(163, 14, 40, 0.32);
}


.hero .apply-card #submitApplicationButton:disabled,
.hero .apply-card #submitApplicationButton.disabled {
    opacity: 0.48;

    cursor: not-allowed;

    box-shadow: none;
}


/* =========================================================
   STEP 1 HELP TEXT
========================================================= */

.hero .apply-card #tab1 p {
    margin: 8px 5px 0;

    color: #6a7180;

    font-size: 10px;
    line-height: 1.5;

    text-align: center;
}


/* HIDE EMPTY SPACER PARAGRAPH */

.hero .apply-card #tab1 p:empty {
    display: none;
}


/* =========================================================
   STEP 2
========================================================= */

.hero .apply-card #tab2 {
    min-height: 385px;
}


.hero .apply-card #tab2 > .row {
    min-height: 385px;
}


.hero .apply-card #tab2 .col-md-12 {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 25px 22px !important;

    text-align: center;
}


.hero .apply-card #tab2 .col-md-12::before {
    content: "✓";

    display: flex;

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

    width: 54px;
    height: 54px;

    margin-bottom: 15px;

    border-radius: 50%;

    background: rgba(163, 14, 40, 0.09);

    color: #a30e28;

    font-size: 26px;
    font-weight: 800;
}


.hero .apply-card #tab2 p {
    max-width: 390px;

    margin: 0 0 14px !important;

    color: #5e6574;

    font-size: 12px;
    line-height: 1.65;

    text-align: center;
}


/* STEP 2 BUTTON */

.hero .apply-card #tab2 .btn-red {
    display: inline-flex;

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

    min-height: 46px;

    padding: 0 24px;

    border-radius: 8px;

    background: linear-gradient(
        135deg,
        #8f0c22,
        #b51431
    );

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(163, 14, 40, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.hero .apply-card #tab2 .btn-red:hover {
    transform: translateY(-1px);

    color: #ffffff;

    box-shadow: 0 11px 25px rgba(163, 14, 40, 0.3);
}


/* ELIGIBILITY LINK */

.hero .apply-card #tab2 a[style*="color:#cf0015"] {
    margin: 5px 0 15px;

    padding: 8px 13px;

    border: 1px solid rgba(163, 14, 40, 0.16);

    border-radius: 7px;

    background: #fff8f9;

    color: #a30e28 !important;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .hero .apply-card {
        padding: 19px 16px 18px;

        border-radius: 14px;
    }


    .hero .apply-card > h2 {
        font-size: 21px;
    }


    .hero .apply-card .col-md-6,
    .hero .apply-card .col-lg-6 {
        width: 50%;
    }


    .hero .apply-card input:not([type="hidden"]):not([type="checkbox"]),
    .hero .apply-card select,
    .hero .apply-card #genarteOTP,
    .hero .apply-card #submitApplicationButton {
        height: 44px;
    }


    .hero .apply-card .mobile-input-group {
        height: 44px;
    }


    .hero .apply-card #tab2 {
        min-height: 350px;
    }


    .hero .apply-card #tab2 > .row {
        min-height: 350px;
    }

}


@media (max-width: 480px) {

    .hero .apply-card .col-md-6,
    .hero .apply-card .col-lg-6 {
        width: 100%;
    }


    .hero .apply-card .models_OTPButton__osVob {
        grid-template-columns: 1fr 1fr;
    }


    .hero .apply-card #myTab .nav-link {
        font-size: 12px;
    }

}




/* ==================================================
   NMAT PREMIUM STEP BUTTONS
================================================== */

.hero .apply-card .nmat-step-navigation {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0 0 22px;
    padding: 8px;

    border: 1px solid #e7e9ef;
    border-radius: 16px;

    background: #f7f8fb;

    list-style: none;

    box-sizing: border-box;
}


/* STEP ITEM */

.hero .apply-card .nmat-step-item {
    flex: 1;

    margin: 0;
    padding: 0;
}


/* STEP BUTTON */

.hero .apply-card .nmat-step-button {
    position: relative;

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

    gap: 10px;

    min-height: 58px;

    padding: 8px 12px;

    border: 1px solid transparent;
    border-radius: 11px;

    background: transparent;

    color: #7a8191;

    text-decoration: none;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* NUMBER */

.hero .apply-card .step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    min-width: 34px;

    border: 2px solid #d8dce5;
    border-radius: 50%;

    background: #ffffff;

    color: #858c9b;

    font-size: 14px;
    font-weight: 800;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


/* STEP TEXT */

.hero .apply-card .step-text {
    display: flex;
    flex-direction: column;

    text-align: left;

    line-height: 1.15;
}


.hero .apply-card .step-text small {
    margin-bottom: 3px;

    color: #9ba1ad;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.8px;
}


.hero .apply-card .step-text strong {
    color: #626979;

    font-size: 13px;
    font-weight: 800;
}


/* ACTIVE STEP */

.hero .apply-card .nmat-step-button.active {
    background:
        linear-gradient(
            135deg,
            #8e0b22,
            #b41431
        );

    color: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(163, 14, 40, 0.25);

    transform: translateY(-1px);
}


.hero .apply-card
.nmat-step-button.active
.step-number {
    border-color: #ffffff;

    background: #ffffff;

    color: #a30e28;
}


.hero .apply-card
.nmat-step-button.active
.step-text small {
    color: rgba(255, 255, 255, 0.72);
}


.hero .apply-card
.nmat-step-button.active
.step-text strong {
    color: #ffffff;
}


/* HOVER */

.hero .apply-card
.nmat-step-button:not(.active):hover {
    background: #ffffff;

    border-color: #e3e6ed;

    transform: translateY(-1px);

    box-shadow:
        0 6px 15px
        rgba(15, 24, 56, 0.07);
}


/* CONNECTOR */

.hero .apply-card .step-connector {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;

    padding: 0 6px;
}


.hero .apply-card .step-connector span {
    position: relative;

    display: block;

    width: 100%;
    height: 2px;

    background: #d8dce5;
}


.hero .apply-card .step-connector span::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -1px;

    width: 7px;
    height: 7px;

    border-top: 2px solid #b3b8c4;
    border-right: 2px solid #b3b8c4;

    transform:
        translateY(-50%)
        rotate(45deg);
}


/* ==================================================
   IMPORTANT: STEP CONTENT VISIBILITY
================================================== */

.hero .apply-card #myTabContent .tab-pane {
    display: none !important;

    opacity: 0;

    visibility: hidden;
}


.hero .apply-card
#myTabContent
.tab-pane.show.active {
    display: block !important;

    opacity: 1;

    visibility: visible;

    animation: nmatStepFade 0.35s ease;
}


@keyframes nmatStepFade {

    from {
        opacity: 0;

        transform: translateY(7px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* MOBILE */

@media (max-width: 480px) {

    .hero .apply-card
    .nmat-step-navigation {
        padding: 6px;

        border-radius: 13px;
    }


    .hero .apply-card
    .nmat-step-button {
        min-height: 52px;

        gap: 7px;

        padding: 7px;
    }


    .hero .apply-card
    .step-number {
        width: 30px;
        height: 30px;

        min-width: 30px;

        font-size: 12px;
    }


    .hero .apply-card
    .step-text small {
        font-size: 7px;
    }


    .hero .apply-card
    .step-text strong {
        font-size: 11px;
    }


    .hero .apply-card
    .step-connector {
        width: 20px;

        padding: 0 3px;
    }

}
/*STEP1 AND STEP2 FORM END*/






/* ==========================================================
   ACCREDITATIONS SLIDER (#ranking)
   ========================================================== */
   :root{
    --acc-navy:#152238;
    --acc-gold:#C9973E;
    --acc-gold-dark:#a97c2c;
    --acc-text:#4b5563;
    --acc-bg:#ffffff;
  }

  #ranking{ background:var(--acc-bg); padding:44px 0; font-family:Arial,Helvetica,sans-serif; }
  #ranking .section-heading{
    font-family:Arial,Helvetica,sans-serif;
    font-weight:800;
    letter-spacing:1px;
    font-size:1.5rem;
    color:var(--navy, var(--acc-navy));
    text-align:center;
    /*margin:0 0 8px;*/
    margin:0 0 2px;
  }
  @media (min-width:576px){
    #ranking{ 
        /*padding:52px 0; */
        padding:02px 0;
    }
    #ranking .section-heading{ font-size:1.75rem; }
  }
  @media (min-width:992px){
    #ranking{ 
        /*padding:64px 0;*/
        padding:14px 0;
        }
    #ranking .section-heading{ font-size:2rem; }
  }

  .acc-slider{ position:relative; padding:16px 32px; }
  @media (min-width:576px){ .acc-slider{ padding:18px 44px; } }
  @media (min-width:992px){ .acc-slider{ padding:20px 56px; } }

  /* generic scroll-reveal: fade + rise into place once, the first time
     an element enters the viewport (used by the accreditation block and
     the legacy-stats boxes below it) */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.is-visible{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  .acc-track{
    display:flex;
    gap:0;
    /*overflow-x:auto;*/
    overflow: hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .acc-track::-webkit-scrollbar{ height:0; background:transparent; }

  .acc-track .item{
    position:relative;
    flex:0 0 auto;
    /*width:90%;*/
     width:100%;
    min-height:210px;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
  }
  .acc-track .item:hover{ transform:translateY(-6px) scale(1.035); }
  /* 2 logos visible */
  @media (min-width:480px){ .acc-track .item{ width:50%; min-height:225px; padding:0 12px; } }
  /* 3 logos visible */
  @media (min-width:768px){ .acc-track .item{ width:33.3333%; min-height:240px; } }
  /* 4 logos visible */
  @media (min-width:992px){ .acc-track .item{ width:25%; min-height:250px; } }

  /* the real wreath graphic — left+right halves in one file, framing the
     gap in the middle. Stretched to match whatever height the text needs,
     same way every item in the reference shot lines up to one common height */
  .item .img-yellow{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
    z-index:0;
    pointer-events:none;
    opacity:.88;
    transition:opacity .35s ease;
  }
  .acc-track .item:hover .img-yellow{ opacity:1; }

  /* content sits inside the gap in the middle of the wreath */
  .centered1{
    position:relative;
    z-index:1;
    width:84%;
    margin:0 auto;
    text-align:center;
  }
  @media (min-width:992px){ .centered1{ width:78%; } }

  /* the real accreditation logo — capped by height so AACSB's round seal,
     EQUIS's wide wordmark, and the rest all line up on one visual baseline,
     but also capped by width so a wide wordmark like EQUIS can never spill
     outside its column on narrow phones — it scales down by width instead */
  .centered1 img.img-fluid{
    display:block;
    max-height:56px;
    max-width:100%;
    width:auto;
    height:auto;
    margin:0 auto 10px;
    object-fit:contain;
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
  }
  .acc-track .item:hover .centered1 img.img-fluid{ transform:scale(1.1); }

  .para{ font-size:.8rem; color:var(--acc-text); line-height:1.45; margin:0; }
  .para .font-weight-bold{ display:inline-block; font-size:.95rem; color:var(--acc-navy); margin-bottom:2px; }
  .para b{ color:var(--acc-navy); }
  @media (min-width:576px){
    .para{ font-size:.85rem; line-height:1.5; }
    .para .font-weight-bold{ font-size:1rem; }
  }

  .acc-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:30px; height:30px; border-radius:50%;
    border:1px solid #e2e2e2; background:#fff;
    color:var(--acc-navy); font-size:.75rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:2;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
    transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
  }
  .acc-nav:hover{ transform:translateY(-50%) scale(1.12); }
  @media (min-width:576px){ .acc-nav{ width:34px; height:34px; font-size:.85rem; } }
  @media (min-width:992px){ .acc-nav{ width:38px; height:38px; font-size:.9rem; } }
  .acc-nav:hover{ background:#f4f0e6; border-color:var(--maroon, #C9973E); color:var(--maroon, var(--acc-navy)); }
  .acc-nav--prev{ left:0; }
  .acc-nav--next{ right:0; }

  @media (prefers-reduced-motion: reduce){
    .acc-track{ scroll-behavior:auto; }
  }


/* ==========================================================
   LEGACY / QUICK-STATS STRIP (#legacyStats)
   4-box highlight row, staggered fade-up reveal + hover lift
   ========================================================== */
.legacy-stats{
  background:linear-gradient(180deg, #ffffff 0%, var(--soft, #f5f7fb) 100%);
  padding:36px 0 44px;
  border-top:1px solid var(--line, #dfe3ec);
  border-bottom:1px solid var(--line, #dfe3ec);
}

.legacy-stats-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}
@media (min-width:768px){
  /*.legacy-stats-grid{ grid-template-columns:repeat(4, 1fr); gap:20px; }*/
  .legacy-stats-grid{ grid-template-columns:repeat(5, 1fr); gap:20px; }
}

.legacy-stat{
  background:#fff;
  border:1px solid var(--line, #dfe3ec);
  border-radius:14px;
  padding:22px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  box-shadow:0 2px 10px rgba(8,13,56,.05);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s ease,
             border-color .35s ease;
}
.legacy-stat:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 30px rgba(8,13,56,.14);
  border-color:var(--maroon, #a30e28);
}

.legacy-stat-icon{
  font-size:2rem;
  line-height:1;
  margin-bottom:6px;
  display:inline-block;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.legacy-stat:hover .legacy-stat-icon{
  transform:scale(1.18) rotate(-6deg);
}

.legacy-stat-value{
  font-size:1.35rem;
  font-weight:800;
  color:var(--navy, #080d38);
  letter-spacing:.2px;
}

.legacy-stat-label{
  font-size:.82rem;
  color:var(--muted, #606579);
  line-height:1.35;
}

@media (min-width:576px){
  .legacy-stat-value{ font-size:1.5rem; }
  .legacy-stat-label{ font-size:.88rem; }
  .legacy-stat-icon{ font-size:2.25rem; }
}

/* stagger the fade-up as the row comes into view */
.legacy-stats-grid .reveal:nth-child(1){ transition-delay:.05s; }
.legacy-stats-grid .reveal:nth-child(2){ transition-delay:.15s; }
.legacy-stats-grid .reveal:nth-child(3){ transition-delay:.25s; }
.legacy-stats-grid .reveal:nth-child(4){ transition-delay:.35s; }

@media (prefers-reduced-motion: reduce){
  .legacy-stat, .legacy-stat-icon{ transition:none; }
}

/* ==========================================================
   APPLICATION FORM (#apply / .hero .apply-card)
   Entrance reveal + micro-interactions
   ========================================================== */

/* card pops/fades in the first time it scrolls into view */
#apply.reveal.apply-reveal {
  opacity: 0;
  transform: translateY(30px) scale(.96);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
#apply.reveal.apply-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* gentle ambient glow breathing on the card border, draws the eye
   without being distracting */
@keyframes applyCardGlow {
  0%, 100% { box-shadow: 0 24px 60px rgba(7, 15, 55, 0.24); }
  50%      { box-shadow: 0 24px 60px rgba(7, 15, 55, 0.24), 0 0 0 5px rgba(163, 14, 40, 0.06); }
}
.hero .apply-card {
  animation: applyCardGlow 4.5s ease-in-out infinite;
  transition: transform .35s ease, box-shadow .35s ease;
}
.hero .apply-card:hover {
  transform: translateY(-3px);
}

/* step tabs / nmat-step-button: small lift + number pop already exist,
   add a tiny scale to the number badge on hover for extra feedback */
.hero .apply-card .nmat-step-button:not(.active):hover .step-number {
  transform: scale(1.1);
  border-color: var(--maroon, #a30e28);
}
.hero .apply-card .step-number {
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* Step 1 / Step 2 tab links: subtle rise + underline sweep */
.hero .apply-card #myTab .nav-link {
  transform: translateY(0);
}
.hero .apply-card #myTab .nav-link:hover {
  transform: translateY(-1px);
}

/* input focus: soft upward nudge in addition to existing glow ring */
.hero .apply-card input:not([type="hidden"]):not([type="checkbox"]),
.hero .apply-card select {
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.hero .apply-card input:not([type="hidden"]):not([type="checkbox"]):focus,
.hero .apply-card select:focus {
  transform: translateY(-1px);
}

/* Generate-OTP button: shimmer sweep across the button on hover */
.hero .apply-card #genarteOTP,
.hero .apply-card .genarteOTPBtn {
  position: relative;
  overflow: hidden;
}
.hero .apply-card #genarteOTP::after,
.hero .apply-card .genarteOTPBtn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.hero .apply-card #genarteOTP:hover::after,
.hero .apply-card .genarteOTPBtn:hover::after {
  left: 130%;
}

/* Submit button: shimmer sweep + subtle attention pulse when enabled */
.hero .apply-card #submitApplicationButton {
  position: relative;
  overflow: hidden;
}
.hero .apply-card #submitApplicationButton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.hero .apply-card #submitApplicationButton:not(:disabled):hover::after {
  left: 130%;
}
@keyframes submitPulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(163, 14, 40, 0.23); }
  50%      { box-shadow: 0 8px 20px rgba(163, 14, 40, 0.23), 0 0 0 6px rgba(163, 14, 40, 0.08); }
}
.hero .apply-card #submitApplicationButton:not(:disabled) {
  animation: submitPulse 2.6s ease-in-out infinite;
}
.hero .apply-card #submitApplicationButton:not(:disabled):hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  #apply.reveal.apply-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero .apply-card,
  .hero .apply-card #submitApplicationButton:not(:disabled) {
    animation: none;
  }
  .hero .apply-card:hover,
  .hero .apply-card input:focus,
  .hero .apply-card select:focus,
  .hero .apply-card .nmat-step-button:not(.active):hover .step-number {
    transform: none;
  }
}

/* ==========================================================
   MOBILE "APPLY NOW" SLIDE-IN FORM DRAWER
   Desktop: .apply-drawer is just a plain wrapper sitting in its
   normal grid column -- layout is 100% unchanged from before.
   Mobile (<=900px, same breakpoint the site already uses to
   stack the hero grid): the wrapper becomes an off-canvas panel,
   hidden by default, that slides in from the right when any
   "Apply Now" trigger is tapped.
   ========================================================== */
.apply-drawer-overlay {
  display: none;
}

@media (max-width: 900px) {
  .apply-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(92vw, 420px);
    z-index: 1001;
    background: #fff;
    box-shadow: -14px 0 40px rgba(7, 15, 55, .28);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    padding: 18px 14px 30px;
  }

  .apply-drawer.is-open {
    transform: translateX(0);
    height: 687px;
    border-radius: 42px;
    margin-top: 80px;
  }

  .apply-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 0 8px auto;
    border: none;
    border-radius: 50%;
    background: #f1f1f4;
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  /* neutralize the unrelated scroll-fade transform that normally
     plays on #apply so it doesn't fight with the drawer's own
     translateX slide animation above */
  .apply-drawer #apply.reveal.apply-reveal,
  .apply-drawer #apply.reveal.apply-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .apply-drawer-overlay.is-open {
    display: block;
    /*position: fixed;*/
    inset: 0;
    background: rgba(7, 15, 55, .45);
    z-index: 1000;
  }

  body.apply-drawer-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apply-drawer {
    transition: none;
  }
}

/* ==========================================================
   HERO BANNER: minimum height safety net
   The banner's real height comes from the .hero-copy clamp()
   padding (see above), and the slider fills that box via
   position:absolute; inset:0. These min-heights are just a
   fallback so the slider never collapses to 0 height while
   fonts/images are still loading. The desktop vs. mobile image
   swap itself now happens in HTML via <picture>/<source> on
   each .hero-slide, not here.
   ========================================================== */
@media (max-width: 900px) {
  .hero {
    min-height: 260px;
  }
}

@media (max-width: 380px) {
  .hero {
    min-height: 220px;
  }
}