/* 
 * LGU Portal Pro — Custom Styles
 * Extends OneUI 5.9 framework
 * Last updated: Feb 2026
 */

/* =============================================================================
   GLOBAL ENHANCEMENTS
   ============================================================================= */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Better focus outlines for all interactive elements */
:focus-visible {
    outline: 2px solid var(--lgu-primary, #1565C0);
    outline-offset: 2px;
}

/* Ensure touch targets are at least 44px */
.brand-header .nav-link,
.utility-link,
.dropdown-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Selection color */
::selection {
    background: rgba(21, 101, 192, 0.2);
    color: inherit;
}

/* =============================================================================
   PUBLIC NAV 0 — Emergency Alert Strip
   ============================================================================= */
.emergency-strip {
    background: linear-gradient(90deg, #dc3545, #a71d2a);
    color: #fff;
    font-size: .82rem;
    animation: alertPulseStrip 3s infinite;
    position: relative;
    z-index: 1050;
}
@keyframes alertPulseStrip {
    0%,100% { background-position: 0% 50%; }
    50%     { opacity: .92; }
}

/* =============================================================================
   PUBLIC NAV 1 — Utility Bar (top thin strip)
   ============================================================================= */
.utility-bar {
    background: #1a1a2e;
    font-size: .78rem;
    letter-spacing: .01em;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
    z-index: 1050;
}
.utility-link {
    color: rgba(255,255,255,.6);
    text-decoration: none;
    font-size: .78rem;
    transition: color .2s;
    background: none;
    border: none;
    cursor: pointer;
}
.utility-link:hover {
    color: #fff;
}

/* =============================================================================
   PUBLIC NAV 2 — Brand Header + Mega Menu
   ============================================================================= */
.brand-header {
    background: linear-gradient(135deg, var(--primary-dark, #0c4a6e) 0%, var(--primary-color, #0284c7) 100%);
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    position: relative;
    z-index: 1040;
}
.brand-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
}

/* Navbar links */
.brand-header .nav-link {
    color: rgba(255,255,255,.85) !important;
    font-weight: 500;
    font-size: .88rem;
    padding: .85rem .75rem !important;
    transition: color .2s, background .2s;
    letter-spacing: .01em;
    white-space: nowrap;
}
.brand-header .nav-link:hover,
.brand-header .nav-link:focus,
.brand-header .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.1);
}
.brand-header .nav-link.dropdown-toggle::after {
    vertical-align: .15em;
    margin-left: .3em;
    opacity: .65;
}

/* Search icon */
.nav-search-toggle {
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    transition: background .2s;
}
.nav-search-toggle:hover {
    background: rgba(255,255,255,.2) !important;
}

/* Dropdowns */
.brand-header .dropdown-menu {
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    padding: .5rem 0;
    margin-top: 0;
    animation: fadeDropdown .2s ease;
}
@keyframes fadeDropdown {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.brand-header .dropdown-item {
    padding: .3rem .6rem;
    font-size: .84rem;
    border-radius: 6px;
    margin: 0 .25rem;
    transition: background .15s;
}
.brand-header .dropdown-item:hover {
    background: rgba(var(--bs-primary-rgb, 2,132,199), .08);
}

/* Mega Menu — compact multi-column */
.mega-dropdown {
    position: relative !important;
}
.mega-menu {
    width: auto;
    min-width: 680px;
    max-width: 780px;
    border-radius: 0 0 12px 12px !important;
    padding: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* Prevent mega-menus from overflowing the viewport right edge */
@media (min-width: 992px) {
    .brand-header .navbar-nav > .mega-dropdown:nth-last-child(-n+4) .mega-menu {
        left: auto;
        right: 0;
    }
}
.mega-heading {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted-color, #6c757d);
    padding: 0 1rem .5rem;
    margin-bottom: .25rem;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb, 2,132,199), .15);
}

/* =============================================================================
   PUBLIC NAV 3 — Footer
   ============================================================================= */
.public-footer {
    position: relative;
}
.footer-wave-sep {
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23212529' d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat center;
    background-size: cover;
    pointer-events: none;
    margin-top: -1px;
}
.footer-main {
    background: #212529;
}
.footer-copyright {
    background: #1a1d21;
    border-top: 1px solid rgba(255,255,255,.06);
}
.footer-brand-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary-color, #0284c7);
    border: 1px solid rgba(255,255,255,.1);
}

/* Full-width main content override */
.main-content-full #main-container {
    max-width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
.main-content-full #main-container > .content {
    max-width: 1320px;
    margin: 0 auto;
}

/* Fix: remove sidebar space when sidebar is suppressed */
.main-content-full #page-container {
    padding-left: 0 !important;
}

/* Mobile mega-menu fallback */
@media (max-width: 991.98px) {
    .mega-menu {
        border-radius: 0 !important;
        min-width: auto;
        max-width: 100%;
    }
    .mega-menu .row > div {
        border-bottom: 1px solid rgba(0,0,0,.05);
        padding-bottom: .75rem;
        margin-bottom: .75rem;
    }
    .mega-menu .row > div:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }
    .brand-header .navbar-brand span.fs-5 {
        font-size: 1rem !important;
    }
}

/* =============================================================================
   INNER PAGE HERO — Unified hero for all inner public pages
   ============================================================================= */
.inner-page-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.inner-page-hero .hero-pattern {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
    z-index: 0;
}
.inner-page-hero .container-xl { z-index: 1; }
.inner-page-hero h1 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    text-shadow: 0 2px 8px rgba(0,0,0,.15);
    letter-spacing: -.01em;
}
.inner-page-hero .hero-sub {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.inner-page-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.5);
}
.inner-page-hero .breadcrumb-item a {
    text-decoration: none;
}

/* Hero colour variants */
.inner-hero-primary   { background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 50%, #0369a1 100%); }
.inner-hero-success   { background: linear-gradient(135deg, #14532d 0%, #16a34a 50%, #15803d 100%); }
.inner-hero-danger    { background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #b91c1c 100%); }
.inner-hero-warning   { background: linear-gradient(135deg, #78350f 0%, #d97706 50%, #b45309 100%); }
.inner-hero-info      { background: linear-gradient(135deg, #164e63 0%, #0891b2 50%, #0e7490 100%); }
.inner-hero-dark      { background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%); }

/* Utility: semi-transparent white text (75% opacity) — used in hero sections */
.text-white-75 { color: rgba(255, 255, 255, .75) !important; }

/* Inner page body wrapper — standard container for all inner pages */
.inner-page-body {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Section headings for inner pages */
.section-heading-sm h3,
.section-heading-sm h4 {
    font-weight: 700;
    color: var(--heading-color, #1e293b);
}
.section-heading-sm .heading-line {
    width: 50px;
    height: 3px;
    background: var(--primary-color, #0284c7);
    border-radius: 2px;
}

/* Info cards used in About, Services, Transparency detail pages */
.info-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    transition: transform .2s, box-shadow .2s;
    overflow: hidden;
}
.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.info-card .info-card-icon {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Official photo cards */
.official-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.official-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
}
.official-card .official-photo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--primary-color, #0284c7);
}
.official-card .official-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

/* Document/file list items */
.doc-list-item {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    transition: background .15s, border-color .15s;
    text-decoration: none;
    color: inherit;
}
.doc-list-item:hover {
    background: rgba(var(--bs-primary-rgb), .04);
    border-color: var(--primary-color, #0284c7);
}
.doc-list-item .doc-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ============================================================================= */

/* =============================================================================
   0. Scroll-reveal Animation System (AOS-like, zero-dependency)
   ============================================================================= */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(.25,.46,.45,.94);
}
[data-aos].aos-animate { opacity: 1; transform: none; }
[data-aos="fade-up"]   { transform: translateY(40px); }
[data-aos="fade-down"]  { transform: translateY(-40px); }
[data-aos="fade-left"]  { transform: translateX(40px); }
[data-aos="fade-right"] { transform: translateX(-40px); }
[data-aos="zoom-in"]    { transform: scale(.85); }
[data-aos="flip-up"]    { transform: perspective(800px) rotateX(12deg); }

/* Stagger delays via data-aos-delay */
[data-aos-delay="100"]  { transition-delay: .1s; }
[data-aos-delay="150"]  { transition-delay: .15s; }
[data-aos-delay="200"]  { transition-delay: .2s; }
[data-aos-delay="300"]  { transition-delay: .3s; }
[data-aos-delay="400"]  { transition-delay: .4s; }
[data-aos-delay="500"]  { transition-delay: .5s; }
[data-aos-delay="600"]  { transition-delay: .6s; }
[data-aos-delay="700"]  { transition-delay: .7s; }
[data-aos-delay="800"]  { transition-delay: .8s; }
[data-aos-delay="900"]  { transition-delay: .9s; }
[data-aos-delay="1000"] { transition-delay: 1s; }

@media (prefers-reduced-motion: reduce) {
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================================================
   1. Hero Section
   ============================================================================= */
.hero-portal {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 40%, #0a1628 100%);
}
.hero-portal::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.10) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(0,0,0,.3) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}
.hero-portal .hero-bg-img {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .22;
    mix-blend-mode: luminosity;
    animation: heroZoom 30s ease-in-out infinite alternate;
}
@keyframes heroZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}
.hero-portal .hero-particles {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(2px 2px at 10% 25%, rgba(255,255,255,.45) 50%, transparent 51%),
        radial-gradient(2px 2px at 35% 70%, rgba(255,255,255,.3)  50%, transparent 51%),
        radial-gradient(2px 2px at 55% 15%, rgba(255,255,255,.35) 50%, transparent 51%),
        radial-gradient(3px 3px at 75% 55%, rgba(255,255,255,.2)  50%, transparent 51%),
        radial-gradient(2px 2px at 90% 40%, rgba(255,255,255,.25) 50%, transparent 51%),
        radial-gradient(1px 1px at 25% 90%, rgba(255,255,255,.15) 50%, transparent 51%);
    animation: heroFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes heroFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-20px) scale(1.03); }
}
/* Hero text elements */
.hero-portal .container-xl { z-index: 2; }
.hero-badge {
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    font-weight: 600;
    letter-spacing: .04em;
    animation: heroBadgePulse 3s ease-in-out infinite;
}
@keyframes heroBadgePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.15); }
    50%     { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.hero-portal h1 {
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -.02em;
    text-shadow:
        0 2px 30px rgba(0,0,0,.5),
        0 4px 60px rgba(0,0,0,.25);
    line-height: 1.15;
}
.hero-portal .hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    opacity: .92;
    max-width: 650px;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.hero-portal .btn-hero {
    padding: .75rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    letter-spacing: .02em;
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    position: relative;
    overflow: hidden;
}
.hero-portal .btn-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-100%);
    transition: transform .5s ease;
}
.hero-portal .btn-hero:hover::after { transform: translateX(100%); }
.hero-portal .btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.hero-portal .btn-hero-primary {
    background: #fff;
    color: var(--primary-dark);
}
.hero-portal .btn-hero-primary:hover { background: #f0f0f0; }
.hero-portal .btn-hero-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,.6);
    color: #fff;
}
.hero-portal .btn-hero-outline:hover {
    border-color: #fff;
    background: rgba(255,255,255,.15);
}
/* Hero wave divider */
.hero-wave {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    z-index: 3;
    line-height: 0;
}
.hero-wave svg {
    width: 100%;
    height: 60px;
    display: block;
}

/* =============================================================================
   2. Quick Stats Ribbon
   ============================================================================= */
.stats-ribbon {
    background: var(--bg-color);
    position: relative;
    z-index: 5;
    margin-top: -48px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    padding: 1.5rem 1rem;
}
.stat-item {
    text-align: center;
    padding: .75rem .5rem;
    transition: transform .3s ease;
}
.stat-item:hover { transform: translateY(-4px); }
.stat-icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: .75rem;
    transition: box-shadow .3s ease;
}
.stat-item:hover .stat-icon { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--heading-color);
}
.stat-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-color);
    margin-top: .25rem;
}

/* =============================================================================
   3. Section Headers
   ============================================================================= */
.section-heading {
    position: relative;
    padding-bottom: .75rem;
    margin-bottom: 2rem;
}
.section-heading::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 50px; height: 3px;
    background: var(--primary-color);
    border-radius: 3px;
}
.section-heading.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}
.section-heading h2 {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--heading-color);
}
.section-heading .section-subtitle {
    color: var(--muted-color);
    font-size: .95rem;
    margin-top: .25rem;
}

/* Section overline label */
.section-overline {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--primary-color);
    margin-bottom: .5rem;
}

/* Section wave dividers */
.section-divider-wave {
    line-height: 0;
    overflow: hidden;
    margin-top: -1px;
}
.section-divider-wave svg {
    display: block;
    width: 100%;
    height: 50px;
}
.section-divider-wave--flip {
    margin-top: 0;
    margin-bottom: -1px;
}

/* =============================================================================
   3b. About Municipality Section
   ============================================================================= */
.about-fact-card {
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    overflow: hidden;
}
.about-fact-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light, #3d8bfd));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}
.about-fact-card:hover::before { transform: scaleX(1); }
.about-fact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: transparent;
}
.about-fact-icon {
    font-size: 1.5rem;
    margin-bottom: .75rem;
    opacity: .8;
}
.about-fact-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--heading-color);
    margin-bottom: .25rem;
}
.about-fact-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted-color);
    font-weight: 600;
}

/* =============================================================================
   3c. Vision & Mission Cards
   ============================================================================= */
.vm-card {
    border-radius: 16px;
    padding: 2rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
}
.vm-card::before {
    content: '';
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    border-radius: 16px;
}
.vm-card:hover::before { opacity: 1; }
.vm-card:hover { transform: translateY(-4px); }
.vm-vision {
    background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
    border: 1px solid rgba(13,110,253,.12);
}
.vm-vision::before {
    background: linear-gradient(135deg, rgba(13,110,253,.06) 0%, rgba(13,110,253,.02) 100%);
}
.vm-vision h4 { color: var(--primary-dark, #0b5ed7); }
.vm-mission {
    background: linear-gradient(135deg, #e6f9ef 0%, #f0fdf4 100%);
    border: 1px solid rgba(25,135,84,.12);
}
.vm-mission::before {
    background: linear-gradient(135deg, rgba(25,135,84,.06) 0%, rgba(25,135,84,.02) 100%);
}
.vm-mission h4 { color: #198754; }
.vm-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    transition: transform .3s ease;
}
.vm-card:hover .vm-icon-wrap { transform: scale(1.1) rotate(-5deg); }
.vm-vision .vm-icon-wrap {
    background: rgba(13,110,253,.12);
    color: var(--primary-color);
}
.vm-mission .vm-icon-wrap {
    background: rgba(25,135,84,.12);
    color: #198754;
}
.vm-card p {
    color: var(--text-color, #555);
    line-height: 1.7;
    font-size: .95rem;
}

/* =============================================================================
   4. Cards — Universal hover lift effect
   ============================================================================= */
.card-lift {
    position: relative;
    transition: transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s ease;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}
.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.1);
    z-index: 2;
}
/* Override OneUI a.block:hover opacity for card-lift blocks */
a.block.card-lift:hover { opacity: 1; }
/* Reset OneUI block shadow when card-lift is used (card-lift provides its own border) */
.block.card-lift { box-shadow: none; }
.card-lift .card-img-overlay-gradient {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
    pointer-events: none;
}

/* News card */
.news-card {
    transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease;
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}
.news-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: none;
    z-index: 2;
    pointer-events: none;
}
.news-card:hover::after {
    transform: translateX(100%);
    transition: transform .6s ease;
}
.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.news-card .news-date {
    font-size: .78rem;
    color: var(--muted-color);
    letter-spacing: .03em;
}
.news-card .news-category {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.news-card .news-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    transition: transform .5s ease;
}
.news-card:hover .news-img { transform: scale(1.05); }

/* Event Date Box */
.event-date-box {
    min-width: 64px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 12px;
    padding: .6rem .5rem;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.event-date-box .day {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.event-date-box .month {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .85;
}

/* =============================================================================
   5. Quick Links Grid
   ============================================================================= */
.quick-link-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 12px;
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}
.quick-link-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: none;
}
.quick-link-card:hover::after {
    transform: translateX(100%);
    transition: transform .6s ease;
}
.quick-link-card:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(var(--bs-primary-rgb, 13,110,253), .3);
}
.quick-link-card:hover .ql-icon,
.quick-link-card:hover .ql-label,
.quick-link-card:hover .ql-desc { color: #fff !important; }
.ql-icon {
    font-size: 2.2rem;
    margin-bottom: .75rem;
    display: block;
    color: var(--primary-color);
    transition: color .3s ease, transform .4s cubic-bezier(.25,.46,.45,.94);
}
.quick-link-card:hover .ql-icon { transform: scale(1.15) rotate(-5deg); }
.ql-label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--heading-color);
    transition: color .3s ease;
}
.ql-desc {
    font-size: .8rem;
    color: var(--muted-color);
    margin-top: .25rem;
    transition: color .3s ease;
}

/* =============================================================================
   6. Barangay Cards
   ============================================================================= */
.barangay-card {
    transition: all .3s ease;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}
.barangay-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-4px);
}
.barangay-card .icon-circle {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-size: 1.2rem;
    transition: transform .3s ease;
}
.barangay-card:hover .icon-circle { transform: scale(1.1) rotate(5deg); }

/* =============================================================================
   7. Officials Grid
   ============================================================================= */
.official-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: 12px;
    transition: all .3s ease;
}
.official-card:hover { transform: translateY(-4px); }
.official-card img {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.official-card:hover img {
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    transform: scale(1.05);
}
.official-card .position {
    font-size: .8rem;
    color: var(--muted-color);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* =============================================================================
   8. Service Cards
   ============================================================================= */
.service-card {
    height: 100%;
    border-radius: 12px;
    transition: all .3s ease;
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.1);
    border-color: var(--primary-color);
}
.service-card .service-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform .3s ease;
}
.service-card:hover .service-icon { transform: scale(1.12) rotate(-3deg); }

/* =============================================================================
   9. DRRM / Emergency Components
   ============================================================================= */
.emergency-alert-banner {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
    color: white;
    padding: 1rem 1.5rem;
    animation: alertPulse 3s infinite;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(220,53,69,.35);
}
@keyframes alertPulse {
    0%,100% { box-shadow: 0 4px 20px rgba(220,53,69,.35); }
    50%     { box-shadow: 0 4px 30px rgba(220,53,69,.55); }
}

.drrm-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
    overflow: hidden;
    position: relative;
}
.drrm-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: none;
}
.drrm-card:hover::after {
    transform: translateX(100%);
    transition: transform .6s ease;
}
.drrm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: transparent;
}
.drrm-card .drrm-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}
.drrm-card:hover .drrm-icon { animation: iconBounce .5s ease; }
@keyframes iconBounce {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.15); }
}

/* =============================================================================
   10. Footer — Legacy wave separator (for admin/non-public pages)
   ============================================================================= */
.footer-wave {
    position: relative;
}
.footer-wave::before {
    content: '';
    position: absolute;
    top: -60px; left: 0; right: 0;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23212529' d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat center;
    background-size: cover;
    pointer-events: none;
}
.footer-link {
    color: rgba(255,255,255,.55);
    text-decoration: none;
    transition: color .25s, padding-left .25s;
    display: inline-block;
    padding: .15rem 0;
}
.footer-link:hover {
    color: #fff;
    padding-left: 4px;
}
.footer-social-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.65);
    transition: all .3s ease;
    border: 1px solid rgba(255,255,255,.12);
}
.footer-social-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* =============================================================================
   11. Tourism / Destination Cards
   ============================================================================= */
.destination-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all .4s cubic-bezier(.25,.46,.45,.94);
}
.destination-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
}
.destination-card .dest-img {
    height: 220px;
    object-fit: cover;
    width: 100%;
    transition: transform .6s ease;
}
.destination-card:hover .dest-img { transform: scale(1.08); }
.destination-card .dest-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
    color: #fff;
}

/* =============================================================================
   12. Glassmorphism Utilities
   ============================================================================= */
.glass {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
}
[data-bs-theme="dark"] .glass {
    background: rgba(0,0,0,.2);
    border-color: rgba(255,255,255,.08);
}

/* =============================================================================
   13. Breadcrumb hero
   ============================================================================= */
.page-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    padding: 3rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.1) 0%, transparent 50%);
    pointer-events: none;
}
.page-hero h1 {
    font-weight: 800;
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    text-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.page-hero .breadcrumb {
    background: none;
    padding: 0; margin: 0;
}
.page-hero .breadcrumb-item a { color: rgba(255,255,255,.7); }
.page-hero .breadcrumb-item.active { color: rgba(255,255,255,.95); }
.page-hero .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,.4); }

/* =============================================================================
   14. Utility animations & micro-interactions
   ============================================================================= */
.hover-lift { transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }

.hover-scale { transition: transform .3s ease; }
.hover-scale:hover { transform: scale(1.03); }

.icon-spin-hover:hover i,
.icon-spin-hover:hover .fa { animation: iconSpin .6s ease; }
@keyframes iconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ripple-btn {
    position: relative;
    overflow: hidden;
}
.ripple-btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    transform: translate(-50%,-50%);
    transition: width .6s ease, height .6s ease, opacity .6s ease;
    opacity: 0;
}
.ripple-btn:active::after {
    width: 300px; height: 300px;
    opacity: 1;
    transition: 0s;
}

/* Animated gradient text */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animated underline for links */
.link-animated {
    position: relative;
    text-decoration: none;
}
.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--primary-color);
    transition: width .3s ease;
}
.link-animated:hover::after { width: 100%; }

/* =============================================================================
   15. Responsive Adjustments
   ============================================================================= */
@media (max-width: 768px) {
    .hero-portal { min-height: 340px; }
    .hero-wave svg { height: 40px; }
    .stats-ribbon { margin-top: -30px; padding: 1rem .5rem; }
    .stat-number { font-size: 1.35rem; }
    .barangay-card .icon-circle { width: 44px; height: 44px; }
    .news-card .news-img { height: 160px; }
    .destination-card .dest-img { height: 180px; }
    .footer-wave::before { height: 30px; top: -30px; }
    .about-fact-card { padding: 1rem .75rem; }
    .about-fact-value { font-size: 1.35rem; }
    .vm-card { padding: 1.5rem 1.25rem; }
    .section-divider-wave svg { height: 35px; }
}

@media (max-width: 576px) {
    .hero-portal { min-height: 300px; }
    .hero-wave svg { height: 30px; }
    .section-heading h2 { font-size: 1.3rem; }
    .quick-link-card { padding: 1.25rem .75rem; }
    .vm-card { padding: 1.25rem 1rem; }
    .section-divider-wave svg { height: 25px; }
}

/* =============================================================================
   16. Print Styles
   ============================================================================= */
@media print {
    .no-print,
    .hero-portal .hero-particles,
    .footer-wave::before { display: none !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* =============================================================================
   17. Widget System — Public Portal Widgets
   ============================================================================= */

/* Widget card base */
.widget-card {
    background: var(--card-bg-color, #fff);
    border-radius: var(--border-radius, 0.5rem);
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .2s, transform .2s;
}
.widget-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.widget-card-header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb, 2,132,199),.04), transparent);
}
.widget-card-title {
    margin: 0;
    font-weight: 600;
    font-size: .85rem;
    color: var(--heading-color, #1e293b);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.widget-card-body {
    padding: 1rem;
}

/* News widget items */
.widget-news-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    transition: background .2s;
}
.widget-news-item:last-child { border-bottom: none; }
.widget-news-item:hover { background: rgba(var(--bs-primary-rgb, 2,132,199), .04); }
.widget-news-date {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary-color, #0284c7);
    text-transform: uppercase;
    min-width: 3rem;
    padding-top: .1rem;
}
.widget-news-title {
    font-size: .85rem;
    font-weight: 500;
    color: var(--heading-color, #1e293b);
    line-height: 1.4;
}

/* Event widget items */
.widget-event-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    transition: background .2s;
}
.widget-event-item:last-child { border-bottom: none; }
.widget-event-item:hover { background: rgba(var(--bs-primary-rgb, 2,132,199), .04); }
.widget-event-date {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--primary-color, #0284c7);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    line-height: 1;
}
.widget-event-month { font-size: .6rem; text-transform: uppercase; font-weight: 700; }
.widget-event-day { font-size: 1.1rem; font-weight: 700; }
.widget-event-title { font-size: .85rem; font-weight: 500; color: var(--heading-color, #1e293b); }
.widget-event-meta { font-size: .75rem; color: var(--muted-color, #6c757d); }

/* Quick links */
.widget-quick-link {
    display: flex;
    align-items: center;
    padding: .6rem 1rem;
    text-decoration: none;
    color: var(--heading-color, #1e293b);
    font-size: .85rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    transition: background .2s, padding-left .2s;
}
.widget-quick-link:last-child { border-bottom: none; }
.widget-quick-link:hover {
    background: rgba(var(--bs-primary-rgb, 2,132,199), .04);
    padding-left: 1.25rem;
    color: var(--primary-color, #0284c7);
}

/* Contact info */
.widget-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: .85rem;
    color: var(--muted-color, #6c757d);
}
.widget-contact-item:last-child { margin-bottom: 0; }
.widget-contact-item a { color: var(--primary-color, #0284c7); text-decoration: none; }
.widget-contact-item a:hover { text-decoration: underline; }

/* Social media buttons */
.widget-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: transform .2s, box-shadow .2s;
}
.widget-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    color: #fff;
}

/* Officials widget */
.widget-official-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.widget-official-item:last-child { border-bottom: none; }
.widget-official-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color, #0284c7);
}
.widget-official-photo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color, #0284c7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.widget-official-name { font-size: .85rem; font-weight: 600; color: var(--heading-color, #1e293b); }
.widget-official-position { font-size: .75rem; color: var(--muted-color, #6c757d); }

/* Announcement widget */
.widget-announcement-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.widget-announcement-item:last-child { border-bottom: none; }
.widget-announcement-badge {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: .5rem;
    background: rgba(255, 193, 7, .15);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}
.widget-announcement-title {
    font-size: .85rem;
    font-weight: 500;
    color: var(--heading-color, #1e293b);
    text-decoration: none;
}
.widget-announcement-title:hover { color: var(--primary-color, #0284c7); }
.widget-announcement-date { font-size: .72rem; color: var(--muted-color, #6c757d); }

/* Statistics widget */
.widget-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: .75rem;
    text-align: center;
}
.widget-stat-item {
    padding: .5rem;
}
.widget-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb, 2,132,199), .1);
    color: var(--primary-color, #0284c7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .5rem;
    font-size: .85rem;
}
.widget-stat-value { font-size: 1.25rem; font-weight: 700; color: var(--heading-color, #1e293b); }
.widget-stat-label { font-size: .72rem; color: var(--muted-color, #6c757d); text-transform: uppercase; }

/* Gallery widget */
.widget-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
.widget-gallery-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .3s;
}
.widget-gallery-item:hover img { transform: scale(1.05); }
.widget-gallery-item { overflow: hidden; }

/* Widget before-footer zone */
.widget-zone-before-footer .widget-card {
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Sidebar layout helper */
.widget-sidebar .widget-card {
    margin-bottom: 1.5rem;
}

/* =============================================================================
   ACCESSIBILITY — Skip Navigation
   ============================================================================= */
.skip-nav-link {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: 0.75rem 1.5rem;
    background: var(--lgu-primary, #1565C0);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.skip-nav-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid rgba(255,255,255,0.5);
    outline-offset: -3px;
}

/* =============================================================================
   OFFCANVAS NAVIGATION — Mobile menu styling
   ============================================================================= */
@media (max-width: 991.98px) {
    #publicNavOffcanvas {
        border-left: none;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    }

    #publicNavOffcanvas .navbar-nav {
        padding: 0;
    }

    #publicNavOffcanvas .nav-link {
        color: #334155 !important;
        font-weight: 500;
        padding: 0.75rem 1.25rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 0.95rem;
    }

    #publicNavOffcanvas .nav-link:hover,
    #publicNavOffcanvas .nav-link.active {
        background: rgba(var(--bs-primary-rgb, 21, 101, 192), 0.06) !important;
        color: var(--lgu-primary, #1565C0) !important;
    }

    #publicNavOffcanvas .dropdown-toggle::after {
        margin-left: auto;
        transition: transform 0.2s;
    }

    #publicNavOffcanvas .dropdown.show .dropdown-toggle::after {
        transform: rotate(180deg);
    }

    #publicNavOffcanvas .dropdown-menu {
        position: static !important;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        background: #f8fafc;
    }

    #publicNavOffcanvas .dropdown-item {
        padding: 0.6rem 1.25rem 0.6rem 2.5rem;
        font-size: 0.875rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    #publicNavOffcanvas .dropdown-header {
        padding: 0.5rem 1.25rem 0.25rem 2rem;
    }

    /* Mega menu mobile overrides */
    #publicNavOffcanvas .mega-menu {
        position: static !important;
        width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #publicNavOffcanvas .mega-menu .container-xl {
        padding: 0;
    }

    #publicNavOffcanvas .mega-menu .row {
        flex-direction: column;
        margin: 0;
    }

    #publicNavOffcanvas .mega-menu .row > div {
        padding: 0;
        border-bottom: none;
        margin-bottom: 0;
    }

    #publicNavOffcanvas .mega-menu .mega-heading {
        padding: 0.5rem 1.25rem 0.25rem 1.25rem;
        margin-top: 0.25rem;
    }

    #publicNavOffcanvas .mega-menu .dropdown-item {
        padding: 0.5rem 1.25rem 0.5rem 2.5rem;
    }

    /* Dark mode offcanvas */
    [data-bs-theme="dark"] #publicNavOffcanvas {
        background: #1e293b;
    }

    [data-bs-theme="dark"] #publicNavOffcanvas .nav-link {
        color: #e2e8f0 !important;
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    [data-bs-theme="dark"] #publicNavOffcanvas .dropdown-menu {
        background: #0f172a;
    }

    [data-bs-theme="dark"] #publicNavOffcanvas .dropdown-item {
        color: #cbd5e1;
    }
}

/* On desktop, offcanvas behaves as normal navbar-collapse */
@media (min-width: 992px) {
    #publicNavOffcanvas {
        position: static;
        visibility: visible !important;
        background: transparent;
        border: none;
        flex-grow: 1;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }

    #publicNavOffcanvas .offcanvas-header {
        display: none;
    }

    #publicNavOffcanvas .offcanvas-body {
        padding: 0;
        display: flex;
        align-items: center;
    }
}

/* =============================================================================
   FOOTER ENHANCEMENTS
   ============================================================================= */
.footer-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: #fff;
}

.footer-social-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.footer-social-btn:hover {
    background: var(--lgu-primary, #1565C0);
    color: #fff;
    transform: translateY(-2px);
}

/* =============================================================================
   DARK MODE — Public portal overrides
   ============================================================================= */
[data-bs-theme="dark"] .utility-bar {
    background: #0f172a;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .brand-header {
    background: linear-gradient(135deg, #0c2d4a 0%, #0a3d6b 100%);
}

[data-bs-theme="dark"] .brand-header .dropdown-menu {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .brand-header .dropdown-item {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .brand-header .dropdown-item:hover {
    background: rgba(99, 155, 255, 0.1);
    color: #93c5fd;
}

[data-bs-theme="dark"] .brand-header .mega-heading {
    color: #64748b;
    border-bottom-color: rgba(99, 155, 255, 0.15);
}

[data-bs-theme="dark"] .bg-body-extra-light {
    background: #1e293b !important;
}

[data-bs-theme="dark"] .footer-wave-sep {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%230f172a' d='M0,40 C240,80 480,0 720,40 C960,80 1200,0 1440,40 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .footer-main {
    background: #0f172a;
}

[data-bs-theme="dark"] .footer-copyright {
    background: #020617;
}

/* =============================================================================
   PUBLIC PAGE POLISH — Professional enhancements for public-facing pages
   ============================================================================= */

/* ─── Hero Section Enhancements ──────────────────────────────────────── */
.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-dark, #0c4a6e), var(--primary-color, #1565C0));
    color: #fff;
    padding: 3.5rem 0;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255,255,255,.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0%, transparent 50%);
    pointer-events: none;
}

.hero-section .hero-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.hero-section .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.85;
    font-weight: 400;
    max-width: 600px;
}

.hero-section .hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-section .hero-stat {
    text-align: center;
}

.hero-section .hero-stat-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.hero-section .hero-stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
}

/* ─── Page Header (non-hero) ─────────────────────────────────────────── */
.page-header-section {
    background: linear-gradient(135deg, var(--primary-dark, #0c4a6e) 0%, var(--primary-color, #1565C0) 100%);
    color: #fff;
    padding: 2rem 0 1.75rem;
    position: relative;
    overflow: hidden;
}

.page-header-section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32'%3E%3Cpath fill='%23f8f9fa' d='M0,16 C360,32 720,0 1080,16 S1440,32 1440,16 L1440,32 L0,32Z'/%3E%3C/svg%3E") bottom/100% no-repeat;
}

[data-bs-theme="dark"] .page-header-section::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32'%3E%3Cpath fill='%23111827' d='M0,16 C360,32 720,0 1080,16 S1440,32 1440,16 L1440,32 L0,32Z'/%3E%3C/svg%3E");
}

.page-header-section h1 {
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: .25rem;
}

.page-header-section .page-lead {
    opacity: .8;
    font-size: .95rem;
    max-width: 600px;
}

/* ─── Content Section Polish ─────────────────────────────────────────── */
.section-title {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: .75rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--primary-color, #1565C0);
    border-radius: 2px;
}

.section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* ─── Card Enhancements ──────────────────────────────────────────────── */
.card-hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid rgba(0,0,0,.08);
}

.card-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

.card-feature {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: all 0.3s ease;
}

.card-feature:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    transform: translateY(-3px);
}

.card-feature .card-img-top {
    height: 200px;
    object-fit: cover;
}

.card-feature .card-body {
    padding: 1.25rem;
}

/* ─── Statistics Cards (used on home, dashboard) ─────────────────────── */
.stat-card {
    background: #fff;
    border: none;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.stat-card .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .75rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary-dark, #0c4a6e);
}

.stat-card .stat-label {
    font-size: .82rem;
    color: #6b7280;
    margin-top: .25rem;
}

[data-bs-theme="dark"] .stat-card {
    background: #1e293b;
}

[data-bs-theme="dark"] .stat-card .stat-value {
    color: #93c5fd;
}

/* ─── Timeline (for events, news) ────────────────────────────────────── */
.timeline {
    position: relative;
    padding-left: 2.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-gray-300, #dee2e6);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.75rem;
    top: .5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color, #1565C0);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--primary-color, #1565C0);
}

.timeline-item .timeline-date {
    font-size: .78rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

[data-bs-theme="dark"] .timeline::before {
    background: #374151;
}

/* ─── Info Banner (used on about, services) ──────────────────────────── */
.info-banner {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-left: 4px solid var(--primary-color, #1565C0);
    border-radius: 0 .75rem .75rem 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.info-banner h5 {
    color: var(--primary-dark, #0c4a6e);
    font-weight: 700;
}

[data-bs-theme="dark"] .info-banner {
    background: linear-gradient(135deg, #0c2d4a, #0a3d6b);
    border-left-color: #3b82f6;
}

[data-bs-theme="dark"] .info-banner h5 {
    color: #93c5fd;
}

/* ─── Profile Cards (officials, personnel) ───────────────────────────── */
.profile-card {
    text-align: center;
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.profile-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    transform: translateY(-3px);
}

.profile-card .profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(var(--bs-primary-rgb, 21, 101, 192), .15);
    margin: 1.5rem auto .75rem;
}

.profile-card .profile-name {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .15rem;
}

.profile-card .profile-title {
    font-size: .85rem;
    color: #6b7280;
}

[data-bs-theme="dark"] .profile-card {
    background: #1e293b;
}

/* ─── Back to Top Button ─────────────────────────────────────────────── */
.btn-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1020;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-color, #1565C0);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-back-to-top:hover {
    background: var(--primary-dark, #0c4a6e);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
}

/* ─── Smooth Animated Counter ────────────────────────────────────────── */
[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-aos="fade-up"] {
    transform: translateY(20px);
}

[data-aos="fade-in"] {
    transform: none;
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
}

[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ─── Empty State (used across listing pages) ────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #9ca3af;
}

.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: .5;
}

.empty-state .empty-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: .5rem;
}

.empty-state .empty-text {
    font-size: .9rem;
    max-width: 400px;
    margin: 0 auto;
}

/* ─── Loading Skeleton ───────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: .25rem;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

/* ─── Tag/Chip Styling ───────────────────────────────────────────────── */
.tag-chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .6rem;
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 500;
    background: rgba(var(--bs-primary-rgb, 21, 101, 192), .08);
    color: var(--primary-color, #1565C0);
    text-decoration: none;
    transition: all .2s;
}

.tag-chip:hover {
    background: rgba(var(--bs-primary-rgb, 21, 101, 192), .15);
    color: var(--primary-color, #1565C0);
}

/* ─── Divider ────────────────────────────────────────────────────────── */
.section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-gray-300, #dee2e6) 50%, transparent);
    margin: 2.5rem 0;
}

[data-bs-theme="dark"] .section-divider {
    background: linear-gradient(90deg, transparent, #374151 50%, transparent);
}

/* =============================================================================
   ABOUT PAGES — Enhanced Card Headers, Timeline, Stat Cards
   ============================================================================= */

/* ─── Styled Card Header with Left Accent ─────────────────────────── */
.about-card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.25rem;
    position: relative;
}
.about-card-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--accent-color, var(--primary-color, #0284c7));
}
.about-card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading-color, #1e293b);
    margin: 0;
}
.about-card-header h3 i {
    opacity: .8;
}
.about-card-header--primary { --accent-color: #0284c7; }
.about-card-header--success { --accent-color: #16a34a; }
.about-card-header--warning { --accent-color: #d97706; }
.about-card-header--danger  { --accent-color: #dc2626; }
.about-card-header--info    { --accent-color: #0891b2; }

/* ─── Inner Page Section Divider ──────────────────────────────────── */
.about-section-sep {
    text-align: center;
    margin: 2.5rem 0;
    position: relative;
}
.about-section-sep::before {
    content: '';
    position: absolute;
    left: 10%; right: 10%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}
.about-section-sep i {
    position: relative;
    z-index: 1;
    background: var(--bg-color, #f5f7fa);
    padding: 0 1rem;
    color: #94a3b8;
    font-size: 1.1rem;
}

/* ─── Vertical Timeline (History page) ────────────────────────────── */
.about-timeline {
    position: relative;
    padding-left: 40px;
}
.about-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--primary-color, #0284c7) 0%, #e2e8f0 100%);
    border-radius: 3px;
}
.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: all .3s ease;
}
.timeline-item:hover {
    border-color: var(--primary-color, #0284c7);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateX(4px);
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 1.5rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--primary-color, #0284c7);
    z-index: 1;
    transition: all .3s ease;
}
.timeline-item:hover::before {
    background: var(--primary-color, #0284c7);
    box-shadow: 0 0 0 4px rgba(2,132,199,.2);
}
.timeline-item::after {
    content: '';
    position: absolute;
    left: -19px;
    top: 1.75rem;
    width: 12px;
    height: 2px;
    background: #e2e8f0;
}
.timeline-item:hover::after {
    background: var(--primary-color, #0284c7);
}
.timeline-item .timeline-date {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary-color, #0284c7);
    background: rgba(2,132,199,.08);
    padding: .2rem .6rem;
    border-radius: 4px;
    margin-bottom: .5rem;
}
.timeline-item h5 {
    font-weight: 700;
    color: var(--heading-color, #1e293b);
    margin-bottom: .5rem;
    font-size: 1.05rem;
}

/* ─── About Stat Cards (enhanced for sub-pages) ──────────────────── */
.about-stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
}
.about-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--stat-color, var(--primary-color));
    opacity: .6;
    transition: opacity .3s ease;
}
.about-stat-card:hover::before { opacity: 1; }
.about-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: transparent;
}
.about-stat-card .stat-icon-wrap {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .75rem;
    transition: transform .3s ease;
}
.about-stat-card:hover .stat-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
}
.about-stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
}
.about-stat-card .stat-text {
    font-size: .82rem;
    color: var(--muted-color, #6b7280);
    margin-top: .25rem;
}

/* ─── Culture / Feature Grid Cards ───────────────────────────────── */
.feature-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    overflow: hidden;
    height: 100%;
}
.feature-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: none;
    pointer-events: none;
}
.feature-card:hover::after {
    transform: translateX(100%);
    transition: transform .6s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: transparent;
}
.feature-card .feature-icon {
    width: 64px; height: 64px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: transform .3s ease;
}
.feature-card:hover .feature-icon {
    transform: scale(1.12) rotate(-5deg);
}
.feature-card h5 {
    font-weight: 700;
    font-size: 1rem;
    color: var(--heading-color, #1e293b);
    margin-bottom: .5rem;
}
.feature-card p {
    font-size: .88rem;
    color: var(--muted-color, #6b7280);
    line-height: 1.6;
    margin-bottom: 0;
}

/* ─── Enhanced Progress Bars ─────────────────────────────────────── */
.about-progress {
    height: 28px;
    border-radius: 14px;
    background: #f1f5f9;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.about-progress .progress-bar {
    border-radius: 14px;
    font-size: .78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    position: relative;
    overflow: hidden;
}
.about-progress .progress-bar::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    animation: progress-shimmer 2s ease-in-out infinite;
}
@keyframes progress-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ─── Award Timeline Cards ───────────────────────────────────────── */
.award-timeline-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid #f1f5f9;
    transition: all .3s ease;
}
.award-timeline-item:last-child { border-bottom: none; }
.award-timeline-item:hover {
    background: rgba(var(--bs-primary-rgb),.02);
    padding-left: .5rem;
    border-radius: 8px;
}
.award-year-badge {
    font-size: .85rem;
    font-weight: 700;
    padding: .35rem .75rem;
    border-radius: 8px;
    display: inline-block;
}
.award-category-tag {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .6rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
}

/* ─── Info Highlight Box ─────────────────────────────────────────── */
.info-highlight {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid rgba(2,132,199,.15);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.info-highlight--success {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border-color: rgba(22,163,74,.15);
}
.info-highlight--warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: rgba(217,119,6,.15);
}

/* ─── Pillar Card for Vision/Mission page ────────────────────────── */
.pillar-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: all .35s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    overflow: hidden;
}
.pillar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--pillar-color, var(--primary-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}
.pillar-card:hover::before { transform: scaleX(1); }
.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    border-color: transparent;
}
.pillar-card .pillar-icon {
    width: 64px; height: 64px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: transform .3s ease;
}
.pillar-card:hover .pillar-icon {
    transform: scale(1.12) rotate(-5deg);
}

/* ─── Core Values Grid ───────────────────────────────────────────── */
.core-value-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all .3s ease;
    height: 100%;
}
.core-value-item:hover {
    border-color: var(--value-color, var(--primary-color));
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateY(-3px);
}
.core-value-item .value-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: .75rem;
    transition: transform .3s ease;
}
.core-value-item:hover .value-icon {
    transform: scale(1.1) rotate(-5deg);
}
.core-value-item h6 {
    font-weight: 700;
    font-size: .9rem;
    color: var(--heading-color, #1e293b);
    margin-bottom: .25rem;
}
.core-value-item p {
    font-size: .8rem;
    color: var(--muted-color, #6b7280);
    margin-bottom: 0;
    line-height: 1.5;
}

/* ─── Strategic Goal Row ─────────────────────────────────────────── */
.strategic-goal {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: .75rem;
    transition: all .3s ease;
}
.strategic-goal:hover {
    border-color: var(--goal-color, var(--primary-color));
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    transform: translateX(4px);
}
.strategic-goal .goal-num {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .9rem;
    flex-shrink: 0;
}
.strategic-goal .goal-icon {
    font-size: 1.1rem;
    opacity: .7;
    flex-shrink: 0;
    margin-top: .2rem;
}

/* ─── CTA Card (About pages) ────────────────────────────────────── */
.about-cta {
    background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 50%, #0369a1 100%);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.about-cta::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.about-cta h4 {
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.about-cta p {
    opacity: .85;
    max-width: 500px;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
}
.about-cta .btn {
    position: relative;
    z-index: 1;
}

/* ─── Page Navigation (prev/next) ────────────────────────────────── */
.about-page-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}
.about-page-nav a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--heading-color, #1e293b);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    transition: all .3s ease;
}
.about-page-nav a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(2,132,199,.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.about-page-nav .nav-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-color, #6b7280);
    font-weight: 600;
}

/* ─── Responsive adjustments for About pages ─────────────────────── */
@media (max-width: 767.98px) {
    .about-timeline { padding-left: 30px; }
    .about-timeline::before { left: 10px; }
    .timeline-item::before { left: -28px; width: 12px; height: 12px; }
    .timeline-item::after { left: -16px; width: 8px; }
    .about-page-nav { flex-direction: column; }
    .about-page-nav a { justify-content: center; }
    .feature-card { padding: 1.25rem 1rem; }
    .pillar-card { padding: 1.25rem 1rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   GOVERNMENT PAGES ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Government Section Header ──────────────────────────────────── */
.gov-section-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
    position: relative;
}
.gov-section-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--accent-color, #0284c7);
    border-radius: 2px;
}
.gov-section-header h2,
.gov-section-header h3 {
    margin: 0;
    font-weight: 700;
    font-size: 1.35rem;
}
.gov-section-header .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ─── Official Profile Card ──────────────────────────────────────── */
.gov-official-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
}
.gov-official-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
}
.gov-official-card .official-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    margin-bottom: 1rem;
}
.gov-official-card .official-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.gov-official-card .official-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
.gov-official-card .official-position {
    display: inline-block;
    padding: .35rem .9rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .75rem;
}

/* ─── Government Feature Card (for programs, functions, etc.) ───── */
.gov-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}
.gov-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
}
.gov-feature .feature-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.gov-feature h5, .gov-feature h6 {
    font-weight: 700;
    margin-bottom: .25rem;
}
.gov-feature p {
    margin: 0;
    color: #6b7280;
    font-size: .875rem;
    line-height: 1.5;
}

/* ─── Government Info Panel ──────────────────────────────────────── */
.gov-info-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    overflow: hidden;
    height: 100%;
}
.gov-info-panel .panel-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.gov-info-panel .panel-header .panel-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}
.gov-info-panel .panel-header h4,
.gov-info-panel .panel-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
}
.gov-info-panel .panel-body {
    padding: 1.5rem;
}

/* ─── Government Department Card ─────────────────────────────────── */
.gov-dept-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}
.gov-dept-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: rgba(2,132,199,.2);
}
.gov-dept-card .dept-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}
.gov-dept-card .dept-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
}
.gov-dept-card .dept-desc {
    color: #6b7280;
    font-size: .85rem;
    line-height: 1.5;
    margin: 0;
}

/* ─── Government Committee Badge ─────────────────────────────────── */
.gov-committee {
    padding: .75rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid rgba(0,0,0,.05);
    transition: background .2s ease, border-color .2s ease;
}
.gov-committee:hover {
    background: #f1f5f9;
    border-color: rgba(0,0,0,.1);
}
.gov-committee h6 {
    margin: 0 0 .15rem;
    font-weight: 700;
    font-size: .875rem;
}
.gov-committee small {
    color: #6b7280;
    font-size: .78rem;
}

/* ─── Org Chart Enhanced ─────────────────────────────────────────── */
.org-chart-enhanced .org-card {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    padding: 1.25rem 1.5rem;
    min-width: 200px;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.org-chart-enhanced .org-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.org-chart-enhanced .org-card.executive {
    border-color: transparent;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    box-shadow: 0 4px 16px rgba(30,64,175,.3);
}
.org-chart-enhanced .org-card.legislative {
    border-color: transparent;
    background: linear-gradient(135deg, #15803d, #22c55e);
    box-shadow: 0 4px 16px rgba(21,128,61,.3);
}
.org-chart-enhanced .org-card.department {
    border-left: 4px solid var(--dept-color, #6b7280);
}
.org-chart-enhanced .org-connector::before {
    background: linear-gradient(to bottom, #3b82f6, #e5e7eb);
    width: 3px;
    border-radius: 2px;
}

/* ─── Government Page Navigation ─────────────────────────────────── */
.gov-page-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.gov-page-nav a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.08);
    text-decoration: none !important;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
    flex: 1;
    max-width: 48%;
}
.gov-page-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.gov-page-nav a:last-child {
    justify-content: flex-end;
    text-align: right;
}
.gov-page-nav .nav-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    font-weight: 600;
}

/* ─── Government Responsibility Item ─────────────────────────────── */
.gov-responsibility {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    margin-bottom: .5rem;
    background: rgba(22,163,74,.04);
    border: 1px solid rgba(22,163,74,.08);
    transition: background .2s ease;
}
.gov-responsibility:hover {
    background: rgba(22,163,74,.08);
}
.gov-responsibility .check-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: rgba(22,163,74,.1);
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    transition: transform .2s ease;
}
.gov-responsibility:hover .check-icon {
    transform: scale(1.15);
}

/* ─── Government CTA Section ─────────────────────────────────────── */
.gov-cta {
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    color: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.gov-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}
.gov-cta > * { position: relative; z-index: 1; }
.gov-cta h4 { font-weight: 700; }
.gov-cta p { opacity: .85; }
.gov-cta .btn-light { font-weight: 600; }
.gov-cta .btn-outline-light { border-color: rgba(255,255,255,.4); }
.gov-cta .btn-outline-light:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* ─── Government Contact Card Row ────────────────────────────────── */
.gov-contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    margin-bottom: .5rem;
    background: #f8fafc;
    transition: background .2s ease;
}
.gov-contact-item:hover { background: #f1f5f9; }
.gov-contact-item .contact-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}
.gov-contact-item .contact-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #9ca3af;
    font-weight: 600;
}

/* ─── Org Chart Base Layout ───────────────────────────────────────── */
.org-chart {
    overflow-x: auto;
    padding: 20px 0;
}
.org-node {
    display: inline-block;
    text-align: center;
    vertical-align: top;
}
.org-card {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    min-width: 200px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.org-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.org-card.executive {
    border-color: transparent;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    box-shadow: 0 4px 16px rgba(30,64,175,.3);
}
.org-card.legislative {
    border-color: transparent;
    background: linear-gradient(135deg, #15803d, #22c55e);
    box-shadow: 0 4px 16px rgba(21,128,61,.3);
}
.org-card.department {
    border-left: 4px solid var(--dept-color, #6b7280);
}
.org-connector {
    position: relative;
    height: 40px;
}
.org-connector::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #3b82f6, #e5e7eb);
    border-radius: 2px;
}
.org-level {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.org-branch {
    position: relative;
}
.org-branch::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    width: 3px;
    height: 20px;
    background: #e5e7eb;
    border-radius: 2px;
}

/* ─── Responsive adjustments for Government pages ────────────────── */
@media (max-width: 767.98px) {
    .gov-page-nav { flex-direction: column; }
    .gov-page-nav a { max-width: 100%; justify-content: center; }
    .gov-official-card { padding: 1.5rem 1rem; }
    .gov-official-card .official-photo,
    .gov-official-card .official-avatar { width: 100px; height: 100px; font-size: 2.5rem; }
    .gov-feature { padding: 1rem; }
    .gov-cta { padding: 1.5rem; }
    .org-chart-enhanced .org-card { min-width: 160px; padding: 1rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   SERVICES SECTION — Polished UI Components
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Services Page Navigation (inter-page nav) ──────────────────── */
.svc-page-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}
.svc-page-nav a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    background: #fff;
    border-radius: 50px;
    border: 1px solid rgba(0,0,0,.08);
    text-decoration: none !important;
    color: #374151;
    font-size: .875rem;
    font-weight: 600;
    transition: all .25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.svc-page-nav a:hover,
.svc-page-nav a.active {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5,150,105,.25);
    border-color: transparent;
}
.svc-page-nav a.active {
    pointer-events: none;
}
.svc-page-nav a i {
    font-size: .85rem;
    opacity: .8;
}
.svc-page-nav a:hover i,
.svc-page-nav a.active i {
    opacity: 1;
}

/* ─── Services Stat Cards ────────────────────────────────────────── */
.svc-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 15px rgba(0,0,0,.04);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
.svc-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
}
.svc-stat-card.stat-green::before  { background: linear-gradient(90deg, #059669, #10b981); }
.svc-stat-card.stat-blue::before   { background: linear-gradient(90deg, #2563eb, #3b82f6); }
.svc-stat-card.stat-amber::before  { background: linear-gradient(90deg, #d97706, #f59e0b); }
.svc-stat-card.stat-purple::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.svc-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.svc-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    font-size: 1.25rem;
}
.svc-stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: .25rem;
}
.svc-stat-card .stat-label {
    font-size: .8rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ─── Services Category Header ───────────────────────────────────── */
.svc-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #f3f4f6;
}
.svc-category-header .cat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.svc-category-header h4 {
    font-weight: 700;
    margin-bottom: 0;
}
.svc-category-header .badge {
    font-size: .75rem;
    font-weight: 600;
}

/* ─── Service Card ───────────────────────────────────────────────── */
.svc-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
    transition: all .25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
}
.svc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border-color: rgba(5,150,105,.2);
}
.svc-card h5 {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: .5rem;
    transition: color .2s ease;
}
.svc-card:hover h5 {
    color: #059669;
}
.svc-card .svc-meta {
    margin-top: auto;
    padding-top: .75rem;
}

/* ─── Quick Service Cards (compact icons with labels) ────────────── */
.svc-quick-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem 1rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
    text-align: center;
    transition: all .25s ease;
    height: 100%;
}
.svc-quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}
.svc-quick-card .qc-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: .75rem;
}
.svc-quick-card h6 {
    font-weight: 700;
    margin-bottom: .25rem;
    color: #1f2937;
}
.svc-quick-card .qc-sub {
    font-size: .8rem;
    color: #6b7280;
}

/* ─── Process Steps (numbered timeline) ──────────────────────────── */
.svc-process-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.5rem 0;
    position: relative;
}
.svc-step {
    text-align: center;
    flex: 1;
    min-width: 140px;
    max-width: 220px;
    position: relative;
}
.svc-step .step-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: .75rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 15px rgba(0,0,0,.1);
}
.svc-step .step-circle.step-final {
    font-size: 1.3rem;
    font-weight: 400;
}
.svc-step h6 {
    font-weight: 700;
    margin-bottom: .35rem;
    font-size: .9rem;
}
.svc-step p {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 0;
    line-height: 1.4;
}
/* Connector line between steps */
.svc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 32px;
    left: calc(50% + 40px);
    width: calc(100% - 48px);
    height: 3px;
    background: linear-gradient(90deg, #d1d5db, #e5e7eb);
    z-index: 1;
}

/* ─── Info Panel (replaces old block block-rounded for content sections) ── */
.svc-info-panel {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.03);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.svc-info-panel .panel-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #f3f4f6;
    background: #fafbfc;
}
.svc-info-panel .panel-header h5,
.svc-info-panel .panel-header h3 {
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1rem;
}
.svc-info-panel .panel-header .header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}
.svc-info-panel .panel-header .badge {
    margin-left: auto;
}
.svc-info-panel .panel-body {
    padding: 1.5rem;
}

/* ─── Sidebar Info Box ───────────────────────────────────────────── */
.svc-sidebar-box {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.03);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.svc-sidebar-box .sidebar-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.svc-sidebar-box .sidebar-header h6 {
    font-weight: 700;
    margin-bottom: 0;
    font-size: .9rem;
}
.svc-sidebar-box .sidebar-body {
    padding: 1.25rem;
}

/* ─── Contact Info Row ───────────────────────────────────────────── */
.svc-contact-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
}
.svc-contact-item:not(:last-child) {
    border-bottom: 1px solid #f3f4f6;
}
.svc-contact-item .ci-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}
.svc-contact-item .ci-label {
    font-size: .75rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.svc-contact-item .ci-value {
    font-weight: 600;
    color: #1f2937;
}
.svc-contact-item .ci-value a {
    color: #059669;
    text-decoration: none;
}
.svc-contact-item .ci-value a:hover {
    text-decoration: underline;
}

/* ─── Services CTA Banner ────────────────────────────────────────── */
.svc-cta {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    border-radius: 18px;
    padding: 2.5rem;
    text-align: center;
    color: #fff;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}
.svc-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}
.svc-cta::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,.05);
    border-radius: 50%;
}
.svc-cta h4 {
    font-weight: 700;
    margin-bottom: .5rem;
    position: relative;
    z-index: 2;
}
.svc-cta p {
    opacity: .9;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 2;
}
.svc-cta .btn {
    position: relative;
    z-index: 2;
}

.svc-cta.cta-primary {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
}
.svc-cta.cta-info {
    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 50%, #22d3ee 100%);
}
.svc-cta.cta-warning {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #fbbf24 100%);
}

/* ─── Requirement List ───────────────────────────────────────────── */
.svc-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.svc-req-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    font-size: .9rem;
    color: #374151;
}
.svc-req-list li:not(:last-child) {
    border-bottom: 1px solid #f9fafb;
}
.svc-req-list li i {
    margin-top: .15rem;
    flex-shrink: 0;
}

/* ─── Portal Link Cards (external government sites) ──────────────── */
.svc-portal-card {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
    text-align: center;
    transition: all .25s ease;
    height: 100%;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.svc-portal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.12);
}
.svc-portal-card .portal-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: .75rem;
}
.svc-portal-card h6 {
    font-weight: 700;
    margin-bottom: .25rem;
    color: #1f2937;
}
.svc-portal-card p {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 0;
}

/* ─── Benefit Cards ──────────────────────────────────────────────── */
.svc-benefit-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.03);
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.svc-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
}
.svc-benefit-card .benefit-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
.svc-benefit-card h5 {
    font-weight: 700;
    margin-bottom: .5rem;
}
.svc-benefit-card p {
    color: #6b7280;
    font-size: .9rem;
    margin-bottom: 0;
}

/* ─── Success Checkmark Animation ────────────────────────────────── */
.svc-success-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: svcPulse 2s ease-in-out infinite;
}
@keyframes svcPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(5,150,105,.2); }
    50%      { box-shadow: 0 0 0 15px rgba(5,150,105,0); }
}

/* ─── Request Status Progress Bar (polished) ─────────────────────── */
.svc-progress-tracker {
    padding: 1rem 0;
}
.svc-progress-tracker .progress {
    height: 10px;
    border-radius: 99px;
    background: #f3f4f6;
    overflow: hidden;
}
.svc-progress-tracker .progress-bar {
    border-radius: 99px;
    transition: width .6s ease;
}
.svc-progress-tracker .progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: .5rem;
}
.svc-progress-tracker .progress-labels span {
    font-size: .75rem;
    color: #9ca3af;
    font-weight: 500;
}

/* ─── Form Section Panels ────────────────────────────────────────── */
.svc-form-section {
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.svc-form-section h6 {
    font-weight: 700;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ─── Filter Bar ─────────────────────────────────────────────────── */
.svc-filter-bar {
    background: #fff;
    border-radius: 14px;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
    margin-bottom: 1.5rem;
}

/* ─── Responsive adjustments for Services pages ──────────────────── */
@media (max-width: 991.98px) {
    .svc-step:not(:last-child)::after { display: none; }
    .svc-process-steps { gap: 1rem; }
}
@media (max-width: 767.98px) {
    .svc-page-nav { gap: .5rem; }
    .svc-page-nav a { padding: .5rem .85rem; font-size: .8rem; }
    .svc-stat-card { padding: 1rem .75rem; }
    .svc-stat-card .stat-value { font-size: 1.35rem; }
    .svc-cta { padding: 1.5rem; }
    .svc-info-panel .panel-body { padding: 1rem; }
    .svc-process-steps { flex-direction: column; align-items: center; }
    .svc-step { max-width: 280px; }
}