/**

 * POLICE CONNECT - Premium Light-Mode Design System

 * Strict compliance with government accessibility and readability guidelines.

 */



:root {

    --base-font-size: 16px;

    --font-sans: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --font-heading: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;



    /* Palette - Police Navy & Government Civic */

    --color-primary-900: #081a30;

    --color-primary-800: #0b2545;

    --color-primary-700: #13315c;

    --color-primary-600: #134074;

    --color-primary-500: #1d4ed8;



    --color-accent-600: #b45309;

    --color-accent-500: #d97706;

    --color-accent-400: #fcd34d;

    --color-accent-100: #fef3c7;



    --color-surface-bg: #f8fafc;

    --color-surface-card: #ffffff;

    --color-surface-subtle: #f1f5f9;

    --color-surface-alt: #eef2f6;



    --color-text-main: #0f172a;

    --color-text-body: #334155;

    --color-text-muted: #64748b;

    --color-text-light: #94a3b8;



    --color-border: #e2e8f0;

    --color-border-subtle: #cbd5e1;



    --color-success: #059669;

    --color-success-bg: #ecfdf5;

    --color-danger: #dc2626;

    --color-danger-bg: #fef2f2;

    --color-warning: #d97706;

    --color-warning-bg: #fffbeb;



    --radius-sm: 6px;

    --radius-md: 10px;

    --radius-lg: 16px;

    --radius-xl: 24px;

    --radius-full: 9999px;



    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);

    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);



    --container-max: 100%;

    --page-side-gap: 1cm;

    --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



/* High Contrast Accessibility Mode */

[data-contrast="high"] {

    --color-surface-bg: #ffffff;

    --color-surface-card: #ffffff;

    --color-surface-subtle: #f8fafc;

    --color-text-main: #000000;

    --color-text-body: #111111;

    --color-text-muted: #222222;

    --color-primary-800: #000000;

    --color-primary-700: #001f3f;

    --color-border: #000000;

    --color-border-subtle: #000000;

    --shadow-sm: none;

    --shadow-md: none;

    --shadow-lg: none;

}



/* Base Styles */

*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    font-size: var(--base-font-size);

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}



html {

    overflow-x: hidden !important;

    width: 100%;

    max-width: 100vw;

    -webkit-text-size-adjust: 100%;

}



body {

    font-family: var(--font-sans);

    font-size: 1rem;

    line-height: 1.6;

    color: var(--color-text-body);

    background-color: var(--color-surface-bg);

    overflow-x: hidden !important;

    width: 100%;

    max-width: 100vw;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    position: relative;

}



*, *::before, *::after {

    box-sizing: border-box;

    -webkit-tap-highlight-color: transparent;

}



a {

    color: var(--color-primary-600);

    text-decoration: none !important;

    transition: var(--transition);

}



a:hover,

a:focus,

a:active {

    color: var(--color-primary-800);

    text-decoration: none !important;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* Accessible Focus States */

a:focus-visible,

button:focus-visible,

input:focus-visible,

select:focus-visible,

textarea:focus-visible {

    outline: 3px solid var(--color-accent-500);

    outline-offset: 2px;

}



/* Skip Link */

.skip-link {

    position: absolute;

    top: -50px;

    left: 20px;

    background: var(--color-primary-900);

    color: #ffffff;

    padding: 10px 18px;

    z-index: 9999;

    border-radius: var(--radius-sm);

    font-weight: 600;

    text-decoration: none;

    transition: top 0.2s ease;

}



.skip-link:focus {

    top: 10px;

}



/* Layout Utilities */

.container {

    width: 100%;

    max-width: var(--container-max);

    margin-left: auto;

    margin-right: auto;

    padding-left: 1cm;

    padding-right: 1cm;

    box-sizing: border-box;

}



@media (max-width: 768px) {

    .container {

        padding-left: 14px;

        padding-right: 14px;

    }

}



/* Emergency & Accessibility Strip (Structured 2-Tier Layout) */

.top-emergency-bar {

    color: #ffffff;

    font-size: 0.82rem;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

}



.top-bar-emergency-tier {

    background-color: #061527;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    padding: 6px 0;

    overflow: hidden;

}



.top-bar-emergency-inner {

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

}



.emergency-label-box {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    background: rgba(255, 255, 255, 0.08);

    padding: 3px 10px;

    border-radius: var(--radius-sm);

    border: 1px solid rgba(253, 230, 138, 0.25);

    z-index: 2;

}



.emergency-live-pulse {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: #ef4444;

    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);

    animation: emergencyPulse 1.5s infinite;

}



@keyframes emergencyPulse {

    0% {

        transform: scale(0.95);

        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);

    }

    70% {

        transform: scale(1);

        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);

    }

    100% {

        transform: scale(0.95);

        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);

    }

}



.emergency-label {

    font-size: 0.76rem;

    font-weight: 800;

    color: #fde68a;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    white-space: nowrap;

}



/* Continuous Marquee Ticker Container (Auto-Scroll + Manual Swipe / Drag) */

.emergency-marquee-wrap {

    flex: 1;

    overflow-x: auto;

    overflow-y: hidden;

    position: relative;

    display: flex;

    align-items: center;

    scrollbar-width: none;

    -ms-overflow-style: none;

    -webkit-overflow-scrolling: touch;

    user-select: none;

    -webkit-user-select: none;

    cursor: grab;

    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);

    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);

}



.emergency-marquee-wrap::-webkit-scrollbar {

    display: none;

    width: 0;

    height: 0;

}



.emergency-marquee-wrap.is-dragging {

    cursor: grabbing;

    scroll-behavior: auto;

}



.emergency-marquee-track {

    display: flex;

    align-items: center;

    width: max-content;

    will-change: scroll-position;

}



.emergency-badges-group {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-right: 10px;

    flex-shrink: 0;

}



.emergency-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 12px;

    border-radius: var(--radius-full);

    color: #ffffff;

    text-decoration: none !important;

    font-weight: 700;

    font-size: 0.78rem;

    white-space: nowrap;

    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;

    flex-shrink: 0;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

    -webkit-tap-highlight-color: transparent !important;

    outline: none !important;

}



.emergency-pill:hover,

.emergency-pill:focus,

.emergency-pill:active {

    text-decoration: none !important;

    outline: none !important;

    filter: brightness(1.15);

    transform: translateY(-1px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);

}



.emergency-pill strong {

    font-weight: 800;

    letter-spacing: 0.03em;

}



.emergency-pill.police {

    background: #dc2626;

    border: 1px solid #ef4444;

}



.emergency-pill.cyber {

    background: #d97706;

    border: 1px solid #f59e0b;

}



.emergency-pill.women {

    background: #6366f1;

    border: 1px solid #818cf8;

}



.emergency-pill.child {

    background: #0d9488;

    border: 1px solid #14b8a6;

}



.emergency-pill.senior {

    background: #0284c7;

    border: 1px solid #38bdf8;

}



.emergency-pill.whatsapp {

    background: #16a34a;

    border: 1px solid #22c55e;

}



.top-bar-utility-tier {

    background-color: var(--color-primary-900);

    border-bottom: 2px solid var(--color-accent-500);

    padding: 5px 0;

}



.top-bar-utility-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



.accessibility-tools {

    display: flex;

    align-items: center;

    gap: 4px;

}



.access-tools-label {

    font-size: 0.75rem;

    color: #cbd5e1;

    font-weight: 700;

    margin-right: 4px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.tool-btn {

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: #ffffff;

    padding: 2px 8px;

    font-size: 0.76rem;

    font-weight: 700;

    border-radius: var(--radius-sm);

    cursor: pointer;

    transition: var(--transition);

}



.tool-btn:hover {

    background: #ffffff;

    color: var(--color-primary-900);

}



.top-social-cluster {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin: 0 14px;

}



.top-social-item {

    color: #cbd5e1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px;

    border-radius: 50%;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

}



.top-social-item:hover,

.top-social-item:active,

.top-social-item:focus,

.top-social-item.is-touched {

    transform: translateY(-2px) scale(1.15);

    text-decoration: none;

}



.top-social-item.top-social-x:hover,

.top-social-item.top-social-x:active,

.top-social-item.top-social-x.is-touched {

    color: #ffffff !important;

}



.top-social-item.top-social-insta:hover,

.top-social-item.top-social-insta:active,

.top-social-item.top-social-insta.is-touched {

    color: #e1306c !important;

}



.top-social-item.top-social-fb:hover,

.top-social-item.top-social-fb:active,

.top-social-item.top-social-fb.is-touched {

    color: #1877f2 !important;

}



.top-social-item.top-social-wa:hover,

.top-social-item.top-social-wa:active,

.top-social-item.top-social-wa.is-touched {

    color: #25d366 !important;

}



.top-social-item.top-social-yt:hover,

.top-social-item.top-social-yt:active,

.top-social-item.top-social-yt.is-touched {

    color: #ff0000 !important;

}



@media (max-width: 768px) {

    .top-social-cluster {

        display: none;

    }

}



/* --- Grand Commissionerate Brand Banner & Nav Main Header Wrapper --- */

.site-main-header {

    position: relative;

    width: 100%;

    z-index: 1000;

}



.site-brand-banner {

    background: #ffffff;

    border-bottom: 1px solid var(--color-border);

    padding: 14px 0;

}



.site-brand-banner .container,

.site-header .container,

.top-emergency-bar .container {

    max-width: 100% !important;

    padding-left: clamp(20px, 3.2vw, 48px);

    padding-right: clamp(20px, 3.2vw, 48px);

}



.brand-banner-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

    width: 100%;

}



.brand-identity-link {

    display: flex;

    align-items: center;

    gap: 16px;

    text-decoration: none;

    flex-shrink: 0;

}



.brand-identity-link:hover {

    text-decoration: none;

}



.brand-emblems-cluster {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

}



.brand-emblem-ashoka {

    height: 60px;

    width: auto;

    object-fit: contain;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));

}



.brand-emblem-seal {

    height: 60px;

    width: auto;

    object-fit: contain;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));

}



.brand-divider-line {

    width: 2px;

    height: 52px;

    background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);

    flex-shrink: 0;

}



.brand-text-block {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.brand-marathi-name {

    font-size: 1.42rem;

    font-weight: 900;

    color: var(--color-primary-900);

    line-height: 1.2;

    letter-spacing: -0.01em;

    white-space: nowrap;

    margin: 0;

}



.brand-english-name {

    font-size: 1.05rem;

    font-weight: 800;

    color: var(--color-primary-700);

    letter-spacing: 0.04em;

    line-height: 1.2;

    text-transform: uppercase;

    white-space: nowrap;

    margin-top: 1px;

}



.brand-motto-row {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.76rem;

    font-weight: 700;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-top: 2px;

    white-space: nowrap;

}



.brand-motto-text {

    color: var(--color-accent-600);

    font-weight: 800;

}



.brand-motto-dot {

    color: #94a3b8;

}



.brand-govt-text {

    color: #64748b;

}



/* Right Side Civic & Control Room Tools */

.brand-banner-tools {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-left: auto;

}



.control-room-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-left: 4px solid var(--color-accent-500);

    border-radius: 16px;

    padding: 7px 14px;

    display: flex;

    flex-direction: column;

    gap: 3px;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

}



.cr-badge {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.68rem;

    font-weight: 800;

    color: var(--color-primary-900);

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



.live-pulse-dot {

    width: 7px;

    height: 7px;

    background-color: #dc2626;

    border-radius: 50%;

    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);

    animation: pulse 1.8s infinite;

}



@keyframes pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);

    }

    70% {

        box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);

    }

}



.cr-helplines-row {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.74rem;

    font-weight: 700;

    color: #475569;

}



.cr-help-item {

    display: flex;

    align-items: center;

    gap: 5px;

    text-decoration: none;

    color: inherit;

}



.cr-help-item:hover {

    text-decoration: none;

}



.cr-help-label {

    font-size: 0.68rem;

    font-weight: 700;

    color: #64748b;

}



.cr-help-val.red {

    font-size: 0.94rem;

    font-weight: 900;

    color: #dc2626;

}



.cr-help-val.amber {

    font-size: 0.94rem;

    font-weight: 900;

    color: #d97706;

}



.cr-div {

    width: 1px;

    height: 14px;

    background: #cbd5e1;

}



.brand-whatsapp-badge {

    display: flex;

    align-items: center;

    gap: 10px;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;

    padding: 7px 14px;

    border-radius: var(--radius-md);

    text-decoration: none;

    transition: var(--transition);

}



.brand-whatsapp-badge:hover {

    background: #dcfce7;

    border-color: #86efac;

    transform: translateY(-1px);

    text-decoration: none;

}



.wa-icon-box {

    display: flex;

    align-items: center;

    justify-content: center;

}



.wa-info {

    display: flex;

    flex-direction: column;

}



.wa-title {

    font-size: 0.66rem;

    font-weight: 800;

    color: #166534;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    line-height: 1.1;

}



.wa-num {

    font-size: 0.92rem;

    font-weight: 900;

    color: #15803d;

    line-height: 1.2;

    letter-spacing: 0.02em;

}



/* Header & Navigation */

.site-header {

    background: #ffffff;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    position: sticky;

    top: 0;

    left: 0;

    right: 0;

    width: 100%;

    max-width: 100vw;

    z-index: 1000;

    border-bottom: 1px solid var(--color-border);

    box-sizing: border-box;

}



.header-inner {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding: 8px 0;

    width: 100%;

    box-sizing: border-box;

}



.mobile-sticky-brand {

    display: none;

    align-items: center;

    gap: 8px;

    text-decoration: none;

    color: var(--color-primary-900);

}



.mobile-sticky-seal {

    height: 36px;

    width: auto;

    object-fit: contain;

}



.mobile-sticky-title {

    font-size: 1rem;

    font-weight: 900;

    letter-spacing: -0.01em;

}



.nav-desktop {

    display: flex;

    align-items: center;

    gap: 12px; /* Generous gap between each individual box so nothing overlaps */

    flex-wrap: wrap;

    margin-left: 0;

}



/* Individual See More style box for EVERY navigation item */

.nav-desktop .nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 8px 18px;

    border-radius: 12px;

    font-size: 0.88rem;

    font-weight: 700;

    cursor: pointer;

    background: #eff6ff;

    color: #1e3a8a;

    border: 1.5px solid #bfdbfe;

    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.08);

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    -webkit-tap-highlight-color: transparent;

    user-select: none;

    text-decoration: none;

    white-space: nowrap;

    line-height: 1.3;

}



.nav-desktop .nav-link:hover,

.nav-desktop .nav-dropdown-item:hover > .nav-dropdown-trigger {

    background: #dbeafe;

    border-color: #93c5fd;

    color: #1d4ed8;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.14);

    text-decoration: none;

}



.nav-desktop .nav-link.active,

.nav-desktop .nav-dropdown-item.active > .nav-dropdown-trigger {

    background: #1e3a8a;

    border-color: #1e3a8a;

    color: #ffffff !important;

    box-shadow: 0 3px 10px rgba(30, 58, 138, 0.24);

}



.nav-desktop .nav-link.active:hover,

.nav-desktop .nav-dropdown-item.active:hover > .nav-dropdown-trigger {

    background: #1d4ed8;

    border-color: #1d4ed8;

    color: #ffffff !important;

}



/* Navigation Mega Menu Dropdown */

.nav-dropdown-item {

    position: relative;

    display: inline-flex;

    align-items: center;

}



.nav-dropdown-trigger {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

}



.dropdown-chevron-icon {

    stroke: #3b82f6;

    stroke-width: 2.5;

    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s ease;

    transform-origin: center center;

    line-height: 1;

    margin-left: 2px;

    opacity: 0.9;

}



.nav-desktop .nav-link:hover .dropdown-chevron-icon,

.nav-dropdown-item:hover .dropdown-chevron-icon {

    transform: rotate(180deg);

    stroke: #1d4ed8;

    opacity: 1;

}



.nav-desktop .nav-link.active .dropdown-chevron-icon,

.nav-dropdown-item.active .dropdown-chevron-icon {

    stroke: #ffffff;

    opacity: 1;

}



@media (max-width: 1220px) and (min-width: 993px) {

    .nav-desktop {

        gap: 8px;

    }

    .nav-desktop .nav-link {

        padding: 7px 13px;

        font-size: 0.83rem;

        border-radius: 10px;

    }

}



.mega-menu-panel {

    position: absolute;

    top: calc(100% + 8px);

    background: #ffffff;

    border-radius: var(--radius-md);

    box-shadow: 0 20px 45px -10px rgba(8, 26, 48, 0.22), 0 0 0 1px rgba(8, 26, 48, 0.08);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;

    z-index: 1200;

    padding: 22px 24px;

}



.mega-menu-panel::before {

    content: '';

    position: absolute;

    top: -12px;

    left: 0;

    right: 0;

    height: 12px;

}



.mega-menu-about {

    width: 820px;

    max-width: 95vw;

}



.mega-menu-medium {

    width: 580px;

    max-width: 92vw;

}



.mega-menu-compact {

    width: 360px;

    max-width: 90vw;

}



/* Dropdown Alignment when Navbar is on the right */

.dropdown-about .mega-menu-panel {

    left: auto;

    right: -360px;

    transform: translateY(10px);

}



.dropdown-report .mega-menu-panel {

    left: auto;

    right: -220px;

    transform: translateY(10px);

}



.dropdown-citizen .mega-menu-panel {

    left: auto;

    right: -120px;

    transform: translateY(10px);

}



.dropdown-police .mega-menu-panel {

    left: auto;

    right: -30px;

    transform: translateY(10px);

}



.dropdown-dashboard .mega-menu-panel {

    left: auto;

    right: 0;

    transform: translateY(10px);

}



.nav-dropdown-item:hover .mega-menu-panel,

.nav-dropdown-item:focus-within .mega-menu-panel {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(4px);

}



@media (max-width: 1200px) and (min-width: 993px) {

    .mega-menu-about {

        width: 720px;

    }

    .dropdown-about .mega-menu-panel {

        right: -300px;

    }

    .dropdown-report .mega-menu-panel {

        right: -180px;

    }

    .dropdown-citizen .mega-menu-panel {

        right: -90px;

    }

}



.mega-menu-container {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap: 20px;

}



.grid-3-cols {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}



.grid-2-cols {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}



.mega-menu-compact .mega-menu-container {

    display: block;

}



.mega-menu-col {

    display: flex;

    flex-direction: column;

}



.mega-menu-header {

    border-bottom: 2px solid var(--color-border);

    padding-bottom: 6px;

    margin-bottom: 10px;

}



.mega-col-title {

    font-size: 0.8rem;

    font-weight: 800;

    color: #475569;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



.mega-menu-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.mega-menu-list li a {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.86rem;

    font-weight: 600;

    color: var(--color-text-main);

    text-decoration: none;

    padding: 4px 6px;

    border-radius: var(--radius-sm);

    transition: all 0.15s ease;

}



.mega-menu-list li a:hover {

    background-color: var(--color-surface-subtle);

    color: var(--color-primary-600);

    transform: translateX(3px);

}



.chevron-prefix {

    font-size: 1.1rem;

    font-weight: 800;

    color: var(--color-primary-500);

    line-height: 1;

    display: inline-block;

    width: 12px;

}



.dot-prefix {

    font-size: 1.1rem;

    color: #94a3b8;

    line-height: 1;

    display: inline-block;

    width: 12px;

}



.mega-menu-list li a:hover .dot-prefix {

    color: var(--color-primary-500);

}



.unit-link-with-badge {

    justify-content: flex-start;

}



.unit-link-with-badge span:nth-child(2) {

    margin-right: auto;

}



.badge-photos {

    background: #f1f5f9;

    color: #64748b;

    font-size: 0.68rem;

    font-weight: 700;

    padding: 2px 7px;

    border-radius: var(--radius-full);

    border: 1px solid #e2e8f0;

    margin-left: 8px;

}



.mega-footer-link {

    margin-top: auto;

    padding-top: 12px;

    border-top: 1px dashed var(--color-border);

}



.lang-selector-group {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-left: 8px;

}



.lang-selector {

    display: flex;

    align-items: center;

    background: var(--color-surface-subtle);

    padding: 3px;

    border-radius: var(--radius-sm);

    border: 1px solid var(--color-border);

}



.lang-btn {

    padding: 3px 8px;

    font-size: 0.78rem;

    font-weight: 700;

    border-radius: var(--radius-sm);

    text-decoration: none;

    color: var(--color-text-body);

    transition: var(--transition);

}



.lang-btn.active {

    background: var(--color-primary-800);

    color: #ffffff;

    text-decoration: none;

}



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

   Searchable Language Picker Dropdown (Material UI 2.0 Style)

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

.searchable-lang-picker {

    position: relative;

    display: inline-flex;

    align-items: center;

}



.lang-picker-btn {

    background: #ffffff;

    color: var(--color-primary-900);

    border: 1.5px solid #cbd5e1;

    border-radius: var(--radius-sm);

    padding: 3px 10px;

    font-size: 0.8rem;

    font-weight: 700;

    cursor: pointer;

    outline: none;

    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);

    height: 30px;

    min-width: 225px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

}



.lang-picker-btn:hover {

    border-color: var(--color-primary-600);

    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);

}



.lang-picker-btn:focus-visible {

    outline: 2px solid var(--color-primary-600);

    outline-offset: 2px;

}



.searchable-lang-picker.open .lang-picker-btn {

    border-color: var(--color-primary-700);

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);

}



.lang-picker-globe {

    font-size: 0.95rem;

    flex-shrink: 0;

}



.lang-picker-selected {

    flex: 1;

    text-align: left;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.lang-picker-arrow {

    flex-shrink: 0;

    color: #64748b;

    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);

}



.searchable-lang-picker.open .lang-picker-arrow {

    transform: rotate(180deg);

    color: var(--color-primary-700);

}



.lang-picker-dropdown {

    position: absolute;

    top: calc(100% + 6px);

    right: 0;

    width: 330px;

    max-width: calc(100vw - 20px);

    background: #ffffff;

    border: 1px solid #cbd5e1;

    border-radius: 10px;

    box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.22), 0 4px 12px -2px rgba(15, 23, 42, 0.1);

    z-index: 99999;

    display: none;

    overflow: hidden;

    animation: langDropdownSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);

}



.searchable-lang-picker.open .lang-picker-dropdown {

    display: block;

}



@keyframes langDropdownSlideDown {

    from {

        opacity: 0;

        transform: translateY(-8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.lang-search-header {

    padding: 8px 10px 6px;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

}



.lang-search-input-wrap {

    position: relative;

    display: flex;

    align-items: center;

}



.lang-search-icon {

    position: absolute;

    left: 10px;

    color: #64748b;

    pointer-events: none;

}



.lang-search-input {

    width: 100%;

    border: 1.5px solid #cbd5e1;

    border-radius: 6px;

    padding: 6px 28px 6px 30px;

    font-size: 0.82rem;

    font-weight: 600;

    color: #1e293b;

    background: #ffffff;

    outline: none;

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.lang-search-input:focus {

    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);

}



.lang-search-clear {

    position: absolute;

    right: 6px;

    top: 50%;

    transform: translateY(-50%);

    background: #f1f5f9;

    border: none;

    border-radius: 50%;

    width: 18px;

    height: 18px;

    font-size: 13px;

    line-height: 1;

    color: #64748b;

    cursor: pointer;

    display: none;

    align-items: center;

    justify-content: center;

    transition: all 0.15s ease;

}



.lang-search-clear:hover {

    background: #fee2e2;

    color: #ef4444;

}



.lang-search-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 0.69rem;

    color: #64748b;

    margin-top: 5px;

    padding: 0 2px;

}



.lang-search-hint {

    font-style: italic;

    color: #64748b;

}



.lang-total-count {

    font-weight: 700;

    color: var(--color-primary-700);

}



.lang-options-list {

    max-height: 290px;

    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color: #cbd5e1 #f8fafc;

    padding: 4px 0;

}



.lang-options-list::-webkit-scrollbar {

    width: 6px;

}



.lang-options-list::-webkit-scrollbar-track {

    background: #f8fafc;

}



.lang-options-list::-webkit-scrollbar-thumb {

    background-color: #cbd5e1;

    border-radius: 4px;

}



.lang-optgroup {

    padding-bottom: 2px;

}



.lang-optgroup-title {

    padding: 6px 12px 4px;

    font-size: 0.7rem;

    font-weight: 800;

    color: #475569;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    background: #f1f5f9;

    border-top: 1px solid #e2e8f0;

    border-bottom: 1px solid #e2e8f0;

    position: sticky;

    top: 0;

    z-index: 2;

}



.lang-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 7px 12px;

    font-size: 0.82rem;

    color: #1e293b;

    cursor: pointer;

    transition: background 0.12s ease, color 0.12s ease;

    border-left: 3px solid transparent;

    user-select: none;

}



.lang-option:hover,

.lang-option:focus,

.lang-option.focused {

    background: #eff6ff;

    color: #1d4ed8;

    border-left-color: #2563eb;

    outline: none;

}



.lang-option.selected {

    background: #e0f2fe;

    color: #0369a1;

    font-weight: 700;

    border-left-color: #0284c7;

}



.lang-option-name {

    flex: 1;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.lang-option-badge {

    font-size: 0.65rem;

    font-weight: 800;

    color: #64748b;

    background: #f1f5f9;

    padding: 2px 6px;

    border-radius: 4px;

    letter-spacing: 0.04em;

    flex-shrink: 0;

    margin-left: 8px;

}



.lang-option.selected .lang-option-badge {

    background: #bae6fd;

    color: #0369a1;

}



.lang-no-results {

    padding: 22px 16px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

    color: #64748b;

}



.no-res-icon {

    font-size: 1.6rem;

    margin-bottom: 2px;

}



.no-res-text {

    font-size: 0.82rem;

    font-weight: 700;

    color: #334155;

}



.no-res-sub {

    font-size: 0.74rem;

    color: #94a3b8;

}



/* Mobile specific styling for drawer */

.searchable-lang-picker.mobile-version {

    width: 100%;

    display: block;

}



.searchable-lang-picker.mobile-version .lang-picker-dropdown {

    width: 100%;

}



/* Suppress Google Translate Top Toolbar Frame & Keep Site Clean */

.goog-te-banner-frame.skiptranslate,

.goog-te-banner-frame,

iframe.goog-te-banner-frame {

    display: none !important;

    visibility: hidden !important;

    height: 0 !important;

}



body {

    top: 0px !important;

    position: static !important;

}



#goog-gt-tt,

.goog-te-balloon-frame {

    display: none !important;

    visibility: hidden !important;

}



.goog-text-highlight {

    background: none !important;

    box-shadow: none !important;

}



.mobile-menu-toggle {

    display: none;

    background: none;

    border: 1px solid var(--color-border);

    padding: 8px;

    border-radius: var(--radius-sm);

    cursor: pointer;

    color: var(--color-primary-800);

}



/* Mobile Nav Drawer */

.mobile-nav-drawer {

    display: none;

    background: #ffffff;

    border-bottom: 2px solid var(--color-primary-800);

    padding: 16px 20px;

}



.mobile-nav-drawer.open {

    display: block;

}



.mobile-nav-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 0;

    margin: 0;

}



.mobile-nav-list > li > .nav-link {

    display: block;

    padding: 10px 14px;

    font-size: 0.98rem;

    font-weight: 700;

    border-bottom: 1px solid var(--color-border);

    color: var(--color-primary-900);

}



/* Mobile Accordion Nav Groups */

.mobile-nav-group {

    border-bottom: 1px solid var(--color-border);

    margin-bottom: 4px;

}



.mobile-nav-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 12px;

    font-size: 0.96rem;

    font-weight: 700;

    color: var(--color-primary-900);

    cursor: pointer;

    list-style: none;

    border-radius: var(--radius-sm);

    transition: background-color 0.15s ease;

    user-select: none;

}



.mobile-nav-heading::-webkit-details-marker {

    display: none;

}



.mobile-nav-heading::after {

    content: "▾";

    font-size: 1.1rem;

    color: var(--color-primary-600);

    transition: transform 0.2s ease;

}



.mobile-nav-group[open] > .mobile-nav-heading::after {

    transform: rotate(180deg);

}



.mobile-nav-heading:hover,

.mobile-nav-group[open] > .mobile-nav-heading {

    background-color: var(--color-surface-subtle);

    color: var(--color-primary-700);

}



.mobile-sub-list {

    list-style: none;

    padding: 4px 0 8px 14px;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.mobile-sub-list li a {

    display: block;

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--color-text-main);

    padding: 6px 10px;

    border-radius: var(--radius-sm);

    text-decoration: none;

    transition: background-color 0.15s ease, color 0.15s ease;

}



.mobile-sub-list li a:hover {

    background-color: var(--color-surface-subtle);

    color: var(--color-primary-600);

}



/* Hero Section */

.hero-section {

    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-bg) 100%);

    border-bottom: 1px solid var(--color-border);

    padding: 24px 0 28px;

    position: relative;

}



.hero-grid {

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    gap: 32px;

    align-items: center;

}



.hero-badge-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #eff6ff;

    color: var(--color-primary-700);

    padding: 4px 12px;

    border-radius: var(--radius-full);

    font-size: 0.78rem;

    font-weight: 700;

    margin-bottom: 10px;

    border: 1px solid #bfdbfe;

}



.hero-title {

    font-size: 2.05rem;

    font-weight: 800;

    color: var(--color-primary-900);

    line-height: 1.2;

    margin-bottom: 10px;

    letter-spacing: -0.02em;

}



.hero-lead {

    font-size: 0.98rem;

    color: var(--color-text-body);

    margin-bottom: 18px;

    line-height: 1.5;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}



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

   MATERIAL UI 2.0 / MATERIAL DESIGN 3 BUTTON & TAB SYSTEM

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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-weight: 700;

    font-size: 0.86rem;

    letter-spacing: 0.02em;

    padding: 8px 20px;

    border-radius: var(--radius-full);

    cursor: pointer;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    border: 1.5px solid transparent;

    text-decoration: none;

    line-height: 1.35;

    position: relative;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

}



.btn:active {

    transform: scale(0.96);

}



/* Material Contained Primary Button (#1976d2) - Pill Shape */

.btn-primary {

    background-color: #1976d2;

    color: #ffffff;

    border: 1.5px solid #1565c0;

    border-radius: var(--radius-full);

    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.25);

}



.btn-primary:hover {

    background-color: #1565c0;

    border-color: #0d47a1;

    color: #ffffff;

    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);

    transform: translateY(-1px);

    text-decoration: none;

}



/* Material Outlined Secondary Button - Matching Dignitaries See More Box Style */

.btn-secondary,

.btn-outline {

    background-color: #eff6ff;

    color: #1e3a8a;

    border: 1.5px solid #bfdbfe;

    border-radius: var(--radius-full);

    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.08);

}



.btn-secondary:hover,

.btn-outline:hover {

    background-color: #dbeafe;

    border-color: #93c5fd;

    color: #1d4ed8;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.14);

    text-decoration: none;

}



/* Material Red / Emergency Button (#dc2626) - Pill Shape */

.btn-emergency,

.btn-danger {

    background-color: #dc2626;

    color: #ffffff;

    border: 1.5px solid #b91c1c;

    border-radius: var(--radius-full);

    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);

}



.btn-emergency:hover,

.btn-danger:hover {

    background-color: #b91c1c;

    border-color: #991b1b;

    color: #ffffff;

    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);

    transform: translateY(-1px);

    text-decoration: none;

}



/* Material Amber / Cyber Warning Button (#d97706) - Pill Shape */

.btn-accent,

.btn-warning {

    background-color: #d97706;

    color: #ffffff;

    border: 1.5px solid #b45309;

    border-radius: var(--radius-full);

    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);

}



.btn-accent:hover,

.btn-warning:hover {

    background-color: #b45309;

    border-color: #92400e;

    color: #ffffff;

    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);

    transform: translateY(-1px);

    text-decoration: none;

}



/* Material Success Button (#16a34a) - Pill Shape */

.btn-success {

    background-color: #16a34a;

    color: #ffffff;

    border: 1.5px solid #15803d;

    border-radius: var(--radius-full);

    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);

}



.btn-success:hover {

    background-color: #15803d;

    border-color: #166534;

    color: #ffffff;

    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);

    transform: translateY(-1px);

    text-decoration: none;

}



/* Material Button Sizes - All Calibrated to Exact Pill Shape & Proportions */

.btn-sm {

    padding: 6px 16px;

    font-size: 0.8rem;

    border-radius: var(--radius-full);

    letter-spacing: 0.02em;

}



.btn-lg {

    padding: 10px 24px;

    font-size: 0.94rem;

    border-radius: var(--radius-full);

}



/* Material UI 2.0 / M3 Segmented Tab Bar */

.mui-tabs-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 28px;

    flex-wrap: wrap;

    background: #f1f5f9;

    padding: 6px;

    border-radius: 9999px;

    border: 1px solid #e2e8f0;

    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);

    max-width: fit-content;

    margin-left: auto;

    margin-right: auto;

}



.mui-tab-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 22px;

    font-size: 0.92rem;

    font-weight: 700;

    color: #475569;

    background: transparent;

    border: none;

    border-radius: 9999px;

    cursor: pointer;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    text-decoration: none;

    user-select: none;

}



.mui-tab-btn:hover {

    color: #1976d2;

    background: rgba(255, 255, 255, 0.75);

}



.mui-tab-btn.active {

    background: #1976d2;

    color: #ffffff;

    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);

    transform: translateY(-1px);

}



.mui-tab-btn .tab-icon {

    font-size: 1.15rem;

    line-height: 1;

}



.mui-tab-content {

    display: none;

    animation: muiFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.mui-tab-content.active {

    display: block;

}



@keyframes muiFadeIn {

    from {

        opacity: 0;

        transform: translateY(6px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@media (max-width: 820px) {

    .mui-tabs-nav {

        border-radius: var(--radius-md);

        justify-content: flex-start;

        overflow-x: auto;

        width: 100%;

        max-width: 100%;

        padding: 6px;

        flex-wrap: nowrap;

        scrollbar-width: none;

    }

    .mui-tabs-nav::-webkit-scrollbar {

        display: none;

    }

    .mui-tab-btn {

        white-space: nowrap;

        padding: 8px 16px;

        font-size: 0.85rem;

    }

}



/* Hero Quick Locator Card */

.hero-card {

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: 18px;

    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);

    padding: 24px;

}



.hero-card-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--color-border);

}



.hero-card-title {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--color-primary-800);

}



/* Quick Station Finder Search & Autocomplete in Hero Card */

.hero-search-input-wrap {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

}



.hero-search-icon {

    position: absolute;

    left: 12px;

    color: var(--color-primary-600, #1d4ed8);

    pointer-events: none;

    flex-shrink: 0;

    transition: color 0.2s ease;

}



.hero-station-search-input {

    width: 100%;

    padding: 10px 36px 10px 38px !important;

    font-size: 0.88rem;

    border: 1.5px solid #93c5fd;

    border-radius: var(--radius-md, 10px);

    background: #ffffff;

    color: var(--color-text-main);

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

    box-sizing: border-box;

}



.hero-station-search-input:focus {

    outline: none;

    border-color: var(--color-primary-600, #1d4ed8);

    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);

    background: #ffffff;

}



.hero-search-input-wrap:focus-within .hero-search-icon {

    color: var(--color-primary-800, #0b2545);

}



.hero-search-clear-btn {

    position: absolute;

    right: 8px;

    background: transparent;

    border: none;

    color: #94a3b8;

    font-size: 1.25rem;

    line-height: 1;

    cursor: pointer;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: color 0.15s ease, background-color 0.15s ease;

}



.hero-search-clear-btn:hover {

    color: #0f172a;

    background: #e2e8f0;

}



.hero-station-suggest-box {

    position: absolute;

    top: calc(100% + 5px);

    left: 0;

    right: 0;

    background: #ffffff;

    border: 1.5px solid #93c5fd;

    border-radius: 12px;

    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.22), 0 4px 8px -2px rgba(15, 23, 42, 0.08);

    max-height: 260px;

    overflow-y: auto;

    z-index: 1020;

    padding: 6px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.hero-suggest-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 9px 12px;

    border-radius: 8px;

    text-decoration: none;

    color: inherit;

    cursor: pointer;

    transition: background 0.15s ease;

    border-left: 3px solid transparent;

}



.hero-suggest-item:hover,

.hero-suggest-item.is-selected {

    background: #eff6ff;

    border-left-color: var(--color-primary-600, #1d4ed8);

}



.hero-suggest-item-info {

    flex: 1;

    min-width: 0;

}



.hero-suggest-item-name {

    font-weight: 700;

    font-size: 0.90rem;

    color: var(--color-primary-900, #081a30);

    line-height: 1.3;

}



.hero-suggest-item-name mark {

    background: #fef08a;

    color: #854d0e;

    padding: 0 2px;

    border-radius: 2px;

}



.hero-suggest-item-meta {

    font-size: 0.76rem;

    color: var(--color-text-muted);

    margin-top: 2px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.hero-suggest-badge {

    font-size: 0.70rem;

    font-weight: 700;

    padding: 2px 7px;

    border-radius: 4px;

    background: #e0f2fe;

    color: #0369a1;

    white-space: nowrap;

    flex-shrink: 0;

}



.hero-suggest-empty {

    padding: 16px 12px;

    text-align: center;

    font-size: 0.85rem;

    color: var(--color-text-muted);

}



/* Performance Dashboard Strip */

.stats-strip {

    background: #ffffff;

    border-bottom: 1px solid var(--color-border);

    padding: 24px 0;

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 16px;

}



.stat-item {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 18px;

    padding: 16px 14px;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

    text-align: center;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.stat-item:hover {

    transform: translateY(-2px);

    background: #dbeafe;

    border-color: #93c5fd;

    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.12);

}



@media (max-width: 768px) {

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

    }

    .stats-grid .stat-item:last-child {

        grid-column: span 2;

    }

    .stat-item {

        padding: 14px 10px;

    }

}



.stat-title {

    font-size: 0.85rem;

    color: var(--color-text-muted);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.03em;

}



.stat-value {

    font-size: 1.75rem;

    font-weight: 800;

    color: var(--color-primary-800);

    margin: 4px 0;

}



.stat-sub {

    font-size: 0.82rem;

    color: var(--color-text-body);

}



/* Section Common - Calibrated Spacing */

.section {

    padding: clamp(20px, 3vw, 30px) 0;

}



.section-alt {

    background-color: #ffffff;

    border-top: 1px solid var(--color-border);

    border-bottom: 1px solid var(--color-border);

}



.section-header {

    text-align: center;

    max-width: 780px;

    margin: 0 auto clamp(12px, 2vw, 16px);

}



.section-badge {

    display: inline-block;

    background: var(--color-accent-100);

    color: var(--color-accent-600);

    font-size: 0.76rem;

    font-weight: 700;

    padding: 3px 10px;

    border-radius: var(--radius-full);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 8px;

}



.section-title {

    font-size: 2rem;

    font-weight: 800;

    color: var(--color-primary-900);

    line-height: 1.25;

    margin-bottom: 12px;

}



.section-desc {

    font-size: 1.05rem;

    color: var(--color-text-muted);

    line-height: 1.6;

}



/* Services Grid */

.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 24px;

}



/* --- Services Grid See More / See Less (Desktop & Mobile) --- */

.services-see-more-wrap {

    display: flex !important;

    justify-content: center;

    margin-top: 18px;

    width: 100%;

}



.services-grid:not(.show-all) .service-card-extra {

    display: none !important;

}



.services-grid.show-all .service-card-extra {

    display: flex !important;

    animation: cardExpandIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;

}

.services-grid.show-all .service-card-extra:nth-child(4) { animation-delay: 0s; }

.services-grid.show-all .service-card-extra:nth-child(5) { animation-delay: 0.05s; }

.services-grid.show-all .service-card-extra:nth-child(6) { animation-delay: 0.1s; }



.services-grid.is-collapsing .service-card-extra {

    display: flex !important;

    animation: cardCollapseOut 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;

}

.services-grid.is-collapsing .service-card-extra:nth-child(6) { animation-delay: 0s; }

.services-grid.is-collapsing .service-card-extra:nth-child(5) { animation-delay: 0.04s; }

.services-grid.is-collapsing .service-card-extra:nth-child(4) { animation-delay: 0.08s; }



.service-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 18px;

    padding: 24px;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

}



.service-card:hover {

    background: #dbeafe;

    border-color: #93c5fd;

    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.14);

    transform: translateY(-2px);

}



.service-icon-box {

    width: 48px;

    height: 48px;

    border-radius: var(--radius-md);

    background: #eff6ff;

    color: var(--color-primary-700);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 16px;

}



.service-title {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--color-primary-800);

    margin-bottom: 8px;

}



.service-desc {

    font-size: 0.92rem;

    color: var(--color-text-body);

    margin-bottom: 20px;

    flex-grow: 1;

}



.service-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 0.84rem;

    border-top: 1px solid var(--color-surface-subtle);

    padding-top: 14px;

}



.portal-tag {

    font-weight: 600;

    color: var(--color-accent-600);

}



/* Police Station Directory & Map */

.stations-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 28px;

}



.stations-list {

    max-height: 400px;

    overflow-y: auto;

    padding-right: 6px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.station-item-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 14px;

    padding: 12px 14px;

    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.06);

    transition: all 0.2s ease;

    cursor: pointer;

}



.station-item-card:hover,

.station-item-card.active {

    border-color: #93c5fd;

    background-color: #dbeafe;

}



.station-map-container {

    height: 400px;

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border);

    overflow: hidden;

    position: sticky;

    top: 90px;

}



#stationMap {

    width: 100%;

    height: 100%;

}



/* News & Notices Cards */

.news-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.news-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

    display: flex;

    flex-direction: column;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

}



.news-card:hover {

    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.14);

    background: #dbeafe;

    border-color: #93c5fd;

    transform: translateY(-2px);

}



.news-card-img {

    height: 190px;

    object-fit: cover;

    background: var(--color-surface-subtle);

}



.news-card-body {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.news-meta {

    font-size: 0.8rem;

    color: var(--color-text-muted);

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.news-title {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--color-primary-900);

    margin-bottom: 10px;

    line-height: 1.35;

}



.news-summary {

    font-size: 0.92rem;

    color: var(--color-text-body);

    margin-bottom: 16px;

    flex-grow: 1;

}



/* Notices List */

.notices-table-wrapper {

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}



.notices-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.92rem;

}



.notices-table th {

    background: var(--color-primary-900);

    color: #ffffff;

    text-align: left;

    padding: 14px 18px;

    font-weight: 700;

}



.notices-table td {

    padding: 16px 18px;

    border-bottom: 1px solid var(--color-border);

}



.notices-table tr:hover {

    background-color: var(--color-surface-bg);

}



/* Leadership Card */

.leader-card {

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    padding: 32px;

    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 32px;

    align-items: center;

    box-shadow: var(--shadow-md);

}



.leader-photo {

    width: 240px;

    height: 280px;

    object-fit: cover;

    border-radius: var(--radius-md);

    border: 3px solid var(--color-primary-800);

}



.leader-quote {

    font-style: italic;

    color: var(--color-primary-800);

    font-weight: 600;

    font-size: 1.1rem;

    margin-bottom: 14px;

}



/* Accordion Component */

.accordion {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.accordion-item {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.06);

    transition: all 0.2s ease;

}



.accordion-header {

    width: 100%;

    text-align: left;

    background: none;

    border: none;

    padding: 18px 22px;

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--color-primary-900);

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    transition: var(--transition);

}



.accordion-header:hover {

    background-color: var(--color-surface-subtle);

}



.accordion-body {

    padding: 0 22px 18px;

    color: var(--color-text-body);

    font-size: 0.95rem;

    line-height: 1.6;

    display: none;

}



.accordion-item.open .accordion-body {

    display: block;

}



/* Form Styles */

.form-group {

    margin-bottom: 18px;

}



.form-label {

    display: block;

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--color-primary-900);

    margin-bottom: 6px;

}



.form-control {

    width: 100%;

    padding: 10px 14px;

    font-size: 0.95rem;

    border: 1px solid var(--color-border-subtle);

    border-radius: var(--radius-sm);

    background-color: #ffffff;

    color: var(--color-text-main);

    transition: var(--transition);

}



.form-control:focus {

    outline: none;

    border-color: var(--color-primary-700);

    box-shadow: 0 0 0 3px rgba(19, 49, 92, 0.15);

}



/* Chatbot Floating Widget & Quick Action Dock */

.chatbot-bubble {

    position: fixed;

    bottom: 24px;

    right: 20px;

    z-index: 1050;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}



/* Vertical Floating Action Dock (Social Media Speed-Dial stacked ABOVE Classic Police AI Message Button) */

.floating-quick-dock {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    position: relative;

    z-index: 1050;

}



/* Gracefully hide social button when chatbot window is open so chat gets full focus */

.chatbot-window.open + .floating-quick-dock .social-fab-container {

    opacity: 0;

    pointer-events: none;

    transform: scale(0.5);

    transition: opacity 0.2s ease, transform 0.2s ease;

}



/* 1. Classic Police AI Message Button (Restored from previous design) */

.chatbot-btn {

    background: var(--color-primary-800, #081a30);

    color: #ffffff;

    border: 2.5px solid #ffffff;

    width: 54px;

    height: 54px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 4px 16px rgba(8, 26, 48, 0.35);

    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease;

    position: relative;

    outline: none;

    flex-shrink: 0;

}



.chatbot-btn:hover {

    transform: scale(1.08) translateY(-2px);

    background: var(--color-primary-900, #0f172a);

    box-shadow: 0 6px 20px rgba(8, 26, 48, 0.45);

}



.chatbot-btn:active {

    transform: scale(0.96);

}



.chatbot-btn .msg-icon-close {

    display: none;

}



.chatbot-btn.is-active {

    background: #0f172a;

}



.chatbot-btn.is-active .msg-icon-chat {

    display: none;

}



.chatbot-btn.is-active .msg-icon-close {

    display: block;

}



.chatbot-online-pulse {

    position: absolute;

    top: 2px;

    right: 2px;

    width: 12px;

    height: 12px;

    background: #22c55e;

    border: 2px solid #ffffff;

    border-radius: 50%;

    box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);

    animation: pulseDot 2s infinite ease-in-out;

}







/* 2. Social Media Speed Dial Container & Trigger Button */

.social-fab-container {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.social-fab-trigger-btn {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);

    color: #ffffff;

    border: 2.5px solid #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.38);

    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease;

    outline: none;

    position: relative;

    flex-shrink: 0;

}



.social-fab-trigger-btn:hover {

    transform: scale(1.08) translateY(-2px);

    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.48);

}



.social-fab-trigger-btn:active {

    transform: scale(0.96);

}



.social-fab-trigger-btn .fab-icon-close {

    display: none;

}



.social-fab-container.is-open .social-fab-trigger-btn {

    background: #0f172a;

    transform: rotate(90deg);

}



.social-fab-container.is-open .fab-icon-share {

    display: none;

}



.social-fab-container.is-open .fab-icon-close {

    display: block;

}







/* Social Media Menu Pop-Up (Hidden by default, pops up above button when clicked) */

.social-fab-menu {

    position: absolute;

    bottom: 66px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    gap: 10px;

    align-items: center;

    pointer-events: none;

    z-index: 1055;

}



.social-fab-container.is-open .social-fab-menu {

    pointer-events: auto;

}



.social-fab-item {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

    position: relative;

    border: 2px solid #ffffff;

    flex-shrink: 0;

    

    /* Pop-down / Inside state (default) */

    opacity: 0;

    transform: translateY(28px) scale(0.3);

    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease, box-shadow 0.2s ease;

}



.social-fab-container.is-open .social-fab-item {

    opacity: 1;

    transform: translateY(0) scale(1);

    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, box-shadow 0.2s ease;

}



/* Stagger when popping UP from bottom (WhatsApp first, then X, then Insta, then FB) */

.social-fab-container.is-open .social-fab-item:nth-child(4) { transition-delay: 0.03s; }

.social-fab-container.is-open .social-fab-item:nth-child(3) { transition-delay: 0.08s; }

.social-fab-container.is-open .social-fab-item:nth-child(2) { transition-delay: 0.13s; }

.social-fab-container.is-open .social-fab-item:nth-child(1) { transition-delay: 0.18s; }



/* Stagger when folding BACK DOWN inside (FB folds first, then Insta, then X, then WhatsApp) */

.social-fab-container:not(.is-open) .social-fab-item:nth-child(1) { transition-delay: 0.02s; }

.social-fab-container:not(.is-open) .social-fab-item:nth-child(2) { transition-delay: 0.06s; }

.social-fab-container:not(.is-open) .social-fab-item:nth-child(3) { transition-delay: 0.1s; }

.social-fab-container:not(.is-open) .social-fab-item:nth-child(4) { transition-delay: 0.14s; }



.social-fab-item:hover {

    transform: scale(1.15) translateY(-2px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

}



.social-fab-item:active {

    transform: scale(0.95);

}



/* Authentic Social Colors */

.dock-btn-fb {

    background: #1877F2;

    color: #ffffff;

}



.dock-btn-insta {

    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

    color: #ffffff;

}



.dock-btn-x {

    background: #0f1419;

    color: #ffffff;

}



.dock-btn-wa {

    background: #25D366;

    color: #ffffff;

}



.social-fab-label {

    position: absolute;

    right: 52px;

    background: rgba(15, 23, 42, 0.94);

    color: #ffffff;

    font-size: 0.72rem;

    font-weight: 700;

    padding: 3px 8px;

    border-radius: 6px;

    white-space: nowrap;

    opacity: 0;

    pointer-events: none;

    transform: translateX(6px);

    transition: all 0.2s ease;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.12);

}



.social-fab-item:hover .social-fab-label {

    opacity: 1;

    transform: translateX(0);

}



@keyframes pulseDot {

    0%, 100% { transform: scale(1); opacity: 1; }

    50% { transform: scale(1.15); opacity: 0.85; }

}



.chatbot-window {

    width: 360px;

    height: 480px;

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);

    display: none;

    flex-direction: column;

    overflow: hidden;

    margin-bottom: 12px;

}



.chatbot-window.open {

    display: flex;

}



.chatbot-header {

    background: var(--color-primary-900);

    color: #ffffff;

    padding: 14px 16px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.chatbot-messages {

    flex-grow: 1;

    overflow-y: auto;

    padding: 16px;

    display: flex;

    flex-direction: column;

    gap: 12px;

    background: var(--color-surface-bg);

}



.chat-bubble {

    max-width: 80%;

    padding: 10px 14px;

    border-radius: var(--radius-md);

    font-size: 0.88rem;

    line-height: 1.45;

}



.chat-bubble.bot {

    background: #ffffff;

    border: 1px solid var(--color-border);

    color: var(--color-text-main);

    align-self: flex-start;

    border-bottom-left-radius: 2px;

}



.chat-bubble.user {

    background: var(--color-primary-800);

    color: #ffffff;

    align-self: flex-end;

    border-bottom-right-radius: 2px;

}



.chatbot-input-bar {

    padding: 12px;

    border-top: 1px solid var(--color-border);

    display: flex;

    gap: 8px;

    background: #ffffff;

}



/* --- Dedicated Social Media Connect Strip (Exact Thane Police Match) --- */

.social-connect-strip {

    background: #ffffff;

    border-top: 1px solid var(--color-border);

    border-bottom: 1px solid var(--color-border);

    padding: 22px 0;

}



.social-connect-inner {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

}



.social-icons-group {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    flex-wrap: wrap;

}



.social-icon-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border-radius: var(--radius-full);

    color: #475569;

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    text-decoration: none;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

    -webkit-tap-highlight-color: transparent;

    cursor: pointer;

    position: relative;

    user-select: none;

    -webkit-user-select: none;

}



.social-icon-btn .social-svg {

    width: 22px;

    height: 22px;

    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.social-icon-btn:hover,

.social-icon-btn:active,

.social-icon-btn:focus,

.social-icon-btn:focus-visible,

.social-icon-btn.is-touched {

    transform: translateY(-4px) scale(1.1);

    outline: none;

    text-decoration: none;

}



.social-icon-btn:hover .social-svg,

.social-icon-btn:active .social-svg,

.social-icon-btn:focus .social-svg,

.social-icon-btn:focus-visible .social-svg,

.social-icon-btn.is-touched .social-svg {

    transform: scale(1.15);

}



/* 1. X (Twitter): Pure Black with White Icon */

.social-icon-btn.x-icon:hover,

.social-icon-btn.x-icon:active,

.social-icon-btn.x-icon:focus,

.social-icon-btn.x-icon:focus-visible,

.social-icon-btn.x-icon.is-touched {

    background: #000000 !important;

    color: #ffffff !important;

    border-color: #000000 !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38) !important;

}



/* 2. Instagram: Real Authentic Instagram Gradient */

.social-icon-btn.insta-icon:hover,

.social-icon-btn.insta-icon:active,

.social-icon-btn.insta-icon:focus,

.social-icon-btn.insta-icon:focus-visible,

.social-icon-btn.insta-icon.is-touched {

    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;

    color: #ffffff !important;

    border-color: transparent !important;

    box-shadow: 0 8px 24px rgba(214, 36, 159, 0.45) !important;

}



/* 3. Facebook: Real Official Facebook Blue */

.social-icon-btn.fb-icon:hover,

.social-icon-btn.fb-icon:active,

.social-icon-btn.fb-icon:focus,

.social-icon-btn.fb-icon:focus-visible,

.social-icon-btn.fb-icon.is-touched {

    background: #1877f2 !important;

    color: #ffffff !important;

    border-color: #1877f2 !important;

    box-shadow: 0 8px 24px rgba(24, 119, 242, 0.45) !important;

}



/* 4. WhatsApp: Real Official WhatsApp Green */

.social-icon-btn.wa-icon:hover,

.social-icon-btn.wa-icon:active,

.social-icon-btn.wa-icon:focus,

.social-icon-btn.wa-icon:focus-visible,

.social-icon-btn.wa-icon.is-touched {

    background: #25d366 !important;

    color: #ffffff !important;

    border-color: #25d366 !important;

    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.48) !important;

}



/* 5. YouTube: Real Official YouTube Red */

.social-icon-btn.yt-icon:hover,

.social-icon-btn.yt-icon:active,

.social-icon-btn.yt-icon:focus,

.social-icon-btn.yt-icon:focus-visible,

.social-icon-btn.yt-icon.is-touched {

    background: #ff0000 !important;

    color: #ffffff !important;

    border-color: #ff0000 !important;

    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.45) !important;

}



/* Dark Mode support for social connect strip */

[data-theme="dark"] .social-connect-strip,

body.dark-mode .social-connect-strip {

    background: #0d1527;

    border-color: #1e293b;

}



[data-theme="dark"] .social-icon-btn,

body.dark-mode .social-icon-btn {

    background: #1a263d;

    border-color: #2b3b55;

    color: #94a3b8;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);

}



/* Site Footer */

.site-footer {

    background-color: var(--color-primary-900);

    color: #e2e8f0;

    margin-top: auto;

    border-top: 4px solid var(--color-accent-500);

}



.footer-top {

    padding: 56px 0 36px;

}



.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 36px;

}



.footer-title {

    color: #ffffff;

    font-size: 1.05rem;

    font-weight: 700;

    margin-bottom: 16px;

    position: relative;

    padding-bottom: 8px;

}



.footer-title::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 32px;

    height: 2px;

    background: var(--color-accent-500);

}



.footer-links {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.footer-links a {

    color: #cbd5e1;

    font-size: 0.9rem;

    text-decoration: none !important;

    display: inline-block;

    transition: color 0.2s ease, transform 0.2s ease;

}



.footer-links a:hover,

.footer-links a:focus,

.footer-links a:active {

    color: #ffffff !important;

    text-decoration: none !important;

    outline: none !important;

    transform: translateX(4px);

}



.footer-bottom {

    background: #040e1a;

    padding: 22px 0;

    font-size: 0.85rem;

    color: #94a3b8;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.footer-bottom-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

}



.footer-bottom-info {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.footer-copyright-text {

    font-size: 0.86rem;

    color: #cbd5e1;

    font-weight: 500;

    line-height: 1.5;

}



.footer-dev-credit {

    font-size: 0.84rem;

    color: #94a3b8;

    display: inline-flex;

    align-items: center;

    flex-wrap: nowrap;

    white-space: nowrap;

    gap: 5px;

    line-height: 1.5;

}



.footer-dev-link {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #38bdf8;

    font-weight: 700;

    text-decoration: underline;

    text-decoration-thickness: 1.5px;

    text-underline-offset: 3px;

    text-decoration-color: rgba(56, 189, 248, 0.4);

    transition: all 0.2s ease-in-out;

}



.footer-dev-link:hover {

    color: #7dd3fc;

    text-decoration-color: #7dd3fc;

    text-shadow: 0 0 10px rgba(56, 189, 248, 0.45);

}



/* Red Heart GIF-like Beat Animation */

.heart-pulse {

    display: inline-block;

    color: #ef4444;

    font-size: 1.18em;

    margin: 0 3px;

    vertical-align: -1px;

    animation: heartBeatGif 1.25s infinite ease-in-out;

    transform-origin: center center;

    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.75));

    will-change: transform;

}



@keyframes heartBeatGif {

    0% {

        transform: scale(1);

    }

    14% {

        transform: scale(1.32);

    }

    28% {

        transform: scale(1);

    }

    42% {

        transform: scale(1.38);

    }

    70% {

        transform: scale(1);

    }

    100% {

        transform: scale(1);

    }

}



.footer-disclaimer-text {

    font-size: 0.78rem;

    color: #94a3b8;

    max-width: 620px;

    text-align: right;

    line-height: 1.5;

}



@media (max-width: 768px) {

    .footer-bottom {

        padding-top: 24px;

        padding-bottom: 120px !important;

    }

    .footer-bottom-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;

        width: 100%;

        max-width: 100%;

    }

    .footer-dev-credit {

        font-size: clamp(0.68rem, 2.85vw, 0.78rem);

        white-space: nowrap;

        display: inline-flex;

        align-items: center;

        flex-wrap: nowrap;

        gap: 4px;

        background: rgba(255, 255, 255, 0.06);

        padding: 5px 12px;

        border-radius: 999px;

        border: 1px solid rgba(56, 189, 248, 0.25);

        margin-top: 6px;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        box-sizing: border-box;

        max-width: 100%;

    }

    .footer-dev-credit .heart-pulse {

        font-size: 1.08em;

        margin: 0 2px;

    }

    .footer-dev-credit .footer-dev-link {

        font-weight: 700;

        font-size: clamp(0.70rem, 2.95vw, 0.80rem);

    }

    .footer-disclaimer-text {

        text-align: left;

    }

}





/* Responsive Media Queries */

@media (max-width: 1024px) {

    .hero-grid {

        grid-template-columns: 1fr;

    }

    .stations-layout {

        grid-template-columns: 1fr;

    }

    .station-map-container {

        position: static;

        height: 400px;

    }

    .news-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .footer-grid {

        grid-template-columns: 1fr 1fr;

    }

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 24px;

    }

    .stat-item {

        border-right: none;

        border-bottom: 1px solid var(--color-border);

        padding-bottom: 12px;

    }

}



@media (max-width: 768px) {

    .nav-desktop {

        display: none;

    }

    .mobile-menu-toggle {

        display: block;

    }

    .hero-title {

        font-size: 1.85rem;

    }

    .news-grid {

        grid-template-columns: 1fr;

    }

    .footer-grid {

        grid-template-columns: 1fr;

    }

    .leader-card {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .leader-photo {

        margin: 0 auto;

    }

    /* Mobile Responsive Floating Action Buttons & Chatbot Window */

    .chatbot-bubble {

        bottom: 18px;

        right: 14px;

        z-index: 1050;

    }



    .floating-quick-dock {

        gap: 8px;

    }



    .chatbot-btn {

        width: 50px;

        height: 50px;

        border-width: 2.5px;

        box-shadow: 0 4px 14px rgba(8, 26, 48, 0.4);

    }



    .chatbot-btn .msg-icon-chat {

        width: 23px;

        height: 23px;

    }



    .chatbot-btn .msg-icon-close {

        width: 20px;

        height: 20px;

    }



    .chatbot-online-pulse {

        width: 10px;

        height: 10px;

        top: 2px;

        right: 2px;

    }



    .social-fab-trigger-btn {

        width: 50px;

        height: 50px;

        border-width: 2.5px;

        box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4);

    }



    .social-fab-trigger-btn .fab-icon-share {

        width: 22px;

        height: 22px;

    }



    .social-fab-trigger-btn .fab-icon-close {

        width: 20px;

        height: 20px;

    }



    .social-fab-menu {

        bottom: 58px;

        gap: 8px;

    }



    .social-fab-item {

        width: 40px;

        height: 40px;

        border-width: 2px;

        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);

    }



    .social-fab-item .dock-svg {

        width: 18px;

        height: 18px;

    }



    /* On mobile, show labels clearly when menu is open so user knows what each platform is */

    .social-fab-container.is-open .social-fab-label {

        opacity: 1;

        transform: translateX(0);

        pointer-events: auto;

    }



    .social-fab-label {

        right: 48px;

        font-size: 0.72rem;

        padding: 4px 9px;

        border-radius: 6px;

        background: rgba(15, 23, 42, 0.96);

        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);

        border: 1px solid rgba(255, 255, 255, 0.18);

        backdrop-filter: blur(8px);

    }



    .chatbot-window {

        position: fixed;

        bottom: 76px;

        right: 12px;

        left: 12px;

        width: calc(100vw - 24px);

        max-width: 390px;

        height: min(490px, calc(100vh - 100px));

        margin: 0 0 0 auto;

        border-radius: 18px;

        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);

        z-index: 1060;

    }

}



/* --- Visual Photo Enhancements (Thane Police Reference Benchmark) --- */

.service-card {

    padding: 0;

    overflow: hidden;

}



.service-card-media {

    position: relative;

    height: 110px;

    width: 100%;

    overflow: hidden;

    background: #e2e8f0;

}



.service-card-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;

}



.service-card:hover .service-card-img {

    transform: scale(1.06);

}



.service-card-badge {

    position: absolute;

    top: 10px;

    right: 10px;

    background: rgba(11, 37, 69, 0.88);

    color: #ffffff;

    font-size: 0.7rem;

    font-weight: 700;

    padding: 2px 8px;

    border-radius: var(--radius-sm);

    backdrop-filter: blur(4px);

}



.service-card-content {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    justify-content: space-between;

}



/* Officer Portrait Cards */

.officer-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));

    gap: 24px;

}



.officer-card {

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

    display: flex;

    flex-direction: column;

}



.officer-card:hover {

    box-shadow: var(--shadow-md);

    transform: translateY(-3px);

    border-color: var(--color-primary-600);

}



.officer-photo-wrap {

    height: 250px;

    background: #f1f5f9;

    overflow: hidden;

    position: relative;

}



.officer-photo {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top center;

    transition: transform 0.35s ease;

}



.officer-card:hover .officer-photo {

    transform: scale(1.04);

}



.officer-card-tag {

    position: absolute;

    top: 12px;

    left: 12px;

    background: rgba(11, 37, 69, 0.9);

    color: #ffffff;

    font-size: 0.72rem;

    font-weight: 700;

    padding: 3px 10px;

    border-radius: var(--radius-full);

    backdrop-filter: blur(4px);

    letter-spacing: 0.03em;

    text-transform: uppercase;

}



.officer-details {

    padding: 20px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



/* Community Initiatives & Field Gallery */

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

}



@media (max-width: 900px) {

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 576px) {

    .gallery-grid {

        grid-template-columns: 1fr;

    }

}



.gallery-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

}



.gallery-card:hover {

    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.14);

    transform: translateY(-2px);

    background: #dbeafe;

    border-color: #93c5fd;

}



.gallery-media {

    height: 110px;

    overflow: hidden;

    position: relative;

}



.gallery-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.gallery-card:hover .gallery-img {

    transform: scale(1.06);

}



.gallery-badge {

    position: absolute;

    bottom: 12px;

    left: 12px;

    background: rgba(11, 37, 69, 0.88);

    color: #ffffff;

    font-size: 0.75rem;

    font-weight: 700;

    padding: 3px 10px;

    border-radius: var(--radius-sm);

    backdrop-filter: blur(4px);

}



.gallery-body {

    padding: 18px 20px;

}



/* Official Government Portal Logos Strip (Material UI 2.0 Hub) */

.portal-strip-section {

    background: #f8fafc;

    border-top: 1px solid #e2e8f0;

    border-bottom: 1px solid #e2e8f0;

    padding: 30px 0 34px;

}



.portal-strip-header {

    text-align: center;

    margin-bottom: 20px;

}



.portal-strip-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #ffffff;

    border: 1px solid #cbd5e1;

    color: #1e3a8a;

    font-size: 0.78rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    padding: 6px 18px;

    border-radius: 9999px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

}



.portal-marquee-container {

    position: relative;

    width: 100%;

    display: flex;

    align-items: center;

}



.portal-marquee-viewport {

    overflow: hidden;

    width: 100%;

    position: relative;

    padding: 10px 0;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 48px, #000 calc(100% - 48px), transparent 100%);

    mask-image: linear-gradient(to right, transparent 0%, #000 48px, #000 calc(100% - 48px), transparent 100%);

}



.portal-marquee-track {

    display: flex;

    width: max-content;

    will-change: transform;

    animation: portalScrollOpposite 40s linear infinite;

}



.portal-marquee-container:hover .portal-marquee-track,

.portal-marquee-track:hover {

    animation-play-state: paused;

}



.portal-marquee-group {

    display: flex;

    gap: 16px;

    padding-right: 16px;

    flex-shrink: 0;

}



@keyframes portalScrollOpposite {

    0% {

        transform: translateX(0%);

    }

    100% {

        transform: translateX(-50%);

    }

}



.portal-badge-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 14px;

    padding: 12px 14px 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    width: 165px;

    min-width: 165px;

    min-height: 98px;

    flex-shrink: 0;

    text-decoration: none;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

    position: relative;

    overflow: hidden;

}



.portal-badge-card:hover {

    background: #ffffff;

    border-color: #1e3a8a;

    transform: translateY(-4px);

    box-shadow: 0 10px 22px -4px rgba(30, 58, 138, 0.16);

}



.portal-badge-logo-wrap {

    height: 44px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 6px;

}



.portal-badge-logo-wrap img {

    max-height: 40px;

    max-width: 115px;

    width: auto;

    height: auto;

    object-fit: contain;

    transition: transform 0.2s ease;

    display: block;

}



.portal-badge-card:hover .portal-badge-logo-wrap img {

    transform: scale(1.08);

}



.portal-badge-label {

    font-size: 0.76rem;

    font-weight: 700;

    color: #1e293b;

    line-height: 1.25;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    letter-spacing: 0.01em;

    transition: color 0.2s ease;

}



.portal-badge-card:hover .portal-badge-label {

    color: #1e3a8a;

}



.portal-arrow-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #ffffff;

    border: 1.5px solid #cbd5e1;

    color: #1e3a8a;

    font-size: 1.4rem;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    transition: all 0.2s ease;

    opacity: 0.85;

}



.portal-arrow-btn:hover {

    background: #1e3a8a;

    color: #ffffff;

    border-color: #1e3a8a;

    opacity: 1;

    transform: translateY(-50%) scale(1.08);

}



.portal-arrow-left {

    left: -12px;

}



.portal-arrow-right {

    right: -12px;

}



@media (max-width: 768px) {

    .portal-arrow-btn {

        display: none;

    }

    .portal-badge-card {

        width: 135px;

        min-width: 135px;

        min-height: 88px;

        padding: 10px 8px 8px;

    }

    .portal-badge-logo-wrap {

        height: 38px;

    }

    .portal-badge-logo-wrap img {

        max-height: 34px;

        max-width: 90px;

    }

    .portal-badge-label {

        font-size: 0.68rem;

    }

    .portal-marquee-viewport {

        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20px, #000 calc(100% - 20px), transparent 100%);

        mask-image: linear-gradient(to right, transparent 0%, #000 20px, #000 calc(100% - 20px), transparent 100%);

    }

}



/* --- Dignitaries Section (आमचे नेतृत्व / State & Department Leadership) --- */

.dignitaries-section {

    background: #ffffff;

    border-bottom: 1px solid var(--color-border);

    padding: 14px 0 16px;

}



.dignitaries-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 16px;

    align-items: stretch;

}



@media (max-width: 1200px) {

    .dignitaries-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 14px;

    }

}



@media (max-width: 768px) {

    .dignitaries-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 8px;

    }



    .dignitaries-see-more-wrap {

        display: flex !important;

        justify-content: center;

        margin-top: 18px;

    }



    .dignitaries-grid .dignitary-card-extra {

        display: none;

    }



    .dignitaries-grid.show-all .dignitary-card-extra {

        display: flex;

        animation: cardExpandIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;

    }

    .dignitaries-grid.show-all .dignitary-card-extra:nth-child(4) { animation-delay: 0s; }

    .dignitaries-grid.show-all .dignitary-card-extra:nth-child(5) { animation-delay: 0.05s; }

    .dignitaries-grid.show-all .dignitary-card-extra:nth-child(6) { animation-delay: 0.1s; }



    .dignitaries-grid.is-collapsing .dignitary-card-extra {

        display: flex;

        animation: cardCollapseOut 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;

    }

    .dignitaries-grid.is-collapsing .dignitary-card-extra:nth-child(6) { animation-delay: 0s; }

    .dignitaries-grid.is-collapsing .dignitary-card-extra:nth-child(5) { animation-delay: 0.04s; }

    .dignitaries-grid.is-collapsing .dignitary-card-extra:nth-child(4) { animation-delay: 0.08s; }

}



.dignitaries-see-more-wrap {

    display: none;

}



.dignitaries-toggle-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 8px 20px;

    border-radius: var(--radius-full);

    font-size: 0.86rem;

    font-weight: 700;

    cursor: pointer;

    background: #eff6ff;

    color: #1e3a8a;

    border: 1.5px solid #bfdbfe;

    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.08);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    -webkit-tap-highlight-color: transparent;

    user-select: none;

}



.dignitaries-toggle-btn:hover {

    background: #dbeafe;

    border-color: #93c5fd;

    color: #1d4ed8;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.14);

}



.dignitaries-toggle-btn:active {

    transform: scale(0.95);

}



.dignitaries-toggle-btn[aria-expanded="true"] {

    background: #dbeafe;

    border-color: #93c5fd;

    color: #1d4ed8;

    box-shadow: 0 3px 12px rgba(30, 58, 138, 0.12);

}



.dignitaries-toggle-shield {

    color: #1e3a8a;

    flex-shrink: 0;

    transition: transform 0.25s ease;

}



.dignitaries-toggle-btn:active .dignitaries-toggle-shield {

    transform: scale(0.9);

}



.dignitaries-toggle-icon {

    display: inline-block;

    font-size: 0.68rem;

    color: #3b82f6;

    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    transform-origin: center center;

    line-height: 1;

    margin-left: 2px;

}



.dignitaries-toggle-btn[aria-expanded="true"] .dignitaries-toggle-icon {

    transform: rotate(180deg);

}



.dignitaries-toggle-text {

    display: inline-block;

    transition: opacity 0.16s ease, transform 0.16s ease;

}



.dignitaries-toggle-btn.is-switching .dignitaries-toggle-text {

    opacity: 0;

    transform: translateY(2px);

}



@keyframes cardExpandIn {

    0% {

        opacity: 0;

        transform: translateY(14px) scale(0.97);

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



@keyframes cardCollapseOut {

    0% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

    100% {

        opacity: 0;

        transform: translateY(-12px) scale(0.96);

    }

}



html[data-theme="dark"] .dignitaries-toggle-btn {

    background: rgba(59, 130, 246, 0.15);

    color: #93c5fd;

    border: 1.5px solid rgba(59, 130, 246, 0.35);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

}



html[data-theme="dark"] .dignitaries-toggle-btn:hover,

html[data-theme="dark"] .dignitaries-toggle-btn[aria-expanded="true"] {

    background: rgba(59, 130, 246, 0.25);

    border-color: #60a5fa;

    color: #ffffff;

    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);

}



html[data-theme="dark"] .dignitaries-toggle-shield {

    color: #60a5fa;

}



html[data-theme="dark"] .dignitaries-toggle-icon {

    color: #93c5fd;

}



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

   UNIVERSAL ANIMATED SEE MORE / SEE LESS FRAMEWORK (MOBILE FIRST COLLAPSE)

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



.see-more-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 8px 20px;

    border-radius: var(--radius-full);

    font-size: 0.86rem;

    font-weight: 700;

    cursor: pointer;

    background: #eff6ff;

    color: #1e3a8a;

    border: 1.5px solid #bfdbfe;

    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.08);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    -webkit-tap-highlight-color: transparent;

    user-select: none;

}



.see-more-btn:hover {

    background: #dbeafe;

    border-color: #93c5fd;

    color: #1d4ed8;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.14);

}



.see-more-btn:active {

    transform: scale(0.95);

}



.see-more-btn[aria-expanded="true"] {

    background: #dbeafe;

    border-color: #93c5fd;

    color: #1d4ed8;

    box-shadow: 0 3px 12px rgba(30, 58, 138, 0.12);

}



.see-more-shield {

    color: #1e3a8a;

    flex-shrink: 0;

    transition: transform 0.25s ease;

}



.see-more-btn:active .see-more-shield {

    transform: scale(0.9);

}



.see-more-icon {

    display: inline-block;

    font-size: 0.68rem;

    color: #3b82f6;

    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    transform-origin: center center;

    line-height: 1;

    margin-left: 2px;

}



.see-more-btn[aria-expanded="true"] .see-more-icon {

    transform: rotate(180deg);

}



.see-more-text {

    display: inline-block;

    transition: opacity 0.16s ease, transform 0.16s ease;

}



.see-more-btn.is-switching .see-more-text {

    opacity: 0;

    transform: translateY(2px);

}



html[data-theme="dark"] .see-more-btn {

    background: rgba(59, 130, 246, 0.15);

    color: #93c5fd;

    border: 1.5px solid rgba(59, 130, 246, 0.35);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

}



html[data-theme="dark"] .see-more-btn:hover,

html[data-theme="dark"] .see-more-btn[aria-expanded="true"] {

    background: rgba(59, 130, 246, 0.25);

    border-color: #60a5fa;

    color: #ffffff;

    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);

}



html[data-theme="dark"] .see-more-shield {

    color: #60a5fa;

}



html[data-theme="dark"] .see-more-icon {

    color: #93c5fd;

}



.see-more-wrap {

    display: flex !important;

    justify-content: center;

    margin-top: 20px;

    width: 100%;

}



.see-more-container:not(.show-all) .see-more-extra {

    display: none !important;

}



.see-more-container.show-all .see-more-extra {

    display: flex !important;

    animation: cardExpandIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;

}



.see-more-container.show-all .see-more-extra.is-block {

    display: block !important;

}



.see-more-container.show-all .see-more-extra.is-list-item {

    display: list-item !important;

}



.see-more-container.is-collapsing .see-more-extra {

    display: flex !important;

    animation: cardCollapseOut 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;

}



.see-more-container.is-collapsing .see-more-extra.is-block {

    display: block !important;

}



.see-more-container.is-collapsing .see-more-extra.is-list-item {

    display: list-item !important;

}





.dignitary-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 18px;

    padding: 22px 14px 18px;

    text-align: center;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;

    flex-direction: column;

    align-items: center;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

}



.dignitary-card:hover {

    transform: translateY(-4px);

    background: #dbeafe;

    border-color: #93c5fd;

    box-shadow: 0 12px 24px -4px rgba(30, 58, 138, 0.16);

}



.dignitary-cm-card {

    background: #eff6ff;

    border: 2px solid #93c5fd;

    border-radius: 20px;

    box-shadow: 0 4px 14px rgba(30, 58, 138, 0.12);

}



.dignitary-cm-card:hover {

    background: #e0f2fe;

    border-color: #60a5fa;

    box-shadow: 0 14px 28px -4px rgba(30, 58, 138, 0.2);

}



.dignitary-avatar-wrap {

    width: 86px;

    height: 86px;

    border-radius: 50%;

    overflow: hidden;

    background: #f8fafc;

    margin-bottom: 12px;

    border: 2.5px solid #ea580c;

    box-shadow: 0 3px 10px rgba(234, 88, 12, 0.18);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.dignitary-avatar {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



.dignitary-name {

    font-size: 0.96rem;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 6px;

    line-height: 1.28;

}



.dignitary-role {

    font-size: 0.78rem;

    font-weight: 500;

    font-style: italic;

    color: #64748b;

    line-height: 1.38;

}



/* --- 8 Report Crime Cards (ठाणे पोलीस आयुक्तालयात तक्रार करा - Compact) --- */

.report-crime-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

}



@media (max-width: 992px) {

    .report-crime-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



/* --- Report Crime Cards See More / See Less (Desktop & Mobile) --- */

.report-crime-see-more-wrap {

    display: flex !important;

    justify-content: center;

    margin-top: 18px;

    width: 100%;

}



.report-crime-grid:not(.show-all) .report-crime-card-extra {

    display: none !important;

}



.report-crime-grid.show-all .report-crime-card-extra {

    display: flex !important;

    animation: cardExpandIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;

}

.report-crime-grid.show-all .report-crime-card-extra:nth-child(5) { animation-delay: 0s; }

.report-crime-grid.show-all .report-crime-card-extra:nth-child(6) { animation-delay: 0.04s; }

.report-crime-grid.show-all .report-crime-card-extra:nth-child(7) { animation-delay: 0.08s; }

.report-crime-grid.show-all .report-crime-card-extra:nth-child(8) { animation-delay: 0.12s; }



.report-crime-grid.is-collapsing .report-crime-card-extra {

    display: flex !important;

    animation: cardCollapseOut 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;

}

.report-crime-grid.is-collapsing .report-crime-card-extra:nth-child(8) { animation-delay: 0s; }

.report-crime-grid.is-collapsing .report-crime-card-extra:nth-child(7) { animation-delay: 0.03s; }

.report-crime-grid.is-collapsing .report-crime-card-extra:nth-child(6) { animation-delay: 0.06s; }

.report-crime-grid.is-collapsing .report-crime-card-extra:nth-child(5) { animation-delay: 0.09s; }



.report-crime-card {

    position: relative;

    min-height: 118px;

    height: auto;

    border-radius: 18px !important;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 12px 14px;

    text-decoration: none;

    box-shadow: 0 3px 12px rgba(11, 37, 69, 0.12);

    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    border: 1.5px solid #bfdbfe !important;

    background: #0b2545 !important;

}



.report-crime-card:hover {

    transform: translateY(-3px) !important;

    border-color: #60a5fa !important;

    box-shadow: 0 10px 24px rgba(11, 37, 69, 0.22) !important;

}



.report-crime-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

    z-index: 1;

}



.report-crime-card:hover .report-crime-bg {

    transform: scale(1.06);

}



.report-crime-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(8, 26, 48, 0.72) 0%, rgba(11, 37, 69, 0.88) 50%, rgba(8, 26, 48, 0.98) 100%);

    z-index: 2;

    transition: background 0.3s ease;

}



.report-crime-card:hover .report-crime-overlay {

    background: linear-gradient(180deg, rgba(8, 26, 48, 0.65) 0%, rgba(11, 37, 69, 0.82) 50%, rgba(8, 26, 48, 0.95) 100%);

}



.report-crime-content {

    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 100%;

    gap: 4px;

}



.report-crime-tag {

    display: inline-flex;

    align-items: center;

    align-self: flex-start;

    padding: 2.5px 8.5px;

    border-radius: 9999px;

    background: rgba(254, 240, 138, 0.16);

    border: 1px solid rgba(254, 240, 138, 0.45);

    color: #fef08a;

    font-size: 0.64rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    line-height: 1.2;

    margin-bottom: 4px;

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);

}



.report-crime-title {

    color: #ffffff;

    font-size: 0.88rem;

    font-weight: 800;

    line-height: 1.25;

    margin-bottom: 6px;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);

}



.report-crime-arrow {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    align-self: flex-start;

    font-size: 0.7rem;

    font-weight: 700;

    color: #bfdbfe;

    background: rgba(15, 23, 42, 0.6);

    border: 1px solid rgba(147, 197, 253, 0.35);

    padding: 2.5px 9px;

    border-radius: 9999px;

    transition: all 0.2s ease;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);

}



.report-crime-card:hover .report-crime-arrow {

    color: #ffffff;

    background: rgba(29, 78, 216, 0.7);

    border-color: #93c5fd;

    transform: translateX(2px);

}



/* --- Combined Leadership & WhatsApp Compact Grid --- */

.comm-wa-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    align-items: stretch;

}



.comm-spotlight-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 18px;

    padding: 20px;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

    display: flex;

    flex-direction: column;

    transition: all 0.22s ease;

}



.comm-spotlight-card:hover {

    background: #dbeafe;

    border-color: #93c5fd;

    box-shadow: 0 6px 18px rgba(30, 58, 138, 0.12);

}



.comm-avatar-box {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 10px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--color-border);

}



.comm-avatar-img {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    object-fit: cover;

    object-position: top center;

    border: 3px solid var(--color-primary-800);

    box-shadow: var(--shadow-sm);

    flex-shrink: 0;

}



.comm-name {

    font-size: 1.1rem;

    font-weight: 800;

    color: var(--color-primary-900);

    margin: 0 0 2px;

}



.comm-desig {

    font-size: 0.78rem;

    color: var(--color-accent-600);

    font-weight: 700;

    margin: 0;

}



.comm-sub {

    font-size: 0.72rem;

    color: var(--color-text-muted);

}



.comm-quote {

    font-style: italic;

    font-weight: 700;

    color: var(--color-primary-800);

    font-size: 0.88rem;

    margin-bottom: 8px;

    border-left: 3px solid var(--color-primary-800);

    padding-left: 8px;

}



.comm-body-text {

    font-size: 0.84rem;

    line-height: 1.5;

    color: var(--color-text-body);

    margin-bottom: 10px;

}



.comm-hours-box {

    background: #ffffff;

    border: 1.5px solid #bfdbfe;

    padding: 8px 12px;

    border-radius: 14px;

    border-left: 4px solid var(--color-accent-500);

    font-size: 0.78rem;

    margin-top: auto;

}



.whatsapp-compact-card {

    background: #eff6ff !important;

    color: var(--color-text-main) !important;

    border: 1.5px solid #bfdbfe !important;

    border-radius: 18px !important;

    padding: 20px;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08) !important;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: all 0.22s ease;

}



.whatsapp-compact-card:hover {

    border-color: #93c5fd !important;

    box-shadow: 0 8px 22px rgba(30, 58, 138, 0.14) !important;

}



.whatsapp-compact-card .whatsapp-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #dcfce7 !important;

    border: 1px solid #86efac !important;

    color: #15803d !important;

    padding: 4px 12px;

    border-radius: 9999px;

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    margin-bottom: 10px;

    width: fit-content;

}



.whatsapp-compact-card .whatsapp-badge svg {

    color: #16a34a !important;

}



.whatsapp-compact-title {

    font-size: 1.22rem;

    font-weight: 800;

    line-height: 1.3;

    margin: 4px 0 6px;

    color: var(--color-primary-900) !important;

}



.whatsapp-compact-sub {

    font-size: 0.84rem;

    color: var(--color-text-body) !important;

    line-height: 1.5;

    margin-bottom: 12px;

    opacity: 1 !important;

}



.whatsapp-features-compact {

    list-style: none;

    padding: 0;

    margin: 0 0 16px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.whatsapp-features-compact li {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 0.84rem;

    color: var(--color-text-main) !important;

    font-weight: 500;

    line-height: 1.4;

    opacity: 1 !important;

}



.whatsapp-features-compact li svg {

    color: #16a34a !important;

    flex-shrink: 0;

}



.whatsapp-action-box-compact {

    background: #ffffff !important;

    border: 1.5px solid #bfdbfe !important;

    border-radius: 14px !important;

    box-shadow: 0 1px 4px rgba(30, 58, 138, 0.04) !important;

    padding: 10px 14px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

}



.whatsapp-action-box-compact .whatsapp-info-col {

    min-width: 0;

}



.whatsapp-helpline-label {

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    color: var(--color-text-muted) !important;

    font-weight: 700;

}



.whatsapp-number-compact {

    font-size: 1.18rem;

    font-weight: 800;

    color: var(--color-primary-900) !important;

    letter-spacing: 0.03em;

    white-space: nowrap !important;

    text-decoration: none;

    display: inline-block;

    transition: color 0.2s ease;

}



.whatsapp-number-compact:hover {

    color: #16a34a !important;

}



.whatsapp-btn-compact {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #25d366 !important;

    color: #ffffff !important;

    font-size: 0.85rem;

    font-weight: 800;

    padding: 7px 16px;

    border-radius: 9999px;

    text-decoration: none;

    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);

    transition: all 0.2s ease;

    white-space: nowrap;

    flex-shrink: 0;

}



.whatsapp-btn-compact:hover {

    background: #20ba5a !important;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.45);

}



@media (max-width: 900px) {

    .comm-wa-row {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 580px) {

    .whatsapp-action-box-compact {

        flex-direction: column;

        align-items: stretch;

        text-align: center;

        gap: 12px;

        padding: 14px;

    }

    .whatsapp-action-box-compact .whatsapp-info-col {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .whatsapp-number-compact {

        font-size: 1.35rem;

        letter-spacing: 0.04em;

        margin-top: 2px;

    }

    .whatsapp-btn-compact {

        width: 100%;

        justify-content: center;

        padding: 10px 16px;

        font-size: 0.95rem;

        box-shadow: 0 4px 12px rgba(37, 211, 102, 0.45);

    }

}



/* --- WhatsApp Helpline Card --- */

.whatsapp-card {

    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);

    color: #ffffff;

    border-radius: var(--radius-xl);

    padding: 36px;

    box-shadow: 0 10px 25px -5px rgba(6, 95, 70, 0.3);

    position: relative;

    overflow: hidden;

    margin: 40px 0;

}



.whatsapp-card::before {

    content: '';

    position: absolute;

    top: -50px;

    right: -50px;

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);

    border-radius: 50%;

}



.whatsapp-grid {

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 32px;

    align-items: center;

    position: relative;

    z-index: 2;

}



.whatsapp-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(255, 255, 255, 0.2);

    border: 1px solid rgba(255, 255, 255, 0.3);

    padding: 4px 12px;

    border-radius: var(--radius-full);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    margin-bottom: 12px;

}



.whatsapp-features {

    list-style: none;

    margin: 16px 0 24px;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.whatsapp-features li {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.95rem;

}



.whatsapp-features li svg {

    flex-shrink: 0;

    color: #6ee7b7;

}



.whatsapp-action-box {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: var(--radius-lg);

    padding: 24px;

    text-align: center;

    backdrop-filter: blur(8px);

}



.whatsapp-number {

    font-size: 1.6rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    color: #ffffff;

    margin-bottom: 6px;

}



.whatsapp-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: #25d366;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 800;

    padding: 12px 24px;

    border-radius: var(--radius-full);

    text-decoration: none;

    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);

    transition: var(--transition);

    width: 100%;

}



.whatsapp-btn:hover {

    background: #20ba5a;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);

    color: #ffffff;

}



@media (max-width: 768px) {

    .whatsapp-grid {

        grid-template-columns: 1fr;

    }

}



/* --- Mobile Responsiveness & Font Uniformity Rules --- */

html {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    -webkit-text-size-adjust: 100%;

}



/* ==============================================================
   RESPONSIVE HEADER: MOBILE & TABLET COMMISSIONERATE BRANDING
   ============================================================== */

/* Default Desktop (>= 1024px): Hide mobile branding block and keep desktop banner intact */
.mobile-brand-identity {
    display: none !important;
}

@media (max-width: 1023px) {
    /* 1. Hide 24X7 Control Room & Citizen WhatsApp boxes and desktop banner */
    .header-hide-mobile,
    .site-brand-banner.header-hide-mobile,
    .site-brand-banner {
        display: none !important;
    }

    /* 2. Hide old "THANE POLICE" single-title mobile row (display:none, HTML preserved) */
    .mobile-sticky-brand {
        display: none !important;
    }

    /* 3. Hide desktop navigation links & mega menus */
    .nav-desktop,
    .mega-menu-panel {
        display: none !important;
    }

    /* 4. Main header & container layout */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #ffffff;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
        width: 100% !important;
    }

    .site-header .container.header-inner,
    .site-header .header-inner,
    .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 8px 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Mobile & Tablet Full Commissionerate Branding Block (Left Side) */
    .mobile-brand-identity {
        display: flex !important;
        align-items: center !important;
        gap: 12px;
        text-decoration: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 50px) !important;
    }

    .mobile-brand-identity:hover {
        text-decoration: none !important;
    }

    .mobile-brand-identity .brand-emblems-cluster {
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        flex-shrink: 0 !important;
    }

    .mobile-brand-identity .brand-emblem-ashoka {
        height: 46px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
    }

    .mobile-brand-identity .brand-emblem-seal {
        height: 46px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
    }

    .mobile-brand-identity .brand-divider-line {
        width: 1.5px;
        height: 42px;
        background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
        flex-shrink: 0 !important;
        margin: 0 4px;
    }

    .mobile-brand-identity .brand-text-block {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }

    .mobile-brand-identity .brand-marathi-name {
        font-size: clamp(18px, 3vw, 24px) !important;
        font-weight: 900 !important;
        color: var(--color-primary-900) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.01em !important;
        white-space: normal !important;
        word-break: normal !important;
        margin: 0 !important;
    }

    .mobile-brand-identity .brand-english-name {
        font-size: clamp(11px, 1.8vw, 14.5px) !important;
        font-weight: 800 !important;
        color: var(--color-primary-700) !important;
        letter-spacing: 0.03em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        white-space: normal !important;
        word-break: normal !important;
        margin-top: 1px !important;
    }

    .mobile-brand-identity .brand-motto-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px;
        font-size: clamp(9.5px, 1.4vw, 12px) !important;
        font-weight: 700 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        margin-top: 2px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .mobile-brand-identity .brand-motto-text {
        color: var(--color-accent-600) !important;
        font-weight: 800 !important;
    }

    .mobile-brand-identity .brand-motto-dot {
        color: #94a3b8 !important;
    }

    .mobile-brand-identity .brand-govt-text {
        color: #64748b !important;
    }

    /* 6. Hamburger Menu Button (Right Side) */
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: auto !important;
        padding: 7px !important;
        background: #ffffff !important;
        border: 1.5px solid var(--color-border) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        color: var(--color-primary-800) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
    }
}

/* Mobile Screens (max-width 767px) */
@media (max-width: 767px) {
    .site-header .container.header-inner,
    .site-header .header-inner,
    .header-inner {
        padding: 6px 12px !important;
        gap: 8px !important;
    }

    .mobile-brand-identity {
        gap: 8px !important;
        max-width: calc(100% - 46px) !important;
    }

    .mobile-brand-identity .brand-emblems-cluster {
        gap: 5px !important;
    }

    .mobile-brand-identity .brand-emblem-ashoka,
    .mobile-brand-identity .brand-emblem-seal {
        height: clamp(32px, 8vw, 36px) !important;
    }

    .mobile-brand-identity .brand-divider-line {
        width: 1px !important;
        height: 32px !important;
        margin: 0 2px !important;
    }

    .mobile-brand-identity .brand-marathi-name {
        font-size: clamp(14px, 4.2vw, 20px) !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .mobile-brand-identity .brand-english-name {
        font-size: clamp(9px, 2.6vw, 13px) !important;
        letter-spacing: 0.02em !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .mobile-brand-identity .brand-motto-row {
        font-size: clamp(8px, 2.2vw, 11px) !important;
        gap: 3px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    .mobile-menu-toggle {
        width: 38px !important;
        height: 38px !important;
        padding: 6px !important;
        border-radius: 8px !important;
    }
}

/* Ultra Compact Mobile (max-width 380px) */
@media (max-width: 380px) {
    .site-header .container.header-inner,
    .site-header .header-inner,
    .header-inner {
        padding: 5px 8px !important;
        gap: 6px !important;
    }

    .mobile-brand-identity {
        gap: 6px !important;
        max-width: calc(100% - 44px) !important;
    }

    .mobile-brand-identity .brand-emblems-cluster {
        gap: 4px !important;
    }

    .mobile-brand-identity .brand-emblem-ashoka,
    .mobile-brand-identity .brand-emblem-seal {
        height: 32px !important;
    }

    .mobile-brand-identity .brand-divider-line {
        display: none !important;
    }

    .mobile-brand-identity .brand-marathi-name {
        font-size: 13.5px !important;
    }

    .mobile-brand-identity .brand-english-name {
        font-size: 8.8px !important;
        letter-spacing: 0.01em !important;
    }

    .mobile-brand-identity .brand-motto-row {
        font-size: 7.8px !important;
    }

    .mobile-menu-toggle {
        width: 36px !important;
        height: 36px !important;
        padding: 5px !important;
    }
}

/* Dark Mode Support for Mobile / Tablet Header */
html[data-theme="dark"] .mobile-brand-identity .brand-marathi-name {
    color: #f8fafc !important;
}

html[data-theme="dark"] .mobile-brand-identity .brand-english-name {
    color: #93c5fd !important;
}

html[data-theme="dark"] .mobile-brand-identity .brand-motto-row {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .mobile-brand-identity .brand-motto-text {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .mobile-brand-identity .brand-govt-text {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .mobile-brand-identity .brand-divider-line {
    background: linear-gradient(to bottom, transparent, #334155, transparent) !important;
}

html[data-theme="dark"] .mobile-menu-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}



@media (max-width: 768px) {

    .top-bar-emergency-inner {

        flex-direction: row;

        align-items: center;

        gap: 8px;

    }



    .emergency-label-box {

        padding: 2px 7px;

    }



    .emergency-label {

        font-size: 0.72rem;

    }



    .emergency-marquee-wrap {

        width: 100%;

    }



    .emergency-pill {

        padding: 3px 9px;

        font-size: 0.73rem;

    }



    .emergency-marquee-track {

        animation-duration: 20s;

    }



    .top-bar-utility-inner {

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

    }



    .accessibility-tools {

        justify-content: center;

        width: 100%;

    }



    .lang-selector-group {

        justify-content: center;

        width: 100%;

        margin-left: 0;

        flex-wrap: wrap;

    }



    .brand-identity-link {

        gap: 12px;

    }



    .brand-emblem-ashoka,

    .brand-emblem-seal {

        height: 48px;

    }



    .brand-divider-line {

        height: 44px;

    }



    .brand-marathi-name {

        font-size: 1.18rem;

    }



    .brand-english-name {

        font-size: 0.88rem;

    }



    .brand-motto-row {

        font-size: 0.68rem;

    }



    .units-grid {

        grid-template-columns: 1fr !important;

    }

}



@media (max-width: 480px) {

    .brand-identity-link {

        gap: 8px;

    }



    .brand-emblems-cluster {

        gap: 6px;

    }



    .brand-emblem-ashoka,

    .brand-emblem-seal {

        height: 40px;

    }



    .brand-divider-line {

        height: 38px;

        width: 1px;

    }



    .brand-marathi-name {

        font-size: 1.02rem;

    }



    .brand-english-name {

        font-size: 0.74rem;

        letter-spacing: 0.02em;

    }



    .brand-motto-row {

        font-size: 0.62rem;

        flex-wrap: wrap;

    }



    .brand-banner-tools {

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

    }



    .control-room-card,

    .brand-whatsapp-badge {

        width: 100%;

    }

}



/* --- Global Responsive Content Grids & Utilities --- */

.grid-2col-responsive {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

}



.grid-sidebar-responsive {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 36px;

    align-items: start;

}



.grid-form-sidebar-responsive {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 36px;

    align-items: start;

}



.grid-cards-responsive {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

    gap: 20px;

}



.form-row-2col {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



.grid-emergency-boxes {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

    gap: 20px;

    margin-bottom: 44px;

}



/* --- Leadership Page Specialized Responsive Classes --- */

.leadership-hero-banner {

    background: linear-gradient(135deg, #0d2847 0%, #1e3a8a 100%);

    border-radius: 18px;

    padding: 36px 32px;

    color: #ffffff;

    margin-bottom: 36px;

    box-shadow: 0 10px 25px -5px rgba(13,40,71,0.25);

    position: relative;

    overflow: hidden;

}



.officer-apex-card {

    background: #ffffff;

    border: 2px solid #e0e7ff;

    border-radius: 20px;

    padding: 32px;

    box-shadow: 0 8px 30px rgba(30,58,138,0.08);

    margin-bottom: 44px;

    position: relative;

    overflow: hidden;

}



.officer-apex-accent-line {

    position: absolute;

    top: 0;

    left: 0;

    width: 6px;

    height: 100%;

    background: linear-gradient(180deg, #d97706 0%, #1e3a8a 100%);

}



.officer-apex-grid {

    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 36px;

    align-items: center;

}



.officer-apex-profile {

    text-align: center;

}



.officer-apex-avatar-wrap {

    width: 190px;

    height: 190px;

    border-radius: 50%;

    background: #f8fafc;

    border: 4px solid #1e3a8a;

    overflow: hidden;

    margin: 0 auto 16px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

}



.officer-apex-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top center;

}



.officer-apex-badge {

    display: inline-block;

    background: linear-gradient(135deg, #d97706, #b45309);

    color: #ffffff;

    font-size: 0.75rem;

    font-weight: 800;

    padding: 4px 14px;

    border-radius: 999px;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.officer-apex-name {

    font-size: 1.35rem;

    font-weight: 800;

    color: #0f172a;

    margin: 10px 0 4px;

}



.officer-apex-desig {

    font-size: 0.92rem;

    font-weight: 700;

    color: #1e40af;

}



.officer-apex-quote-box {

    background: #f8fafc;

    border-left: 4px solid #1e3a8a;

    border-radius: 12px;

    padding: 18px 22px;

    margin-bottom: 20px;

}



.officer-apex-quote {

    font-size: 1.02rem;

    font-style: italic;

    font-weight: 600;

    color: #1e293b;

    line-height: 1.6;

    margin-bottom: 8px;

}



.officer-apex-quote-author {

    font-size: 0.82rem;

    font-weight: 700;

    color: #64748b;

    text-transform: uppercase;

}



.officer-contact-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

    gap: 16px;

    margin-bottom: 20px;

    font-size: 0.9rem;

}



.officer-contact-cell {

    background: #f1f5f9;

    padding: 12px 16px;

    border-radius: 10px;

}



.officer-contact-cell .cell-label {

    font-size: 0.75rem;

    color: #64748b;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 3px;

}



.officer-contact-cell .cell-val {

    font-weight: 700;

    color: #1e3a8a;

    text-decoration: none;

    font-size: 0.95rem;

}



.officer-actions-row {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}



.officers-grid-tier {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));

    gap: 22px;

}



.officers-flowchart-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

    gap: 16px;

}



/* Tablet & Mobile Breakpoint (<= 860px) */

@media (max-width: 860px) {

    .grid-2col-responsive,

    .grid-sidebar-responsive,

    .grid-form-sidebar-responsive {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

    }

}



/* Mobile Breakpoint (<= 768px) */

@media (max-width: 768px) {

    .site-header .container {

        padding-left: 14px !important;

        padding-right: 14px !important;

    }



    .header-inner {

        padding: 8px 0 !important;

        justify-content: space-between !important;

    }



    .leadership-hero-banner {

        padding: 24px 18px !important;

        border-radius: 14px !important;

        margin-bottom: 24px !important;

    }



    .officer-apex-card {

        padding: 20px 16px !important;

        border-radius: 16px !important;

        margin-bottom: 28px !important;

    }



    .officer-apex-grid {

        grid-template-columns: 1fr !important;

        gap: 20px !important;

        text-align: center;

    }



    .officer-apex-avatar-wrap {

        width: 140px !important;

        height: 140px !important;

        margin: 0 auto 12px !important;

    }



    .officer-apex-quote-box {

        padding: 14px 16px !important;

        text-align: left;

    }



    .officer-contact-grid {

        grid-template-columns: 1fr !important;

        gap: 10px !important;

        text-align: left;

    }



    .officer-actions-row {

        flex-direction: column !important;

        width: 100% !important;

    }



    .officer-actions-row .btn {

        width: 100% !important;

        justify-content: center !important;

    }



    .officers-grid-tier {

        grid-template-columns: 1fr !important;

        gap: 16px !important;

    }



    .officers-flowchart-grid {

        grid-template-columns: 1fr !important;

    }

}



/* Base Section Definitions for Calibrated Spacing */

.mui-operations-section {

    border-bottom: 1px solid var(--color-border);

    padding: 26px 0 22px;

}



.dignitaries-section {

    border-bottom: 1px solid var(--color-border);

    padding: 22px 0 24px;

}



.feedback-form-card {

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    border-radius: 18px;

    padding: clamp(16px, 3vw, 24px);

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08);

}



/* Site-wide Balanced Mobile Spacing System (No Excessive Gaps) */

@media (max-width: 768px) {

    .section {

        padding: 18px 0 !important;

    }



    .section-header {

        margin: 0 auto 12px !important;

    }



    .section-badge {

        padding: 3px 10px !important;

        margin-bottom: 6px !important;

        font-size: 0.74rem !important;

    }



    .section-title {

        font-size: 1.45rem !important;

        margin-top: 3px !important;

        margin-bottom: 6px !important;

    }



    .section-desc {

        font-size: 0.86rem !important;

        line-height: 1.45 !important;

        margin-top: 4px !important;

    }



    .mui-operations-section {

        padding: 18px 0 16px !important;

    }



    .mui-tabs-nav {

        margin-bottom: 16px !important;

    }



    main > .container,

    .main-content > .container {

        padding-top: 20px !important;

        padding-bottom: 28px !important;

    }



    .dignitaries-section {

        padding: 16px 0 18px !important;

    }



    .stats-strip {

        padding: 16px 0 !important;

    }



    .stats-grid {

        gap: 12px !important;

    }



    .portal-strip-section {

        padding: 16px 0 18px !important;

    }



    .portal-strip-header {

        margin-bottom: 12px !important;

    }



    .social-connect-strip {

        padding: 14px 0 !important;

    }



    .social-icons-group {

        gap: 14px !important;

    }



    .feedback-form-card {

        padding: 16px 14px !important;

    }

}



/* Small Mobile Screen Breakpoint (<= 600px) */

@media (max-width: 600px) {

    .form-row-2col {

        grid-template-columns: 1fr !important;

        gap: 12px !important;

    }



    .grid-cards-responsive {

        grid-template-columns: 1fr !important;

    }



    .grid-emergency-boxes {

        grid-template-columns: 1fr !important;

        gap: 14px !important;

        margin-bottom: 24px !important;

    }

}



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

   POLICE CONNECT - DARK MODE SYSTEM (डार्क मोड)

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



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

   POLICE CONNECT - ADVANCED DARK THEME CALIBRATION

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

html[data-theme="dark"],

html.dark-mode {

    color-scheme: dark;



    /* Base Surfaces */

    --color-surface-bg: #090f1d;

    --color-surface-card: #131e33;

    --color-surface-card-hover: #1a2a46;

    --color-surface-subtle: #0d1627;

    --color-surface-alt: #0a1122;



    /* Typography */

    --color-text-title: #f8fafc;

    --color-text-main: #f8fafc;

    --color-text-body: #cbd5e1;

    --color-text-muted: #94a3b8;

    --color-text-light: #64748b;



    /* Primary Police Tones (Luminous in Dark Mode) */

    --color-primary-900: #f8fafc;

    --color-primary-800: #60a5fa;

    --color-primary-700: #93c5fd;

    --color-primary-600: #3b82f6;

    --color-primary-500: #60a5fa;



    /* Accents (Radiant Amber & Gold) */

    --color-accent-600: #fbbf24;

    --color-accent-500: #f59e0b;

    --color-accent-400: #fcd34d;

    --color-accent-100: rgba(245, 158, 11, 0.15);



    /* Borders */

    --color-border: #20314d;

    --color-border-subtle: #172439;



    /* Status BGs */

    --color-success-bg: rgba(16, 185, 129, 0.15);

    --color-danger-bg: rgba(239, 68, 68, 0.15);

    --color-warning-bg: rgba(245, 158, 11, 0.15);



    /* Shadows */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);

    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);

    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.65);

}



html[data-theme="dark"] body,

html.dark-mode body {

    background-color: #090f1d !important;

    color: #cbd5e1 !important;

}



/* 1. Header & Navigation Tiers */

html[data-theme="dark"] .top-emergency-bar {

    background-color: #040810 !important;

}



html[data-theme="dark"] .top-bar-emergency-tier {

    background-color: #040810 !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



html[data-theme="dark"] .top-bar-utility-tier {

    background-color: #060c18 !important;

    border-bottom: 2px solid #f59e0b !important;

}



html[data-theme="dark"] .site-brand-banner {

    background: #0b1323 !important;

    border-color: #1a273f !important;

}



html[data-theme="dark"] .brand-marathi-name {

    color: #f8fafc !important;

}



html[data-theme="dark"] .brand-english-name {

    color: #93c5fd !important;

}



html[data-theme="dark"] .brand-motto-row {

    color: #94a3b8 !important;

}



html[data-theme="dark"] .brand-motto-text {

    color: #fbbf24 !important;

}



html[data-theme="dark"] .brand-govt-text {

    color: #94a3b8 !important;

}



html[data-theme="dark"] .control-room-card {

    background: #131e33 !important;

    border-color: #20314d !important;

    border-left: 3px solid #f59e0b !important;

}



html[data-theme="dark"] .cr-badge {

    color: #f8fafc !important;

}



html[data-theme="dark"] .cr-help-label {

    color: #94a3b8 !important;

}



html[data-theme="dark"] .cr-helplines-row {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .brand-whatsapp-badge {

    background: rgba(34, 197, 94, 0.12) !important;

    border-color: rgba(34, 197, 94, 0.3) !important;

}



html[data-theme="dark"] .wa-title {

    color: #4ade80 !important;

}



html[data-theme="dark"] .wa-num {

    color: #f8fafc !important;

}



html[data-theme="dark"] .site-header {

    background: #090f1d !important;

    border-color: #1a273f !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .nav-desktop .nav-link {

    background: rgba(59, 130, 246, 0.12) !important;

    color: #93c5fd !important;

    border: 1.5px solid rgba(59, 130, 246, 0.32) !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;

}



html[data-theme="dark"] .nav-desktop .nav-link:hover,

html[data-theme="dark"] .nav-desktop .nav-dropdown-item:hover > .nav-dropdown-trigger {

    background: rgba(59, 130, 246, 0.24) !important;

    border-color: #60a5fa !important;

    color: #ffffff !important;

    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25) !important;

}



html[data-theme="dark"] .nav-desktop .nav-link.active {

    background: #2563eb !important;

    border-color: #3b82f6 !important;

    color: #ffffff !important;

}



html[data-theme="dark"] .nav-desktop .dropdown-chevron-icon {

    stroke: #93c5fd !important;

}



html[data-theme="dark"] .nav-desktop .nav-link:hover .dropdown-chevron-icon,

html[data-theme="dark"] .nav-desktop .nav-link.active .dropdown-chevron-icon {

    stroke: #ffffff !important;

}



html[data-theme="dark"] .mega-menu-panel {

    background: #131e33 !important;

    border: 1px solid #20314d !important;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;

}



html[data-theme="dark"] .mega-menu-header {

    border-color: #20314d !important;

}



html[data-theme="dark"] .mega-col-title {

    color: #60a5fa !important;

}



html[data-theme="dark"] .mega-menu-list li a {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .mega-menu-list li a:hover {

    background-color: #1a2a46 !important;

    color: #93c5fd !important;

}



html[data-theme="dark"] .badge-photos {

    background: #1a2a46 !important;

    color: #94a3b8 !important;

    border-color: #20314d !important;

}



/* 2. Language Dropdown in Dark Mode */

html[data-theme="dark"] .lang-picker-btn {

    background: #131e33 !important;

    color: #f8fafc !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .lang-picker-btn:hover {

    border-color: #3b82f6 !important;

}



html[data-theme="dark"] .lang-picker-dropdown {

    background: #131e33 !important;

    border-color: #20314d !important;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;

}



html[data-theme="dark"] .lang-search-header {

    background: #0d1627 !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .lang-search-input {

    background-color: #131e33 !important;

    color: #f8fafc !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .lang-optgroup-title {

    color: #60a5fa !important;

    background: #0d1627 !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .lang-option {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .lang-option:hover,

html[data-theme="dark"] .lang-option:focus,

html[data-theme="dark"] .lang-option.focused {

    background: #1a2a46 !important;

    color: #93c5fd !important;

}



html[data-theme="dark"] .lang-option.selected {

    background: rgba(37, 99, 235, 0.25) !important;

    color: #60a5fa !important;

}



html[data-theme="dark"] .lang-option-badge {

    background: #1a2a46 !important;

    color: #94a3b8 !important;

}



/* 3. Hero Section */

html[data-theme="dark"] .hero-section {

    background: linear-gradient(180deg, #0c1424 0%, #090f1d 100%) !important;

    border-color: #1a273f !important;

}



html[data-theme="dark"] .hero-badge-pill {

    background: rgba(59, 130, 246, 0.15) !important;

    color: #60a5fa !important;

    border-color: rgba(59, 130, 246, 0.35) !important;

}



html[data-theme="dark"] .hero-title {

    color: #f8fafc !important;

}



html[data-theme="dark"] .hero-lead {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .hero-card {

    background: #131e33 !important;

    border-color: #20314d !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;

}



html[data-theme="dark"] .hero-card-header {

    border-color: #20314d !important;

}



html[data-theme="dark"] .hero-card-title {

    color: #f8fafc !important;

}



html[data-theme="dark"] .hero-card-icon-wrap {

    background: #1e293b !important;

    color: #93c5fd !important;

}



html[data-theme="dark"] .hero-station-search-input {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #f8fafc !important;

}



html[data-theme="dark"] .hero-station-search-input:focus {

    border-color: #38bdf8 !important;

    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;

}



html[data-theme="dark"] .hero-search-icon {

    color: #38bdf8 !important;

}



html[data-theme="dark"] .hero-station-suggest-box {

    background: #0f172a !important;

    border-color: #334155 !important;

    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.7) !important;

}



html[data-theme="dark"] .hero-suggest-item:hover,

html[data-theme="dark"] .hero-suggest-item.is-selected {

    background: #1e293b !important;

    border-left-color: #38bdf8 !important;

}



html[data-theme="dark"] .hero-suggest-item-name {

    color: #f8fafc !important;

}



html[data-theme="dark"] .hero-suggest-badge {

    background: #1e3a8a !important;

    color: #93c5fd !important;

}



/* 4. Dignitaries Section (आमचे नेतृत्व) */

html[data-theme="dark"] .dignitaries-section {

    background-color: #090f1d !important;

    border-color: #1a273f !important;

}



html[data-theme="dark"] .dignitaries-section h2 {

    color: #fb923c !important;

}



html[data-theme="dark"] .dignitaries-section h2 + div {

    background: #fb923c !important;

}



html[data-theme="dark"] .dignitary-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .dignitary-cm-card {

    background: rgba(59, 130, 246, 0.18) !important;

    border: 2px solid rgba(96, 165, 250, 0.5) !important;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;

}



html[data-theme="dark"] .dignitary-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6) !important;

}



html[data-theme="dark"] .dignitary-avatar-wrap {

    background: #0d1627 !important;

    border-color: #f97316 !important;

}



html[data-theme="dark"] .dignitary-name {

    color: #ffffff !important;

}



html[data-theme="dark"] .dignitary-role {

    color: #93c5fd !important;

}



/* 5. Metrics Strip & Alternate Sections */

html[data-theme="dark"] .section-alt,

html.dark-mode .section-alt,

body.dark-mode .section-alt {

    background-color: #0b1323 !important;

    border-color: #1a273f !important;

}



html[data-theme="dark"] .mui-operations-section,

html.dark-mode .mui-operations-section,

body.dark-mode .mui-operations-section {

    border-color: #1a273f !important;

}



html[data-theme="dark"] .dignitaries-section,

html.dark-mode .dignitaries-section,

body.dark-mode .dignitaries-section {

    border-color: #1a273f !important;

}



html[data-theme="dark"] .stats-strip {

    background: #0b1323 !important;

    border-color: #1a273f !important;

}



html[data-theme="dark"] .stat-item {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .stat-item:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

}



html[data-theme="dark"] .stat-title {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .stat-value {

    color: #60a5fa !important;

}



html[data-theme="dark"] .stat-sub {

    color: #94a3b8 !important;

}



/* 6. Commissioner Spotlight */

html[data-theme="dark"] .comm-spotlight-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

    border-radius: 18px !important;

}



html[data-theme="dark"] .comm-spotlight-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

}



html[data-theme="dark"] .comm-avatar-box {

    border-color: #20314d !important;

}



html[data-theme="dark"] .comm-name {

    color: #f8fafc !important;

}



html[data-theme="dark"] .comm-desig {

    color: #fbbf24 !important;

}



html[data-theme="dark"] .comm-quote {

    color: #93c5fd !important;

    border-left-color: #3b82f6 !important;

}



html[data-theme="dark"] .comm-body-text {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .comm-hours-box {

    background: #0d1627 !important;

    border-color: #20314d !important;

    border-left-color: #f59e0b !important;

    color: #e2e8f0 !important;

}



/* 7. Operations Hub, Tabs & Content */

html[data-theme="dark"] #muiOperationsHub {

    background-color: #090f1d !important;

    border-color: #1a273f !important;

}



html[data-theme="dark"] .hub-badge {

    background: rgba(37, 99, 235, 0.15) !important;

    color: #93c5fd !important;

    border: 1px solid rgba(59, 130, 246, 0.3) !important;

}



html[data-theme="dark"] .mui-tabs-nav {

    background: #0d1627 !important;

    border: 1px solid #20314d !important;

}



html[data-theme="dark"] .mui-tab-btn {

    color: #94a3b8 !important;

}



html[data-theme="dark"] .mui-tab-btn:hover {

    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.06) !important;

}



html[data-theme="dark"] .mui-tab-btn.active {

    background: #2563eb !important;

    color: #ffffff !important;

    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;

}



html[data-theme="dark"] .service-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 18px !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .service-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;

}



html[data-theme="dark"] .service-title {

    color: #f8fafc !important;

}



html[data-theme="dark"] .service-desc {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .service-footer {

    border-top-color: #20314d !important;

}



html[data-theme="dark"] .gallery-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 18px !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .gallery-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

}



html[data-theme="dark"] .gallery-body h3 {

    color: #f8fafc !important;

}



html[data-theme="dark"] .gallery-body p {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .safety-preview-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 18px !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .safety-preview-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

}



html[data-theme="dark"] .safety-preview-card h3 {

    color: #f8fafc !important;

}



html[data-theme="dark"] .safety-preview-card p {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .station-filter-bar {

    background: #131e33 !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .station-item-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 14px !important;

}



html[data-theme="dark"] .station-item-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

}



html[data-theme="dark"] .station-item-card h4 {

    color: #f8fafc !important;

}



html[data-theme="dark"] .station-zone-badge {

    background: rgba(59, 130, 246, 0.2) !important;

    color: #93c5fd !important;

}



html[data-theme="dark"] .accordion-header {

    background: transparent !important;

    color: #f8fafc !important;

}



html[data-theme="dark"] .accordion-item {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 16px !important;

}



html[data-theme="dark"] .accordion-item.open .accordion-header {

    background: rgba(59, 130, 246, 0.18) !important;

    color: #60a5fa !important;

}



html[data-theme="dark"] .accordion-body {

    background: #0d1627 !important;

    color: #cbd5e1 !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .home-news-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 18px !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .home-news-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

}



html[data-theme="dark"] .home-news-card h4 a {

    color: #f8fafc !important;

}



html[data-theme="dark"] .home-news-card p {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .feedback-form-card {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 18px !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



/* 8. Secondary Buttons in Dark Mode - Matching See More Box Style */

html[data-theme="dark"] .btn-secondary,

html[data-theme="dark"] .btn-outline {

    background-color: rgba(59, 130, 246, 0.15) !important;

    color: #93c5fd !important;

    border: 1px solid rgba(59, 130, 246, 0.35) !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .btn-secondary:hover,

html[data-theme="dark"] .btn-outline:hover {

    background-color: rgba(59, 130, 246, 0.25) !important;

    border-color: #60a5fa !important;

    color: #ffffff !important;

    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;

}



/* 9. Portal Logos Strip */

html[data-theme="dark"] .portal-strip-section {

    background: #060b14 !important;

    border-color: #1a273f !important;

}



html[data-theme="dark"] .portal-strip-badge {

    background: #131e33 !important;

    border-color: #20314d !important;

    color: #60a5fa !important;

}



html[data-theme="dark"] .portal-badge-card {

    background: #131e33 !important;

    border-color: #20314d !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;

}



html[data-theme="dark"] .portal-badge-card:hover {

    background: #1a2a46 !important;

    border-color: #3b82f6 !important;

}



html[data-theme="dark"] .portal-badge-label {

    color: #f8fafc !important;

}



html[data-theme="dark"] .portal-arrow-btn {

    background-color: #131e33 !important;

    color: #60a5fa !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .portal-arrow-btn:hover {

    background-color: #2563eb !important;

    color: #ffffff !important;

    border-color: #2563eb !important;

}



/* 10. Footer in Dark Mode */

html[data-theme="dark"] .site-footer {

    background-color: #060b14 !important;

    border-top: 4px solid #f59e0b !important;

}



html[data-theme="dark"] .footer-bottom {

    background: #03060a !important;

    border-top-color: rgba(255, 255, 255, 0.08) !important;

}



/* 11. Inputs, Forms & Controls */

html[data-theme="dark"] input,

html[data-theme="dark"] select,

html[data-theme="dark"] textarea,

html[data-theme="dark"] .form-control {

    background-color: #0b1323 !important;

    border-color: #20314d !important;

    color: #f8fafc !important;

}



html[data-theme="dark"] input:focus,

html[data-theme="dark"] select:focus,

html[data-theme="dark"] textarea:focus,

html[data-theme="dark"] .form-control:focus {

    border-color: #3b82f6 !important;

    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;

}



html[data-theme="dark"] ::placeholder {

    color: #64748b !important;

}



/* 13. Global Catch-All for inline styles across other pages */

html[data-theme="dark"] [style*="background:#ffffff"],

html[data-theme="dark"] [style*="background: #ffffff"],

html[data-theme="dark"] [style*="background:#fff"],

html[data-theme="dark"] [style*="background: #fff"],

html[data-theme="dark"] [style*="background:#f8fafc"],

html[data-theme="dark"] [style*="background: #f8fafc"] {

    background-color: #131e33 !important;

    border-color: #20314d !important;

    color: #cbd5e1 !important;

}



html[data-theme="dark"] [style*="background:#eff6ff"],

html[data-theme="dark"] [style*="background: #eff6ff"],

html[data-theme="dark"] [style*="background:#e3f2fd"],

html[data-theme="dark"] [style*="background: #e3f2fd"],

html[data-theme="dark"] [style*="background:#f1f5f9"],

html[data-theme="dark"] [style*="background: #f1f5f9"] {

    background-color: rgba(59, 130, 246, 0.18) !important;

    border-color: rgba(59, 130, 246, 0.35) !important;

    color: #93c5fd !important;

}



html[data-theme="dark"] [style*="background:#ecfdf5"],

html[data-theme="dark"] [style*="background: #ecfdf5"] {

    background-color: rgba(16, 185, 129, 0.18) !important;

    border-color: rgba(16, 185, 129, 0.35) !important;

    color: #6ee7b7 !important;

}



html[data-theme="dark"] [style*="background:#fef2f2"],

html[data-theme="dark"] [style*="background: #fef2f2"] {

    background-color: rgba(239, 68, 68, 0.18) !important;

    border-color: rgba(239, 68, 68, 0.35) !important;

    color: #fca5a5 !important;

}



/* 14. Tables, Modals, Pagination */

html[data-theme="dark"] table,

html[data-theme="dark"] .table {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] th {

    background-color: #0d1627 !important;

    color: #f8fafc !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] td {

    background-color: #131e33 !important;

    border-color: #172439 !important;

    color: #cbd5e1 !important;

}



html[data-theme="dark"] tr:hover td {

    background-color: #1a2a46 !important;

}



html[data-theme="dark"] .modal-content,

html[data-theme="dark"] .modal-box {

    background-color: #131e33 !important;

    border: 1px solid #20314d !important;

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .pagination-btn,

html[data-theme="dark"] .page-link {

    background-color: #131e33 !important;

    border-color: #20314d !important;

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .pagination-btn:hover,

html[data-theme="dark"] .page-link:hover {

    background-color: #1a2a46 !important;

    color: #60a5fa !important;

    border-color: #3b82f6 !important;

}



html[data-theme="dark"] .pagination-btn.active,

html[data-theme="dark"] .page-item.active .page-link {

    background-color: #2563eb !important;

    color: #ffffff !important;

    border-color: #2563eb !important;

}



/* 15. Leadership & Apex Command Component Dark Mode */

html[data-theme="dark"] .leadership-hero-banner {

    background: linear-gradient(135deg, #09152b 0%, #172a4d 100%) !important;

    border: 1px solid #20314d !important;

}



html[data-theme="dark"] .officer-apex-card {

    background: #131e33 !important;

    border-color: #20314d !important;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;

}



html[data-theme="dark"] .officer-apex-name {

    color: #f8fafc !important;

}



html[data-theme="dark"] .officer-apex-desig {

    color: #60a5fa !important;

}



html[data-theme="dark"] .officer-apex-quote-box {

    background: #0d1627 !important;

    border-left-color: #3b82f6 !important;

}



html[data-theme="dark"] .officer-apex-quote {

    color: #e2e8f0 !important;

}



html[data-theme="dark"] .officer-apex-quote-author {

    color: #94a3b8 !important;

}



html[data-theme="dark"] .officer-contact-cell {

    background: #0d1627 !important;

}



html[data-theme="dark"] .officer-contact-cell .cell-label {

    color: #94a3b8 !important;

}



html[data-theme="dark"] .officer-contact-cell .cell-val {

    color: #60a5fa !important;

}



html[data-theme="dark"] .officer-card-mui {

    background: #131e33 !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .filter-chip {

    background: #131e33 !important;

    color: #cbd5e1 !important;

    border-color: #20314d !important;

}



html[data-theme="dark"] .filter-chip:hover {

    background: #1a2a46 !important;

    color: #f8fafc !important;

}



html[data-theme="dark"] .filter-chip.active {

    background: #2563eb !important;

    color: #ffffff !important;

    border-color: #2563eb !important;

}



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

   POLICE CONNECT - UNIFIED "SEE MORE" BOX & CARD DESIGN SYSTEM

   Standardized aesthetic applied across ALL boxes, cards, panels, and forms:

   - Light Mode: #eff6ff background, 1.5px solid #bfdbfe border, 18px radius,

     0 2px 8px rgba(30, 58, 138, 0.08) drop shadow, smooth interactive lift.

   - Dark Mode: rgba(59, 130, 246, 0.12) translucent luminous blue background,

     1.5px solid rgba(59, 130, 246, 0.35) soft border, 18px radius.

   - Fully responsive on all mobile, tablet, and desktop devices.

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



/* 1. Universal Light Mode Box Aesthetic */

.card,

.panel-card,

.unit-card,

.officer-card-mui,

.officer-apex-card,

.leadership-filter-box,

.emergency-stat-box,

.grid-emergency-boxes > div,

.contact-form-card,

.hq-info-card,

.hq-legal-card,

.station-item-card,

.station-detail-card,

.safety-section-card,

.safety-jump-bar,

.home-news-card,

.news-card,

.article-content-card,

.article-sidebar-card,

.feedback-form-card,

.stat-item,

.comm-spotlight-card,

.whatsapp-compact-card,

.service-card,

.gallery-card,

.safety-preview-card,

.dignitary-card,

.dignitary-cm-card,

.recruitment-card,

.recruitment-overview-card,

.about-card,

.filter-search-box,

.notices-table-wrapper,

.accordion-item {

    background: #eff6ff !important;

    border: 1.5px solid #bfdbfe !important;

    border-radius: 18px !important;

    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.08) !important;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;

}



/* 2. Interactive Hover States (Light Mode) */

.unit-card:hover,

.officer-card-mui:hover,

.officer-apex-card:hover,

.emergency-stat-box:hover,

.grid-emergency-boxes > div:hover,

.station-item-card:hover,

.home-news-card:hover,

.news-card:hover,

.stat-item:hover,

.comm-spotlight-card:hover,

.service-card:hover,

.gallery-card:hover,

.safety-preview-card:hover,

.dignitary-card:hover,

.recruitment-card:hover {

    background: #dbeafe !important;

    border-color: #93c5fd !important;

    box-shadow: 0 8px 22px rgba(30, 58, 138, 0.14) !important;

    transform: translateY(-2px) !important;

}



/* 3. Sub-boxes and Inner Panels (Light Mode) */

.safety-sub-card,

.about-sub-box,

.officer-contact-cell,

.officer-apex-quote-box {

    background: #ffffff !important;

    border: 1.5px solid #bfdbfe !important;

    border-radius: 14px !important;

    box-shadow: 0 1px 4px rgba(30, 58, 138, 0.04) !important;

    transition: all 0.2s ease !important;

}



.officer-contact-cell:hover {

    background: #eff6ff !important;

    border-color: #93c5fd !important;

}



/* 4. Universal Dark Mode Box Aesthetic */

html[data-theme="dark"] .card,

html[data-theme="dark"] .panel-card,

html[data-theme="dark"] .unit-card,

html[data-theme="dark"] .officer-card-mui,

html[data-theme="dark"] .officer-apex-card,

html[data-theme="dark"] .leadership-filter-box,

html[data-theme="dark"] .emergency-stat-box,

html[data-theme="dark"] .grid-emergency-boxes > div,

html[data-theme="dark"] .contact-form-card,

html[data-theme="dark"] .hq-info-card,

html[data-theme="dark"] .hq-legal-card,

html[data-theme="dark"] .station-item-card,

html[data-theme="dark"] .station-detail-card,

html[data-theme="dark"] .safety-section-card,

html[data-theme="dark"] .safety-jump-bar,

html[data-theme="dark"] .home-news-card,

html[data-theme="dark"] .news-card,

html[data-theme="dark"] .article-content-card,

html[data-theme="dark"] .article-sidebar-card,

html[data-theme="dark"] .feedback-form-card,

html[data-theme="dark"] .stat-item,

html[data-theme="dark"] .comm-spotlight-card,

html[data-theme="dark"] .whatsapp-compact-card,

html[data-theme="dark"] .service-card,

html[data-theme="dark"] .gallery-card,

html[data-theme="dark"] .safety-preview-card,

html[data-theme="dark"] .dignitary-card,

html[data-theme="dark"] .dignitary-cm-card,

html[data-theme="dark"] .recruitment-card,

html[data-theme="dark"] .recruitment-overview-card,

html[data-theme="dark"] .about-card,

html[data-theme="dark"] .filter-search-box,

html[data-theme="dark"] .notices-table-wrapper,

html[data-theme="dark"] .accordion-item,

body.dark-mode .card,

body.dark-mode .unit-card,

body.dark-mode .officer-card-mui,

body.dark-mode .officer-apex-card,

body.dark-mode .emergency-stat-box,

body.dark-mode .station-item-card,

body.dark-mode .safety-section-card,

body.dark-mode .service-card,

body.dark-mode .news-card,

body.dark-mode .stat-item,

body.dark-mode .accordion-item {

    background: rgba(59, 130, 246, 0.12) !important;

    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;

    border-radius: 18px !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;

}



/* 5. Interactive Hover States (Dark Mode) */

html[data-theme="dark"] .unit-card:hover,

html[data-theme="dark"] .officer-card-mui:hover,

html[data-theme="dark"] .officer-apex-card:hover,

html[data-theme="dark"] .emergency-stat-box:hover,

html[data-theme="dark"] .grid-emergency-boxes > div:hover,

html[data-theme="dark"] .station-item-card:hover,

html[data-theme="dark"] .home-news-card:hover,

html[data-theme="dark"] .news-card:hover,

html[data-theme="dark"] .stat-item:hover,

html[data-theme="dark"] .comm-spotlight-card:hover,

html[data-theme="dark"] .service-card:hover,

html[data-theme="dark"] .gallery-card:hover,

html[data-theme="dark"] .safety-preview-card:hover,

html[data-theme="dark"] .dignitary-card:hover,

html[data-theme="dark"] .recruitment-card:hover,

body.dark-mode .unit-card:hover,

body.dark-mode .officer-card-mui:hover,

body.dark-mode .station-item-card:hover,

body.dark-mode .service-card:hover,

body.dark-mode .news-card:hover {

    background: rgba(59, 130, 246, 0.22) !important;

    border-color: #60a5fa !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55) !important;

    transform: translateY(-2px) !important;

}



/* 6. Sub-boxes and Inner Panels (Dark Mode) */

html[data-theme="dark"] .safety-sub-card,

html[data-theme="dark"] .about-sub-box,

html[data-theme="dark"] .officer-contact-cell,

html[data-theme="dark"] .officer-apex-quote-box,

html[data-theme="dark"] .whatsapp-action-box-compact {

    background: #0d1627 !important;

    border: 1.5px solid rgba(59, 130, 246, 0.25) !important;

    border-radius: 14px !important;

}



html[data-theme="dark"] .officer-contact-cell:hover {

    background: #131e33 !important;

    border-color: rgba(59, 130, 246, 0.45) !important;

}



/* 7. Typography inside Unified Boxes in Dark Mode */

html[data-theme="dark"] .officer-card-mui h3,

html[data-theme="dark"] .officer-apex-name,

html[data-theme="dark"] .unit-card h2,

html[data-theme="dark"] .safety-section-card h2,

html[data-theme="dark"] .safety-section-card h3,

html[data-theme="dark"] .recruitment-card h2,

html[data-theme="dark"] .about-card h2,

html[data-theme="dark"] .article-content-card h1,

html[data-theme="dark"] .article-sidebar-card h3,

html[data-theme="dark"] .hq-info-card h3,

html[data-theme="dark"] .hq-legal-card h3,

html[data-theme="dark"] .station-detail-card h2,

html[data-theme="dark"] .station-detail-card h3 {

    color: #f8fafc !important;

}



html[data-theme="dark"] .officer-card-mui div,

html[data-theme="dark"] .unit-card p,

html[data-theme="dark"] .safety-section-card p,

html[data-theme="dark"] .safety-section-card li,

html[data-theme="dark"] .recruitment-card div,

html[data-theme="dark"] .about-card p,

html[data-theme="dark"] .about-card li,

html[data-theme="dark"] .article-content-card p,

html[data-theme="dark"] .station-detail-card p {

    color: #cbd5e1 !important;

}



html[data-theme="dark"] .whatsapp-compact-title {

    color: #f8fafc !important;

}

html[data-theme="dark"] .whatsapp-compact-sub {

    color: #cbd5e1 !important;

}

html[data-theme="dark"] .whatsapp-features-compact li {

    color: #e2e8f0 !important;

}

html[data-theme="dark"] .whatsapp-features-compact li svg {

    color: #4ade80 !important;

}

html[data-theme="dark"] .whatsapp-helpline-label {

    color: #94a3b8 !important;

}

html[data-theme="dark"] .whatsapp-number-compact {

    color: #ffffff !important;

}

html[data-theme="dark"] .whatsapp-compact-card .whatsapp-badge {

    background: rgba(34, 197, 94, 0.18) !important;

    border-color: rgba(34, 197, 94, 0.4) !important;

    color: #4ade80 !important;

}



/* 8. Mobile Responsiveness System for Unified Boxes */

@media (max-width: 768px) {

    .card,

    .panel-card,

    .unit-card,

    .officer-card-mui,

    .officer-apex-card,

    .leadership-filter-box,

    .emergency-stat-box,

    .grid-emergency-boxes > div,

    .contact-form-card,

    .hq-info-card,

    .hq-legal-card,

    .station-item-card,

    .station-detail-card,

    .safety-section-card,

    .home-news-card,

    .news-card,

    .article-content-card,

    .article-sidebar-card,

    .feedback-form-card,

    .service-card,

    .recruitment-card,

    .recruitment-overview-card,

    .about-card,

    .filter-search-box,

    .notices-table-wrapper {

        border-radius: 16px !important;

    }



    .leadership-filter-box,

    .filter-search-box {

        padding: 14px 12px !important;

    }



    .emergency-stat-box {

        padding: 16px 14px !important;

    }



    .safety-section-card {

        padding: 18px 14px !important;

        margin-bottom: 20px !important;

    }



    .recruitment-card {

        padding: 18px 14px !important;

    }



    .recruitment-overview-card {

        padding: 20px 16px !important;

    }



    .article-content-card {

        padding: 20px 16px !important;

    }



    .article-sidebar-card {

        padding: 18px 14px !important;

    }



    .station-detail-card {

        padding: 18px 14px !important;

    }

}



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

   9. UNIFIED PILL BUTTON & INTERACTIVE BOX SYSTEM

   Every button and small action box across the entire website adopts the exact

   pill shape (border-radius: 9999px) and sleek calibrated size of the "See More" box.

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

.btn,

.tool-btn,

.emergency-label-box,

.hero-badge-pill,

.mui-tab-btn,

.filter-btn,

.filter-chip,

.btn-search,

.feedback-submit-btn,

button[type="submit"],

.safety-jump-bar a,

.officer-actions-row .btn,

.service-footer .btn,

.station-actions .btn,

.dignitaries-toggle-btn {

    border-radius: var(--radius-full) !important;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

}



.hero-actions .btn {

    padding: 8px 20px !important;

    font-size: 0.86rem !important;

    font-weight: 700 !important;

    border-radius: var(--radius-full) !important;

}



@media (max-width: 768px) {

    .hero-actions {

        gap: 8px;

    }

    .hero-actions .btn {

        padding: 8px 16px !important;

        font-size: 0.82rem !important;

        border-radius: var(--radius-full) !important;

    }

}



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

   FULL-SCREEN REALISTIC POLICE HERO SECTION STYLES (Prefix: fp-)

   2-Column Responsive Layout: Left Typography & Right CM Official Portrait

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

.fp-hero-section {

    position: relative;

    width: 100%;

    min-height: 680px;

    height: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    overflow: hidden;

    z-index: 20;

    background-color: #020b22;

    padding: 20px 0 0 0;

}



/* Full-bleed background wrapper */

.fp-bg-wrap {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

    overflow: hidden;

}



.fp-bg-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    display: block;

    transform: scale(1.02);

    transition: transform 0.6s ease;

}



/* Atmospheric luminous cyber command overlay */

.fp-bg-overlay {

    position: absolute;

    inset: 0;

    background: 

        radial-gradient(circle at 75% 30%, rgba(0, 229, 255, 0.12) 0%, rgba(1, 10, 32, 0.20) 45%, rgba(1, 8, 28, 0.72) 100%),

        linear-gradient(90deg, rgba(1, 8, 28, 0.90) 0%, rgba(2, 14, 42, 0.76) 45%, rgba(2, 14, 42, 0.28) 72%, rgba(1, 8, 28, 0.10) 100%),

        linear-gradient(180deg, rgba(1, 8, 28, 0.40) 0%, transparent 20%, transparent 75%, rgba(1, 8, 28, 0.85) 100%);

    z-index: 1;

    pointer-events: none;

}



/* Subtle high-tech digital grid */

.fp-grid-pattern {

    position: absolute;

    inset: 0;

    background-image: 

        linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);

    background-size: 44px 44px;

    z-index: 2;

    pointer-events: none;

}



/* 60FPS Animated Cyber Defense Radar Canvas */

.fp-cyber-canvas {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

    pointer-events: none;

    opacity: 0.92;

}



/* 2-Column Responsive Hero Container */

.fp-hero-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1360px;

    margin: 0 auto;

    padding: 0 32px;

    display: flex;

    flex-direction: row;

    align-items: stretch;

    justify-content: space-between;

    min-height: 660px;

    box-sizing: border-box;

    gap: 36px;

}



/* Left Column: Branding, CM Card, Typography & Action Buttons */

.fp-hero-content-col {

    flex: 1 1 54%;

    max-width: 650px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 14px;

    z-index: 5;

    padding: 16px 0 32px;

    box-sizing: border-box;

}



/* Right Column: Dedicated CM Portrait (Top-Aligned, Full Head & Face Uncropped) */

.fp-hero-photo-col {

    flex: 1 1 46%;

    max-width: 650px;

    display: flex;

    align-items: flex-start;

    justify-content: flex-end;

    position: relative;

    z-index: 4;

    overflow: visible;

    pointer-events: none;

    box-sizing: border-box;

}



.fp-cm-picture {

    display: flex;

    align-items: flex-start;

    justify-content: flex-end;

    width: 100%;

    height: 100%;

}



.fp-cm-figure {

    height: 100%;

    max-height: 650px;

    width: auto;

    max-width: 100%;

    object-fit: contain;

    object-position: right top;

    display: block;

    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 25px rgba(0, 229, 255, 0.22));

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 100%);

    mask-image: linear-gradient(to right, transparent 0%, black 14%, black 100%);

    transition: transform 0.15s ease-out;

    will-change: transform;

}



/* Tablet Media Query (768px to 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {

    .fp-hero-section {

        min-height: 580px;

        padding: 16px 0 0 0;

    }

    .fp-hero-container {

        padding: 0 24px;

        min-height: 560px;

        gap: 20px;

        display: flex !important;

        flex-direction: row !important;

        align-items: stretch !important;

        justify-content: space-between !important;

    }

    .fp-hero-content-col {

        flex: 1 1 55% !important;

        max-width: 56% !important;

        gap: 12px;

        padding: 14px 0 24px;

        order: 1 !important;

        text-align: left !important;

        align-items: flex-start !important;

    }

    .fp-headline {

        font-size: clamp(1.35rem, 2.7vw, 1.8rem);

        text-align: left !important;

    }

    .fp-subhead {

        font-size: 0.80rem;

        text-align: left !important;

    }

    .fp-hero-photo-col {

        flex: 1 1 45% !important;

        max-width: 44% !important;

        order: 2 !important;

        display: flex !important;

        align-items: flex-start !important;

        justify-content: flex-end !important;

        height: 100% !important;

    }

    .fp-cm-picture {

        height: 100% !important;

        display: flex !important;

        align-items: flex-start !important;

        justify-content: flex-end !important;

    }

    .fp-cm-figure {

        max-height: 530px !important;

        height: 100% !important;

        width: auto !important;

        object-fit: contain !important;

        object-position: right top !important;

    }

}



/* Department Logo & Title Badge */

.fp-dept-badge {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: rgba(2, 12, 38, 0.78);

    border: 1px solid rgba(50, 160, 255, 0.25);

    border-radius: 9999px;

    padding: 6px 18px 6px 8px;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);

}



.fp-dept-logo {

    width: 42px;

    height: 42px;

    object-fit: contain;

    filter: drop-shadow(0 2px 6px rgba(255, 176, 32, 0.35));

    border-radius: 50%;

}



.fp-dept-info {

    display: flex;

    flex-direction: column;

    text-align: left;

}



.fp-dept-gov {

    font-size: 0.68rem;

    color: #ffb020;

    font-weight: 800;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    line-height: 1.2;

}



.fp-dept-name {

    font-size: 0.88rem;

    color: #ffffff;

    font-weight: 700;

    line-height: 1.25;

}



/* CM Dignitary Card */

.fp-cm-card {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: linear-gradient(135deg, rgba(6, 26, 68, 0.88) 0%, rgba(3, 15, 42, 0.84) 100%);

    border: 1.5px solid rgba(255, 186, 45, 0.65);

    border-radius: 9999px;

    padding: 6px 20px 6px 8px;

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 229, 255, 0.18), 0 0 12px rgba(255, 176, 32, 0.2);

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

    margin-bottom: 8px;

}



.fp-cm-card:hover {

    transform: translateY(-2px);

    border-color: #ffb020;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 176, 32, 0.25);

}



.fp-cm-avatar-box {

    position: relative;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    padding: 2px;

    background: linear-gradient(135deg, #ff9933 0%, #ffffff 50%, #138808 100%);

    box-shadow: 0 0 10px rgba(255, 176, 32, 0.45);

    flex-shrink: 0;

}



.fp-cm-avatar {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    object-position: top center;

    display: block;

    background-color: #0b1a3d;

}



.fp-cm-badge-tag {

    position: absolute;

    bottom: -2px;

    right: -2px;

    background: linear-gradient(135deg, #ff9933, #e67e22);

    color: #ffffff;

    font-size: 0.55rem;

    font-weight: 900;

    letter-spacing: 0.02em;

    padding: 1px 5px;

    border-radius: 4px;

    border: 1px solid rgba(255, 255, 255, 0.8);

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

}



.fp-cm-meta {

    display: flex;

    flex-direction: column;

    text-align: left;

}



.fp-cm-role {

    font-size: 0.68rem;

    color: #ffb020;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    line-height: 1.2;

}



.fp-cm-name {

    font-size: 0.95rem;

    color: #ffffff;

    font-weight: 800;

    line-height: 1.25;

    margin: 0;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);

}



/* Central Hero Content Wrap */

.fp-hero-content-col {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    max-width: 680px;

    margin: auto 0;

    gap: 16px;

    width: 100%;

}



/* Smart Police Tag */

.fp-smart-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(2, 14, 45, 0.7);

    border: 1px solid rgba(50, 160, 255, 0.3);

    border-radius: 9999px;

    padding: 5px 14px;

    font-size: 0.78rem;

    font-weight: 800;

    color: #cbd5e1;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

}



.fp-tag-dot {

    width: 8px;

    height: 8px;

    background: #22c55e;

    border-radius: 50%;

    box-shadow: 0 0 10px #22c55e;

    animation: fpPulse 2s infinite ease-in-out;

}



@keyframes fpPulse {

    0%, 100% { transform: scale(1); opacity: 1; }

    50% { transform: scale(1.3); opacity: 0.7; }

}



.fp-tagline-accent {

    color: #ffb020;

    text-shadow: 0 0 10px rgba(255, 176, 32, 0.4);

}



.fp-tag-sep {

    color: rgba(255, 255, 255, 0.35);

}



/* Main Typography Block */

.fp-text-block {

    max-width: 680px;

    margin: 4px 0;

}



.fp-headline {

    color: #ffffff;

    font-size: clamp(2rem, 3.8vw, 3.4rem);

    font-weight: 900;

    letter-spacing: -0.02em;

    line-height: 1.15;

    margin: 10px 0 12px;

    text-shadow: 

        0 2px 20px rgba(0, 0, 0, 0.95),

        0 0 35px rgba(50, 160, 255, 0.35);

}



.fp-subhead {

    color: #cbd5e1;

    font-size: clamp(0.9rem, 1.4vw, 1.08rem);

    line-height: 1.6;

    max-width: 620px;

    margin: 0;

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);

}



/* Actions Row */

.fp-actions-row {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 6px;

}



.fp-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 24px;

    border-radius: 9999px;

    font-weight: 800;

    font-size: 0.88rem;

    letter-spacing: 0.02em;

    text-decoration: none;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);

}



.fp-btn-emergency {

    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);

    color: #ffffff;

    border: 1.5px solid rgba(255, 255, 255, 0.25);

    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.45);

}



.fp-btn-emergency:hover {

    transform: translateY(-2px) scale(1.03);

    box-shadow: 0 8px 30px rgba(239, 68, 68, 0.6);

}



.fp-btn-cyber {

    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

    color: #010622;

    border: 1.5px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.38);

}



.fp-btn-cyber:hover {

    transform: translateY(-2px) scale(1.03);

    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.55);

}



.fp-btn-glass {

    background: rgba(2, 16, 50, 0.8);

    color: #ffffff;

    border: 1.5px solid rgba(50, 160, 255, 0.5);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

}



.fp-btn-glass:hover {

    background: rgba(50, 160, 255, 0.25);

    border-color: #00e5ff;

    transform: translateY(-2px) scale(1.03);

    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.3);

}



/* Stats Strip */

.fp-stats-strip {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 6px;

}



.fp-stat-chip {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    background: rgba(2, 14, 42, 0.85);

    border: 1px solid rgba(50, 160, 255, 0.28);

    padding: 6px 14px;

    border-radius: 8px;

    font-size: 0.78rem;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

}



.fp-stat-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 6px #22c55e;

}



.fp-stat-label {

    color: #94a3b8;

    font-weight: 600;

}



.fp-stat-val {

    color: #ffffff;

    font-weight: 800;

}



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

   MOBILE & TABLET RESPONSIVENESS

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

@media (max-width: 1200px) {

    .fp-cm-figure-wrap {

        width: 55%;

        height: 90%;

        max-height: 90vh;

    }

    .fp-hero-content-col {

        max-width: 580px;

    }

}



@media (max-width: 991px) {

    .fp-hero-container {

        padding: 20px 20px 24px;

    }

    .fp-bg-image {

        object-position: center center;

    }

    .fp-cm-figure-wrap {

        width: 58%;

        height: 80%;

        max-height: 80vh;

        opacity: 0.88;

    }

    .fp-hero-content-col {

        max-width: 60%;

    }

}



@media (max-width: 767px) {

    .fp-hero-section {

        min-height: calc(100dvh - 76px);

        height: calc(100dvh - 76px);

        width: 100%;

        max-width: 100vw;

        overflow: hidden;

        position: relative;

    }

    .fp-bg-image {

        object-position: 70% center;

    }

    .fp-hero-section {

        min-height: auto;

        height: auto;

        padding: 16px 14px 28px;

        display: block;

        background-color: #020c24;

    }

    .fp-bg-overlay {

        background: 

            radial-gradient(circle at 50% 25%, rgba(0, 229, 255, 0.16) 0%, rgba(2, 14, 40, 0.35) 45%, rgba(1, 8, 28, 0.85) 100%),

            linear-gradient(180deg, rgba(1, 8, 28, 0.45) 0%, rgba(2, 12, 38, 0.20) 25%, rgba(1, 8, 28, 0.75) 60%, rgba(1, 8, 28, 0.95) 100%);

    }

    .fp-cyber-canvas {

        opacity: 0.90;

        z-index: 2;

    }

    

    .fp-hero-container {

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 14px;

        padding: 0;

        min-height: auto;

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

    }

    

    /* On mobile: Photo is stacked prominently at the top as requested! */

    .fp-hero-photo-col {

        order: 1;

        width: 100%;

        max-width: 360px;

        height: 46vh;

        max-height: 380px;

        min-height: 280px;

        margin: 0 auto 4px;

        display: flex;

        justify-content: center;

        align-items: flex-start;

        position: relative;

        z-index: 4;

    }

    .fp-cm-picture {

        width: 100%;

        height: 100%;

        display: flex;

        justify-content: center;

        align-items: flex-start;

    }

    .fp-cm-figure {

        height: 100%;

        max-height: 100%;

        width: auto;

        max-width: 100%;

        object-fit: contain;

        object-position: top center;

        filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 20px rgba(0, 229, 255, 0.28));

        -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);

        mask-image: linear-gradient(to bottom, black 82%, transparent 100%);

    }



    /* Content block follows right underneath the photo */

    .fp-hero-content-col {

        order: 2;

        width: 100%;

        max-width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 10px;

        padding: 0;

        margin: 0;

        z-index: 5;

    }

    .fp-top-row {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        max-width: 100%;

        margin-bottom: 0;

        box-sizing: border-box;

    }

    .fp-dept-badge {

        display: inline-flex;

        padding: 3px 10px 3px 4px;

        gap: 6px;

    }

    .fp-dept-logo {

        width: 28px;

        height: 28px;

    }

    .fp-dept-gov {

        font-size: 0.58rem;

    }

    .fp-dept-name {

        font-size: 0.68rem;

    }

    .fp-cm-card {

        margin: 0 auto 5px;

        padding: 4px 14px 4px 5px;

        gap: 8px;

        max-width: 92%;

        box-sizing: border-box;

        align-self: center;

        background: linear-gradient(135deg, rgba(8, 30, 78, 0.90) 0%, rgba(4, 18, 50, 0.85) 100%);

        border: 1.5px solid rgba(255, 186, 45, 0.70);

        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 15px rgba(255, 176, 32, 0.22);

    }

    .fp-cm-avatar-box {

        width: 32px;

        height: 32px;

        flex-shrink: 0;

    }

    .fp-cm-badge-tag {

        font-size: 0.46rem;

        padding: 0 3px;

    }

    .fp-cm-role {

        font-size: 0.56rem;

        white-space: nowrap;

    }

    .fp-cm-name {

        font-size: 0.74rem;

        white-space: nowrap;

    }

    

    /* Content wrap anchored towards lower portion so CM in upper half is 100% visible */

    .fp-hero-content-col {

        margin-top: auto;

        margin-bottom: 0;

        align-items: center;

        text-align: center;

        max-width: 100%;

        gap: 6px;

        width: 100%;

        box-sizing: border-box;

        padding-top: 10px;

    }

    .fp-smart-tag {

        font-size: 0.62rem;

        padding: 3px 10px;

        justify-content: center;

        flex-wrap: wrap;

        gap: 4px;

        margin: 0 auto 2px;

        max-width: 100%;

        box-sizing: border-box;

        background: rgba(1, 10, 32, 0.75);

        backdrop-filter: blur(8px);

    }

    .fp-text-block {

        max-width: 100%;

        margin: 0 auto;

        text-align: center;

        box-sizing: border-box;

    }

    .fp-headline {

        font-size: clamp(1.22rem, 5.2vw, 1.55rem);

        margin: 2px 0 4px;

        line-height: 1.22;

        word-break: break-word;

        overflow-wrap: break-word;

        text-align: center;

        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 229, 255, 0.4);

    }

    .fp-subhead {

        font-size: 0.74rem;

        line-height: 1.35;

        max-width: 95%;

        margin: 0 auto;

        text-align: center;

        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }

    

    /* Modern 2-column emergency grid + Explore button */

    .fp-actions-row {

        width: 100%;

        max-width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 6px;

        margin: 6px auto 2px;

        box-sizing: border-box;

        padding: 0;

    }

    .fp-actions-row .fp-btn-glass {

        grid-column: span 2;

        padding: 8px 12px;

    }

    .fp-btn {

        width: 100%;

        padding: 8px 10px;

        font-size: 0.76rem;

        justify-content: center;

        box-sizing: border-box;

        white-space: nowrap;

    }

    .fp-btn svg {

        width: 15px;

        height: 15px;

    }

    

    .fp-stats-strip {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 4px;

        margin: 4px auto 0;

        width: 100%;

        max-width: 100%;

        box-sizing: border-box;

    }

    .fp-stat-chip {

        padding: 2.5px 7px;

        font-size: 0.62rem;

        box-sizing: border-box;

        background: rgba(1, 10, 32, 0.72);

        backdrop-filter: blur(8px);

    }

}



@media (max-width: 480px) {

    .fp-cm-figure-wrap {

        top: 50px;

        right: -2px;

        width: 72%;

        max-width: 270px;

        height: 42vh;

        max-height: 330px;

    }

    .fp-headline {

        font-size: 1.25rem;

    }

    .fp-subhead {

        font-size: 0.72rem;

        line-height: 1.32;

        padding: 0 4px;

    }

    .fp-actions-row {

        gap: 5px;

    }

    .fp-btn {

        padding: 8px 8px;

        font-size: 0.74rem;

    }

    .fp-stats-strip {

        gap: 3px;

    }

    .fp-stat-chip {

        font-size: 0.58rem;

        padding: 2px 5px;

    }

}