.elementor-100 .elementor-element.elementor-element-766d485{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-100 .elementor-element.elementor-element-258ae31{--display:flex;}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-100 .elementor-element.elementor-element-22acf9d .gallery-item .gallery-caption{text-align:center;}:root{--page-title-display:none;}/* Start custom CSS for image-gallery, class: .elementor-element-22acf9d */<!-- Complete WordPress Gallery Grid & Elementor Lightbox Ultimate Fix -->
<style>
    /* ==========================================================================
       1. WP BASIC GALLERY GRID STYLING
       ========================================================================== */
    .wp-block-gallery, 
    .gallery {
        max-width: 1200px;
        margin: 60px auto !important;
        padding: 0 4%;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        gap: 25px !important;
    }

    .blocks-gallery-item,
    .gallery-item {
        margin: 0 !important;
        width: 100% !important;
        background-color: var(--white, #ffffff);
        border: 2px solid var(--card-border, #b3e5fc);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0, 134, 255, 0.05);
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .blocks-gallery-item:hover,
    .gallery-item:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 20px 35px rgba(0, 210, 255, 0.15);
        border-color: var(--primary, #00d2ff);
    }

    .blocks-gallery-item figure,
    .gallery-item figure,
    .gallery-icon {
        margin: 0 !important;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .wp-block-gallery img,
    .gallery img {
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
        display: block;
        transition: transform 0.6s ease;
    }

    .blocks-gallery-item:hover img,
    .gallery-item:hover img {
        transform: scale(1.06);
    }

    .blocks-gallery-item figcaption,
    .gallery-caption {
        background: linear-gradient(to top, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.4) 100%) !important;
        color: var(--white, #ffffff) !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        padding: 15px !important;
        text-align: center !important;
        letter-spacing: 0.2px;
        text-transform: capitalize;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    ul.wp-block-gallery {
        list-style-type: none;
        padding-left: 0;
    }

    @media (max-width: 768px) {
        .wp-block-gallery, 
        .gallery {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
            gap: 15px !important;
            margin: 40px auto !important;
        }
        .wp-block-gallery img,
        .gallery img {
            height: 220px !important;
        }
    }

    /* ==========================================================================
       2. FOOLPROOF LIGHTBOX ICON COLOR OVERRIDE (FORCES DARK ICONS ON WHITE BAR)
       ========================================================================== */

    /* Force the interactive vector paths to paint dark blue/charcoal directly */
    svg.e-font-icon-svg,
    svg[class*="eicon"],
    .e-font-icon-svg,
    .e-font-icon-svg *,
    .elementor-lightbox-item svg,
    .elementor-lightbox svg {
        fill: #0f172a !important;
        color: #0f172a !important;
        stroke: #0f172a !important;
    }

    /* Make the counter tracking numbers ("3 / 102") turn dark gray as well */
    .elementor-lightbox__counter,
    .dialog-header .dialog-title,
    div[class*="lightbox"]__counter {
        color: #0f172a !important;
        font-weight: 700 !important;
    }

    /* Give the clickable utility wrappers a soft background tint block when your mouse highlights them */
    .elementor-lightbox-item:hover,
    .elementor-lightbox .dialog-header button:hover,
    div[class*="lightbox"] button:hover {
        background-color: rgba(0, 134, 255, 0.12) !important;
        border-radius: 6px !important;
    }
</style>/* End custom CSS */