.splide__slide img {
  width: 100%;
  height: auto;
}

.video-c video {
  width: 100%; /* Fills the slide container width */
  height: auto; /* Maintains video aspect ratio */
}
.round
{
  border-radius: 25px;
}

.splide__slide.is-active {
  img {
    transform: scale(1);
  }
  .video-c {
    transform: scale(1);
  }
}

.splide__slide {
  img {
    width: 500px;
    height: 888px;
    display: block;
    border-radius: 25px;
    transition: transform 460ms;
    transform: scale(.7);
    transform-origin: center center;
  }
}

.video-c {
  width: 450px;
  height: 799px;
  display: block;
  transition: transform 460ms;
  transform: scale(.7);
  transform-origin: center center;
  overflow: hidden; /* Hide anything outside the container */
}


@media (min-width: 2300px) {
  .splide__slide img {
    width: 600px;
    height: 1066px;  
  }
  .video-c {
    width: 600px;
    height: 1066px;  
  }
}

@media (max-width: 550px) {
  .splide__slide img {
    width: 300px;
    height: 533px;  
  }

  .video-c {
    width: 300px; /* Adjust width as needed */
    height: 533px; /* Adjust height as needed */
  }



  
}

@media (max-width: 350px) {
  .splide__slide img {
    width: 280px;
    height: 497px;  
  }

  .video-c {
    width: 280px;
    height: 497px;  
  }
}


.splide__arrow {
  background-color: #fff; /* Set the background color to white */
  color: #000; /* Set the color of the arrow to black */
  font-size: 2em; /* Increase the size of the arrow */
  position: absolute; /* Position the arrows absolutely */
  top: 50%; /* Center the arrows vertically */
  transform: translateY(-50%); /* Center the arrows vertically */
  transition: transform 0.3s ease; /* Add a transition to the transform property */
}

.splide__arrow--prev {
  left: 70px; /* Move the previous arrow to the left */
}

.splide__arrow--next {
  right: 70px; /* Move the next arrow to the right */
}

.splide__arrow:active {
  transform: translateY(-50%) scale(1.1); /* Scale the arrow up when it's clicked */
}

@media (max-width: 600px) {
  .splide__arrow {
      font-size: 1.5em; /* Decrease the size of the arrow for mobile screens */
  }

  .splide__arrow--prev {
    left: 10px; /* Move the previous arrow to the left */
  }
  
  .splide__arrow--next {
    right: 10px; /* Move the next arrow to the right */
  }
}