
.gallery-banner{
    width: 100%;
    height: 700px;
}

.gallery-banner img{
    width: 100%;
    height: 700px;

}




/* .gallery{
    padding-top: 30px;
} */




.gallery-banner{
    margin-top: 100px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../assets/banner/banner3.jpg");
    height: 70%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 200px;
  }

  .gallery-banner h2{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.gallery-button{
    width: 100%;
text-align: center;
padding-bottom: 20px;

}
/* 
.gallery .card .card-title {
    padding: 10px;
    color: black;
  } */

  /* .gallery1 .card .card-title {
    padding: 10px;
    color: black;
  } */

  .gallery-view{
    margin-top: 100px;
  }

  /* gallery */

/* General Styling */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
}

.mb-4,
.mb-5 {
    margin-bottom: 1.5rem;
}

/* Page Banner Styling */
.page-banner {
    background-color: #DA3255;
    padding: 30px 0;
    text-align: center;
    color: #fff;
}

/* Section Styling */
.section {
    padding: 40px 0;
}

/* Filter Button Styling */
.filter-btn {
    background-color: green;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
}

.btn-active {
    background-color: #1FBDBD;
}

/* Image Styling */
/* img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
} */

/* img:hover {
    transform: scale(1.05);
} */

/* JavaScript Filter Animation Styling */
#item-1,
#item-2,
#item-3,
#item-4 {
    display: block;
}

#item-1,
#item-2,
#item-3,
#item-4,
.row {
    transition: display 0.5s;
}


#gallery img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }

  .gallery img {
    width: 100%;
    height: 300px;
    object-fit: cover;
  }




@media(max-width:800px){
   

    .gallery1{
        display: block;
        padding-top: 30px;
    }

    .gallery-view{
        margin-top: 150px;
      }
}