:root {
    --spacing-card: 15%;
}

html {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.ylw-bg {
    background-color: #ecb250 !important;
}

.blu-bg {
    background-color: #134168 !important;
}

.light-blu-bg {
    background-color: #5aadde !important;
}

.bg-color-heres {
    background-color: #00416b !important;
}

.w-40 {
    width: 40% !important;
}

.bg-sec {
    background: #efe5d7 !important;
}

.w-80 {
    width: 80% !important;
}

.weight-700 {
    font-weight: 700 !important;
}

.border-dotted {
    border-bottom: 3px dotted #000 !important;
}

.academic-card .Card {
    border-radius: 1vw !important;
    box-shadow: 0 0 15px #25252587;
}

.brd-left {
    border-left: 2px dotted #003366;
}

.heigh33 {
    margin-top: 0 !important;
    height: 88vh !important;
}

.bg-sec {
    height: auto !important;
}

.head-txt h2 {
    color: #FFF;
    font-family: 'Lato', sans-serif;
    font-size: 34px !important;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0 !important;
    font-style: normal !important;
}

.head-txt h2 span {
    font-style: normal !important;
}

.head-txt p {
    color: #fff;
    /* font-size: 1vw !important;
        line-height: 1.6vw !important;
        font-family: 'Merriweather', serif !important;
        color: #fff;
        font-weight: 400;
        text-align: left; */
}

.head-txt ul li span {
    font-size: 1vw !important;
    line-height: 1.6vw !important;
    font-family: 'Merriweather', serif !important;
    color: #fff;
    font-weight: 400;
    text-align: left;
}

.head-txt ul li:before {
    background: #fff;
}

.philos-quote {
    position: absolute;
    height: 40px;
    width: auto !important;
    top: -18px;
    left: -4px;
    mix-blend-mode: darken;
}

.philos-quote2 {
    position: absolute;
    height: 40px;
    width: auto !important;
    bottom: -2px;
    right: 0px;
    transform: rotate(180deg);
    mix-blend-mode: darken;
}

/* Keyframes for draw animation */
@keyframes drawLine {
    0% {
        height: 0;
        width: 0;
    }

    50% {
        height: 100%;
        width: 0;
    }

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

.life-slide .play-btn {
    z-index: 999 !important;
}

.life-slide .play-btn {
    opacity: 1;
}

.right-border {
    position: relative;
    padding: 0px;
    margin-left: 30px;
    padding-top: 15px;
}

.hover-text {
    justify-content: start !important;
    flex-direction: column !important;
    align-items: unset !important;
}

.box-section .bottom-title {
    right: 0 !important;
    bottom: 0px !important;
}

/* After pseudo-element - border shape */
.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: -3%;
    left: -3%;
    pointer-events: none;
    transition: none;
}

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

@keyframes slideUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.accordion {
    max-width: 60%;
    margin: auto;
}

.accordion-item {
    border-bottom: 1px solid #1d4a6d !important;
    padding: 15px 0;
    border-left: unset;
    border-right: unset;
    border-top: unset;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    color: #123456;
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: #f4a620;
}

.subject-box {
    text-align: center;
}


.contain-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 0px !important;
}

.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;
}

.subject-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid #f5a623;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto 0;
    position: relative;
    font-weight: bold;
    color: #1f4568;
    padding: 14px;
}


.subject-icon::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid #00bcd4;
    border-radius: 50%;
}

.img {
    width: 100%;
    display: block;
    mix-blend-mode: darken;
}

.subject-box p {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f4568;
}

.toggle-btn {
    position: relative;
    width: 40px;
    height: 40px;
    background: #f4a620;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
}

.toggle-btn:before,
.toggle-btn:after {
    content: '';
    position: absolute;
    background: white;
    transition: 0.3s;
}

.toggle-btn:before {
    width: 2px;
    height: 14px;
}

.toggle-btn:after {
    width: 14px;
    height: 2px;
}

.toggle-btn.open {
    transform: rotate(45deg);
}

.img-over {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, padding 0.6s ease;
    padding: 0;
}

.accordion-content.open {
    padding: 20px 0;
    max-height: 2000px;
}

.animated-line-pune .img-section:before {
    z-index: 9 !important;
}

.subjects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 10px;
}

.subject-item {
    text-align: center;
}

/* Alternate circle colors */
.subject-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.subject-circle:hover {
    transform: scale(1.05);
}

.subject-circle img {
    width: 50px;
    height: 50px;
}

.subject-name {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}


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

@media (max-width: 768px) {
    .brd-left {
        border-top: 2px dotted #003366 !important;
        border-left: unset !important;
        padding-top: 20px !important;
    }

    .heading-title {
        font-size: 8vw !important;
    }

    .timeline-container {
        height: 972px !important;
    }

    .col_sm8 {
        width: 60px !important;
        height: 60px !important;
    }

    h2.heading-title.title-text.animation-text.white-text.text-capitalized.m-0.words.chars.splitting.animated {
        font-size: 5.7vw !important;
    }

    .col_sm88 {
        width: 72% !important;
    }

    .accordion {
        max-width: 100%;
    }
}

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

    .timeline-container.mumbai-slide {
        height: 67vh !important;
    }

}

@media (max-width: 1271px) {
    .timeline-container .swiper-button-next {
        bottom: 5%;
        right: 10% !important;
    }

    .timeline-container .swiper-button-prev {
        bottom: 10% !important;
        right: 10% !important;
    }

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

    .card {
        flex: 43% !important;
    }

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

.circle-1 {
    border: 3px solid #f4a620;
}

.circle-2 {
    border: 3px solid #1d4a6d;
}

.animated-line:nth-child(odd) .img-section:before {
    background-color: #003366 !important;
}

.circle-3 {
    border: 3px solid #28a745;
}

.circle-4 {
    border: 3px solid #dc3545;
}

.circle-5 {
    border: 3px solid #6f42c1;
}

.brd-rht-bht {
    border-right: 2px dotted #03356885;
    border-bottom: 2px dotted #03356885;
}

.px-81 {
    padding-left: 81px !important;
    padding-right: 81px !important;
}

.brd-bht {
    border-bottom: 2px dotted #03356885;
}

.brd-rght {
    border-right: 2px dotted #03356885;
}

/* .timeline-container.mumbai-slide{
        height: auto !important;
    } */

@media screen and (min-height: 992px) and (max-height: 1400px) and (orientation: portrait) {
    .timeline-container {
        height: 521px !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .timeline-container.mumbai-slide {
        height: 853px !important;
    }
}

@media (max-width:767px) {
    .card {
        height: calc(50vh - 100px);
    }
}

@media (max-width: 480px) {

    /* .card {
            height: calc(70vh - 100px) !important;
        } */

    .accordion {
        max-width: 100%;
    }

    @keyframes drawLine {
        0% {
            height: 0;
            width: 0;
        }

        50% {
            height: 100%;
            width: 0;
        }

        100% {
            height: 99%;
            width: 99%;
        }
    }

    .right-border {
        margin-left: 15px;
    }
}

@media only screen and (max-width: 1300px) {

    .emp-img {
        width: 100% !important;
        box-shadow: 13px 6px 20px #00000014 !important;
        height: 38vh !important;
        overflow: hidden;
    }

    .score-goal img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
    }

    .img-section {
        height: auto !important;
    }

    .col_sm8 {
        width: 70px !important;
        height: 70px !important;
    }

    .emp-card {
        height: 420 !important;
    }

}

@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: 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;
    }

    .emp-img {
        width: 100% !important;
        box-shadow: 0px 0px 8px -6px gray !important;
    }

    .emp-card {
        height: 589px !important;
    }
}

.timeline-container.mumbai-slide .info1 {
    position: absolute;
    top: 5vw;
    width: 100%;
}

.timeline-container.mumbai-slide .swiper-wrapper {
    height: 100%;
    align-items: stretch;
}

.emp-img {
    width: 110%;
    border-bottom: 1.5vh solid var(--secondary-color);
    box-shadow: 13px 6px 19px gray;
    border-radius: 30px;
}

.emp-img img {
    width: 100%;
    border-radius: 13px;
}


.emp-card {
    background: var(--blue);
    padding: 30px;
    height: 420px;
    border-radius: 30px;
    box-shadow: 0 0 0 0 #ccc;
}

.timeline-container.mumbai-slide {
    height: 65vh;
    /* height: 100%; */
    /* height: auto; */
    overflow: visible;
}

/* .timeline-container .swiper-slide {
    background: transparent;
} */

.col_sm8 {
    background-color: #fff;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    padding: 10px;
    box-shadow: 0 0 0 2px #ecb250, inset 0 0 0 8px #003366;
}

.col_sm88 {
    width: 82%;
}

.cout-circle {
    background: #fff;
    width: 7vw;
    height: 7vw;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 1px solid var(--secondary-color);
    outline-offset: 8px;
    padding: 10px;
}

.w-90 {
    width: 90%;
}

.cout-circle.sec-2 {
    align-items: baseline;
    position: relative;
    margin-bottom: -3vw;
}

.cout-circle.sec-2:after {
    content: '';
    position: absolute;
    width: 120%;
    height: 54%;
    background: var(--blue);
    bottom: -9%;
}

.cunt-no {
    font-size: 20px;
    font-family: 'Merriweather';
    font-weight: bold;
    margin-bottom: 0;
}

.cunt-cont {
    font-size: 11px;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    margin-bottom: 0;
}

.cunt-cont2 {
    font-size: 11px;
    font-family: 'Merriweather';
    font-weight: bold;
    margin-bottom: 0;
}

.timeline-container.mumbai-slide .legacy-text {
    display: none;
}

.nextbtn {
    position: absolute;
    right: -26%;
    width: 50%;
    top: 18%;
    z-index: 1;
}

.nextbtn img {
    width: 60%;
}


/* Extracted page styles */
:root {
    --spacing-card: 15%;
}

/* 
        html {
            overflow-x: hidden !important;
            overflow-y: visible !important;
        } */

.ylw-bg {
    background-color: #ecb250 !important;
}

.blu-bg {
    background-color: #134168 !important;
}

.light-blu-bg {
    background-color: #5aadde !important;
}

.bg-color-heres {
    background-color: #00416b !important;
}

.w-40 {
    width: 40% !important;
}

.bg-sec {
    background: #efe5d7 !important;
}

.w-80 {
    width: 80% !important;
}

.weight-700 {
    font-weight: 700 !important;
}

.border-dotted {
    border-bottom: 3px dotted #000 !important;
}

.academic-card .Card {
    border-radius: 1vw !important;
    box-shadow: 0 0 15px #25252587;
}

.brd-left {
    border-left: 2px dotted #003366;
}

.heigh33 {
    margin-top: 0 !important;
    height: 88vh !important;
}

.bg-sec {
    height: auto !important;
}

.head-txt h2 {
    color: #FFF;
    font-family: 'Lato', sans-serif;
    font-size: 34px !important;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0 !important;
    font-style: normal !important;
}

.head-txt h2 span {
    font-style: normal !important;
}

.head-txt p {
    color: #fff;
    /* font-size: 1vw !important;
        line-height: 1.6vw !important;
        font-family: 'Merriweather', serif !important;
        color: #fff;
        font-weight: 400;
        text-align: left; */
}

.head-txt ul li span {
    font-size: 1vw !important;
    line-height: 1.6vw !important;
    font-family: 'Merriweather', serif !important;
    color: #fff;
    font-weight: 400;
    text-align: left;
}

.head-txt ul li:before {
    background: #fff;
}

.philos-quote {
    position: absolute;
    height: 40px;
    width: auto !important;
    top: -18px;
    left: -4px;
    mix-blend-mode: darken;
}

.philos-quote2 {
    position: absolute;
    height: 40px;
    width: auto !important;
    bottom: -2px;
    right: 0px;
    transform: rotate(180deg);
    mix-blend-mode: darken;
}

/* Keyframes for draw animation */
@keyframes drawLine {
    0% {
        height: 0;
        width: 0;
    }

    50% {
        height: 100%;
        width: 0;
    }

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

.life-slide .play-btn {
    z-index: 999 !important;
}

.life-slide .play-btn {
    opacity: 1;
}

.right-border {
    position: relative;
    padding: 0px;
    margin-left: 30px;
    padding-top: 15px;
}

.hover-text {
    justify-content: start !important;
    flex-direction: column !important;
    align-items: unset !important;
}

.box-section .bottom-title {
    right: 0 !important;
    bottom: 0px !important;
}

/* After pseudo-element - border shape */
.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: -3%;
    left: -3%;
    pointer-events: none;
    transition: none;
}

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

@keyframes slideUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.accordion {
    max-width: 60%;
    margin: auto;
}

.accordion-item {
    border-bottom: 1px solid #1d4a6d !important;
    padding: 15px 0;
    border-left: unset;
    border-right: unset;
    border-top: unset;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    color: #123456;
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: #f4a620;
}

.subject-box {
    text-align: center;
}


.contain-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 0px !important;
}

.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;
}

.subject-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid #f5a623;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto 0;
    position: relative;
    font-weight: bold;
    color: #1f4568;
    padding: 14px;
}


.subject-icon::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid #00bcd4;
    border-radius: 50%;
}

.img {
    width: 100%;
    display: block;
    mix-blend-mode: darken;
}

.subject-box p {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f4568;
}

.toggle-btn {
    position: relative;
    width: 40px;
    height: 40px;
    background: #f4a620;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
}

.toggle-btn:before,
.toggle-btn:after {
    content: '';
    position: absolute;
    background: white;
    transition: 0.3s;
}

.toggle-btn:before {
    width: 2px;
    height: 14px;
}

.toggle-btn:after {
    width: 14px;
    height: 2px;
}

.toggle-btn.open {
    transform: rotate(45deg);
}

.img-over {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, padding 0.6s ease;
    padding: 0;
}

.accordion-content.open {
    padding: 20px 0;
    max-height: 2000px;
}

.animated-line-pune .img-section:before {
    z-index: 9 !important;
}

.subjects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 10px;
}

.subject-item {
    text-align: center;
}

/* Alternate circle colors */
.subject-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.subject-circle:hover {
    transform: scale(1.05);
}

.subject-circle img {
    width: 50px;
    height: 50px;
}

.subject-name {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}


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

@media (max-width: 768px) {
    .brd-left {
        border-top: 2px dotted #003366 !important;
        border-left: unset !important;
        padding-top: 20px !important;
    }

    .heading-title {
        font-size: 8vw !important;
    }

    .timeline-container {
        height: 972px !important;
    }

    .col_sm8 {
        width: 60px !important;
        height: 60px !important;
    }

    h2.heading-title.title-text.animation-text.white-text.text-capitalized.m-0.words.chars.splitting.animated {
        font-size: 5.7vw !important;
    }

    .col_sm88 {
        width: 72% !important;
    }

    .accordion {
        max-width: 100%;
    }
}

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

    .timeline-container.mumbai-slide {
        height: 67vh !important;
    }

}

@media (max-width: 1271px) {
    .timeline-container .swiper-button-next {
        bottom: 5%;
        right: 10% !important;
    }

    .timeline-container .swiper-button-prev {
        bottom: 10% !important;
        right: 10% !important;
    }

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

    .card {
        flex: 43% !important;
    }

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

.circle-1 {
    border: 3px solid #f4a620;
}

.circle-2 {
    border: 3px solid #1d4a6d;
}

.animated-line:nth-child(odd) .img-section:before {
    background-color: #003366 !important;
}

.circle-3 {
    border: 3px solid #28a745;
}

.circle-4 {
    border: 3px solid #dc3545;
}

.circle-5 {
    border: 3px solid #6f42c1;
}

.brd-rht-bht {
    border-right: 2px dotted #03356885;
    border-bottom: 2px dotted #03356885;
}

.px-81 {
    padding-left: 81px !important;
    padding-right: 81px !important;
}

.brd-bht {
    border-bottom: 2px dotted #03356885;
}

.brd-rght {
    border-right: 2px dotted #03356885;
}

/* .timeline-container.mumbai-slide{
        height: auto !important;
    } */

@media screen and (min-height: 992px) and (max-height: 1400px) and (orientation: portrait) {
    .timeline-container {
        height: 521px !important;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .timeline-container.mumbai-slide {
        height: 853px !important;
    }
}

@media (max-width:767px) {
    .card {
        height: calc(50vh - 100px);
    }
}

@media (max-width: 480px) {

    /* .card {
            height: calc(70vh - 100px) !important;
        } */

    .accordion {
        max-width: 100%;
    }

    @keyframes drawLine {
        0% {
            height: 0;
            width: 0;
        }

        50% {
            height: 100%;
            width: 0;
        }

        100% {
            height: 99%;
            width: 99%;
        }
    }

    .right-border {
        margin-left: 15px;
    }
}

@media only screen and (max-width: 1300px) {

    .emp-img {
        width: 100% !important;
        box-shadow: 13px 6px 20px #00000014 !important;
        height: 38vh !important;
        overflow: hidden;
    }

    .score-goal img {
        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%;
    }

    .img-section {
        height: auto !important;
    }

    .col_sm8 {
        width: 70px !important;
        height: 70px !important;
    }

    .emp-card {
        height: 420 !important;
    }

}

@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: 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;
    }

    .emp-img {
        width: 100% !important;
        box-shadow: 0px 0px 8px -6px gray !important;
    }

    .emp-card {
        height: 589px !important;
    }
}

.timeline-container.mumbai-slide .info1 {
    position: absolute;
    top: 5vw;
    width: 100%;
}

.timeline-container.mumbai-slide .swiper-wrapper {
    height: 100%;
    align-items: stretch;
}

.emp-img {
    width: 110%;
    border-bottom: 1.5vh solid var(--secondary-color);
    box-shadow: 13px 6px 19px gray;
    border-radius: 30px;
}

.emp-img img {
    width: 100%;
    border-radius: 13px;
}


.emp-card {
    background: var(--blue);
    padding: 30px;
    height: 420px;
    border-radius: 30px;
    box-shadow: 0 0 0 0 #ccc;
}

.timeline-container.mumbai-slide {
    height: 65vh;
    /* height: 100%; */
    /* height: auto; */
    overflow: visible;
}

/* .timeline-container .swiper-slide {
    background: transparent;
} */

.col_sm8 {
    background-color: #fff;
    border-radius: 50%;
    width: 110px;
    height: 110px;
    padding: 10px;
    box-shadow: 0 0 0 2px #ecb250, inset 0 0 0 8px #003366;
}

.col_sm88 {
    width: 82%;
}

.cout-circle {
    background: #fff;
    width: 7vw;
    height: 7vw;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 1px solid var(--secondary-color);
    outline-offset: 8px;
    padding: 10px;
}

.w-90 {
    width: 90%;
}

.cout-circle.sec-2 {
    align-items: baseline;
    position: relative;
    margin-bottom: -3vw;
}

.cout-circle.sec-2:after {
    content: '';
    position: absolute;
    width: 120%;
    height: 54%;
    background: var(--blue);
    bottom: -9%;
}

.cunt-no {
    font-size: 20px;
    font-family: 'Merriweather';
    font-weight: bold;
    margin-bottom: 0;
}

.cunt-cont {
    font-size: 11px;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    margin-bottom: 0;
}

.cunt-cont2 {
    font-size: 11px;
    font-family: 'Merriweather';
    font-weight: bold;
    margin-bottom: 0;
}

.timeline-container.mumbai-slide .legacy-text {
    display: none;
}

.nextbtn {
    position: absolute;
    right: -26%;
    width: 50%;
    top: 18%;
    z-index: 1;
}

.nextbtn img {
    width: 60%;
}


@media (max-width: 1199px) {
    .img-section video{
        height: 100% !important;
    }
}

@media (max-width: 1199px) {
    .img-section video {
        height: 100% !important;
    }

    .contain-hover.ineer-cont .card {
        flex: 25% !important;
        height: calc(40vh - 100px);
    }
}

@media (max-width:767px) {
    .listing {
        font-size: 3.1vw;
    }
}

@media (max-width: 768px) {
    .txt-con {
        left: 14px;
        right: 14px;
        bottom: 16px;
    }
}