/* ================= MAIN ================= */

main{
width:95%;
max-width:1300px;
margin:auto;
margin-bottom: 25px;
}

a {
    text-decoration: none;
}

/* ================= Mahiti + Falak Layout ================= */

#mahiti-aani-vibagh{
width:68%;
display:inline-block;
vertical-align:top;
margin-top:15px;
}

#falak{
width:28%;
display:inline-block;
vertical-align:top;
margin-left:2%;
margin-top:15px;
}

/* ================= Panchayat Mahiti ================= */

#panchyat-samiti-mahiti{
width:100%;
background:white;
border-radius:10px;
border:1px solid #ccc;
padding:15px;
text-align:center;
margin-bottom:20px;
font-size: 14px;
}

#panchyat-samiti-mahiti img{
width:100%;
height:350px;
object-fit:cover;
border-radius:10px;
margin-bottom:10px;
}

/* ================= Vibhag ================= */

#vibhag{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:20px;
}

.vibhag{
background:white;
border-radius:10px;
border:1px solid #ddd;
text-align:center;
padding:10px;
transition:0.3s;
}

.vibhag:hover{
transform:scale(1.03);
}

.vibhag img{
width:100%;
height:120px;
object-fit:cover;
border-radius:8px;
}

.vibhag h3{
font-size:12px;
margin-top:8px;
}

/* ================= Suchana Falak ================= */

#suchana-falak{
background:white;
border-radius:10px;
border:1px solid #ccc;
margin-bottom:15px;
overflow:hidden;
}

#suchana-falak-nav{
background:#0d6efd;
color:white;
padding:12px;
font-size:18px;
text-align:center;
}

#suchana-place{
padding:10px;
}

#suchana-place a {
    color: black;
}

.suchana{
background:#e0f8ff;
border:1px solid #3b8dd5;
border-radius:8px;
padding:10px;
margin-bottom:10px;
font-size:14px;
}

/* Container */
.suchana-container {
    height: 200px;
    overflow: hidden;
    position: relative;
}

/* Moving content */
.suchana-content {
    display: flex;
    flex-direction: column;
    animation: scroll-up 10s linear infinite;
}

.suchana-content .suchana {
width: 96%;
margin-left: 2%;
}

/* Each notice */
.suchana {
    padding: 10px;
    font-size: 16px;
}

.suchana-content .suchana {
    padding: 10px;
    font-size: 16px;
}

/* Animation */
@keyframes scroll-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

/* ================= Buttons ================= */

#suchana-falak-nav-only{
background:#0d6efd;
color:white;
padding:12px;
text-align:center;
border-radius:10px;
margin-bottom:10px;
transition:0.3s;
}

#suchana-falak-nav-only:hover{
background:#0bad5f;
}

/* ================= Gallery ================= */

#left-line{
height:2px;
width:40%;
display:inline-block;
background:#0bad5f;
margin-left:5%;
}

#gallery-name{
display:inline-block;
margin:20px;
}

#gallery-name a{
font-size:24px;
color:#0d6efd;
text-decoration:none;
}

#right-line{
height:2px;
width:40%;
display:inline-block;
background:#0bad5f;
}

/* ================= Photo Gallery ================= */

#photo-gallery{
width:90%;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:20px;
}

.photo{
background:white;
border-radius:10px;
border:1px solid #ddd;
text-align:center;
padding:10px;
}

.photo img,
.photo iframe{
width:100%;
height:180px;
border-radius:8px;
object-fit:cover;
}

.photo p{
font-size:14px;
margin-top:8px;
}

/* ================= Tablet ================= */

@media(max-width:992px){

    #mahiti-aani-vibagh{
        width:100%;
    }

    #falak{
        width:100%;
        margin-left:0;
    }

    #vibhag{
        grid-template-columns:repeat(3,1fr);
    }

    #photo-gallery{
        grid-template-columns:repeat(2,1fr);
    }

}

/* ================= Mobile ================= */

@media(max-width:600px){

    #vibhag{
        grid-template-columns:repeat(2,1fr);
    }

    #photo-gallery{
        grid-template-columns:1fr;
    }

    #panchyat-samiti-mahiti img{
        height:220px;
    }

}



/* Gallery Title */

.gallery-title{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
width:90%;
margin:25px auto;
}

.gallery-name a{
font-size:24px;
color:#0d6efd;
text-decoration:none;
}

.line{
flex:1;
height:2px;
background:#0bad5f;
}