.light-blue-text {
    color: #0277b1;
}

.light-blue-text.heading-title span {
    color: #0277b1 !important;
}

.light-blue-text span {
    color: transparent !important;
}

.info.light-blue-text>span.word:before {
    color: #0277b1 !important;
}

.yellow-text {
    color: #f2c25d;
}

.yellow-text.heading-title span {
    color: #f2c25d !important;
}

.yellow-text span {
    color: transparent !important;
}

.info.yellow-text>span.word:before {
    color: #f2c25d !important;
}

.space-title {
    padding: 10vh 10vh 0 !important;
}

.title-text span {
    height: 100%;
    overflow: visible;
}

.ywl-bg-r {
    box-shadow: 3px 8px 24px 2px #0000003d;
    border-radius: 2vh !important;
}

.circular-section {
    position: relative;
    height: 80vh;
    overflow: hidden;
}

.circular-section .carousel {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-150px, -200px);
    transform-origin: 150px 3200px;
    will-change: transform;
}

.wrapper {
    position: absolute;
    height: 100vh;
    transform-origin: 150px 3000px;
}

.wrapper div {
    width: 400px;
    height: 620px;
}

.swiper-card {
    display: flex;
    align-items: baseline;
    justify-content: center;
    /* background: #fca802; */
    height: 100%;
    width: 90%;
    border-radius: 2vh;
}

.swiper-card p {
    color: #003366;
    font-size: 1vw;
    line-height: 160%;
}

.swiper-card>div {
    /* font-size: 22px; */
    font-weight: bold;
    /* aspect-ratio: 2 / 3; */
    width: auto;
    color: #fff;
    border-radius: 50em;
    padding: 2rem;
    text-align: left;
}

.swiper-card--1 {
    background: #fff;
    box-shadow: 10px 12px 0px 0px #ecb250;
}

.swiper-card--2 {
    background: #ffffff;
    box-shadow: 10px 12px 0px 0px #003366;
}

.swiper-card--3 {
    background: #ffffff;
    box-shadow: 10px 12px 0px 0px #0277b1;
}

.swiper-card--4 {
    background: #ffffff;
    box-shadow: 10px 12px 0px 0px #003f66;
}

.over-lap {
    overflow: scroll;
}

.log-img {
    width: 100px !important;
    height: 100px !important;
    margin: auto;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.log-img img {
    width: 100%;
}

hr.bg-black {
    background: transparent !important;
    border-bottom: 2px dotted #134168;
    margin: 2rem auto;
}

.well-being .log-img {
    width: 90% !important;
    height: 50% !important;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0px 0px 20px 0px #ebebeb;
    margin-bottom: 40px;
    margin-top: 10px;
}

.well-being .log-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul.blue-list>li:before {
    background: #0277b1 !important;
}

ul.yellow-list>li:before {
    background: #ecb250 !important;
}

.line-blue:after {
    border-right: 2px dotted #003f66 !important;
    right: -17% !important;
}

.rb::after {
    left: -8% !important;
}


/* Card Container Stack */
.card_wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px 0;
}

/* Structural Panel Styles */
.safety-panel {
    border-radius: 32px !important;
    padding: 5px;
    background: transparent;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.safety-panel .bg1 {
    border-radius: 28px !important;
    border: 15px solid #ebdcb9 !important;
    /* Elegant outer casing line */
    padding: 35px 40px !important;
    overflow: hidden;
}

.bg-box {
    overflow: unset;
}

.bg-sec .bg-box.bg1 {
    box-shadow: 0 0 20px #808080 !important;
}

.bg-sec.bg-box {
    box-shadow: unset;
}

/* Gradient Themes */
.panel-dark-blue .bg1 {
    background: #13436b !important;
}

.panel-medium-blue .bg1 {
    background: #2f6990 !important;
}

.panel-light-blue .bg1 {
    background: #6f9db9 !important;
}

.panel-summary-pale .bg1 {
    background: #b9dae7 !important;
    padding: 60px 45px !important;
}

/* Left Content Column Styles & Dotted Separator Line */
.left-content-block {
    border-right: 1.5px dotted rgba(255, 255, 255, 0.4);
    padding-right: 45px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 12px;
}

/* Text Element Styling Rules */
.panel-dark-blue p,
.panel-medium-blue p,
.panel-light-blue p {
    color: #ffffff !important;
    font-size: 1.8rem;
    line-height: 1.3;
    font-weight: 400;
    font-family: inherit;
    text-align: left;
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    width: 100%;
    margin-top: 40px;
    margin-left: 30px;
    font-family: 'Merriweather';
}

.panel-summary-pale .summary-text {
    color: #13436b !important;
    font-size: 2.25rem;
    line-height: 1.7;
    font-weight: 600;
    max-width: 88%;
    margin: 0 auto;
}

/* Pill Label Settings */
.safety-panel .pill-label {
    background-color: #ffffff !important;
    border-radius: 50px !important;
    padding: 10px 0 !important;
    width: 100%;
    /* max-width: 100; */
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1.9rem;
    letter-spacing: 0.5px;
    /* margin-bottom: 30px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    margin: unset;
    font-family: 'Merriweather';
}

/* Pill Label Colors */
.panel-dark-blue .pill-label {
    color: #13436b !important;
}

.panel-medium-blue .pill-label {
    color: #2f6990 !important;
}

.panel-light-blue .pill-label {
    color: #497692 !important;
}

/* Right Image Block Frame Rules */
.right-image-block {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 45px !important;
}

/* Tall Photo Frame Implementation matching the user mockup height */
.photo-frame {
    width: 100%;
    max-width: 350px;
    height: 450px;
    /* Increased height to make the image tall */
    overflow: hidden;
    border-radius: 24px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: transparent;
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-bottom: 7px solid #fbb03b !important;
    /* Yellow base border */
}





/* Responsive Overrides */
@media (max-width: 991px) {
    .safety-panel .bg1 {
        padding: 30px 20px !important;
    }

    .left-content-block {
        border-right: none;
        padding-right: 0 !important;
        align-items: center;
        text-align: center;
        padding-left: 0;
    }

    .safety-panel .pill-label {
        margin: 0 auto 25px auto !important;
        font-size: 1.2rem;
    }

    .panel-dark-blue p,
    .panel-medium-blue p,
    .panel-light-blue p {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .right-image-block {
        padding-left: 0 !important;
    }

    .photo-frame {
        height: 220px;
    }
}









@media (max-width:1602px) {
    .wrapper div {
        width: 390px;
        height: 470px;
    }

    .circular-section .carousel {
        top: 30%;
    }

    .circular-section {
        height: 100vh;
    }

    .for-student {
        margin-top: 5% !important;
        margin-bottom: 10% !important;
    }

    .panel-dark-blue p,
    .panel-medium-blue p,
    .panel-light-blue p {
        color: #ffffff !important;
        font-size: 1.8rem;
        line-height: 1.3;
        font-weight: 400;
        font-family: inherit;
        text-align: left;
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: center; */
        width: 100%;
        margin-top: 40px;
        margin-left: 30px;
        font-family: 'Merriweather';
    }

    .mascot .Card {
        height: 90vh !important;
        margin-top: 4vh;
        margin-bottom: 3vh;
        width: 120%;
    }

    .panel-summary-pale .summary-text {
        color: #13436b !important;
        font-size: 1.8rem;
    }
}

@media (max-width: 1500px) {
    .wrapper div {
        width: 290px;
        height: 470px;
    }

    .well-being .wrapper div {
        width: 290px;
        height: 400px;
    }

    .circular-section .carousel {
        transform-origin: 150px 2600px;
    }

    .wrapper {
        transform-origin: 150px 2400px;
    }

    .swiper-card p {
        font-size: 1.1vw;
    }


}

@media (max-width:1199px) {
    .circular-section {
        height: 40vh;
    }

    .mascot .Card {
        height: 40vh !important;
    }

}

@media (max-width:767px) {
    .main {
        margin-bottom: 7vh !important;
    }

    .circular-section {
        overflow: visible !important;
    }

    .swiper-card p {
        font-size: 3.5vw;
        line-height: 5.4vw;
    }

    .swiper-card h2 {
        font-size: 5vw;
    }

    .wrapper div {
        width: 300px;
        height: 540px;
    }

    .wrapper {
        transform-origin: 150px 2590px;
    }

    .circular-section {
        height: 50vh;
    }


}

@media (max-width: 1366px) and (min-width: 1200px) {
    .swiper-card p {
        font-size: 0.9vw !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {

    p.heading-content {
        font-size: 14px !important;

    }
}

.title-text span {
    /* line-height: 1.8; */
    overflow: visible;
    height: 100%;
}



.contain-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    flex: 15%;
    height: calc(100vh - 100px);
    margin: 15px 0px;
    cursor: pointer;
    transition: all 1.5s;
    border: none;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #134168db 20%, transparent 39%);
}

.txt-con {
    position: absolute;
    bottom: 50px;
    left: 33px;
    right: 10px;
    /* transition: all 1.5s; */
}

.card p {
    font-family: 'Lato', sans-serif;
    color: #FFF !important;
    font-size: 30px;
    font-weight: 400;
    line-height: 100% !important;
}

.card:hover {
    flex: 95vw;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.txt-con a:hover {
    color: #ffff;
}

/* graduation wall */
.grad-page {
    padding: 28px 20px;
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
}

.grad-card-wrap {
    position: relative;
    /* max-width: 540px; */
    margin: 0vh auto;
    width: 48%;
    padding: 0px 13%;
    scale: 0.8;
}

.grad-card1 {
    /* border: 2px solid #1c3f5e; */
    border-radius: 18px;
    position: relative;
    /* min-height: 240px; */
    display: flex;
    /* align-items: stretch; */
    justify-content: center;
}


.grad-photo-left {
    width: 26vw;
    min-width: 20vw;
    position: relative;
    border-radius: 2vw;
    overflow: hidden;
    background: #c8cfd4;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 1vh solid #003366;
}

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

.grad-photo-placeholder {
    width: 100%;
    height: 100%;
    /* max-height: 36vw; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1.5vh solid var(--secondary-color);
    /* background: linear-gradient(160deg, #b8c2c8 0%, #9aaab3 100%); */
}

.grad-photo-placeholder i {
    font-size: 72px;
    color: #6b7b8a;
}

.grad-info-right {
    /* flex: 1; */
    padding: 20px 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: end;
    margin-left: -60px;
}

.grad-student-name {
    font-size: 22px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.2;
}

.grad-student-grade {
    font-size: 1.5vw;
    color: var(--blue);
    /* margin-top: -6px; */
}

.grad-video-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    width: 30vw;
    position: relative;
    z-index: 3;
    height: 19vw;
}

.grad-video-card:after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 20%;
    height: 30%;
    /* background-color: #8c1d40; */
    border: 2px solid var(--secondary-color);
    /* border-radius: 9px; */
    border-top: 0;
    border-left: 0;
    border-bottom-right-radius: 30px;
}

.grad-vid-thumb {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #b0bec5;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grad-vid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0px -149px;
}

/* .grad-play-circle {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px solid #fff;
    outline-offset: 6px;
    padding: 20px;
} */

.grad-play-circle img {
    margin-left: 4px;
    object-position: unset;
}

.grad-asu-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 20px;
    background: #fff;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grad-asu-block img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.grad-asu-pill {
    background: #8c1d40;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 5px;
    letter-spacing: 1px;
    font-family: serif;
}

.grad-asu-sub {
    font-size: 8.5px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.grad-learn-link {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    cursor: pointer;
    margin-top: 20px;
    padding-left: 100px;
}

.grad-learn-link-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.grad-learn-link span {
    font-size: 1.5vw;
    font-family: 'Merriweather', serif;
}


.grad-card2 {
    /* border: 2px solid #1c3f5e; */
    border-radius: 18px;
    position: relative;
    /* min-height: 240px; */
    display: flex;
    /* align-items: stretch; */
    justify-content: center;
}

.grad-card2 .grad-info-right {
    margin-right: -60px;
}

.grad-card2 .grad-video-card:after {

    left: -20px;

    border: 2px solid var(--secondary-color);
    /* border-radius: 9px; */
    border-top: 0;
    border-right: 0;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: unset
}


.grad-info-left {
    flex: 1;
    padding: 20px 12px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
}

.grad-photo-right {
    width: 190px;
    min-width: 190px;
    position: relative;
    margin-top: -24px;
    margin-right: 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    overflow: hidden;
    background: #c8cfd4;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

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

.invert {
    filter: invert(85%) sepia(93%) saturate(1485%) hue-rotate(180deg) brightness(90%) contrast(97%);
}

.grid-info-title {
    padding-left: 100px;
    margin-bottom: 20px;
}

.grad-card2 .grid-info-title {
    padding-left: 60px;
}

.grad-card2 .grad-learn-link {
    padding-left: 60px;
}

.right-border {
    position: relative;
    padding: 0px;
    margin-left: 23px;
}

.right-border::after {
    content: '';
    position: absolute;
    height: 0;
    width: 1px;
    border: 3px solid #ECB24F;
    border-radius: 40px 0 0 0;
    border-right: none;
    border-bottom: none;
    top: -5.2%;
    left: -2%;
    pointer-events: none;
    transition: none;
}

/* Animate when class is added */
.right-border.animate-border::after {
    animation: localDrawLine 3s linear forwards;
}


.offcanvas .close-btn {
    content: '';
    position: absolute;
    top: 0;
    /* top: 6vw; */
    width: 3vw;
    height: 3vw;
    /* right: 2vw; */
    right: 0;
    /* height: 100%; */
    background: url(../home-img/svg/plusIcon-white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(45deg);
    border: none;
    display: flex;
    justify-content: end;
    align-items: center;
    left: unset;
    filter: unset;
    transition: all .3s linear;
}

.offcanvas .close-btn:hover {
    /* filter: hue-rotate(123deg) invert(1) brightness(10.5); */
    background: url(../home-img/svg/plusIcon-white.svg);
    background-repeat: no-repeat;
    width: 3vw;
    height: 3vw;
    object-fit: cover;
    background-size: cover;
    transform: rotate(136deg);
}

.job-info {
    width: 600px;
    display: flex;
    justify-content: center;
    margin: auto;
    height: 200px;
    gap: 20px;
}

.job-info>div {
    width: 50%;
    height: 100%;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    color: #fff;
    font-size: 25px;
    font-family: 'Merriweather';
    font-weight: 100;
    font-style: italic;
    padding: 20px;
}

.opn-info {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
    width: 100%;
}

@keyframes localDrawLine {
    0% {
        width: 1px;
        height: 0;
    }

    50% {
        width: 1px;
        height: 100%;
    }

    100% {
        width: 102%;
        height: 106%;
    }
}

/* graduation wall */


@media (min-width: 885px) and (max-width: 1200px) {
    .contain-hover {
        flex-wrap: wrap;
        height: auto;
    }
}

@media (min-width: 1200px) and (max-width: 24000px) {

    /* .txt-con {
    transition: transform 0.3s;
} */

    .card p {
        display: inline-block;
        white-space: nowrap;
    }

    .card:hover~.card~.card .txt-con a,
    .card:hover~.card~.card~.card .txt-con a,
    .card:hover~.card~.card~.card~.card .txt-con a,
    .card:hover~.card~.card~.card~.card~.card .txt-con a,
    .card:hover~.card~.card~.card~.card~.card .txt-con a {
        opacity: 0;
        display: none;
    }

    .contain-hover:hover .card:not(:hover) .txt-con a {
        opacity: 0;
        display: none;

    }

    /* Hover kisi bhi card pe karo → baaki sab card ke andar ke text rotate */
    .card:hover .txt-con {
        transform: none;
    }

    .card:hover~.card~.card .txt-con,
    .card:hover~.card~.card~.card .txt-con,
    .card:hover~.card~.card~.card~.card .txt-con,
    .card:hover~.card~.card~.card~.card~.card .txt-con,
    .card:hover~.card~.card~.card~.card~.card .txt-con {
        transform: rotate(270deg);
        /* width: fit-content; */
        bottom: 200px;
    }

    .contain-hover:hover .card:not(:hover) .txt-con {
        transform: rotate(270deg);
        /* width: fit-content; */
        bottom: 100px;
    }

    .contain-hover:hover .card:not(:hover):not(:has(~ .card:hover)) .txt-con {
        transform: rotate(270deg);
        bottom: 100px;
    }
}

@media (max-width:1199px) {
    .grad-asu-block {
        width: 130px;
        height: 130px;
    }

    .grad-video-card {
        padding: 20px;
    }

    .std-jurny .img-section {
        height: 100%;
    }

    .sj-note-text {
        padding: 0 12px;
    }
}

@media (max-width:991px) {
    .grad-photo-left {
        width: 34vw;
    }

    .grid-info-title .heading-title {
        margin: 0 !important;
    }

    .grad-student-grade {
        font-size: 2.5vw;
    }

    .grad-video-card {
        width: 40vw;
        height: 24vw;
    }

    .grad-asu-block {
        width: 120px;
        height: 120px;
        padding: 0 10px;
    }

    .grad-learn-link span {
        font-size: 2vw;
    }
}



@media (min-width: 600px) and (max-width: 885px) {


    .contain-hover {
        flex-wrap: wrap;
        height: auto;
    }

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

    /* Default state (Right + Bottom) */
    .brd-rht-bht:nth-child(-n+2)::before,
    .brd-rht-bht:nth-child(n+4):nth-child(-n+5)::before,
    .brd-rht-bht:nth-child(n+7):nth-child(-n+8)::before,
    .brd-rht-bht:nth-child(n+10):nth-child(-n+11)::before,
    .brd-rht-bht:nth-child(n+13):nth-child(-n+14)::before {
        content: "";
        position: absolute;
        inset: 0;
        border-right: 2px dotted #03356885;
        height: 0%;
        width: 100%;
    }

    .brd-rht-bht:nth-child(-n+2)::after,
    .brd-rht-bht:nth-child(n+4):nth-child(-n+5)::after,
    .brd-rht-bht:nth-child(n+7):nth-child(-n+8)::after,
    .brd-rht-bht:nth-child(n+10):nth-child(-n+11)::after,
    .brd-rht-bht:nth-child(n+13):nth-child(-n+14)::after {
        content: "";
        position: absolute;
        inset: 0;
        border-bottom: 2px dotted #03356885;
        width: 0%;
        height: 100%;
    }

    /* Special case: Only Bottom (3,6,9,12,15) */
    .brd-rht-bht:nth-child(3)::before,
    .brd-rht-bht:nth-child(6)::before,
    .brd-rht-bht:nth-child(9)::before,
    .brd-rht-bht:nth-child(12)::before,
    .brd-rht-bht:nth-child(15)::before {
        border-right: unset !important;
        height: 0 !important;
    }

    .brd-rht-bht:nth-child(3)::after,
    .brd-rht-bht:nth-child(6)::after,
    .brd-rht-bht:nth-child(9)::after,
    .brd-rht-bht:nth-child(12)::after,
    .brd-rht-bht:nth-child(15)::after {
        border-bottom: 2px dotted #03356885 !important;
        width: 0%;
        height: 100%;
    }

    /* Animate only when class added */
    .animate-line:nth-child(-n+2)::before,
    .animate-line:nth-child(n+4):nth-child(-n+5)::before,
    .animate-line:nth-child(n+7):nth-child(-n+8)::before,
    .animate-line:nth-child(n+10):nth-child(-n+11)::before,
    .animate-line:nth-child(n+13):nth-child(-n+14)::before {
        animation: dotted-line 1s linear forwards;
    }

    .animate-line:nth-child(-n+2)::after,
    .animate-line:nth-child(n+4):nth-child(-n+5)::after,
    .animate-line:nth-child(n+7):nth-child(-n+8)::after,
    .animate-line:nth-child(n+10):nth-child(-n+11)::after,
    .animate-line:nth-child(n+13):nth-child(-n+14)::after,
    .animate-line:nth-child(3)::after,
    .animate-line:nth-child(6)::after,
    .animate-line:nth-child(9)::after,
    .animate-line:nth-child(12)::after,
    .animate-line:nth-child(15)::after {
        animation: dotted-line2 1s linear forwards;
    }

    /* Keyframes */
    @keyframes dotted-line {
        0% {
            height: 0%;
        }

        100% {
            height: 100%;
        }
    }

    @keyframes dotted-line2 {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }


    /* Default state */
    .brd-rht-bht:nth-child(16)::before,
    .brd-rht-bht:nth-child(17)::before {
        content: "";
        position: absolute;
        inset: 0;
        border-right: 2px dotted #03356885;
        height: 0%;
        width: 100%;
    }

    .brd-rht-bht:nth-child(16)::after,
    .brd-rht-bht:nth-child(17)::after {
        border-bottom: unset !important;
        /* bottom nahi chahiye */
    }

    /* Animate only on class */
    .animate-line:nth-child(16)::before,
    .animate-line:nth-child(17)::before {
        animation: dotted-line 1s linear forwards;
    }

    .head-txt ul li span,
    .box-section:hover .hover-text p {
        font-size: 4vw !important;
        line-height: 140% !important;
    }

    .card {
        flex: 43% !important;
    }

    .w-23 {
        width: 48% !important;
    }
}

@media (max-width: 500px) {

    .head-txt ul li span,
    .box-section:hover .hover-text p {
        font-size: 4vw !important;
        line-height: 140% !important;
    }

    .w-23 {
        width: 98% !important;
    }

    .contain-hover {
        flex-wrap: wrap;
        height: auto;
    }

    .card {
        flex: 98% !important;
    }
}

@media (min-width: 400px) and (max-width: 600px) {

    .w-23 {
        width: 98%;
    }

    .contain-hover {
        flex-wrap: wrap;
        height: auto;
    }

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

}

.bdr-radius {
    border-radius: 2vw;
}

/* career */
.career-feature-section {
    position: relative;
    overflow: hidden;
    padding: 4rem 0 4.75rem;
    background:
        radial-gradient(circle at top left, rgba(236, 178, 79, 0.12), transparent 34%),
        radial-gradient(circle at bottom right, rgba(19, 65, 104, 0.12), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef4f9 100%);
}

.career-feature-section::before,
.career-feature-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(4px);
    opacity: 0.45;
}

.career-feature-section::before {
    width: 14rem;
    height: 14rem;
    top: -5rem;
    left: -4rem;
    background: rgba(236, 178, 79, 0.18);
}

.career-feature-section::after {
    width: 18rem;
    height: 18rem;
    right: -7rem;
    bottom: -8rem;
    background: rgba(19, 65, 104, 0.14);
}

.career-story-swiper {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    overflow: visible;
    padding: 0 1.25rem 0.5rem;
}

.career-slide__inner {
    display: grid;
    grid-template-columns: minmax(300px, 0.94fr) minmax(420px, 1.06fr);
    align-items: stretch;
    gap: 0;
}

.career-feature-media {
    position: relative;
    z-index: 2;
}

.career-feature-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 22px 44px rgba(14, 43, 70, 0.18);
    border: 1px solid rgba(236, 178, 79, 0.18);
    opacity: 0;
    transform: translateX(56px) scale(0.985);
    transition: transform 0.9s ease, opacity 0.9s ease;
}

.career-feature-panel {
    position: relative;
    z-index: 1;
    margin: 22px 0 22px -28px;
    padding: 1.8rem 1.9rem 1.8rem 2.15rem;
    border-radius: 30px;
    background: linear-gradient(180deg, #134168 0%, #0f3252 100%);
    border: 1px solid rgba(236, 178, 79, 0.18);
    color: #fff;
    box-shadow: 0 24px 50px rgba(13, 39, 65, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 376px;
    opacity: 0;
    transform: translateX(-56px);
    transition: transform 0.9s ease, opacity 0.9s ease;
    transition-delay: 0.08s;
}

.career-slide.is-animated .career-feature-media img,
.career-slide.is-animated .career-feature-panel {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.new-class {
    line-height: 1.5;
    margin-bottom: 90px !important;
}

.career-feature-kicker {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.8rem;
    padding: 0.42rem 0.8rem;
    color: #ecb250;
    font-family: 'Merriweather', serif;
    font-size: 0.92rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(236, 178, 79, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

.career-feature-title {
    margin: 0 0 0.85rem;
    color: #fff;
    font-size: clamp(1.45rem, 2vw, 2.2rem);
    line-height: 1.08;
    font-weight: 500;
    max-width: 18ch;
}

.career-feature-copy {
    margin: 0 0 1rem;
    max-width: 58ch;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.62;
}

.career-feature-copy--tight {
    margin-bottom: 0;
}

.career-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: stretch;
    margin-top: 1.1rem;
}

.career-stat {
    width: 100%;
    min-height: 114px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(236, 178, 79, 0.3);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 0.95rem 1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
}

.career-stat span {
    display: block;
    color: #ecb250;
    font-family: 'Merriweather', serif;
    font-size: clamp(1.05rem, 1.45vw, 1.55rem);
    line-height: 1;
    margin-bottom: 0.45rem;
}

.career-stat small {
    display: block;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 500;
    max-width: none;
    color: rgba(255, 255, 255, 0.9);
}

.career-feature-list {
    margin: 0 0 1.05rem;
    padding-left: 1.15rem;
    color: #fff;
}

.career-feature-list li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    font-size: 0.98rem;
}

.career-feature-list li::marker {
    color: #ecb250;
}

.career-feature-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.9rem;
    position: relative;
    z-index: 5;
}

.career-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.career-story-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(19, 65, 104, 0.28);
    opacity: 1;
}

.career-story-swiper .swiper-pagination-bullet-active {
    background: #ecb250;
}

.career-arrow-btn {
    appearance: none;
    border: 1px solid rgba(19, 65, 104, 0.15);
    background: #fff;
    padding: 0;
    width: 3.2rem;
    height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(13, 39, 65, 0.14);
    flex: 0 0 auto;
}

.career-arrow-btn img {
    width: 60%;
    height: 60%;
    display: block;
}

.career-prev {
    border-color: rgba(236, 178, 79, 0.55);
}

.career-next {
    border-color: rgba(19, 65, 104, 0.38);
}

@media (max-width: 1500px) {
    .grad-vid-thumb img {
        object-position: 0px -82px !important;
    }

    .grad-play-circle img {
        object-position: unset !important;
    }
}

@media (max-width: 1300px) {

    .grad-card-wrap {
        width: 99%;
        padding: 19px 6%;
        scale: 1;
    }
}

@media (max-width: 991px) {
    .career-feature-section {
        padding: 3rem 0 3.75rem;
    }

    .career-slide__inner {
        grid-template-columns: 1fr;
    }

    .career-feature-panel {
        margin-left: 0;
        margin-top: -14px;
        padding: 1.5rem;
        min-height: unset;
    }

    .career-feature-media img {
        min-height: 300px;
    }

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

    .space-title {
        padding: 0vh 2vh 0 !important;
    }

    .new-class {
        margin-bottom: 65px !important;
    }

    /* .space-title {
        padding: 0vh 5vh 0 !important;
    } */

    .below-space {
        margin-bottom: 40px !important;
    }

    .for-student {
        margin-top: 10% !important;
        margin-bottom: 30% !important;
    }

    /* p.heading-content {
        font-size: 4.1vw !important;
    } */

    .circular-section .carousel {
        top: 40%;
    }

    .heading-title {
        margin: 11px 0 30px !important;
    }

    .single-card {
        height: auto;
        width: 100%;
    }

    .right-border::after {
        top: -8.2%;
        left: -6%;
    }
}

@media (max-width: 576px) {
    .career-feature-section {
        padding: 2.25rem 0 2.75rem;
    }

    .career-feature-panel {
        padding: 1.25rem;
        border-radius: 24px;
    }

    .career-feature-kicker {
        font-size: 0.76rem;
    }

    .career-feature-title {
        max-width: none;
        font-size: 1.42rem;
    }

    .career-feature-copy {
        font-size: 0.94rem;
        margin-bottom: 0.9rem;
    }

    .career-stat-grid {
        gap: 0.65rem;
    }

    .career-stat {
        min-height: 104px;
        padding: 0.85rem 0.9rem;
        border-radius: 18px;
    }

    .career-stat small {
        font-size: 0.72rem;
    }

    .career-feature-list {
        margin-bottom: 0.85rem;
    }

    .career-feature-list li {
        margin-bottom: 0.35rem;
        font-size: 0.95rem;
    }

    .career-feature-controls {
        gap: 0.7rem;
    }

    .career-arrow-btn {
        width: 2.9rem;
        height: 2.9rem;
    }

    .career-feature-media img {
        min-height: 240px;
    }

    .for-student {
        margin-top: 10% !important;
        margin-bottom: 30% !important;
    }

    .single-card {
        height: auto !important;
        width: 100% !important;
    }

    .right-border::after {
        top: -8.2% !important;
        left: -6% !important;
    }

    .main {
        margin-bottom: 4vh !important;
    }

    .mascot-page h3,
    .podcast h2 {
        font-size: 6vw !important;
        margin-bottom: 30px !important;
    }


}

.career-crd {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
}

.career-crd h4,
.career-crd p {
    justify-content: center;
}

.career-crd h4 {
    font-size: 34px;
    margin: 20px auto;
}

.gallery-section {
    max-width: 1200px;
    padding: 20px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0px;
    align-items: stretch;
}

/* Common Card Style */
.big-card,
.small-card {
    position: relative;
    padding: 18px;
    padding-bottom: 0;
}

/* .big-card::before,
.small-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #f4a100;
    border-right: none;
    border-bottom: none;
    border-radius: 45px 0 0 0;
} */

.big-card img,
.small-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 0px;
}

/* Left Card */
.big-card img {
    height: 540px;
}

/* Right Side */
.right-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.small-card img {
    height: 255px;
}

.gallery-grid .Card {
    margin-bottom: 0;
    height: 220px !important;
}

.gallery-grid .big-card .Card {
    margin-bottom: 0;
    height: 480px !important;
}

.gallery-grid .Card .img-box {
    height: 100%;
}

.gallery-grid .right-border::after {
    top: 0%;
    left: 0%;
    animation: localDrawLine_gallery 3s linear forwards;
}

@keyframes localDrawLine_gallery {
    0% {
        width: 1px;
        height: 0;
    }

    50% {
        width: 1px;
        height: 100%;
    }

    100% {
        width: 94%;
        height: 101%;
    }
}



/* Responsive */
@media (max-width: 768px) {

    /* .gallery-grid {
        grid-template-columns: 1fr;
    } */
    .gallery-section {
        padding: 0;
    }

    .big-card img,
    .small-card img {
        height: auto;
    }

    .gallery-grid .right-border {
        margin-left: 0;
    }

    .gallery-grid .Card {
        height: 180px !important;
    }

    .gallery-grid .big-card .Card {
        height: 400px !important;
    }

    .big-card,
    .small-card {
        padding: 14px;
        padding-bottom: 0;
        padding-right: 0;
    }

    .gallery-grid {
        gap: 10px;
    }

    .mascot .Card {
        height: 60vh !important;
    }

    .panel-dark-blue p,
    .panel-medium-blue p,
    .panel-light-blue p {
        margin-left: 16px;
        margin-top: 20px;
        font-size: 3.8vw !important;
    }
}

/* career */


@media (max-width:767px) {
    .grad-card-wrap {
        padding: 19px 0%;
    }

    .grad-page {
        padding: 28px 0px;
    }

    .grad-photo-left {
        width: 40vw;
    }

    .grad-video-card {
        width: 60vw;
        height: 34vw;
        padding: 12px;
    }

    .grad-asu-block {
        width: 80px;
        height: 80px;
        padding: 0 10px;
    }

    .grid-info-title {
        padding-left: 60px;
    }

    .grad-learn-link {
        padding-left: 60px;
    }

    .grad-learn-link span {
        font-size: 3vw;
    }

    .grad-info-right {
        padding: 20px 0px 16px 16px;
    }

    .grad-card2 {
        justify-content: end;
    }

    .grad-card2 .grid-info-title {
        padding-left: 10px;
    }

    .grad-card2 .grad-learn-link {
        padding-left: 10px;
    }

    .grid-info-title .heading-title {
        width: 70%;
    }    .grad-student-grade {
        font-size: 3.5vw;
    }
    .grad-vid-thumb img {
        object-position: 0px -64px !important;
    }
    .grad-card2 .grad-info-right {
        margin-right: -46px;
    }
}