/* ============================================================
   Modern Theme Layer — Maafushi Council
   Loaded AFTER style.css + app.css. Purely additive overrides.
   Refreshes the design tokens (palette / radius / shadows) which
   cascade everywhere via var(), then polishes key components.
   ============================================================ */

/* ----------  1. Design tokens  ---------- */
:root {
    /* Fresh ocean-inspired palette */
    --thm-primary: #0a9cb8;          /* vibrant lagoon teal */
    --thm-primary-rgb: 10, 156, 184;
    --thm-primary-deep: #067387;     /* deeper teal for contrast */
    --thm-primary-light: #2bc4dd;    /* bright surf */
    --thm-accent: #ff7a59;           /* warm coral pop */
    --thm-accent-rgb: 255, 122, 89;

    --thm-secondary: #8aa1ad;
    --thm-secondary-rgb: 138, 161, 173;

    --thm-black: #0a2a43;            /* deep ocean navy */
    --thm-black-rgb: 10, 42, 67;
    --thm-dark-black: #071e30;

    --thm-gray: #586b76;             /* darker body text -> better readability */
    --thm-gray-rgb: 88, 107, 118;

    --thm-border: #e6eef2;
    --thm-border-rgb: 230, 238, 242;
    --thm-light-bg: #f1f8fa;
    --thm-light-bg-rgb: 241, 248, 250;
    --thm-white: #ffffff;

    /* Gradients */
    --thm-grad: linear-gradient(135deg, #14b6d0 0%, #0a9cb8 45%, #067387 100%);
    --thm-grad-soft: linear-gradient(135deg, #2bc4dd 0%, #0a9cb8 100%);
    --thm-grad-dark: linear-gradient(135deg, #0a2a43 0%, #0d3a55 55%, #0a5d76 100%);
    --thm-grad-accent: linear-gradient(135deg, #ff9a6b 0%, #ff6b45 100%);

    /* Shape & depth */
    --thm-radius-sm: 10px;
    --thm-radius: 16px;
    --thm-radius-lg: 24px;
    --thm-shadow-sm: 0 6px 18px -10px rgba(10, 42, 67, 0.30);
    --thm-shadow: 0 18px 44px -20px rgba(10, 42, 67, 0.28);
    --thm-shadow-lg: 0 34px 70px -26px rgba(10, 42, 67, 0.34);
    --thm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------  2. Global polish  ---------- */
/* Use :root (not html) so this wins over the theme's `:root{scroll-behavior:auto}`
   which has higher specificity than a bare `html` selector. */
:root {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--thm-gray);
    letter-spacing: 0.1px;
}

::selection {
    background: rgba(var(--thm-primary-rgb), 0.22);
    color: var(--thm-black);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.4px;
}

a {
    transition: color 0.3s var(--thm-ease), background-color 0.3s var(--thm-ease),
        box-shadow 0.3s var(--thm-ease), transform 0.3s var(--thm-ease);
}

a:hover {
    color: var(--thm-primary);
}

/* Accessible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(var(--thm-primary-rgb), 0.45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----------  3. Buttons  ---------- */
.btn-primary,
.cta-three-inner .btn-primary,
.causes-details-section .give-btn {
    position: relative;
    overflow: hidden;
    background: var(--thm-grad);
    background-size: 160% 160%;
    border: 0;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 14px 26px -12px rgba(var(--thm-primary-rgb), 0.65);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease),
        background-position 0.6s var(--thm-ease);
    z-index: 1;
}

.btn-primary:hover,
.btn-primary:focus,
.cta-three-inner .btn-primary:hover,
.causes-details-section .give-btn:hover {
    background: var(--thm-grad);
    background-size: 160% 160%;
    background-position: right center;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 22px 38px -14px rgba(var(--thm-primary-rgb), 0.7);
}

/* sheen sweep on hover */
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.7s var(--thm-ease);
    z-index: -1;
}

.btn-primary:hover::after {
    left: 130%;
}

/* ----------  4. Section titles & taglines  ---------- */
.section-title {
    font-weight: 800;
    letter-spacing: -1px;
}

.section-tagline {
    display: inline-block;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--thm-primary-deep);
    padding-left: 46px;
}

.section-tagline:before {
    left: 0;
    height: 3px;
    width: 32px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px;
    background: var(--thm-grad-soft);
}

.section-title-box.text-center .section-tagline {
    padding-left: 0;
    padding-top: 22px;
}

.section-title-box.text-center .section-tagline:before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ----------  5. Header / navigation  ---------- */
/* backdrop-filter below creates a stacking context on .main-menu, which would
   otherwise trap the dropdowns' z-index locally and let page sections that use
   z-index paint over them. Lift the whole header into its own higher context so
   the hover dropdowns always sit above page content. Overlays (search 9999,
   mobile-nav 1111111) stay above this. */
.header {
    position: relative;
    z-index: 1000;
}

.topbar-inner {
    background: var(--thm-grad-dark);
}

.main-menu {
    position: relative;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--thm-border);
}

.sticky-header--cloned {
    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 10px 34px -16px rgba(10, 42, 67, 0.30);
}

.main-menu .main-menu-list > li > a {
    font-weight: 700;
    transition: color 0.3s var(--thm-ease);
}

.main-menu .main-menu-list > li > a:hover {
    color: var(--thm-primary);
}

/* search toggler */
.search-box .search-toggler {
    transition: color 0.3s var(--thm-ease), transform 0.3s var(--thm-ease);
}

.search-box .search-toggler:hover {
    color: var(--thm-primary);
    transform: scale(1.12);
}

/* ===== Inline expanding nav search (desktop / large screens) =============
   Click the icon to slide a field open. The form is absolutely positioned and
   grows toward the start, so the icon and the buttons beside it never shift.
   The whole FORM is the pill, with the input + icon inside it — so the icon sits
   at the trailing edge of the field, not floating outside. .search-box reserves
   the icon's 44px in the flow. On mobile .search-box is hidden (search lives in
   the slide-out menu). Mirrors cleanly in RTL via logical properties. */
.search-box {
    position: relative;
    width: 44px;
    height: 44px;
}
.nav-search {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    border: 1.5px solid transparent;
    border-radius: 50px;
    background: transparent;
    transition: border-color 0.3s var(--thm-ease), background 0.3s var(--thm-ease),
        box-shadow 0.3s var(--thm-ease);
}
.search-box.open .nav-search {
    border-color: var(--thm-primary);
    background: #fff;
    box-shadow: 0 16px 36px -24px rgba(0, 0, 0, 0.4);
}
.nav-search-input {
    width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--thm-black);
    font-size: 15px;
    padding: 0;
    opacity: 0;
    transition: width 0.38s var(--thm-ease), padding 0.34s var(--thm-ease),
        opacity 0.25s var(--thm-ease);
}
.search-box.open .nav-search-input {
    width: 280px;
    padding-inline-start: 22px;
    opacity: 1;
}
.nav-search-input::placeholder { color: #9aa6b2; }
/* The pill border is the focus indicator — suppress the global input:focus-visible
   outline (3px offset ring) so the field doesn't show a second, rectangular border. */
.nav-search-input:focus,
.nav-search-input:focus-visible {
    outline: none;
    box-shadow: none;
}
.search-box .search-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50px;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    color: inherit;
}
.search-box.open .search-toggler { color: var(--thm-primary); }

@media (max-width: 1499px) {
    .search-box.open .nav-search-input { width: 220px; }
}

/* ===== Nav language switcher — MOBILE ONLY. It appears only below 1200px, where
   the topbar (which carries its own switcher) is hidden; on desktop the topbar
   switcher is used and the nav keeps its search box. Mirrors cleanly in RTL. ===== */
.nav-lang {
    display: none;
    align-items: center;
}
/* Language switcher placement:
   - The theme hides .topbar-right (the language + login pills) at <=1399px but keeps
     the topbar itself until <=1199px. Our topbar-right is just two small pills with
     room to spare, so re-show it down to 1200px — the switcher stays in the topbar
     (preferred), auto-aligned right by the topbar-inner's space-between.
   - Below 1200px the whole topbar is gone, so the in-nav .nav-lang button takes over. */
@media (max-width: 1399px) {
    .topbar-right { display: block; }
}
@media (max-width: 1199px) {
    .nav-lang { display: flex; }   /* topbar is fully hidden here — fall back to the nav button */
    .search-box { display: none; } /* hide the nav search — it lives in the mobile menu now */
}
.nav-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 17px;
    border-radius: 50px;
    border: 1.5px solid rgba(var(--thm-primary-rgb), 0.28);
    background: rgba(var(--thm-primary-rgb), 0.06);
    color: var(--thm-primary-deep);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.25s var(--thm-ease), border-color 0.25s var(--thm-ease), color 0.25s var(--thm-ease);
}
.nav-lang-btn:hover {
    background: var(--thm-primary);
    border-color: var(--thm-primary);
    color: #fff;
}
.nav-lang-btn img {
    width: 22px;
    height: 15px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1399px) {
    /* mobile/tablet header: the inner control (search on tablets, language on
       phones) sits order 1, hamburger order 2; spacing is a single symmetric
       flex gap, with the theme's asymmetric side-margins zeroed out. */
    .main-menu-right {
        gap: 10px;
        margin: 0;
    }
    .nav-lang,
    .search-box {
        order: 1;
        margin: 0;
    }
    .mobile-menu-button {
        order: 2;
        margin: 0;
    }
    .nav-lang-btn {
        padding: 9px 13px;
        font-size: 14px;
    }
}

@media (max-width: 359px) {
    /* very narrow phones: flag only */
    .nav-lang-btn span {
        display: none;
    }
    .nav-lang-btn {
        padding: 10px 12px;
    }
}

/* ===== Mobile slide-out menu — refreshed UI + in-menu search ===== */
.mobile-nav-content {
    max-width: 330px;
    padding: 0 0 34px;
    background: linear-gradient(180deg, rgba(var(--thm-primary-rgb), 0.22), transparent 38%), var(--thm-black);
}
.mobile-nav-content .logo-box {
    margin: 0;
    padding: 26px 22px 16px;
}
.mobile-nav-content .logo-box img {
    width: 150px;
    height: auto;
    /* logo-light.png is actually the blue brand logo; on the dark menu render it
       white so it reads cleanly — this realises the intended "light" logo. */
    filter: brightness(0) invert(1);
}
.mobile-nav-auth {
    padding: 16px 22px 4px;
}
.mobile-nav-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--thm-primary);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.25s var(--thm-ease), transform 0.2s var(--thm-ease);
}
.mobile-nav-login:hover {
    background: var(--thm-primary-deep);
    color: #fff;
    transform: translateY(-1px);
}
.mobile-nav-user {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    font-size: 14px;
}
.mobile-nav-user i { color: var(--thm-primary); }
.mobile-nav-close {
    top: 24px;
    right: 18px;
    left: auto;
    height: 34px;
    width: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    transition: background 0.2s var(--thm-ease);
}
.mobile-nav-close:hover { background: rgba(255, 255, 255, 0.18); }
.mobile-nav-close span { width: 15px; }

/* in-menu search */
.mobile-nav-search {
    position: relative;
    display: flex;
    margin: 2px 20px 8px;
}
.mobile-nav-search input {
    width: 100%;
    height: 47px;
    padding-inline: 16px 52px;
    border-radius: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}
.mobile-nav-search input::placeholder { color: rgba(255, 255, 255, 0.5); }
.mobile-nav-search input:focus {
    outline: none;
    border-color: var(--thm-primary);
    background: rgba(255, 255, 255, 0.1);
}
.mobile-nav-search button {
    position: absolute;
    inset-inline-end: 6px;
    top: 6px;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 9px;
    background: var(--thm-grad, var(--thm-primary));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* nav list */
.mobile-nav-container {
    margin-top: 4px;
    padding: 4px 14px;
}
.mobile-nav-container > ul li { line-height: 1.45; }
.mobile-nav-container > ul li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.mobile-nav-container > ul li > a {
    padding: 13px 10px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 15.5px;
    border-radius: 10px;
    transition: background 0.2s var(--thm-ease), color 0.2s var(--thm-ease);
}
.mobile-nav-container > ul li > a:hover {
    background: rgba(var(--thm-primary-rgb), 0.16);
    color: #fff;
}
/* dropdown toggle — replace the default white button box with a soft chip */
.main-menu-list li.has-dropdown > a button {
    height: 28px;
    width: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.main-menu-list li.has-dropdown > a button i { color: #fff; font-size: 12px; }
.main-menu-list li.has-dropdown > a button:hover { background: var(--thm-primary); }
/* submenu */
.mobile-nav-container > ul > li ul {
    margin: 2px 0 8px;
    margin-inline-start: 8px;
    padding-inline-start: 10px;
    border-top: 0;
    border-inline-start: 2px solid rgba(var(--thm-primary-rgb), 0.45);
}
.mobile-nav-container > ul > li ul li + li { border-top: 0; }
.mobile-nav-container > ul > li ul li > a {
    padding: 9px 8px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.74);
}

/* contact + social */
.mobile-nav-contact {
    margin: 12px 20px 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav-contact li,
.mobile-nav-contact li a { font-size: 14.5px; }
.mobile-nav-contact li i {
    margin-inline-end: 12px;
    margin-inline-start: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(var(--thm-primary-rgb), 0.15);
    color: var(--thm-primary-light, var(--thm-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mobile-nav-social { padding: 0 20px; }
.mobile-nav-social li + li {
    margin-left: 0;
    margin-inline-start: 10px;
}
.mobile-nav-social li a {
    height: 38px;
    width: 38px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 50%;
    transition: background 0.2s var(--thm-ease), transform 0.2s var(--thm-ease);
}
.mobile-nav-social li a:hover {
    background: var(--thm-primary);
    color: #fff;
    transform: translateY(-2px);
}

/* ===== Search results page ===== */
.search-section { padding: 50px 0 80px; }
.search-page-form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 720px;
    margin: 0 auto 38px;
    background: #fff;
    border: 1.5px solid #e3eaee;
    border-radius: 14px;
    padding: 7px;
    padding-inline-start: 18px;
    box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.3);
}
.search-page-form > i { color: var(--thm-primary); font-size: 18px; flex-shrink: 0; }
.search-page-form input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 16px;
    padding: 11px 6px;
    background: transparent;
    color: var(--thm-black);
}
.search-page-form .btn { white-space: nowrap; padding: 13px 26px; flex-shrink: 0; }

.search-summary { text-align: center; color: var(--thm-gray); margin-bottom: 32px; font-size: 16px; }
.search-summary strong { color: var(--thm-black); }

.search-group { margin-bottom: 36px; }
.search-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef3f5;
}
.search-group-title i { color: var(--thm-primary); }
.search-group-title span {
    margin-inline-start: auto;
    background: rgba(var(--thm-primary-rgb), 0.1);
    color: var(--thm-primary-deep);
    font-size: 13px;
    font-weight: 700;
    padding: 2px 11px;
    border-radius: 50px;
}
.search-results { display: grid; gap: 12px; }
.search-result {
    display: block;
    background: #fff;
    border: 1px solid #e7eef1;
    border-radius: 12px;
    padding: 16px 20px;
    transition: transform 0.2s var(--thm-ease), box-shadow 0.2s var(--thm-ease), border-color 0.2s var(--thm-ease);
}
.search-result:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.3);
    border-color: rgba(var(--thm-primary-rgb), 0.35);
}
.search-result-title { font-size: 17px; font-weight: 700; margin: 0 0 5px; color: var(--thm-black); }
.search-result-snippet { font-size: 14px; color: var(--thm-gray); margin: 0 0 9px; line-height: 1.65; }
.search-result-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; flex-wrap: wrap; }
.search-result-badge {
    background: rgba(var(--thm-primary-rgb), 0.1);
    color: var(--thm-primary-deep);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 50px;
}
.search-result-date { color: #8693a0; }
mark { background: #fff2a8; color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 600; }

.search-empty {
    text-align: center;
    padding: 56px 20px;
    max-width: 480px;
    margin: 0 auto;
}
.search-empty i { font-size: 46px; color: rgba(var(--thm-primary-rgb), 0.32); margin-bottom: 18px; }
.search-empty h4 { font-size: 22px; margin-bottom: 8px; }
.search-empty p { color: var(--thm-gray); margin: 0; }

/* --- compact + polish the header bar --- */
/* slimmer topbar */
.topbar-socials {
    padding: 8px 10px;
}

.topbar-info {
    padding: 7px 10px 7px 40px;
}

.topbar-right {
    padding: 7px 0;
}

/* brighter, more legible topbar text + icons */
.topbar-info .topbar-text,
.topbar-info .topbar-text a,
.topbar-info .topbar-text span,
.topbar-right li,
.topbar-right li a {
    color: rgba(255, 255, 255, 0.82);
}

.topbar-info .topbar-text a:hover,
.topbar-right li a:hover {
    color: #fff;
}

/* Centre every topbar-right item by its middle (not baseline) so the language
   and login pills line up regardless of Thaana-vs-Latin content. */
.topbar-right li {
    vertical-align: middle;
}

/* Topbar pill buttons — make the language switch + staff login obvious.
   Fixed height + line-height:1 so the flag, icon and text centre identically
   in both languages. */
.topbar-right li a.topbar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 28px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    color: #fff;
    line-height: 1;
    transition: background-color 0.2s var(--thm-ease), border-color 0.2s var(--thm-ease);
}
.topbar-right li a.topbar-pill:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.topbar-flag {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* Pills carry their own spacing — drop the "/" separator around them. */
.topbar-right li.topbar-pill-item::before,
.topbar-right li.topbar-pill-item + li::before {
    content: none !important;
}
.topbar-right li.topbar-pill-item + li {
    margin-left: 9px;
}

.topbar-socials a {
    transition: transform 0.3s var(--thm-ease), opacity 0.3s var(--thm-ease);
}

.topbar-socials a:hover {
    color: #fff;
    opacity: 0.85;
    transform: translateY(-2px);
}

/* slimmer logo + nav rows so the header isn't so tall */
.main-menu-logo img {
    height: 52px;
    width: auto;
}

.main-menu .main-menu-list > li > a {
    padding: 25px 0;
}

/* ----------  6. Hero slider — formal / official treatment  ---------- */
/* Even, deep-navy overlay + soft vignette: keeps the photography legible and
   lets the council's message lead, rather than a bright tropical wash. */
.main-slider .owl-item .item .item-slider-bg:before {
    background:
        radial-gradient(140% 120% at 50% 6%, transparent 40%, rgba(5, 18, 30, 0.60) 100%),
        linear-gradient(
            180deg,
            rgba(8, 28, 46, 0.66) 0%,
            rgba(8, 28, 46, 0.62) 45%,
            rgba(6, 20, 33, 0.84) 100%
        );
}

/* refined "eyebrow" tagline: no chip — uppercase, wide tracking, accent rule */
.slider-tagline-two {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0 0 22px;
    color: #d7eef4;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
    position: relative;
}

.slider-tagline-two:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--thm-grad-soft);
}

.slider-content-two .section-title {
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.08;
    text-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

/* more presence + formality on the hero CTA */
.slider-content-two .btn-primary {
    padding: 18px 48px;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* --- Prevent the hero collapsing / layout-shift before Owl initializes ---
   Owl Carousel hides .owl-carousel (display:none) until its JS adds
   .owl-loaded, and that JS runs only after the render-blocking scripts above
   theme.js finish — so the hero collapsed to 0px and popped in on load.
   Render the first slide statically until Owl takes over: the section keeps
   its full height and content from first paint, with a seamless handoff. */
.main-slider .owl-carousel:not(.owl-loaded) {
    display: block;
}

.main-slider .owl-carousel:not(.owl-loaded) > .item {
    display: none;
}

.main-slider .owl-carousel:not(.owl-loaded) > .item:first-child {
    display: block;
}

/* the slide intro animation starts at opacity:0 (revealed via .owl-item.active);
   reveal it on the statically-shown first slide so it isn't blank pre-init */
.main-slider .owl-carousel:not(.owl-loaded) > .item:first-child .slider-tagline-two,
.main-slider .owl-carousel:not(.owl-loaded) > .item:first-child .section-title {
    opacity: 1;
    transform: none;
}

/* ===== Home hero — background video ====================================
   Replaces the old Owl photo carousel. A muted, looping <video> covers the
   section; the poster (aerial photo) shows while it loads or if the file is
   missing, so the hero never looks broken. Content reuses .slider-content-two
   but is forced visible (there's no .owl-item.active to animate it in). */
.hero-video {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 520px;
    background: var(--thm-dark-black);
}
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* pin the video to its own integer-aligned GPU layer so its per-frame repaint
       doesn't sub-pixel-jitter the content composited above it */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(140% 120% at 50% 6%, transparent 38%, rgba(5, 18, 30, 0.62) 100%),
        linear-gradient(180deg, rgba(5, 18, 30, 0.42), rgba(5, 18, 30, 0.52));
}
.hero-video > .container {
    position: relative;
    z-index: 2;
}
/* Hero content uses its OWN classes — not the theme's .slider-* carousel classes,
   which dragged in `transition: all 1500ms`, transform offsets and opacity:0.
   Everything here is static; there's nothing left to re-fire over the video. */
.hero-video-content {
    padding: 200px 0;
    text-align: center;
}
.hero-video-tagline {
    display: inline-block;
    position: relative;
    margin: 0;
    padding-bottom: 22px;
    color: #d7eef4;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
}
.hero-video-tagline::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--thm-grad-soft);
}
.hero-video-title {
    margin: 0 0 30px;
    color: #fff;
    font-family: var(--thm-font);
    font-size: 80px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.08;
    text-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}
/* Promote the content WRAPPER (the child block) AND the text to their own GPU
   layers, so the playing video behind them can't re-rasterize them each frame —
   that sub-pixel re-raster was the 1px jitter. Promoting only the text spans
   isn't enough: they'd still ride along if their parent shifts, so the wrapper
   is pinned too. */
.hero-video-content,
.hero-video-tagline,
.hero-video-title {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}
@media (max-width: 1199px) { .hero-video-title { font-size: 70px; } }
@media (max-width: 991px)  { .hero-video-title { font-size: 60px; } }
@media (max-width: 767px)  { .hero-video-title { font-size: 40px; } }
@media (max-width: 575px)  { .hero-video-title { font-size: 30px; } }
.hero-video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 6px;
}
/* secondary hero buttons: outlined so the solid 'About' leads */
/* No backdrop-filter here: the promoted .hero-video-content (transform) becomes
   its backdrop root, so the blur would no-op anyway — a plain translucent fill
   reads the same over the dark video. */
.hero-video-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #fff;
}
.hero-video-actions .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    color: #fff;
}
/* Full-screen hero on phones — fill the viewport (dvh accounts for the mobile
   browser's address bar) and centre the content vertically. */
@media (max-width: 767px) {
    .hero-video {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
    }
    .hero-video-content {
        width: 100%;
        padding-top: 80px;    /* clearance below the fixed top nav */
        padding-bottom: 40px;
    }
    .hero-video-actions .btn {
        flex: 1 1 auto;       /* buttons share the row, then wrap cleanly */
    }
}

/* Stop the periodic horizontal page "jitter": the theme's autoplay carousels
   (e.g. the gallery) can momentarily overflow during a loop transition, which
   toggles the window scrollbar and shifts the whole page — including the hero —
   every few seconds. Clip horizontal overflow. Using `clip` (not `hidden`) so
   the sticky header keeps working. */
html,
body {
    overflow-x: clip;
}

/* ----------  7. Service department cards (home grid)  ---------- */
.department-card {
    transition: transform 0.4s var(--thm-ease);
}

.department-card:hover {
    transform: translateY(-6px);
}

.department-card-icon {
    border-radius: 22px;
    box-shadow: 0 16px 34px -16px rgba(10, 42, 67, 0.30);
    transition: transform 0.45s var(--thm-ease), box-shadow 0.45s var(--thm-ease),
        background 0.45s var(--thm-ease), color 0.45s var(--thm-ease);
}

.department-card:hover .department-card-icon {
    background: var(--thm-grad);
    color: #fff;
    transform: translateY(-4px) rotate(-6deg);
    box-shadow: 0 22px 40px -16px rgba(var(--thm-primary-rgb), 0.6);
}

.department-card:hover .department-card-icon i,
.department-card:hover .department-card-icon a {
    color: #fff;
}

/* "Our Services" = a dark box the video bleeds into through a halftone strip.
   (The `.home-page .department-*` overrides further down never apply — the body
   has no `.home-page` class — so style straight off `.department-section`.) */
.department-section {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding-top: 72px;
    padding-bottom: 40px;
    background:
        linear-gradient(to right, rgba(6, 24, 44, 0) 0%, rgba(6, 24, 44, 0.5) 50%, rgba(6, 24, 44, 0) 100%),
        linear-gradient(rgb(10, 37, 64) 0%, rgb(12, 58, 82) 50%, rgb(14, 99, 119) 100%);
}
/* TOP bleed — the box's surface emerges from the video: the halftone SVG MASKS a
   fill identical to the section's top (navy + the same centre-darkening band), so
   nothing seams where they meet. The darkening is a pure left→right gradient, so
   it reads the same at every height — bleed and section line up automatically. */
.department-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -150px;
    height: 150px;
    background:
        linear-gradient(to right, rgba(6, 24, 44, 0) 0%, rgba(6, 24, 44, 0.5) 50%, rgba(6, 24, 44, 0) 100%),
        rgb(10, 37, 64);
    -webkit-mask: url("/image/halftone-bleed.svg") repeat-x;
    -webkit-mask-size: 26px 150px;
    mask: url("/image/halftone-bleed.svg") repeat-x;
    mask-size: 26px 150px;
    pointer-events: none;
}
.department-section .department-section-inner {
    position: relative;
    z-index: 1;
    background: transparent;
    margin: 0;
    padding: 0;
}
/* labels read white on the dark box */
.department-section .department-card-content h5 a,
.department-section .department-card:hover .department-card-content h5 a {
    color: #fff;
}

/* ----------  8. Funfact / stats  ---------- */
.funfact-section {
    position: relative;
    /* compact ribbon: trimmed top/bottom so the section stops eating space. Keep
       overflow visible or it clips the ribbon panel's drop shadow. */
    padding-top: 72px;
    padding-bottom: 28px !important;
    /* even vertical gradient; the bottom stop matches the tall teal band that
       opens the next section so the two blend with no bright seam */
    background:
        radial-gradient(900px 360px at 15% -12%, rgba(43, 196, 221, 0.20), transparent 60%),
        linear-gradient(180deg, #0a2540 0%, #0c3a52 50%, #0e6377 100%);
}

.funfact-section .container {
    position: relative;
    z-index: 1;
}

/* the next section opens with a teal intro band the service cards overlap; the
   original theme matched it to the flat-teal funfact bg, so recolor it to our
   gradient's bottom for a seamless transition. Trim the section's top padding +
   the band height so the stats section no longer leaves a big empty teal gap. */
.service-two-section {
    padding-top: 52px;
}
.service-two-section:before {
    background-color: #0e6377;
    height: 220px;
}

/* "Stat ribbon" — no separate boxes: every stat lives in ONE glass panel as an
   icon + number + label split by hairline dividers. Much shorter than the old 4×2
   card grid. Each divider is the item's own right/bottom border pulled 1px under
   the panel edge (negative margins + overflow:hidden), so they self-trim at any
   column count — no per-breakpoint :nth-child juggling. Logical props (inline/
   block) flip the dividers + trim correctly on the RTL (Dhivehi) layout. */
.funfact-ribbon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 26px 46px -28px rgba(0, 0, 0, 0.6);
}

.funfact-ribbon-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.09);
    border-block-end: 1px solid rgba(255, 255, 255, 0.09);
    margin-inline-end: -1px;
    margin-block-end: -1px;
    transition: background 0.4s var(--thm-ease);
}

.funfact-ribbon-item:hover {
    background: rgba(43, 196, 221, 0.07);
}

.funfact-ribbon-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 20px;
    color: #8fe3f2;
    background: rgba(43, 196, 221, 0.12);
    border: 1px solid rgba(43, 196, 221, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: background 0.4s var(--thm-ease), color 0.4s var(--thm-ease),
        border-color 0.4s var(--thm-ease);
}

.funfact-ribbon-item:hover .funfact-ribbon-icon {
    background: var(--thm-grad);
    color: #fff;
    border-color: transparent;
}

.funfact-ribbon-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.funfact-ribbon-value {
    display: flex;
    align-items: baseline;
    gap: 3px;
    direction: ltr;
    white-space: nowrap;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #fff;
}

.funfact-ribbon-value .counter-number {
    font: inherit;
    color: inherit;
}

.funfact-ribbon-suffix {
    font-size: 15px;
    font-weight: 700;
    color: #8fe3f2;
}

.funfact-ribbon-label {
    margin: 3px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.66);
}

/* footnote */
.funfact-source {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.50);
}

/* tablet & phone → 2 columns (dividers self-trim automatically) */
@media (max-width: 991px) {
    .funfact-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .funfact-ribbon-item {
        padding: 15px 14px;
        gap: 11px;
    }
    .funfact-ribbon-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    .funfact-ribbon-value {
        font-size: 23px;
    }
}

/* ==========  Homepage data sections (council · contacts · opportunities)  ========== */

/* ----- Meet the council: photo grid ----- */
.council-home-section {
    padding: 72px 0 66px;
}
.council-home-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}
.council-home-card {
    flex: 0 1 198px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(13, 38, 59, 0.06);
    box-shadow: 0 20px 40px -28px rgba(13, 38, 59, 0.4);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}
.council-home-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 52px -26px rgba(13, 38, 59, 0.46);
}
.council-home-photo {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(160deg, #0c3a52, #0e6377);
}
.council-home-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.council-home-photo.is-empty::after {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: rgba(255, 255, 255, 0.55);
}
.council-home-body {
    padding: 16px 14px 18px;
    text-align: center;
}
.council-home-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #15293d;
}
.council-home-role {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    color: #2bc4dd;
}
.council-home-cta {
    margin-top: 38px;
}

/* ----- Useful numbers: contact grid ----- */
.contacts-home-section {
    padding: 66px 0;
    background: linear-gradient(180deg, #eef4f8 0%, #f5f8fa 100%);
}
.contacts-home-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.contacts-home-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 22px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(13, 38, 59, 0.07);
    box-shadow: 0 18px 36px -28px rgba(13, 38, 59, 0.45);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}
/* gradient accent bar that sweeps across the top on hover */
.contacts-home-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--thm-grad);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--thm-ease);
}
.contacts-home-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 46px -26px rgba(13, 38, 59, 0.45);
}
.contacts-home-card:hover::before {
    transform: scaleX(1);
}
.contacts-home-head {
    display: flex;
    align-items: center;
    gap: 13px;
}
.contacts-home-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 19px;
    color: #fff;
    background: var(--thm-grad);
    box-shadow: 0 10px 20px -10px rgba(43, 196, 221, 0.7);
    transition: transform 0.45s var(--thm-ease);
}
.contacts-home-card:hover .contacts-home-icon {
    transform: scale(1.07) rotate(-5deg);
}
.contacts-home-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #15293d;
}
/* the number is the hero — anchored to the card bottom so every card fills evenly */
.contacts-home-phone {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #15293d;
    transition: color 0.3s var(--thm-ease);
}
.contacts-home-phone i {
    font-size: 14px;
    color: #2bc4dd;
}
.contacts-home-phone:hover {
    color: #2bc4dd;
}
.contacts-home-email {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #6b7a89;
    word-break: break-all;
    transition: color 0.3s var(--thm-ease);
}
.contacts-home-email i {
    color: #aab8c4;
}
.contacts-home-email:hover {
    color: #2bc4dd;
}
.contacts-home-cta {
    margin-top: 34px;
}

/* ----- Opportunities: vacancies + press releases (two equal halves) ----- */
.opportunities-section {
    padding: 24px 0 66px;
}
.opportunities-section .gov-card {
    height: 100%;
}

@media (max-width: 991px) {
    .contacts-home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .council-home-grid { gap: 14px; }
    .council-home-card { flex-basis: 140px; }
    .contacts-home-grid { grid-template-columns: 1fr; }
}

/* ----------  9. Service "feature" cards  ---------- */
.service-two-imgbox {
    border-radius: var(--thm-radius);
    overflow: hidden;
}

.service-two-image img {
    border-radius: var(--thm-radius);
    transition: transform 0.7s var(--thm-ease);
}

.service-two-card:hover .service-two-image img {
    transform: scale(1.07);
}

.service-two-card-content {
    border-radius: var(--thm-radius);
    box-shadow: var(--thm-shadow);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.service-two-card:hover .service-two-card-content {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.service-link-box {
    border-radius: var(--thm-radius);
}

/* ----------  10. Portfolio / gallery cards  ---------- */
.portfolio-two-card .item {
    border-radius: var(--thm-radius);
    overflow: hidden;
}

.portfolio-two-card .item img {
    border-radius: var(--thm-radius);
    transition: transform 0.7s var(--thm-ease);
}

.portfolio-two-card:hover .item img {
    transform: scale(1.08);
}

.portfolio-two-card-icon a {
    background: var(--thm-grad);
    color: #fff;
    border-radius: 50%;
}

/* ----------  11. CTA cards  ---------- */
.cta-five-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--thm-radius-lg);
    box-shadow: var(--thm-shadow);
    background: linear-gradient(115deg, #ffffff 54%, rgba(var(--thm-primary-rgb), 0.09) 100%);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.cta-five-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--thm-shadow-lg);
}

.cta-five-card-icon,
.cta-five-content,
.cta-five-button {
    position: relative;
    z-index: 1;
}

.cta-five-card-icon {
    border-radius: var(--thm-radius);
    background: var(--thm-grad);
    box-shadow: 0 18px 34px -16px rgba(var(--thm-primary-rgb), 0.6);
}

.cta-five-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 5px 13px;
    border-radius: 50px;
    background: rgba(var(--thm-primary-rgb), 0.1);
    color: var(--thm-primary-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* brand-tint the large document watermark */
.cta-five-img {
    z-index: 0;
}

.cta-five-img i {
    color: rgba(var(--thm-primary-rgb), 0.08);
}

/* ----------  Opportunity cards (tenders / vacancies)  ---------- */
.opp-card {
    display: block;
    background: #fff;
    border: 1px solid #e7eef1;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px -18px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s var(--thm-ease), box-shadow 0.25s var(--thm-ease), border-color 0.25s var(--thm-ease);
}
.opp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.3);
    border-color: rgba(var(--thm-primary-rgb), 0.35);
}
.opp-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 11px;
}
.opp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 50px;
}
.opp-badge.is-open { background: #e3f7ec; color: #137a47; }
.opp-badge.is-closed { background: #eef1f3; color: #5b6770; }
.opp-badge.is-awarded, .opp-badge.is-filled { background: #e8f0fe; color: #1b56c4; }
.opp-badge.is-cancelled { background: #fdecec; color: #b3261e; }
.opp-ref {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--thm-primary-deep, #0a7c92);
    background: rgba(var(--thm-primary-rgb), 0.08);
    padding: 3px 10px;
    border-radius: 6px;
}
.opp-deadline {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: #b3261e;
    white-space: nowrap;
}
.opp-deadline.is-safe { color: #5b6770; }
.opp-card-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 9px;
    color: var(--thm-black);
}
.opp-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    font-size: 13.5px;
    color: #5b6770;
}
.opp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.opp-meta i { color: var(--thm-primary); }

/* detail page: structured facts panel + section blocks */
.opp-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 6px 0 22px;
    padding: 18px 22px;
    background: #f4f8fa;
    border: 1px solid #e7eef1;
    border-radius: 12px;
}
.opp-facts > div { display: flex; flex-direction: column; gap: 3px; }
.opp-facts span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #8693a0; }
.opp-facts strong { font-size: 15px; color: var(--thm-black); font-weight: 700; }
.opp-countdown { font-weight: 700; color: #b3261e; margin: -6px 0 20px; }
.opp-block { margin: 28px 0; }
.opp-block h3 { font-size: 20px; margin-bottom: 12px; }

.cta-three-inner {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(620px 320px at 82% 120%, rgba(43, 196, 221, 0.20), transparent 60%),
        var(--thm-grad-dark);
}

.cta-three-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 2px, transparent 2px);
    background-size: 26px 26px;
    pointer-events: none;
}

.cta-three-content {
    position: relative;
    z-index: 1;
}

.cta-three-content h2 {
    margin-bottom: 16px;
}

.cta-three-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--thm-primary-light);
}

.cta-three-text {
    max-width: 600px;
    margin: 0 auto 32px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.cta-three-content .btn-primary i {
    margin-left: 8px;
}

/* ----------  12. Blog / news cards  ---------- */
.blog-card {
    border-radius: var(--thm-radius);
    overflow: hidden;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.blog-card-image img {
    border-radius: var(--thm-radius);
}

/* ----------  13. Announcement cards (RTL Dhivehi)  ---------- */
.announcement-card {
    border-radius: var(--thm-radius);
    border-right: 4px solid var(--thm-primary);
    background-color: #fff;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.35s var(--thm-ease), box-shadow 0.35s var(--thm-ease),
        border-right-color 0.35s var(--thm-ease);
}

.announcement-card:hover {
    transform: translateY(-4px);
    background-color: #fff;
    border-right-color: var(--thm-primary-deep);
    box-shadow: var(--thm-shadow);
}

/* ----------  14. Page banner (sub-pages) — text-based, no photo  ---------- */
/* Dropped the per-page hero image for a lighter, more official header: a
   gradient band with a subtle dot texture, a decorative ring, breadcrumb,
   title with an accent rule, and an optional contextual subtitle. */
.page-banner {
    position: relative;
    overflow: hidden;
    padding-top: 66px;
    padding-bottom: 62px;
    background:
        radial-gradient(760px 280px at 85% -30%, rgba(43, 196, 221, 0.22), transparent 62%),
        radial-gradient(620px 260px at 0% 130%, rgba(43, 196, 221, 0.14), transparent 60%),
        linear-gradient(120deg, #0a2540 0%, #0d3a55 55%, #0a5d76 100%);
}

/* subtle tiled watermark of the council logo (rendered as a faint white
   silhouette via mask, so it reads cleanly on the dark banner) */
.page-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.028);
    -webkit-mask-image: url("../image/logo.png");
    mask-image: url("../image/logo.png");
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 150px auto;
    mask-size: 150px auto;
    -webkit-mask-position: center;
    mask-position: center;
    pointer-events: none;
}

.page-banner .container {
    position: relative;
    z-index: 1;
}

.page-banner-inner {
    text-align: center;
}

/* breadcrumb */
.page-breadcrumbs {
    margin-bottom: 14px;
}

.page-breadcrumbs ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.page-breadcrumbs li,
.page-breadcrumbs li a {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.7);
}

.page-breadcrumbs li a:hover {
    color: #fff;
}

.page-breadcrumbs li:last-child {
    color: #fff;
}

.page-breadcrumbs li + li:before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 9px;
    margin: 0 12px;
    opacity: 0.5;
    vertical-align: middle;
}

/* title + accent rule */
.page-banner-title h3 {
    font-size: 40px;
    line-height: 1.12;
    color: #fff;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 0;
}

.page-banner-title:after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    border-radius: 3px;
    margin: 18px auto 0;
    background: var(--thm-grad-soft);
}

/* optional contextual subtitle */
.page-banner-subtitle {
    max-width: 660px;
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .page-banner {
        padding-top: 48px;
        padding-bottom: 46px;
    }

    .page-banner-title h3 {
        font-size: 30px;
    }

    .page-banner-subtitle {
        font-size: 15px;
    }
}

/* ----------  15. Forms & inputs  ---------- */
.form-control,
.department-search-form input,
.te-newsletter-box .contact-form input,
.search-popup-content input {
    border-radius: var(--thm-radius-sm);
    transition: box-shadow 0.3s var(--thm-ease), border-color 0.3s var(--thm-ease);
}

.form-control:focus,
.te-newsletter-box .contact-form input:focus,
.department-search-form input:focus {
    box-shadow: 0 0 0 4px rgba(var(--thm-primary-rgb), 0.16);
    border-color: var(--thm-primary);
}

.department-search-form input {
    border-radius: var(--thm-radius-sm) 0 0 var(--thm-radius-sm);
}

.department-search-form button {
    border-radius: 0 var(--thm-radius-sm) var(--thm-radius-sm) 0;
    background: var(--thm-grad);
}

/* ----------  16. Pagination  ---------- */
.pagination li a,
.pagination li span,
.give-page-numbers > span,
.give-page-numbers a {
    border-radius: 14px;
    background: #fff;
    color: var(--thm-black);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.3s var(--thm-ease), background 0.3s var(--thm-ease),
        color 0.3s var(--thm-ease);
}

.pagination li a:hover,
.pagination li span:hover,
.pagination li span.current,
.give-page-numbers > span,
.give-page-numbers a:hover {
    background: var(--thm-grad);
    color: #fff;
    transform: translateY(-2px);
}

/* ----------  17. Footer — compact, official  ---------- */
.footer {
    position: relative;
    background-color: var(--thm-black);
    background-image:
        radial-gradient(720px 320px at 85% -10%, rgba(var(--thm-primary-rgb), 0.12), transparent 60%),
        linear-gradient(180deg, #0a2a43 0%, #071e30 100%);
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--thm-grad);
}

.footer-inner {
    padding: 52px 0 34px;
}

/* keep all footer columns top-aligned (titles line up with the logo) */
.footer-inner .row {
    align-items: flex-start;
}

@media (max-width: 991px) {
    .footer-inner {
        padding: 44px 0 28px;
    }
}

/* about column */
.footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.footer-logo img {
    height: 50px;
    width: auto;
}

.footer-about p {
    max-width: 330px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
}

/* social buttons */
.footer-widget-socials {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-widget-socials a,
.footer .footer-widget-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transition: transform 0.3s var(--thm-ease), background 0.3s var(--thm-ease);
}

.footer-widget-socials a:hover {
    background: var(--thm-grad);
    color: #fff;
    transform: translateY(-3px);
}

/* the theme pushes link columns down 120px — reset so their titles align
   with the logo / top of the about column */
.footer-widget {
    margin-top: 0;
}

/* widget titles + link lists */
.footer-widget-title {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #fff;
}

.footer-widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--thm-primary);
}

.footer-widget ul li,
.footer-widget ol li {
    margin-bottom: 9px;
}

.footer-widget ul li a,
.footer-widget ol li a {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
    transition: color 0.3s var(--thm-ease), padding 0.3s var(--thm-ease);
}

.footer-widget ul li a:hover,
.footer-widget ol li a:hover {
    color: #fff;
    padding-left: 4px;
}

/* contact list */
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
}

.footer-contact li i {
    flex-shrink: 0;
    width: 16px;
    margin-top: 4px;
    text-align: center;
    font-size: 14px;
    color: var(--thm-primary);
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.62);
}

.footer-contact a:hover {
    color: #fff;
}

/* bottom bar */
.bottom-footer {
    padding: 20px 0;
    text-align: left;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bottom-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.bottom-footer-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bottom-emblem {
    flex-shrink: 0;
    width: 40px;
    height: auto;
}

.bottom-footer p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

.bottom-footer-links {
    display: flex;
    gap: 24px;
    margin: 0;
}

.bottom-footer-links a {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.3s var(--thm-ease);
}

.bottom-footer-links a:hover {
    color: #fff;
}

@media (max-width: 575px) {
    .bottom-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ----------  18. Scroll-to-top  ---------- */
.scroll-to-top {
    height: 46px;
    width: 46px;
    line-height: 46px;
    border-radius: 14px;
    background: var(--thm-grad);
    box-shadow: 0 14px 28px -12px rgba(var(--thm-primary-rgb), 0.7);
    transition: transform 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease);
}

.scroll-to-top:hover {
    background: var(--thm-grad);
    transform: translateY(-4px);
}

/* ----------  19. Generic widgets / sidebar polish  ---------- */
.service-widget ul li,
.widget .tagcloud a {
    border-radius: var(--thm-radius-sm);
}

.widget .tagcloud a:hover {
    background: var(--thm-grad);
}

/* Subtle reveal for cards on hover across the board */
.team-card,
.councilor-card {
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.team-card:hover,
.councilor-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--thm-shadow);
}

/* ----------  20. About page  ---------- */
.about-lead {
    font-size: 18px;
    line-height: 1.8;
    color: var(--thm-black);
    font-weight: 500;
}

/* Mission / Vision as formal, structured blocks */
.about-mv {
    margin: 30px 0 36px;
}

.about-mv-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 26px;
    border-radius: var(--thm-radius);
    background: var(--thm-light-bg);
    border-left: 4px solid var(--thm-primary);
    transition: box-shadow 0.4s var(--thm-ease), transform 0.4s var(--thm-ease);
}

.about-mv-item + .about-mv-item {
    margin-top: 16px;
}

.about-mv-item:hover {
    transform: translateX(4px);
    box-shadow: var(--thm-shadow-sm);
}

.about-mv-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: var(--thm-grad);
    box-shadow: 0 12px 24px -12px rgba(var(--thm-primary-rgb), 0.6);
}

.about-mv-text h5 {
    margin-bottom: 8px;
    font-weight: 800;
    color: var(--thm-black);
}

.about-mv-text p {
    margin-bottom: 0;
}

/* "What We Do" — clean, official card grid */
.wwd-section {
    padding: 110px 0;
    background: var(--thm-light-bg);
}

.wwd-section .section-title-box {
    margin-bottom: 55px;
}

.wwd-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: 18px;
    padding: 40px 34px;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease),
        border-color 0.4s var(--thm-ease);
}

.wwd-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--thm-shadow-lg);
}

.wwd-card-icon {
    width: 66px;
    height: 66px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 28px;
    color: var(--thm-primary);
    background: rgba(var(--thm-primary-rgb), 0.10);
    transition: background 0.4s var(--thm-ease), color 0.4s var(--thm-ease),
        transform 0.4s var(--thm-ease);
}

.wwd-card:hover .wwd-card-icon {
    background: var(--thm-grad);
    color: #fff;
    transform: rotate(-6deg);
}

.wwd-card h4 {
    font-size: 21px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 12px;
}

.wwd-card p {
    margin-bottom: 0;
    line-height: 1.75;
}

/* ----------  21. Visitor Guide (magazine layout)  ---------- */
.vg-section {
    padding: 80px 0 110px;
}

/* article meta row */
.vg-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.vg-tag {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    background: var(--thm-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vg-tag-soft {
    background: rgba(var(--thm-primary-rgb), 0.12);
    color: var(--thm-primary-deep);
}

.vg-readtime {
    color: var(--thm-gray);
    font-size: 14px;
    font-weight: 600;
}

.vg-readtime i {
    color: var(--thm-primary);
    margin-right: 6px;
}

/* feature figures + lightbox */
.vg-figure {
    margin: 0 0 32px;
    border-radius: var(--thm-radius);
    overflow: hidden;
    box-shadow: var(--thm-shadow);
}

.vg-figure a {
    display: block;
    position: relative;
}

.vg-figure img {
    width: 100%;
    display: block;
    transition: transform 0.8s var(--thm-ease);
}

.vg-figure a:after {
    content: "\f00e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    background: rgba(10, 42, 67, 0.55);
    color: #fff;
    opacity: 0;
    transform: scale(0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: all 0.4s var(--thm-ease);
}

.vg-figure:hover a:after {
    opacity: 1;
    transform: scale(1);
}

.vg-figure:hover img {
    transform: scale(1.05);
}

.vg-figure figcaption {
    padding: 12px 18px;
    font-size: 13px;
    color: var(--thm-gray);
    background: var(--thm-light-bg);
}

/* editorial blocks */
.vg-block {
    margin-bottom: 38px;
    scroll-margin-top: 110px;
}

.vg-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--thm-primary-deep);
    margin-bottom: 12px;
    padding-left: 32px;
    position: relative;
}

.vg-kicker:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--thm-grad-soft);
    transform: translateY(-50%);
}

.vg-block h3 {
    font-size: 30px;
    font-weight: 800;
    color: var(--thm-black);
    letter-spacing: -0.6px;
    margin-bottom: 16px;
}

.vg-block p {
    line-height: 1.85;
    margin-bottom: 16px;
}

.vg-block p:last-child {
    margin-bottom: 0;
}

/* lead paragraph with drop cap */
.vg-lead {
    font-size: 18px;
    color: #44525b;
}

.vg-lead::first-letter {
    float: left;
    font-size: 66px;
    line-height: 0.78;
    font-weight: 800;
    color: var(--thm-primary);
    margin: 8px 14px 0 0;
}

/* quick facts */
.vg-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 6px 0 40px;
}

.vg-fact {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 16px;
    background: var(--thm-light-bg);
    border: 1px solid var(--thm-border);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.vg-fact:hover {
    transform: translateY(-4px);
    box-shadow: var(--thm-shadow-sm);
}

.vg-fact i {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    color: var(--thm-primary);
    font-size: 20px;
}

.vg-fact strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--thm-black);
    line-height: 1.1;
}

.vg-fact span {
    font-size: 13px;
    color: var(--thm-gray);
}

/* interactive highlights grid (anchor links) */
.vg-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 44px;
}

.vg-highlight {
    display: block;
    padding: 26px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--thm-border);
    text-align: center;
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease),
        background 0.4s var(--thm-ease), border-color 0.4s var(--thm-ease);
}

.vg-highlight i {
    font-size: 26px;
    color: var(--thm-primary);
    transition: color 0.4s var(--thm-ease), transform 0.4s var(--thm-ease);
}

.vg-highlight h5 {
    margin: 14px 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: var(--thm-black);
}

.vg-highlight p {
    margin: 0;
    font-size: 13px;
    color: var(--thm-gray);
}

.vg-highlight:hover {
    transform: translateY(-6px);
    border-color: transparent;
    background: var(--thm-grad);
    box-shadow: var(--thm-shadow-lg);
}

.vg-highlight:hover i {
    color: #fff;
    transform: scale(1.12);
}

.vg-highlight:hover h5,
.vg-highlight:hover p {
    color: #fff;
}

/* pull quote */
.vg-pullquote {
    position: relative;
    margin: 42px 0;
    padding: 28px 30px 28px 42px;
    border-left: 4px solid var(--thm-primary);
    border-radius: 0 16px 16px 0;
    background: var(--thm-light-bg);
    font-size: 22px;
    line-height: 1.5;
    font-weight: 700;
    font-style: italic;
    color: var(--thm-black);
}

.vg-pullquote:before {
    content: "\201C";
    position: absolute;
    left: 14px;
    top: 6px;
    font-size: 48px;
    line-height: 1;
    color: rgba(var(--thm-primary-rgb), 0.30);
    font-style: normal;
}

/* transport comparison cards */
.vg-transport {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 26px;
}

.vg-transport-card {
    position: relative;
    padding: 30px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.vg-transport-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.vg-transport-card.featured {
    border-color: transparent;
    background: var(--thm-grad-dark);
}

.vg-transport-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 50px;
    background: var(--thm-accent);
    color: #fff;
}

.vg-transport-badge.vg-badge-value {
    background: var(--thm-primary);
}

.vg-transport-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    background: rgba(var(--thm-primary-rgb), 0.10);
    color: var(--thm-primary);
}

.vg-transport-card.featured .vg-transport-icon {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.vg-transport-card h5 {
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 6px;
}

.vg-transport-price {
    font-size: 24px;
    font-weight: 800;
    color: var(--thm-primary);
    margin-bottom: 16px;
}

.vg-transport-card.featured h5,
.vg-transport-card.featured .vg-transport-price {
    color: #fff;
}

.vg-transport-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vg-transport-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: 14px;
    border-top: 1px solid var(--thm-border);
    color: var(--thm-gray);
}

.vg-transport-card li i {
    color: var(--thm-primary);
    font-size: 13px;
    width: 16px;
    text-align: center;
}

.vg-transport-card.featured li {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.85);
}

.vg-transport-card.featured li i {
    color: #fff;
}

/* sticky sidebar: table of contents + island info.
   position:sticky is broken by the theme's `.page-wrapper { overflow:hidden }`
   ancestor, so re-enable normal overflow on the guide page (scoped via :has). */
body:has(.vg-section) .page-wrapper {
    overflow: visible;
}

.vg-sidebar {
    position: sticky;
    /* enough to clear the sticky header (~75px) that appears on scroll so the
       "In This Guide" title isn't hidden, while trimming the old 100px gap */
    top: 56px;
}

.vg-toc {
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: 18px;
    padding: 26px 24px;
    margin-bottom: 24px;
    box-shadow: var(--thm-shadow-sm);
}

.vg-toc h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 16px;
}

.vg-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vg-toc a {
    display: block;
    padding: 9px 14px;
    margin-bottom: 2px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    color: var(--thm-gray);
    font-weight: 700;
    font-size: 14px;
}

.vg-toc a:hover {
    background: var(--thm-light-bg);
    color: var(--thm-black);
}

.vg-toc a.active {
    background: rgba(var(--thm-primary-rgb), 0.10);
    color: var(--thm-primary-deep);
    border-left-color: var(--thm-primary);
}

.vg-info-card {
    background: var(--thm-grad-dark);
    border-radius: 18px;
    padding: 28px 26px;
    color: #fff;
    box-shadow: var(--thm-shadow);
}

.vg-info-card h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 18px;
}

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

.vg-info-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vg-info-list li:last-child {
    border-bottom: 0;
}

.vg-info-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 15px;
}

.vg-info-label {
    flex: 1;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.vg-info-value {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

/* reveal-on-scroll — gated by .vg-anim on <html> so no-JS shows everything */
.vg-anim .vg-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--thm-ease), transform 0.7s var(--thm-ease);
}

.vg-anim .vg-reveal.vg-in {
    opacity: 1;
    transform: none;
}

@media (max-width: 991px) {
    .vg-sidebar {
        position: static;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .vg-facts,
    .vg-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .vg-transport {
        grid-template-columns: 1fr;
    }

    .vg-block h3 {
        font-size: 25px;
    }
}

/* ----------  22. Contact page  ---------- */
.contact-section {
    padding: 72px 0 90px;
}

/* quick contact-method cards */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}

.contact-card {
    padding: 28px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.contact-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 21px;
    color: var(--thm-primary);
    background: rgba(var(--thm-primary-rgb), 0.10);
    transition: background 0.4s var(--thm-ease), color 0.4s var(--thm-ease),
        transform 0.4s var(--thm-ease);
}

.contact-card:hover .contact-card-icon {
    background: var(--thm-grad);
    color: #fff;
    transform: rotate(-6deg);
}

/* CSS horizontal flip — mirrors the phone handset icon consistently in both
   language versions (replaces the fa-phone-flip icon variant). */
.icon-flip-h {
    transform: scaleX(-1);
}

.contact-card span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--thm-gray);
    margin-bottom: 5px;
}

.contact-card a,
.contact-card p {
    display: block;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--thm-black);
    word-break: break-word;
}

.contact-card a:hover {
    color: var(--thm-primary);
}

/* shared eyebrow */
.contact-eyebrow {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--thm-primary-deep);
}

.contact-eyebrow:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--thm-grad-soft);
    transform: translateY(-50%);
}

/* form card */
.contact-form-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: 22px;
    padding: 40px;
    box-shadow: var(--thm-shadow);
}

.contact-form-card h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 12px;
}

.contact-form-card > p {
    margin-bottom: 26px;
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 54px;
    padding: 0 18px;
    margin-bottom: 16px;
    border: 1px solid var(--thm-border);
    border-radius: 12px;
    background: var(--thm-light-bg);
    font-size: 15px;
    font-family: var(--thm-font);
    color: var(--thm-black);
    outline: none;
    transition: border-color 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease),
        background 0.3s var(--thm-ease);
}

.contact-form textarea.input-text {
    height: 150px;
    padding: 14px 18px;
    resize: vertical;
}

.contact-form .input-text:focus {
    border-color: var(--thm-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--thm-primary-rgb), 0.14);
}

.contact-form .input-text::placeholder {
    color: #94a4ac;
}

.contact-form .btn-primary {
    margin-top: 6px;
    border: 0;
    cursor: pointer;
}

.contact-form .result {
    font-size: 14px;
    font-weight: 600;
    color: var(--thm-primary-deep);
}

/* dark info card */
.contact-info-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 22px;
    padding: 40px;
    color: #fff;
    background: var(--thm-grad-dark);
    box-shadow: var(--thm-shadow);
}

.contact-info-card:after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 34px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.contact-info-card .contact-eyebrow {
    color: var(--thm-primary-light);
}

.contact-info-card h3 {
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 14px;
}

.contact-info-card > p {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 24px;
}

.contact-inline-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-inline-link:hover {
    color: var(--thm-primary-light);
}

.contact-info-list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.contact-info-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.contact-info-list i {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 15px;
}

.contact-info-list .ci-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.contact-info-list .ci-value,
.contact-info-list a {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.contact-info-list a:hover {
    color: var(--thm-primary-light);
}

.contact-info-socials {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
}

.contact-info-socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: background 0.3s var(--thm-ease), transform 0.3s var(--thm-ease);
}

.contact-info-socials a:hover {
    background: var(--thm-grad);
    color: #fff;
    transform: translateY(-3px);
}

/* map */
.contact-map-section {
    padding-bottom: 90px;
}

.contact-map {
    border-radius: 22px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow);
}

.contact-map iframe {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
}

@media (max-width: 991px) {
    .contact-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .contact-form-card,
    .contact-info-card {
        padding: 28px;
    }

    .contact-map iframe {
        height: 320px;
    }
}

@media (max-width: 479px) {
    .contact-cards {
        grid-template-columns: 1fr;
    }
}

/* ----------  23. Directory page  ---------- */
.dir-section {
    padding: 72px 0 40px;
}

/* live search */
.dir-search {
    position: relative;
    max-width: 540px;
    margin: 8px auto 56px;
}

.dir-search i {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--thm-primary);
    font-size: 16px;
}

.dir-search input {
    width: 100%;
    height: 58px;
    padding: 0 22px 0 52px;
    border-radius: 50px;
    border: 1px solid var(--thm-border);
    background: #fff;
    font-size: 15px;
    font-family: var(--thm-font);
    color: var(--thm-black);
    outline: none;
    box-shadow: var(--thm-shadow-sm);
    transition: border-color 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease);
}

.dir-search input:focus {
    border-color: var(--thm-primary);
    box-shadow: 0 0 0 4px rgba(var(--thm-primary-rgb), 0.14);
}

.dir-block {
    margin-bottom: 56px;
}

.dir-heading {
    font-size: 32px;
    margin: 10px 0 28px;
}

/* department cards */
.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

.dir-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease),
        border-color 0.4s var(--thm-ease);
}

.dir-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--thm-shadow-lg);
}

.dir-card-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--thm-primary);
    background: rgba(var(--thm-primary-rgb), 0.10);
    transition: background 0.4s var(--thm-ease), color 0.4s var(--thm-ease);
}

.dir-card:hover .dir-card-icon {
    background: var(--thm-grad);
    color: #fff;
}

.dir-card-body {
    min-width: 0;
}

.dir-card-body h5 {
    font-size: 17px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 10px;
}

.dir-line {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--thm-gray);
    word-break: break-word;
}

.dir-line i {
    flex-shrink: 0;
    width: 14px;
    text-align: center;
    font-size: 12px;
    color: var(--thm-primary);
}

.dir-line:hover {
    color: var(--thm-primary);
}

.dir-muted,
.dir-muted i {
    color: #9aa7ad;
}

/* filter chips */
.dir-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.dir-chip {
    padding: 9px 20px;
    border-radius: 50px;
    border: 1px solid var(--thm-border);
    background: #fff;
    color: var(--thm-gray);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease),
        border-color 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease);
}

.dir-chip:hover {
    border-color: var(--thm-primary);
    color: var(--thm-primary-deep);
}

.dir-chip.active {
    background: var(--thm-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px -10px rgba(var(--thm-primary-rgb), 0.6);
}

/* public-institution cards */
.dir-grid-offices {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.dir-office {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.dir-office:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.dir-office-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--thm-light-bg);
}

.dir-office-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--thm-ease);
}

.dir-office:hover .dir-office-media img {
    transform: scale(1.08);
}

.dir-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #fff;
    background: rgba(10, 42, 67, 0.62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.dir-office-body {
    padding: 18px 20px 22px;
}

.dir-office-body h5 {
    font-size: 17px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 8px;
}

.dir-noresults {
    text-align: center;
    padding: 30px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--thm-gray);
}

/* client-side filtering */
.dir-hidden {
    display: none !important;
}

.dir-map-section {
    padding-bottom: 90px;
}

@media (max-width: 575px) {
    .dir-heading {
        font-size: 26px;
    }
}

/* ----------  24. Organizational structure  ---------- */
.org-section {
    padding: 80px 0 100px;
}

.org-intro {
    max-width: 720px;
    margin: 0 auto;
}

.org-section .section-title-box {
    margin-bottom: 50px;
}

/* council tree */
.org-tree {
    max-width: 900px;
    margin: 0 auto;
}

.org-level {
    display: flex;
    justify-content: center;
}

.org-level-row {
    gap: 26px;
    flex-wrap: wrap;
}

.org-connector {
    width: 3px;
    height: 40px;
    margin: 0 auto;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--thm-primary), rgba(var(--thm-primary-rgb), 0.2));
}

.org-connector-lg {
    height: 56px;
    margin: 12px auto 40px;
}

/* person card */
.org-person {
    display: block;
    width: 234px;
    padding: 26px 22px;
    text-align: center;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease),
        border-color 0.4s var(--thm-ease);
}

.org-person:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--thm-shadow-lg);
}

.org-person-photo {
    width: 92px;
    height: 92px;
    margin: 0 auto 16px;
    padding: 4px;
    border-radius: 50%;
    background: var(--thm-grad);
}

.org-person-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
}

.org-person h5 {
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 8px;
}

.org-person:hover h5 {
    color: var(--thm-primary-deep);
}

.org-role {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--thm-primary-deep);
    background: rgba(var(--thm-primary-rgb), 0.10);
}

/* president emphasis */
.org-person-lead {
    width: 270px;
    padding: 32px 26px;
    box-shadow: var(--thm-shadow);
}

.org-person-lead .org-person-photo {
    width: 116px;
    height: 116px;
}

.org-person-lead .org-role {
    color: #fff;
    background: var(--thm-grad);
}

/* secretariat */
.org-sec {
    max-width: 1040px;
    margin: 0 auto;
}

.org-sec-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 34px;
    margin-bottom: 30px;
    border-radius: 20px;
    color: #fff;
    background: var(--thm-grad-dark);
    box-shadow: var(--thm-shadow);
}

.org-sec-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: rgba(255, 255, 255, 0.12);
}

.org-sec-text h4 {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
}

.org-sec-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

.org-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.org-dept {
    padding: 28px 26px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.org-dept:hover {
    transform: translateY(-5px);
    box-shadow: var(--thm-shadow-lg);
}

.org-dept-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
    color: var(--thm-primary);
    background: rgba(var(--thm-primary-rgb), 0.10);
    transition: background 0.4s var(--thm-ease), color 0.4s var(--thm-ease),
        transform 0.4s var(--thm-ease);
}

.org-dept:hover .org-dept-icon {
    background: var(--thm-grad);
    color: #fff;
    transform: rotate(-6deg);
}

.org-dept h5 {
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
    margin-bottom: 8px;
}

.org-dept p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--thm-gray);
}

/* official chart card */
.org-chart-card {
    margin-top: 70px;
    padding: 36px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow);
}

.org-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.org-chart-head h3 {
    font-size: 26px;
    font-weight: 800;
    color: var(--thm-black);
    margin: 6px 0 0;
}

.org-chart-head .btn-primary i {
    margin-right: 8px;
}

.org-chart-img {
    display: block;
    position: relative;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--thm-border);
    background: #fff;
    text-align: center;
}

.org-chart-img img {
    max-width: 100%;
    height: auto;
}

.org-chart-img:after {
    content: "\f00e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    background: rgba(10, 42, 67, 0.55);
    color: #fff;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s var(--thm-ease);
}

.org-chart-img:hover:after {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 575px) {
    .org-sec-head {
        flex-direction: column;
        text-align: center;
    }

    .org-chart-card {
        padding: 22px;
    }
}

/* ----------  25. Councilor profile  ---------- */
.councilor-section {
    padding: 80px 0;
}

.councilor-photo {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--thm-shadow-lg);
}

.councilor-photo img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.councilor-photo:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 42, 67, 0.6), transparent 42%);
    pointer-events: none;
}

.councilor-photo-tag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 1;
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: var(--thm-grad);
    box-shadow: 0 12px 26px -10px rgba(var(--thm-primary-rgb), 0.7);
}

.councilor-name {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--thm-black);
    margin: 6px 0 14px;
}

.councilor-tagline {
    margin-bottom: 22px;
    padding-left: 18px;
    border-left: 3px solid var(--thm-primary);
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    color: var(--thm-primary-deep);
}

.councilor-focus {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.councilor-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    color: var(--thm-primary-deep);
    background: rgba(var(--thm-primary-rgb), 0.10);
}

.councilor-tag i {
    font-size: 10px;
}

.councilor-bio p {
    line-height: 1.9;
    margin-bottom: 28px;
}

.councilor-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.councilor-contact .btn-primary i {
    margin-right: 8px;
}

.councilor-socials {
    display: flex;
    gap: 10px;
}

.councilor-socials a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--thm-border);
    color: var(--thm-black);
    box-shadow: var(--thm-shadow-sm);
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease),
        border-color 0.3s var(--thm-ease), transform 0.3s var(--thm-ease);
}

.councilor-socials a:hover {
    background: var(--thm-grad);
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
}

@media (max-width: 575px) {
    .councilor-name {
        font-size: 30px;
    }
}

/* generic "Our Commitment" filler section (reuses .wwd-card) */
.values-section {
    padding: 80px 0;
    background: var(--thm-light-bg);
}

.values-section .section-title-box {
    margin-bottom: 44px;
}

/* ----------  26. Service / forms pages  ---------- */
.svc-section {
    padding: 72px 0 90px;
}

.svc-head {
    margin-bottom: 30px;
}

.svc-head h2 {
    margin: 6px 0 12px;
    font-size: 32px;
    font-weight: 800;
    color: var(--thm-black);
}

.svc-head p {
    max-width: 640px;
    margin: 0;
    color: var(--thm-gray);
}

/* collapsible groups */
.svc-group {
    margin-bottom: 16px;
    border: 1px solid var(--thm-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--thm-shadow-sm);
}

.svc-group-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border: 0;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s var(--thm-ease);
}

.svc-group-head:hover {
    background: var(--thm-light-bg);
}

.svc-group-title {
    flex: 1;
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
}

.svc-group-meta {
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--thm-primary-deep);
    background: rgba(var(--thm-primary-rgb), 0.10);
}

.svc-group-head > i {
    font-size: 14px;
    color: var(--thm-primary);
    transition: transform 0.3s var(--thm-ease);
}

.svc-group.is-open .svc-group-head > i {
    transform: rotate(180deg);
}

/* JS-enabled collapse (no-JS leaves everything open) */
.svc-groups.js-on .svc-group-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--thm-ease);
}

.svc-groups.js-on .svc-group.is-open .svc-group-body {
    max-height: 2000px;
}

/* document rows */
.svc-doc {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 24px;
    border-top: 1px solid var(--thm-border);
    transition: background 0.3s var(--thm-ease);
}

.svc-doc:hover {
    background: var(--thm-light-bg);
}

.svc-doc-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: var(--thm-primary);
    background: rgba(var(--thm-primary-rgb), 0.10);
}

.svc-ext-pdf {
    color: #e3342f;
    background: rgba(227, 52, 47, 0.10);
}

.svc-ext-doc,
.svc-ext-docx {
    color: #2b6cb0;
    background: rgba(43, 108, 176, 0.10);
}

.svc-ext-xls,
.svc-ext-xlsx {
    color: #1f8a52;
    background: rgba(31, 138, 82, 0.10);
}

.svc-doc-info {
    flex: 1;
    min-width: 0;
}

.svc-doc-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--thm-black);
}

.svc-doc-title-dv {
    display: block;
    margin-top: 2px;
    font-family: "Faruma", var(--thm-font);
    direction: rtl;
    font-size: 15px;
    line-height: 1.7;
    color: var(--thm-gray);
}

.svc-doc-meta {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--thm-gray);
}

.svc-doc-dl {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--thm-light-bg);
    color: var(--thm-black);
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease),
        transform 0.3s var(--thm-ease);
}

.svc-doc:hover .svc-doc-dl {
    background: var(--thm-grad);
    color: #fff;
    transform: translateY(-2px);
}

/* empty state */
.svc-empty {
    padding: 50px 30px;
    text-align: center;
    color: var(--thm-gray);
    border: 1px dashed var(--thm-border);
    border-radius: 16px;
    background: var(--thm-light-bg);
}

.svc-empty i {
    display: block;
    margin-bottom: 14px;
    font-size: 38px;
    color: var(--thm-primary);
    opacity: 0.7;
}

.svc-empty p {
    margin: 0;
}

/* sidebar — services list */
.sidebar-widget-list-title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
}

.sidebar-widget-list-inner li {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    background: var(--thm-light-bg);
    transition: transform 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease),
        background 0.3s var(--thm-ease), border-color 0.3s var(--thm-ease);
}

.sidebar-widget-list-inner li:before {
    display: none;
}

.sidebar-widget-list-inner li:hover {
    transform: translateX(4px);
    background: #fff;
    border-color: var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
}

.sidebar-widget-list-inner li a {
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
}

.sidebar-widget-list-inner li.current {
    background: var(--thm-grad);
    border-color: transparent;
}

.sidebar-widget-list-inner li.current:hover {
    transform: none;
    box-shadow: none;
}

.sidebar-widget-list-inner li.current a,
.sidebar-widget-list-inner li.current a i {
    color: #fff;
}

/* sidebar — "Get Any Help?" card, brought on-brand */
.sidebar-widget.sidebar-widget-card {
    position: relative;
    overflow: hidden;
    padding: 36px 32px;
    border-radius: 18px;
    background: var(--thm-grad-dark);
    box-shadow: var(--thm-shadow);
}

.sidebar-widget.sidebar-widget-card:after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -80px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 30px solid rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.sidebar-widget-card > * {
    position: relative;
    z-index: 1;
}

.sidebar-widget-card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-widget-card-icon i {
    font-size: 28px;
    color: #fff;
}

.sidebar-widget-card-content h3 > a {
    font-size: 24px;
    font-weight: 800;
}

.sidebar-widget-card-content p {
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.sidebar-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 50px;
    background: #fff;
    color: var(--thm-black);
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease),
        color 0.3s var(--thm-ease);
}

.sidebar-card-btn:hover {
    color: var(--thm-primary-deep);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.45);
}

/* ----------  27. Meet the Council carousel  ---------- */
.wdc-intro {
    max-width: 760px;
    margin: 6px auto 0;
    color: var(--thm-gray);
    line-height: 1.8;
}

.portfolio-section .portfolio-card {
    display: block;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--thm-shadow-sm);
}

.portfolio-section .portfolio-card-img {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.portfolio-section .portfolio-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(1) contrast(1.02);
    transition: transform 0.7s var(--thm-ease), filter 0.6s var(--thm-ease);
}

/* initials avatar for members without a photo (keeps cards uniform) */
.portfolio-section .portfolio-card-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--thm-grad-dark);
    color: #fff;
    font-size: 54px;
    font-weight: 800;
    letter-spacing: 1px;
}

.portfolio-section .portfolio-card:hover .portfolio-card-img img {
    transform: scale(1.06);
    filter: grayscale(1) brightness(1.06);
}

/* gradient scrim for legible name/role */
.portfolio-section .portfolio-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(8, 32, 52, 0.92) 4%,
            rgba(8, 32, 52, 0.45) 32%,
            transparent 58%);
    transition: opacity 0.4s var(--thm-ease);
}

/* always-visible meta overlay (was hover-only scale) */
.portfolio-section .portfolio-card-meta {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    padding: 22px 22px;
    text-align: left;
}

.portfolio-section .portfolio-card-text {
    display: inline-block;
    margin-bottom: 9px;
    padding: 5px 14px;
    border-radius: 50px;
    background: var(--thm-grad);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.portfolio-section .portfolio-card-title {
    display: block;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    transition: color 0.3s var(--thm-ease);
}

.portfolio-section .portfolio-card:hover .portfolio-card-title {
    color: var(--thm-primary-light);
}

/* ----------  28. Media Center (notices + article)  ---------- */
.notice-section {
    padding: 72px 0 90px;
}

.notice-list {
    max-width: 860px;
    margin: 0 auto;
}

.notice-list-head {
    text-align: center;
    margin-bottom: 40px;
}

.notice-list-head h2 {
    margin: 6px 0 12px;
    font-size: 32px;
    font-weight: 800;
    color: var(--thm-black);
}

.notice-list-head p {
    margin: 0;
    color: var(--thm-gray);
}

.notice-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 18px 24px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: 16px;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.35s var(--thm-ease), box-shadow 0.35s var(--thm-ease),
        border-color 0.35s var(--thm-ease);
}

.notice-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--thm-shadow);
}

.notice-date {
    flex-shrink: 0;
    width: 74px;
    padding: 12px 0;
    text-align: center;
    line-height: 1.15;
    border-radius: 12px;
    background: var(--thm-grad);
    color: #fff;
}

.notice-day {
    display: block;
    font-size: 26px;
    font-weight: 800;
}

.notice-month {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.92;
}

.notice-body {
    flex: 1;
    min-width: 0;
}

.notice-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--thm-black);
}

.notice-card:hover .notice-title {
    color: var(--thm-primary-deep);
}

.notice-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--thm-gray);
}

.notice-link i {
    margin-left: 5px;
    font-size: 12px;
}

.notice-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--thm-light-bg);
    color: var(--thm-black);
    transition: background 0.35s var(--thm-ease), color 0.35s var(--thm-ease);
}

.notice-card:hover .notice-arrow {
    background: var(--thm-grad);
    color: #fff;
}

.notice-empty {
    max-width: 540px;
    margin: 30px auto;
    padding: 50px 30px;
    text-align: center;
    border: 1px dashed var(--thm-border);
    border-radius: 16px;
    background: var(--thm-light-bg);
}

.notice-empty i {
    display: block;
    margin-bottom: 14px;
    font-size: 38px;
    color: var(--thm-primary);
    opacity: 0.7;
}

.notice-empty h4 {
    color: var(--thm-black);
    font-weight: 800;
}

.notice-empty p {
    margin: 0;
    color: var(--thm-gray);
}

@media (max-width: 575px) {
    .notice-card {
        gap: 14px;
        padding: 14px;
    }

    .notice-arrow {
        display: none;
    }
}

/* news listing cards */
.news-section {
    padding: 72px 0 90px;
}

.news-section .notice-list-head {
    margin-bottom: 44px;
}

.news-pagination {
    margin-top: 10px;
}

.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

/* image area doubles as a placeholder (icon shows if the image is missing) */
.news-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #e7f3f6, #d4ecf1);
}

.news-card-img::after {
    content: "\f1ea";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: rgba(var(--thm-primary-rgb), 0.35);
}

.news-card-img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--thm-ease);
}

.news-card:hover .news-card-img img {
    transform: scale(1.06);
}

.news-card-date {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 14px;
    padding: 6px 14px;
    border-radius: 50px;
    background: var(--thm-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.news-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px;
}

.news-card-title {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--thm-black);
    transition: color 0.3s var(--thm-ease);
}

.news-card:hover .news-card-title {
    color: var(--thm-primary-deep);
}

.news-card-excerpt {
    flex: 1;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--thm-gray);
}

.news-card-more {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--thm-primary-deep);
}

.news-card-more i {
    margin-left: 6px;
    transition: margin 0.3s var(--thm-ease);
}

.news-card:hover .news-card-more i {
    margin-left: 10px;
}

/* article / detail (show) */
.article-section {
    padding: 72px 0 90px;
}

.article-hero {
    margin: 0 0 30px;
    border-radius: var(--thm-radius);
    overflow: hidden;
    box-shadow: var(--thm-shadow);
}

.article-hero-top {
    margin-bottom: 32px;
}

.article-hero img {
    width: 100%;
    display: block;
}

/* placeholder shown when the hero image is missing/broken */
.article-hero.is-empty {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #e7f3f6, #d4ecf1);
}

.article-hero.is-empty::after {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: rgba(var(--thm-primary-rgb), 0.35);
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.article-cat {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 50px;
    background: var(--thm-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.article-cat:hover {
    color: #fff;
}

.article-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--thm-gray);
}

.article-date i {
    margin-right: 6px;
    color: var(--thm-primary);
}

.article-title {
    margin-bottom: 24px;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
    color: var(--thm-black);
}

.article-edit {
    margin-bottom: 24px;
}

.article-content {
    font-size: 16px;
    line-height: 1.9;
    color: #44525b;
}

.article-content p {
    margin-bottom: 18px;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    margin: 30px 0 14px;
    font-weight: 800;
    color: var(--thm-black);
}

.article-content img {
    max-width: 100%;
    height: auto;
    margin: 18px 0;
    border-radius: 14px;
}

.article-content ul,
.article-content ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.article-content li {
    margin-bottom: 8px;
}

.article-content a {
    color: var(--thm-primary-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-files,
.article-gallery {
    margin-top: 42px;
}

.article-files h3,
.article-gallery h3 {
    margin-bottom: 18px;
    font-size: 22px;
    font-weight: 800;
    color: var(--thm-black);
}

.article-file {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    margin-bottom: 12px;
    border: 1px solid var(--thm-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease);
}

.article-file:hover {
    transform: translateY(-2px);
    box-shadow: var(--thm-shadow);
}

.article-file-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--thm-primary);
    background: rgba(var(--thm-primary-rgb), 0.10);
}

.article-file-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    color: var(--thm-black);
    word-break: break-word;
}

.article-file-dl {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--thm-light-bg);
    color: var(--thm-black);
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease);
}

.article-file:hover .article-file-dl {
    background: var(--thm-grad);
    color: #fff;
}

.article-gallery .item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #e7f3f6, #d4ecf1);
}

.article-gallery .item::after {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: rgba(var(--thm-primary-rgb), 0.35);
}

.article-gallery .item a {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.article-gallery .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 42px;
    font-weight: 700;
    color: var(--thm-primary-deep);
    transition: gap 0.3s var(--thm-ease), color 0.3s var(--thm-ease);
}

.article-back:hover {
    gap: 12px;
    color: var(--thm-primary);
}

@media (max-width: 575px) {
    .article-title {
        font-size: 27px;
    }
}

/* "Latest in …" sticky sidebar on the detail page */
body:has(.article-section) .page-wrapper {
    overflow: visible;
}

.article-aside {
    position: sticky;
    top: 100px;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: 18px;
    box-shadow: var(--thm-shadow-sm);
}

.article-aside-title {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--thm-border);
    font-size: 17px;
    font-weight: 800;
    color: var(--thm-black);
}

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

.article-related li + li {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--thm-border);
}

.ar-date {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--thm-primary-deep);
}

.ar-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--thm-black);
    transition: color 0.3s var(--thm-ease);
}

.article-related a:hover .ar-title {
    color: var(--thm-primary);
}

.article-aside-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--thm-primary-deep);
    transition: gap 0.3s var(--thm-ease), color 0.3s var(--thm-ease);
}

.article-aside-all:hover {
    gap: 11px;
    color: var(--thm-primary);
}

@media (max-width: 991px) {
    .article-aside {
        position: static;
        margin-top: 44px;
    }
}

/* ----------  29. Plan / document pages (devplan, landuse, finance)  ---------- */
.plan-section {
    padding: 72px 0 90px;
}

.plan-head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.plan-head h2 {
    margin: 6px 0 14px;
    font-size: 32px;
    font-weight: 800;
    color: var(--thm-black);
}

.plan-head p {
    margin: 0 0 24px;
    line-height: 1.8;
    color: var(--thm-gray);
}

.plan-head .btn-primary i,
.doc-card .btn-primary i,
.doc-download .btn-primary i {
    margin-right: 8px;
}

/* embedded PDF viewer */
.plan-viewer {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow);
    background: #fff;
}

.plan-viewer iframe {
    display: block;
    width: 100%;
    height: 760px;
    border: 0;
}

/* land-use content column */
.plan-content-title {
    margin: 6px 0 16px;
    font-size: 30px;
    font-weight: 800;
    color: var(--thm-black);
}

.plan-content > p {
    line-height: 1.9;
    color: #44525b;
}

.plan-callout {
    display: flex;
    gap: 16px;
    margin: 26px 0;
    padding: 22px 26px;
    border-radius: var(--thm-radius);
    border-left: 4px solid var(--thm-primary);
    background: var(--thm-light-bg);
}

.plan-callout i {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--thm-primary);
}

.plan-callout p {
    margin: 0;
    line-height: 1.7;
    color: var(--thm-black);
    font-weight: 500;
}

/* plan image figure (lightbox) */
.plan-figure {
    position: relative;
    display: block;
    margin: 30px 0 0;
    border-radius: var(--thm-radius);
    overflow: hidden;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
}

.plan-figure img {
    display: block;
    width: 100%;
    transition: transform 0.7s var(--thm-ease);
}

.plan-figure:hover img {
    transform: scale(1.03);
}

.plan-figure::after {
    content: "\f00e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background: rgba(10, 42, 67, 0.55);
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s var(--thm-ease);
}

.plan-figure:hover::after {
    opacity: 1;
}

/* horizontal download bar */
.doc-download {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding: 18px 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease);
}

.doc-download:hover {
    transform: translateY(-3px);
    box-shadow: var(--thm-shadow);
}

.doc-download-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #e3342f;
    background: rgba(227, 52, 47, 0.10);
}

.doc-download-info {
    flex: 1;
    min-width: 0;
}

.doc-download-info h5 {
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 800;
    color: var(--thm-black);
}

.doc-download-info span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--thm-gray);
}

.doc-download .btn-primary {
    flex-shrink: 0;
}

/* document card grid (finance) */
.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.doc-card {
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.doc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.doc-card-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #e3342f;
    background: rgba(227, 52, 47, 0.10);
}

.doc-card h3 {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--thm-black);
}

.doc-card-meta {
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--thm-gray);
}

.doc-card .btn-primary {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 767px) {
    .plan-viewer iframe {
        height: 520px;
    }

    .doc-download {
        flex-wrap: wrap;
    }
}

/* ----------  29b. Finance page (transparency highlights + annual reports)  ---------- */
.fin-section {
    padding: 72px 0 90px;
}

.fin-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin: 0 0 58px;
}

.fin-feature {
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: var(--thm-radius);
    padding: 30px 26px;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.35s var(--thm-ease), box-shadow 0.35s var(--thm-ease);
}

.fin-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--thm-shadow);
}

.fin-feature-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--thm-primary-deep);
    background: rgba(var(--thm-primary-rgb), 0.10);
    margin-bottom: 18px;
}

.fin-feature h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
    margin: 0 0 8px;
}

.fin-feature p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--thm-gray);
    margin: 0;
}

.fin-reports-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--thm-black);
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--thm-border);
}

.fin-report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
}

.fin-report {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 28px;
    border-radius: var(--thm-radius);
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    overflow: hidden;
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.fin-report::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background: var(--thm-border);
}

.fin-report:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.fin-report.is-featured {
    border-color: rgba(var(--thm-primary-rgb), 0.4);
}

.fin-report.is-featured::before {
    height: 5px;
    background: var(--thm-grad);
}

.fin-report-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.fin-report-icon {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #e3342f;
    background: rgba(227, 52, 47, 0.10);
}

.fin-report-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #fff;
    background: var(--thm-grad-accent);
    padding: 5px 13px;
    border-radius: 999px;
}

.fin-report-year {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    color: var(--thm-black);
    margin-bottom: 10px;
}

.fin-report.is-featured .fin-report-year {
    color: var(--thm-primary-deep);
}

.fin-report h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--thm-black);
    margin: 0 0 6px;
}

.fin-report-meta {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--thm-gray);
    margin-bottom: 22px;
}

.fin-report .btn-primary {
    align-self: flex-start;
    margin-top: auto;
}

.fin-report .btn-primary i {
    margin-inline-end: 8px;
}

@media (max-width: 575px) {
    .fin-report-year {
        font-size: 30px;
    }
}

/* ----------  30. WDC member profile (women-oriented, rose accent)  ---------- */
.wdc-profile {
    --wdc: #d6447d;
    --wdc-deep: #a61e6b;
    --wdc-grad: linear-gradient(135deg, #ee6aa0 0%, #d6447d 55%, #a61e6b 100%);
    padding: 80px 0;
}

/* photo with a soft rose frame */
.wdc-photo {
    position: relative;
    padding: 4px;
    border-radius: 22px;
    background: var(--wdc-grad);
    box-shadow: var(--thm-shadow-lg);
}

.wdc-photo img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 18px;
}

.wdc-photo:before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 18px;
    background: linear-gradient(to top, rgba(140, 24, 82, 0.6), transparent 42%);
    pointer-events: none;
    z-index: 1;
}

.wdc-photo-tag {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 50px;
    background: #fff;
    color: var(--wdc-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 10px 24px -8px rgba(166, 30, 107, 0.5);
}

.wdc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--wdc-deep);
}

.wdc-name {
    margin-bottom: 14px;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--thm-black);
}

.wdc-tagline {
    margin-bottom: 22px;
    padding-left: 18px;
    border-left: 3px solid var(--wdc);
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    color: var(--wdc-deep);
}

.wdc-focus {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.wdc-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(214, 68, 125, 0.10);
    color: var(--wdc-deep);
    font-size: 13px;
    font-weight: 700;
}

.wdc-tag i {
    font-size: 10px;
    color: var(--wdc);
}

.wdc-bio p {
    margin-bottom: 28px;
    line-height: 1.9;
}

.wdc-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.wdc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 32px;
    border-radius: 50px;
    background: var(--wdc-grad);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 14px 26px -12px rgba(214, 68, 125, 0.65);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.wdc-btn:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 22px 38px -14px rgba(214, 68, 125, 0.7);
}

.wdc-socials {
    display: flex;
    gap: 10px;
}

.wdc-socials a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--thm-border);
    color: var(--thm-black);
    box-shadow: var(--thm-shadow-sm);
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease),
        border-color 0.3s var(--thm-ease), transform 0.3s var(--thm-ease);
}

.wdc-socials a:hover {
    background: var(--wdc-grad);
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
}

@media (max-width: 575px) {
    .wdc-name {
        font-size: 30px;
    }
}

/* ----------  31. Gallery (creative masonry)  ---------- */
.gallery-section {
    padding: 72px 0 90px;
}

.gallery-head {
    text-align: center;
    margin-bottom: 24px;
}

.gallery-head p {
    margin: 4px 0 0;
    color: var(--thm-gray);
}

/* admin upload card */
.gallery-upload {
    margin-bottom: 50px;
    padding: 30px 32px;
    border-radius: 18px;
    background: var(--thm-light-bg);
    border: 1px solid var(--thm-border);
}

.gallery-upload h4 {
    margin-bottom: 18px;
    font-size: 18px;
    font-weight: 800;
    color: var(--thm-black);
}

.gallery-upload h4 i {
    color: var(--thm-primary);
    margin-right: 8px;
}

.gallery-upload .btn-primary {
    margin-top: 18px;
}

.gallery-upload .btn-primary i {
    margin-right: 8px;
}

/* filter chips */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 36px;
}

.gallery-chip {
    padding: 9px 22px;
    border-radius: 50px;
    border: 1px solid var(--thm-border);
    background: #fff;
    color: var(--thm-gray);
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
    cursor: pointer;
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease),
        border-color 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease);
}

.gallery-chip:hover {
    border-color: var(--thm-primary);
    color: var(--thm-primary-deep);
}

.gallery-chip.active {
    background: var(--thm-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 20px -10px rgba(var(--thm-primary-rgb), 0.6);
}

/* masonry grid via CSS columns */
.gallery-grid {
    column-count: 3;
    column-gap: 18px;
}

.gallery-hidden {
    display: none;
}

.gallery-item {
    position: relative;
    break-inside: avoid;
    margin-bottom: 18px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--thm-shadow-sm);
    transition: box-shadow 0.4s var(--thm-ease), transform 0.4s var(--thm-ease);
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--thm-shadow-lg);
}

.gallery-link {
    display: block;
    position: relative;
}

.gallery-item img {
    width: 100%;
    display: block;
    transition: transform 0.8s var(--thm-ease);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/* placeholder for a missing thumbnail (keeps masonry from collapsing) */
.gallery-item.is-empty {
    min-height: 220px;
    background: linear-gradient(135deg, #e7f3f6, #d4ecf1);
}

.gallery-item.is-empty .gallery-link::before {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    font-size: 40px;
    color: rgba(var(--thm-primary-rgb), 0.35);
}

/* hover overlay */
.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    background: linear-gradient(to top, rgba(8, 32, 52, 0.88), rgba(8, 32, 52, 0.1) 50%, transparent);
    opacity: 0;
    transition: opacity 0.4s var(--thm-ease);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-cat {
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--thm-primary-light);
    transform: translateY(10px);
    transition: transform 0.4s var(--thm-ease);
}

.gallery-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    transform: translateY(10px);
    transition: transform 0.45s var(--thm-ease);
}

.gallery-item:hover .gallery-cat,
.gallery-item:hover .gallery-title {
    transform: translateY(0);
}

.gallery-zoom {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transform: scale(0.7) rotate(-15deg);
    transition: opacity 0.4s var(--thm-ease), transform 0.4s var(--thm-ease);
}

.gallery-item:hover .gallery-zoom {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.gallery-del {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(227, 52, 47, 0.92);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s var(--thm-ease);
}

.gallery-del:hover {
    transform: scale(1.1);
}

@media (max-width: 991px) {
    .gallery-grid {
        column-count: 2;
    }
}

@media (max-width: 575px) {
    .gallery-grid {
        column-count: 1;
    }
}

/* Homepage "Explore the Island" carousel — uniform cards + placeholder for missing images */
.portfolio-two-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

.portfolio-two-card .item {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(150deg, #0d3a55 0%, #0a5d76 100%);
}

.portfolio-two-card .item::after {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: rgba(255, 255, 255, 0.22);
}

.portfolio-two-card .item img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--thm-ease);
}

.portfolio-two-card:hover .item img {
    transform: scale(1.07);
}

/* refined content overlay — gradient fade with title + circular link button */
.portfolio-two-card-content {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 50px 22px 20px;
    background: linear-gradient(to top, rgba(7, 30, 48, 0.92) 6%, rgba(7, 30, 48, 0.38) 52%, transparent);
    transition: padding 0.4s var(--thm-ease);
}

.portfolio-two-card:hover .portfolio-two-card-content {
    padding-bottom: 24px;
}

.portfolio-two-card-content > a {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s var(--thm-ease);
}

.portfolio-two-card-content > a:hover {
    color: var(--thm-primary-light);
}

.portfolio-two-card-icon {
    flex-shrink: 0;
}

.portfolio-two-card-icon a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    background: var(--thm-grad);
    box-shadow: 0 10px 22px -8px rgba(var(--thm-primary-rgb), 0.85);
    transition: transform 0.35s var(--thm-ease), box-shadow 0.35s var(--thm-ease);
}

.portfolio-two-card-icon a:hover {
    transform: scale(1.12);
}

.portfolio-two-card-icon i {
    transition: transform 0.35s var(--thm-ease);
}

.portfolio-two-card:hover .portfolio-two-card-icon i {
    transform: translateX(3px);
}

/* WDC carousel cards use the rose accent (council carousel stays teal) */
.portfolio-section .portfolio-card-wdc .portfolio-card-text {
    background: linear-gradient(135deg, #ee6aa0 0%, #d6447d 55%, #a61e6b 100%);
}

.portfolio-section .portfolio-card-wdc:hover .portfolio-card-title {
    color: #f8a5c2;
}

/* ----------  32. Quick services ("How can we help")  ---------- */
.quick-services-section {
    padding: 92px 0 40px;
}

.quick-service-card {
    display: block;
    height: 100%;
    padding: 34px 28px 30px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease),
        border-color 0.4s var(--thm-ease);
}

.quick-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
    border-color: transparent;
}

.quick-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    border-radius: 16px;
    font-size: 24px;
    color: var(--thm-primary-deep);
    background: rgba(var(--thm-primary-rgb), 0.1);
    transition: background 0.4s var(--thm-ease), color 0.4s var(--thm-ease);
}

.quick-service-card:hover .quick-service-icon {
    background: var(--thm-grad);
    color: #fff;
}

.quick-service-card h5 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    color: var(--thm-black);
}

.quick-service-card p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--thm-gray);
}

.quick-service-link {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--thm-primary-deep);
}

.quick-service-link i {
    margin-left: 6px;
    transition: transform 0.3s var(--thm-ease);
}

.quick-service-card:hover .quick-service-link i {
    transform: translateX(5px);
}

/* ----------  33. Message from the President  ---------- */
.president-section {
    padding: 90px 0;
    background: var(--thm-light-bg);
}

.president-photo {
    position: relative;
    max-width: 430px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--thm-shadow-lg);
}

.president-photo img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.president-photo:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 42, 67, 0.6), transparent 42%);
    pointer-events: none;
    z-index: 1;
}

.president-photo.is-empty {
    aspect-ratio: 4 / 5;
    background: var(--thm-grad-dark);
}

.president-photo.is-empty::after {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: rgba(255, 255, 255, 0.22);
}

.president-badge {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 50px;
    background: var(--thm-grad);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.president-content {
    position: relative;
}

.president-quote-mark {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 96px;
    line-height: 0.6;
    color: rgba(var(--thm-primary-rgb), 0.18);
    margin: 8px 0 4px;
}

.president-message {
    margin: 0 0 26px;
    padding: 0;
    border: 0;
}

.president-message p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--thm-gray);
}

.president-sign {
    margin-bottom: 22px;
}

.president-name {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--thm-black);
}

.president-role {
    font-size: 14px;
    font-weight: 700;
    color: var(--thm-primary-deep);
}

.president-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--thm-primary-deep);
}

.president-readmore i {
    transition: transform 0.3s var(--thm-ease);
}

.president-readmore:hover {
    color: var(--thm-black);
}

.president-readmore:hover i {
    transform: translateX(5px);
}

/* ----------  34. Governance & transparency  ---------- */
.governance-section {
    padding: 84px 0;
}

.gov-card {
    height: 100%;
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
}

.gov-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--thm-border);
}

.gov-card-head h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--thm-black);
}

.gov-card-head h4 i {
    margin-right: 10px;
    color: var(--thm-primary);
}

.gov-viewall {
    font-size: 13px;
    font-weight: 700;
    color: var(--thm-primary-deep);
}

.gov-viewall:hover {
    text-decoration: underline;
}

.gov-next {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--thm-grad);
    color: #fff;
}

.gov-date {
    flex: 0 0 auto;
    text-align: center;
    line-height: 1;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.gov-day {
    display: block;
    font-size: 28px;
    font-weight: 800;
}

.gov-mon {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gov-next-body {
    flex: 1 1 auto;
}

.gov-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.gov-next-body h5 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.gov-next-body p {
    margin: 0;
    font-size: 13px;
    opacity: 0.92;
}

.gov-next-body p i {
    margin-right: 4px;
}

.gov-agenda {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    align-self: stretch;
    border-radius: 10px;
    background: #fff;
    color: var(--thm-primary-deep);
    font-size: 13px;
    font-weight: 800;
}

.gov-agenda:hover {
    color: var(--thm-black);
}

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

.gov-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--thm-border);
}

.gov-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gov-list-date {
    flex: 0 0 auto;
    min-width: 88px;
    font-size: 12px;
    font-weight: 700;
    color: var(--thm-primary-deep);
}

.gov-list-title {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 600;
    color: var(--thm-black);
}

.gov-dl {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--thm-primary-rgb), 0.1);
    color: var(--thm-primary-deep);
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease);
}

.gov-dl:hover {
    background: var(--thm-grad);
    color: #fff;
}

.gov-card-tenders {
    background: var(--thm-light-bg);
}

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

.gov-tender-list li {
    border-bottom: 1px solid var(--thm-border);
}

.gov-tender-list li:last-child {
    border-bottom: 0;
}

.gov-tender-list a {
    display: block;
    padding: 16px 0;
    transition: padding-left 0.3s var(--thm-ease);
}

.gov-tender-list li:first-child a {
    padding-top: 0;
}

.gov-tender-list li:last-child a {
    padding-bottom: 0;
}

.gov-tender-list a:hover {
    padding-left: 6px;
}

.gov-tender-list h6 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--thm-black);
}

.gov-tender-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gov-ref {
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(var(--thm-primary-rgb), 0.1);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--thm-primary-deep);
}

.gov-close {
    font-size: 12px;
    color: var(--thm-gray);
}

.gov-close i {
    margin-right: 4px;
    color: #d9534f;
}

@media (max-width: 575px) {
    .gov-next {
        flex-wrap: wrap;
    }

    .gov-agenda {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }
}

/* ----------  35. Funfact source / provenance  ---------- */
.funfact-source {
    margin: 40px 0 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
}

/* ----------  36. Office hours, map & subscribe  ---------- */
.office-contact-section {
    padding: 84px 0;
    background: var(--thm-light-bg);
}

.office-info {
    height: 100%;
    padding: 34px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
}

.office-hours {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.office-hours li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(var(--thm-primary-rgb), 0.07);
}

.office-hours li.is-closed {
    background: rgba(var(--thm-gray-rgb), 0.08);
}

.oh-day {
    font-size: 14px;
    font-weight: 700;
    color: var(--thm-black);
}

.oh-day i {
    margin-right: 8px;
    color: var(--thm-primary);
}

.office-hours li.is-closed .oh-day i {
    color: var(--thm-gray);
}

.oh-time {
    font-size: 14px;
    font-weight: 700;
    color: var(--thm-primary-deep);
}

.office-hours li.is-closed .oh-time {
    color: var(--thm-gray);
}

.office-meta {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.office-meta li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    font-size: 15px;
    color: var(--thm-gray);
}

.office-meta li i {
    margin-top: 3px;
    width: 18px;
    text-align: center;
    color: var(--thm-primary);
}

.office-meta a {
    color: var(--thm-gray);
}

.office-meta a:hover {
    color: var(--thm-primary-deep);
}

.office-directions {
    width: 100%;
}

.office-directions i {
    margin-right: 8px;
}

.office-subscribe {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--thm-border);
}

.office-subscribe-label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--thm-gray);
}

.office-subscribe-btns {
    display: flex;
    gap: 12px;
}

.subscribe-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease);
}

.subscribe-btn:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: var(--thm-shadow-sm);
}

.subscribe-wa {
    background: #25d366;
}

.subscribe-viber {
    background: #7360f2;
}

.office-map {
    height: 100%;
    min-height: 360px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-sm);
}

.office-map iframe {
    width: 100%;
    height: 100%;
    min-height: 360px;
    display: block;
    border: 0;
}

/* ----------  37. Affiliations strip  ---------- */
.affiliations-section {
    padding: 56px 0;
    background: #fff;
    border-top: 1px solid var(--thm-border);
}

.affiliations-caption {
    margin: 0 0 26px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--thm-gray);
}

.affiliations-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 48px;
}

.affiliation {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--thm-gray);
    filter: grayscale(1);
    opacity: 0.72;
    transition: opacity 0.35s var(--thm-ease), filter 0.35s var(--thm-ease), color 0.35s var(--thm-ease);
}

.affiliation {
    text-decoration: none;
}

.affiliation:hover {
    opacity: 1;
    filter: grayscale(0);
    color: var(--thm-primary-deep);
}

.affiliation img {
    height: 46px;
    width: auto;
    display: block;
}

.affiliation i {
    font-size: 26px;
    color: var(--thm-primary-deep);
}

.affiliation span {
    max-width: 190px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 575px) {
    .affiliations-row {
        gap: 20px 28px;
    }

    .affiliation span {
        font-size: 13px;
    }
}

/* ----------  38. Article social share  ---------- */
.article-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0;
    padding: 18px 0;
    border-top: 1px solid var(--thm-border);
    border-bottom: 1px solid var(--thm-border);
}

.article-share-label {
    margin-right: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--thm-black);
}

.article-share-label i {
    margin-right: 6px;
    color: var(--thm-primary);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--thm-primary-rgb), 0.1);
    color: var(--thm-primary-deep);
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.3s var(--thm-ease), background 0.3s var(--thm-ease),
        color 0.3s var(--thm-ease);
}

.share-btn:hover {
    transform: translateY(-3px);
    color: #fff;
}

.share-fb:hover {
    background: #1877f2;
}

.share-tw:hover {
    background: #000;
}

.share-wa:hover {
    background: #25d366;
}

.share-vb:hover {
    background: #7360f2;
}

.share-copy:hover {
    background: var(--thm-primary-deep);
}

.share-copy.copied {
    background: #2bbf7a;
    color: #fff;
}

/* ----------  39. Homepage — consistent section rhythm  ----------
   Normalises the very uneven theme paddings (120 / 111 / 150 / 30 …) to a
   single vertical rhythm. Scoped to .home-page so other pages are untouched. */
.home-page .quick-services-section,
.home-page .about-two-section,
.home-page .president-section,
.home-page .service-two-section,
.home-page .portfolio-two-section,
.home-page .governance-section,
.home-page .cta-five-section,
.home-page .blog-section,
.home-page .office-contact-section {
    padding-top: 90px;
    padding-bottom: 90px;
    margin-top: 0;
}

/* extra breathing room above the About section (after Quick Services) */
.home-page .about-two-section {
    margin-top: 104px;
}

.home-page .funfact-section {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}

.home-page .event-three-section .event-section-outer,
.home-page .cta-three .cta-three-inner {
    padding-top: 90px;
    padding-bottom: 90px;
}

.home-page .affiliations-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

@media (max-width: 767px) {

    .home-page .quick-services-section,
    .home-page .about-two-section,
    .home-page .president-section,
    .home-page .service-two-section,
    .home-page .portfolio-two-section,
    .home-page .governance-section,
    .home-page .cta-five-section,
    .home-page .blog-section,
    .home-page .office-contact-section,
    .home-page .event-three-section .event-section-outer,
    .home-page .cta-three .cta-three-inner {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .home-page .funfact-section {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }

    .home-page .affiliations-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}

/* Department "Our Services" band keeps its original overlap: the section is
   transparent so the hero carousel shows through, the eyebrow + the top of the
   icon cards float over it. Render the eyebrow white so it reads over the photo. */
/* Department "Our Services" band — only the cards show (no eyebrow, no white box) */
.home-page .department-section .department-section-inner {
    background-color: transparent;
}

/* Desktop: the band overlaps the hero carousel; the icon cards straddle the
   carousel's bottom edge at their centre. */
@media (min-width: 1200px) {
    .home-page .department-section {
        margin-top: -55px;
        padding-bottom: 42px;
    }

    .home-page .department-section .department-section-inner {
        padding-bottom: 0;
    }

    .home-page .department-card {
        margin-top: -35px;
    }
}

/* Mobile / tablet: no carousel overlap — a normal section on white. */
@media (max-width: 1199px) {
    .home-page .department-section {
        margin-top: 0;
        padding-top: 50px;
        padding-bottom: 10px;
    }

    .home-page .department-section .department-section-inner {
        padding-top: 0;
        margin-top: 0;
    }

    .home-page .department-card {
        margin-top: 0;
    }
}

/* ----------  40. Creative About collage  ---------- */
.about-collage {
    position: relative;
    display: block;
    max-width: 540px;
    margin: 0 auto;
    padding: 28px 0 64px 64px;
}

.about-collage-dots {
    position: absolute;
    left: 18px;
    top: 0;
    z-index: 0;
    width: 108px;
    height: 108px;
    background-image: radial-gradient(rgba(var(--thm-primary-rgb), 0.35) 2px, transparent 2px);
    background-size: 16px 16px;
}

.about-collage-main {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--thm-shadow-lg);
}

.about-collage-main img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.about-collage-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(10, 156, 184, 0.12), rgba(10, 42, 67, 0.32));
    pointer-events: none;
}

.about-collage-play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    background: var(--thm-grad);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
    animation: ripple 2000ms infinite;
    transition: transform 0.3s var(--thm-ease);
}

.about-collage-play:hover {
    color: #fff;
    transform: translate(-50%, -50%) scale(1.08);
}

.about-collage-sub {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 210px;
    border-radius: 18px;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: var(--thm-shadow-lg);
}

.about-collage-sub img {
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.about-collage-badge {
    position: absolute;
    right: -8px;
    top: 8px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 215px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--thm-grad);
    color: #fff;
    box-shadow: var(--thm-shadow);
}

.about-collage-badge-icon {
    font-size: 22px;
    line-height: 1;
}

.about-collage-badge-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.about-collage-badge-text strong {
    font-weight: 800;
}

@media (max-width: 575px) {
    /* phones: drop the overlapping-collage layout — a clean full-bleed image with
       the play button and the badge overlaid on it. The decorative dots and the
       inset photo are hidden so nothing collides or overflows the narrow viewport. */
    .about-collage {
        padding: 0;
    }

    .about-collage-dots,
    .about-collage-sub {
        display: none;
    }

    .about-collage-badge {
        left: 14px;
        right: auto;
        top: auto;
        bottom: 14px;
        max-width: calc(100% - 28px);
        padding: 12px 16px;
        gap: 10px;
    }

    .about-collage-badge-text {
        font-size: 13px;
    }
}

/* ----------  41. Login / auth  ---------- */
.auth-section {
    padding: 80px 0;
    background:
        radial-gradient(700px 360px at 50% -10%, rgba(var(--thm-primary-rgb), 0.10), transparent 60%),
        var(--thm-light-bg);
}

/* Standalone auth page (no site nav/footer) — centre the card in the viewport. */
.auth-page .auth-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Back / Home pill, top-start of the auth page. */
.auth-back {
    position: fixed;
    top: 22px;
    left: 22px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--thm-border);
    color: var(--thm-primary-deep);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    box-shadow: var(--thm-shadow-sm);
    transition: all 0.2s var(--thm-ease);
}

.auth-back:hover {
    background: var(--thm-primary);
    border-color: var(--thm-primary);
    color: #fff;
}

.auth-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 44px 40px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--thm-border);
    box-shadow: var(--thm-shadow-lg);
}

.auth-head {
    text-align: center;
    margin-bottom: 28px;
}

.auth-logo {
    height: 54px;
    width: auto;
    margin-bottom: 18px;
}

.auth-title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: var(--thm-black);
}

.auth-sub {
    margin: 0;
    font-size: 15px;
    color: var(--thm-gray);
}

.auth-field {
    margin-bottom: 18px;
}

.auth-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--thm-black);
}

.auth-input {
    position: relative;
}

.auth-input i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--thm-gray);
}

.auth-input input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 44px;
    border: 1px solid var(--thm-border);
    border-radius: 12px;
    background: var(--thm-light-bg);
    color: var(--thm-black);
    font-size: 15px;
    transition: border-color 0.3s var(--thm-ease), box-shadow 0.3s var(--thm-ease),
        background 0.3s var(--thm-ease);
}

.auth-input input::placeholder {
    color: rgba(var(--thm-gray-rgb), 0.6);
}

.auth-input input:focus {
    outline: 0;
    border-color: var(--thm-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--thm-primary-rgb), 0.12);
}

.auth-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #d9534f;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--thm-gray);
    cursor: pointer;
}

.auth-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--thm-primary);
}

.auth-forgot {
    font-size: 14px;
    font-weight: 600;
    color: var(--thm-primary-deep);
}

.auth-forgot:hover {
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    justify-content: center;
}

.auth-submit i {
    margin-left: 8px;
}

.auth-foot {
    margin: 22px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--thm-gray);
}

.auth-foot i {
    margin-right: 6px;
    color: var(--thm-primary);
}

/* ----------  42. Service-two cards — refreshed unified cards  ---------- */
.service-two-section .row {
    align-items: stretch;
}

.service-two-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--thm-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--thm-shadow-sm);
    transition: transform 0.4s var(--thm-ease), box-shadow 0.4s var(--thm-ease);
}

.service-two-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow-lg);
}

.service-two-imgbox {
    background: transparent;
}

.service-two-image {
    overflow: hidden;
}

.service-two-image img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    transition: transform 0.7s var(--thm-ease);
}

.service-two-card:hover .service-two-image img {
    transform: scale(1.06);
}

.service-two-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 26px 30px 28px;
    text-align: left;
    background: transparent;
    box-shadow: none;
}

.service-two-card-content h4 {
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 800;
    color: var(--thm-black);
}

.service-two-card-content p {
    margin-bottom: 22px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--thm-gray);
}

.service-two-card-content > a {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    align-self: flex-start;
    transform: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--thm-primary-deep);
}

/* the theme hides the label until hover — keep it always visible */
.service-two-card .service-two-card-content span {
    margin-top: 0;
    opacity: 1;
    font-size: 13px;
}

.service-two-card-content > a::before,
.service-two-card-content > a::after {
    content: none;
}

.service-two-card-content > a i {
    transition: transform 0.3s var(--thm-ease);
}

.service-two-card:hover .service-two-card-content > a i {
    transform: translateX(5px);
}

/* Services quick-links panel — icon rows that fill the panel height */
.service-link-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 36px 28px;
}

.service-link-box ul {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
}

.service-link-box li + li {
    margin-top: 0;
}

.service-link-box li a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 20px 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    transition: background 0.3s var(--thm-ease), color 0.3s var(--thm-ease);
}

.service-link-box li a:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.service-link-box li a > i:first-child {
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: var(--thm-primary-light);
}

.service-link-box li a > span {
    flex: 1 1 auto;
}

.service-link-box li a > i:last-child {
    font-size: 12px;
    opacity: 0.5;
    transition: transform 0.3s var(--thm-ease), opacity 0.3s var(--thm-ease);
}

.service-link-box li a:hover > i:last-child {
    transform: translateX(4px);
    opacity: 1;
    color: var(--thm-primary-light);
}

/* News heading spacing */
.blog-box h2 {
    font-weight: 800;
    letter-spacing: -0.4px;
    margin-bottom: 50px;
}

/* ----------  43. Owl Carousel graceful fallback  ----------
   Owl hides .owl-carousel (display:none) until its JS adds .owl-loaded. If that
   JS never runs (a vendor script failed to load, or a JS error on the page), the
   cards stay invisible. A tiny script in the layout adds .owl-fallback when Owl
   hasn't initialised shortly after load, and this shows the cards as a wrapped
   row so the section is never blank. (No effect on normal loads.) */
.owl-carousel.owl-fallback {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

.owl-carousel.owl-fallback > * {
    flex: 0 1 260px;
    max-width: 330px;
}

/* Guard against horizontal overflow (a stray wide element let the page scroll/
   shift sideways on mobile). `clip` stops the sideways scroll without creating a
   scroll container, so position:sticky etc. keep working. */
html,
body {
    overflow-x: clip;
}

/* Compact, flush-left logo only on the smaller hamburger widths (phones, small
   tablets, the 1024 Nest Hub). At 1200–1399 there's room for the full desktop
   logo, so it is left alone. */
@media (max-width: 1199px) {
    .main-menu-logo {
        min-width: 0;
        max-width: none;
        width: auto;
        margin-left: -6px;
        padding: 8px 0;
        justify-content: flex-start;
    }

    .main-menu-logo img {
        height: 44px;
    }
}

/* ----------  44. Mobile header / nav  ----------
   The theme switches to the hamburger at max-width:1399px (the desktop menu list
   hides there too), so these fixes cover the whole hamburger range — not just
   phones — e.g. the 1024×600 Nest Hub. */
@media (max-width: 1399px) {

    /* Lock the header bar to the screen width. A too-wide element elsewhere on
       the page stretches the layout to ~400px; without this the bar inherits
       that width and the hamburger gets clipped past the right edge. */
    .header,
    .main-menu,
    .main-menu-inner {
        max-width: 100vw;
    }

    .main-menu-inner {
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* let the left side shrink — its default min-width:auto was pushing the
       search + hamburger past the right edge on narrow phones (iPhone SE) */
    .main-menu-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* right group: search + hamburger, tight to the edge, never shrinks */
    .main-menu-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
    }

    /* desktop nav is off-canvas on mobile — make sure it reserves no width */
    .navigation {
        display: none;
    }

    /* order: search first, hamburger last (hard against the right edge).
       Also clears the theme's 30px right margin that pushed it off-screen. */
    .search-box {
        order: 1;
        margin: 0;
    }

    /* hide the desktop "File a complaint" button (actions live in the menu) */
    .main-menu-right-button {
        display: none;
    }

    /* The nav search is the inline expanding field (styled in the base rules);
       its toggler needs no mobile-specific override here — that was what added
       the rounded box around the icon in the 1200–1399px range. */

    .mobile-menu-button {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border-radius: 12px;
    }

    .mobile-menu-button span {
        width: 22px;
        height: 2px;
        margin: 0;
        border-radius: 2px;
        background-color: var(--thm-black);
        transition: background-color 0.3s var(--thm-ease);
    }

    /* the theme adds margin-top between bars — let the flex gap handle spacing */
    .mobile-menu-button span + span {
        margin-top: 0;
    }

    .mobile-menu-button:hover {
        background: rgba(var(--thm-primary-rgb), 0.1);
        color: var(--thm-primary-deep);
    }

    .mobile-menu-button:hover span {
        background-color: var(--thm-primary-deep);
    }
}

/* Department service icons: 2-up on phones — trim the wide card padding so the
   labels (e.g. "Administrative") fit comfortably in the narrower columns. */
@media (max-width: 767px) {
    .department-card {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ===== Category previews — cross-links between Media Center sections ===== */
.category-previews {
    padding: 60px 0 90px;
    background: var(--thm-light-bg);
}

.category-previews .section-title-box {
    margin-bottom: 44px;
}

.category-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    background: var(--thm-white);
    border: 1px solid var(--thm-border);
    border-radius: var(--thm-radius);
    box-shadow: var(--thm-shadow-sm);
    color: var(--thm-black);
    transition: transform .35s var(--thm-ease), box-shadow .35s var(--thm-ease), border-color .35s var(--thm-ease);
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--thm-shadow);
    border-color: rgba(var(--thm-primary-rgb), 0.45);
    color: var(--thm-black);
}

.category-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.category-card-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--thm-white);
    background: var(--thm-grad);
    border-radius: var(--thm-radius-sm);
}

.category-card-heading h4 {
    margin: 0 0 2px;
    font-size: 20px;
    line-height: 1.2;
    color: var(--thm-black);
}

.category-card-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--thm-primary-deep);
}

.category-card-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    flex: 1 1 auto;
}

.category-card-list li {
    padding: 12px 0;
    border-top: 1px dashed var(--thm-border);
}

.category-card-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.category-card-date {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--thm-secondary);
}

.category-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--thm-black);
}

.category-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-weight: 700;
    color: var(--thm-primary-deep);
}

.category-card-link i {
    transition: transform .35s var(--thm-ease);
}

.category-card:hover .category-card-link i {
    transform: translateX(5px);
}

/* ===== Admin auto-translate controls (announcement create/edit forms) ===== */
.btn-translate {
    margin-top: 8px;
    font-size: 13px;
    padding: 6px 14px;
    background: var(--thm-light-bg);
    color: var(--thm-primary-deep);
    border: 1px solid var(--thm-border);
    border-radius: var(--thm-radius-sm);
    cursor: pointer;
    transition: background .2s var(--thm-ease), color .2s var(--thm-ease);
}

.btn-translate:hover {
    background: var(--thm-primary);
    color: #fff;
}

.form-group.has-ai-draft .input-text,
.form-group.has-ai-draft .tox-tinymce {
    border-color: #e0a800 !important;
    box-shadow: 0 0 0 2px rgba(224, 168, 0, 0.15);
}

.form-group.has-ai-draft::after {
    content: "AI draft — review before saving";
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #b8860b;
}

/* ============================================================
   HOMEPAGE — Projects / Events / FAQ (connected models, modern UI)
   Logical properties throughout so RTL flips automatically.
   ============================================================ */

/* --- Projects: "What we're building" --- */
.home-projects-section { padding: 96px 0; background: var(--thm-light-bg); }
.home-projects-section .hpj-lead { max-width: 640px; margin: 14px auto 0; color: var(--thm-gray); }
.hpj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; }
.hpj-card { display: flex; flex-direction: column; background: var(--thm-white); border: 1px solid var(--thm-border); border-radius: var(--thm-radius-lg); overflow: hidden; box-shadow: var(--thm-shadow-sm); transition: transform .4s var(--thm-ease), box-shadow .4s var(--thm-ease); }
.hpj-card:hover { transform: translateY(-8px); box-shadow: var(--thm-shadow-lg); }
.hpj-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--thm-grad-dark); overflow: hidden; }
.hpj-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--thm-ease); }
.hpj-card:hover .hpj-thumb img { transform: scale(1.07); }
.hpj-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 30, 48, .5), transparent 55%); }
.hpj-status { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: .2px; padding: 6px 13px; border-radius: 999px; color: #fff; }
.hpj-status.is-ongoing { background: rgba(10, 156, 184, .94); }
.hpj-status.is-planned { background: rgba(88, 107, 118, .92); }
.hpj-status.is-hold { background: rgba(176, 111, 0, .94); }
.hpj-status.is-done { background: rgba(26, 157, 90, .94); }
.hpj-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.hpj-body h4 { font-size: 19px; margin: 0 0 8px; color: var(--thm-black); line-height: 1.35; }
.hpj-body p { color: var(--thm-gray); font-size: 14.5px; margin: 0 0 18px; flex: 1; }
.hpj-foot { margin-top: auto; }
.hpj-progress { height: 9px; background: rgba(var(--thm-black-rgb), .08); border-radius: 999px; overflow: hidden; }
.hpj-progress > span { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--thm-grad-soft); animation: hpjFill 1.2s var(--thm-ease) both; }
@keyframes hpjFill { from { width: 0; } to { width: var(--pct); } }
.hpj-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }
.hpj-label { font-size: 12px; color: var(--thm-secondary); text-transform: uppercase; letter-spacing: .5px; }
.hpj-pct { font-size: 16px; font-weight: 800; color: var(--thm-primary-deep); }

/* --- Events: "Upcoming" --- */
.home-events-section { padding: 96px 0; }
.hev-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.hev-head .section-tagline, .hev-head .section-title { text-align: start; }
.hev-all { font-weight: 700; color: var(--thm-primary-deep); white-space: nowrap; }
.hev-all i { transition: transform .3s var(--thm-ease); }
.hev-all:hover i { transform: translateX(4px); }
[dir="rtl"] .hev-all i, [dir="rtl"] .hev-arrow i { transform: scaleX(-1); }
.hev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hev-card { display: flex; align-items: center; gap: 18px; padding: 18px; background: var(--thm-white); border: 1px solid var(--thm-border); border-radius: var(--thm-radius); box-shadow: var(--thm-shadow-sm); transition: transform .35s var(--thm-ease), box-shadow .35s var(--thm-ease); }
.hev-card:hover { transform: translateY(-5px); box-shadow: var(--thm-shadow); }
.hev-date { flex: 0 0 auto; width: 66px; height: 72px; border-radius: 14px; background: var(--thm-grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 22px -10px rgba(var(--thm-primary-rgb), .7); }
.hev-day { font-size: 26px; font-weight: 800; line-height: 1; }
.hev-mon { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; opacity: .95; }
.hev-body { flex: 1; min-width: 0; }
.hev-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--thm-accent); margin-bottom: 4px; }
.hev-body h4 { font-size: 16.5px; margin: 0 0 7px; color: var(--thm-black); line-height: 1.35; }
.hev-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--thm-gray); }
.hev-meta i { color: var(--thm-primary); margin-inline-end: 4px; }
.hev-arrow { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--thm-light-bg); color: var(--thm-primary-deep); transition: background .3s, color .3s, transform .3s var(--thm-ease); }
.hev-card:hover .hev-arrow { background: var(--thm-primary); color: #fff; transform: translateX(3px); }

/* --- FAQ: split intro + accordion --- */
.home-faq-section { padding: 96px 0; background: var(--thm-light-bg); }
.hfaq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: start; }
.hfaq-intro { position: sticky; top: 100px; }
.hfaq-intro .section-tagline, .hfaq-intro .section-title { text-align: start; }
.hfaq-intro p { color: var(--thm-gray); margin: 16px 0 26px; }
.hfaq-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hfaq-btn { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 14.5px; transition: transform .3s var(--thm-ease), box-shadow .3s, background .3s, color .3s, border-color .3s; }
.hfaq-btn-primary { background: var(--thm-grad); color: #fff; box-shadow: 0 12px 26px -12px rgba(var(--thm-primary-rgb), .8); }
.hfaq-btn-primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 18px 32px -12px rgba(var(--thm-primary-rgb), .9); }
.hfaq-btn-ghost { background: transparent; color: var(--thm-black); border: 1.5px solid var(--thm-border); }
.hfaq-btn-ghost:hover { border-color: var(--thm-primary); color: var(--thm-primary-deep); transform: translateY(-3px); }
.hfaq-list { display: flex; flex-direction: column; gap: 12px; }
.hfaq-item { background: var(--thm-white); border: 1px solid var(--thm-border); border-radius: var(--thm-radius); overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.hfaq-item.is-open { box-shadow: var(--thm-shadow-sm); border-color: rgba(var(--thm-primary-rgb), .35); }
.hfaq-q { width: 100%; text-align: start; background: none; border: 0; padding: 18px 22px; font-size: 16px; font-weight: 700; color: var(--thm-black); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.hfaq-q i { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--thm-primary-rgb), .12); color: var(--thm-primary-deep); display: grid; place-items: center; font-size: 12px; transition: transform .3s var(--thm-ease), background .3s, color .3s; }
.hfaq-item.is-open .hfaq-q i { transform: rotate(45deg); background: var(--thm-primary); color: #fff; }
.hfaq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--thm-ease); }
.hfaq-item.is-open .hfaq-a { max-height: 800px; }
.hfaq-a-inner { padding: 0 22px 20px; color: var(--thm-gray); line-height: 1.75; }
/* Links inside Q&A answers (home + /faq page) — render as clear, clickable links. */
.hfaq-a-inner a,
.faq-a-inner a {
    color: var(--thm-primary-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    word-break: break-word;
}
.hfaq-a-inner a:hover,
.faq-a-inner a:hover {
    color: var(--thm-primary);
}

/* Responsive */
@media (max-width: 991px) {
    .hpj-grid, .hev-grid { grid-template-columns: repeat(2, 1fr); }
    .hfaq-wrap { grid-template-columns: 1fr; gap: 30px; }
    .hfaq-intro { position: static; }
}
@media (max-width: 640px) {
    .hpj-grid, .hev-grid { grid-template-columns: 1fr; }
    .home-projects-section, .home-events-section, .home-faq-section { padding: 64px 0; }
}

/* --- Homepage section colour rhythm: gentle white / soft-teal alternation so
   each band reads as a distinct section. Scoped to .home-page; sections that
   carry their own background (funfact, announcements, cta-three, department)
   are left untouched. background-color only, so any bg-images are preserved. --- */
.home-page .quick-services-section,
.home-page .president-section,
.home-page .home-projects-section,
.home-page .opportunities-section,
.home-page .home-events-section,
.home-page .blog-section,
.home-page .service-two-section,
.home-page .home-faq-section,
.home-page .office-contact-section {
    background-color: var(--thm-light-bg);
}
.home-page .about-two-section,
.home-page .council-home-section,
.home-page .governance-section,
.home-page .cta-five-section,
.home-page .portfolio-two-section,
.home-page .contacts-home-section,
.home-page .affiliations-section {
    background-color: #ffffff;
}

/* Tighter "Latest Announcements" band — less space above & below (own rule so
   the shared cta-three padding is untouched). */
.home-page .event-three-section .event-section-outer {
    padding-top: 48px;
    padding-bottom: 48px;
}
@media (max-width: 767px) {
    .home-page .event-three-section .event-section-outer {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}