/* Custom CSS for Owl Carousel pagination and navigation */

/* Styling for pagination dots */
.owl-carousel .owl-dots {
  text-align: center;
  margin-top: 20px;
}
.owl-carousel{
    position: relative;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    background: #ccc;
  
}
.owl-carousel .owl-dots {
    text-align: center;
    margin-top: 2px;
}
/* Styling for individual pagination dots */
.owl-carousel .owl-dot {
  display: inline-block;
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #a64444; /* Normal pagination dot color */
  cursor: pointer;
}

/* Styling for active pagination dot */
.owl-carousel .owl-dot.active {
  background-color: #3c3c3c; /* Active pagination dot color */
}
/* Styling for navigation buttons */
.owl-carousel .owl-nav {
  position: absolute;
  top: 10px; /* Adjust the top position as needed */
  width: 100%;
  z-index: 100;
}

/* Styling for navigation buttons */
.owl-carousel .owl-prev,
.owl-carousel .owl-next {
  position: absolute;
  top: -40px; /* Adjust the top position to move the buttons above the items */
  width: 40px; /* Adjust the width as needed */
  height: 40px; /* Adjust the height as needed */
  background-color: #fff!important; /* Navigation buttons background color */
  border-radius: 50%; /* Make the buttons round */
  color: #333; /* Navigation buttons text color */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Add transition effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add light shadow */
}

/* Styling for navigation buttons hover state */
.owl-carousel .owl-prev:hover,
.owl-carousel .owl-next:hover {
  background-color: #f2f2f2; /* Navigation buttons background color on hover */
}

/* Styling for navigation button positions */
.owl-carousel .owl-prev {
  right: 50px; /* Adjust the right position as needed */
}

.owl-carousel .owl-next {
  right: 10px; /* Adjust the right position as needed */
}
.owl-carousel .item {
    margin: 4px;
}
.pagination-disabled .owl-dots, .nav-disabled .owl-nav  {
    display: none;
}