.elementor-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}
.elementor-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.elementor-pagination .page-numbers:not(.prev):not(.next) {
    border: 1.5px solid #C60003;
    color: #C60003;
    background: #fff;
}
.elementor-pagination .page-numbers:not(.prev):not(.next):hover,
.elementor-pagination .page-numbers.current {
    background: #C60003 !important;
    color: #fff !important;
    border-color: #C60003 !important;
}
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
    border: 1px solid #d1d5db;
    color: #6b7280;
    background: #fff;
    font-size: 0;
}
.elementor-pagination .page-numbers.prev:hover,
.elementor-pagination .page-numbers.next:hover {
    border-color: #C60003;
    color: #C60003;
    background: #fff;
}
/* Hide Elementor's built-in prev/next icon/text and draw prev.svg / next.svg
   instead, via CSS mask so the icon inherits the arrow's currentColor
   (gray by default, red on hover) without needing separate colored SVG files. */
.elementor-pagination .page-numbers.prev > *,
.elementor-pagination .page-numbers.next > * {
    display: none;
}
.elementor-pagination .page-numbers.prev::before,
.elementor-pagination .page-numbers.next::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.elementor-pagination .page-numbers.prev::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6L9 12L15 18' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6L9 12L15 18' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.elementor-pagination .page-numbers.next::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 480px) {
    .elementor-pagination {
        gap: 8px;
        flex-wrap: wrap;
    }
    .elementor-pagination .page-numbers {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
    .elementor-pagination .page-numbers.prev::before,
    .elementor-pagination .page-numbers.next::before {
        width: 14px;
        height: 14px;
    }
}