/* General styling for the Locations section */
.Locations {
  position: relative;
  width: 100%; /* Full width of the screen */
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Hide any overflowing content */
  border: 4px solid rgb(5, 5, 5);
}

/* Carousel styling */
.paryatanCarousel {
  position: relative;
  max-width: 100%; /* Ensure the carousel takes up full width */
  height: 100%; /* Ensure the carousel takes up full height */
 
}
.carousel-inner {
  width: 100%;
  height: 100%; /* Full height for each carousel item */
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%; /* Full screen height for each item */
 padding: 10px;
}

.carousel-item img {
  width: 100%;
  height: 100%; /* Ensure the images cover the full width and height */
  object-fit: cover; /* This ensures the images fill the space without distortion */
  transition: transform 0.3s ease-in-out;
}

.carousel-item p {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem; /* Large font size for the location name */
  font-weight: bold;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  padding: 20px 40px;
  border-radius: 10px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Shadow for better visibility */
  transition: opacity 0.3s ease-in-out;
}

/* Hover Effect on Images */
.carousel-item:hover img {
  transform: scale(1.1); /* Zoom effect on hover */
}

.carousel-item:hover p {
  opacity: 1; /* Make text fully visible on hover */
}

/* Carousel Controls (previous & next buttons) */
.carousel-control-prev, .carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #fff;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8); /* Enhance visibility */
  z-index: 20;
}

.carousel-control-prev {
  left: 30px;
  margin-top:400px;
  color: red;
}

.carousel-control-next {
  right: 30px;
  margin-top:400px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: #2c3e50;
  border-radius: 50%;
  padding: 15px;
}

.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
  background-color: #e74c3c; /* Red color for hover effect */
}

/* For smaller screen sizes */
@media (max-width: 768px) {
  .Locations h3 {
    font-size: 2.5rem; /* Adjust font size for smaller screens */
  }

  .carousel-item p {
    font-size: 1.8rem; /* Adjust text size for smaller screens */
    padding: 15px 25px;
  }

  .carousel-control-prev, .carousel-control-next {
    font-size: 2.5rem; /* Adjust control size */
  }
}