/* gallery css */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
  }
  /*.container{*/
  /*  max-width: 1200px;*/
  /*  margin: 0 auto;*/
  /*  padding: 0 16px;*/
  /*}*/
  #gallery{
    max-width: 100%;
    padding: 48px 0;
  }
  #gallery h3{
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 36px;
    opacity: 0.6;
  }
  #gallery .images{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px;
  }
  #gallery .images .img{
    border: 6px solid #e6e5e5;
    position: relative;
    overflow: hidden;
  }
  #gallery .images .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(0);
    transition: .3s ease;
  }
  #gallery .images .img:hover img{
    filter: blur(2px);
    cursor: zoom-in;
  }
  #gallery .images .img p{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 16px 0;
    text-align: center;
    transform: translateY(150%);
    transition: .3s ease;
  }
  #gallery .images .img:hover p{
    transform: translateY(0);
  }

  /* gallery modal css  */
  .galleryModal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    align-items: center;
    display: none;
    z-index: 1000;
   }
   .galleryModal.show{
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .galleryModal .containerBox{
     display: flex;
     align-items: center;
   }
   .galleryModal .img-modal{
     width: 676px;;
     height: 460px;
     margin: 0 24px;
   }
   .galleryModal .img-modal img{
     width: 100%;
     height: 100%;
     object-fit: contain;
   }
   .galleryModal span{
     cursor: pointer;
     font-size: 24px;
     color: #fff;
   }
   .galleryModal .closeBtn{
     position: absolute;
     top:24px;
     right: 24px;
     font-size: 36px;
     color: #fff;
   }
 
   @media screen and (max-width: 768px) {
     #gallery .images{
       display: grid;
       grid-template-columns: repeat(2,1fr);
       gap: 16px;
     }
     .galleryModal .img-modal{
     width: 476px;;
     height: 360px;
     margin: 0 24px;
     }
   }
 
   @media screen and (max-width: 576px) {
     #gallery .images{
       display: grid;
       grid-template-columns: repeat(1,1fr);
       gap: 16px;
     }
     .galleryModal .containerBox{
       position: relative;
     }
     .galleryModal span{
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
     }
     .galleryModal span.left{
       left: 24px;  
       background:rgb(163, 154, 154);
       padding: 5px 6px;
       border-radius: 45%;
     }
     .galleryModal span.right{
       right: 24px;    
       background:rgb(163, 154, 154);
       padding: 5px 6px;
       border-radius: 45%;  
     }
     .galleryModal .img-modal{
       width: 356px;;
       height: 260px;
       margin: 0 24px;
     }
 
   }
 
   @media screen and (max-width: 350px) {
     .galleryModal .img-modal{
       width: 256px;;
       height: 220px;
       margin: 0 24px;
     }
   }