:root {
            --green: #087443;
            --green-deep: #075B36;
            --dark: #18201C;
            --indigo: #5146C5;
            --lavender: #F5F2FF;
            --bg: #FAFAFC;
            --muted: #69736E;
            --alert: #D62828;
            --green-soft: #EAF5EE;
        }

        * {
            font-family: 'Hind Siliguri', 'Inter', sans-serif;
        }

        body {
            background: var(--bg);
        }

        /* কাস্টম রং ওভাররাইড */
        .bg-green-deep {
            background-color: var(--green-deep) !important;
        }

        .bg-green-soft {
            background-color: var(--green-soft);
        }

        .bg-lavender {
            background-color: var(--lavender);
        }

        .text-green-deep {
            color: var(--green-deep);
        }

        .text-muted-custom {
            color: var(--muted);
        }

        .border-green {
            border-color: var(--green) !important;
        }

        .btn-primary-custom {
            background-color: var(--green);
            border-color: var(--green);
            color: #fff;
        }

        .btn-primary-custom:hover {
            background-color: var(--green-deep);
            border-color: var(--green-deep);
        }

        .btn-outline-custom {
            border-color: var(--border);
            color: var(--dark);
        }

        .btn-outline-custom:hover {
            border-color: var(--green);
            color: var(--green-deep);
            background: transparent;
        }

        .btn-ghost {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn-ghost:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .chip {
            background: #fff;
            border: 1px solid #dee2e6;
            padding: 6px 16px;
            border-radius: 999px;
            font-size: 0.85rem;
            font-weight: 500;
            color: #3a453f;
            transition: 0.15s;
            text-decoration: none;
        }

        .chip:hover {
            border-color: var(--indigo);
            color: var(--indigo);
        }

        .emergency-card {
            background: #fff;
            border: 1px solid #f0d6d6;
            border-radius: 14px;
            padding: 1.25rem;
            text-align: center;
            transition: border-color .15s;
        }

        .emergency-card:hover {
            border-color: var(--alert);
        }

        .emergency-card .num {
            font-size: 2rem;
            font-weight: 800;
            color: var(--alert);
            font-family: 'Inter', sans-serif;
        }

        /* ভাষা টগল */
        [data-en] {
            display: none;
        }

        body.lang-en [data-bn] {
            display: none;
        }

        body.lang-en [data-en] {
            display: inline;
        }

        .lang-switch .btn {
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 30px;
            color: #EAF3EE;
            opacity: 0.7;
            border: none;
            background: transparent;
        }

        .lang-switch .btn.active {
            opacity: 1;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        /* ড্রপডাউন হোভার – ডেস্কটপে */
        @media (min-width: 992px) {
            .dropdown-hover:hover .dropdown-menu {
                display: block;
            }

            .dropdown-hover .dropdown-menu {
                display: none;
            }
        }

        /* ছোট স্ক্রিনে কিছু অ্যাডজাস্ট */
        .navbar-brand img {
            height: 44px;
            width: auto;
        }

        .hero {
            background: linear-gradient(180deg, var(--lavender) 0%, var(--bg) 78%);
            padding: 4rem 0 2.5rem;
        }

        .search-box {
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 20px;
            box-shadow: 0 8px 24px rgba(24, 32, 28, 0.08);
            padding: 8px 8px 8px 20px;
        }

        .search-box input {
            border: none;
            outline: none;
            font-size: 1rem;
            padding: 12px 0;
            background: transparent;
            width: 100%;
        }

        .erevenue {
            background: var(--green-deep);
            border-radius: 24px;
            padding: 2.5rem 2rem;
            color: #fff;
        }

        @media (max-width: 768px) {
            .erevenue {
                padding: 2rem 1.25rem;
            }
        }

        .footer {
            background: var(--dark);
            color: #cfd6d1;
        }

        .footer a {
            color: #9aa39d;
            text-decoration: none;
        }

        .footer a:hover {
            color: #fff;
            text-decoration: underline;
        }

        .notice-list .list-group-item {
            border-left: none;
            border-right: none;
            border-radius: 0;
        }

        .notice-list .list-group-item:first-child {
            border-top: none;
        }

        .notice-list .list-group-item:last-child {
            border-bottom: none;
        }

        .badge-new {
            background: var(--alert);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 999px;
            margin-left: 6px;
        }

        .service-card,
        .news-card,
        .project-card,
        .transparency-link,
        .civic-card {
            transition: transform .18s, box-shadow .18s, border-color .18s;
        }

        .service-card:hover,
        .news-card:hover,
        .project-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(24, 32, 28, 0.08);
        }

        .transparency-link:hover {
            border-color: var(--indigo);
            transform: translateY(-2px);
        }

        .civic-card:hover {
            border-color: var(--green);
        }

        .status-pill {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 3px 12px;
            border-radius: 999px;
            display: inline-block;
        }

        .status-ongoing {
            background: #FFF3DC;
            color: #8a5c10;
        }

        .status-done {
            background: var(--green-soft);
            color: var(--green-deep);
        }

        .status-planned {
            background: var(--lavender);
            color: var(--indigo);
        }

        .about-map {
            height: 280px;
            border-radius: 18px;
            background: linear-gradient(135deg, var(--green-soft), var(--lavender));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--muted);
            border: 1px solid #dee2e6;
        }

        .bg-soft-gray {
            background-color: #F1F3F1;
        }

        .navbar>.container {
            display: block !important;
            /* অথবা inline-block */
        }



        /* ---------- service cards ---------- */
        .service-card {
            border: none !important;
            border-radius: 1.25rem !important;
            padding: 1.5rem 1.25rem !important;
            background: #ffffff !important;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            transition: transform 0.25s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .service-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07);
        }

        /* icon wrapper — base */
        .service-icon {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 14px !important;
            font-size: 1.6rem;
            margin-bottom: 0.9rem !important;
            transition: background 0.25s, color 0.25s, transform 0.2s;
            flex-shrink: 0;
        }

        .service-icon svg {
            width: 24px;
            height: 24px;
            stroke-width: 1.8;
            transition: stroke 0.25s;
        }

        .service-card:hover .service-icon {
            transform: scale(1.03);
        }

        /* card heading & text */
        .service-card h5 {
            font-weight: 700;
            font-size: 1.05rem;
            color: #1a2e2a;
            margin-bottom: 0.1rem;
        }

        .service-card .text-muted {
            font-size: 0.9rem;
            line-height: 1.5;
            color: #5d6f68 !important;
            margin-bottom: 1rem;
        }

        .service-link {
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            transition: color 0.2s, border-color 0.2s;
            font-size: 0.9rem;
            border-bottom: 2px solid transparent;
            padding-bottom: 2px;
        }

        .service-link .arrow {
            transition: transform 0.2s ease;
            display: inline-block;
        }

        .service-link:hover .arrow {
            transform: translateX(4px);
        }

        /* ---------- per‑card color themes ---------- */

        /* 1. Holding Tax — blue */
        .card-tax .service-icon {
            background: #dbeafe;
            color: #2563eb;
        }

        .card-tax .service-icon svg {
            stroke: #2563eb;
        }

        .card-tax .service-link {
            color: #2563eb;
        }

        .card-tax .service-link:hover {
            border-bottom-color: #2563eb;
            color: #1d4ed8;
        }

        /* 2. Trade License — purple */
        .card-license .service-icon {
            background: #ede9fe;
            color: #7c3aed;
        }

        .card-license .service-icon svg {
            stroke: #7c3aed;
        }

        .card-license .service-link {
            color: #7c3aed;
        }

        .card-license .service-link:hover {
            border-bottom-color: #7c3aed;
            color: #6d28d9;
        }

        /* 3. Birth & Death — pink */
        .card-birth .service-icon {
            background: #fce7f3;
            color: #db2777;
        }

        .card-birth .service-icon svg {
            stroke: #db2777;
        }

        .card-birth .service-link {
            color: #db2777;
        }

        .card-birth .service-link:hover {
            border-bottom-color: #db2777;
            color: #be185d;
        }

        /* 4. Waste Management — orange */
        .card-waste .service-icon {
            background: #ffedd5;
            color: #ea580c;
        }

        .card-waste .service-icon svg {
            stroke: #ea580c;
        }

        .card-waste .service-link {
            color: #ea580c;
        }

        .card-waste .service-link:hover {
            border-bottom-color: #ea580c;
            color: #c2410c;
        }

        /* 5. Mosquito Control — red */
        .card-mosquito .service-icon {
            background: #fee2e2;
            color: #dc2626;
        }

        .card-mosquito .service-icon svg {
            stroke: #dc2626;
        }

        .card-mosquito .service-link {
            color: #dc2626;
        }

        .card-mosquito .service-link:hover {
            border-bottom-color: #dc2626;
            color: #b91c1c;
        }

        /* 6. Health Services — teal */
        .card-health .service-icon {
            background: #d1fae5;
            color: #059669;
        }

        .card-health .service-icon svg {
            stroke: #059669;
        }

        .card-health .service-link {
            color: #059669;
        }

        .card-health .service-link:hover {
            border-bottom-color: #059669;
            color: #047857;
        }

        /* 7. Citizen Charter — indigo */
        .card-charter .service-icon {
            background: #e0e7ff;
            color: #4f46e5;
        }

        .card-charter .service-icon svg {
            stroke: #4f46e5;
        }

        .card-charter .service-link {
            color: #4f46e5;
        }

        .card-charter .service-link:hover {
            border-bottom-color: #4f46e5;
            color: #4338ca;
        }

        /* 8. Forms & Downloads — slate */
        .card-forms .service-icon {
            background: #e2e8f0;
            color: #475569;
        }

        .card-forms .service-icon svg {
            stroke: #475569;
        }

        .card-forms .service-link {
            color: #475569;
        }

        .card-forms .service-link:hover {
            border-bottom-color: #475569;
            color: #334155;
        }

        /* ---------- responsive ---------- */
        @media (max-width: 576px) {
            .service-card {
                padding: 1.2rem 1rem !important;
            }

            .service-icon {
                width: 44px;
                height: 44px;
                font-size: 1.3rem;
            }

            .service-icon svg {
                width: 20px;
                height: 20px;
            }
        }

        .section-padding {
            padding-bottom: 1rem;
        }

        /* small header */
        .page-title {
            font-weight: 700;
            color: #0a6b3c;
            margin-bottom: 2rem;
            letter-spacing: -0.3px;
        }

        .page-title small {
            font-weight: 400;
            font-size: 1rem;
            color: #5d6f68;
        }