/* Style for the carousel slides */
.carousel-container-mobile .slick-slide,
.content-carousel-container-mobile .slick-slide {
    opacity: 0.6;
    margin-right: 16px; /* Adjust the margin as needed */
}
.carousel-container-mobile .slick-current,
.content-carousel-container-mobile .slick-current  {
    opacity: 1;
}

/* Remove margin for the last slide */
.carousel-container-mobile .slick-slide:last-child,
.content-carousel-container-mobile .slick-slide:last-child {
    margin-right: 0;
}

.carousel-container-mobile .slick-track,
.content-carousel-container-mobile .slick-track {
    display: flex !important;
}

.carousel-container-mobile .slick-slide,
.content-carousel-container-mobile .slick-slide {
    height: auto;
}

.carousel-container .slick-track {
    display: flex;
    padding-bottom: 1rem;
}

.carousel-container {
    position: relative;
}

/* Custom CSS for Slick Carousel arrows */
.slick-prev,
.slick-next {
    width: 48px;
    height: 48px;
    background-color: white !important;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0.6;
    transition: all ease-in-out 0.3s;
}

.slick-prev:hover {
    opacity: 1;
}
.slick-next:hover {
    opacity: 1;
}

.slick-prev {
    left: 0;
}
.slick-next {
    right: 0;
}

@media (max-width: 880px) {
    .slick-prev,
    .slick-next {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 680px) {

    /* Media query to hide arrows on mobile devices */
    .carousel-container .slick-prev,
    .carousel-container .slick-next {
        display: none; /* Hide the arrows on screens with a width of 768px or less (adjust as needed) */
    }

    /*removes padding on carousel mobile*/
    .content-carousel-container-mobile .section-content-container {
        padding: 0;
    }
}