* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body, html {
  height: 100%;
  margin: 0;
  overflow-x: hidden; /* fallback or bottom half color */
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 88px; /* match navbar height */
  height: calc(98vh - 88px);
  left: 0;
  width: 100%;
  background: url('../assets/images/room-banner12.jpg') center center no-repeat;
  background-size: cover; /* ensures it fills the area without distortion */
  background-attachment: scroll; /* prevents weird fixed stretching */
  z-index: -1;
}
/* Base gallery */
    .gallery {
      --s: 150px; /* base size */
      --g: 10px;  /* gap */
      --f: 1.3;   /* hover scale factor */

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--s), 1fr));
      gap: var(--g);
      max-width: 100%;
      background: #fff;
      padding: 10px;
    }

    .gallery img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      cursor: pointer;
      transition: transform 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
    }

    /* Hover effect (desktop only) */
    @media (hover: hover) and (pointer: fine) {
      .gallery img:hover {
        filter: grayscale(0);
        transform: scale(var(--f));
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
        z-index: 1;
      }
    }

    /* Lightbox overlay */
    #lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.9);
      justify-content: center;
      align-items: center;
      z-index: 9999;
      flex-direction: column;
    }

    #lightbox img {
      max-width: 95%;
      max-height: 90%;
      border-radius: 8px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
      transition: transform 0.3s ease;
    }

    /* Navigation arrows */
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 3rem;
      color: white;
      background: rgba(0, 0, 0, 0.3);
      border: none;
      cursor: pointer;
      padding: 10px 15px;
      border-radius: 50%;
      user-select: none;
    }

    .nav-btn:hover {
      background: rgba(255, 255, 255, 0.3);
    }

    #prevBtn { left: 20px; }
    #nextBtn { right: 20px; }

    /* Close button */
    #closeBtn {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 2rem;
      color: #fff;
      cursor: pointer;
    }