/* navigation.css */

/* Hide the default Slick navigation arrows */
.slick-prev, .slick-next {
    font-size: 0; /* Remove text from default arrows */
    background: none; /* Remove background */
    border: none; /* Remove border */
    outline: none; /* Remove outline */
    cursor: pointer; /* Ensure the pointer cursor on hover */
    position: absolute;
    top: 50%;
    z-index: 1;
}

/* Position the previous and next arrows */
.slick-prev, .slick-next {
    position: absolute!important;
    top: 50%!important;
    z-index: 1!important; /* Ensure the arrows are above other content */
    transform: translateY(-50%)!important; /* Vertically center the arrows */
    background-color: white!important; /* White background for the circular arrows */
    border-radius: 50%!important; /* Make the background circular */
    padding: 10px!important; /* Size of the circle (adjust as needed) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)!important; /* Subtle shadow */
    cursor: pointer!important;
    width: 2rem!important; /* Set a fixed width for the circle */
    height: 2rem!important; /* Set a fixed height for the circle */
    display: flex!important; /* Use flexbox to center the arrow */
    justify-content: center!important; /* Horizontally center the icon */
    align-items: center!important; /* Vertically center the icon */
}

/* Position for previous arrow */
.slick-prev {
    left: 0; /* Overlap the carousel when 100% width */
}

/* Position for next arrow */
.slick-next {
    right: 0; /* Overlap the carousel when 100% width */
}

/* Custom arrow icon styles */
.slick-prev:before, .slick-next:before {
    font-family: 'Font Awesome 5 Free'!important; /* Using FontAwesome for arrows */
    font-weight: 900!important;
    color: #B22222!important; /* Adjust color of the arrows */
    font-size: 20px!important; /* Adjust size of the arrows */
}

/* Left arrow */
.slick-prev:before {
    content: '\f104'; /* FontAwesome left arrow */
}

/* Right arrow */
.slick-next:before {
    content: '\f105'; /* FontAwesome right arrow */
}

/* Style for the custom dots */
.slick-dots {
    position: relative;
    display: flex;
    justify-content: center; /* Align dots to the center horizontally */
    gap: 13px; /* Add space between the dots */
    margin: 20px 0; /* Adjust space above and below the dots */
    padding: 0; /* Remove any padding */
    list-style: none; /* Prevent bullet points from appearing */
}

/* Remove bullet point style from individual dot items */
.slick-dots li {
    margin: 0; /* Remove any margin */
    padding: 0; /* Remove any padding */
    list-style: none; /* Prevent bullet points from appearing */
}

/* Custom dot style */
.slick-dot {
    background-color: black; /* Dot color */
    border: none;
    width: 20px; /* Dot size */
    height: 20px; /* Dot size */
    border-radius: 50%; /* Make dots circular */
    transition: background-color 0.3s ease;
    padding: 0; /* Remove any padding */
    font-size: 0; /* Remove any text inside the dot */
    outline: none; /* Remove focus outline */
}

/* Active dot style */
.slick-dots li.slick-active .slick-dot {
    background-color: #B22222; /* Active dot color */
}

/* Hover effect for custom dots */
.slick-dots li .slick-dot:hover {
    background-color: #B22222; /* Hover effect */
}