html{
scroll-behavior:smooth;
}
body{
margin:0;
font-family:Arial;
background:#f4f4f4;
}
.logo{
font-size:22px;
font-weight:bold;
color:white;
letter-spacing:1px;
}
/* Navbar */
.navbar{
display:flex;
justify-content:space-between;
align-items:center;
background:#1b5e20;
padding:15px 20px;
color:white;
}

.menu-toggle{
font-size:28px;
cursor:pointer;
}

/* side menu */

.side-menu{
position:fixed;
top:0;
right:-260px;
width:260px;
height:100%;
background:#2e7d32;
display:flex;
flex-direction:column;
transition:0.3s;
overflow-y:auto;
}

.side-menu a{
padding:18px;
color:white;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.2);
}

.side-menu a:hover{
background:#1b5e20;
}

.side-menu.active{
right:0;
}
/* Hero */

.hero{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url("https://picsum.photos/1200/500");
background-size:cover;
color:white;
text-align:center;
padding:30px 10px;
}

/* Stats */

.stats{
display:flex;
justify-content:center;
gap:20px;
padding:40px;
background:white;
flex-wrap:wrap;
}

.stat{
text-align:center;
}

.stat h3{
color:#2e7d32;
font-size:30px;
}

/* Cards */

.card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
}

/* Services */

.quick-services{
padding:40px 20px;
text-align:center;
background:#f8fafc;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
max-width:900px;
margin:auto;
margin-top:20px;
}

.service-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
transition:0.3s;
}

.service-card:hover{
transform:translateY(-5px);
}

.service-card h3{
color:#2e7d32;
margin-bottom:8px;
}

/* News */

.news{
padding:40px;
text-align:center;
}

.news-card{
background:white;
padding:15px;
margin:10px auto;
max-width:500px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

/* Gallery */

.gallery{
padding:40px;
text-align:center;
background:#fafafa;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
margin-top:20px;
}

.gallery img{
width:100%;
border-radius:10px;
}

/* Map */

.map{
padding:40px;
text-align:center;
background:white;
}

/* Report */

.report{
padding:40px;
text-align:center;
}

form{
max-width:500px;
margin:auto;
}

form input, textarea{
width:100%;
padding:10px;
margin:10px 0;
border:1px solid #ccc;
border-radius:5px;
}

button{
background:#2e7d32;
color:white;
padding:10px 20px;
border:none;
border-radius:5px;
cursor:pointer;
}
/*footer*/
.footer{
background:#0f172a;
color:white;
padding-top:40px;
text-align:center;
}

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:20px;
max-width:1100px;
margin:auto;
padding:0 20px;
}

.footer-col h3{
margin-bottom:10px;
color:#4ade80;
}

.footer-col a{
display:block;
color:#ccc;
text-decoration:none;
margin-bottom:6px;
font-size:14px;
}

.footer-col a:hover{
color:white;
}

.visitor-box{
margin-top:20px;
font-size:14px;
}

.social-links{
margin-top:15px;
}

.social-links a{
margin:0 10px;
color:#4ade80;
text-decoration:none;
}

.footer-bottom{
margin-top:20px;
border-top:1px solid #333;
padding:15px;
font-size:13px;
}
/*pop up notice*/
.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:999;
}

.popup-box{
background:white;
width:90%;
max-width:400px;
border-radius:10px;
padding:20px;
text-align:center;
position:relative;
}

.popup-img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
font-size:20px;
}
/*about*/
.about{
padding:40px 20px;
background:white;
text-align:center;
}

.about h2{
color:#2e7d32;
margin-bottom:15px;
}

.about p{
max-width:800px;
margin:auto;
line-height:1.6;
color:#444;
}
/*village information table*/
.village-info{
padding:40px 20px;
background:#fafafa;
text-align:center;
}

.village-info h2{
color:#2e7d32;
margin-bottom:20px;
}

.village-info table{
margin:auto;
border-collapse:collapse;
width:90%;
max-width:600px;
background:white;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
border-radius:10px;
overflow:hidden;
}

.village-info td{
padding:12px;
border-bottom:1px solid #eee;
text-align:left;
}

.village-info tr:last-child td{
border-bottom:none;
}
/*nearby village*/
.nearby{
padding:40px 20px;
background:white;
text-align:center;
}

.nearby h2{
color: #2e7d32;
margin-bottom:20px;
}

.nearby ul{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:10px;
max-width:700px;
margin:auto;
}

.nearby li{
background:#f4f4f4;
padding:12px;
border-radius:8px;
font-weight:bold;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.card:hover{
transform:translateY(-5px);
transition:0.3s;
}
/*Faq*/
.faq{
padding:40px 20px;
background:#fafafa;
text-align:center;
}

.faq h2{
color:#2e7d32;
margin-bottom:25px;
}

.faq-box{
max-width:750px;
margin:auto;
}

details{
background:white;
margin-bottom:12px;
padding:15px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
cursor:pointer;
}

summary{
font-weight:bold;
font-size:16px;
color:#333;
}

details p{
margin-top:10px;
color:#555;
line-height:1.6;
}
/*menu cancel*/
.menu-close{
text-align:right;
padding:15px 20px;
font-size:22px;
color:white;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,0.2);
}

.menu-close:hover{
background:rgba(0,0,0,0.2);
}
/*service game */
.service-finder{
padding:40px 20px;
text-align:center;
background:#fafafa;
}

.service-buttons button{
margin:5px;
padding:10px 15px;
border:none;
background:#2e7d32;
color:white;
border-radius:6px;
cursor:pointer;
}

.worker-list{
margin-top:20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
}

.worker-card{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}

.worker-card h3{
margin-bottom:5px;
}

.worker-card a{
display:inline-block;
margin-top:8px;
padding:6px 12px;
background:#2e7d32;
color:white;
text-decoration:none;
border-radius:5px;
}
/*emergency number*/
.service-table{
max-width:600px;
margin:auto;
}

.service-row{
display:flex;
justify-content:space-between;
padding:12px 15px;
background:white;
margin-bottom:8px;
border-radius:6px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.service-row a{
color:#2e7d32;
text-decoration:none;
font-weight:bold;
}

.emergency{
padding:40px 20px;
background:#fafafa;
text-align:center;
}
/*table village*/
.village-data{
padding:40px 20px;
background:#f9fbf9;
}

.village-data h2{
text-align:center;
color:#1b5e20;
margin-bottom:20px;
}

/* container */
.data-table-container{
overflow-x:auto;
}

/* table */
.data-table{
width:100%;
border-collapse:collapse;
min-width:500px;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

/* header */
.data-table th{
background:#2e7d32;
color:white;
}

/* cell */
.data-table th,
.data-table td{
padding:12px;
border-bottom:1px solid #eee;
text-align:left;
}

/* zebra */
.data-table tr:nth-child(even){
background:#f9f9f9;
}

/* hover */
.data-table tr:hover{
background:#f1f1f1;
}
/*weather*/
.weather-section{
padding:40px 20px;
text-align:center;
background:#eef7ff;
}

.weather-card{
background:linear-gradient(135deg,#4facfe,#00f2fe);
color:white;
padding:30px;
border-radius:15px;
max-width:350px;
margin:auto;
box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

.weather-card h1{
font-size:40px;
margin:0;
}
/*school*/
.school-section{
padding:40px 20px;
background:#f4f6f9;
text-align:center;
}

.school-table-container{
overflow-x:auto;
max-width:800px;
margin:auto;
}

.school-table{
width:100%;
border-collapse:collapse;
min-width:400px;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
}

.school-table th{
background:#2e7d32;
color:white;
}

.school-table th,
.school-table td{
padding:12px;
border-bottom:1px solid #eee;
text-align:left;
}

.school-table tr:nth-child(even){
background:#f9f9f9;
}

.school-table tr:hover{
background:#f1f1f1;
}
/*add*/
.add-form{
padding:40px 20px;
background:#f4f6f9;
text-align:center;
}

.add-form h2{
color:#1b5e20;
margin-bottom:20px;
}

/* Form box */
.add-form form{
max-width:400px;
margin:auto;
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 4px 15px rgba(0,0,0,0.1);
}

/* Inputs */
.add-form input,
.add-form select{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ccc;
border-radius:6px;
font-size:14px;
outline:none;
transition:0.3s;
}

/* Focus effect */
.add-form input:focus,
.add-form select:focus{
border-color:#2e7d32;
box-shadow:0 0 5px rgba(46,125,50,0.3);
}

/* Button */
.add-form button{
width:100%;
padding:12px;
background:#2e7d32;
color:white;
border:none;
border-radius:6px;
font-size:16px;
cursor:pointer;
transition:0.3s;
}

/* Hover */
.add-form button:hover{
background:#1b5e20;
}
/*upload note*/
.upload-note{
background:linear-gradient(135deg,#263238,#455a64);
color:white;
border-left:5px solid #00e676;
}
/* Partner Section */
.partner-section{
text-align:center;
padding:25px 15px;
background:#e8f5e9;
margin-top:30px;
}

/* Card */
.partner-card{
background:white;
padding:20px;
border-radius:15px;
box-shadow:0 4px 15px rgba(0,0,0,0.1);
max-width:400px;
margin:auto;
transition:0.3s;
}

.partner-card:hover{
transform:translateY(-5px);
box-shadow:0 8px 25px rgba(0,0,0,0.2);
}

/* Title */
.partner-card h2{
color:#2e7d32;
margin:0;
}

/* Button */
.partner-btn{
display:inline-block;
margin-top:10px;
padding:8px 15px;
background:#2e7d32;
color:white;
border-radius:8px;
text-decoration:none;
}

.partner-btn:hover{
background:#1b5e20;
}
.sub-box{
background:white;
padding:20px;
border-radius:12px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,0.1);
max-width:300px;
margin:auto;
  }


.section-title{
  text-align:center;
  margin:10px 0;
  font-size:18px;
  font-weight:bold;
}

/* Grid */
.main-options{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  padding:8px;
  margin-top:15px;
}

/* Small Card */
.option{
  background:#ffffff;
  border-radius:10px;
  padding:10px 5px;   /* ছোট করা */
  text-align:center;
  text-decoration:none;
  color:#333;
  box-shadow:0 3px 8px rgba(0,0,0,0.1);
  transition:0.3s;
}

/* Icon */
.option span{
  font-size:18px;   /* ছোট */
  display:block;
  margin-bottom:3px;
}

/* Text */
.option p{
  font-size:12px;   /* ছোট */
  font-weight:600;
}

/* Hover */
.option:hover{
  background:#e8f5e9;
  transform:translateY(-3px);
}

/* Click */
.option:active{
  transform:scale(0.95);
  }