*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#edf4ff;
color:#1e293b;
}

header{
background:linear-gradient(135deg,#0f172a,#1e3a8a);
color:white;
padding:30px;
text-align:center;
box-shadow:0 4px 20px rgba(0,0,0,0.15);
}

header h1{
font-size:34px;
}

header p{
margin-top:8px;
opacity:0.9;
}

.container{
display:flex;
gap:20px;
padding:20px;
flex-wrap:wrap;
}

.map-section,
.info-panel{
background:white;
border-radius:20px;
padding:20px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.map-section{
flex:2;
min-width:350px;
}

.info-panel{
flex:1;
min-width:320px;
}

.section-title{
margin-bottom:15px;
font-size:24px;
}

.map-container{
background:#f8fafc;
padding:15px;
border-radius:15px;
text-align:center;
}

.map-container img{
width:100%;
max-height:500px;
object-fit:contain;
}

.legend{
display:flex;
justify-content:center;
gap:10px;
margin-top:15px;
flex-wrap:wrap;
}

.legend-item{
background:#f1f5f9;
padding:10px 15px;
border-radius:10px;
font-weight:bold;
}

.district-buttons{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:20px;
}

.district-btn{
border:none;
padding:14px;
border-radius:12px;
cursor:pointer;
font-weight:bold;
transition:0.2s;
}

.district-btn:hover{
transform:translateY(-2px);
}

.high{
background:#ef4444;
color:white;
}

.medium{
background:#f59e0b;
color:white;
}

.low{
background:#22c55e;
color:white;
}

.card{
background:#f8fafc;
padding:15px;
border-radius:15px;
margin-top:15px;
}

.emergency{
background:#dbeafe;
}

.guide-btn{
width:100%;
padding:15px;
border:none;
border-radius:12px;
background:#2563eb;
color:white;
font-size:16px;
cursor:pointer;
margin-top:15px;
}

.guide-btn:hover{
background:#1d4ed8;
}

.about-project{
background:white;
margin:20px;
padding:30px;
border-radius:20px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
}

.about-project h2{
margin-bottom:15px;
font-size:28px;
}

.about-project p{
line-height:1.8;
margin-bottom:15px;
color:#475569;
}

@media(max-width:900px){
.container{
flex-direction:column;
}

.district-buttons{
grid-template-columns:1fr;
}
}