/* Base Styles for small Mobile Devices */
@media (max-width: 768px) {
    .slider {
        width: 100%;
    }

    .slick-slide img {
        width: 90%;
    }    
}
/* Custom styles for the slider */
    .slider {
        width: 100%;
        margin: 0 auto;
        padding: 5px 0;
        position: relative;
    }

    .slick-slide {
        position: relative;
    }

    .slick-slide img {
        width: 99%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* Caption styles */
    .caption {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 5px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }

    /* Style for custom arrows */
    .slick-prev, .slick-next {
        background-color: rgba(0, 0, 0, 0.5);  /* Dark background */
        color: white;                           /* White text */
        border: none;                           /* No border */
        font-size: 16px;                        /* Font size */
        padding: 10px;                          /* Padding */
        position: absolute;                     /* Position arrows */
        top: 50%;                               /* Vertically center */
        z-index: 1000;                          /* Above other elements */
        transform: translateY(-50%);            /* Center vertically */
        cursor: pointer;                       /* Pointer cursor */
    }

    .slick-prev {
        left: 10px; /* Position left arrow */
    }

    .slick-next {
        right: 10px; /* Position right arrow */
    }

    /* Style for dots (navigation) */
    .slick-dots {
        bottom: -15px;
    }

    /* Optional: Hover effect for arrows */
    .slick-prev:hover, .slick-next:hover {
        background-color: rgba(0, 0, 0, 0.7); /* Darken background on hover */
    }