.gallery-filter{
    padding:70px 0 40px;
    background:#fff;
}

.filter-wrapper{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

.filter-btn{

    border:none;

    padding:14px 30px;

    border-radius:60px;

    background:#fff;

    color:#081120;

    font-weight:600;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.4s;
}

.filter-btn:hover,
.filter-btn.active{

    background:
    linear-gradient(
        135deg,
        #ff6b35,
        #dc2626
    );

    color:#fff;

    transform:translateY(-3px);
}

.gallery-section{

    padding:40px 0 120px;

    background:#f8fafc;
}

.gallery-grid{

    display:grid;

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

    gap:25px;
}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    height:280px;

    background:#fff;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

    transition:.4s;
}

.gallery-item:hover{

    transform:translateY(-10px);
}

.gallery-item a{

    display:block;

    width:100%;
    height:100%;
}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.7s;
}

.gallery-item:hover img{

    transform:scale(1.1);
}

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        rgba(255,107,53,.2),
        rgba(220,38,38,.8)
    );

    opacity:0;

    transition:.4s;
}

.gallery-item:hover .gallery-overlay{

    opacity:1;
}

.gallery-overlay i{

    font-size:45px;

    color:#fff;

    transform:scale(.7);

    transition:.4s;
}

.gallery-item:hover .gallery-overlay i{

    transform:scale(1);
}

.video-item{

    border:3px solid #ff6b35;
}

.gallery-overlay.video{

    background:
    linear-gradient(
        rgba(8,17,32,.3),
        rgba(8,17,32,.8)
    );
}

.gallery-overlay.video i{

    font-size:70px;

    color:white;

    text-shadow:
    0 10px 20px rgba(0,0,0,.3);
}

.media-badge{

    position:absolute;

    top:15px;
    right:15px;

    z-index:3;

    padding:8px 16px;

    border-radius:50px;

    background:white;

    color:#ff6b35;

    font-size:13px;

    font-weight:700;
}

.media-badge.video{

    background:#ff6b35;

    color:white;
}