/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 16 2026 | 09:38:31 */
.reference-gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.gallery-item{
width:100%;
aspect-ratio:16/9;
overflow:hidden;
cursor:pointer;
}

.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:0.3s;
}

.gallery-item:hover img{
transform:scale(1.05);
}


/* LIGHTBOX */

.custom-lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(22, 22, 22, 0.99);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:9999;
}

.custom-lightbox.active{
opacity:1;
visibility:visible;
}

.lightbox-image {
max-width:80%;
max-height:80%;
	opacity:0;
	transition:opacity 0.3s;
}

.custom-lightbox.show img {
opacity:1;
}

.lightbox-close{
position:absolute;
top:40px;
right:40px;
font-size:75px;
color:#f9f9f9;
cursor:pointer;
}

.lightbox-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:80px;
color:#f9f9f9;
cursor:pointer;
padding:20px;
user-select:none;
}

.lightbox-prev{
left:20px;
}

.lightbox-next{
right:20px;
}

@media screen and (max-width: 980px) {
  .reference-gallery {
    grid-template-columns: repeat(2, 1fr);
	}
  .lightbox-image {
	max-width:90%;
	max-height:90%;
	}
}

@media screen and (max-width: 767px) {
  .reference-gallery {
    gap: 10px;
	}
	.lightbox-close {
    right: 20px;
    font-size: 60px;
	}
}