.elementor-247 .elementor-element.elementor-element-fafad25{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-247 .elementor-element.elementor-element-70062b5{--display:flex;--padding-top:70px;--padding-bottom:070px;--padding-left:15px;--padding-right:15px;}.elementor-247 .elementor-element.elementor-element-70062b5:not(.elementor-motion-effects-element-type-background), .elementor-247 .elementor-element.elementor-element-70062b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-gallery .elementor-gallery-item__title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-gallery .elementor-gallery-item__description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-gallery{--galleries-title-color-normal:var( --e-global-color-primary );--galleries-title-color-hover:var( --e-global-color-secondary );--galleries-pointer-bg-color-hover:var( --e-global-color-accent );--gallery-title-color-active:var( --e-global-color-secondary );--galleries-pointer-bg-color-active:var( --e-global-color-accent );}.elementor-widget-gallery .elementor-gallery-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-247 .elementor-element.elementor-element-663af05 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-247 .elementor-element.elementor-element-663af05 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-247 .elementor-element.elementor-element-663af05{--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-247 .elementor-element.elementor-element-1f0a6af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-1f0a6af *//* Masonry Grid */
.custom-portfolio-grid {
    column-count: 3; /* number of columns on desktop */
    column-gap: 20px; /* space between columns */
    width: 100%;
}

@media (max-width: 1024px) {
    .custom-portfolio-grid {
        column-count: 2; /* tablet */
    }
}

@media (max-width: 600px) {
    .custom-portfolio-grid {
        column-count: 1; /* mobile */
    }
}

/* Portfolio Item */
.custom-portfolio-item {
    position: relative;
    margin-bottom: 20px; /* space between items vertically */
    display: inline-block; /* necessary for column layout */
    width: 100%;
    overflow: hidden;
}

/* Image */
.custom-portfolio-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

/* Slight zoom on hover */
.custom-portfolio-item:hover img {
    transform: scale(1.05);
}

/* Hover Overlay */
.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Show overlay on hover */
.custom-portfolio-item:hover .hover-overlay {
    opacity: 1;
}

/* Title in overlay */
.hover-overlay .portfolio-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0;
    color: #fff; /* White title */
}

/* Hover buttons */
.hover-buttons {
    display: flex;
    gap: 8px; /* smaller gap between buttons */
}

/* Buttons style */
.hover-buttons a {
    background: rgba(255,255,255,0.2);
    color: #fff; /* White text */
    padding: 5px 10px; /* smaller padding */
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s;
}

/* Button hover effect */
.hover-buttons a:hover {
    background: rgba(255,255,255,0.35);
}/* End custom CSS */