div.bg-one-gallery{
  background-color: #ffd190;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 80px;
  padding-bottom: 80px;
}
  #gallery{
    -webkit-column-count:4;
    -moz-column-count:4;
    column-count:4;
    
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    column-gap:20px;
  }
  @media (max-width:1200px){
    #gallery{
    -webkit-column-count:3;
    -moz-column-count:3;
    column-count:3;
      
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    column-gap:20px;
  }
  }
  @media (max-width:800px){
    #gallery{
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
      
    -webkit-column-gap:20px;
    -moz-column-gap:20px;
    column-gap:20px;
  }
  }
  @media (max-width:600px){
    #gallery{
    -webkit-column-count:1;
    -moz-column-count:1;
    column-count:2;
  }  
  }
  @media (max-width:599px){
    #gallery{
    -webkit-column-count:1;
    -moz-column-count:1;
    column-count:1;
  }  }
  #gallery img,#gallery video {
    width:100%;
    height:auto;
    margin: 4% auto;
    box-shadow:-3px 5px 15px #000;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .modal-img,.model-vid{
    width:100%;
    height:auto;
  }
  .modal-body{
    padding:0px;
  }
  .social-icon {
    list-style: none; /* Remove default list styling */
    display: flex; /* Align items horizontally */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.social-icon__item {
    margin-right: 15px; /* Space between icons */
    font-size: 24px; /* Adjust icon size */
}

.social-icon__item a {
    color: #ffffff; /* Icon color */
    text-decoration: none; /* Remove underline from links */
    transition: color 0.3s; /* Smooth color transition on hover */
}

.social-icon__item a:hover {
    color: #ff6f61; /* Change color on hover */
}

.img-responsive {
  transition: transform 0.3s ease; /* Smooth transition for the zoom effect */
}

.img-responsive:hover {
  transform: scale(1.1); /* Scale the image to 110% on hover */
  z-index: 10; /* Ensure it appears above other elements */
}
