.gallery-wrapper {
  position: relative;
  width: 100%;
}

/* Full width and height swiper container */

.gallery-swiper {
  width: 100%;
  height: 50vh;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1400px) {
  .gallery-swiper {
    width: 100%;
    height: 90vh;
    position: relative;
    overflow: visible;
  }
}

/* Each individual slide */

.gallery-swiper .swiper-slide {
  width: auto;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Styling the images inside each slide */

.gallery-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
  color: #000;
}

.gallery-pagination-bullet {
  background-color: var(--bs-primary);
}

.gallery-pagination {
  position: absolute;
  bottom: 14px !important;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 1 !important;
  overflow: visible !important;
  display: flex;
  justify-content: center;
}

.swiper-button-prev, .swiper-button-next {
  display: none;
}

/* ---- previous/next product-buttons ---- */

/* Position the buttons outside the carousel */

.gallery-button--previous, .gallery-button--next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 600;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bs-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

.gallery-button--previous {
  left: 40px;
}

.gallery-button--next {
  right: 40px;
}

.gallery-button--previous:hover, .gallery-button--next:hover {
  background: white;
  border: solid 1px var(--bs-primary);
}

/* Specific arrow styling and animations remain unchanged */

.gallery-button--previous .arrow-back {
  color: white !important;
  animation: imgslideleft 0.5s backwards;
}

.gallery-button--previous:hover .arrow-back {
  color: var(--bs-primary) !important;
  transform: translateY(100px);
  animation: imgslideleftreverse 0.5s forwards;
}

.gallery-button--next .arrow-forward {
  color: white !important;
  animation: imgslideleftreverse 0.5s backwards;
}

.gallery-button--next:hover .arrow-forward {
  color: var(--bs-primary) !important;
  transform: translateY(100px);
  animation: imgslideleft 0.5s forwards;
}

.gallery-carousel-navcontainer {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 95%;
  padding-left: 10px;
  padding-right: 10px;
}

@keyframes imgslideleft {
  0% {
    transform: translateX(0px);
    animation-timing-function: linear;
  }
  25% {
    opacity: 0;
    transform: translateX(20px);
    animation-timing-function: linear;
  }
  50% {
    opacity: 0;
    transform: translateX(-20px);
    animation-timing-function: linear;
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-in;
  }
}

@keyframes imgslideleftreverse {
  0% {
    transform: translateX(0px);
    animation-timing-function: ease-out;
  }
  25% {
    opacity: 0;
    transform: translateX(-20px);
    animation-timing-function: ease-out;
  }
  50% {
    opacity: 0;
    transform: translateX(20px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateX(0px);
    animation-timing-function: ease-out;
  }
}