/* ========================================
   NAVIGATION STYLES
   Offcanvas, pagination, footer, social icons
   ======================================== */

/* ========================================
   PAGINATION STYLES
   Bootstrap pagination with gradient active state
   ======================================== */

.pagination .page-link {
    color: #0C2E4E;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .pagination .page-link:hover {
        background: var(--gradient);
        border-color: transparent;
        color: #FFFFFF;
    }
}

.pagination .page-item.active .page-link {
    background: var(--gradient);
    border-color: transparent;
    color: #FFFFFF;
}

.pagination .page-item.disabled .page-link {
    color: #9CA3AF;
    background-color: #F9FAFB;
    border-color: #E5E7EB;
}

/* ========================================
   OFFCANVAS NAVIGATION STYLES
   ======================================== */

.offcanvas-nav-link {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    border: none !important;
    transition: none !important;
}
.offcanvas-nav-link:active,
.offcanvas-nav-link:focus,
.offcanvas-nav-link.active {
    background: var(--gradient) !important;
    color: #FFFFFF !important;
}
@media (hover: hover) {
    .offcanvas-nav-link:hover {
        background: var(--gradient) !important;
        color: #FFFFFF !important;
    }
}

/* ========================================
   FOOTER STYLES
   Footer links and social icons
   ======================================== */

.footer-link {
    color: #B0B8C1;
    text-decoration: none;
    transition: all 0.3s ease;
}
@media (hover: hover) {
    .footer-link:hover {
        background: var(--gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}
.social-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-radius: 8px;
    text-decoration: none;
}
@media (hover: hover) {
    .social-icon:hover {
        background: var(--gradient);
        color: #FFFFFF;
    }
    .social-icon:hover i {
        color: #FFFFFF !important;
    }
}