.custom-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0px, 1vw, 30px);
}

    .custom-pagination .page-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border: 1px solid #EB8B4B;
        border-radius: 50%;
        background-color: transparent;
        color: #EB8B4B;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        font-size: 15px;
        line-height: 10px;
    }

        .custom-pagination .page-circle.active {
            background-color: #EB8B4B;
            color: white;
        }

            .custom-pagination .page-circle.active:not(:disabled) .svg-icon {
                filter: brightness(0) invert(1);
            }

        .custom-pagination .page-circle:disabled {
            opacity: 0.5;
            cursor: default;
        }

    .custom-pagination .dots {
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 25px;
        color: #223F3B;
        font-size: 14px;
    }

.rotate-180 {
    transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
    .custom-pagination .page-circle:hover:not(:disabled) {
        background-color: #EB8B4B;
        color: white;
    }

        .custom-pagination .page-circle:hover:not(:disabled) .svg-icon {
            filter: brightness(0) invert(1);
        }
}