.elementor-10902 .elementor-element.elementor-element-d3e185a{margin-top:50px;margin-bottom:50px;padding:0px 0px 0px 0px;}.elementor-10902 .elementor-element.elementor-element-2142640 .gallery-item{padding:0 20px 20px 0;}.elementor-10902 .elementor-element.elementor-element-2142640 .gallery{margin:0 -20px -20px 0;}.elementor-10902 .elementor-element.elementor-element-2142640 .gallery-item .gallery-caption{text-align:center;}/* Start custom CSS for image-gallery, class: .elementor-element-2142640 *//* Ensure the gallery item and image are positioned correctly */
.elementor-image-gallery .gallery-item {
    position: relative; /* Needed for overlay positioning */
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden; /* Ensures the image doesn't overflow when zoomed */
}

/* Add a slight zoom-in effect to the image */
.elementor-image-gallery .gallery-item img {
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for zoom and opacity */
}

/* Slight zoom-in effect on hover */
.elementor-image-gallery .gallery-item:hover img {
    transform: scale(1.1); /* Scale the image by 10% on hover */
    opacity: 0.9; /* Optional: Slightly fade the image */
}

/* Create a black transparent overlay on hover */
.elementor-image-gallery .gallery-item:hover .gallery-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Black overlay with 30% opacity */
    z-index: 1; /* Overlay should be above the image */
}

/* Ensure the image stays behind the overlay */
.elementor-image-gallery .gallery-item img {
    position: relative;
    z-index: 0;
}/* End custom CSS */