/* Style for the Next button */
#slider .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

/* Style for the Previous button */
#slider .slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

/* Positioning the next and previous buttons if necessary */
#slider .slick-prev,
#slider .slick-next {
    z-index: 10;
    font-size: 0;
}

/* You can adjust the position of the buttons as well */
#slider .slick-prev {
    left: -25px;
}

#slider .slick-next {
    right: -25px;
}


/* Position the next and previous buttons relative to the slider */
#slider {
    position: relative;
}

/* Use FontAwesome icons for Next/Previous buttons */
#slider .slick-prev::before,
#slider .slick-next::before {
    font-weight: 900; /* Required for solid icons */
    color: #000; /* Icon color */
}

#slider .slick-prev::before {
    content: "←" !important; /* FontAwesome left arrow */
}

#slider .slick-next::before {
    content: "→"; /* FontAwesome right arrow */
}


#slider .slick-track
{
    display: flex;
    gap: 20px;
}