body.fullscreen-active {
    overflow: hidden;
  }


  body.noscroll {
    overflow: hidden;
  }

  .gallery-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000000;
      flex-direction: column;
  }
  
  
  .gallery-overlay img {
      max-width: 90vw;
      max-height: 80vh;
      object-fit: contain;
      transition: transform 0.3s ease;
      display: block;
      margin: 0 auto;
  } 
  
  #overlayImage {
      cursor: zoom-in; /* default */
      transition: transform 0.3s ease;
  }
  
  .gallery-controls {
      position: absolute;
      top: 10px;
      right: 20px;
      /* transform: translate(-30%, -0%); */
      display: flex;
      gap: 8px;
      z-index: 1100;    
  }
  
  .gallery-controls button {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      padding: 5px 10px;
      border-radius: 20%;
      color: white;
      font-size: 1.6rem;
      width: 35px;
      opacity: 50%;
  }

  .gallery-controls button:hover {
      opacity: 100%;
  }

  /* Arrows on the side of the screen */
  .nav-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.1);
      border: none;
      padding: 10px 2px;
      border-radius: 15%;
      color: white;
      font-size: 1.4rem;
      width: 50px;
      z-index: 1100;
      cursor: pointer;
      opacity: 50%;
  }

  #prev {
      left: 20px;
  }

  #next {
      right: 20px;
  }

  #prev:hover, #next:hover {
      opacity: 100%;
  }

  #showCount{
    display: none; margin-right: 2px; font-size: 12px; width: 70px;
  }



    #img_prev {
        left: 20px;
    }

    #img_next {
        right: 20px;
    }

    #img_prev:hover, #img_next:hover {
        opacity: 100%;
    }



  .loading-bar {
      width: 100%;
      height: 5px;
      background: #eea6a6;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2000;
      display: block; /* Keep it block, and control visibility via JS */
      opacity: 0;
      transition: opacity 0.3s;
  }

  .loading-bar.active {
      opacity: 1;
  }

  .loading-bar.active::after {
      content: "";
      display: block;
      height: 100%;
      width: 0;
      background: #9c3457;
      animation: loading 4s linear forwards;
  }

  @keyframes loading {
      100% { width: 100%; }
  }


  .gallery-overlay.active {
      display: flex;
  }

  .gallery-image-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      width: 100%;
      width: 100vw; height: 100vh;
      position: fixed;
      z-index: 1000000;
  }

  .category-gallery { display: none; }

  .zoom-container {
      position: relative;
      display: inline-block;
  }

  .zoom-container img {
      display: block;
      max-width: 90vw;
      max-height: 80vh;
      object-fit: contain;
      transition: transform 0.3s ease;
  }

  .zoom-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.6);
      color: white;
      border: none;
      border-radius: 50%;
      padding: 10px;
      font-size: 1.5rem;
      cursor: pointer;
      z-index: 10;
      transition: opacity 0.3s ease;
  }

  .zoom-container:hover .zoom-icon {
      display: block;
  }

  


  /*
         Image Gallery Grid
    */

    .gallery-card {
        width: 100%;
        /* height: 280px; */
        border: 1px solid #eeeeee;
        border-radius: 0px;
        padding: 1px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: box-shadow 0.3s ease;
        margin-bottom: 30px;
      }
  
      .gallery-card:hover {
        /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      }
  
      .img-wrapper {
        height: 220px;
        overflow: hidden;
        border-radius: 0;
      }
  
      .gallery-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
        cursor: pointer;
      }
  
      .gallery-img:hover {
        transform: scale(1.5);
        cursor: pointer;
      }
  
      .img-caption {
        text-align: left;
        font-size: 15px;
        margin-top: 5px;
        padding: 10px 5px;
        cursor: pointer;
      }
  
      .gallery-card:hover .gallery-img,
      .img-caption:hover ~ .img-wrapper .gallery-img,
      .gallery-card:hover .img-caption:hover ~ .img-wrapper .gallery-img {
          transform: scale(1.5);
          cursor: pointer;
      }
  
      .gallery-card:hover .img-caption {        
        padding: 10px 5px;
      }
  
      .gallery-card:hover .img-caption:hover {     
        padding: 10px 5px;
        cursor: pointer;
      }
  
      .gallery-card:hover .img-caption:hover ~ .img-wrapper .gallery-img {
        transform: scale(1.5);
      }
  
      @media (max-width: 768px) {
          .gallery-card {
              width: 100%;
          }
      }
  
      @media (max-width: 576px) {
          .gallery-card {
              width: 100%;
          }
      }