@charset "utf-8";



/* =========================
TITLE
========================= */


.gallery-title{

    text-align:center;

    margin:40px 0;

    font-weight:700;

    color:#222;

}





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

/*
.gallery-filter{

    position:relative;

    z-index:1000;

    padding:10px 0 25px;

}

*/
.gallery-filter {
position: relative; top: 0px; 
   /* position: sticky;
    top: 130px;*/
    z-index: 1000;
    padding: 10px 0 20px;
	
   /* background: rgba(255,255,255,.92);*/
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.desktop-filter{

    text-align:center;

}




.desktop-filter .btn{

    margin:5px;

    padding:12px 25px;

    border-radius:500px 500px 0px 0px;

    font-weight:500;
	font-size:16px;

}

.desktop-filter .btn-primary{  background-color: #e5a93c;
    border-color: #e5a93c;
    color: #1b3b2b;   /*background-color:#033803;
    border-color: #033803;*/}
	
.desktop-filter	.btn-outline-primary{     border-color: #c05a46;
    background-color: #c05a46;
    color: #ffffff;}

.desktop-filter .btn:hover {
   /* color: #fff;
   background-color: #1b3b2b;
    border-color: #1b3b2b;*/
	border-color: #e5a93c;
    background-color: #e5a93c;
    color: #1b3b2b;
	
}
.gallery-mobile-filter .dropdown-item:hover {
    background: #033803;
    color: white;
}
.desktop-filter i{
 display:block; text-align:center;     margin-bottom: 5px;
   /* margin-right:7px;*/

}
.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color: #fff;
    background-color:#033803;
    border-color: #033803;}

.gallery-mobile-filter .btn-primary{     background-color:#033803;
    border-color: #033803;}


.gallery-mobile-filter{

    display:none;

}




.gallery-mobile-filter .dropdown-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 20px;

  /*  border-radius:30px;*/

}





.gallery-mobile-filter .dropdown-toggle::after{

    margin-left:auto;

}





.gallery-mobile-filter .dropdown-menu{

    width:100%;

    border:0;

    border-radius:15px;

    padding:0;

    overflow:hidden;


    box-shadow:

    0 15px 40px rgba(0,0,0,.2);

}





.gallery-mobile-filter .dropdown-item{

    padding:14px 20px;

    font-weight:500;

}





.gallery-mobile-filter .dropdown-item i{

    width:25px;

}





.gallery-mobile-filter .dropdown-item:hover{

    background:#0d6efd;

    color:white;

}





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


.gallery{

    column-count:3;

    column-gap:20px;

}
/*
.gallery{
   display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;

}*/

.gallery-item{

    break-inside:avoid;

    margin-bottom:20px;

}





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


.gallery-card{

    position:relative;

    overflow:hidden;

   /* border-radius:18px;*/

    cursor:pointer;

    background:#fff;

}


.image-search-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%) scale(.6);
    
    width:60px;
    height:60px;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    background:rgba(255,255,255,.92);
    color:#033803;
    
    border-radius:50%;
    
    opacity:0;
    transition:all .35s ease;
    
    z-index:5;
    
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.image-search-icon i{
    font-size:22px;
}
.gallery-card:hover .image-search-icon{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

.gallery-card:hover::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.18);
    z-index:2;
    pointer-events:none;
}


.gallery-card img{

    width:100%;

    display:block;

    transition:.5s;

    animation:imageLoad .6s ease;

}





@keyframes imageLoad{


from{

    opacity:0;

    transform:scale(.85);

}


to{

    opacity:1;

    transform:scale(1);

}


}






.gallery-card:hover img{

    transform:scale(1.08);

}





/* =========================
CAPTION
========================= */


.gallery .caption{

    position:absolute;

    left:0;

    right:0;

    bottom:0;


    padding:25px;


    color:#fff;


    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.85),

    transparent

    );


    transform:translateY(100%);


    transition:.4s;

}





.gallery-card:hover .caption{

    transform:translateY(0);

}





.gallery .caption h5{

    font-size:22px;

    margin-bottom:5px;

}



.gallery .caption p{

    margin:0;

}





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


.lightbox{

    position:fixed;

    inset:0;


    display:none;


    align-items:center;

    justify-content:center;


    background:

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


    padding:30px;


    z-index:99999;

}





.lightbox.active{

    display:flex;

}





.lightbox-content{

    max-width:1100px;

    width:100%;

    text-align:center;

}





#popupTitle{

    color:white;

    font-size:34px;

    margin-bottom:20px;
margin: auto;
 
}





#popupImage{

    max-width:95%;

    max-height:75vh;

    border-radius:15px; margin: auto; text-align:center;

}





#popupDescription{

    color:#ddd;

    margin-top:20px;

}





/* =========================
BUTTONS
========================= */


.lightbox  .close-btn,
.lightbox  .prev,
.lightbox  .next{


    position:absolute;


    width:55px;

    height:55px;


    border:0;


    border-radius:50%;


    background:#033803;

    /*rgba(255,255,255,.15)*/;


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    cursor:pointer;


    transition:.3s;


}





.lightbox  .close-btn:hover,
.lightbox  .prev:hover,
.lightbox  .next:hover{

    background:white;

    color:black;

}





.lightbox  .close-btn{

    top:20px;

    right:25px;

}





.lightbox  .prev{

    left:25px;

    top:50%;

    transform:translateY(-50%);

}





.lightbox  .next{

    right:25px;

    top:50%;

    transform:translateY(-50%);

}





.lightbox  .close-btn i,
.lightbox  .prev i,
.lightbox  .next i{

    font-size:22px;

}







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


@media(max-width:991px){


.gallery{

    column-count:2;

}



.desktop-filter{

    display:none;

}



.gallery-mobile-filter{

    display:block;

}

.gallery-mobile-filter .dropdown-item:hover {
    background: #023702;
    color: white;
}

}








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


@media(max-width:576px){

.gallery-filter {
    position: sticky;
    top: 100px;}

.gallery{

    column-count:1;

}



#popupTitle{

    font-size:22px;

}



.lightbox  .prev,
.lightbox  .next{

    width:45px;

    height:45px;

}



.lightbox  .close-btn{

    width:45px;

    height:45px;

}



}