/*
    jQuery.paginate.css  
    Version 0.1.1
    Futuristic Boxed Theme with Border
*/

.paginate-pagination ul {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: sans-serif; /* Modern sans-serif font */
}

.paginate-pagination ul:after {
    content: ' ';
    display: table;
    clear: both;
}

.paginate-pagination ul > li {
    margin-right: 5px;
}

.paginate-pagination ul > li > a.page {
    display: block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border: 2px solid #ddd; /* Light border around the box */
    background-color: transparent; /* White background */
    color: #19b952; /* Futuristic blue text */
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Smooth transition on hover */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.paginate-pagination ul > li > a.page:hover {
    opacity: 0.8;
    transform: scale(1.05); /* Slightly enlarges on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

.paginate-pagination ul > li > a.page.active {
    background-color: #19b952; /* Blue background for active page */
    color: #fff; /* White text for active page */
    opacity: 1; /* Full opacity for active page */
    cursor: default;
    transform: scale(1.05); /* Slightly enlarged to indicate it's active */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow for active page */
}

.paginate-pagination ul > li > a.page-next.deactive,
.paginate-pagination ul > li > a.page-prev.deactive {
    opacity: 0.5; /* Lower opacity for deactivated buttons */
    cursor: not-allowed; /* Change cursor to not-allowed */
    background-color: transparent; /* Light gray background for disabled state */
    color: #19b952; /* Light gray text for disabled state */
    box-shadow: none; /* Remove shadow for deactivated buttons */
}

.paginate-pagination ul > li > a.page-next,
.paginate-pagination ul > li > a.page-prev {
    display: block;
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    border: 2px solid #ddd; /* Light border around the box */
    background-color: #000000; /* White background */
    color: #19b952; /* Futuristic blue text */
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Smooth transition */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.paginate-pagination ul > li > a.page-next:hover,
.paginate-pagination ul > li > a.page-prev:hover {
    opacity: 0.8;
    transform: scale(1.05); /* Slightly enlarges on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
}

/* Optional: For the background */
body {
    background: linear-gradient(135deg, #1a73e8, #00c6ff); /* Futuristic gradient background */
    font-family: 'Rajdhani', sans-serif; /* Modern font */
    color: #fff; /* White text */
}