/*==================================
        PREMIUM GALLERY
===================================*/

.gallery-section {

    padding: 100px 0;

    background: #EEF4F8;

}

.gallery-filter {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 50px;

}

.gallery-filter button {

    border: none;

    background: #fff;

    color: #0B2E59;

    padding: 12px 28px;

    border-radius: 50px;

    font-weight: 600;

    transition: .35s;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);

}

.gallery-filter button.active,
.gallery-filter button:hover {

    background: #F59E0B;

    color: var(--white);

}

.gallery-card {

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

}

.gallery-card img {

    width: 100%;

    height: 320px;

    object-fit: cover;

    transition: .6s;

}

.gallery-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(rgba(11, 46, 89, .15), rgba(11, 46, 89, .90));

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: 30px;

    opacity: 0;

    transition: .4s;

}

.gallery-card:hover .gallery-overlay {

    opacity: 1;

}

.gallery-card:hover img {

    transform: scale(1.10);

}

.gallery-overlay span {

    display: inline-block;

    color: #F59E0B;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 8px;

}

.gallery-overlay h5 {

    color: var(--white);

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 20px;

}

.gallery-overlay a {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: #F59E0B;

    color: var(--white);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    text-decoration: none;

    transition: .35s;

}

.gallery-overlay a:hover {

    background: #fff;

    color: #0B2E59;

}

@media(max-width:767px) {

    .gallery-section {

        padding: 70px 0;

    }

    .gallery-card img {

        height: 260px;

    }

    .gallery-filter {

        gap: 10px;

    }

    .gallery-filter button {

        padding: 10px 18px;

        font-size: 14px;

    }

}