/* Swiper Container */
.swiper-container {
  position: relative; /* Make Swiper container a positioned element */
  max-width: 100%; /* Ensure container does not exceed screen width */
  margin: 0 auto; /* Center the slider horizontally */
  overflow: hidden; /* Hide overflow to prevent content from breaking out */
}

/* Swiper Slides */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* Add some padding around the content */
}

/* Style for Offer Items */
.offer-item {
  text-align: center;
  max-width: 90%;
  margin: auto;
  padding: 10px; /* Ensure some padding */
}

/* Style for Images in Offer Items */
.offer-img {
  width: 100%;
  max-height: 80vh; /* Ensures the image scales with the viewport height */
  height: auto; /* Maintain aspect ratio */
  border-radius: 5%; /* Rounded corners */
  margin-bottom: 15px; /* Space below the image */
  object-fit: contain; /* Keeps the image within its bounds while maintaining aspect ratio */
}

/* Style for Swiper Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  color: white; /* White color for the icons */
  width: 45px; /* Width of the button */
  height: 45px; /* Height of the button */
  border-radius: 50%; /* Rounded shape */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, transform 0.3s; /* Smooth transition effects */
  position: absolute; /* Position absolutely within the swiper container */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for perfect vertical centering */
  z-index: 10; /* Ensure buttons appear above content */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Add some shadow for better visibility */
}

/* Hover Effects for Navigation Buttons */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
  transform: translateY(-50%) scale(1.1); /* Keep vertical centering while scaling */
}

/* Adjust Icon Size */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px; /* Icon size */
}

/* Position Navigation Buttons */
.swiper-button-next {
  right: 10px; /* Position closer to the slider */
}

.swiper-button-prev {
  left: 10px; /* Position closer to the slider */
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 768px) {
  .swiper-button-next {
    right: 5px; /* Adjust position for smaller screens */
  }

  .swiper-button-prev {
    left: 5px; /* Adjust position for smaller screens */
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 35px; /* Smaller buttons */
    height: 35px;
  }

  .offer-img {
    max-height: 60vh; /* Reduce the image height for smaller screens */
  }
}