.splide__list {
    gap: 20px;
}

.splide__pagination {
    bottom: -2.5em;
    /* Moved slightly lower */
    z-index: 1;
    /* Ensure above other elements */
    display: flex !important;
    /* Force show even if Splide thinks it's not overflowing */
}

.splide__pagination__page.is-active {
    background: #E8693C !important;
    opacity: 1;
    transform: scale(1.2);
    /* Make active dot slightly larger */
}

.splide__pagination__page {
    background: #ccc;
    opacity: 0.7;
    margin: 0 5px;
    /* Add spacing between dots */
}

/* Ensure container has space for pagination */
.splide {
    padding-bottom: 3rem;
    margin-bottom: 1rem;
    /* Extra space before next section */
}

@media screen and (max-width: 768px) {
    .splide__list {
        gap: unset !important;
        height: 660px !important;
    }
}