body{
    margin: 0;
    padding: 0;
}
img{
    width: 100%;max-width: 100%;
}
.mx-w{
    max-width: 1000px;
    margin: 0 auto;
}
.df{
    display: flex;
}
/********************************* Main Page *****************************/
.s-h{
    font-size: 40px;
    text-align: center;
}
.img-s{
    overflow: hidden;
    margin: 5px;
    border-radius: 10px;
    position: relative;
}
.img-s img{
    transform: scale(1.5) rotate(0deg);
    transition: all linear 0.3s;
}
.img-s .overlay{
    position: absolute;
    z-index: 1;
    background: rgb(20 78 139 / 65%);
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
}
.img-s .overlay h3{
    margin: 17px 0px;
    color: white;
}
.img-s:hover img{
    transform: scale(2.5) rotate(10deg);
}
/************************************************************************************/
.s-h-p{
    font-size: 40px;
    text-align: center;
}
.img-gallery{
    display: flex;
    flex-wrap: wrap;
}
.img-gallery a{
    display: block;
    width: calc(25% - 10px);
    overflow: hidden;
    margin: 5px;
    border-radius: 10px;
}
.img-gallery a img{
    transform: scale(1.5) rotate(0deg);
    transition: all linear 0.3s;
}
.img-gallery a:hover img{
    transform: scale(2.5) rotate(10deg);
}
.lb-nav a.lb-prev,.lb-nav a.lb-next{
    opacity: 1;
}

.gallery-section{
    display:flex
}

@media all and (min-width:10px) and (max-width:1000px){
.gallery-section{
    display:block
}
.gallery-section img{
    max-width:490px
}
.gallery-section .img-s{
    max-width:490px;
    margin: 0 auto;
    margin-bottom:20px
}
}