```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM PAGINATION SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/pagination.css
   Full Path:
   /public_html/assets/css/components/pagination.css

   Version: 1.0

   Used For:
   - Our Products
   - Product Categories
   - Search Results
   - Future Dynamic PHP Listings
   - Future Admin Controlled Content

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css
   - global.css
   - buttons.css
   ============================================================ */


/* ============================================================
   01. PAGINATION WRAPPER
   ============================================================ */

.pagination-wrapper {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-5);

    width: 100%;

    margin-top:
        clamp(2rem, 5vw, 4rem);
}


/* ============================================================
   02. PAGINATION
   ============================================================ */

.pagination {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* ============================================================
   03. PAGINATION ITEM
   ============================================================ */

.pagination-item {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 auto;
}


/* ============================================================
   04. PAGINATION LINK
   ============================================================ */

.pagination-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;
    height: 42px;

    padding:
        0
        12px;

    border:
        1px solid var(--border-light);

    border-radius:
        13px;

    color: var(--color-primary);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 7px 20px rgba(11, 43, 32, 0.035);

    font-family: var(--font-ui);

    font-size: 0.56rem;

    font-weight: var(--font-semibold);

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    user-select: none;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   05. PAGINATION LINK HOVER
   ============================================================ */

.pagination-link:hover {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.30);

    background:
        var(--bg-gold-soft);

    box-shadow:
        0 12px 28px rgba(183, 138, 61, 0.09);

    transform:
        translateY(-2px);
}


/* ============================================================
   06. ACTIVE PAGE
   ============================================================ */

.pagination-item.active
.pagination-link,

.pagination-link.active,

.pagination-link[aria-current="page"] {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.34);

    background:
        var(--gradient-gold);

    box-shadow:
        0 12px 30px rgba(183, 138, 61, 0.18);

    font-weight: var(--font-bold);
}


/* ============================================================
   07. ACTIVE PAGE HOVER
   ============================================================ */

.pagination-item.active
.pagination-link:hover,

.pagination-link.active:hover,

.pagination-link[aria-current="page"]:hover {
    transform: none;
}


/* ============================================================
   08. DISABLED PAGE
   ============================================================ */

.pagination-item.disabled
.pagination-link,

.pagination-link.disabled,

.pagination-link[aria-disabled="true"] {
    color: var(--text-muted);

    border-color:
        var(--border-light);

    background:
        var(--bg-soft);

    box-shadow: none;

    cursor: not-allowed;

    opacity: 0.48;

    pointer-events: none;
}


/* ============================================================
   09. PREVIOUS / NEXT LINK
   ============================================================ */

.pagination-prev,
.pagination-next {
    gap: 8px;

    min-width: auto;

    padding:
        0
        16px;
}


/* ============================================================
   10. PAGINATION ICON
   ============================================================ */

.pagination-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.55rem;

    line-height: 1;

    transition:
        transform var(--transition);
}


/* ============================================================
   11. PREVIOUS ICON HOVER
   ============================================================ */

.pagination-prev:hover
.pagination-icon {
    transform:
        translateX(-2px);
}


/* ============================================================
   12. NEXT ICON HOVER
   ============================================================ */

.pagination-next:hover
.pagination-icon {
    transform:
        translateX(2px);
}


/* ============================================================
   13. PAGINATION ELLIPSIS
   ============================================================ */

.pagination-ellipsis {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 34px;
    height: 42px;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.62rem;

    font-weight: var(--font-semibold);

    line-height: 1;

    user-select: none;
}


/* ============================================================
   14. PAGINATION INFO
   ============================================================ */

.pagination-info {
    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.54rem;

    font-weight: var(--font-medium);

    line-height: 1.5;
}


/* ============================================================
   15. PAGINATION INFO STRONG
   ============================================================ */

.pagination-info strong {
    color: var(--color-primary-deep);

    font-weight: var(--font-bold);
}


/* ============================================================
   16. PAGINATION CENTER
   ============================================================ */

.pagination-wrapper-center {
    justify-content: center;
}


/* ============================================================
   17. CENTER PAGINATION
   ============================================================ */

.pagination-center {
    justify-content: center;
}


/* ============================================================
   18. PAGINATION END
   ============================================================ */

.pagination-wrapper-end {
    justify-content: flex-end;
}


/* ============================================================
   19. PAGINATION START
   ============================================================ */

.pagination-wrapper-start {
    justify-content: flex-start;
}


/* ============================================================
   20. SMALL PAGINATION
   ============================================================ */

.pagination-sm {
    gap: 6px;
}

.pagination-sm
.pagination-link {
    min-width: 35px;
    height: 35px;

    padding:
        0
        10px;

    border-radius:
        11px;

    font-size: 0.5rem;
}

.pagination-sm
.pagination-ellipsis {
    height: 35px;
}


/* ============================================================
   21. LARGE PAGINATION
   ============================================================ */

.pagination-lg {
    gap: 10px;
}

.pagination-lg
.pagination-link {
    min-width: 48px;
    height: 48px;

    padding:
        0
        15px;

    border-radius:
        15px;

    font-size: 0.6rem;
}

.pagination-lg
.pagination-ellipsis {
    height: 48px;
}


/* ============================================================
   22. CIRCLE PAGINATION
   ============================================================ */

.pagination-circle
.pagination-link {
    width: 42px;

    min-width: 42px;

    padding: 0;

    border-radius:
        var(--radius-circle);
}


/* ============================================================
   23. CIRCLE PREVIOUS / NEXT
   ============================================================ */

.pagination-circle
.pagination-prev,

.pagination-circle
.pagination-next {
    width: 42px;

    min-width: 42px;

    padding: 0;
}


/* ============================================================
   24. PILL PAGINATION
   ============================================================ */

.pagination-pill
.pagination-link {
    border-radius:
        var(--radius-pill);
}


/* ============================================================
   25. BORDERLESS PAGINATION
   ============================================================ */

.pagination-borderless
.pagination-link {
    border-color: transparent;

    background: transparent;

    box-shadow: none;
}


/* ============================================================
   26. BORDERLESS HOVER
   ============================================================ */

.pagination-borderless
.pagination-link:hover {
    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);

    box-shadow: none;
}


/* ============================================================
   27. BORDERLESS ACTIVE
   ============================================================ */

.pagination-borderless
.pagination-item.active
.pagination-link,

.pagination-borderless
.pagination-link.active,

.pagination-borderless
.pagination-link[aria-current="page"] {
    border-color:
        rgba(183, 138, 61, 0.32);

    background:
        var(--gradient-gold);

    box-shadow:
        0 10px 25px rgba(183, 138, 61, 0.14);
}


/* ============================================================
   28. MINIMAL PAGINATION
   ============================================================ */

.pagination-minimal {
    gap: var(--space-2);
}

.pagination-minimal
.pagination-link {
    min-width: auto;
    height: auto;

    padding:
        5px
        8px;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}


/* ============================================================
   29. MINIMAL HOVER
   ============================================================ */

.pagination-minimal
.pagination-link:hover {
    color: var(--color-secondary-dark);

    background: transparent;

    box-shadow: none;

    transform: none;
}


/* ============================================================
   30. MINIMAL ACTIVE
   ============================================================ */

.pagination-minimal
.pagination-item.active
.pagination-link,

.pagination-minimal
.pagination-link.active,

.pagination-minimal
.pagination-link[aria-current="page"] {
    color: var(--color-secondary-dark);

    background: transparent;

    box-shadow: none;
}


/* ============================================================
   31. MINIMAL ACTIVE UNDERLINE
   ============================================================ */

.pagination-minimal
.pagination-item.active
.pagination-link::after,

.pagination-minimal
.pagination-link.active::after,

.pagination-minimal
.pagination-link[aria-current="page"]::after {
    content: "";

    position: absolute;

    right: 7px;
    bottom: 0;
    left: 7px;

    height: 1px;

    background:
        var(--color-secondary);
}


/* ============================================================
   32. GOLD PAGINATION
   ============================================================ */

.pagination-gold
.pagination-link {
    color: var(--color-secondary-dark);

    border-color:
        rgba(183, 138, 61, 0.20);

    background:
        var(--bg-gold-soft);
}


/* ============================================================
   33. GOLD PAGINATION HOVER
   ============================================================ */

.pagination-gold
.pagination-link:hover {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.38);

    background:
        var(--gradient-gold);
}


/* ============================================================
   34. DARK PAGINATION
   ============================================================ */

.pagination-dark
.pagination-link {
    color:
        rgba(255, 255, 255, 0.68);

    border-color:
        rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.045);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   35. DARK HOVER
   ============================================================ */

.pagination-dark
.pagination-link:hover {
    color: var(--color-secondary-light);

    border-color:
        rgba(212, 175, 104, 0.24);

    background:
        rgba(212, 175, 104, 0.07);
}


/* ============================================================
   36. DARK ACTIVE
   ============================================================ */

.pagination-dark
.pagination-item.active
.pagination-link,

.pagination-dark
.pagination-link.active,

.pagination-dark
.pagination-link[aria-current="page"] {
    color: var(--color-primary-deep);

    border-color:
        rgba(212, 175, 104, 0.35);

    background:
        var(--gradient-gold);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.14);
}


/* ============================================================
   37. DARK DISABLED
   ============================================================ */

.pagination-dark
.pagination-item.disabled
.pagination-link,

.pagination-dark
.pagination-link.disabled,

.pagination-dark
.pagination-link[aria-disabled="true"] {
    color:
        rgba(255, 255, 255, 0.30);

    border-color:
        rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.025);
}


/* ============================================================
   38. DARK ELLIPSIS
   ============================================================ */

.pagination-dark
.pagination-ellipsis {
    color:
        rgba(255, 255, 255, 0.40);
}


/* ============================================================
   39. PAGINATION WITH BACKGROUND
   ============================================================ */

.pagination-box {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--space-5);

    width: 100%;

    padding:
        var(--space-4)
        var(--space-5);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 12px 36px rgba(11, 43, 32, 0.045);
}


/* ============================================================
   40. GOLD PAGINATION BOX
   ============================================================ */

.pagination-box-gold {
    border-color:
        var(--border-gold);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(250, 248, 242, 0.94)
        );
}


/* ============================================================
   41. DARK PAGINATION BOX
   ============================================================ */

.pagination-box-dark {
    border-color:
        rgba(212, 175, 104, 0.12);

    background:
        rgba(255, 255, 255, 0.035);

    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.10);
}


/* ============================================================
   42. DARK PAGINATION INFO
   ============================================================ */

.pagination-box-dark
.pagination-info {
    color:
        rgba(255, 255, 255, 0.46);
}

.pagination-box-dark
.pagination-info strong {
    color: #ffffff;
}


/* ============================================================
   43. LOAD MORE WRAPPER
   ============================================================ */

.load-more-wrapper {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin-top:
        clamp(2rem, 5vw, 4rem);
}


/* ============================================================
   44. LOAD MORE
   ============================================================ */

.load-more {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-2);

    min-height: 46px;

    padding:
        0
        20px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-pill);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-family: var(--font-ui);

    font-size: 0.54rem;

    font-weight: var(--font-bold);

    line-height: 1;

    letter-spacing: 0.035em;

    cursor: pointer;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   45. LOAD MORE HOVER
   ============================================================ */

.load-more:hover {
    color: var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.36);

    background:
        var(--gradient-gold);

    box-shadow:
        0 14px 32px rgba(183, 138, 61, 0.15);

    transform:
        translateY(-2px);
}


/* ============================================================
   46. LOAD MORE ICON
   ============================================================ */

.load-more-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition:
        transform var(--transition);
}


/* ============================================================
   47. LOAD MORE HOVER ICON
   ============================================================ */

.load-more:hover
.load-more-icon {
    transform:
        translateY(2px);
}


/* ============================================================
   48. LOAD MORE LOADING
   ============================================================ */

.load-more.is-loading {
    pointer-events: none;

    opacity: 0.72;
}


/* ============================================================
   49. LOAD MORE SPINNER
   ============================================================ */

.load-more-spinner {
    display: none;

    width: 14px;
    height: 14px;

    border:
        2px solid rgba(11, 43, 32, 0.16);

    border-top-color:
        var(--color-primary-deep);

    border-radius:
        var(--radius-circle);

    animation:
        paginationSpin 0.7s linear infinite;
}


/* ============================================================
   50. SHOW LOADING SPINNER
   ============================================================ */

.load-more.is-loading
.load-more-spinner {
    display: inline-block;
}


/* ============================================================
   51. HIDE ICON WHEN LOADING
   ============================================================ */

.load-more.is-loading
.load-more-icon {
    display: none;
}


/* ============================================================
   52. PAGINATION SPINNER KEYFRAMES
   ============================================================ */

@keyframes paginationSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   53. PAGE JUMP
   ============================================================ */

.pagination-jump {
    display: flex;

    align-items: center;

    gap: var(--space-2);
}


/* ============================================================
   54. PAGE JUMP LABEL
   ============================================================ */

.pagination-jump-label {
    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    font-weight: var(--font-medium);

    white-space: nowrap;
}


/* ============================================================
   55. PAGE JUMP INPUT
   ============================================================ */

.pagination-jump-input {
    width: 62px;
    height: 40px;

    padding:
        0
        10px;

    border:
        1px solid var(--border-light);

    border-radius:
        11px;

    outline: none;

    color: var(--color-primary-deep);

    background: #ffffff;

    font-family: var(--font-ui);

    font-size: 0.55rem;

    font-weight: var(--font-semibold);

    text-align: center;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}


/* ============================================================
   56. PAGE JUMP INPUT FOCUS
   ============================================================ */

.pagination-jump-input:focus {
    border-color:
        rgba(183, 138, 61, 0.45);

    box-shadow:
        0 0 0 3px rgba(183, 138, 61, 0.08);
}


/* ============================================================
   57. PAGE JUMP BUTTON
   ============================================================ */

.pagination-jump-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 40px;

    padding:
        0
        14px;

    border:
        1px solid var(--border-gold);

    border-radius:
        11px;

    color: var(--color-primary-deep);

    background:
        var(--bg-gold-soft);

    font-family: var(--font-ui);

    font-size: 0.5rem;

    font-weight: var(--font-bold);

    cursor: pointer;

    transition:
        background-color var(--transition),
        border-color var(--transition);
}


/* ============================================================
   58. PAGE JUMP BUTTON HOVER
   ============================================================ */

.pagination-jump-button:hover {
    border-color:
        rgba(183, 138, 61, 0.36);

    background:
        var(--gradient-gold);
}


/* ============================================================
   59. PAGINATION RESULT COUNT
   ============================================================ */

.pagination-results {
    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.52rem;

    line-height: 1.5;
}


/* ============================================================
   60. RESULT COUNT NUMBER
   ============================================================ */

.pagination-results-number {
    color: var(--color-secondary-dark);

    font-weight: var(--font-bold);
}


/* ============================================================
   61. PREVIOUS NEXT ONLY
   ============================================================ */

.pagination-navigation {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--space-4);

    width: 100%;
}


/* ============================================================
   62. NAVIGATION CARD
   ============================================================ */

.pagination-nav-card {
    display: flex;

    align-items: center;

    gap: var(--space-4);

    min-height: 84px;

    padding:
        var(--space-4)
        var(--space-5);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-lg);

    color: var(--color-primary-deep);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 10px 30px rgba(11, 43, 32, 0.04);

    text-decoration: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition-premium);
}


/* ============================================================
   63. NAVIGATION CARD HOVER
   ============================================================ */

.pagination-nav-card:hover {
    border-color:
        rgba(183, 138, 61, 0.26);

    box-shadow:
        0 16px 42px rgba(11, 43, 32, 0.07);

    transform:
        translateY(-2px);
}


/* ============================================================
   64. NEXT NAVIGATION CARD
   ============================================================ */

.pagination-nav-next {
    justify-content: flex-end;

    text-align: right;
}


/* ============================================================
   65. NAV CARD ICON
   ============================================================ */

.pagination-nav-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-circle);

    color: var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    transition:
        transform var(--transition);
}


/* ============================================================
   66. PREVIOUS NAV ICON HOVER
   ============================================================ */

.pagination-nav-prev:hover
.pagination-nav-icon {
    transform:
        translateX(-3px);
}


/* ============================================================
   67. NEXT NAV ICON HOVER
   ============================================================ */

.pagination-nav-next:hover
.pagination-nav-icon {
    transform:
        translateX(3px);
}


/* ============================================================
   68. NAV CONTENT
   ============================================================ */

.pagination-nav-content {
    min-width: 0;
}


/* ============================================================
   69. NAV LABEL
   ============================================================ */

.pagination-nav-label {
    display: block;

    margin-bottom: 4px;

    color: var(--text-muted);

    font-family: var(--font-ui);

    font-size: 0.45rem;

    font-weight: var(--font-bold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ============================================================
   70. NAV TITLE
   ============================================================ */

.pagination-nav-title {
    display: block;

    color: var(--color-primary-deep);

    font-family: var(--font-heading);

    font-size: 0.88rem;

    font-weight: var(--font-semibold);

    line-height: 1.35;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* ============================================================
   71. PAGINATION FOCUS
   ============================================================ */

.pagination-link:focus-visible,
.load-more:focus-visible,
.pagination-jump-button:focus-visible,
.pagination-nav-card:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        3px;
}


/* ============================================================
   72. TABLET
   ============================================================ */

@media (max-width: 991.98px) {

    .pagination-wrapper {
        align-items: flex-start;

        flex-direction: column;
    }

    .pagination-wrapper-center {
        align-items: center;
    }

    .pagination-wrapper-end {
        align-items: flex-end;
    }

    .pagination-box {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* ============================================================
   73. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .pagination-wrapper {
        margin-top:
            var(--space-7);
    }

    .pagination {
        gap: 6px;
    }

    .pagination-link {
        min-width: 38px;
        height: 38px;

        padding:
            0
            10px;

        border-radius:
            11px;
    }

    .pagination-prev,
    .pagination-next {
        padding:
            0
            12px;
    }

    .pagination-ellipsis {
        min-width: 26px;
        height: 38px;
    }

    .pagination-navigation {
        grid-template-columns: 1fr;
    }

    .pagination-box {
        padding:
            var(--space-4);
    }

}


/* ============================================================
   74. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .pagination-wrapper,
    .pagination-wrapper-center,
    .pagination-wrapper-start,
    .pagination-wrapper-end {
        align-items: center;

        justify-content: center;
    }

    .pagination {
        justify-content: center;
    }

    .pagination-link {
        min-width: 36px;
        height: 36px;

        padding:
            0
            9px;

        font-size: 0.52rem;
    }

    .pagination-prev,
    .pagination-next {
        min-width: 36px;

        padding:
            0
            10px;
    }

    .pagination-prev
    .pagination-text,

    .pagination-next
    .pagination-text {
        display: none;
    }

    .pagination-ellipsis {
        height: 36px;
    }

    .pagination-info {
        width: 100%;

        text-align: center;
    }

    .pagination-box {
        align-items: center;
    }

    .pagination-jump {
        justify-content: center;

        width: 100%;
    }

    .pagination-nav-card {
        min-height: 76px;

        padding:
            var(--space-4);
    }

    .pagination-nav-title {
        font-size: 0.8rem;
    }

    .load-more {
        width: 100%;
    }

}


/* ============================================================
   75. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 374.98px) {

    .pagination {
        gap: 5px;
    }

    .pagination-link {
        min-width: 33px;
        height: 33px;

        padding:
            0
            7px;
    }

    .pagination-ellipsis {
        min-width: 20px;
        height: 33px;
    }

    .pagination-item-mobile-hide {
        display: none;
    }

}


/* ============================================================
   76. TOUCH DEVICES
   ============================================================ */

@media (hover: none) {

    .pagination-link:hover,
    .load-more:hover,
    .pagination-nav-card:hover {
        transform: none;
    }

}


/* ============================================================
   77. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .pagination-link,
    .pagination-icon,
    .load-more,
    .load-more-icon,
    .pagination-nav-card,
    .pagination-nav-icon,
    .pagination-jump-input,
    .pagination-jump-button {
        transition: none;
    }

    .pagination-link:hover,
    .load-more:hover,
    .pagination-nav-card:hover {
        transform: none;
    }

    .load-more-spinner {
        animation-duration:
            1.5s;
    }

}


/* ============================================================
   END OF ULTRA PREMIUM PAGINATION SYSTEM
   ============================================================ */
```