my-carousel-style.css

/* Styles for the container of the carousel and the navigation dots */
.carousel-container {
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto; /* Centers the container */
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .carousel-container {
        max-width: 100%; /* Allows the container to take the full width on smaller screens */
        margin: 0 auto; /* Centers the container */
    }
}

/* Styles for the carousel */
.carousel-wrapper {
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto; /* Centers the wrapper */
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .carousel-wrapper {
        overflow: hidden;
        width: 100%;
        margin: 0 auto; /* Centers the wrapper */
    }
}
.my-carousel {
    margin-left: 0;
    margin-right: 0; /* Adjust this value as needed */
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 768px){
    .my-carousel {
     margin-left: 0;
     margin-right: 0; /* Adjust this value as needed */
    }   
}
.my-carousel .slick-list {
    margin: 0 0; /* Counteract the padding on .my-carousel */
    align-items: center;
    justify-content: center;
}

/* Adjust padding for smaller screens */
@media screen and (max-width: 768px) {
    .my-carousel {
        padding: 0 2.5%; /* Reduce padding */
    }

    .my-carousel .slick-list {
        width: 100%; /* Make the carousel 150% the width of the viewport */
    }
}

/* Styles for the container of each item in the carousel */
.item-container {
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    text-align: center; /* Center text */
}

/* Styles for h4 elements */
h4 {
    text-align: center; /* Center text */
    font-size: x-small;
    align-items: center;
    justify-content: center;
}

/* Increase font size for larger screens */
@media screen and (min-width: 768px) {
    h4 {
        font-size: medium;
    }
}
/* Styles for each navigation dot */
.my-carousel .slick-dots li {
    margin: 0 1%; /* Add horizontal margins */
    }
/* Styles for the container of the navigation dots */
.carousel-container .slick-dots {
    bottom: -7%;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Ensures the dots container takes the full width of the carousel */
}

/* Styles for the button of each navigation dot */
.my-carousel .slick-dots li button {
    display: block; /* Display as block */
    width: .5vh; /* Set width */
    height: .5vh; /* Set height */
    padding: 0.05vh; /* Add padding */
    cursor: pointer; /* Change cursor to pointer on hover */
    border: 0; /* Remove border */
    outline: none; /* Remove outline */
    background: #181818; /* Set background color to black */
    border-radius: 50%; /* Make it circular */
    font-size: x-small;
}

/* Styles for the button of the active navigation dot */
.my-carousel .slick-dots li.slick-active button {
    background: #0E9C4B; /* Set background color to bright green */
}