.splide__pagination {
    counter-reset: pagination-num;
}

.splide__pagination__page {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #ddd;
    position: relative;
}

.splide__pagination__page:before {
    counter-increment: pagination-num;
    content: counter(pagination-num);
    color: #666;
    font-size: 14px;
}

.splide__pagination__page.is-active {
    background: #007bff;
    border-color: #007bff;
}

.splide__pagination__page.is-active:before {
    color: #fff;
}


.splide__arrows .splide__arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ddd;
    opacity: 1;
}

.splide__arrow svg {
    width: 1em;
    height: 1em;
    fill: #666;
}

.splide__arrow:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.splide__arrow:hover svg {
    fill: #007bff;
}

.splide__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Specific positioning for prev/next arrows */
.splide__arrow--prev {
    left: -3em;
}

.splide__arrow--next {
    right: -3em;
}