/* Position the arrows */
.slick-prev {
    left: -5%; /* Position the previous arrow to the left */
}

.slick-next {
    right: -5%; /* Position the next arrow to the right */
}

/* Style the arrows */
.slick-arrow {
    width: 40px; /* Arrow width */
    height: 40px; /* Arrow height */
    line-height: 40px; /* Center text vertically */
    font-size: 20px; /* Arrow icon size */
    text-align: center; /* Center text horizontally */
    border-radius: 100%; /* Make the arrow circular */
    position: absolute; /* Position them absolutely */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for centering */
    cursor: pointer; /* Change cursor to pointer on hover */
    z-index: 2; /* Make sure arrows are on top */
    color: #bbb; /* Set the arrow color */
    overflow-x: visible !important; /* Ensure visibility */
}

    /* Change arrow color on hover */
    .slick-arrow:hover {
        color: #00aee4; /* Change color on hover */
    }