.gallery-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-filters label {
    font-size: 14px;
    font-weight: 600;
}

.gallery-filters select {
    padding: 12px 15px;
    min-width: 240px;
    border: 1px solid #ddd;
    font-size: 14px;
    border-radius: 0;
    background: #fff;
    cursor: pointer;
}

.gallery-results {
    transition: opacity 0.2s ease;
}

.gallery-results.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.gallery-heading {
    font-size: 22px;
    font-weight: 600;
    color: #003057;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0 20px;
}

.gallery-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #003057;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.gallery-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: transform 0.25s ease;
    font: inherit;
}

.gallery-item:hover {
    transform: translateY(-4px);
}

.gallery-item:focus-visible {
    outline: 2px solid #003057;
    outline-offset: 4px;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 0;
}

.gallery-item-title {
    display: block;
    margin-top: 8px;
    color: #003057;
    font-family: "Libre Franklin", Sans-serif;
    font-size: 16px;
    text-transform: capitalize;
}

.dpg-error,
.dpg-empty {
    margin: 20px 0;
}

/* =========================
   FANCYBOX
========================= */

.fancybox__container {
    --fancybox-bg: rgba(0, 0, 0, 0.94);
    z-index: 999999 !important;
}

.fancybox__backdrop {
    background: rgba(0, 0, 0, 0.94) !important;
}

.fancybox__viewport {
    overflow: hidden !important;
}

/* Keep the image at a sensible size without forcing an incorrect layout. */
.fancybox__content {
    max-width: 92vw !important;
    max-height: 78vh !important;
    margin: auto !important;
    background: transparent !important;
}

.fancybox__content img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
    max-height: 78vh !important;
    object-fit: contain !important;
}

/* Fancybox v5 controls use .f-button. */
.fancybox__nav .f-button,
.fancybox__toolbar .f-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.fancybox__nav .f-button:hover,
.fancybox__toolbar .f-button:hover {
    background: rgba(255, 255, 255, 0.60) !important;
}

.fancybox__nav .f-button svg,
.fancybox__toolbar .f-button svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #fff !important;
    fill: none !important;
}

.fancybox__nav .f-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000000 !important;
}

.fancybox__nav .f-button.is-prev {
    left: 20px !important;
}

.fancybox__nav .f-button.is-next {
    right: 20px !important;
}

.fancybox__toolbar {
    z-index: 1000001 !important;
}

.fancybox__toolbar .f-button {
    margin: 10px !important;
}

/* Horizontal thumbnail strip */
.f-thumbs {
    --f-thumb-width: 105px;
    --f-thumb-height: 70px;
    --f-thumb-gap: 8px;
    padding: 8px 10px 12px !important;
}

.f-thumbs__viewport {
    max-height: 92px !important;
}

.f-thumbs__track {
    align-items: center !important;
}

.f-thumbs__slide {
    width: var(--f-thumb-width) !important;
    height: var(--f-thumb-height) !important;
    flex: 0 0 var(--f-thumb-width) !important;
    padding: 0 !important;
    margin-right: var(--f-thumb-gap) !important;
}

.f-thumbs__slide__button {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    opacity: 0.65;
    border: 2px solid transparent !important;
}

.f-thumbs__slide.is-selected .f-thumbs__slide__button {
    opacity: 1 !important;
    border-color: #fff !important;
}

.f-thumbs__slide__button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Remove theme/Elementor button styling if it leaks into Fancybox. */
.fancybox__container button,
.fancybox__container .f-button {
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* No clipping masks: they were causing broken/hidden Fancybox controls. */
.fancybox__container .f-button {
    clip-path: none !important;
}

/* Responsive */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fancybox__content,
    .fancybox__content img {
        max-width: 90vw !important;
        max-height: 72vh !important;
    }

    .fancybox__nav .f-button {
        width: 44px !important;
        height: 44px !important;
    }

    .fancybox__nav .f-button.is-prev {
        left: 10px !important;
    }

    .fancybox__nav .f-button.is-next {
        right: 10px !important;
    }
}

@media (max-width: 600px) {
    .gallery-wrapper {
        padding: 30px 15px;
    }

    .gallery-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-filters select {
        width: 100%;
        min-width: 0;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-heading {
        font-size: 19px;
        gap: 12px;
    }

    .fancybox__content,
    .fancybox__content img {
        max-width: 94vw !important;
        max-height: 65vh !important;
    }

    .f-thumbs {
        --f-thumb-width: 82px;
        --f-thumb-height: 56px;
    }

    .fancybox__nav .f-button {
        width: 40px !important;
        height: 40px !important;
    }

    .fancybox__nav .f-button.is-prev {
        left: 5px !important;
    }

    .fancybox__nav .f-button.is-next {
        right: 5px !important;
    }
}


/* =========================================================
   DPG 1.0.4 — FINAL LIGHTBOX CONTROL OVERRIDES
   Keep these scoped to Fancybox so Elementor/theme styles
   cannot interfere with the gallery controls.
========================================================= */

.fancybox__container {
    --f-button-width: 50px;
    --f-button-height: 50px;
}

.fancybox__container .f-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    border: 0 !important;
    outline: 0 !important;
    clip-path: none !important;
    filter: none !important;
}

.fancybox__container .fancybox__nav .f-button {
    position: absolute !important;
    top: 50% !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: rgba(25,25,25,.72) !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1000002 !important;
}

.fancybox__container .fancybox__nav .f-button:hover {
    background: rgba(55,55,55,.90) !important;
}

.fancybox__container .fancybox__nav .f-button.is-prev {
    left: 28px !important;
    right: auto !important;
}

.fancybox__container .fancybox__nav .f-button.is-next {
    right: 28px !important;
    left: auto !important;
}

.fancybox__container .fancybox__nav .f-button svg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    stroke: #fff !important;
    fill: none !important;
}

.fancybox__container .fancybox__toolbar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 1000003 !important;
}

.fancybox__container .fancybox__toolbar .f-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 12px !important;
    border-radius: 50% !important;
    background: rgba(25,25,25,.72) !important;
}

.fancybox__container .fancybox__toolbar .f-button:hover {
    background: rgba(55,55,55,.90) !important;
}

/* Prevent the thumbnail track from stretching across the entire page. */
.fancybox__container .f-thumbs {
    position: absolute !important;
    left: 50% !important;
    bottom: 10px !important;
    width: min(94vw, 1320px) !important;
    max-width: min(94vw, 1320px) !important;
    height: 82px !important;
    max-height: 82px !important;
    padding: 6px 8px !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,.28) !important;
    border-radius: 6px !important;
    z-index: 1000001 !important;
}

.fancybox__container .f-thumbs__viewport {
    width: 100% !important;
    height: 70px !important;
    max-height: 70px !important;
    overflow: hidden !important;
}

.fancybox__container .f-thumbs__track {
    display: flex !important;
    align-items: center !important;
    height: 70px !important;
    gap: 8px !important;
}

.fancybox__container .f-thumbs__slide {
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 64px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.fancybox__container .f-thumbs__slide__button {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: transparent !important;
    opacity: .62 !important;
    box-shadow: none !important;
}

.fancybox__container .f-thumbs__slide.is-selected .f-thumbs__slide__button {
    border-color: #fff !important;
    opacity: 1 !important;
}

.fancybox__container .f-thumbs__slide__button img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
}

/* Leave enough vertical room for the filmstrip. */
.fancybox__container .fancybox__viewport {
    padding-bottom: 96px !important;
    box-sizing: border-box !important;
}

/* Main image: never let the filmstrip overlap it. */
.fancybox__container .fancybox__content {
    max-width: 90vw !important;
    max-height: calc(82vh - 20px) !important;
    margin: auto !important;
}

.fancybox__container .fancybox__content img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: calc(82vh - 20px) !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .fancybox__container .fancybox__nav .f-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .fancybox__container .fancybox__nav .f-button.is-prev {
        left: 8px !important;
    }

    .fancybox__container .fancybox__nav .f-button.is-next {
        right: 8px !important;
    }

    .fancybox__container .f-thumbs {
        width: 96vw !important;
        max-width: 96vw !important;
        bottom: 5px !important;
    }

    .fancybox__container .f-thumbs__slide {
        flex-basis: 78px !important;
        width: 78px !important;
        height: 52px !important;
    }

    .fancybox__container .f-thumbs__viewport,
    .fancybox__container .f-thumbs__track {
        height: 58px !important;
    }

    .fancybox__container .f-thumbs {
        height: 70px !important;
        max-height: 70px !important;
    }

    .fancybox__container .fancybox__viewport {
        padding-bottom: 82px !important;
    }

    .fancybox__container .fancybox__content,
    .fancybox__container .fancybox__content img {
        max-width: 94vw !important;
        max-height: 68vh !important;
    }
}


/* =========================================================
   DPG 1.0.5 — FORCE-VISIBLE LIGHTBOX ARROWS
   Draw arrows with CSS so no SVG/icon/font dependency can
   hide them.
========================================================= */

.fancybox__container .fancybox__nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

.fancybox__container .fancybox__nav .f-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 50% !important;
    background: rgba(20,20,20,.78) !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: visible !important;
    clip-path: none !important;
    z-index: 2147483000 !important;
}

.fancybox__container .fancybox__nav .f-button.is-prev {
    left: 24px !important;
    right: auto !important;
}

.fancybox__container .fancybox__nav .f-button.is-next {
    right: 24px !important;
    left: auto !important;
}

/* Disable the library icon visually and draw our own chevron. */
.fancybox__container .fancybox__nav .f-button svg {
    display: none !important;
    visibility: hidden !important;
}

.fancybox__container .fancybox__nav .f-button::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 15px !important;
    height: 15px !important;
    box-sizing: border-box !important;
    border-top: 3px solid #fff !important;
    border-right: 3px solid #fff !important;
}

.fancybox__container .fancybox__nav .f-button.is-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg) !important;
}

.fancybox__container .fancybox__nav .f-button.is-next::before {
    transform: translate(-65%, -50%) rotate(45deg) !important;
}

.fancybox__container .fancybox__nav .f-button:hover {
    background: rgba(45,45,45,.95) !important;
    border-color: rgba(255,255,255,.55) !important;
}

/* Keep thumbnail strip compact and separate from the image. */
.fancybox__container .f-thumbs {
    bottom: 8px !important;
    width: min(92vw, 1300px) !important;
    max-width: min(92vw, 1300px) !important;
    height: 78px !important;
    max-height: 78px !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,.38) !important;
    border-radius: 5px !important;
}

.fancybox__container .f-thumbs__viewport {
    height: 66px !important;
    max-height: 66px !important;
    overflow: hidden !important;
}

.fancybox__container .f-thumbs__track {
    height: 66px !important;
    gap: 8px !important;
}

.fancybox__container .f-thumbs__slide {
    flex: 0 0 96px !important;
    width: 96px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fancybox__container .f-thumbs__slide__button {
    width: 96px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 3px !important;
    border: 2px solid transparent !important;
    overflow: hidden !important;
    opacity: .62 !important;
}

.fancybox__container .f-thumbs__slide.is-selected .f-thumbs__slide__button {
    border-color: #fff !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    .fancybox__container .fancybox__nav .f-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .fancybox__container .fancybox__nav .f-button.is-prev {
        left: 8px !important;
    }

    .fancybox__container .fancybox__nav .f-button.is-next {
        right: 8px !important;
    }

    .fancybox__container .fancybox__nav .f-button::before {
        width: 12px !important;
        height: 12px !important;
    }

    .fancybox__container .f-thumbs {
        width: 96vw !important;
        max-width: 96vw !important;
        height: 68px !important;
        max-height: 68px !important;
    }

    .fancybox__container .f-thumbs__viewport,
    .fancybox__container .f-thumbs__track {
        height: 56px !important;
    }

    .fancybox__container .f-thumbs__slide,
    .fancybox__container .f-thumbs__slide__button {
        width: 76px !important;
        height: 50px !important;
        flex-basis: 76px !important;
    }
}


/* =========================================================
   DPG 1.0.6 — DEFINITIVE PREV/NEXT ARROWS
   Fancybox's SVG icons are hidden and arrows are drawn by CSS.
========================================================= */

html body .fancybox__container .fancybox__nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 2147483646 !important;
}

html body .fancybox__container .fancybox__nav .f-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(255,255,255,.55) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.78) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: visible !important;
    clip-path: none !important;
    z-index: 2147483647 !important;
}

html body .fancybox__container .fancybox__nav .f-button.is-prev {
    left: 24px !important;
    right: auto !important;
}

html body .fancybox__container .fancybox__nav .f-button.is-next {
    right: 24px !important;
    left: auto !important;
}

html body .fancybox__container .fancybox__nav .f-button svg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

html body .fancybox__container .fancybox__nav .f-button::before {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    top: 50% !important;
    left: 50% !important;
    box-sizing: border-box !important;
    border-top: 4px solid #fff !important;
    border-right: 4px solid #fff !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body .fancybox__container .fancybox__nav .f-button.is-prev::before {
    transform: translate(-28%, -50%) rotate(-135deg) !important;
}

html body .fancybox__container .fancybox__nav .f-button.is-next::before {
    transform: translate(-72%, -50%) rotate(45deg) !important;
}

html body .fancybox__container .fancybox__nav .f-button:hover {
    background: rgba(25,25,25,.96) !important;
    border-color: rgba(255,255,255,.85) !important;
}

/* Keep the image away from the thumbnail strip. */
html body .fancybox__container .fancybox__content {
    z-index: 1000000 !important;
}

/* Thumbnail strip: compact, evenly spaced, no stretching/mashing. */
html body .fancybox__container .f-thumbs {
    left: 50% !important;
    bottom: 10px !important;
    width: min(92vw, 1280px) !important;
    max-width: min(92vw, 1280px) !important;
    height: 76px !important;
    max-height: 76px !important;
    padding: 6px 8px !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,.42) !important;
    border-radius: 5px !important;
    z-index: 2147483645 !important;
}

html body .fancybox__container .f-thumbs__viewport {
    width: 100% !important;
    height: 64px !important;
    max-height: 64px !important;
    overflow: hidden !important;
}

html body .fancybox__container .f-thumbs__track {
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    gap: 8px !important;
}

html body .fancybox__container .f-thumbs__slide {
    flex: 0 0 96px !important;
    width: 96px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .fancybox__container .f-thumbs__slide__button {
    display: block !important;
    width: 96px !important;
    height: 60px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: transparent !important;
    opacity: .62 !important;
}

html body .fancybox__container .f-thumbs__slide.is-selected .f-thumbs__slide__button {
    border-color: #fff !important;
    opacity: 1 !important;
}

html body .fancybox__container .f-thumbs__slide__button img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

@media (max-width: 900px) {
    html body .fancybox__container .fancybox__nav .f-button {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    html body .fancybox__container .fancybox__nav .f-button.is-prev {
        left: 10px !important;
    }

    html body .fancybox__container .fancybox__nav .f-button.is-next {
        right: 10px !important;
    }

    html body .fancybox__container .fancybox__nav .f-button::before {
        width: 15px !important;
        height: 15px !important;
        border-width: 3px !important;
    }
}

@media (max-width: 600px) {
    html body .fancybox__container .f-thumbs {
        width: 96vw !important;
        max-width: 96vw !important;
        height: 68px !important;
        max-height: 68px !important;
        bottom: 5px !important;
    }

    html body .fancybox__container .f-thumbs__viewport,
    html body .fancybox__container .f-thumbs__track {
        height: 56px !important;
    }

    html body .fancybox__container .f-thumbs__slide,
    html body .fancybox__container .f-thumbs__slide__button {
        width: 76px !important;
        height: 50px !important;
        flex-basis: 76px !important;
    }
}


/* DPG 1.0.7 - requested small clip-path arrows */
html body .fancybox__container button.f-button.is-prev,
html body .fancybox__container button.f-button.is-next {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    z-index: 2147483647 !important;
}

html body .fancybox__container button.f-button.is-prev svg,
html body .fancybox__container button.f-button.is-next svg {
    display: none !important;
}

html body .fancybox__container button.f-button.is-prev {
    left: 1% !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%) !important;
}

html body .fancybox__container button.f-button.is-next {
    right: 1% !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%) !important;
}

html body .fancybox__container button.f-button.is-prev::before,
html body .fancybox__container button.f-button.is-next::before {
    display: none !important;
    content: none !important;
}

@media (max-width: 768px) {
    html body .fancybox__container button.f-button.is-prev,
    html body .fancybox__container button.f-button.is-next {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
}