@charset "UTF-8";

.gallery {
        display: flex;
        flex-wrap: wrap;
        margin: 80px 24px;
      }

      .thumbnails img {
        width: 325px;
        height: 225px;
        margin: 5px 4% 55px 5px;
        object-fit: cover;
        cursor: pointer;
        border-radius:10px;
      }
      
      .thumbnails img:hover {
          transform: scale(1.1);
          transition: 0.3s;
      }

      .lightbox {
        position: fixed;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* width: 60%; */
        /*max-height: 80%; */
        background-color: rgba(0, 0, 0, 0.8);
        padding: 20px 25px;
        display: none;
        border-radius: 10px;
      }

      .lightbox .close {
        position: absolute;
        top: 10px;
        right: 2px;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        color: red;
      }

      .lightbox .full-image {
        max-height: 85vh;
        margin: 0 auto;
        border: solid 1px white;
      }

      .controls {
        text-align: center;
      }

      .prev,
      .next {
        background-color: #555;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin: 10px;
      }

      .prev:hover,
      .next:hover {
        background-color: #777;
      }

      .prev:disabled,
      .next:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      @media screen and (max-width: 770px){
          .gallery{
              margin: 80px 0;
          }
          
          .thumbnails img{
              width: 300px;
              margin: 20px 18px;
          }
      }

      @media screen and (max-width: 576px){
         .gallery{
             margin: 80px 0;
         } 
         
         .thumbnails img {
             margin: 5px 7% 55px 0;
         }
         
        .lightbox {
        position: fixed;
        z-index: 999;
        /*top: 30%;*/
        left: 50%;
        transform: translate(-50%, -50%);
        /* width: 60%;
        max-height: 80%; */
        background-color: rgba(0, 0, 0, 0.8);
        padding: 20px;
        display: none;
        border-radius: 10px;
      }

      .lightbox .full-image {
        /*max-height: 60%;*/
        /*margin: 0 auto;*/
        
        max-width: 35vh;
        margin: 0 auto;
      }

      .prev,
      .next {
        background-color: #555;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        margin: 10px;
      }
      }
	 /*for pc ends here*/