.slider-container {
  margin: auto;
  width: 100%;
  overflow-x: hidden;
  outline: none;
}

/* Ensure the slides display horizontally */
.slick-slide {
  float: left;
  margin-block: auto;
}

/* Optional: Adjust the width of individual slides */
.slick-slide img {
  width: 100%; /* Adjust the width as needed */
}

.slick-list {
  border-radius: 0.75rem !important;
}

.slick-thumb {
  height: fit-content;
  width: 100%;
  display: flex !important;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-shrink: 0;
  overflow-x: auto;
}

.slick-thumb > .slick-active {
  border: 1px solid #000;
  border-radius: 0.75rem !important;
  /* box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
    var(--tw-ring-color);
  --tw-ring-color: rgb(250 250 250); */
}

.slick-thumb li {
  width: 140px;
  height: 89px;
  min-width: 140px;
}

.custom-prev-arrow {
  position: absolute;
  left: 30px; /* Adjust the left position as needed */
  top: 20rem;
  /* transform: translateY(-50%); */
  cursor: pointer;
  z-index: 20;
  /* Add any other styling for the left arrow */
}

.custom-next-arrow {
  position: absolute;
  right: 30px; /* Adjust the right position as needed */
  top: 20rem;
  /* transform: translateY(-50%); */
  cursor: pointer;
  /* z-index: 98; */
  /* Add any other styling for the right arrow */
}

/* @media only screen and (max-width: 640px) {
  .custom-prev-arrow {
    top: 8rem;
    left: 15px;
  }

  .custom-next-arrow {
    top: 8rem;
    right: 15px;
  }
} */

.slick-track {
  display: flex !important;
  column-gap: 0.5rem !important;
}
