/* ====== GLOBAL ====== */
* {margin:0; padding:0; box-sizing:border-box;}
body {background:#111; color:#fff; font-family:sans-serif; line-height:1.6;}

/* ====== NAVIGATION ====== */
nav {
  display:flex;
  justify-content:center; 
  align-items:center; 
  gap:40px; 
  padding:15px 0; 
  background:#000; 
  border-bottom:1px solid #222;
}

nav a {
  text-decoration:none;
  color:#aaa;
  font-size:1.1rem;
  transition:0.3s;
}

nav a:hover, nav a.active {
  color:#fff;
  border-bottom:2px solid #fff;
}

/* ====== HEADER ====== */
header {
  text-align:center;
  padding:60px 20px;
  background: radial-gradient(circle at center, #222 0%, #111 80%);
}

header h1 {font-size:2.5rem; margin-bottom:10px;}
header p {font-size:1.2rem; color:#bbb;}

/* ====== FILTER ====== */
.filter {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin:40px 0;
  width:100%;
  text-align:center;
}

.filter button {
  background:transparent;
  border:2px solid #555;
  color:#ccc;
  padding:8px 18px;
  border-radius:25px;
  cursor:pointer;
  transition:all 0.3s;
  font-size:0.95rem;
}

.filter button:hover {border-color:#fff; color:#fff;}
.filter button.active {background:#fff; color:#000; border-color:#fff;}

/* ====== GALLERY ====== */
.gallery-section {margin:50px 20px;}
.gallery-section h2 {margin-bottom:20px; text-align:center; font-size:1.8rem; color:#fff;}
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  justify-items:center;
}
.gallery-item {
  background:#222;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform 0.3s;
  cursor:pointer;
}
.gallery-item img {width:100%; height:auto; object-fit:cover;}
.gallery-item p {padding:10px; color:#ccc;}
.gallery-item:hover {transform:scale(1.03);}

/* ====== FOOTER ====== */
footer {
  background:#000;
  text-align:center;
  padding:20px;
  font-size:0.9rem;
  color:#777;
  margin-top:60px;
  border-top:1px solid #222;
}

/* ====== RESPONSIVE ====== */
@media(max-width:768px){
  nav {
    flex-direction:row;  /* keep horizontal on mobile */
    flex-wrap:wrap;
    gap:20px;
  }

  .gallery {grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
}