html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

:focus-visible {
    outline: 3px solid rgba(255,200,61,.9);
    outline-offset: 3px;
}

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

    * {
        animation-duration: .001ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .001ms!important;
    }
}

:root {
    --yellow: #ffc540;
    --navyLight: #1A4393;
    --navyDark: #10316d;
    --red: #ed2224;
    --green: #139040;
    --orange: #f28a20;
    --white: #ffffff;
    --divider: #cbd5e1;
    --radiusLg: 15px;
    --radiusMd: 10px;
}

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

body {
    font-family: "Open Sans",sans-serif;
    line-height: 1.5;
    color: #000;
}

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

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

a {
    text-decoration: none;
}

.container {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 1680px) {
    .container {
        padding:0 20px;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    color: var(--navyDark);
    padding: 12px 24px;
    border-radius: var(--radiusMd);
    border: 1px solid var(--navyDark);
    font-weight: 700;
    font-size: clamp(16px,2vw,24px);
    text-transform: uppercase;
    cursor: pointer;
}

.btn:hover {
    background: var(--navyDark);
    color: var(--white);
}

.section {
    padding: 80px 0;
}

.section-head {
    text-align: center;
    margin-bottom: 40px;
}

.section-head h3 {
    font-size: 40px;
    font-weight: 400;
    color: var(--navyLight);
}

.section-head h3 span {
    font-weight: 600;
}

.section-title {
    font-size: clamp(22px,4vw,48px);
    font-weight: 400;
    color: var(--navyLight);
}

.section-title span {
    font-weight: 700;
}

.section-subtitle {
    font-size: clamp(14px,2vw,24px);
    font-weight: 400;
    margin-top: 12px;
}

.section-subtitle em {
    font-weight: 700;
}

/* ---------------------------------- header------------------------------------ */
.mainHeader {
    background: var(--white);
    border-bottom: 1px solid #e5e7eb;
}

.headerContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 17px;
    padding-bottom: 17px;
}

.headerLogo {
    width: clamp(187px,40vw,357px);
    height: auto;
}

@media (max-width: 768px) {
    .headerBtn {
        display:none;
    }
}

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

.heroSection {
    position: relative;
    min-height: 750px;
    padding: 40px 0;
    background: url("../images/banner/hero-bg.webp") left/cover no-repeat;
    overflow: hidden;
}

.heroContainer {
    position: relative;
    z-index: 4;
    padding-right: 520px;
}

.heroContent {
    position: relative;
    z-index: 6;
    max-width: 720px;
    display: flex;
    flex-direction: column;
}

.heroLogoOne {
    width: 241px;
    height: 120px;
    margin-bottom: 70px;
}

.heroKicker {
    font-size: 28px;
    font-weight: 700;
    color: #214e96;
    letter-spacing: -1px;
}

.heroTitle {
    font-family: "Playfair Display",serif;
    text-shadow: 4px 4px 4px #fff;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    color: #ed2224;
    margin: 10px 0 70px;
}

.heroLogoTwo {
    width: 147px;
    height: auto;
}

.heroSubTitle {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 32px;
    color: #3967a7;
    letter-spacing: -1px;
}

.programmeCard {
    background: #fff;
    border-radius: var(--radiusMd);
    overflow: hidden;
    max-width: 475px;
}

.programmeHead {
    background: var(--navyLight);
    color: #fff;
    padding: 10px 0;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
}

.programmeBody {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    font-size: 34px;
    font-weight: 700;
    color: var(--navyLight);
    border: 3px solid var(--yellow);
    border-radius: 0 0 10px 10px;
}

.programmeBody .sep {
    color: var(--red);
}

.studentsPic {
    position: absolute;
    bottom: -6px;
    left: 34%;
    transform: translateX(-18%);
    width: fit-content;
    z-index: 2;
    pointer-events: none;
}

.studentsPic img {
    width: 100%;
    height: auto;
    display: block;
}

/* Form */
.form {
    width: 100%;
    height: auto;
    position: absolute;
    right: 35px;
    min-height: 550px;
    border-radius: 20px;
    max-width: 410px;
    top: 50px;
    text-align: center;
    padding: 20px;
    scroll-margin-top: 120px;
    background: linear-gradient(90deg,#0F2F6D 0%,#2958A5 100%);
    z-index: 9999
}

.enquiryTitle {
    font-size: 16px;
    font-weight: 700;
    color: var(--yellow);
    margin-bottom: 5px;
}

#frm .npf_wgts iframe {
    height: 550px;
}

/* ---------------------------------- Why TSLAS ------------------------------------ */
.why4c .section-title span {
    color: var(--red);
}

.subtitleTwo span {
    color: var(--navyLight)!important;
}

.why4c {
    position: relative;
    overflow: hidden;
    padding: 65px 0 80px;
    background: #fff;
}

.why4c::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 432px;
    height: 507px;
    background: url("../images/why-element-1.webp") no-repeat;
    background-size: contain;
    background-position: left top;
    pointer-events: none;
    z-index: 0;
}

.why4c-stage {
    position: relative;
    z-index: 1;
}

.why4c-grid {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 108px;
}

.why4c-col {
    display: flex;
    flex-direction: column;
    gap: 162px;
}

.why4c-center {
    display: grid;
    place-items: center;
}

.why4cCircle {
    width: 417px;
    height: 417px;
    border-radius: 50%;
    background: #f9f9f9;
    box-shadow: 4px 8px 20px 2px #00000040;
    display: grid;
    place-items: center;
    position: relative;
}

.why4cCircleBg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: url("../images/4c-bg.webp") center/80% auto no-repeat;
}

.why4cCircleText {
    font-size: 90px;
    font-weight: 700;
    position: relative;
    background: linear-gradient(180deg,#4483ff 0%,#08152d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.why4cItem {
    display: grid;
    grid-template-columns: 76px minmax(0,1fr);
    column-gap: 18px;
    align-items: start;
    max-width: 560px;
}

.why4cContent {
    min-width: 0;
}

.why4cTitle {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--navyLight);
    line-height: 1.2;
    white-space: normal;
}

.why4cTitle span {
    font-size: 42px;
    font-weight: 700;
}

.why4cText {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: #2b3850;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.why4cIcon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 7px rgba(245,238,238,1),0 10px 22px rgba(0,0,0,.08);
    margin-top: 20px;
}

.why4cIcon img {
    width: 58px;
    height: auto;
    display: block;
}

.clr-red .why4cTitle span {
    color: #e53935;
}

.clr-orange .why4cTitle span {
    color: #f57c00;
}

.clr-green .why4cTitle span {
    color: #1e8e3e;
}

.clr-blue .why4cTitle span {
    color: #1e4fa3;
}

/* ---------------------------------- Choose Your Path------------------------------------ */
.pathSection {
    background: #f3faff;
    padding: 60px 0 55px;
}

.pathSection .section-head {
    margin-bottom: 30px;
}

.pathTitle {
    text-align: center;
    font-size: 48px;
    font-weight: 400;
    color: var(--navyLight);
}

.pathTitle span {
    font-weight: 700;
}

.pathSubtitle {
    text-align: center;
    font-size: 24px;
    margin: 14px 0 20px;
}

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

.pathCard {
    background: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pathCard h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 14px;
}

.pathCard ul {
    padding-left: 18px;
    font-size: 18px;
    line-height: 1.23;
}

li::marker {
    color: #7a7a7a;
}

.pathCard li {
    font-style: italic;
    margin-bottom: 6px;
}

.pathCard.clr-red .pathCorner {
    background: #e53935;
}

.pathCard.clr-yellow .pathCorner {
    background: #fbc02d;
}

.pathCard.clr-green .pathCorner {
    background: #2e7d32;
}

.pathCard.clr-orange .pathCorner {
    background: #ef6c00;
}

.pathCardContent {
    padding: 25px 20px 10px;
    flex: 1;
}

.pathImageWrap img {
    width: 100%;
    height: 263px;
    object-fit: cover;
}

.pathCorner {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pathCornerTl {
    top: -6px;
    left: -6px;
}

.pathCornerTr {
    top: -6px;
    right: -6px;
}

.pathCornerBl {
    bottom: -6px;
    left: -6px;
}

.pathCornerBr {
    bottom: -6px;
    right: -6px;
}

/* ---------------------------------- Thapar Advantage ------------------------------------ */
.advantageSection {
    background: #f5f9ff;
    overflow: hidden;
}

.advantageWrapper {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    min-height: 520px;
}

.advantageLeft {
    position: relative;
    background: url("../images/thapar-advantage.webp") center/cover no-repeat;
    padding: 70px 70px 70px 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.advantageLeft::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 454px;
    height: 380px;
    background: url("../images/advantage-element-1.webp") center/contain no-repeat;
    opacity: 1;
}

.advantageLeftInner {
    text-align: center;
    margin-top: 10px;
    max-width: 520px;
}

.advantageSubtitle {
    color: var(--navyLight);
}

.advantageSubtitle em {
    font-style: italic;
    font-weight: 700;
}

.advantageRight {
    background: linear-gradient(270deg,#0f2f6d 0%,#2958a5 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 70px;
}

.advantageRightDesktop {
    padding: 70px 60px 70px 0;
}

.advantageArrow {
    overflow: visible;
}

.advantageArrow {
    --accent: #ffcc4d;
    --hoverFill: #ffcc4d;
    position: relative;
    width: 92%;
    text-align: left;
    border: 2px solid var(--accent);
    background: #fff;
    color: #111;
    cursor: pointer;
    padding: 5px 45px;
    font-size: 20px;
    line-height: 1.5;
    transition: background 220ms ease,border-color 220ms ease;
    outline: none;
    min-height: 85px;
}

.advantageArrow::before {
    content: "";
    position: absolute;
    left: -46px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 44px solid transparent;
    border-bottom: 44px solid transparent;
    border-right: 46px solid var(--accent);
}

.advantageArrow::after {
    content: "";
    position: absolute;
    right: -3px;
    top: -3px;
    bottom: -3px;
    width: 30px;
    background: #133575;
    clip-path: polygon(100% 0,0 50%,100% 100%,100% 50%);
}

.advantageArrowIcon {
    position: absolute;
    left: -76px;
    top: 50%;
    transform: translate(-16px,-50%);
    opacity: 0;
    pointer-events: none;
    width: 145px;
    height: 145px;
    border-radius: 999px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
    transition: transform 240ms ease,opacity 240ms ease;
    z-index: 2;
}

.advantageArrowIcon::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    border: 6px solid var(--accent);
}

.advantageArrowIcon img {
    width: 80px;
    height: auto;
    position: relative;
    z-index: 2;
}

.advantageArrowText {
    position: relative;
    z-index: 1;
}

.advantageArrow:hover,.advantageArrow:focus-visible,.advantageArrow.is-active {
    background: var(--hoverFill);
    border-color: var(--hoverFill);
    color: #111;
    border: none;
}

.advantageArrow:hover::before,.advantageArrow:focus-visible::before,.advantageArrow.is-active::before {
    width: 200px;
    height: 100%;
    left: -100px;
    top: 0;
    transform: none;
    border: none;
    background: var(--hoverFill);
    z-index: 0;
}

.advantageArrow:hover .advantageArrowIcon,.advantageArrow:focus-visible .advantageArrowIcon,.advantageArrow.is-active .advantageArrowIcon {
    left: -200px;
    opacity: 1;
    transform: translate(0,-50%);
}

.clr-yellow {
    --accent: #ffcc4d;
}

.clr-red {
    --accent: #e53935;
}

.clr-green {
    --accent: #2e7d32;
}

.clr-orange {
    --accent: #ef6c00;
}

.advantageMobile {
    display: none;
}

.advantageMobileTop {
    position: relative;
    background: url("../images/thapar-advantage.webp") center/cover no-repeat;
    min-height: 420px;
    padding: 34px 18px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.advantageMobileTop::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 14px;
    width: 120px;
    height: 120px;
    background: url("../images/dots.webp") center/contain no-repeat;
}

.advantageRightMobile {
    padding: 18px 18px 26px;
    gap: 18px;
}

.advantageStackItem {
    --accent: #ffcc4d;
    position: relative;
    background: #ffcc4d;
    padding: 18px 28px 18px 96px;
    font-size: 16px;
    line-height: 1.55;
    color: #111;
    border-radius: 0;
}

.advantageStackItem::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 29px;
    background: #10316f;
    clip-path: polygon(100% 0,0 50%,100% 100%,100% 50%);
}

.advantageStackIcon {
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 74px;
    height: 74px;
    background: #fff;
    border-radius: 999px;
    display: grid;
    place-items: center;
}

.advantageStackIcon::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 999px;
    border: 5px solid var(--accent);
}

.advantageStackIcon img {
    width: 32px;
    position: relative;
    z-index: 1;
}

.advantageStackItem p {
    margin: 0;
}

/* ---------------------------------- Global Opportunity Partner Slider ----------------------------------- */
.partnersSection {
    background: radial-gradient(circle at top,#fff 0%,#f5f9ff 60%);
}

.partnersSection.section {
    padding: 60px 0;
}

.partnersSlider {
    width: 100%;
    overflow: hidden;
    padding: 28px 0 10px;
}

.partnersSlider .slick-list {
    overflow: visible;
}

.partnersSlider .slick-track {
    display: flex!important;
    align-items: center;
}

.partnersSlider .slick-slide {
    height: auto;
    box-sizing: border-box;
}

.partnersSlide {
    display: flex!important;
    align-items: center;
    justify-content: center;
}

.partnersSlide img {
    max-width: 100%;
    height: auto;
    display: block;
}

.partnersSlider .slick-dots,.partnersSlider .slick-arrow {
    display: none!important;
}

.partnersSlider .slick-slide:focus,.partnersSlider .slick-slide div:focus {
    outline: none;
}

.partnersGridMobile {
    display: none;
}

/* ---------------------------------- Real World Opportunity Section----------------------------------- */
.realWorldSection {
    padding: 70px 0 0;
    background: radial-gradient(circle at bottom,#fff 0%,#f8fafd 60%);
    overflow: hidden;
}

.opportunityVisual--mobile {
    display: none;
}

.opportunityVisual--desktop {
    display: block;
}

.opportunityVisual--desktop {
    margin-top: 40px;
    padding: 0 0 90px;
    background: url("../images/globe-opportunities.webp") center bottom/90% no-repeat;
}

.opportunityPoints {
    position: relative;
    height: clamp(240px,26vw,480px);
    min-height: unset;
    aspect-ratio: unset;
}

.opItem {
    position: absolute;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
}

.opItem img {
    width: 80px;
    height: auto;
    display: block;
}

.opItem .opLine {
    width: 2px;
    background: currentColor;
    margin: 12px auto 0;
    opacity: .85;
}

.opItem .opDot {
    width: 10px;
    height: 10px;
    background: currentColor;
    border-radius: 50%;
    margin: 0 auto;
}

.opItem.clr-red,.opCard.clr-red {
    color: #e53935;
}

.opItem.clr-green,.opCard.clr-green {
    color: #1e8e3e;
}

.opItem.clr-orange,.opCard.clr-orange {
    color: #f57c00;
}

.opItem.clr-blue,.opCard.clr-blue {
    color: #1e4fa3;
}

.marketing .opLine {
    height: 66px;
}

.corpcom .opLine {
    height: 80px;
}

.hr .opLine {
    height: 116px;
}

.digital .opLine {
    height: 146px;
}

.content .opLine {
    height: 154px;
}

.analytics .opLine {
    height: 127px;
}

.research .opLine {
    height: 90px;
}

.csr .opLine {
    height: 65px;
}

.marketing {
    left: 0%;
    top: 70%;
    transform: translateX(-10%);
}

.corpcom {
    left: 16%;
    top: 37%;
    transform: translateX(-50%);
}

.hr {
    left: 29%;
    top: 14%;
    transform: translateX(-50%);
}

.digital {
    left: 42%;
    top: 3%;
    transform: translateX(-50%);
}

.content {
    left: 56%;
    top: 2%;
    transform: translateX(-50%);
}

.analytics {
    left: 68%;
    top: 19%;
    transform: translateX(-50%);
}

.research {
    left: 82%;
    top: 40%;
    transform: translateX(-50%);
}

.csr {
    left: 98%;
    top: 56%;
    transform: translateX(-90%);
}

/* ---------------------------------- Scholarship Section 1------------------------------------ */
.scholarshipSection {
    position: relative;
    background: url("../images/scholarships-bg\ .webp") center/cover no-repeat;
    overflow: visible;
    padding: 85px 0 40px;
}

.scholarshipSection::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 665px;
    height: 349px;
    background: url("../images/scholarships-elements.webp") no-repeat center/contain;
    background-size: contain;
    background-position: right top;
    pointer-events: none;
    z-index: 0;
}

.scholarshipSection::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(0deg,rgba(0,86,255,.2),transparent);
    pointer-events: none;
}

.scholarshipHeader {
    text-align: center;
    margin-bottom: 60px;
}

.scholarshipHeader h2 {
    font-size: 44px;
    font-weight: 400;
    color: #123b8a;
}

.scholarshipHeader h2 span {
    font-weight: 700;
}

.scholarshipHeader p {
    margin-top: 10px;
    font-size: 18px;
}

.scholarshipCards {
    display: grid;
    grid-template-columns: 265px 265px 265px 265px;
    gap: 15px;
    justify-content: center;
    align-items: end;
    margin-bottom: 20px;
}

.scholarshipCard {
    border-radius: 18px;
    padding: 20px;
    position: relative;
    box-shadow: 4px 4px 8px 0 #001fd040;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.scholarshipCard.size-xl {
    height: 402px;
    background: #dbe9ff;
}

.scholarshipCard.size-lg {
    height: 292px;
    background: #dbe9ff;
}

.scholarshipCard.size-md {
    height: 223px;
    background: #ebf2ff;
}

.scholarshipCard.size-sm {
    height: 178px;
    background: #edf4ff;
}

.scholarshipCard.clr-red,.cardTop .clr-red {
    color: #e53935;
}

.scholarshipCard.clr-green,.cardTop .clr-green {
    color: #1e8e3e;
}

.scholarshipCard.clr-orange,.cardTop .clr-orange {
    color: #f57c00;
}

.scholarshipCard.clr-blue,.cardTop .clr-blue {
    color: #1e4fa3;
}

.note {
    text-align: right;
    font-size: 18px;
    margin-bottom: 60px;
    margin-right: 110px;
}

.note em {
    font-weight: 600;
}

.eligibilityHeader {
    text-align: center;
    margin-bottom: 40px;
}

.eligibilityHeader h3 {
    font-size: 34px;
    font-weight: 400;
    color: #123b8a;
}

.eligibilityHeader h3 span {
    font-weight: 700;
}

.eligibilityGrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
    padding-top: 20px;
}

.eligibilityItem {
    position: relative;
    background: #fff;
    padding: 45px 20px 20px;
    border: 3px solid #e53935;
}

.eligibilityItem::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -3px;
    width: 80%;
    height: 5px;
    background: #fff;
}

.eligibilityItem::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -4px;
    width: 5px;
    height: 85%;
    background: #fff;
}

.eligibilityCheck {
    position: absolute;
    top: -28px;
    left: 20%;
    height: 51px;
    display: flex;
    align-items: center;
    z-index: 2;
}

.eligibilityDot {
    position: absolute;
    right: -8px;
    bottom: 10%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background: #e53935;
    border-radius: 50%;
    z-index: 111;
}

.eligibilityItem p {
    font-size: 18px;
    line-height: 1.5;
    color: #111;
}

.eligibilityItem em {
    color: #123b8a;
    font-style: italic;
    font-weight: 600;
}

.cardTop {
    font-size: 18px;
    font-weight: 500;
    color: #111;
}

.cardTop span {
    font-size: 30px;
    font-style: italic;
    font-weight: 600;
}

.cardTop .score {
    margin-right: 6px;
}

.arrowImg {
    align-self: flex-start;
    display: block;
}

.size-xl .arrowImg {
    width: 49px;
    margin: 25px 0;
}

.size-lg .arrowImg {
    width: 31px;
}

.size-md .arrowImg {
    width: 21px;
}

.size-sm .arrowImg {
    width: 14px;
}

.percent {
    font-weight: 600;
    line-height: 1;
}

.size-xl .percent {
    font-size: 110px;
}

.size-lg .percent {
    font-size: 100px;
}

.size-md .percent {
    font-size: 75px;
}

.size-sm .percent {
    font-size: 55px;
}

.percent span {
    font-size: 36px;
    margin-left: 6px;
}

.label {
    font-size: 20px;
    font-weight: 400;
    color: #1f2937;
}

/* ---------------------------------- Admission Process Section----------------------------------- */
.admissionSection {
    background: linear-gradient(90deg,#0f2f6d 0%,#2958a5 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
    padding-bottom: 20px;
}

.admissionSection::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-image: url("../images/process-desktop.webp");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    top: -20%;
}

.admissionSection .section-title,.admissionSection .section-subtitle {
    color: #fff;
}

.admissionFullBleed {
    width: 100%;
    margin-top: clamp(22px,4vw,50px);
}

.admissionCanvas {
    position: relative;
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 16px;
    isolation: isolate;
    aspect-ratio: 20/6;
    min-height: 360px;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timelineStep {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
    max-width: 367px;
    transform-origin: center;
}

.stepsTitle {
    font-size: clamp(18px,1.55vw,24px);
    font-weight: 600;
    margin: 0 0 8px;
}

.stepsDesc {
    font-size: clamp(12px,2vw,16px);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.stepIcon {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: #1a4393;
    box-shadow: 0 16px 30px rgba(0,0,0,.25);
    backdrop-filter: blur(2px);
}

.stepIcon::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.1));
    -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.stepIcon img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

.admissionStep1 {
    left: 5%;
    top: 38%;
}

.admissionStep2 {
    left: 26%;
    top: 4%;
}

.admissionStep3 {
    left: 50%;
    top: 14%;
    max-width: 420px;
}

.admissionStep4 {
    left: 76%;
    top: -16%;
}

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

/* ---------------------------------- Campus Life Slider----------------------------------- */
.campusLifeSection {
    background: #fff;
}

.campusLifeSection .section-head {
    margin-bottom: 0;
    padding: 50px 0 20px;
}

.campusLifeSection .section-subtitle {
    margin-top: 0;
    margin: 20px 0;
}

.campusHighlightDynamic {
    font-size: clamp(14px,2vw,24px);
    font-style: italic;
    color: var(--navyLight);
    font-weight: 600;
}

.campusSliderWrap {
    position: relative;
    background: #fff;
}

.campusSlide img {
    width: 100%;
    height: clamp(327px,55vw,770px);
    object-fit: cover;
    display: block;
}

.campusArrows {
    position: absolute;
    top: -120px;
    right: 100px;
    z-index: 10;
    display: flex;
    gap: 12px;
}

.campusArrow {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: #1a4393;
    cursor: pointer;
    position: relative;
}

.campusArrow::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

.campusPrev::before {
    transform: rotate(135deg);
}

.campusArrow:hover {
    background: #10316d;
}

/* ---------------------------------- Footer CTA----------------------------------- */
.ctaSection {
    padding: 0;
}

.ctaContentWrap {
    position: relative;
    overflow: hidden;
    background-color: #eaf3fb;
    background-image: url("../images/banner/footer-banner-desktop.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    min-height: 860px;
    display: flex;
    align-items: flex-start;
}

.ctaContentWrap .container {
    padding-top: clamp(20px,5vw,70px);
}

.ctaCenter {
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.ctaLogo {
    width: 305px;
    height: auto;
}

.ctaText {
    font-size: clamp(20px,2vw,32px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--navyLight);
}

.ctaText strong {
    font-weight: 700;
}

/* ---------------------------------- Footer ----------------------------------- */
.footerBar {
    background: var(--navyLight);
    color: var(--white);
    text-align: center;
    padding: clamp(10px,2vw,20px) 0;
}

.footerBar p {
    font-size: clamp(12px,2vw,20px);
}

/* ---------------------------------- Responsive------------------------------------ */
@media (max-width: 1650px) {
    .opItem {
        font-size:18px;
    }

    .opItem img {
        width: 55px;
    }

    .opItem .opLine {
        height: 100px;
    }

    .marketing {
        left: 6%;
        top: 65%;
    }

    .corpcom {
        left: 19%;
        top: 38%;
    }

    .hr {
        left: 32%;
        top: 19%;
    }

    .digital {
        left: 45%;
        top: 7%;
    }

    .content {
        left: 58%;
        top: 7%;
    }

    .analytics {
        left: 70%;
        top: 25%;
    }

    .research {
        left: 81%;
        top: 40%;
    }

    .csr {
        left: 95%;
        top: 53%;
    }
}

@media (max-width: 1440px) {
    .form {
        width: 350px;
    }

    .why4c-grid {
        gap: 18px;
    }

    .why4c::before {
        width: 265px;
        height: 312px;
    }

    .note {
        margin-right: 0;
    }

    .advantageArrow {
        font-size: 18px;
    }

    .advantageLeft {
        justify-content: normal;
        padding: 41px;
    }

    .advantageLeft::before {
        width: 318px;
        height: 263px;
    }

    .advantageWrapper {
        grid-template-columns: 1.5fr 1fr;
    }
}

@media (max-width: 1400px) {
    .heroContainer {
        padding-right:500px;
    }

    .enquiryCard {
        right: 3%;
    }

    .studentsPic {
        width: fit-content;
        transform: translateX(-22%);
    }

    .admissionStep4 {
        top: -28%;
    }

    .ctaContentWrap {
        min-height: 820px;
        background-position: calc(50% - 24%) bottom;
    }
}

@media (max-width: 1200px) {
    .heroTitle {
        font-size:36px;
        margin-bottom: 40px;
    }

    .programmeBody {
        font-size: 26px;
        padding: 12px;
    }

    .enquiryCard {
        width: 350px;
        top: 50px;
    }

    .heroContainer {
        padding-right: 470px;
    }

    .studentsPic {
        width: min(760px,66vw);
        transform: translateX(-22%);
    }

    .programmeCard {
        max-width: 365px;
    }

    .heroLogoOne {
        margin-bottom: 34px;
    }

    .why4c::before {
        display: none;
    }

    .why4c {
        padding: 52px 0 40px;
    }

    .why4c-stage {
        padding: 26px 0;
    }

    .why4c-grid {
        gap: 42px;
    }

    .why4c-col {
        gap: 28px;
    }

    .why4cCircle {
        width: 290px;
        height: 290px;
        box-shadow: 0 16px 34px rgba(0,0,0,.14);
    }

    .why4cCircleText {
        font-size: 68px;
    }

    .why4cItem {
        grid-template-columns: 66px minmax(0,1fr);
        column-gap: 14px;
        max-width: 460px;
    }

    .why4cTitle {
        font-size: 18px;
    }

    .why4cTitle span {
        font-size: 30px;
    }

    .why4cText {
        font-size: 15px;
    }

    .why4cIcon {
        width: 58px;
        height: 58px;
        box-shadow: 0 0 0 9px rgba(245,238,238,1),0 10px 20px rgba(0,0,0,.07);
    }

    .why4cIcon img {
        width: 50px;
    }

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

    .advantageArrow {
        width: 100%;
        padding: 5px 28px;
        font-size: 16px;
    }

    .advantageRight {
        gap: 30px;
    }

    .advantageRightDesktop {
        padding: 50px 20px 50px 0;
    }

    .advantageLeft::before {
        width: 186px;
        height: 155px;
    }

    .advantageArrowIcon {
        width: 125px;
        height: 125px;
    }

    .advantageArrowIcon img {
        width: 60px;
    }

    .advantageArrow:hover::before,.advantageArrow:focus-visible::before,.advantageArrow.is-active::before {
        left: -50px;
    }

    .advantageArrow:hover .advantageArrowIcon,.advantageArrow:focus-visible .advantageArrowIcon,.advantageArrow.is-active .advantageArrowIcon {
        left: -131px;
    }

    .advantageLeft {
        padding: 20px;
        justify-content: start;
    }

    .marketing {
        left: 6%;
        top: 55%;
    }

    .corpcom {
        left: 21%;
        top: 25%;
    }

    .hr {
        left: 35%;
        top: 3%;
    }

    .digital {
        left: 47%;
        top: -5%;
    }

    .content {
        left: 60%;
        top: -2%;
    }

    .analytics {
        left: 71%;
        top: 18%;
    }

    .research {
        left: 81%;
        top: 34%;
    }

    .csr {
        left: 96%;
        top: 40%;
    }

    .eligibilityCheck {
        left: 26%;
    }

    .scholarshipCards {
        grid-template-columns: 230px 230px 230px 230px;
    }

    .scholarshipSection::after {
        display: none;
    }

    .size-xl .percent {
        font-size: 90px;
    }

    .size-lg .percent {
        font-size: 80px;
    }

    .size-md .percent {
        font-size: 60px;
    }

    .size-sm .percent {
        font-size: 50px;
    }

    .scholarshipCard.size-xl {
        height: 350px;
    }

    .scholarshipCard.size-lg {
        height: 255px;
    }

    .scholarshipCard.size-md {
        height: 215px;
    }

    .scholarshipCard.size-sm {
        height: 192px;
    }

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

    .eligibilityItem::before {
        width: 74%;
    }

    .eligibilityGrid {
        gap: 40px;
    }

    .stepIcon {
        width: 90px;
        height: 90px;
    }

    .stepIcon img {
        width: 70px;
        height: 70px;
    }

    .admissionStep1 {
        left: 6%;
        top: 37%;
    }

    .admissionStep2 {
        left: 24%;
        top: 6%;
    }

    .admissionStep3 {
        left: 46%;
        top: 13%;
    }

    .admissionStep4 {
        left: 68%;
        top: -12%;
    }

    .campusArrows {
        top: -80px;
        right: 24px;
    }

    .campusArrow {
        width: 55px;
        height: 55px;
    }

    .ctaContentWrap {
        min-height: 820px;
        background-position: calc(50% - 21%) bottom;
    }
}

@media (max-width: 1024px) {
    .heroContainer {
        padding-right:0;
    }

    .enquiryCard {
        width: 330px;
        right: 3%;
        top: 90px;
    }

    .studentsPic {
        width: min(680px,72vw);
        transform: translateX(-27%);
    }

    .why4c-grid {
        gap: 18px;
    }

    .why4cCircle {
        width: 250px;
        height: 250px;
    }

    .partnersSlider {
        padding: 22px 0 8px;
    }

    .opportunityVisual--desktop {
        display: none;
    }

    .opportunityVisual--mobile {
        display: block;
    }

    .realWorldSection {
        padding: 70px 0 0;
        background: url("../images/real-world-mbl-bg.webp") center top/cover no-repeat;
    }

    .opportunityVisual--mobile {
        margin-top: 40px;
        padding: 20px 0 60px;
    }

    .opMobileGrid {
        display: grid;
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 34px 28px;
        align-items: start;
    }

    .opCard {
        text-align: center;
        font-weight: 600;
        line-height: 1.2;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 6px;
    }

    .opCard img {
        width: 68px;
        height: auto;
        display: block;
        margin-bottom: 12px;
    }

    .opCard span {
        display: block;
        max-width: 220px;
    }

    .scholarshipCards {
        display: grid;
        grid-template-columns: 180px 180px 180px 180px;
    }

    .eligibilityGrid {
        gap: 40px;
    }

    .size-xl .percent {
        font-size: 70px;
    }

    .size-lg .percent {
        font-size: 55px;
    }

    .size-md .percent {
        font-size: 40px;
    }

    .size-sm .percent {
        font-size: 30px;
    }

    .percent span {
        font-size: 25px;
    }

    .label {
        font-size: 16px;
    }

    .cardTop span {
        font-size: 20px;
    }

    .scholarshipCard.size-xl {
        height: 309px;
    }

    .scholarshipCard.size-lg {
        height: 210px;
    }

    .scholarshipCard.size-md {
        height: 172px;
    }

    .scholarshipCard.size-sm {
        height: 146px;
    }

    .admissionCanvas {
        aspect-ratio: 20/8;
    }

    .stepIcon {
        width: 75px;
        height: 75px;
    }

    .stepIcon img {
        width: 60px;
        height: 60px;
    }

    .timelineStep {
        max-width: 340px;
    }

    .admissionStep1 {
        left: 6%;
        top: 50%;
        max-width: 225px;
    }

    .admissionStep2 {
        left: 26%;
        top: 23%;
        max-width: 225px;
    }

    .admissionStep3 {
        left: 50%;
        top: 27%;
        max-width: 225px;
    }

    .admissionStep4 {
        left: 73%;
        top: 6%;
        max-width: 225px;
    }

    .stepsDesc {
        font-size: 14px;
    }
}

@media (max-width: 980px) {
    .enquiryCard {
        position:static;
        width: min(520px,92%);
        margin: 16px auto 30px;
        padding: 22px 16px 24px;
        border-radius: 16px;
        background: #0e2f66;
    }

    .studentsPic {
        width: fit-content;
        transform: translateX(-4%);
    }

    .ctaContentWrap {
        min-height: 820px;
        background-position: calc(50% - 26%) bottom;
    }
}

@media (max-width: 850px) {
    .advantageRightMobile {
        padding:70px;
    }

    .advantageWrapper {
        grid-template-columns: 1fr;
    }

    .advantageStackIcon {
        width: 100px;
        height: 100px;
    }

    .advantageLeft,.advantageRightDesktop {
        display: none;
    }

    .advantageMobile {
        display: block;
    }
}

@media (max-width: 768px) {
    .headerContainer {
        justify-content: center;
    }

    .heroSection {
        min-height: 650px;
        padding: 20px 0 25px;
    }

    .heroContainer {
        padding-right: 0;
        text-align: center;
    }

    .heroContent {
        max-width: 100%;
        align-items: center;
    }

    .heroLogoOne {
        width: 186px;
        height: auto;
        margin-bottom: 18px;
    }

    .heroKicker {
        font-size: 16px;
    }

    .heroTitle {
        font-size: 22px;
        margin: 8px 0 14px;
    }

    .heroLogoTwo {
        width: 95px;
        margin: 6px 0;
    }

    .heroSubTitle {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .programmeCard {
        margin: 0 auto;
        max-width: 340px;
    }

    .programmeHead {
        font-size: 18px;
    }

    .programmeBody {
        font-size: 18px;
        padding: 10px;
        flex-wrap: wrap;
    }

    .studentsPic {
        width: min(680px,63vw);
        transform: translateX(-33%);
    }

    .enquiryTitle {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .formRow {
        gap: 10px;
    }

    .countryCode select {
        font-size: 13px;
        min-width: 70px;
    }

    .why4c {
        padding: 28px 0 20px;
    }

    .why4c-stage {
        padding: 18px 0 10px;
    }

    .why4c-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .why4c-col.left {
        order: 1;
    }

    .why4c-center {
        order: 2;
        margin: 6px 0 12px;
    }

    .why4c-col.right {
        order: 3;
    }

    .why4cCircle {
        width: 220px;
        height: 220px;
        box-shadow: 0 14px 30px rgba(0,0,0,.14);
    }

    .why4cCircleText {
        font-size: 60px;
    }

    .why4cItem {
        grid-template-columns: 64px minmax(0,1fr);
        column-gap: 14px;
        max-width: 720px;
    }

    .why4cTitle {
        font-size: 16px;
    }

    .why4cTitle span {
        font-size: 22px;
    }

    .why4cText {
        font-size: 14px;
        line-height: 1.55;
    }

    .why4cIcon {
        width: 54px;
        height: 54px;
        box-shadow: 0 0 0 9px rgba(245,238,238,1),0 10px 18px rgba(0,0,0,.07);
    }

    .why4cIcon img {
        width: 46px;
    }

    .pathSection {
        padding: 40px 0;
    }

    .pathTitle {
        font-size: 32px;
    }

    .pathSubtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .pathGrid {
        display: block;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .partnersSection.section {
        padding: 40px 0;
    }

    .pathSlider .slick-track {
        display: flex;
        margin: 10px 0 10px 27px;
    }

    .pathSlider .slick-slide {
        display: flex;
        height: auto;
        margin: 10px;
    }

    .pathCard {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .pathCardContent {
        flex: 1;
    }

    .pathImageWrap {
        margin-top: auto;
    }

    .opMobileGrid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .realWorldSection {
        padding: 40px 0 0;
    }

    .scholarshipSection {
        padding: 40px 0 40px;
    }

    .scholarshipCards {
        grid-template-columns: repeat(2,1fr);
        gap: 40px;
        margin-bottom: 40px;
    }

    .note {
        display: none;
    }

    .admissionCanvas {
        aspect-ratio: 10/15;
        min-height: 680px;
        padding: 0 14px;
    }

    .admissionSection::before {
        background-image: url(../images/process-mbl.webp);
        top: 10%;
        background-position: center;
        background-size: contain;
        width: 110%;
    }

    .stepIcon {
        width: 90px;
        height: 90px;
    }

    .timelineStep {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        max-width: 92%;
        text-align: left;
    }

    .stepText {
        text-align: left;
    }

    .admissionStep3,.admissionStep4 {
        flex-direction: row-reverse;
    }

    .admissionStep1 {
        left: 15%;
        top: 8%;
    }

    .admissionStep2 {
        left: 22%;
        top: 30%;
    }

    .admissionStep3 {
        left: 58%;
        top: 55%;
        transform: translateX(-50%);
        width: 320px;
    }

    .admissionStep4 {
        left: 20%;
        top: 82%;
        width: 320px;
    }

    .campusArrows {
        position: static;
        padding: 20px 0;
        background: #fff;
        display: flex;
        justify-content: center;
        gap: 18px;
    }

    .ctaContentWrap {
        background-image: url("../images/banner/footer-banner-mbl.webp");
    }

    .ctaLogo {
        width: 175px;
    }
}

@media (max-width: 580px) {
    .section {
        padding:40px 0;
    }

    .admissionCanvas {
        aspect-ratio: 9/16;
        min-height: 680px;
        padding: 0 14px;
    }

    .stepIcon {
        width: 90px;
        height: 90px;
    }

    .timelineStep {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        max-width: 92%;
        text-align: left;
    }

    .stepText {
        text-align: left;
    }

    .admissionStep3,.admissionStep4 {
        flex-direction: row-reverse;
    }

    .admissionStep1 {
        left: 13%;
        top: 3%;
    }

    .admissionStep2 {
        left: 16%;
        top: 26%;
    }

    .admissionStep3 {
        left: 48%;
        top: 52%;
        transform: translateX(-50%);
        width: 320px;
    }

    .admissionStep4 {
        left: 6%;
        top: 83%;
        width: 320px;
    }

    .campusLifeSection .section-head {
        padding: 40px 0 40px;
    }

    .ctaSection.section {
        padding: 0;
    }

    .studentsPic {
        width: min(680px,80vw);
        transform: translateX(-33%);
    }

    .pathGrid {
        grid-template-columns: 1fr;
    }

    .pathTitle {
        font-size: 32px;
    }

    .advantageMobileTop {
        min-height: 400px;
    }

    .advantageStackItem {
        font-size: 15px;
        padding: 5px 35px 5px 72px;
    }

    .advantageStackIcon {
        left: -22px;
        width: 70px;
        height: 70px;
    }

    .advantageStackIcon img {
        width: 30px;
    }

    .advantageRightMobile {
        padding: 30px;
    }

    .partnersSlider {
        display: none!important;
    }

    .partnersGridMobile {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 18px;
        padding-top: 18px;
    }

    .partnersGridMobile img {
        width: 100%;
        height: auto;
        display: block;
    }

    .opMobileGrid {
        gap: 28px 18px;
    }

    .opCard {
        font-size: 18px;
    }

    .opCard img {
        width: 56px;
        margin-bottom: 10px;
    }

    .opportunityVisual--mobile {
        padding: 10px 0 40px;
    }

    .scholarshipSection {
        padding: 0 0 40px;
    }

    .scholarshipCards {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .scholarshipCard {
        height: auto!important;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr 50px 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 10px;
    }

    .scholarshipCard .cardTop {
        grid-column: 1/2;
        grid-row: 1/2;
        font-size: 15px;
        white-space: nowrap;
    }

    .scholarshipCard .arrowImg {
        grid-column: 2/3;
        grid-row: 1/3;
        justify-self: center;
        align-self: center;
        margin: 0!important;
        transform: rotate(-90deg);
    }

    .scholarshipCard .percent {
        grid-column: 3/4;
        grid-row: 1/2;
        justify-self: start;
        line-height: 1;
    }

    .scholarshipCard .percent span {
        font-size: 22px;
        margin-left: 4px;
    }

    .scholarshipCard .label {
        grid-column: 3/4;
        grid-row: 2/3;
        justify-self: start;
        font-size: 14px;
        margin-top: 2px;
    }

    .cardTop {
        display: grid;
    }

    .eligibilityGrid {
        grid-template-columns: repeat(1,1fr);
    }

    .eligibilityHeader h3 {
        font-size: 26px;
    }

    .scholarshipCard.size-xl {
        width: 100%;
    }

    .scholarshipCard.size-lg {
        width: 90%;
    }

    .scholarshipCard.size-md {
        width: 83%;
    }

    .scholarshipCard.size-sm {
        width: 73%;
    }

    .cardTop span {
        font-size: 24px;
    }

    .size-xl .percent {
        font-size: 50px;
    }

    .size-xl .arrowImg {
        width: 35px;
    }
}

@media (max-width: 480px) {
    .partnersGridMobile {
        gap:0;
    }
}

@media (max-width: 450px) {
    .advantageRightMobile {
        padding:30px;
    }

    .advantageStackItem {
        font-size: 12px;
        padding: 5px 35px 5px 60px;
    }

    .studentsPic {
        width: min(680px,106vw);
        transform: translateX(-40%);
    }

    .admissionCanvas {
        min-height: 720px;
    }

    .stepsTitle {
        font-size: 17px;
    }

    .stepsDesc {
        font-size: 13px;
    }

    .stepIcon {
        width: 82px;
        height: 82px;
    }

    .ctaContentWrap {
        background-position: calc(50% - 50%) bottom;
        min-height: 650px;
    }
}


div#SuccessPopupArea .modal-header .close {
    order: 1;
    opacity:1;
    color:#fff !important;
}