img{
    display:block;
    width:100%;
}

a{
    text-decoration:none;
}

button{
    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}




/*=================================================
                GALLERY SECTION
=================================================*/
.gallery-section{

    padding:70px 0;
}


/*=================================================
                GALLERY GRID
=================================================*/
.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

/*=================================================
                GALLERY CARD
=================================================*/
.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    background:#fff;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.35s;
}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.gallery-item img{

    height:240px;

    object-fit:cover;

    transition:.4s;
}

.gallery-item:hover img{

    transform:scale(1.08);
}



/*==========================================
            LIGHTBOX
==========================================*/

.lightbox{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.95);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:999999;
}

.lightbox.show{

    display:flex;
}

.lightbox-body{

    text-align:center;
}

.lightbox-body img{

    max-width:90vw;
    max-height:85vh;

    border-radius:10px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);
}



/*==========================================
            COUNTER
==========================================*/

.lightbox-counter{

    margin-top:18px;

    color:#fff;

    font-size:17px;

    font-weight:600;
}



/*==========================================
            CLOSE BUTTON
==========================================*/

.lightbox-close{

    position:absolute;

    top:25px;
    right:30px;

    width:50px;
    height:50px;

    border-radius:50%;

    background:#ffffff22;

    color:#fff;

    font-size:24px;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;
}

.lightbox-close:hover{

    background:#dc3545;
}



/*==========================================
            PREVIOUS BUTTON
==========================================*/

.lightbox-prev{

    position:absolute;

    left:20px;
    top:50%;

    transform:translateY(-50%);

    width:55px;
    height:55px;

    border-radius:50%;

    background:#ffffff22;

    color:#fff;

    font-size:22px;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;
}

.lightbox-prev:hover{

    background:#0d6efd;
}



/*==========================================
            NEXT BUTTON
==========================================*/

.lightbox-next{

    position:absolute;

    right:20px;
    top:50%;

    transform:translateY(-50%);

    width:55px;
    height:55px;

    border-radius:50%;

    background:#ffffff22;

    color:#fff;

    font-size:22px;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;
}

.lightbox-next:hover{

    background:#0d6efd;
}



/*==========================================
            RESPONSIVE
==========================================*/

@media(max-width:992px){

    .gallery-grid{

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

}

@media(max-width:768px){

    .gallery-grid{

        grid-template-columns:repeat(2,1fr);

        gap:18px;
    }

    .gallery-item img{

        height:200px;
    }

}

@media(max-width:576px){

    .gallery-grid{

        grid-template-columns:1fr;
    }

    .gallery-item img{

        height:230px;
    }

    .lightbox-prev,
    .lightbox-next{

        width:45px;
        height:45px;

        font-size:18px;
    }

    .lightbox-close{

        width:45px;
        height:45px;

        font-size:20px;
    }

}