<!-- ==========================================================================
UPAZILA GOVERNMENT WEBSITE - HOME PAGE (WORDPRESS CUSTOM HTML BLOCK)
Compatible with WordPress Block Editor (Gutenberg) Custom HTML Block.
Scoped with 'upazila-' prefix to prevent WordPress theme style collisions.
========================================================================== -->
<div id="upazila-page-root" class="upazila-wrapper" lang="en">
<!-- Accessibility Skip Link -->
<a href="#upazila-main-content" class="upazila-skip-link">Skip to Main Content</a>
<!-- 1. TOP GOVERNMENT BAR -->
<div class="upazila-topbar" role="region" aria-label="Official Government Top Bar">
<div class="upazila-container upazila-topbar-inner">
<div class="upazila-topbar-left">
<span class="upazila-bd-flag" aria-hidden="true">
<svg viewBox="0 0 20 12" width="20" height="12" class="upazila-flag-svg">
<rect width="20" height="12" fill="#006a4e"></rect>
<circle cx="9" cy="6" r="4" fill="#f42a41"></circle>
</svg>
</span>
<span class="upazila-gov-name">Government of the People's Republic of Bangladesh</span>
<span class="upazila-gov-name-bn" style="display:none;">গণপ্রজাতন্ত্রী বাংলাদেশ সরকার</span>
</div>
<div class="upazila-topbar-right">
<div class="upazila-lang-toggle" role="group" aria-label="Language Selector">
<button type="button" class="upazila-lang-btn active" id="upazila-btn-en" onclick="upazilaSwitchLang('en')">English</button>
<span class="upazila-lang-divider">|</span>
<button type="button" class="upazila-lang-btn" id="upazila-btn-bn" onclick="upazilaSwitchLang('bn')">বাংলা</button>
</div>
<div class="upazila-access-controls" role="group" aria-label="Text Size Controls">
<button type="button" class="upazila-access-btn" onclick="upazilaChangeFontSize(-1)" title="Decrease Font Size" aria-label="Decrease Font Size">A-</button>
<button type="button" class="upazila-access-btn" onclick="upazilaResetFontSize()" title="Normal Font Size" aria-label="Normal Font Size">A</button>
<button type="button" class="upazila-access-btn" onclick="upazilaChangeFontSize(1)" title="Increase Font Size" aria-label="Increase Font Size">A+</button>
</div>
<button type="button" class="upazila-search-trigger-btn" onclick="upazilaToggleSearch()" aria-label="Open Search" title="Search Portal">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<span class="upazila-search-label">Search</span>
</button>
</div>
</div>
</div>
<!-- Accessible Search Dropdown / Bar -->
<div id="upazila-search-bar" class="upazila-search-drawer" style="display: none;" role="search" aria-label="Portal Search">
<div class="upazila-container upazila-search-inner">
<div class="upazila-search-input-group">
<svg class="upazila-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0B5CAB" stroke-width="2.5"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input type="text" id="upazila-search-input" class="upazila-search-input" placeholder="Search notices, citizen services, projects, offices..." aria-label="Search site content">
<button type="button" class="upazila-search-submit-btn" onclick="upazilaHandleSearch()">Search</button>
<button type="button" class="upazila-search-close-btn" onclick="upazilaToggleSearch()" aria-label="Close search">×</button>
</div>
<div id="upazila-search-results" class="upazila-search-results" style="display:none;"></div>
</div>
</div>
<!-- 2. MAIN HEADER -->
<header class="upazila-header" role="banner">
<div class="upazila-container upazila-header-inner">
<a href="#" class="upazila-brand" aria-label="Upazila Administration Portal Home">
<div class="upazila-logo-mark" aria-hidden="true">
<!-- Government Crest Vector Placeholder -->
<svg viewBox="0 0 48 48" width="44" height="44" fill="none" class="upazila-crest-svg">
<circle cx="24" cy="24" r="22" stroke="#0B5CAB" stroke-width="2.5" fill="#EAF4FB"></circle>
<circle cx="24" cy="24" r="16" fill="#073763"></circle>
<path d="M24 13L26.5 19.5H33.5L28 23.5L30 30L24 26L18 30L20 23.5L14.5 19.5H21.5L24 13Z" fill="#FBBF24"></path>
<path d="M12 36C18 41 30 41 36 36" stroke="#0B5CAB" stroke-width="2.5" stroke-linecap="round"></path>
</svg>
</div>
<div class="upazila-brand-text">
<span class="upazila-brand-title">Upazila Administration</span>
<span class="upazila-brand-subtitle">[Upazila Name], [District Name]</span>
</div>
</a>
<!-- Desktop Navigation -->
<nav class="upazila-nav-desktop" aria-label="Primary Navigation">
<ul class="upazila-nav-list">
<li class="upazila-nav-item"><a href="#" class="upazila-nav-link active" aria-current="page">Home</a></li>
<li class="upazila-nav-item"><a href="projects.html" class="upazila-nav-link">Projects</a></li>
<li class="upazila-nav-item"><a href="about.html" class="upazila-nav-link">About</a></li>
</ul>
<a href="#upazila-citizen-services-section" class="upazila-btn-primary upazila-header-cta">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
<span>Citizen Services</span>
</a>
</nav>
<!-- 3. MOBILE NAVIGATION TRIGGER -->
<button type="button" class="upazila-mobile-toggle" id="upazila-menu-toggle" aria-expanded="false" aria-controls="upazila-mobile-nav" aria-label="Toggle navigation menu" onclick="upazilaToggleMobileMenu()">
<span class="upazila-hamburger-line"></span>
<span class="upazila-hamburger-line"></span>
<span class="upazila-hamburger-line"></span>
</button>
</div>
<!-- Mobile Navigation Drawer -->
<div id="upazila-mobile-nav" class="upazila-mobile-nav" aria-hidden="true">
<div class="upazila-mobile-nav-inner">
<ul class="upazila-mobile-menu-list">
<li><a href="#" class="upazila-mobile-link active" onclick="upazilaCloseMobileMenu()">Home</a></li>
<li><a href="projects.html" class="upazila-mobile-link" onclick="upazilaCloseMobileMenu()">Projects</a></li>
<li><a href="about.html" class="upazila-mobile-link" onclick="upazilaCloseMobileMenu()">About</a></li>
<li><a href="#upazila-citizen-services-section" class="upazila-mobile-link" onclick="upazilaCloseMobileMenu()">Citizen Services</a></li>
<li><a href="#upazila-important-info" class="upazila-mobile-link" onclick="upazilaCloseMobileMenu()">Important Notices</a></li>
<li><a href="#upazila-contact-section" class="upazila-mobile-link" onclick="upazilaCloseMobileMenu()">Contact Administration</a></li>
</ul>
<div class="upazila-mobile-nav-footer">
<a href="#upazila-citizen-services-section" class="upazila-btn-primary upazila-btn-block" onclick="upazilaCloseMobileMenu()">Citizen Services Portal</a>
</div>
</div>
</div>
</header>
<!-- MAIN CONTENT CONTAINER -->
<main id="upazila-main-content">
<!-- 4. HERO SECTION -->
<section class="upazila-hero-section" aria-label="Portal Introduction">
<div class="upazila-container upazila-hero-grid">
<div class="upazila-hero-content">
<div class="upazila-hero-badge">
<span class="upazila-badge-dot"></span>
<span>উপজেলা প্রশাসন • Upazila Administration</span>
</div>
<h1 class="upazila-hero-title">
Welcome to <span class="upazila-highlight">[Upazila Name]</span> Upazila
</h1>
<p class="upazila-hero-tagline">
Serving Citizens, Supporting Development
</p>
<p class="upazila-hero-desc">
Official digital information portal of the [Upazila Name] Upazila Administration, providing information about public services, development initiatives, government activities and important notices.
</p>
<div class="upazila-hero-actions">
<a href="projects.html" class="upazila-btn-primary upazila-btn-lg">
<span>Explore Projects</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
<a href="about.html" class="upazila-btn-secondary upazila-btn-lg">
<span>About Upazila</span>
</a>
</div>
<div class="upazila-hero-quick-stats">
<div class="upazila-quick-item">
<strong>Transparent</strong>
<span>Public Service</span>
</div>
<div class="upazila-quick-divider"></div>
<div class="upazila-quick-item">
<strong>Digitalized</strong>
<span>Citizen Access</span>
</div>
<div class="upazila-quick-divider"></div>
<div class="upazila-quick-item">
<strong>Sustainable</strong>
<span>Local Progress</span>
</div>
</div>
</div>
<!-- 5. HERO VISUAL (Accessible Dashboard & Badge Mockup) -->
<div class="upazila-hero-visual" aria-hidden="true">
<div class="upazila-visual-card-main">
<div class="upazila-visual-header">
<div class="upazila-visual-dots">
<span></span><span></span><span></span>
</div>
<span class="upazila-visual-title">[Upazila Name] Administrative Complex</span>
</div>
<div class="upazila-visual-body">
<div class="upazila-visual-illustration">
<svg viewBox="0 0 380 200" width="100%" height="auto" class="upazila-vector-building">
<defs>
<linearGradient id="govSky" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#EAF4FB"></stop>
<stop offset="100%" stop-color="#FFFFFF"></stop>
</linearGradient>
<linearGradient id="govPillar" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0B5CAB"></stop>
<stop offset="100%" stop-color="#1769AA"></stop>
</linearGradient>
</defs>
<rect width="380" height="200" fill="url(#govSky)" rx="8"></rect>
<!-- Ground -->
<rect y="170" width="380" height="30" fill="#E2E8F0"></rect>
<rect y="166" width="380" height="4" fill="#0B5CAB"></rect>
<!-- Central Building Pediment -->
<polygon points="190,40 100,75 280,75" fill="#073763"></polygon>
<rect x="110" y="75" width="160" height="12" fill="#0B5CAB"></rect>
<!-- Pillars -->
<rect x="120" y="87" width="14" height="78" fill="url(#govPillar)"></rect>
<rect x="150" y="87" width="14" height="78" fill="url(#govPillar)"></rect>
<rect x="183" y="87" width="14" height="78" fill="url(#govPillar)"></rect>
<rect x="216" y="87" width="14" height="78" fill="url(#govPillar)"></rect>
<rect x="246" y="87" width="14" height="78" fill="url(#govPillar)"></rect>
<!-- Steps -->
<rect x="90" y="158" width="200" height="4" fill="#CBD5E1"></rect>
<rect x="80" y="162" width="220" height="4" fill="#94A3B8"></rect>
<!-- Emblem in Pediment -->
<circle cx="190" cy="60" r="8" fill="#FBBF24"></circle>
<!-- Side Wings -->
<rect x="40" y="95" width="65" height="70" fill="#D9E2EC" rx="2"></rect>
<rect x="275" y="95" width="65" height="70" fill="#D9E2EC" rx="2"></rect>
<!-- Windows -->
<rect x="48" y="105" width="16" height="20" fill="#0B5CAB" opacity="0.8" rx="2"></rect>
<rect x="80" y="105" width="16" height="20" fill="#0B5CAB" opacity="0.8" rx="2"></rect>
<rect x="284" y="105" width="16" height="20" fill="#0B5CAB" opacity="0.8" rx="2"></rect>
<rect x="316" y="105" width="16" height="20" fill="#0B5CAB" opacity="0.8" rx="2"></rect>
</svg>
</div>
</div>
<!-- Floating Information Cards -->
<div class="upazila-float-badge upazila-float-top-left">
<div class="upazila-badge-icon bg-blue">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg>
</div>
<div>
<strong>Public Services</strong>
<span>Online & In-person</span>
</div>
</div>
<div class="upazila-float-badge upazila-float-bottom-right">
<div class="upazila-badge-icon bg-green">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
<div>
<strong>Development Projects</strong>
<span>Monitored & Active</span>
</div>
</div>
<div class="upazila-float-badge upazila-float-middle-left">
<div class="upazila-badge-icon bg-accent">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<div>
<strong>Citizen Support</strong>
<span>Accountable Governance</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 6. UPAZILA INFORMATION SECTION -->
<section class="upazila-section upazila-bg-light" id="upazila-about-preview" aria-labelledby="heading-about-upazila">
<div class="upazila-container">
<div class="upazila-section-header">
<span class="upazila-section-kicker">Administrative Overview</span>
<h2 id="heading-about-upazila" class="upazila-section-title">About Madhyanagar</h2>
<div class="upazila-title-divider"></div>
</div>
<div class="upazila-grid-two-col">
<div class="upazila-col-text">
<h3 class="upazila-subheading">A Vibrant Administrative Hub Committed to Civic Progress</h3>
<p class="upazila-paragraph">
[Upazila Name] is a prominent administrative upazila situated in [District Name] District under [Division Name] Division. Surrounded by natural waterways and rich fertile terrain, it serves as an essential center for agricultural productivity, small enterprise, educational institutions, and public healthcare delivery.
</p>
<p class="upazila-paragraph">
The Upazila Administration operates under the guidance of the Cabinet Division and Ministry of Public Administration, coordinating multi-sectoral development schemes, social safety net programs, disaster risk resilience, and transparent public service facilitation across all constituent Union Parishads.
</p>
<div class="upazila-info-features">
<div class="upazila-feature-item">
<div class="upazila-feature-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 14 14"></polyline></svg>
</div>
<div>
<strong>Efficient Service Delivery</strong>
<p>Fast-track processing for citizenship certificates, social welfare, and agricultural incentives.</p>
</div>
</div>
<div class="upazila-feature-item">
<div class="upazila-feature-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
</div>
<div>
<strong>Union Parishad Coordination</strong>
<p>Active grassroots connectivity across all local ward councils and rural communities.</p>
</div>
</div>
</div>
</div>
<div class="upazila-col-card">
<div class="upazila-admin-card">
<div class="upazila-admin-card-header">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
<h3>Administrative Profile</h3>
</div>
<div class="upazila-admin-table-wrap">
<table class="upazila-admin-table">
<tbody>
<tr>
<th scope="row">Upazila</th>
<td>[Upazila Name]</td>
</tr>
<tr>
<th scope="row">District</th>
<td>[District Name]</td>
</tr>
<tr>
<th scope="row">Division</th>
<td>[Division Name]</td>
</tr>
<tr>
<th scope="row">Established</th>
<td>[Year / e.g. 1983]</td>
</tr>
<tr>
<th scope="row">Total Area</th>
<td>[Area in Sq Km / e.g. 248.5 sq km]</td>
</tr>
<tr>
<th scope="row">Population</th>
<td>[Population Placeholder / e.g. 312,000+]</td>
</tr>
<tr>
<th scope="row">Unions</th>
<td>[Number of Unions / e.g. 12 Unions]</td>
</tr>
<tr>
<th scope="row">Paurashava / Municipality</th>
<td>[1 Paurashava / Not Applicable]</td>
</tr>
<tr>
<th scope="row">Administrative Head</th>
<td>Upazila Nirbahi Officer (UNO)</td>
</tr>
</tbody>
</table>
</div>
<div class="upazila-admin-card-footer">
<a href="about.html" class="upazila-link-arrow">
<span>Detailed Administrative Profile</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 7. UPCOMING / IMPORTANT INFORMATION -->
<section class="upazila-section" id="upazila-important-info" aria-labelledby="heading-important-info">
<div class="upazila-container">
<div class="upazila-section-header">
<span class="upazila-section-kicker">Public Services & Notices</span>
<h2 id="heading-important-info" class="upazila-section-title">Important Information</h2>
<div class="upazila-title-divider"></div>
<p class="upazila-section-subtitle">Access critical administrative resources, official announcements, emergency contacts and civic assistance.</p>
</div>
<div class="upazila-grid-four-cards" id="upazila-citizen-services-section">
<!-- Card 1: Notices -->
<div class="upazila-info-card">
<div class="upazila-card-icon-wrap bg-blue-light">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0B5CAB" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
</div>
<h3 class="upazila-card-title">Notices</h3>
<p class="upazila-card-desc">View official notices, administrative circulars, tender announcements, and local government press releases.</p>
<a href="#upazila-notices" class="upazila-card-link">
<span>View Details</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
<!-- Card 2: Citizen Services -->
<div class="upazila-info-card">
<div class="upazila-card-icon-wrap bg-blue-light">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0B5CAB" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
<h3 class="upazila-card-title">Citizen Services</h3>
<p class="upazila-card-desc">Find information about available public services, e-mutation, certificates, allowance applications, and trade licenses.</p>
<a href="#upazila-services" class="upazila-card-link">
<span>View Details</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
<!-- Card 3: Office Information -->
<div class="upazila-info-card">
<div class="upazila-card-icon-wrap bg-blue-light">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0B5CAB" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
</div>
<h3 class="upazila-card-title">Office Information</h3>
<p class="upazila-card-desc">Find office hours, departmental directory, official designations, and location maps for all upazila executive branches.</p>
<a href="#upazila-contact-section" class="upazila-card-link">
<span>View Details</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
<!-- Card 4: Emergency Information -->
<div class="upazila-info-card upazila-card-emergency">
<div class="upazila-card-icon-wrap bg-red-light">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#DC2626" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
<h3 class="upazila-card-title">Emergency Information</h3>
<p class="upazila-card-desc">Important emergency and public safety information: Fire Service, Police, Upazila Health Complex, and Disaster Hotline.</p>
<a href="#upazila-emergency" class="upazila-card-link text-red">
<span>View Details</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
</section>
<!-- 8. UPAZILA ADMINISTRATION MESSAGE -->
<section class="upazila-section upazila-bg-light" aria-labelledby="heading-uno-message">
<div class="upazila-container">
<div class="upazila-uno-box">
<div class="upazila-uno-grid">
<div class="upazila-uno-photo-col">
<div class="upazila-officer-photo-frame">
<!-- Officer Image Placeholder with official crest emblem overlay -->
<div class="upazila-officer-placeholder" aria-label="Upazila Nirbahi Officer Portrait Placeholder">
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="1.5">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span class="upazila-photo-tag">Official Officer Portrait</span>
</div>
</div>
</div>
<div class="upazila-uno-text-col">
<span class="upazila-section-kicker">Leadership & Direction</span>
<h2 id="heading-uno-message" class="upazila-uno-title">Message from the Upazila Nirbahi Officer</h2>
<blockquote class="upazila-uno-quote">
"Welcome to the official digital platform of [Upazila Name]. Our administration is committed to providing citizen-focused public services, supporting sustainable development and ensuring transparent and accountable administration."
</blockquote>
<p class="upazila-uno-body-text">
Under the Vision of a Smart Bangladesh, we are striving to eliminate unnecessary bureaucratic delays, empower our grassroots farmers and entrepreneurs, and ensure that every citizen in our unions has direct and dignified access to governmental resources.
</p>
<div class="upazila-uno-signature-block">
<div class="upazila-officer-details">
<h4 class="upazila-officer-name">[Name of Upazila Nirbahi Officer]</h4>
<p class="upazila-officer-role">Upazila Nirbahi Officer (UNO)</p>
<p class="upazila-officer-office">[Upazila Name] Upazila, [District Name]</p>
</div>
<a href="about.html" class="upazila-btn-secondary">
<span>Read Full Message</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 9. OUR PRIORITIES (Why this Upazila Matters) -->
<section class="upazila-section" aria-labelledby="heading-priorities">
<div class="upazila-container">
<div class="upazila-section-header">
<span class="upazila-section-kicker">Core Strategic Focus</span>
<h2 id="heading-priorities" class="upazila-section-title">Our Priorities</h2>
<div class="upazila-title-divider"></div>
<p class="upazila-section-subtitle">Guiding principles and continuous pillars shaping our administrative actions, civic investments, and policy enforcement.</p>
</div>
<div class="upazila-grid-three-col">
<!-- Priority 1 -->
<div class="upazila-priority-card">
<div class="upazila-priority-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>
</div>
<h3 class="upazila-priority-title">Citizen Services</h3>
<p class="upazila-priority-desc">Improving seamless access to essential public services, land mutation, birth registration, and civic rights with zero harassment.</p>
</div>
<!-- Priority 2 -->
<div class="upazila-priority-card">
<div class="upazila-priority-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
<h3 class="upazila-priority-title">Good Governance</h3>
<p class="upazila-priority-desc">Promoting transparency, financial integrity, rigorous anti-corruption safeguards, and open public hearing sessions every week.</p>
</div>
<!-- Priority 3 -->
<div class="upazila-priority-card">
<div class="upazila-priority-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
</div>
<h3 class="upazila-priority-title">Local Development</h3>
<p class="upazila-priority-desc">Supporting resilient rural road networks, culverts, cyclone shelters, modern drainage, and economic marketplace growth.</p>
</div>
<!-- Priority 4 -->
<div class="upazila-priority-card">
<div class="upazila-priority-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 10v6M2 10l10-5 10 5-10 5z"></path><path d="M6 12v5c3 3 9 3 12 0v-5"></path></svg>
</div>
<h3 class="upazila-priority-title">Education</h3>
<p class="upazila-priority-desc">Supporting primary school infrastructure, multimedia smart classrooms, vocational training centers, and student scholarship schemes.</p>
</div>
<!-- Priority 5 -->
<div class="upazila-priority-card">
<div class="upazila-priority-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
</div>
<h3 class="upazila-priority-title">Health & Wellbeing</h3>
<p class="upazila-priority-desc">Supporting Upazila Health Complex readiness, union community clinics, maternal healthcare, and universal vaccination outreach.</p>
</div>
<!-- Priority 6 -->
<div class="upazila-priority-card">
<div class="upazila-priority-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"></path><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"></path></svg>
</div>
<h3 class="upazila-priority-title">Environment</h3>
<p class="upazila-priority-desc">Promoting social afforestation, riverbank conservation, plastic waste reduction, and climate-resilient farming techniques.</p>
</div>
</div>
</div>
</section>
<!-- 10. FEATURED PROJECTS -->
<section class="upazila-section upazila-bg-light" id="upazila-projects-preview" aria-labelledby="heading-featured-projects">
<div class="upazila-container">
<div class="upazila-section-header">
<span class="upazila-section-kicker">Community Investments</span>
<h2 id="heading-featured-projects" class="upazila-section-title">Development Projects</h2>
<div class="upazila-title-divider"></div>
<p class="upazila-section-subtitle">Explore selected development initiatives and projects being implemented to support the people and communities of [Upazila Name].</p>
</div>
<div class="upazila-grid-three-col">
<!-- Project 1 -->
<article class="upazila-project-card">
<div class="upazila-project-img-wrap">
<div class="upazila-img-placeholder">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
<span>Infrastructure Project Visual</span>
</div>
<span class="upazila-status-badge status-ongoing">Ongoing</span>
</div>
<div class="upazila-project-body">
<span class="upazila-project-cat">Infrastructure</span>
<h3 class="upazila-project-title">1. Rural Road Development & Paving</h3>
<p class="upazila-project-location">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>Union 02 to Growth Center Market Corridor</span>
</p>
<p class="upazila-project-desc">
Rehabilitation and bituminous carpeting of 12.4 km vital agricultural feeder roads to streamline farmer market transport.
</p>
<div class="upazila-project-footer">
<a href="projects.html" class="upazila-btn-outline upazila-btn-sm">View Project</a>
</div>
</div>
</article>
<!-- Project 2 -->
<article class="upazila-project-card">
<div class="upazila-project-img-wrap">
<div class="upazila-img-placeholder">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
<span>Civic Facility Visual</span>
</div>
<span class="upazila-status-badge status-completed">Completed</span>
</div>
<div class="upazila-project-body">
<span class="upazila-project-cat">Civic Works</span>
<h3 class="upazila-project-title">2. Community Infrastructure & Drainage</h3>
<p class="upazila-project-location">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>[Upazila Name] Sadar Bazaar Zone</span>
</p>
<p class="upazila-project-desc">
Construction of climate-resilient storm drainage, covered pedestrian walkways, and public sanitation blocks.
</p>
<div class="upazila-project-footer">
<a href="projects.html" class="upazila-btn-outline upazila-btn-sm">View Project</a>
</div>
</div>
</article>
<!-- Project 3 -->
<article class="upazila-project-card">
<div class="upazila-project-img-wrap">
<div class="upazila-img-placeholder">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
<span>Education Project Visual</span>
</div>
<span class="upazila-status-badge status-ongoing">Ongoing</span>
</div>
<div class="upazila-project-body">
<span class="upazila-project-cat">Education</span>
<h3 class="upazila-project-title">3. Education Facility Modernization</h3>
<p class="upazila-project-location">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>8 Selected Model Government Primary Schools</span>
</p>
<p class="upazila-project-desc">
Upgrading science labs, digital interactive displays, solar power backups, and separate hygienic washrooms for girls.
</p>
<div class="upazila-project-footer">
<a href="projects.html" class="upazila-btn-outline upazila-btn-sm">View Project</a>
</div>
</div>
</article>
<!-- Project 4 -->
<article class="upazila-project-card">
<div class="upazila-project-img-wrap">
<div class="upazila-img-placeholder">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
<span>Public Health Visual</span>
</div>
<span class="upazila-status-badge status-completed">Completed</span>
</div>
<div class="upazila-project-body">
<span class="upazila-project-cat">Public Health</span>
<h3 class="upazila-project-title">4. Deep Tube-Well & Safe Water Supply</h3>
<p class="upazila-project-location">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>High-Salinity / Arsenic Vulnerable Villages</span>
</p>
<p class="upazila-project-desc">
Installation of 45 solar-powered deep aquifer community filtration plants supplying potable drinking water to 18,000+ households.
</p>
<div class="upazila-project-footer">
<a href="projects.html" class="upazila-btn-outline upazila-btn-sm">View Project</a>
</div>
</div>
</article>
<!-- Project 5 -->
<article class="upazila-project-card">
<div class="upazila-project-img-wrap">
<div class="upazila-img-placeholder">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
<span>Digital E-Service Visual</span>
</div>
<span class="upazila-status-badge status-ongoing">Ongoing</span>
</div>
<div class="upazila-project-body">
<span class="upazila-project-cat">Smart Governance</span>
<h3 class="upazila-project-title">5. Upazila Digital Service Helpdesks</h3>
<p class="upazila-project-location">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>All Union Digital Centers (UDC)</span>
</p>
<p class="upazila-project-desc">
Equipping all union digital operators with high-speed fiber connectivity, biometric scanners, and direct e-Nothi land portals.
</p>
<div class="upazila-project-footer">
<a href="projects.html" class="upazila-btn-outline upazila-btn-sm">View Project</a>
</div>
</div>
</article>
<!-- Project 6 -->
<article class="upazila-project-card">
<div class="upazila-project-img-wrap">
<div class="upazila-img-placeholder">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
<span>Community Empowerment Visual</span>
</div>
<span class="upazila-status-badge status-planned">Planned</span>
</div>
<div class="upazila-project-body">
<span class="upazila-project-cat">Empowerment</span>
<h3 class="upazila-project-title">6. Women's Agro-Enterprise Center</h3>
<p class="upazila-project-location">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>[Upazila Name] Craft & Agro Zone</span>
</p>
<p class="upazila-project-desc">
Dedicated training facility and cold-storage distribution hub for 1,200+ rural female poultry, dairy, and handicraft producers.
</p>
<div class="upazila-project-footer">
<a href="projects.html" class="upazila-btn-outline upazila-btn-sm">View Project</a>
</div>
</div>
</article>
</div>
<div class="upazila-center-cta">
<a href="projects.html" class="upazila-btn-primary upazila-btn-lg">
<span>View All Projects</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</div>
</section>
<!-- 11. KEY STATISTICS -->
<section class="upazila-stat-section" aria-label="Key Performance Indicators">
<div class="upazila-container">
<div class="upazila-stat-grid">
<!-- Stat 1 -->
<div class="upazila-stat-item">
<div class="upazila-stat-number-wrap">
<span class="upazila-counter" data-target="48">0</span>
<span class="upazila-stat-plus">+</span>
</div>
<p class="upazila-stat-label">[XX]+ Development Projects</p>
<span class="upazila-stat-sub">Active & Monitored</span>
</div>
<!-- Stat 2 -->
<div class="upazila-stat-item">
<div class="upazila-stat-number-wrap">
<span class="upazila-counter" data-target="36">0</span>
<span class="upazila-stat-plus">+</span>
</div>
<p class="upazila-stat-label">[XX]+ Citizen Services</p>
<span class="upazila-stat-sub">Online & Fast-Tracked</span>
</div>
<!-- Stat 3 -->
<div class="upazila-stat-item">
<div class="upazila-stat-number-wrap">
<span class="upazila-counter" data-target="12">0</span>
<span class="upazila-stat-plus">+</span>
</div>
<p class="upazila-stat-label">[XX]+ Unions</p>
<span class="upazila-stat-sub">Grassroots Coverage</span>
</div>
<!-- Stat 4 -->
<div class="upazila-stat-item">
<div class="upazila-stat-number-wrap">
<span class="upazila-counter" data-target="85">0</span>
<span class="upazila-stat-plus">+</span>
</div>
<p class="upazila-stat-label">[XX]+ Community Initiatives</p>
<span class="upazila-stat-sub">Citizen Welfare Schemes</span>
</div>
</div>
</div>
</section>
<!-- 12. CITIZEN FEEDBACK -->
<section class="upazila-section" aria-labelledby="heading-feedback">
<div class="upazila-container">
<div class="upazila-section-header">
<span class="upazila-section-kicker">Public Voice & Trust</span>
<h2 id="heading-feedback" class="upazila-section-title">Citizen Feedback</h2>
<div class="upazila-title-divider"></div>
<p class="upazila-section-subtitle">Sample feedback reflecting civic interactions with the Upazila administration and public service centers.</p>
</div>
<div class="upazila-grid-three-col">
<!-- Feedback Card 1 -->
<div class="upazila-feedback-card">
<div class="upazila-feedback-rating" aria-label="Satisfaction rating: 5 out of 5 stars">
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
</div>
<blockquote class="upazila-feedback-quote">
"I received my land e-mutation and updated records within the stated timeframe without visiting multiple times. The Union Digital Center guidance was remarkably clear."
</blockquote>
<div class="upazila-feedback-author">
<div class="upazila-author-avatar">CN</div>
<div>
<strong class="upazila-author-name">[Sample Citizen Name]</strong>
<span class="upazila-author-loc">[Union 03 / Area Name]</span>
</div>
</div>
</div>
<!-- Feedback Card 2 -->
<div class="upazila-feedback-card">
<div class="upazila-feedback-rating" aria-label="Satisfaction rating: 5 out of 5 stars">
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
</div>
<blockquote class="upazila-feedback-quote">
"The new paved link road between our rural bazaar and the Upazila headquarters has reduced our produce transit time by more than half during peak harvest season."
</blockquote>
<div class="upazila-feedback-author">
<div class="upazila-author-avatar">RF</div>
<div>
<strong class="upazila-author-name">[Sample Citizen Name]</strong>
<span class="upazila-author-loc">[Local Agro Community Representative]</span>
</div>
</div>
</div>
<!-- Feedback Card 3 -->
<div class="upazila-feedback-card">
<div class="upazila-feedback-rating" aria-label="Satisfaction rating: 5 out of 5 stars">
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
<span class="upazila-star">★</span>
</div>
<blockquote class="upazila-feedback-quote">
"The weekly public grievance hearing by the Upazila Nirbahi Officer provided an immediate resolution for our village primary school drinking water connectivity."
</blockquote>
<div class="upazila-feedback-author">
<div class="upazila-author-avatar">ST</div>
<div>
<strong class="upazila-author-name">[Sample Citizen Name]</strong>
<span class="upazila-author-loc">[Ward 04 Resident]</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 13. CALL TO ACTION -->
<section class="upazila-cta-section" aria-labelledby="heading-cta">
<div class="upazila-container upazila-cta-inner">
<div class="upazila-cta-content">
<h2 id="heading-cta" class="upazila-cta-title">Together for Better Public Services</h2>
<p class="upazila-cta-desc">
Explore development projects, public information and services provided by the [Upazila Name] Upazila Administration. Stay informed and actively participate in civic development.
</p>
<div class="upazila-cta-actions">
<a href="projects.html" class="upazila-btn-white upazila-btn-lg">
<span>Explore Projects</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
<a href="about.html" class="upazila-btn-ghost upazila-btn-lg">
<span>Learn About Us</span>
</a>
</div>
</div>
</div>
</section>
</main>
<!-- 14. FOOTER -->
<footer class="upazila-footer" id="upazila-contact-section" role="contentinfo">
<div class="upazila-container upazila-footer-top">
<div class="upazila-footer-grid">
<!-- Col 1: Government Identity -->
<div class="upazila-footer-col upazila-footer-brand">
<div class="upazila-footer-logo-row">
<svg viewBox="0 0 48 48" width="40" height="40" fill="none" class="upazila-footer-crest">
<circle cx="24" cy="24" r="22" stroke="#FFFFFF" stroke-width="2" fill="#0B5CAB"></circle>
<circle cx="24" cy="24" r="15" fill="#073763"></circle>
<path d="M24 14L26.5 20H33L27.5 24L29.5 30L24 26.5L18.5 30L20.5 24L15 20H21.5L24 14Z" fill="#FBBF24"></path>
</svg>
<div>
<strong class="upazila-footer-title">Upazila Administration</strong>
<span class="upazila-footer-sub">[Upazila Name], [District Name]</span>
</div>
</div>
<p class="upazila-footer-lead">
Government of the People's Republic of Bangladesh. Dedicated to transparent governance, citizen welfare, and sustainable local community progress.
</p>
<div class="upazila-social-links" aria-label="Official Social Channels">
<a href="#" class="upazila-social-btn" title="Facebook Page Placeholder" aria-label="Facebook">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
</a>
<a href="#" class="upazila-social-btn" title="YouTube Channel Placeholder" aria-label="YouTube">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" fill="#073763"></polygon></svg>
</a>
<a href="#" class="upazila-social-btn" title="LinkedIn Profile Placeholder" aria-label="LinkedIn">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
</div>
</div>
<!-- Col 2: Quick Links -->
<div class="upazila-footer-col">
<h4 class="upazila-footer-heading">Quick Links</h4>
<ul class="upazila-footer-menu">
<li><a href="#">Home</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About Upazila</a></li>
<li><a href="#upazila-citizen-services-section">Citizen Services</a></li>
<li><a href="#upazila-important-info">Important Notices</a></li>
</ul>
</div>
<!-- Col 3: Useful Links -->
<div class="upazila-footer-col">
<h4 class="upazila-footer-heading">Useful Links</h4>
<ul class="upazila-footer-menu">
<li><a href="https://bangladesh.gov.bd" target="_blank" rel="noopener noreferrer">Bangladesh National Portal</a></li>
<li><a href="https://services.portal.gov.bd" target="_blank" rel="noopener noreferrer">Government Services (myGov)</a></li>
<li><a href="https://mopa.gov.bd" target="_blank" rel="noopener noreferrer">Ministry of Public Administration</a></li>
<li><a href="https://cabinet.gov.bd" target="_blank" rel="noopener noreferrer">Cabinet Division</a></li>
<li><a href="https://eprocure.gov.bd" target="_blank" rel="noopener noreferrer">National e-GP Portal</a></li>
</ul>
</div>
<!-- Col 4: Contact Information -->
<div class="upazila-footer-col">
<h4 class="upazila-footer-heading">Contact Administration</h4>
<div class="upazila-footer-contact">
<div class="upazila-contact-row">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EAF4FB" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
<span>Office of the UNO, [Upazila Name], [District Name], Bangladesh</span>
</div>
<div class="upazila-contact-row">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EAF4FB" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
<span>Telephone: [Telephone Number Placeholder]</span>
</div>
<div class="upazila-contact-row">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EAF4FB" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
<span>Email: uno[upazilaname]@mopa.gov.bd</span>
</div>
<div class="upazila-contact-row">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#EAF4FB" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
<span>Office Hours: Sun – Thu (9:00 AM – 5:00 PM)</span>
</div>
</div>
</div>
</div>
</div>
<!-- Copyright & Disclaimer Bottom Bar -->
<div class="upazila-footer-bottom">
<div class="upazila-container upazila-footer-bottom-inner">
<p class="upazila-copyright">
© 2026 [Upazila Name] Upazila Administration. All Rights Reserved.
</p>
<div class="upazila-footer-sub-links">
<span>Planning & Implementation: Upazila Administration</span>
<span class="upazila-dot-separator">•</span>
<span>Digital Portal Initiative</span>
</div>
</div>
</div>
</footer>
</div>
<!-- ==========================================================================
UPAZILA WEBSITE CSS (SCOPED WITH 'upazila-' PREFIX)
========================================================================== -->
/* ==========================================================================
UPAZILA WEBSITE CSS - GEOMETRIC BALANCE THEME (SCOPED WITH 'upazila-' PREFIX)
========================================================================== */
<style>
/* CSS VARIABLES (Geometric Balance Government Palette) */
:root {
--upazila-primary-blue: #0B5CAB;
--upazila-dark-blue: #073763;
--upazila-secondary-blue: #1769AA;
--upazila-light-blue: #EAF4FB;
--upazila-accent-blue: #2F80ED;
--upazila-white: #FFFFFF;
--upazila-light-gray: #F5F7FA;
--upazila-border: #D9E2EC;
--upazila-main-text: #1F2937;
--upazila-secondary-text: #64748B;
--upazila-success: #16A34A;
--upazila-danger: #DC2626;
--upazila-danger-border: #EF4444;
--upazila-font-family: 'Plus Jakarta Sans', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--upazila-radius-sm: 6px;
--upazila-radius: 10px;
--upazila-radius-lg: 16px;
--upazila-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
--upazila-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--upazila-shadow-md: 0 4px 16px rgba(7, 55, 99, 0.07);
--upazila-shadow-lg: 0 12px 32px rgba(7, 55, 99, 0.09);
--upazila-shadow-xl: 0 20px 40px rgba(7, 55, 99, 0.12);
}
/* BASE RESET & CONTAINER */
.upazila-wrapper {
font-family: var(--upazila-font-family);
color: var(--upazila-main-text);
background-color: var(--upazila-white);
line-height: 1.6;
font-size: 16px;
box-sizing: border-box;
width: 100%;
position: relative;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.upazila-wrapper *,
.upazila-wrapper *::before,
.upazila-wrapper *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.upazila-container {
width: 100%;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
/* ACCESSIBILITY SKIP LINK */
.upazila-skip-link {
position: absolute;
top: -60px;
left: 24px;
background: var(--upazila-dark-blue);
color: var(--upazila-white);
padding: 10px 18px;
z-index: 99999;
font-weight: 700;
border-radius: var(--upazila-radius-sm);
border: 1px solid var(--upazila-primary-blue);
transition: top 0.2s ease;
text-decoration: none;
}
.upazila-skip-link:focus {
top: 15px;
}
/* 1. TOP GOVERNMENT BAR */
.upazila-topbar {
background-color: var(--upazila-dark-blue);
color: #E2E8F0;
font-size: 12px;
border-bottom: 1px solid var(--upazila-primary-blue);
padding: 6px 0;
letter-spacing: 0.2px;
}
.upazila-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.upazila-topbar-left {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.upazila-topbar-right {
display: flex;
align-items: center;
gap: 14px;
}
.upazila-lang-toggle {
display: flex;
align-items: center;
gap: 6px;
}
.upazila-lang-btn {
background: none;
border: none;
color: #CBD5E1;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: var(--upazila-transition);
}
.upazila-lang-btn:hover,
.upazila-lang-btn.active {
color: var(--upazila-white);
background: rgba(255, 255, 255, 0.18);
}
.upazila-lang-divider {
color: #64748B;
}
.upazila-access-controls {
display: flex;
align-items: center;
gap: 4px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.2);
padding: 0 8px;
}
.upazila-access-btn {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--upazila-white);
font-size: 11px;
font-weight: bold;
padding: 2px 7px;
border-radius: 3px;
cursor: pointer;
transition: var(--upazila-transition);
}
.upazila-access-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
.upazila-search-trigger-btn {
display: flex;
align-items: center;
gap: 5px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--upazila-white);
font-size: 12px;
font-weight: 600;
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
transition: var(--upazila-transition);
}
.upazila-search-trigger-btn:hover {
background: var(--upazila-primary-blue);
}
/* SEARCH DRAWER */
.upazila-search-drawer {
background: var(--upazila-light-blue);
border-bottom: 2px solid var(--upazila-primary-blue);
padding: 14px 0;
box-shadow: 0 4px 14px rgba(11, 92, 171, 0.08);
}
.upazila-search-input-group {
display: flex;
align-items: center;
gap: 8px;
background: var(--upazila-white);
border: 2px solid var(--upazila-primary-blue);
border-radius: var(--upazila-radius-sm);
padding: 6px 12px;
}
.upazila-search-input {
flex: 1;
border: none;
outline: none;
font-size: 15px;
color: var(--upazila-main-text);
font-family: inherit;
}
.upazila-search-submit-btn {
background: var(--upazila-primary-blue);
color: var(--upazila-white);
border: none;
padding: 6px 16px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: var(--upazila-transition);
}
.upazila-search-submit-btn:hover {
background: var(--upazila-dark-blue);
}
.upazila-search-close-btn {
background: none;
border: none;
font-size: 24px;
color: var(--upazila-secondary-text);
cursor: pointer;
line-height: 1;
}
.upazila-search-results {
margin-top: 10px;
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius-sm);
padding: 12px 16px;
font-size: 14px;
}
/* 2. MAIN HEADER */
.upazila-header {
background: var(--upazila-white);
border-bottom: 1px solid var(--upazila-border);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--upazila-shadow-sm);
}
.upazila-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 14px;
padding-bottom: 14px;
}
.upazila-brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: inherit;
}
.upazila-crest-svg {
display: block;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(11, 92, 171, 0.15);
}
.upazila-brand-text {
display: flex;
flex-direction: column;
}
.upazila-brand-title {
font-size: 17px;
font-weight: 800;
color: var(--upazila-dark-blue);
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.upazila-brand-subtitle {
font-size: 13px;
font-weight: 600;
color: var(--upazila-secondary-text);
}
/* DESKTOP NAV */
.upazila-nav-desktop {
display: flex;
align-items: center;
gap: 28px;
}
.upazila-nav-list {
display: flex;
list-style: none;
gap: 22px;
}
.upazila-nav-link {
text-decoration: none;
font-size: 14px;
font-weight: 600;
color: var(--upazila-main-text);
padding: 6px 2px;
position: relative;
transition: var(--upazila-transition);
}
.upazila-nav-link:hover,
.upazila-nav-link.active {
color: var(--upazila-primary-blue);
}
.upazila-nav-link.active::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 2px;
background: var(--upazila-primary-blue);
border-radius: 2px;
}
/* BUTTONS - GEOMETRIC BALANCE */
.upazila-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: var(--upazila-primary-blue);
color: var(--upazila-white) !important;
text-decoration: none;
font-weight: 700;
font-size: 14px;
padding: 10px 20px;
border-radius: var(--upazila-radius-sm);
border: 1px solid var(--upazila-primary-blue);
box-shadow: 0 2px 6px rgba(11, 92, 171, 0.2);
cursor: pointer;
transition: var(--upazila-transition);
}
.upazila-btn-primary:hover {
background-color: var(--upazila-secondary-blue);
border-color: var(--upazila-secondary-blue);
box-shadow: 0 4px 12px rgba(11, 92, 171, 0.3);
transform: translateY(-1px);
}
.upazila-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background-color: transparent;
color: var(--upazila-primary-blue) !important;
text-decoration: none;
font-weight: 700;
font-size: 14px;
padding: 10px 20px;
border-radius: var(--upazila-radius-sm);
border: 2px solid var(--upazila-primary-blue);
cursor: pointer;
transition: var(--upazila-transition);
}
.upazila-btn-secondary:hover {
background-color: var(--upazila-primary-blue);
color: var(--upazila-white) !important;
box-shadow: 0 4px 12px rgba(11, 92, 171, 0.2);
transform: translateY(-1px);
}
.upazila-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background-color: transparent;
color: var(--upazila-primary-blue) !important;
text-decoration: none;
font-weight: 700;
font-size: 13px;
padding: 7px 16px;
border-radius: var(--upazila-radius-sm);
border: 1.5px solid var(--upazila-primary-blue);
transition: var(--upazila-transition);
}
.upazila-btn-outline:hover {
background-color: var(--upazila-primary-blue);
color: var(--upazila-white) !important;
box-shadow: 0 2px 8px rgba(11, 92, 171, 0.2);
}
.upazila-btn-white {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--upazila-white);
color: var(--upazila-dark-blue) !important;
text-decoration: none;
font-weight: 800;
font-size: 15px;
padding: 12px 26px;
border-radius: var(--upazila-radius-sm);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: var(--upazila-transition);
}
.upazila-btn-white:hover {
background: var(--upazila-light-blue);
color: var(--upazila-primary-blue) !important;
transform: translateY(-1px);
}
.upazila-btn-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: transparent;
color: var(--upazila-white) !important;
text-decoration: none;
font-weight: 700;
font-size: 15px;
padding: 12px 26px;
border-radius: var(--upazila-radius-sm);
border: 2px solid rgba(255, 255, 255, 0.5);
transition: var(--upazila-transition);
}
.upazila-btn-ghost:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--upazila-white);
}
.upazila-btn-lg {
padding: 12px 26px;
font-size: 15px;
}
.upazila-btn-block {
width: 100%;
}
/* 3. MOBILE MENU */
.upazila-mobile-toggle {
display: none;
background: none;
border: 1px solid var(--upazila-border);
padding: 8px;
border-radius: var(--upazila-radius-sm);
cursor: pointer;
flex-direction: column;
gap: 4px;
}
.upazila-hamburger-line {
display: block;
width: 22px;
height: 2px;
background-color: var(--upazila-dark-blue);
transition: var(--upazila-transition);
}
.upazila-mobile-nav {
display: none;
background: var(--upazila-white);
border-bottom: 2px solid var(--upazila-primary-blue);
padding: 16px 20px;
}
.upazila-mobile-nav.open {
display: block;
}
.upazila-mobile-menu-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.upazila-mobile-link {
display: block;
padding: 10px 12px;
color: var(--upazila-main-text);
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: var(--upazila-radius-sm);
}
.upazila-mobile-link:hover,
.upazila-mobile-link.active {
background: var(--upazila-light-blue);
color: var(--upazila-primary-blue);
}
.upazila-mobile-nav-footer {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--upazila-border);
}
/* 4. HERO SECTION - GEOMETRIC BALANCE */
.upazila-hero-section {
background: linear-gradient(90deg, #EAF4FB 0%, #FFFFFF 100%);
padding: 56px 0 64px 0;
border-bottom: 1px solid var(--upazila-border);
position: relative;
overflow: hidden;
}
.upazila-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 48px;
align-items: center;
}
.upazila-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
color: var(--upazila-primary-blue);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
padding: 6px 14px;
border-radius: 20px;
margin-bottom: 16px;
box-shadow: var(--upazila-shadow-sm);
}
.upazila-badge-dot {
width: 8px;
height: 8px;
background-color: var(--upazila-primary-blue);
border-radius: 50%;
}
.upazila-hero-title {
font-size: 40px;
font-weight: 800;
color: var(--upazila-dark-blue);
line-height: 1.18;
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.upazila-highlight {
color: var(--upazila-primary-blue);
}
.upazila-hero-tagline {
font-size: 18px;
font-weight: 700;
color: var(--upazila-secondary-blue);
margin-bottom: 14px;
}
.upazila-hero-desc {
font-size: 15px;
color: var(--upazila-secondary-text);
line-height: 1.65;
margin-bottom: 26px;
max-width: 560px;
}
.upazila-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.upazila-hero-quick-stats {
display: flex;
align-items: center;
gap: 22px;
padding-top: 22px;
border-top: 1px solid var(--upazila-border);
}
.upazila-quick-item {
display: flex;
flex-direction: column;
}
.upazila-quick-item strong {
font-size: 14px;
font-weight: 700;
color: var(--upazila-dark-blue);
}
.upazila-quick-item span {
font-size: 12px;
color: var(--upazila-secondary-text);
}
.upazila-quick-divider {
width: 1px;
height: 28px;
background: var(--upazila-border);
}
/* 5. HERO VISUAL (Geometric Balance Layering) */
.upazila-hero-visual {
position: relative;
}
.upazila-visual-card-main {
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius-lg);
box-shadow: var(--upazila-shadow-lg);
padding: 20px;
position: relative;
z-index: 10;
}
.upazila-visual-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 1px solid var(--upazila-border);
margin-bottom: 14px;
}
.upazila-visual-dots {
display: flex;
gap: 6px;
}
.upazila-visual-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #CBD5E1;
}
.upazila-visual-dots span:nth-child(1) { background: #FDA4AF; }
.upazila-visual-dots span:nth-child(2) { background: #FDE047; }
.upazila-visual-dots span:nth-child(3) { background: #86EFAC; }
.upazila-visual-title {
font-size: 12px;
font-weight: 700;
color: var(--upazila-secondary-text);
letter-spacing: 0.2px;
}
.upazila-float-badge {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius);
padding: 10px 14px;
box-shadow: var(--upazila-shadow-md);
z-index: 20;
}
.upazila-float-badge strong {
display: block;
font-size: 12px;
color: var(--upazila-dark-blue);
line-height: 1.2;
}
.upazila-float-badge span {
font-size: 11px;
color: var(--upazila-secondary-text);
}
.upazila-float-top-left {
top: -16px;
left: -20px;
}
.upazila-float-bottom-right {
bottom: -16px;
right: -16px;
}
.upazila-float-middle-left {
bottom: 24px;
left: -20px;
}
.upazila-badge-icon {
width: 34px;
height: 34px;
border-radius: var(--upazila-radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.upazila-badge-icon.bg-blue { background: #E0F2FE; color: #0369A1; }
.upazila-badge-icon.bg-green { background: #DCFCE7; color: #15803D; }
.upazila-badge-icon.bg-accent { background: #EEF2FF; color: #4338CA; }
/* SECTIONS SHARED */
.upazila-section {
padding: 68px 0;
}
.upazila-bg-light {
background-color: var(--upazila-light-gray);
border-top: 1px solid var(--upazila-border);
border-bottom: 1px solid var(--upazila-border);
}
.upazila-section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 44px auto;
}
.upazila-section-kicker {
display: inline-block;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--upazila-primary-blue);
margin-bottom: 8px;
}
.upazila-section-title {
font-size: 32px;
font-weight: 800;
color: var(--upazila-dark-blue);
line-height: 1.25;
margin-bottom: 12px;
letter-spacing: -0.3px;
}
.upazila-title-divider {
width: 48px;
height: 3.5px;
background: var(--upazila-primary-blue);
margin: 0 auto 16px auto;
border-radius: 2px;
}
.upazila-section-subtitle {
font-size: 15px;
color: var(--upazila-secondary-text);
line-height: 1.6;
}
/* 6. UPAZILA INFO */
.upazila-grid-two-col {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 40px;
align-items: start;
}
.upazila-subheading {
font-size: 22px;
font-weight: 700;
color: var(--upazila-dark-blue);
margin-bottom: 16px;
line-height: 1.35;
}
.upazila-paragraph {
font-size: 15px;
color: var(--upazila-secondary-text);
margin-bottom: 16px;
line-height: 1.65;
}
.upazila-info-features {
display: flex;
flex-direction: column;
gap: 18px;
margin-top: 24px;
}
.upazila-feature-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.upazila-feature-icon {
background: var(--upazila-light-blue);
color: var(--upazila-primary-blue);
width: 42px;
height: 42px;
border-radius: var(--upazila-radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.upazila-feature-item strong {
display: block;
font-size: 15px;
color: var(--upazila-dark-blue);
margin-bottom: 3px;
}
.upazila-feature-item p {
font-size: 14px;
color: var(--upazila-secondary-text);
}
.upazila-admin-card {
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius);
box-shadow: var(--upazila-shadow-md);
overflow: hidden;
}
.upazila-admin-card-header {
display: flex;
align-items: center;
gap: 10px;
background: var(--upazila-dark-blue);
color: var(--upazila-white);
padding: 16px 20px;
}
.upazila-admin-card-header h3 {
font-size: 16px;
font-weight: 700;
}
.upazila-admin-table-wrap {
padding: 10px 18px;
}
.upazila-admin-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.upazila-admin-table th,
.upazila-admin-table td {
padding: 10px 8px;
border-bottom: 1px solid var(--upazila-border);
text-align: left;
}
.upazila-admin-table th {
color: var(--upazila-dark-blue);
font-weight: 600;
width: 42%;
}
.upazila-admin-table td {
color: var(--upazila-secondary-text);
}
.upazila-admin-table tr:last-child th,
.upazila-admin-table tr:last-child td {
border-bottom: none;
}
.upazila-admin-card-footer {
background: var(--upazila-light-gray);
border-top: 1px solid var(--upazila-border);
padding: 12px 20px;
}
.upazila-link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: var(--upazila-primary-blue);
text-decoration: none;
transition: var(--upazila-transition);
}
.upazila-link-arrow:hover {
gap: 9px;
text-decoration: underline;
}
/* 7. IMPORTANT INFORMATION (Geometric Balance 4 Cards with Accent Bottom Borders) */
.upazila-grid-four-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.upazila-info-card {
background: var(--upazila-light-gray);
border: 1px solid var(--upazila-border);
border-bottom: 4px solid var(--upazila-primary-blue);
border-radius: var(--upazila-radius);
padding: 24px 20px;
display: flex;
flex-direction: column;
transition: var(--upazila-transition);
}
.upazila-info-card:nth-child(2) {
border-bottom-color: var(--upazila-secondary-blue);
}
.upazila-info-card:nth-child(3) {
border-bottom-color: var(--upazila-accent-blue);
}
.upazila-info-card.upazila-card-emergency,
.upazila-info-card:nth-child(4) {
border-bottom-color: var(--upazila-danger-border);
}
.upazila-info-card:hover {
background: var(--upazila-white);
box-shadow: var(--upazila-shadow-md);
transform: translateY(-3px);
}
.upazila-card-icon-wrap {
width: 44px;
height: 44px;
border-radius: var(--upazila-radius-sm);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.bg-blue-light { background: var(--upazila-light-blue); }
.bg-red-light { background: #FEE2E2; }
.upazila-card-title {
font-size: 16px;
font-weight: 700;
color: var(--upazila-dark-blue);
margin-bottom: 8px;
}
.upazila-card-desc {
font-size: 13px;
color: var(--upazila-secondary-text);
line-height: 1.55;
margin-bottom: 18px;
flex-grow: 1;
}
.upazila-card-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--upazila-primary-blue);
text-decoration: none;
transition: var(--upazila-transition);
}
.upazila-card-link:hover {
gap: 8px;
}
.text-red { color: var(--upazila-danger) !important; }
/* 8. UNO MESSAGE - GEOMETRIC BALANCE */
.upazila-uno-box {
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius-lg);
padding: 38px;
box-shadow: var(--upazila-shadow-md);
}
.upazila-uno-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
align-items: center;
}
.upazila-officer-photo-frame {
background: var(--upazila-light-gray);
border: 2px dashed var(--upazila-border);
border-radius: var(--upazila-radius);
padding: 18px;
text-align: center;
}
.upazila-officer-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
gap: 12px;
}
.upazila-photo-tag {
font-size: 12px;
font-weight: 600;
color: var(--upazila-secondary-text);
}
.upazila-uno-title {
font-size: 26px;
font-weight: 800;
color: var(--upazila-dark-blue);
margin-bottom: 16px;
letter-spacing: -0.2px;
}
.upazila-uno-quote {
font-size: 16px;
font-style: italic;
color: var(--upazila-primary-blue);
background: var(--upazila-light-blue);
border-left: 4px solid var(--upazila-primary-blue);
padding: 16px 20px;
border-radius: 0 var(--upazila-radius-sm) var(--upazila-radius-sm) 0;
margin-bottom: 18px;
line-height: 1.6;
}
.upazila-uno-body-text {
font-size: 15px;
color: var(--upazila-secondary-text);
line-height: 1.65;
margin-bottom: 22px;
}
.upazila-uno-signature-block {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding-top: 18px;
border-top: 1px solid var(--upazila-border);
}
.upazila-officer-name {
font-size: 16px;
font-weight: 700;
color: var(--upazila-dark-blue);
}
.upazila-officer-role {
font-size: 14px;
font-weight: 600;
color: var(--upazila-primary-blue);
}
.upazila-officer-office {
font-size: 13px;
color: var(--upazila-secondary-text);
}
/* 9. PRIORITIES (Geometric Balance 6 Cards) */
.upazila-grid-three-col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.upazila-priority-card {
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius);
padding: 26px 22px;
transition: var(--upazila-transition);
}
.upazila-priority-card:hover {
border-color: var(--upazila-primary-blue);
box-shadow: var(--upazila-shadow-md);
transform: translateY(-2px);
}
.upazila-priority-icon {
width: 44px;
height: 44px;
border-radius: var(--upazila-radius-sm);
background: var(--upazila-light-blue);
color: var(--upazila-primary-blue);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.upazila-priority-title {
font-size: 17px;
font-weight: 700;
color: var(--upazila-dark-blue);
margin-bottom: 8px;
}
.upazila-priority-desc {
font-size: 14px;
color: var(--upazila-secondary-text);
line-height: 1.55;
}
/* 10. PROJECTS */
.upazila-project-card {
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--upazila-transition);
}
.upazila-project-card:hover {
box-shadow: var(--upazila-shadow-lg);
border-color: var(--upazila-primary-blue);
transform: translateY(-2px);
}
.upazila-project-img-wrap {
position: relative;
background: var(--upazila-light-blue);
border-bottom: 1px solid var(--upazila-border);
}
.upazila-img-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 38px 16px;
gap: 8px;
color: var(--upazila-secondary-text);
font-size: 12px;
font-weight: 600;
}
.upazila-status-badge {
position: absolute;
top: 12px;
right: 12px;
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-ongoing { background: #FEF3C7; color: #92400E; }
.status-completed { background: #DCFCE7; color: #166534; }
.status-planned { background: #E0E7FF; color: #3730A3; }
.upazila-project-body {
padding: 22px 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.upazila-project-cat {
font-size: 12px;
font-weight: 700;
color: var(--upazila-primary-blue);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.upazila-project-title {
font-size: 17px;
font-weight: 700;
color: var(--upazila-dark-blue);
margin-bottom: 8px;
line-height: 1.35;
}
.upazila-project-location {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--upazila-secondary-text);
margin-bottom: 12px;
}
.upazila-project-desc {
font-size: 14px;
color: var(--upazila-secondary-text);
line-height: 1.55;
margin-bottom: 20px;
flex-grow: 1;
}
.upazila-project-footer {
margin-top: auto;
}
.upazila-center-cta {
text-align: center;
margin-top: 40px;
}
/* 11. KEY STATISTICS - GEOMETRIC HIGH CONTRAST */
.upazila-stat-section {
background: var(--upazila-dark-blue);
color: var(--upazila-white);
padding: 54px 0;
}
.upazila-stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
text-align: center;
}
.upazila-stat-item {
padding: 10px;
}
.upazila-stat-number-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
margin-bottom: 6px;
}
.upazila-counter {
font-size: 44px;
font-weight: 800;
color: var(--upazila-white);
line-height: 1;
}
.upazila-stat-plus {
font-size: 34px;
font-weight: 700;
color: var(--upazila-accent-blue);
}
.upazila-stat-label {
font-size: 15px;
font-weight: 700;
color: #E2E8F0;
margin-bottom: 2px;
}
.upazila-stat-sub {
font-size: 12px;
color: #94A3B8;
}
/* 12. CITIZEN FEEDBACK */
.upazila-feedback-card {
background: var(--upazila-white);
border: 1px solid var(--upazila-border);
border-radius: var(--upazila-radius);
padding: 26px 22px;
display: flex;
flex-direction: column;
transition: var(--upazila-transition);
}
.upazila-feedback-card:hover {
box-shadow: var(--upazila-shadow-md);
border-color: var(--upazila-primary-blue);
}
.upazila-feedback-rating {
color: #F59E0B;
font-size: 18px;
margin-bottom: 12px;
}
.upazila-feedback-quote {
font-size: 14px;
color: var(--upazila-main-text);
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
font-style: italic;
}
.upazila-feedback-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--upazila-border);
}
.upazila-author-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--upazila-light-blue);
color: var(--upazila-primary-blue);
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.upazila-author-name {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--upazila-dark-blue);
}
.upazila-author-loc {
font-size: 12px;
color: var(--upazila-secondary-text);
}
/* 13. CTA SECTION - GEOMETRIC HIGH CONTRAST */
.upazila-cta-section {
background: linear-gradient(135deg, var(--upazila-dark-blue) 0%, var(--upazila-primary-blue) 100%);
color: var(--upazila-white);
padding: 64px 0;
text-align: center;
}
.upazila-cta-inner {
max-width: 800px;
}
.upazila-cta-title {
font-size: 34px;
font-weight: 800;
margin-bottom: 14px;
letter-spacing: -0.3px;
}
.upazila-cta-desc {
font-size: 16px;
color: #E2E8F0;
line-height: 1.65;
margin-bottom: 30px;
}
.upazila-cta-actions {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
/* 14. FOOTER - GEOMETRIC BALANCE */
.upazila-footer {
background: var(--upazila-dark-blue);
color: #E2E8F0;
font-size: 14px;
}
.upazila-footer-top {
padding: 58px 24px 42px 24px;
}
.upazila-footer-grid {
display: grid;
grid-template-columns: 1.4fr 0.8fr 0.9fr 1.1fr;
gap: 38px;
}
.upazila-footer-logo-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.upazila-footer-title {
display: block;
font-size: 16px;
font-weight: 800;
color: var(--upazila-white);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.upazila-footer-sub {
font-size: 12px;
color: #94A3B8;
}
.upazila-footer-lead {
font-size: 13px;
color: #CBD5E1;
line-height: 1.65;
margin-bottom: 20px;
}
.upazila-social-links {
display: flex;
gap: 10px;
}
.upazila-social-btn {
width: 36px;
height: 36px;
border-radius: var(--upazila-radius-sm);
background: rgba(255, 255, 255, 0.1);
color: var(--upazila-white);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: var(--upazila-transition);
}
.upazila-social-btn:hover {
background: var(--upazila-primary-blue);
transform: translateY(-2px);
}
.upazila-footer-heading {
font-size: 15px;
font-weight: 700;
color: var(--upazila-white);
margin-bottom: 18px;
position: relative;
padding-bottom: 6px;
border-bottom: 2px solid var(--upazila-primary-blue);
display: inline-block;
}
.upazila-footer-menu {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.upazila-footer-menu a {
color: #CBD5E1;
text-decoration: none;
font-size: 13px;
transition: var(--upazila-transition);
}
.upazila-footer-menu a:hover {
color: var(--upazila-white);
padding-left: 5px;
}
.upazila-footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
}
.upazila-contact-row {
display: flex;
gap: 10px;
font-size: 13px;
color: #CBD5E1;
line-height: 1.5;
}
.upazila-footer-bottom {
background: #04213d;
padding: 18px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.upazila-footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
color: #94A3B8;
}
.upazila-dot-separator {
margin: 0 6px;
}
/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
.upazila-hero-grid,
.upazila-grid-two-col,
.upazila-uno-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.upazila-grid-four-cards {
grid-template-columns: repeat(2, 1fr);
}
.upazila-grid-three-col {
grid-template-columns: repeat(2, 1fr);
}
.upazila-footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.upazila-stat-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.upazila-nav-desktop {
display: none;
}
.upazila-mobile-toggle {
display: flex;
}
.upazila-topbar-inner {
flex-direction: column;
align-items: flex-start;
}
.upazila-topbar-right {
width: 100%;
justify-content: space-between;
}
.upazila-hero-title {
font-size: 30px;
}
.upazila-grid-four-cards,
.upazila-grid-three-col,
.upazila-footer-grid,
.upazila-stat-grid {
grid-template-columns: 1fr;
}
.upazila-hero-visual {
margin-top: 20px;
}
.upazila-float-top-left,
.upazila-float-bottom-right,
.upazila-float-middle-left {
position: static;
margin-top: 10px;
}
}
/* REDUCED MOTION PREFERENCE */
@media (prefers-reduced-motion: reduce) {
.upazila-wrapper * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
</style>
<!-- ==========================================================================
UPAZILA WEBSITE JAVASCRIPT (VANILLA JS ONLY)
========================================================================== -->
<script>
// Mobile Navigation Menu Toggle
function upazilaToggleMobileMenu() {
const nav = document.getElementById('upazila-mobile-nav');
const btn = document.getElementById('upazila-menu-toggle');
if (!nav || !btn) return;
const isExpanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !isExpanded);
nav.classList.toggle('open');
nav.setAttribute('aria-hidden', isExpanded);
}
function upazilaCloseMobileMenu() {
const nav = document.getElementById('upazila-mobile-nav');
const btn = document.getElementById('upazila-menu-toggle');
if (nav && btn) {
btn.setAttribute('aria-expanded', 'false');
nav.classList.remove('open');
nav.setAttribute('aria-hidden', 'true');
}
}
// Search Drawer Toggle
function upazilaToggleSearch() {
const searchDrawer = document.getElementById('upazila-search-bar');
if (!searchDrawer) return;
const isHidden = searchDrawer.style.display === 'none';
searchDrawer.style.display = isHidden ? 'block' : 'none';
if (isHidden) {
const input = document.getElementById('upazila-search-input');
if (input) setTimeout(() => input.focus(), 50);
}
}
function upazilaHandleSearch() {
const input = document.getElementById('upazila-search-input');
const resultsDiv = document.getElementById('upazila-search-results');
if (!input || !resultsDiv) return;
const query = input.value.trim();
if (query.length === 0) {
resultsDiv.style.display = 'none';
return;
}
resultsDiv.style.display = 'block';
resultsDiv.innerHTML = '<strong>Search Query:</strong> "' + escapeHtml(query) + '"<br><span style="color:#64748B;">Showing sample matching citizen notices, services and development projects for demonstration.</span>';
}
function escapeHtml(text) {
const map = {'&': '&', '<': '<', '>': '>', '"': '"', "'": '''};
return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
// Accessibility Text Size Adjuster
let upazilaBaseFontSize = 16;
function upazilaChangeFontSize(delta) {
upazilaBaseFontSize = Math.min(22, Math.max(14, upazilaBaseFontSize + delta));
const root = document.getElementById('upazila-page-root');
if (root) {
root.style.fontSize = upazilaBaseFontSize + 'px';
}
}
function upazilaResetFontSize() {
upazilaBaseFontSize = 16;
const root = document.getElementById('upazila-page-root');
if (root) {
root.style.fontSize = '16px';
}
}
// Language Switcher Demonstration
function upazilaSwitchLang(lang) {
const btnEn = document.getElementById('upazila-btn-en');
const btnBn = document.getElementById('upazila-btn-bn');
const root = document.getElementById('upazila-page-root');
if (!root) return;
if (lang === 'bn') {
if (btnEn) btnEn.classList.remove('active');
if (btnBn) btnBn.classList.add('active');
root.setAttribute('lang', 'bn');
// Toggle visible government names
const govEn = root.querySelector('.upazila-gov-name');
const govBn = root.querySelector('.upazila-gov-name-bn');
if (govEn) govEn.style.display = 'none';
if (govBn) govBn.style.display = 'inline';
} else {
if (btnBn) btnBn.classList.remove('active');
if (btnEn) btnEn.classList.add('active');
root.setAttribute('lang', 'en');
const govEn = root.querySelector('.upazila-gov-name');
const govBn = root.querySelector('.upazila-gov-name-bn');
if (govEn) govEn.style.display = 'inline';
if (govBn) govBn.style.display = 'none';
}
}
// Key Statistics Counter using IntersectionObserver
(function initUpazilaCounters() {
if (typeof window === 'undefined') return;
function startCounting(el) {
const target = parseInt(el.getAttribute('data-target') || '0', 10);
const duration = 1200;
const stepTime = 20;
const steps = duration / stepTime;
const increment = target / steps;
let current = 0;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
el.innerText = target;
clearInterval(timer);
} else {
el.innerText = Math.floor(current);
}
}, stepTime);
}
function setupObserver() {
const counters = document.querySelectorAll('.upazila-counter');
if (!counters.length) return;
if ('IntersectionObserver' in window) {
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
startCounting(entry.target);
obs.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
counters.forEach(c => observer.observe(c));
} else {
counters.forEach(c => startCounting(c));
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', setupObserver);
} else {
setupObserver();
}
})();
</script>