/* ===========================
   Upazila Details
=========================== */

.page-content{
    padding:18px;
    padding-bottom:100px;
}

.upazila-details-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

}

.upazila-cover{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.upazila-content{

    padding:22px;

}

.upazila-content h2{

    text-align:center;

    font-size:30px;

    color:#1976D2;

    margin-bottom:15px;

}

.intro{

    text-align:justify;

    font-size:17px;

    color:#555;

    line-height:1.8;

    margin-bottom:22px;

}

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

.info-box{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.info-item{

    display:flex;

    gap:16px;

    align-items:flex-start;

    background:#F8FAFD;

    padding:16px;

    border-left:5px solid #1976D2;

    border-radius:16px;

}

.icon{

    font-size:28px;

    width:40px;

    text-align:center;

}

.info-item b{

    display:block;

    font-size:16px;

    color:#1976D2;

    margin-bottom:5px;

}

.info-item p{

    margin:0;

    font-size:17px;

    color:#333;

    line-height:1.6;

}

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

.section-title{

    margin:28px 0 15px;

    color:#1976D2;

    font-size:22px;

}

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

.union-list{

    display:grid;

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

    gap:12px;

}

.union-list span{

    background:#EAF4FF;

    padding:12px;

    border-radius:14px;

    text-align:center;

    font-weight:600;

    color:#1976D2;

}

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

.contact-box{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.contact-item{

    display:block;

    background:#F8FAFD;

    padding:15px;

    border-radius:14px;

    text-decoration:none;

    color:#333;

    font-weight:600;

}

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

.button-group{

    display:flex;

    gap:15px;

    margin-top:28px;

}

.button-group a{

    flex:1;

    text-align:center;

    padding:15px;

    text-decoration:none;

    color:#fff;

    font-weight:700;

    border-radius:16px;

}

.visit-btn{

    background:#2E7D32;

}

.map-btn{

    background:#1976D2;

}

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

@media(max-width:600px){

.upazila-cover{

    height:210px;

}

.upazila-content h2{

    font-size:26px;

}

.union-list{

    grid-template-columns:1fr;

}

.button-group{

    flex-direction:column;

}

}

.quick-grid{

display:grid;

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

gap:14px;

margin-top:18px;

}

.quick-card{

background:#fff;

border-radius:18px;

padding:18px 10px;

text-align:center;

text-decoration:none;

color:#333;

box-shadow:0 5px 14px rgba(0,0,0,.08);

transition:.25s;

}

.quick-card:hover{

transform:translateY(-3px);

}

.quick-card div{

font-size:34px;

margin-bottom:10px;

}

.quick-card span{

font-size:15px;

font-weight:600;

}

@media(max-width:600px){

.quick-grid{

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

}

}

/* ===========================
   Statistics
=========================== */

.stats-grid{

display:grid;

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

gap:15px;

margin-top:20px;

}

.stat-card{

background:#fff;

border-radius:20px;

padding:20px 15px;

text-align:center;

box-shadow:0 6px 16px rgba(0,0,0,.08);

transition:.3s;

}

.stat-card:hover{

transform:translateY(-3px);

}

.stat-icon{

font-size:34px;

margin-bottom:10px;

}

.stat-number{

font-size:28px;

font-weight:700;

color:#1976D2;

margin-bottom:6px;

}

.stat-title{

font-size:15px;

font-weight:600;

color:#444;

}

@media(max-width:600px){

.stats-grid{

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

}

}

/* ===========================
   Recent Updates
=========================== */

.update-list{

display:flex;

flex-direction:column;

gap:15px;

margin-top:18px;

}

.update-item{

display:flex;

gap:15px;

align-items:flex-start;

background:#fff;

padding:18px;

border-radius:18px;

box-shadow:0 6px 16px rgba(0,0,0,.08);

}

.update-icon{

font-size:30px;

width:45px;

text-align:center;

flex-shrink:0;

}

.update-item h4{

margin:0 0 6px;

font-size:18px;

color:#1976D2;

}

.update-item p{

margin:0;

font-size:15px;

line-height:1.7;

color:#555;

}