.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    position: relative;
}

.carousel-dot {
    width: 12px;            /* Set width of each dot */
    height: 12px;           /* Set height of each dot */
    margin: 0 5px;          /* Space between dots */
    border-radius: 50%;     /* Make the dots circular */
    background-color: #ccc; /* Inactive dot color */
    cursor: pointer;       /* Pointer cursor on hover */
    transition: background-color 0.3s, transform 0.3s;
    display: inline-block;  /* Ensure the dots are inline */
}

/* Active dot style */
.carousel-dot.active {
    background-color: #333; /* Active dot color */
    transform: scale(1.2);   /* Make the active dot slightly bigger */
}

/* Hide dots on large screens, show only on small screens */
@media (min-width: 992px) {
    .carousel-dots {
        display: none; /* Hide dots on larger screens (LG and up) */
    }
}