/* Grid layout with 2 columns and 2 rows */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
            grid-template-rows: repeat(2, auto);  /* 2 flexible rows */
            gap: 10px; /* 10-pixel gap between grid cells */
            margin-top: 4px; /* Space above the grid */
            margin-bottom: 20px; /* Space below the grid */
            width: 100%; /* Grid takes full width of the container */
            max-width: 600px; /* Limit maximum width */
        }

        /* Style for the images in the grid */
        .image-grid img {
            width: 100%; /* Fill the grid cell's width */
            height: 100%; /* Fill the grid cell's height */
            object-fit: contain; /* Show the whole image without cropping */
            border: 1px solid #ccc; /* Optional border for visual distinction */
        }


    .top-layer {
      z-index: 10002; /* Ensures it's above all other elements */
      position: relative; /* Ensures elements within are relative to this layer */
    }

    #gallery img {
      cursor: pointer;
      border: 1px solid #ffba4d;
        }

            
.top-layer {
  z-index: 10002; /* Ensures it's above all other elements */
  position: relative; /* Ensures elements within are relative to this layer */
}
    

#lightbox {
  position: fixed; /* Keeps it in a fixed position relative to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* Ensures a semi-transparent background */
  z-index: 9999; /* A high value to keep it above other elements */
  display: none; /* Default to hidden */
  text-align: center;
  overflow-y: auto; /* Allows scrolling if needed */
}

#lightbox img {
    max-width: 90%;
    max-height: 70%;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-top: 125px;
  }
     
@media (max-width: 1024px) {
  #lightbox img {
    margin-top: 125px;
  }
 }

/* Close btn */
  .close-button {
  position: absolute;
  top:0;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-size: 50px;
  margin-top: 90px;
  z-index: 10000; /* Higher z-index for the close button */
    }    

@media (max-width: 1024px) {
  /* Adjust the close button position or visibility on smaller screens */
  .close-button {
  position: absolute;
  top:0;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-size: 50px;
  z-index: 10000; /* Higher z-index for the close button */
    }
  }

 /* Close btn changes color for mobile */
@media (max-width: 768px) {
  /* Adjust the close button position or visibility on smaller screens */
  .close-button {
        top: 27px;
        padding: 8px;
        right: 9px;
        position: absolute;
        color: white;
        padding: 10px;
        cursor: pointer;
        font-size: 50px;
        margin: 90px 0;
        background: #FF7A59;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        text-align: center;
    }
  }

  /* Navigation arrows positioned to avoid overlapping with the main image */
  .arrow {
    color: #fff;
    font-size: 75px;
    cursor: pointer;
    padding: 50px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
  }

  .arrow:hover {
    transform: translateY(-50%) scale(1.1);
  }

  #prev {
    left: 10px; /* Arrow position adjusted */
  }

  #next {
    right: 10px; /* Arrow position adjusted */
  }

 
  #thumbnails {
   /* display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0;*/
    padding: 15px;
  }

  #thumbnails img {
    width: 15%;
    max-width: 75px;
    cursor: pointer;
    transition: transform 0.2s ease;
    padding-right: 5px;
    padding-top: 5px;
    margin-top: 15px;
  }

  #thumbnails img:hover {
    transform: scale(1.1);
  }

  /* Hide arrows on smaller screens */
  @media (max-width: 768px) {
    .arrow {
      display: none;
    }
  }