body{
    font-family: Arial, sans-serif;
    background:#f8f9fa;
}

/* Topbar */
.topbar{
    background:#1d1d1d;
    color:#fff;
    font-size:13px;
    padding:6px 0;
}

/* Header */
.main-header{
    background:#ffffff;
    padding:14px 0;
    border-bottom:1px solid #e5e5e5;
}

.logo{
    width:60px;
}

/* Navbar */
.navbar{
    box-shadow:0 2px 5px rgba(0,0,0,0.08);
}

.hero{
    background:
        linear-gradient(
            rgba(0,40,85,.78),
            rgba(0,60,130,.82)
        ),
        url('../images/crlb-bg.png');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color:#fff;
    padding:130px 0;
    min-height:520px;

    display:flex;
    align-items:center;
    animation: bgZoom 15s ease-in-out infinite alternate;
}

@media (max-width:1000px){
    .hero{
        animation: none;
    }
}

@keyframes bgZoom{
    from{
        background-size:100%;
    }
    to{
        background-size:110%;
    }
}
.search-box{
    max-width:720px;
    margin:auto;
}

/* Stats */
.stat-card{
    background:#fff;
    border:none;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    padding:25px;
    text-align:center;
}

/* Sections */
.section-title{
    font-weight:700;
    margin-bottom:20px;
}

/* Cards */
.record-card{
    border:none;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition:0.3s;
}

.record-card:hover{
    transform:translateY(-5px);
}

.province-card{
    background:#fff;
    padding:20px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}



/* Footer */
.footer{
    background:#0d1b2a;
    color:#fff;
    padding:30px 0;
}

.filter-card,
.record-card{
    background:#fff;
    border:none;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.record-card{
    transition:0.3s;
}

.record-card:hover{
    transform:translateY(-4px);
}

/* Badge */
.badge-custom{
    background:#eef8ee;
    color:#198754;
    font-weight:600;
}

.notice-card{
    background:#fff;
    border:none;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition:0.3s;
}

.notice-card:hover{
    transform:translateY(-4px);
}

.notice-date{
    font-size:14px;
    color:#6c757d;
}

.badge-news{
    background:#e8f1ff;
    color:#0d6efd;
}

.badge-alert{
    background:#fff3cd;
    color:#856404;
}

.badge-update{
    background:#e8f8ef;
    color:#198754;
}

/* Sidebar */
.sidebar-card{
    background:#fff;
    border:none;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.info-card{
    background:#fff;
    border:none;
    border-radius:12px;
    padding:30px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    height:100%;
}

/* ==========================================
   ULTRA MODERN BACK TO TOP BUTTON
========================================== */

.back-to-top-btn{
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 68px;
    height: 68px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
    padding: 0;
    overflow: hidden;

    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.85);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    transform: translateY(25px) scale(.85);
    transition: all .35s ease;
}

/* Show */
.back-to-top-btn.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Hover */
.back-to-top-btn:hover{
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 18px 38px rgba(13,110,253,.18),
        0 0 20px rgba(32,201,151,.12);
}

/* Click */
.back-to-top-btn:active{
    transform: scale(.95);
}

/* Icon */
.back-to-top-btn i{
    position: absolute;
    font-size: 1.9rem;
    color: #0d6efd;
    z-index: 5;
    transition: .3s ease;
}

.back-to-top-btn:hover i{
    transform: translateY(-3px);
}

/* Percent */
.percent-text{
    position: absolute;
    font-size: 11px;
    font-weight: 700;
    color: #0d6efd;
    bottom: 14px;
    z-index: 5;
    letter-spacing: .3px;
}

/* SVG */
.back-to-top-btn svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* Ring Track */
.track{
    fill: none;
    stroke: rgba(13,110,253,.08);
    stroke-width: 5;
}

/* Progress Ring */
.progress{
    fill: none;
    stroke: url(#ringGradient);
    stroke-width: 5;
    stroke-linecap: round;

    stroke-dasharray: 188.5;
    stroke-dashoffset: 188.5;

    transition: stroke-dashoffset .15s linear;
}

/* Glow when complete */
.back-to-top-btn.complete{
    animation: pulseGlow 1.4s infinite;
}

@keyframes pulseGlow{
    0%{
        box-shadow:
        0 0 0 rgba(13,110,253,0);
    }
    50%{
        box-shadow:
        0 0 22px rgba(13,110,253,.25),
        0 0 32px rgba(32,201,151,.18);
    }
    100%{
        box-shadow:
        0 0 0 rgba(13,110,253,0);
    }
}

/* Mobile */
@media(max-width:768px){

    .back-to-top-btn{
        width: 58px;
        height: 58px;
        right: 18px;
        bottom: 18px;
    }

    .back-to-top-btn i{
        font-size: 1.55rem;
    }

    .percent-text{
        font-size: 10px;
        bottom: 10px;
    }
}


/* ======================================
   ROUND ACCESSIBILITY ICON BUTTON
====================================== */

.access-btn{
    border: none;
    background-color: transparent;
    border-radius: 50%;
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    padding: 0px;
    display: none;
}

.access-btn-2 {
    border: none;
    background-color: transparent;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    padding: 0px;
    display: block;
}

@media (max-width: 991px) {
    .access-btn {
        display: block;
    }

    .access-btn-2 {
        display: none;
    }

}



/* Large icon */
.access-btn i{
    font-size: 2rem;
    line-height: 100%;
    color: white;
}

/* Hover */
.access-btn:hover{
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 24px rgba(0,0,0,.22)
}

/* Click */
.access-btn:active{
    transform: scale(.95);
}

/* Focus */
.access-btn:focus{
    outline: 1px solid #0d6efd;
}

/* Mobile */
@media(max-width:768px){

    .access-btn{
        width: 44px;
        height: 44px;
    }

    .access-btn i{
        font-size: 1.45rem;
    }
}
/* Dark blurred backdrop with background image */
.glass-modal .modal-backdrop.show {
    backdrop-filter: blur(12px);
}

/* Glass effect modal */
.glass-content {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Text readability */
.glass-content p,
.glass-content li {
    color: rgba(255, 255, 255, 0.9);
}

/* Links */
.glass-content a {
    text-decoration: underline;
}

/* Optional smoother animation */
.modal.fade .modal-dialog {
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.modal.show .modal-dialog {
    transform: translateY(0);
}

.navbar .nav-link {
    color: #fff;
}

.navbar .nav-link.active {
    color: #ffffff91 !important;
}