.SHOTBYMOUNIR-NAME {
position: relative;
background-color: transparent;
height: 30px;
}

.page-title {
color: thistle;
background-color: #3a1c36;
width: auto;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: bold;
border-radius: 25px;
border-bottom: 1px solid #fbf1ff;
}

.Navigation {
display: flex;
gap: 30px;
}

.updates {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
color: thistle;
}

.About {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color:thistle;
text-decoration: none;
}

.Gallery {
position: absolute;
left: 85px;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
color: thistle;
}

.home {
position: absolute;
right: 74px;
top: 50%;
transform: translateY(-50%);
text-decoration: none;
color: thistle;
}


.benches {
margin-top: 30px;
height: 300px;
width: 100%;
object-fit: cover;
}

.sunrise {
margin-top: 30px;
height: 300px;
width: 100%;
object-fit: cover;
}

.benchcat {
margin-top: 30px;
height: 300px;
width: 100%;
object-fit: cover;
}

.tree {
transform: translateY(30px);
height: 300px;
width: 100%;
object-fit: cover;
}

.watch {
transform: translateY(30px);
height: 300px;
width: 100%;
object-fit: cover;
}

.orangecat {
transform: translateY(40px);
height: 300px;
width: 100%;
object-fit: cover;
}

.image-gallery {
columns: 3;
column-gap: 15px;
}

.image-gallery img {
width: 100%;
height: auto;
display: block;
margin-bottom: 15px;
}



#image-viewer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(59, 59, 59, 0.75);
backdrop-filter: blur(8px);
display: none;

}

#image-description {
opacity: 0;
transition: opacity 0.8s;
color: thistle;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-top: 20px;
font-weight: bold;

}

#image-description.show {
opacity: 1;
}

#viewer-image {
max-width: 90%;
max-height: 80%;
width: auto;
height: auto;
display: block;
margin: 40px auto 0;
opacity: 0;
transition: opacity 3s;
}

#viewer-image.show {
opacity: 1;
}

#close-viewer {
position: absolute;
top: 5px;
right: 5px;
background-color: thistle;
}


.gallery-video {
width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
display: block;
margin-bottom: 15px;


}

.video-gallery {
columns: 3;
column-gap: 15px;
}


.hamburger {
display: none;
}

.mobile-menu {
display: none;
}

@media (max-width: 600px) {

.SHOTBYMOUNIR-NAME {
    height: 45px;
}

.page-title {
    height: 45px;
}


.hamburger {
    display: block;

    position: absolute;
    left: 10px;
    top: 50%;

    transform: translateY(-50%);

    background: none;
    border: none;

    font-size: 25px;
    color: thistle;

    z-index: 10;
}



.Navigation {
    display: none;
}


.mobile-menu {
    position: absolute;

    top: 45px;
    left: 0;

    width: 100%;

    background-color: #9b71b2;

    padding: 10px 0;

    z-index: 20;
}

.mobile-menu.show-menu {
    display: block;
}

.mobile-menu a {
    display: block;

    text-align: center;

    padding: 12px;

    color: thistle;
    text-decoration: none;

    font-family: Arial, Helvetica, sans-serif;
}



.image-gallery {
    columns: 1;
    column-gap: 0;
}

.image-gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}


.video-gallery {
    columns: 1;
    column-gap: 0;
}

.gallery-video {
    width: 100%;
    max-width: 400px;

    aspect-ratio: 9 / 16;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

}