/* ==========================
   GALLERY HERO
========================== */

.gallery-hero {
  padding: 180px 20px 100px;

  text-align: center;

  background: #f8f8f6;
}

.gallery-hero-content {
  max-width: 900px;

  margin: auto;
}

.gallery-hero h1 {
  font-size: 72px;

  font-family: "Cormorant Garamond", serif;

  margin: 25px 0;

  color: #1f2937;
}

.gallery-hero p {
  font-size: 20px;

  line-height: 1.8;

  color: #5f6672;

  max-width: 720px;

  margin: auto;
}
/* ================= NAVBAR ================= */

header {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 999;
}

.navbar {
  background: #2f3442;
}
/* ================= FILTERS ================= */

.gallery-section {
  padding: 20px 20px 60px;

  background: #f8f8f6;
}

.gallery-filter {
  display: flex;

  justify-content: center;

  gap: 16px;

  flex-wrap: wrap;
}

.gallery-filter button {
  padding: 14px 28px;

  border: none;

  background: white;

  border-radius: 40px;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.35s;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.gallery-filter button:hover {
  background: #c7a66a;

  color: white;
}

.gallery-filter .active {
  background: #c7a66a;

  color: white;
}
/* ==========================================
   GALLERY GRID
========================================== */

.gallery-grid {
  max-width: 1400px;

  margin: 60px auto 120px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;
}

.gallery-card {
  position: relative;

  height: 340px;

  overflow: hidden;

  border-radius: 24px;

  cursor: pointer;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);

  transition: 0.4s;
}

.gallery-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(0,0,0,.18);

}
.gallery-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.7s;

  cursor: zoom-in;
}

.gallery-card:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  justify-content: flex-end;

  align-items: flex-start;

  flex-direction: column;

  padding: 28px;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.15),
    transparent
  );
}

.gallery-overlay span {
  color: white;

  font-size: 22px;

  font-family: "Cormorant Garamond", serif;

  font-weight: 700;
}
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-card {
    height: 280px;
  }
}
/* ==========================================
   LIGHTBOX
========================================== */

.lightbox {

  opacity:0;

transition:.35s ease;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.92);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 9999;
}

.lightbox img {
  max-width: 90%;

  max-height: 90%;

  border-radius: 18px;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.close-lightbox {
  position: absolute;

  top: 30px;

  right: 40px;

  font-size: 55px;

  color: white;

  cursor: pointer;

  transition: 0.3s;
}

.close-lightbox:hover {
  color: #c7a66a;
}