.thumbnail-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Responsive grid */
        gap: 8px;
        margin-top: 10px;
        justify-items: center;
    }
    
    .thumbnail-row .col {
        display: flex;
        justify-content: center;
    }
    
    .thumbnail {
        width: 100px; /* Adjust width as needed */
        cursor: pointer;
        border: 2px solid transparent;
        transition: border 0.3s;
    }
    
    .thumbnail img {
        /* width: 100%;
        height: auto; */
        width: 100px;
        height: 80px;
        display: block;
        border-radius:10px;
    }
    
    .ex-close .close {
        position: fixed;
        top: 50px;
        right: 50px;
        color: black;
        z-index: 999999;
    }

    .m-b{
        background-color: white;
        padding:50px 150px 60px 150px;
        border-radius:8px;
        max-width: 90vw;
        width: 100%;
    }

    .m-b-image{
        border-radius:10px;
        max-width: 100%;
        /* width: auto;
        height: auto; */
        width: 800px;
        height: 500px;
    }

    .modal-wrapper {
        /* max-width: 60vw;
        width: 100%; */
        max-width: 90vw;
        max-height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px;
    }

    .exhibition .m-b .carousel-control-prev{
        position: absolute;
        opacity: unset;
        bottom:0%;
        left:0%;
    }

    .exhibition .m-b .carousel-control-next {
        position: absolute;
        opacity: unset;
        right: 0%;
        bottom: 0%;
    }

    .exhibition.ex-close ol.carousel-indicators{
        display: none;
    }

    .upcoming-expo .swiper .card{
        border-radius: 8px;
        border: 0px;
    }

    .upcoming-expo .swiper-button-prev{
        left: 87.5%;
    }
    
    .upcoming-expo .swiper-button-next{
        right: 3.5%;
    }

    .v-m{
        width: 342px!important;
        height: 400px!important;
    }

    .video-thumbnail-card {
        width: 100%;
        height: 400px; /* Match other cards */
        border-radius: 8px;
        overflow: hidden;
        background: #fff; /* remove black bg */
    }

    .video-thumbnail {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .video-thumbnail img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .video-thumbnail .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.9); /* black circular background */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .video-thumbnail .play-button::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-left: 14px solid white; /* triangle play icon */
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }
    .swiper .card img{
        width: 100%;               
        max-width: 342px;           
        aspect-ratio: 342 / 400;    
        border-radius: 10px;
        overflow: hidden;
        margin: auto;               
    }
    .swiper .card img,
    .swiper .card video {
        width: 100%;
        height: 100%;
        /* object-fit: cover;*/
    }
    @media (max-width:1618px){
        .thumbnail-row .thumbnail {
            width: 90px;
        }
        .m-b-image{
            width: unset;
            height: unset;
        }
    }
    @media (max-width: 1143px) {
        .thumbnail-row {
            grid-template-columns: repeat(3, 1fr); 
        }
    }
    @media (max-width: 1200px) and (min-width:1025px) {
        .v-m
        {
            width: 300px !important;
            height: 350.88px !important;
        }
        .upcoming-expo .swiper-button-next
        {
            right: 2.5%;
        }
    }
    @media (max-width: 1200px) and (min-width:992px) {
        .video-thumbnail-card{
            height: 351px!important;
        }
    }
    @media (max-width: 1024px) and (min-width:768px) {
        .hoverable{
            margin-bottom:40px;
            padding:0px 20px 0px 20px;
        }
        .modal-wrapper{
            max-width: 70vw;
        }
        .m-b {
            padding: 50px 80px;
        }
        .v-m{
            width: 325px !important;
            height: 380.11px !important;
        }
         .upcoming-expo .swiper-button-prev{
            left: 88%;
        }
    }
    @media (max-width: 1024px) and (min-width:992px) {
        .swiper-slide .card {
            max-width: 300px;
        }
        .v-m
        {
            width: 300px !important;
            height: 350.88px !important;
        }
        .upcoming-expo .swiper-button-next{
            right: 2.5%!important;
        }
    }
    @media (max-width: 991px) and (min-width:768px) {
        .swiper-slide .card {
            max-width: 326px;
        }
        .upcoming-expo .swiper-button-prev {
            left: 83%;
        }
        .upcoming-expo .swiper-button-next{
            right: 4%;
        }
        .video-thumbnail-card{
            height: 382px!important;
        }
    }
    @media (max-width: 767px) {
        .modal-wrapper {
            padding: 1rem;
        }

        #modalCarousel .carousel-indicators,
        #modalCarousel-1 .carousel-indicators,
        #modalCarousel-2 .carousel-indicators
        {
            position: absolute;
            bottom: 0%;
            display: flex;
            justify-content: center;
        }
    
        #modalCarousel .carousel-indicators li,
        #modalCarousel-1 .carousel-indicators li,
        #modalCarousel-2 .carousel-indicators li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #6A6A6A;
            margin: 0 4px;
            border:0px;
        }
    
        #modalCarousel .carousel-indicators .active,
        #modalCarousel-1 .carousel-indicators .active,
        #modalCarousel-2 .carousel-indicators .active {
            background-color: #AA774AC7;
        }

        .exhibition .m-b .carousel-control-next,.exhibition .m-b .carousel-control-prev{
            display:none;
        }

        .modal-wrapper{
            padding: 0px;
            max-width: unset;
            max-height: unset;
        }
        .m-b{
            padding:50px 20px;
        }
        .m-b-image{
            width: unset;
            height: unset;
        }
        .hoverable{
            margin-bottom:40px;
            padding:0px 20px 0px 20px;
        }
        .ex-close .close{
            top: 16px;
            right: 20px;
        }
    }
    @media (max-width: 767px) and (min-width:431px) {
        .upcoming-expo .swiper-button-prev{
            left: 76%;
        }
    
        .upcoming-expo .swiper-button-next{
            right: 11%;
        }
    }
    @media (max-width: 430px) {
        .upcoming-expo .swiper-button-prev{
            left: 77%;
        }
    
        .upcoming-expo .swiper-button-next{
            right: 4%;
        }
    }
    @media (max-width: 375px) {
        .modal-wrapper{
            padding: 0px;
            max-width: unset;
            max-height: unset;
        }
        .m-b{
            padding:50px 20px;
        }
        .thumbnail-row .thumbnail {
            width: 94px;
        }
        .m-b-image{
            width: unset;
            height: unset;
        }
    }