/*
 Custom styles for Slick Slider arrows.
 These rules move the arrows to the sides of the slider,
 center them vertically, and add styling for better visibility.
*/

.slick-slider {
    position: relative;
}

.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2; /* Ensure arrows are above slider content */
    width: 50px; /* Increased size */
    height: 50px; /* Increased size */
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8); /* Lighter background for better contrast */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Modern shadow */
    font-size: 0; /* Hide the default text if any */
}

.slick-prev:hover,
.slick-next:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.slick-prev {
    left: 25px; /* Positioned inside, but further from edge */
}

.slick-next {
    right: 25px; /* Positioned inside, but further from edge */
}

/* Styling for the arrow icons (using pseudo-elements) */
.slick-prev:before,
.slick-next:before {
    font-family: 'slick'; /* Default slick icon font */
    font-size: 24px; /* Size of the arrow icon */
    line-height: 1;
    color: #333; /* Darker arrow color */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev:before {
    content: '←'; /* Left arrow character */
}

.slick-next:before {
    content: '→'; /* Right arrow character */
}

/* 
  Custom styles for Owl Carousel arrows.
  These rules mirror the Slick Slider styles for a consistent look.
*/
.owl-carousel-service .owl-nav {
    position: absolute;
    top: 65%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 25px;
    box-sizing: border-box;
    pointer-events: none; /* Allows clicks on the slider content */
}

.owl-carousel-service .owl-prev,
.owl-carousel-service .owl-next {
    pointer-events: auto; /* Re-enable pointer events for buttons */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8) !important;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 24px !important;
    color: #333 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owl-carousel-service .owl-prev:hover,
.owl-carousel-service .owl-next:hover {
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/*
  Ensure the icon span inside the nav buttons is perfectly centered.
  Setting the line-height equal to the button's height (50px) forces
  the icon to be vertically centered within the line-box.
*/
.owl-carousel-service .owl-prev span,
.owl-carousel-service .owl-next span {
    line-height: 50px;
}
/* 
  Styles for consistent image container size in carousels.
  This fixes inconsistent heights and arrow alignment.
*/
.carousel-image-container {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/*
  Styles for Owl Carousel dots (pagination)
*/
.owl-carousel-service .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px; /* Space between dots */
}

.owl-carousel-service button.owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #adb5bd; /* Inactive dots are now gray */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none; /* Shadow provides better definition than a border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Added subtle shadow to all dots */
}

.owl-carousel-service button.owl-dot.active {
    background-color: #ffffff; /* Active dot is solid white */
}

/* 
 * Carousel Controls Fade Effect 
 */
.home-slider .owl-nav, .owl-carousel-service .owl-nav,
.home-slider .owl-dots, .owl-carousel-service .owl-dots {
  /* Set the faded state as the default and ensure they are visible */
  opacity: 0.4;
  visibility: visible;
  transition: opacity 0.5s ease-in-out;
}

/* On hover, or when the .active-controls class is present, make them fully visible */
.home-slider:hover .owl-nav, .owl-carousel-service:hover .owl-nav,
.home-slider:hover .owl-dots, .owl-carousel-service:hover .owl-dots,
.home-slider.active-controls .owl-nav, .owl-carousel-service.active-controls .owl-nav,
.home-slider.active-controls .owl-dots, .owl-carousel-service.active-controls .owl-dots {
  opacity: 1;
}