/* ==========================================
   GALLERY HERO
========================================== */

.gallery-hero{

    background:url("../images/gallery/gallery-hero.jpg")
    center center/cover no-repeat;

}

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

.gallery-filter{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    padding:60px 8%;

    background:#fff;

}

.gallery-filter button{

    padding:12px 24px;

    border:none;

    border-radius:40px;

    background:#f5f5f5;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.gallery-filter button:hover,

.gallery-filter button.active{

    background:var(--primary);

    color:#fff;

}

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

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}
/* ==========================================
   GALLERY CARD
========================================== */

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    box-shadow:var(--shadow);

    cursor:pointer;
  

}

.gallery-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}
/* ==========================================
   GALLERY OVERLAY
========================================== */

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.85),
        rgba(0,0,0,.45)
    );

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    color:#fff;
    opacity:0;
    transform:translateY(30px);
    transition:.45s ease;
}
.gallery-card img{

    width:100%;
    height:320px;
    object-fit:cover;
    transition:transform .8s ease;
}

.gallery-card:hover img{
     transform:scale(1.10);
}

.gallery-card:hover .gallery-overlay{
 opacity:1;

    transform:translateY(0);

}

.gallery-category{

    display:inline-block;

    background:rgba(212,175,55,.95);

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.gallery-overlay h3{
color:#fff;

    margin-bottom:15px;

}

.gallery-overlay p{
 color:#fff;

    line-height:1.7;

    margin-bottom:20px;

}
.gallery-category{

    color:#fff;

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

.lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    z-index:99999;

    justify-content:center;

    align-items:center;

    flex-direction:column;

}

.lightbox img{

    max-width:90%;

    max-height:75vh;

    border-radius:15px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

}

.lightbox-info{

    color:white;

    text-align:center;

    margin-top:25px;

}

.close-lightbox{

    position:absolute;

    top:25px;

    right:35px;

    color:white;

    font-size:40px;

    cursor:pointer;

}

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:rgba(255,255,255,.15);

    color:white;

    border:none;

    width:55px;

    height:55px;

    border-radius:50%;

    cursor:pointer;

    font-size:28px;

}

.prev{

    left:40px;

}

.next{

    right:40px;

}

.prev:hover,
.next:hover{

    background:var(--primary);

}