.carousel-indicators {
    position: absolute;
    bottom: 10px; /* Adjust distance from the bottom */
    left: 35%; /* Move indicators slightly to the right (adjust the percentage as needed) */
    z-index: 15;
    display: flex; /* Arrange buttons in a row */
    justify-content: flex-start; /* Align the buttons to the left of the container */
    transform: translateX(-50%); /* Keep it centered while moving it to the right */
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    transition: background-color 0.3s, transform 0.3s;
    margin: 0 4px; /* Space out the buttons horizontally */
}

.carousel-indicators .active {
    background-color: #007bff; /* Change the active button color */
    transform: scale(1.2);
}

.carousel-indicators button:hover {
    background-color: #007bff; /* Change hover color */
    transform: scale(1.3); /* Slight scale effect on hover */
}

.carousel-inner {
    padding-left: 10px; /* Adjust this value to move the items more to the left */
}

.carousel-item {
    margin-left: -20px; /* Adjust this value to fine-tune the position of individual items */
}