.swiper {
      position: relative;
      padding: 20px 60px;
    }

    .swiper-slide {
      display: flex;
      flex: 0 0 25%;
      max-width: 25%;
      transition: all 0.2s ease-in-out;
      justify-content: center;
     
    }

    .swiper-slide.expanded {
      flex: 0 0 80% !important;
      max-width: 80% !important;
    }



    @media (max-width: 700px) { 
      .swiper-slide {
        display: flex;
        flex: 0 0 100%;
        max-width: 100%;
        transition: all 0.2s ease-in-out;
        justify-content: center;
      
      }

      .swiper-slide.expanded {
        flex: 0 0 100% !important;
        max-width: 100% !important;
      }

    }


    
    .card {
      width: 100%;
      border: none;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
    }

    .card-img {
      width: 100%;
      display: block;
    }

    .card-body {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      opacity: 0;
      padding: 1rem;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      transition: opacity 0.3s ease;
    }

    .card.expanded .card-img {
      opacity: 0;
      pointer-events: none;
    }

    .card.expanded .card-body {
      opacity: 1;
    }

    .card-body .bg-video {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      pointer-events: none;
      
    }

    .card-body>*:not(.bg-video) {
      position: relative;
      z-index: 1;
    }

    .swiper-slide.expanded .card-body .bg-video {
      display: block;
    }


   
    .swiper-button-prev,
    .swiper-button-next {
      position: absolute;
      top: 80%;
      transform: translateY(-50%);
      z-index: 10;
      color: #000000;
      background-color: #c2c2c2b0;
   
    }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
    background-color: #c2c2c2e3 !important;
   
    }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    display: none; /* Hides default arrow icons */
  }
    

    .swiper-button-prev {
      left: 1vw;
    width: 3vw;
    height: 3vw;
    }

    .swiper-button-next {
      right: 1vw;
      width: 3vw;
    height: 3vw;
    }


  
    .swiper-fade-left,
.swiper-fade-right {
  position: absolute;
  top: 20px;
  bottom: 0;
  width: 100px; /* Adjust as needed */
  z-index: 5;
  pointer-events: none;
}


.swiper-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
}

.swiper-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.6), transparent);
}