/* === Gallery === */
.gallery-container { 
  position: relative; 
  max-width: 800px; 
  margin: auto; 
  overflow: hidden; 
}


.gallery-slides {
  display: flex;
  overflow-x: auto; /* Allow horizontal scrolling */
  scroll-snap-type: x mandatory; /* Enable snapping on the X-axis */
  scroll-behavior: smooth; /* Animate scrolling */
  -webkit-overflow-scrolling: touch; /* Momentum-based scrolling for iOS */

  /* Hide the scrollbar for a cleaner look */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.gallery-slides::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.slide {
  min-width: 100%;
  flex-shrink: 0;
  scroll-snap-align: center; /* Snap each slide to the center */
  box-sizing: border-box; /* Good practice to keep */
}

.slide img { 
  width: 100%; 
  max-height: 500px; 
  object-fit: contain; 
  border-radius: 0.5rem; 
  cursor: pointer; 
}


.gallery-nav {
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  background: rgba(0, 0, 0, 0.5);
  color: white; 
  border: none; 
  padding: 1rem; 
  cursor: pointer; 
  font-size: 1.5rem; 
  z-index: 10;
  border-radius: 50%; 
  width: 50px; 
  height: 50px; 
  display: flex;
  align-items: center; 
  justify-content: center;
}

.gallery-nav:hover { 
  background: rgba(0, 0, 0, 0.8); 
}
.prev { 
  left: 1rem; 
}
.next { 
  right: 1rem; 
}
.gallery-dots { 
  display: flex; 
  justify-content: center; 
  padding: 1rem; 
}
.dot { 
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
  background: #ccc; 
  margin: 0 5px; 
  cursor: pointer; 
}
.dot.active { 
  background: #2b2b2b; 
}


/* === Lightbox === */
.lightbox {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); 
  display: flex;
  align-items: center; 
  justify-content: center; 
  z-index: 9999;
}

.lightbox.hidden { 
  display: none; 
}
.lightbox-content { 
  position: relative; 
}
.lightbox-img { 
  max-width: 90vw; 
  max-height: 90vh; 
}
.lightbox-close {
  position: absolute; 
  top: 20px; 
  right: 20px; 
  background: rgba(0,0,0,0.7);
  color: white; 
  border: none; 
  padding: 0.5rem 1rem; 
  cursor: pointer; 
  font-size: 1.5rem;
}
.lightbox-nav {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0, 0, 0, 0.5);
    color: white; 
    border: none; 
    padding: 1rem; 
    cursor: pointer; 
    font-size: 1.5rem; 
    z-index: 10;
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    display: flex;
    align-items: center; 
    justify-content: center;
}
.lightbox-prev { 
  left: -60px; 
}
.lightbox-next { 
  right: -60px; 
}