button:focus{
    outline: none;
  }
  .main-head h2{
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 70px;
    margin: 60px 0;
    position: relative;
    color: #363945
  }
  .main-head h2::before{
    content:"";
    position: absolute;
    width: 70px;
    height: 8px;
    background-color: #FDAC53;
    border-radius: 8px;
    bottom: -5px
  }
  .gallery{
      width: 100%;
      padding-top: 100%;
      position: relative;
      overflow: hidden;
      cursor: pointer;
  }
  .gallery img{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      object-fit: cover;
      object-position: center;
      transition: .3s all ease;
  }
  
  .gallery:hover img{
      transform: scale(1.05);
  }
  .modal-bg-gallery {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1040;
      background-color: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      padding: 20px;
      display: none;
  }
  
  .modal-gallery-wrapper {
      position: relative;
      height: 100%;
      width: 100%;
  }
  
  .modal-gallery-wrapper img{
      position: absolute;
      /* width: 100%; */
      /* height: 100%; */
      object-fit: contain;
      object-position: center;
      
      max-height: 100%;
      max-width: 100%;
      width: auto;
      height: auto;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  }
  
  button.close-gal-btn {
      z-index: 9;
      padding: 0;
      line-height: 1;
      width: 40px;
      height: 40px;
      border: none;
      font-size: 30px;
      position: absolute;
      right: -15px;
      top: -15px;
      border-radius: 50%;
    background-color: transparent;
    color: #fff;
      transition: .3s all ease;
  }
  button.close-gal-btn:hover{
      color: #FDAC53;
  }
  
  button.prev-gal-btn {
      z-index: 9;
      padding: 0;
      line-height: 1;
      width: 40px;
      height: 40px;
      border: none;
      font-size: 40px;
      position: absolute;
      left: -15px;
      top: 50%;
      transform: translateY(-50%);
      background-color: transparent;
      color: #fff;
      transition: .3s all ease;
  }
  
  button.prev-gal-btn:hover{
      left: -20px;
  }
  
  button.next-gal-btn {
      z-index: 9;
      padding: 0;
      line-height: 1;
      width: 40px;
      height: 40px;
      border: none;
      font-size: 40px;
      position: absolute;
      right: -15px;
      top: 50%;
      transform: translateY(-50%);
      background-color: transparent;
      color: #fff;
      transition: .3s all ease;
  }
  
  button.next-gal-btn:hover{
      right: -20px;
  }
  
  .modal-gallery-wrapper button, .modal-gallery-wrapper button i {
      display: grid;
      place-content: center;
  }
  
  button.close-gal-btn:focus,
  button.prev-gal-btn:focus,
  button.next-gal-btn:focus{
      outline: none;
      box-shadow: none;
  }