/* Root design tokens: colors, font sizes, font families */
:root {
    /* ===== Primary Colors ===== */
    --primary-color: #0B3C5D;
    --primary-dark: #072C44;
    --primary-light: #145A86;
    /* RGB helper vars (used for rgba()) */
    --primary-rgb: 11, 60, 93;
    --primary-dark-rgb: 7, 44, 68;
    /* ===== Accent Colors ===== */
    --accent-color: #C9A227;
    --accent-dark: #A8841F;
    --accent-light: #E0C15A;
    /* ===== Background Colors ===== */
    --bg-main: #F8F9FA;
    --bg-white: #FFFFFF;
    --bg-light: #EEF1F4;
    /* ===== Text Colors ===== */
    --text-primary: #1C1C1C;
    --text-secondary: #555555;
    --text-light: #FFFFFF;
    /* ===== Border & Shadow ===== */
    --border-color: #DADADA;
    --border-golden: #C9A227;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.12);
    /* ===== Status Colors ===== */
    --success-color: #198754;
    --warning-color: #FFC107;
    --danger-color: #DC3545;
    --info-color: #0D6EFD;
    /* ===== Button Colors ===== */
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: #FFFFFF;
    --btn-accent-bg: var(--accent-color);
    --btn-accent-text: #FFFFFF;
    /* ===== Sidebar ===== */
    --sidebar-bg: var(--primary-dark);
    --sidebar-text: #FFFFFF;
    --sidebar-hover: var(--primary-light);
    /* ===== Header ===== */
    --header-bg: var(--primary-color);
    --header-text: #FFFFFF;
    /* Font families */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

/* Base element styles that use the design tokens */
html {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    color: var(--text-default);
    background-color: var(--bg-default);
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-main);
}

ul,
li {
    list-style: none;
}

p {
    margin: 0;
    padding: 0;
}

/* Accessibility helpers */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

/* End of root tokens file */
/* ======================== Start Top Navigation Styles ======================== */
.navbar-brand {}

.navbar-brand img {
    height: 70px;
    width: 100%;
}

.top-nav-item {
    list-style: none;
}

.top-nav-link {
    text-decoration: none;
    color: var(--primary-color);
    font-size: 22px;
}

.top-nav-link:hover {
    color: var(--primary-light);
}
@media all and (max-width:991px) {
    .logo-center {
	display: flex;
	justify-content: center !important;
	padding: 10px 25px 0px 25px;
}
}
/* ======================== End Top Navigation Styles ======================== */
/* ======================== Start Navigation Styles ======================== */
.nav-area {
    background-color: var(--primary-color);
    width: 100%;
}

.nav-area.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

/* Hide the topbar when nav is sticky */
header.top-hidden .topbar {
    display: none !important;
}

.navbar-area {}

.navbar-area .navbar-nav {}

.navbar-area .navbar-nav .nav-item {}

.navbar-area .navbar-nav .nav-item .nav-link {
    color: var(--text-light);
    font-size: 18px;
    font-weight: 500;
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
}

.navbar-area .navbar-nav .nav-item .nav-link:hover {
    color: var(--accent-color);
    background-color: transparent;
    border-bottom: 2px solid var(--accent-color);
    transition: all 0.3s ease;
}

.navbar-area .navbar-nav .nav-item .dropdown-menu {}

.navbar-area .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    background-color: var(--primary-color);
    color: var(--text-light);
    font-size: 18px;
    font-weight: 500;
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
}

.navbar-area .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    transition: all 0.3s ease;
}

.dropdown-menu {
    margin: 0;
    padding: 0;
}

.navbar-toggler {
    color: var(--text-light) !important;
    background-color: transparent;
    border: var(--bs-border-width) solid var(--text-light);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* ======================== End Navigation Styles ======================== */
/* ======================== Start Hero Section Styles ======================== */
.main-hero-section .row {
    --bs-gutter-x: 1rem;
    /* horizontal gutter */
    --bs-gutter-y: 1rem;
    /* vertical gutter */
}

.main-hero-section .hero-box {
    width: 100%;
    height: 320px;
    display: block;
    box-sizing: border-box;
}

/* Ensure right-side swiper shows exactly one slide per view */
.hero-right-slider .swiper-slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Smooth transition easing for all Swiper instances */
.swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.slider-image-item {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.notice-area .notice-item-area {
    position: relative;
    width: 100%;
    background-color: var(--accent-light);
    padding: 7px 0px;
}

.note-text {
    position: absolute;
    font-size: 25px;
    color: var(--text-light);
    margin-bottom: 10px;
    background-color: var(--primary-color);
    z-index: 999;
    height: 100%;
    top: 0;
    left: 0;
    padding: 5px 10px;
}

.notice-item-area .marquee-text .notice-item {
    display: inline-block;
    padding: 0 10px;
    font-size: 18px;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Modern marquee replacement: pauses exactly where hovered */
.marquee-text.marquee-wrapper {
    overflow: hidden;
    position: relative;
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee linear infinite;
    animation-duration: var(--marquee-duration, 20s);
    will-change: transform;
}

.marquee-content {
    display: inline-flex;
    white-space: nowrap;
    gap: 0.5rem;
    align-items: center;
}

/* Pause on hover (and when the .pause class is added) */
.marquee-text.marquee-wrapper:hover .marquee-track,
.marquee-text.marquee-wrapper.pause .marquee-track {
    animation-play-state: paused;
    cursor: default;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ======================== End Hero Section Styles ======================== */
/* Breadcrumbs section */
.breadcrumbs-section {
    padding: 70px 0;
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.04), rgba(var(--primary-dark-rgb), 0.02));
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.page-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-color);
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.breadcrumb-nav .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    /* single angle quote › */
    color: var(--text-secondary);
    padding: 0 8px;
}

.breadcrumb .breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
}

.breadcrumb .breadcrumb-item.active {
    color: var(--primary-color);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .breadcrumbs-section {
        text-align: center;
        padding: 18px 0;
    }

    .breadcrumb-nav {
        justify-content: center;
    }

    .page-title {
        font-size: 22px;
    }
}

/* Global gutter helper: ensure Bootstrap `.g-3` sets gutter variables
   and provide a fallback implementation that mirrors Bootstrap gutters
   (negative row margin + column padding) rather than using `gap`, so
   nested grids inside padded cards don't unexpectedly overflow/wrap. */
.row.g-3,
.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

/* Apply half-gutter padding to direct column children so widths remain
   consistent with Bootstrap's grid calculations. Also clip column
   backgrounds to the content box so visual card backgrounds don't paint
   into the gutters. */
.row.g-3 > [class*="col-"],
.g-3 > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-top: calc(var(--bs-gutter-y) * 0.5);
    padding-bottom: calc(var(--bs-gutter-y) * 0.5);
    -webkit-background-clip: content-box;
    background-clip: content-box;
}

/* ======================== Card Item Styles ======================== */
.main-card-section {
    padding: 40px 0;
}

.card-item {
    background: var(--bg-white);
    border-radius: 8px;
    padding: 18px 14px;
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.card-item:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

.card-item .card-icon {
    font-size: 34px;
    color: var(--info-color);
    display: block;
    margin-bottom: 8px;
}

.card-item .card-number {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

/* Office staff now shares executive committee styles; separate block removed. */
.card-item .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

/* ======================== End Card Item Styles ======================== */
/* ======================== Start Main Contain Area Styles ======================== */
.main-contain-area .row {
    --bs-gutter-x: 1rem;
    /* horizontal gutter */
    --bs-gutter-y: 1rem;
    /* vertical gutter */
}

/* ======================== End Main Contain Area Styles ======================== */
/* Small helper boxes inside columns so gutters are visible */
.main-contain-area .contain-box {
    border-radius: 6px;
    /* overflow: hidden; */
}

/* .main-contain-area .contain-box--red{ background-color: red; } */
.main-contain-area .contain-box--dark {
    background-color: #000;
}

.member-search-item-card {
    background-color: var(--bg-main);
    box-shadow: var(--shadow-medium);
}

.card-header-area {
    /* default: primary color at 50% opacity */
    background-color: rgba(var(--primary-rgb), 0.5);
    padding: 7px 14px;
    position: relative;
    overflow: hidden;
}

.card-header-area::before {
    content: "";
    position: absolute;
    inset: 0;
    /* overlay uses full opacity primary color */
    background-color: rgba(var(--primary-rgb), 1);
    transform: translateX(-50%);
    transition: transform 3s cubic-bezier(.2, .8, .2, 1);
    z-index: 1;
    pointer-events: none;
}

/* when the parent card is hovered/focused, slide the overlay left->right */
.hover-effect-header:hover .card-header-area::before,
.hover-effect-header:focus-within .card-header-area::before {
    transform: translateX(0);
}

.card-header-area .card-header-text {
    position: relative;
    z-index: 2;
    /* keep text above the sliding overlay */
    font-size: 22px;
    font-weight: 700;
    color: var(--text-light);
}

/* Respect users' reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .card-header-area::before {
        transition: none;
        transform: translateX(0);
    }
}

.search-item-area {
    padding: 10px 25px 25px 10px;
    border-radius: 10px;
}

.search-group {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    margin: 7px;
    ;
}

.search-group .search-label {
    border-radius: 4px;
    width: 140px;
}

.search-group .search-input {
    padding: 8px 12px;
    border: var(--bs-border-width) solid var(--border-color);
    border-radius: 4px;
    width: 100%;
}

.center-text-align {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-btn {
    position: relative;
    overflow: hidden;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    width: 120px;
    /* fallback color (for very old browsers) */
    background-color: var(--primary-color);
    color: var(--text-light);
    cursor: pointer;
    border: 1px solid transparent;
    /* two-color gradient: left half = hover color, right half = base color
       we shift the gradient with background-position to create a left->right sweep */
    background-image: linear-gradient(90deg, var(--bg-main) 0 50%, var(--primary-color) 50% 100%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    /* start showing the right side (base color) */
    background-position: 100% 50%;
    transition: background-position 0.45s cubic-bezier(.2, .8, .2, 1), border-color 0.25s ease, color 0.25s ease;
}

.search-btn:hover,
.search-btn:focus {
    /* shift gradient so the left (hover) color fills from left to right */
    background-position: 0% 50%;
    border: 1px solid var(--bg-main);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.notice-area {
    background-color: var(--bg-main);
    box-shadow: var(--shadow-medium);
}

.left-notice-item-area {
    height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 20px;
}

/* Custom vertical scrollbar for .left-notice-item-area (Firefox + WebKit) */
.left-notice-item-area {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--primary-rgb), 0.9) rgba(var(--primary-rgb), 0.06);
}

/* WebKit browsers (Chrome, Edge, Safari) */
.left-notice-item-area::-webkit-scrollbar {
    width: 10px;
}

.left-notice-item-area::-webkit-scrollbar-track {
    background: rgba(var(--primary-rgb), 0.06);
    border-radius: 8px;
}

.left-notice-item-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.95), rgba(var(--primary-dark-rgb), 0.95));
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.06);
}

.left-notice-item-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--primary-rgb), 1), rgba(var(--primary-dark-rgb), 1));
}

.left-notice-item-area::-webkit-scrollbar-corner {
    background: transparent
}

.notice-item-list {}

.notice-image-area {
    border: 1px solid var(--border-color);
    height: 100px;
    margin-right: 7px;
    border-radius: 7px;
    box-shadow: rgba(var(--primary-rgb), 0.5);
}

.notice-image-area .notice-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.left-notice-details-area {
    margin-bottom: 25px;
    padding: 10px 0px;
}

.left-notice-details-area .notice-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}

.left-notice-details-area .notice-date {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ============================== Main Contain Box Area ========================= */
.executive-committee-area {}

.office-staff-area {
    background-color: var(--bg-main);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
}

.executive-committee-card-item,
.office-staff-card-item {
    background-color: var(--bg-white);
    border-radius: 8px;
    padding: 20px 14px;
    text-align: center;
}

.member-image-area {
    /* enforce a fixed circular container so the image can zoom inside */
    width: 180px;
    height: 180px;
    margin: 0 auto 12px;
    overflow: hidden;
    border-radius: 50%;
    display: block;
}

.member-image-area .member-image {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.28s ease, filter 0.25s ease;
    transform-origin: center center;
    will-change: transform, filter;
}

/* Hover state: add shadow and slight lift when the executive card is hovered */
.executive-committee-card-item:hover .member-image-area .member-image,
.executive-committee-card-item:focus-within .member-image-area .member-image,
.office-staff-card-item:hover .member-image-area .member-image,
.office-staff-card-item:focus-within .member-image-area .member-image {
    box-shadow: var(--shadow-medium);
    transform: translateY(-6px) scale(1.12);
    filter: brightness(1.06) saturate(1.05);
}

/* direct image hover/focus as a fallback so hovering the img itself works */
.member-image-area:hover .member-image,
.member-image:hover,
.member-image:focus {
    transform: scale(1.12);
    filter: brightness(1.06) saturate(1.05);
}

.member-details {
    margin-top: 10px;
    margin-bottom: 20px;
}

.member-details .member-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
}

.member-details .member-position {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Executive list footer/count */
.exec-count {
    font-size: 16px;
    color: var(--text-primary);
}

/* ============================== Right Contain Box Area ========================= */
.right-contain-box-item {
    padding: 0px 0px 25px 0px;
    border-radius: 10px;
    background-color: var(--bg-main);
    box-shadow: var(--shadow-medium);
    margin-bottom: 50px;
}

.right-contain-details {
    padding: 0px 25px;
}

.forms-download-ul {
    padding: 0;
    margin: 0;
}

.forms-download-ul li {
    margin: 15px 0;
    border-radius: 7px;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--bg-white), var(--bg-white)), linear-gradient(90deg, var(--accent-light), var(--primary-light));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, -100% 0;
    transition: background-position 0.6s cubic-bezier(.2, .8, .2, 1), transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    position: relative;
}

.forms-download-ul li:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    background-position: 0 0, 0 0;
}

.forms-download-ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    border-radius: 5px;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    border: 0;
    transition: color 0.3s ease, transform 0.25s ease;
    position: relative;
    z-index: 2;
    width: 100%;
}

.forms-download-ul li:hover a {
    color: var(--text-default);
    transform: translateX(6px);
}

.forms-download-ul li a i {
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(var(--primary-dark-rgb), 0.06);
    transition: background 0.3s ease, transform 0.25s ease, color 0.3s ease;
}

.forms-download-ul li:hover a i {
    background: rgba(var(--primary-dark-rgb), 0.18);
    color: var(--text-light);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
    .forms-download-ul li:hover {
        animation: border-sweep 1s forwards;
    }

    @keyframes border-sweep {
        from {
            background-position: 0 0, -100% 0;
        }

        to {
            background-position: 0 0, 0 0;
        }
    }
}

.important-links-ul {
    padding: 0;
    margin: 0;
}

.important-links-ul li {
    margin: 15px 0;
    border-radius: 7px;
    border: 2px solid var(--border-golden);
    background-image: linear-gradient(var(--bg-white), var(--bg-white)), linear-gradient(90deg, var(--accent-light), var(--primary-light));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, -100% 0;
    transition: background-position 0.6s cubic-bezier(.2, .8, .2, 1), transform 0.25s ease, box-shadow 0.25s ease, border-color 0.45s cubic-bezier(.2, .8, .2, 1);
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.important-links-ul li:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    background-position: 0 0, 0 0;
    border-color: var(--primary-color);
}

.important-links-ul li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 120%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-12deg);
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
    z-index: 1;
    pointer-events: none;
}

.important-links-ul li:hover::before {
    transform: translateX(120%) skewX(-12deg);
}

.important-links-ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px;
    border-radius: 5px;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    border: 0;
    transition: color 0.3s ease, transform 0.25s ease;
    position: relative;
    z-index: 2;
    width: 100%;
}

.important-links-ul li:hover a {
    color: var(--text-default);
    transform: translateX(6px);
}

.important-links-ul li a i {
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(var(--primary-dark-rgb), 0.06);
    transition: background 0.3s ease, transform 0.25s ease, color 0.3s ease;
}

.important-links-ul li:hover a i {
    background: rgba(var(--primary-dark-rgb), 0.18);
    color: var(--text-light);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: no-preference) {
    .important-links-ul li:hover {
        animation: border-sweep 1s forwards;
    }
}

/* ================================= Start Footer CSS ==================================== */
.footer-section {
    background-color: var(--primary-color);
    padding-top: 40px;
    color: var(--text-light);
}

.footer-item-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 15px;
}

.footer-item-box .contact-info-list li {
    font-size: 16px;
    color: var(--text-light);
    padding: 5px 0px;
}

.footer-item-box .footer-social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-item-box .footer-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    font-size: 18px;
    transition: transform .18s ease, background .25s ease, box-shadow .18s ease, color .2s ease;
    text-decoration: none;
}

.footer-item-box .footer-social-links a:hover,
.footer-item-box .footer-social-links a:focus {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    outline: none;
}

/* Brand colors by platform (uses aria-label present in markup) */
.footer-item-box .footer-social-links a[aria-label="Facebook"] {
    background: #1877F2;
}

.footer-item-box .footer-social-links a[aria-label="YouTube"] {
    background: #FF0000;
}

.footer-item-box .footer-social-links a[aria-label="Instagram"] {
    background: radial-gradient(circle at 30% 30%, #feda75 0%, #fa7e1e 10%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.footer-item-box .footer-social-links a[aria-label="LinkedIn"] {
    background: #0A66C2;
}

.footer-item-box .footer-social-links a i {
    color: #fff;
    font-size: 18px;
}

.footer-item-box .footer-social-links a:focus-visible {
    box-shadow: 0 0 0 3px rgba(11, 60, 93, 0.18);
    border-radius: 50%;
}

/* Facebook widget (footer) */
.facebook-widget {
    display: inline-block;
    background: var(--primary-color);
    padding: 10px;
    border-radius: 6px;
}

.facebook-widget-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.facebook-widget-inner {
    background: var(--bg-white);
    padding: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-soft);
}

.facebook-widget .fb-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.facebook-widget .fb-meta {
    display: flex;
    flex-direction: column;
}

.facebook-widget .fb-name {
    font-weight: 800;
    color: var(--primary-color);
    font-size: 15px;
    line-height: 1;
}

.facebook-widget .fb-followers {
    font-size: 13px;
    color: var(--text-secondary);
}

.fb-follow-btn {
    display: inline-block;
    margin-top: 6px;
    background: #f2f3f5;
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.facebook-widget:hover .facebook-widget-inner {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fb-follow-btn:hover {
    background: #e9ecef;
    color: var(--primary-color);
}

/* Footer bottom (copyright area) - unique responsive design */
.footer-bottom {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.8), rgba(var(--primary-dark-rgb), 0.5));
    /* border-top: 3px solid var(--border-golden); */
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    color: var(--text-light);
}

.footer-brand .footer-logo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.footer-copy p {
    margin: 0;
    font-weight: 700;
    color: var(--text-light);
    font-size: 15px;
}

.footer-copy small {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}

.footer-credits .footer-dev-link {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
}

.footer-credits .footer-dev-link:hover,
.footer-credits .footer-dev-link:focus {
    color: var(--primary-light);
    text-decoration: underline;
}

.footer-mini-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    text-decoration: none;
}

.footer-mini-social a:hover,
.footer-mini-social a:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Brand colors for mini social buttons */
.footer-mini-social a[aria-label="Facebook"] {
    background: #1877F2;
}

.footer-mini-social a[aria-label="YouTube"] {
    background: #FF0000;
}

.footer-mini-social a[aria-label="Instagram"] {
    background: radial-gradient(circle at 30% 30%, #feda75 0%, #fa7e1e 10%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.footer-mini-social a[aria-label="LinkedIn"] {
    background: #0A66C2;
}

.footer-mini-social a:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
    outline: none;
    border-radius: 50%;
}

@media (max-width: 767.98px) {
    .footer-bottom {
        padding: 14px 10px;
        text-align: center;
    }

    .footer-bottom .footer-brand {
        justify-content: center;
    }

    .footer-bottom .footer-credits {
        text-align: center;
        margin-top: 8px;
    }

    .footer-mini-social {
        justify-content: center;
        margin-top: 8px;
    }
}

/* -------------------- About Us Page -------------------- */
.about-us-area {
    background-color: var(--bg-main);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    margin-bottom: 40px;
}

.about-us-area .about-us-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    margin-top: 20px;
}

.about-us-text {
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.6;
    text-align: justify;
}

.social-media {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    align-items: center;
}

.social-media a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.06);
    font-size: 18px;
    transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
    text-decoration: none;
}

.social-media a:hover,
.social-media a:focus {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
    text-decoration: none;
    outline: none;
}

/* Notice viewer modal styles */
#noticeModal .modal-body {
    padding: 0;
}

#noticeViewer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--bg-main);
}

#noticeViewerImg {
    display: none;
    max-width: 100%;
    max-height: 75vh;
    width: auto;
}

#noticeViewerPdf {
    display: none;
    width: 100%;
    height: 75vh;
    border: 0;
}

.modal .modal-footer .btn + .btn {
    margin-left: 0.5rem;
}

.social-media a i {
    font-size: 18px;
    color: #fff;
}

.social-media a[aria-label="Facebook"] {
    background: #1877F2;
}

/* ======================== Contact Form Styles (scoped) ======================== */
.contact-form- {
    position: relative;
    padding: 1.6rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(14, 165, 233, 0.02));
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.06);
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .8, .2), box-shadow .25s ease;
}

.contact-form-::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -25%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.14), rgba(14, 165, 233, 0.06) 35%, transparent 60%);
    transform: rotate(22deg);
    filter: blur(22px);
    pointer-events: none;
}

.contact-form- .form-label {
    display: block;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: .35rem;
    font-size: 14px;
}

.contact-form- .form-control {
    padding: .65rem .95rem;
    border-radius: 6px;
    border: 1px solid rgba(var(--primary-rgb), 0.06);
    background: #fff;
    transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}

.contact-form- .form-control::placeholder {
    color: #9fb0c1;
    opacity: 1;
}

.contact-form- .form-control:focus {
    border-color: rgba(99, 102, 241, 0.95);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.12);
    transform: translateY(-4px);
    outline: none;
}

.contact-form- textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.contact-form- .mb-3 {
    animation: cf-fade-up .42s ease both;
}

@keyframes cf-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-form- .btn {
    border-radius: 3px;
    padding: .6rem 1.15rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background-image: linear-gradient(90deg, #6366f1 0%, #06b6d4 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 10px 26px rgba(6, 139, 255, 0.12);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.contact-form- .btn i {
    transition: transform .18s ease;
}

.contact-form- .btn:hover,
.contact-form- .btn:focus {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(6, 139, 255, 0.14);
    filter: saturate(1.05);
}

.contact-form- .btn:hover i {
    transform: translateX(6px) rotate(-8deg);
}

.contact-form- .text-danger {
    margin-left: .2rem;
}

@media (max-width: 575.98px) {
    .contact-form- {
        padding: 1rem;
        border-radius: 10px;
    }

    .contact-form- .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .contact-form- .mb-3,
    .contact-form- .btn,
    .contact-form- .form-control {
        transition: none;
        animation: none;
    }
}

/* ====================== End Contact Form Styles ====================== */
.social-media a[aria-label="YouTube"] {
    background: #FF0000;
}

.social-media a[aria-label="Instagram"] {
    background: radial-gradient(circle at 30% 30%, #feda75 0%, #fa7e1e 10%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

.social-media a[aria-label="LinkedIn"] {
    background: #0A66C2;
}

.social-media a[aria-label="WhatsApp"] {
    background: #25D366;
}

.social-media a:focus-visible {
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.18);
    border-radius: 8px;
}

@media (max-width: 576px) {
    .social-media a {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* Constitution PDF viewer styles */
.constitution-area .pdf-wrapper {
    width: 100%;
    height: 620px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: var(--bg-white);
}

.constitution-area .pdf-object {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.constitution-area .pdf-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pdf-download-btn {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--text-light);
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
}

.pdf-download-btn:hover,
.pdf-download-btn:focus {
    background: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

@media (max-width: 767.98px) {
    .constitution-area .pdf-wrapper {
        height: 420px;
    }

    .pdf-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pdf-actions .btn {
        width: 100%;
    }
}

/* ============================= Start Executive Committee Page ===================== */
.ex-committee-list {}

.ex-committee-list {
    padding-left: 0;
}

.ex-committee-list li {}

.ex-committee-list li a {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    background-color: var(--bg-white);
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
    box-shadow: var(--shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* Animated border / hover / active for executive committee list links */
.ex-committee-list li a {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.ex-committee-list li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 120%;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-12deg);
    transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
    z-index: 0;
    pointer-events: none;
}

/* Slide the shine overlay and highlight border on hover / active / focus */
.ex-committee-list li:hover a::before,
.ex-committee-list li a:focus-visible::before,
.ex-committee-list li a.active::before {
    transform: translateX(120%) skewX(-12deg);
}

.ex-committee-list li a:hover,
.ex-committee-list li a:focus-visible,
.ex-committee-list li a.active {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-medium);
    transform: translateX(6px);
}

.ex-committee-list li a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

/* ============================= End Executive Committee Page ===================== */
/* ============================= Start Members Page ===================== */
.bar-members-area {
    background-color: var(--bg-main);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
}

.bar-member-card-item {
    background-color: var(--bg-white);
    border-radius: 8px;
    padding: 0;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bar-member-card-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

.bar-member-card-item .bar-member-image-area {
    padding-top: 50px;
}

.bar-member-card-item .bar-member-image-area .bar-member-image {
    height: 180px;
    width: 180px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
    transform-origin: center center;
}

.bar-member-card-item:hover .bar-member-image-area .bar-member-image,
.bar-member-card-item:focus-within .bar-member-image-area .bar-member-image {
    box-shadow: var(--shadow-medium);
    transform: translateY(-4px) scale(1.06);
}

.bar-member-card-item .bar-member-details {
    margin-top: 10px;
    margin-bottom: 20px;
}

.bar-member-card-item .bar-member-details .member-id {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.bar-member-card-item .bar-member-details .bar-member-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.bar-member-card-item .bar-member-details .bar-member-position {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ============================= End Members Page ===================== */
/* ============================= Members Details Page ===================== */
.member-profile-card {
    background-color: var(--bg-main);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
}

.member-profile-banner {
    height: 220px;
    background-image: url("../images/banner.jpg");
    background-position: center;
    background-size: cover;
}

.member-profile-body {
    padding: 90px 28px 28px;
    position: relative;
}

.member-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    margin: -150px auto 10px;
    border: 4px solid var(--bg-white);
    box-shadow: var(--shadow-medium);
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.member-fullname {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-color);
    margin-top: 6px;
}

.member-sub {
    color: var(--text-secondary);
    margin-bottom: 0;
}

.member-quick-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Profile badges shown under name (Member No / Member Status) */
/* .member-badges{
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:760px;
    margin:8px auto 0;
    gap:12px;
    padding:0 12px;
} */
.member-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0;
    gap: 12px;
    padding: 0 12px;
    position: absolute;
    width: 95%;
    top: -10px;
}

.profile-badge {
    position: relative;
    background: linear-gradient(180deg, var(--bg-white), #f5f7f9);
    border-radius: 8px;
    padding: 8px 14px;
    box-shadow: var(--shadow-soft);
    text-align: center;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    animation: profile-badge-appear 520ms cubic-bezier(.2, .9, .2, 1) both, profile-badge-float 6s ease-in-out 700ms infinite;
}

.profile-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-12deg);
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.profile-badge:hover,
.profile-badge:focus-within {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
}

.profile-badge:hover::before,
.profile-badge:focus-within::before {
    transform: translateX(120%) skewX(-12deg);
}

@keyframes profile-badge-float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes profile-badge-appear {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .profile-badge,
    .profile-badge::before {
        animation: none !important;
        transition: none !important;
    }

    .profile-badge {
        transform: none !important;
        box-shadow: var(--shadow-soft);
    }
}

.profile-badge .badge-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(var(--primary-rgb), 0.85);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.profile-badge .badge-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    margin-top: 6px;
}

.profile-badge--status .badge-value {
    color: var(--success-color);
}

@media (max-width: 767.98px) {
    .member-badges {
        flex-direction: column;
        gap: 10px;
    }

    .profile-badge {
        min-width: unset;
        width: 100%;
    }

    .member-badges {
        margin-top: 15px;
        position: unset;
        width: 100%;
        top: 0;
    }
}

.member-quick-info .quick-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    background: transparent;
    padding: 6px 10px;
    border-radius: 18px;
}

.section-heading {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 10px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
    color: var(--text-secondary);
}

.info-list li.address {
    border-bottom: none;
    color: var(--text-primary);
}

.info-list .label {
    font-weight: 700;
    color: var(--text-primary);
}

.info-list .value {
    color: var(--text-primary);
    font-weight: 600;
}

.social-links .btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Colorful social buttons for the member profile */
.social-links .btn.btn-facebook {
    background: #1877F2;
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(24, 119, 242, 0.12);
}

.social-links .btn.btn-twitter {
    background: #1DA1F2;
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(29, 161, 242, 0.12);
}

.social-links .btn.btn-linkedin {
    background: #0A66C2;
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(10, 102, 194, 0.12);
}

.social-links .btn.btn-print {
    background: #6c757d;
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(108, 117, 125, 0.12);
}

.social-links .btn:hover,
.social-links .btn:focus {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

.social-links .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

@media (max-width: 767.98px) {
    .member-profile-body {
        padding-top: 70px;
    }

    .member-avatar {
        width: 100px;
        height: 100px;
        margin-top: -70px;
    }

    .member-quick-info {
        gap: 12px;
    }
}

/* ============================= End Members Details Page ===================== */
/* Narrow the horizontal gutter inside the member profile card so the
   two `col-lg-6` columns sit closer together without affecting the
   site-wide grid. */
.member-profile-card .row {
    margin-left: -6px;
    margin-right: -6px;
}

.member-profile-card .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

.custiom-padding-right {
    padding-right: 3% !important;
    border-right: 2px solid var(--border-golden);
}

.custiom-padding-left {
    padding-left: 3% !important;
}

@media all and (max-width: 991px) {
    .custiom-padding-right {
        padding-right: 0 !important;
        border-right: none;
    }

    .custiom-padding-left {
        padding-left: 0 !important;
    }
}

/* =================================== Start Gallery Css ================================= */
.gallery-area {
    margin-top: 20px;
}

.gallery-item {
    margin-bottom: 12px;
}

.gallery-card {
    position: relative;
    background: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.gallery-count {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 0;
    font-size: 13px;
    z-index: 4;
}

.gallery-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    display: block;
}

.gallery-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.gallery-thumb:focus {
    outline: none;
}

.gallery-thumb:hover img,
.gallery-thumb:focus img {
    transform: scale(1.06);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28));
    color: #fff;
    opacity: 0;
    transition: opacity .22s ease;
    font-size: 28px;
    z-index: 3;
}

.gallery-thumb:hover .gallery-overlay,
.gallery-thumb:focus .gallery-overlay {
    opacity: 1;
}

.gallery-caption {
    padding: 12px;
    text-align: left;
    background: var(--primary-color);
}

.gallery-title {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    margin: 0;
    height: 25px;
}

.gallery-date {
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

.gallery-details {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 14px;
}

.gallery-modal-swiper {
    width: 100%;
    height: 70vh;
    background: #000;
}

.gallery-modal-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-modal-swiper .swiper-slide img,
.gallery-modal-swiper .swiper-slide video,
.gallery-modal-swiper .swiper-slide iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gallery-modal-details {
    background: var(--bg-white);
    border-top: 1px solid rgba(var(--primary-rgb), 0.06);
}

.gallery-modal-title {
    color: var(--primary-color);
    margin: 0;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

.swiper-pagination {
    bottom: 12px;
}

@media (max-width: 767.98px) {
    .gallery-thumb img {
        height: 160px;
    }

    .gallery-modal-swiper {
        height: 50vh;
    }

    .gallery-count {
        top: 8px;
        left: 8px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .gallery-caption {
        padding: 10px;
    }
}

/* Ensure hidden slides don't affect layout */
.gallery-slides {
    display: none !important;
}

/* Modal z-index fix: ensure modal and backdrop sit above sticky nav/other stacking contexts */
.modal {
    z-index: 20000 !important;
}

.modal-backdrop {
    z-index: 19990 !important;
}

/* ================================== Start Notice Page CSS ================================== */
/* Notice table styles (desktop + stacked mobile layout) */
.notice-table {
    width: 100%;
    padding: 8px 12px;
}

.notice-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 480px;
    /* encourages horizontal layout on wide screens */
}

.notice-table th,
.notice-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}

.notice-table thead th {
    background: rgba(var(--primary-rgb), 0.06);
    font-weight: 700;
    color: var(--primary-color);
}

.notice-table tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

.notice-table .btn {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
}

/* Stacked / accessible mobile layout: convert rows into cards and show header labels */
@media (max-width: 767.98px) {
    .notice-table {
        padding: 0;
    }

    .notice-table table,
    .notice-table thead,
    .notice-table tbody,
    .notice-table th,
    .notice-table td,
    .notice-table tr {
        display: block;
        width: 100%;
    }

    .notice-table thead {
        display: none;
    }

    .notice-table tr {
        margin-bottom: 12px;
        background: var(--bg-white);
        padding: 12px;
        border-radius: 8px;
        box-shadow: var(--shadow-soft);
        border: 1px solid rgba(var(--primary-rgb), 0.04);
    }

    .notice-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: none;
        gap: 8px;
    }

    .notice-table th::before,
    .notice-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-secondary);
        margin-right: 12px;
        width: 45%;
        flex: 0 0 45%;
    }

    .notice-table td > a,
    .notice-table td > span {
        text-align: right;
        flex: 1 1 auto;
    }
}

/* ============================== News Page CSS Start ============================= */
.news-area {
    background-color: var(--bg-main);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
}

.news-card-item {
    background-color: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.7s cubic-bezier(.2, .8, .2), box-shadow 0.7s ease;
    padding: 0;
    will-change: transform, box-shadow;
}

.news-card-item:focus-within,
.news-card-item:focus,
.news-card-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

.news-card-item .news-image-area {
    overflow: hidden;
    transition: transform 5s cubic-bezier(.2, .8, .2);
}

.news-card-item .news-image-area .news-image {
    transition: transform 5s cubic-bezier(.2, .8, .2), box-shadow 5s ease;
    transform-origin: center center;
}

.news-card-item:hover .news-image-area .news-image,
.news-card-item:focus-within .news-image-area .news-image {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {

    .news-card-item,
    .news-card-item .news-image-area .news-image {
        transition: none !important;
        transform: none !important;
        box-shadow: var(--shadow-soft) !important;
    }
}

.news-card-item .news-image-area {
    height: 220px;
    overflow: hidden;
}

.news-card-item .news-image-area .news-image {
    height: 100%;
    width: 100%;
}

.news-details {
    padding: 10px;
}

.news-details .news-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 20px;
    width: 100%;
}

.news-details .news-date {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 5px;
}

.news-details-area {
    background-color: var(--bg-main);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
}

.news-details-area .news-details-image {
    height: 440px;
    width: 100%;
}

.news-details-area .news-details-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 15px;
    margin-bottom: 10px;
}

.news-details-area .news-details-text {
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.6;
    text-align: justify;
}

/* ============================== CEC Message Page CSS Start ============================= */
.cec-image-area {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cec-image {
    position: relative;
    display: block;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
    border: 4px solid rgba(var(--primary-rgb), 0.06);
    transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 360ms ease, border-color 360ms ease;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
}

.cec-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
    transition: box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cec-image:hover,
.cec-image:focus,
.cec-image:focus-within {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(201, 162, 39, 0.12), 0 6px 20px rgba(var(--primary-rgb), 0.12);
}

.cec-image:hover::after {
    box-shadow: 0 0 0 8px rgba(201, 162, 39, 0.08);
}

@media (prefers-reduced-motion: reduce) {

    .cec-image,
    .cec-image::after {
        transition: none !important;
        transform: none !important;
        box-shadow: var(--shadow-soft) !important;
    }
}

.cec-message-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    margin: 30px 0px;
}

.ec-priod {
    font-size: 16px;
    color: var(--success-color);
    text-align: center;
    margin-bottom: 20px;
    padding: 0;
    margin: 0;
    font-weight: 600;
}

.search-voter-list-area {
    background-color: var(--bg-main);
    padding: 25px;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    margin-bottom: 40px;
}

.search-label {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 600;
    margin-bottom: 15px;
}

.search-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    box-shadow: var(--shadow-soft);
    font-size: 15px;
    transition: border-color 320ms cubic-bezier(.2, .9, .2), box-shadow 320ms cubic-bezier(.2, .9, .2), transform 320ms cubic-bezier(.2, .9, .2);
    margin-bottom: 25px;
    background-clip: padding-box;
}

.search-input:hover,
.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.08), 0 0 0 3px rgba(var(--primary-rgb), 0.04);
    outline: none;
}

.search-input:focus {
    animation: search-input-pulse 1.6s ease-in-out infinite;
}

@keyframes search-input-pulse {
    0% {
        box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.06), 0 0 0 2px rgba(var(--primary-rgb), 0.02);
    }

    50% {
        box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.10), 0 0 0 4px rgba(var(--primary-rgb), 0.06);
    }

    100% {
        box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.06), 0 0 0 2px rgba(var(--primary-rgb), 0.02);
    }
}

@media (prefers-reduced-motion: reduce) {

    .search-input,
    .search-input:focus {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================ Contact Page CSS ============================== */
/* Address details card styles (scoped) */
.address-card {
    background: linear-gradient(180deg, #f2f3f5, #e9ecef);
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(11, 60, 93, 0.06);
}

.contact-address-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-address-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11, 60, 93, 0.04);
    align-items: flex-start;
    animation: addr-slide-up .42s ease both;
}

.contact-address-list li:last-child {
    border-bottom: 0;
}

.contact-address-list i {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(201, 162, 39, 0.08);
    color: var(--primary-dark);
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.contact-address-list .fw-bold {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 14px;
}

.contact-address-list .text-muted {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Staggered entrance */
.contact-address-list li:nth-child(1) {
    animation-delay: .04s;
}

.contact-address-list li:nth-child(2) {
    animation-delay: .08s;
}

.contact-address-list li:nth-child(3) {
    animation-delay: .12s;
}

.contact-address-list li:nth-child(4) {
    animation-delay: .16s;
}

.contact-address-list li:nth-child(5) {
    animation-delay: .20s;
}

@keyframes addr-slide-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover icon accent */
.contact-address-list li:hover i {
    transform: translateY(-4px) scale(1.03);
    background: linear-gradient(180deg, var(--accent-light), var(--accent-color));
    color: #fff;
}

@media (max-width: 575.98px) {
    .address-card {
        padding: 12px;
    }

    .contact-address-list i {
        min-width: 30px;
        height: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-address-list li {
        animation: none !important;
    }
}

/* ========================= Site Preloader Styles ========================= */
#site-preloader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white, #ffffff);
    z-index: 10500;
    transition: opacity .45s ease, visibility .45s ease;
    opacity: 1;
    visibility: visible;
}

#site-preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#site-preloader .preloader-inner {
    text-align: center;
}

#site-preloader .spinner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 6px solid rgba(0,0,0,0.08);
    border-top-color: var(--accent-color, #C9A227);
    animation: preloader-spin 0.9s linear infinite;
    margin: 0 auto 8px;
}

@keyframes preloader-spin { to { transform: rotate(360deg); } }

#site-preloader .preloader-text {
    display: block;
    color: var(--text-secondary, #666);
    font-size: 14px;
    margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #site-preloader .spinner {
        animation: none !important;
    }
}

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