/* Example: Change the background color of the active page item */
.page-item.active .page-link {
    background-color: var(--secondary-200); /* Your desired color */
    border-color:var(--primary-700); /* Match the border color */
    color: var(--primary-default); /* Text color for better contrast */
}

/* Example: Change the color of the page links */
.page-link {
    color: var(--primary-default); /* Your desired color */
}

/* Example: Change the hover color of the page links */
.page-link:hover {
    color: var(--primary-700); /* A darker shade of your color */
}

/* Example: Styling the disabled page link */
.page-item.disabled .page-link {
    color: #6c757d; /* A light gray for disabled state */
    background-color: #fff; /* Match the background of the active page */
    border-color: #dee2e6; /* Match the border of the active page */
}

/* Example: Styling the pagination border */
.pagination {
    border: 1px solid #var(--primary-700); /* Match the border of the active page */
}

.page-item {
    border: none; /* Remove the individual page item border */
}