/* ==========================================
   GALLERY CONTENT
========================================== */


.gallery-content{

    width:100%;

    background:#f8fbff;

    max-width:1400px;

    margin:auto;

    padding:80px 40px;

}



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


.gallery-filter{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.filter-btn{

    border:none;

    outline:none;

    background:#ffffff;

    color:#444;

    padding:13px 24px;

    border-radius:999px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.35s;

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

}



.filter-btn:hover{


     background:#2b6cff;

    color:#ffffff;

    transform:translateY(-2px);

}



.filter-btn.active{


   background:#2b6cff;

    color:#ffffff;

}





/* ==========================================
   MASONRY GRID
========================================== */


.gallery-grid{

    columns:4 300px;

    column-gap:25px;

}



/* ==========================================
   CARD
========================================== */


.gallery-item{

    position:relative;

    margin-bottom:25px;

    break-inside:avoid;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    transition:.5s ease;

}



.gallery-item img,
.gallery-item video{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    transition:.6s ease;

}


/* HOVER */


.gallery-item:hover img,
.gallery-item:hover video{


    transform:scale(1.08);


}



.gallery-item::after{


    content:"";


    position:absolute;


    inset:0;


    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.35)
    );


    opacity:0;


    transition:.4s;


}



.gallery-item:hover::after{


    opacity:1;


}





/* ==========================================
   VIDEO ICON
========================================== */


.video-icon{


    position:absolute;


    top:50%;

    left:50%;


    transform:
    translate(-50%,-50%);


    width:70px;


    height:70px;


    border-radius:50%;


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


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:25px;


    color:#2868ff;


    z-index:2;


}




/* ==========================================
   LOAD MORE
========================================== */


.gallery-load-more{


    display:block;


    margin:70px auto 0;


    padding:18px 50px;


    border:none;


    border-radius:50px;


    background:#2868ff;


    color:white;


    font-size:16px;


    font-weight:700;


    cursor:pointer;


    transition:.3s;


}



.gallery-load-more:hover{


    transform:translateY(-5px);


}



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


.gallery-item.hide{


    display:none;

}





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


@media(max-width:992px){

.gallery-grid{

    columns:3 250px;

}

}



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

@media(max-width:768px){

.gallery-content{

    padding:60px 20px;

}


.gallery-grid{

    columns:2 160px;

    column-gap:15px;

}


.gallery-item{

    margin-bottom:15px;

}


}