.swiper-slide {
  height: auto; /* Allow height to adjust to content, or set a fixed value like 300px */
  width: 100%; /* Take up the full width of the Swiper container */
}

.swiper-slide img {
  display: block; /* Make image a block-level element for proper sizing */
  width: 100%; /* Image fills the width of its parent (.swiper-slide) */
  height: 100%; /* Image fills the height of its parent (.swiper-slide) */
  object-fit: cover; /* Images cover the entire container while maintaining aspect ratio */
}


/* Initially hide the navigation buttons */
.swiper-button-next,
.swiper-button-prev {
    opacity: 0;
    transition: opacity 0.3s ease-in-out; /* Add a smooth transition for the opacity change */
}

/* Show the navigation buttons when hovering over the Swiper container */
.swiper-container:hover .swiper-button-next,
.swiper-container:hover .swiper-button-prev {
    opacity: 1;
}

.swiper-container-wrapper{
  position: relative;
}

.goodvape-product-gallery {
  position: relative; /* Essential for positioning the navigation buttons */
  padding: 0 0; /* Adjust padding to make space for the buttons */
}

.custom-prev-button,
.custom-next-button {
  /* Add your custom styles here (e.g., color, size, position) */
  color: #333;
  font-size: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-20%);
  width: 25px;
  height: 25px;
  margin-top: -12.5px;
  /* Add other styling as needed */
  background-color: rgba(0, 0, 0, 0.5); /* Example background */
  border-radius: 5px;
  z-index: 10; /* Ensure buttons are above thumbnails */
  cursor: pointer;
  /* You can also use background-image for SVG icons */
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-20%);
  width: 25px;
  height: 25px;
  margin-top: -12.5px;
  /* Add other styling as needed */
  color: #000; /* Example color */
  background-color: rgba(0, 0, 0, 0.5); /* Example background */
  border-radius: 5px;
  z-index: 10; /* Ensure buttons are above thumbnails */
  cursor: pointer;
}

.swiper-button-prev {
  left: -40px; /* Adjust as needed */
}

.swiper-button-next {
  right: -40px; /* Adjust as needed */
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: ""; /* Adjust as needed to resize the arrow */
}


/*.swiper-button-prew::after {
    content: '\2039'; 
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    display: block;
}

.swiper-button-next::after {
    content: '\203A'; 
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    text-align: center;
    display: block;
}*/


