/*=========================================
        GALLERY INTRO
==========================================*/

.gallery-intro {

    padding: 110px 0;

    background: #fff;

}

.gallery-intro-image {

    position: relative;

}

.gallery-intro-image img {

    width: 100%;

    border-radius: 30px;

    box-shadow: var(--shadow-lg);

}

.gallery-badge {

    position: absolute;

    right: -20px;

    bottom: 30px;

    background: linear-gradient(135deg,
            var(--primary),
            var(--primary-dark));

    padding: 25px;

    border-radius: 20px;

    color: #fff;

    text-align: center;

}

.gallery-mini-card {

    background: #EFF6FF;

    padding: 25px;

    border-radius: 20px;

    text-align: center;

    margin-top: 20px;

}

.gallery-mini-card h3 {

    color: var(--primary);

}



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

.gallery-filter {

    padding: 80px 0;

    background: #F8FAFC;

}

.filter-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 40px;

}

.filter-buttons button {

    border: none;

    padding: 12px 30px;

    border-radius: 40px;

    background: #fff;

    font-weight: 600;

    transition: .35s;

    box-shadow: var(--shadow-sm);

}

.filter-buttons button:hover,

.filter-buttons button.active {

    background: var(--primary);

    color: #fff;

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

.gallery-grid-section{

    padding:110px 0;

    background:#fff;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    cursor:pointer;

    box-shadow:var(--shadow);

}

.gallery-item img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.1);

}

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(

        to top,

        rgba(15,23,42,.92),

        rgba(15,23,42,.10)

    );

    opacity:0;

    transition:.35s;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-category{

    display:inline-block;

    width:max-content;

    padding:6px 16px;

    border-radius:30px;

    background:#2563EB;

    color:#fff;

    font-size:13px;

    margin-bottom:15px;

}

.gallery-overlay h5{

    color:#fff;

    margin-bottom:20px;

}

.gallery-view{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    color:var(--primary);

    font-size:22px;

    transition:.3s;

}

.gallery-view:hover{

    background:var(--primary);

    color:#fff;

}