:root {
    --jw-deep:#005f5f;
    --jw-teal:#008080;
    --jw-red:#c62828;
}

.jw-gallery{
max-width:1440px;
margin:0 auto;
padding:40px 22px 80px;
color:#162626
}

.jw-gallery-hero{
text-align:center;
padding:20px 10px 38px;
position:relative
}

.jw-gallery-hero:after{
content:"";
display:block;
width:70px;
height:3px;
background:linear-gradient(90deg,var(--jw-red),var(--jw-red));
margin:22px auto 0
}

.jw-gallery-kicker{
display:inline-block;
color:var(--jw-red);
font-size:16px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
margin-bottom:10px
}

.jw-gallery-hero h1{
margin:0;
font-size:clamp(34px,5vw,52px);
line-height:1.05;
font-weight:800;
letter-spacing:-.035em;
color: #005f5f;
}

.jw-gallery-hero p{
max-width:680px;
margin:18px auto 0;
color:#617070;
font-size:16px;
line-height:1.7
}


/* =========================================================
   FILTERS
   ========================================================= */

.jw-gallery-filter-wrap{
position:sticky;
top:0;
z-index:20;
padding:12px 0 20px;
background:rgba(255,255,255,.9);
backdrop-filter:blur(12px)
}

.jw-gallery-filters{
display:flex;
gap:9px;
justify-content:center;
flex-wrap:wrap
}

.jw-filter{
appearance:none;
border:1px solid #d6e0df;
background:#156f89;
color:#fff;
border-radius:4px;
padding:11px 19px;
font-size:12px;
font-weight:800;
letter-spacing:.07em;
text-transform:uppercase;
cursor:pointer;
transition:
transform .2s ease,
background .25s ease,
color .25s ease,
border-color .25s ease,
box-shadow .25s ease
}

.jw-filter:hover{
transform:translateY(-2px);
border-color:var(--jw-teal);
box-shadow:0 8px 22px rgba(0,95,95,.12);
background: red;
color: #fff;
}

.jw-filter.is-active{
background:red;
color:#fff;
border-color:red;
box-shadow:0 8px 24px rgba(0,95,95,.22)
}


/* =========================================================
   GALLERY GRID
   ========================================================= */

.jw-gallery-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
margin-top:16px
}

.jw-gallery-card{
min-width:0;
opacity:1;
transform:translateY(0) scale(1);
will-change:opacity,transform
}

.jw-gallery-card[hidden]{
    display:none !important;
}

/* Existing page-load animation */

.jw-gallery-card:nth-child(3n+2){
animation-delay:.07s
}

.jw-gallery-card:nth-child(3n+3){
animation-delay:.14s
}


/* =========================================================
   FILTER ANIMATIONS
   ========================================================= */

/* Images leaving when filter changes */

.jw-gallery-card-leave{
opacity:0;
transform:translateY(18px) scale(.97);
transition:
opacity .28s ease,
transform .28s ease;
pointer-events:none
}


/* Images entering after filter changes */

.jw-gallery-card-enter{
animation:jwGalleryCardIn .55s cubic-bezier(.22,1,.36,1) both;
animation-delay:var(--jw-gallery-delay,0ms)
}

@keyframes jwGalleryCardIn{
from{
opacity:0;
transform:translateY(25px) scale(.96)
}
to{
opacity:1;
transform:translateY(0) scale(1)
}
}


/* =========================================================
   GALLERY IMAGE
   ========================================================= */

.jw-gallery-open{
position:relative;
width:100%;
display:block;
border:0;
padding:0;
background:#0c2525;
cursor:pointer;
overflow:hidden;
aspect-ratio:4/3;
border-radius:5px;
box-shadow:0 14px 35px rgba(0,0,0,.12)
}

/* =========================================================
   ADDED: BORDER AND SHADOW ON IMAGE THUMBNAILS
   ========================================================= */

.jw-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    background: #eee;
    border: 5px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    box-sizing: border-box;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.jw-gallery-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:
transform .75s cubic-bezier(.2,.7,.2,1),
filter .5s ease
}

/* Hover effect - enhance border and shadow */
.jw-gallery-open:hover .jw-gallery-image {
    border-color: #c62828;
    box-shadow: 0 0 8px rgba(198, 40, 40, .4), 0 0 2px rgba(0, 0, 0, .5);
}

.jw-gallery-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
text-align:left;
padding:27px;
color:#fff;
background:linear-gradient(
180deg,
rgba(0,0,0,0) 25%,
rgba(0,40,40,.88) 100%
);
opacity:0;
transform:translateY(8px);
transition:
opacity .35s ease,
transform .35s ease
}

.jw-gallery-open:hover .jw-gallery-image img{
transform:scale(1.07);
filter:saturate(1.08)
}

.jw-gallery-open:hover .jw-gallery-overlay{
opacity:1;
transform:none
}

.jw-gallery-line{
width:38px;
height:3px;
background:var(--jw-red);
margin-bottom:11px
}

.jw-gallery-title{
font-size:21px;
font-weight:800;
line-height:1.15
}

.jw-gallery-description{
font-size:13px;
line-height:1.55;
margin-top:7px;
max-width:90%
}

.jw-gallery-view{
margin-top:14px;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.13em
}

.jw-gallery-view b{
font-size:17px;
margin-left:4px;
color:#7de0dc
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.jw-gallery-empty{
text-align:center;
padding:60px 15px;
color:#657777;
opacity:0;
transform:translateY(10px);
transition:
opacity .3s ease,
transform .3s ease
}

.jw-gallery-empty-show{
opacity:1;
transform:translateY(0)
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.jw-lightbox{
position:fixed;
inset:0;
z-index:99999;
background:rgba(4,17,17,.96);
display:flex;
align-items:center;
justify-content:center;
padding:30px;
animation:jwLightboxIn .3s ease
}

.jw-lightbox[hidden]{
display:none
}

@keyframes jwLightboxIn{
from{
opacity:0
}
to{
opacity:1
}
}

.jw-lb-inner{
max-width:min(1150px,88vw);
max-height:92vh;
text-align:center;
color:#fff;
animation:jwLightboxContentIn .4s cubic-bezier(.22,1,.36,1)
}

@keyframes jwLightboxContentIn{
from{
opacity:0;
transform:scale(.96) translateY(10px)
}
to{
opacity:1;
transform:scale(1) translateY(0)
}
}

.jw-lb-inner>img{
display:block;
max-width:100%;
max-height:72vh;
margin:auto;
object-fit:contain;
box-shadow:0 20px 70px rgba(0,0,0,.5)
}

.jw-lb-caption{
text-align:left;
max-width:900px;
margin:17px auto 0
}

.jw-lb-caption span{
color:#7de0dc;
text-transform:uppercase;
letter-spacing:.13em;
font-size:10px;
font-weight:800
}

.jw-lb-caption h2{
margin:5px 0;
font-size:24px
}

.jw-lb-caption p{
margin:0;
color:#ccd8d8;
line-height:1.6
}


/* =========================================================
   LIGHTBOX CONTROLS
   ========================================================= */

.jw-lb-close,
.jw-lb-prev,
.jw-lb-next{
position:absolute;
border:0;
background:transparent;
color:#fff;
cursor:pointer;
line-height:1;
font-family:Arial,sans-serif;
transition:
color .2s ease,
transform .2s ease
}

.jw-lb-close{
top:17px;
right:25px;
font-size:45px
}

.jw-lb-prev,
.jw-lb-next{
top:50%;
transform:translateY(-50%);
font-size:68px;
font-weight:200;
padding:15px
}

.jw-lb-prev{
left:15px
}

.jw-lb-next{
right:15px
}

.jw-lb-close:hover,
.jw-lb-prev:hover,
.jw-lb-next:hover{
color:#7de0dc
}

.jw-lb-prev:hover{
transform:translateY(-50%) translateX(-4px)
}

.jw-lb-next:hover{
transform:translateY(-50%) translateX(4px)
}


/* =========================================================
   ORIGINAL PAGE LOAD ANIMATION
   ========================================================= */

@keyframes jwIn{
from{
opacity:0;
transform:translateY(18px)
}
to{
opacity:1;
transform:none
}
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:950px){

.jw-gallery-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

.jw-gallery{
padding:35px 14px 55px
}

.jw-gallery-grid{
grid-template-columns:1fr;
gap:14px
}

/* Mobile: Adjust border size for smaller screens */
.jw-gallery-image {
    border-width: 3px !important;
}

.jw-gallery-filter-wrap{
position:relative
}

.jw-gallery-filters{
justify-content:flex-start;
overflow-x:auto;
flex-wrap:nowrap;
padding:2px 2px 8px;
scrollbar-width:none
}

.jw-gallery-filters::-webkit-scrollbar{
display:none
}

.jw-filter{
white-space:nowrap
}

.jw-gallery-overlay{
opacity:1;
transform:none;
padding:20px;
background:linear-gradient(
180deg,
transparent 15%,
rgba(0,40,40,.9) 100%
)
}

.jw-lb-prev{
left:0
}

.jw-lb-next{
right:0
}

.jw-lb-inner{
max-width:94vw
}

.jw-lb-caption{
padding:0 10px
}

.jw-lb-caption h2{
font-size:20px
}

.jw-lb-inner>img{
max-height:65vh
}

.jw-lb-close{
right:12px;
top:10px
}

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media(prefers-reduced-motion:reduce){

.jw-gallery-card,
.jw-gallery-card-enter,
.jw-gallery-card-leave,
.jw-gallery-open,
.jw-gallery-image img,
.jw-gallery-overlay,
.jw-lightbox,
.jw-lb-inner{
animation:none!important;
transition:none!important
}

}

.gallery-index-index .page-title-wrapper {
    display: none !important;
}