h1{
    text-align:	center;
    }
    .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .photo {
        width: 100%;
        max-width : 460px;
        height: auto;
        background-color: lightgray;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 1px solid #ccc;
    }
    .hidden {
        display: none;
    }
    .expanded {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background-color: lightgray;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 2px solid #000;
    }
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 500;
    }
    .nbtn{
    text-align:center;
    }
    .button {
        padding: 10px 15px;
        margin: 10px;
        background-color: blue;
        color: white;
        border: none;
        cursor: pointer;
        

    }



   
       


#he1 {
width: 100%;
height: auto;
background-color: #fff;
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
padding: 10px;
}

#he2 {
width: 100%;
height: auto;
background-color: #040452;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}


@media (min-width: 768px) {
#headm {
    flex-wrap: nowrap;
}

#he3 {
    padding: 20px;
}
}

@media (min-width: 1024px) {
#he1 {
    padding: 20px;
}

#he2 {
    padding: 20px;
}
}
     
     
     
     /* General Styles */
body {
margin: 0;
padding: 0;

box-sizing: border-box;
}

/* Centered Header */
h1 {
text-align: center;
}

/* Gallery Section */
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 10px;
}

.photo {
width: 100%;
max-width: 460px;
height: auto;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid #ccc;
}

.photo img {
width: 100%;
height: auto;
border-radius: 5px;
}

/* Expandable Image */
.hidden {
display: none;
}

.expanded {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
height: auto;
background-color: lightgray;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 2px solid #000;
}

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 500;
}



.button {
padding: 10px 15px;
margin: 10px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}


/* Responsive Layout */
@media (max-width: 768px) {
.gallery {
    flex-direction: column;
    align-items: center;
}

.photo {
    width: 90%;
    max-width: 400px;
}




}

@media (max-width: 480px) {
.photo {
    width: 100%;
}






}




/* Basic styles for the header */
.header-body {
width: 100%;
margin: 0;
padding: 0;
 display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}

/* Styles for the logo wrapper */
#wraplogo {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 119px;
height: auto;
}

/* Styles for the logo inside the wrapper */
.mb_logo_loader {
width: 100%;
height: auto;
}

/* Styles for the header column */
.header-column {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
box-sizing: border-box;
}

/* Styles for the header row */
.header-row {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height:100px;





}
/* Styles for the images inside the header row */
.header-row  img{
max-width: 100%;
height: auto;

}

/* Media query for larger screens */
@media (min-width: 768px) {
.header-column {
    flex-direction: row;
    justify-content: space-between;
}

#wraplogo, .header-row {
    margin-bottom: 0;
}
}