/* Styling for the gallery grid */
.gp-gallery-grid {
    display: block;
}

/* Each gallery item */
.gp-gallery-item {
    width: calc(25% - 20px); /* Each item takes up 1/4rd of the row with margin */
    margin-bottom: 20px;
    float: left; /* Float the items to ensure multi-column layout */
    position: relative;
    overflow: hidden;
}

/* Responsive grid: 2 columns on smaller screens */
@media (max-width: 768px) {
    .gp-gallery-item {
        /*width: calc(50% - 20px);*/ /* 2 columns */
        width: calc(33.333% - 20px);/* 3 columns */

    }
}

/* Responsive grid: 1 column on extra small screens */
@media (max-width: 576px) {
    .gp-gallery-item {
        width: 100%; /* Full width for smaller screens */
    }
}

/* Gallery item images */
.gp-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 100vh; /* Prevents image from overflowing viewport height */
    border-radius: 10px;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover effect for images */
.gp-gallery-item:hover img {
    transform: scale(1.03);
}

/* Hover effect for titles */
.gp-gallery-item:hover h3 {
    background: rgba(83, 138, 170, 0.8);
}

/* Ensure the first image fits properly within its container */
.gp-gallery-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;border-radius: 0;
}

/* Styling for hidden gallery items in the lightbox */
.lightbox-thumbnails {
    display: none;
}


/* Styling for the thumbnails */
.gallery-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.gallery-thumbnails img {
    margin: 5px;
    cursor: pointer;
}
.lb-nav a.lb-prev,.lb-nav a.lb-next {background-size:35px;opacity: 0.6;width: 30%;}
.lightbox .lb-image {    border: none;}
.lb-outerContainer {    background: none;}
.lb-nav a.lb-next{background-position: calc(100% - 20px);}
.lb-nav a.lb-prev {    background-position: 10px;}
.lb-details {    display: none;}
.lb-data .lb-close {    background-size: 30px;}
.lb-dataContainer {
    position: absolute;
    top: 0;
    right: calc(50% - 25px);
    width: 40px !important;
    z-index: 999;
    display: block;
}
.gp-gallery-item h3 {
    position: absolute;
    padding: 10px;
    width: 100%;
    background: #538aaa4f;
    color: white !important;
    margin:0;
    display: block;
    z-index: 9;
    text-align: center;
    font-size: 16px;
    bottom: 0;
    transition: background 0.35s;
}
.gp-gallery-item:hover img{   transform: scale(1.03);}

/* Add an icon for gallery items that have more than one image */
.gp-gallery-item.has-multiple-images::before {
    content: "";
    background:url(images/gallery.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    z-index: 10;
}