/* ===== Base ===== */
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:white;

  /* fallback color */
  background:#0b0f1a;
  position: relative;
  overflow-x: hidden;
}

/* background image layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("assets/bg.jpg") center/cover no-repeat;

  /* set to blur(10px) if you want it softer */
  filter: none;

  transform: scale(1.05); /* prevents blur edges */
  opacity: 0.55;
  z-index: -2;
}

/* dark overlay + vignette */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 50% 10%, rgba(80,120,255,0.18), transparent 60%),
    radial-gradient(700px 450px at 20% 60%, rgba(150,80,255,0.12), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(11,15,26,0.95));
  z-index: -1;
}

.container{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

/* ===== Nav ===== */
.nav{
  padding:14px 0;
  background: rgba(11,15,26,0.65);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
}

.brand{
  text-decoration:none;
  color:white;
  font-weight:700;
  letter-spacing:0.02em;
}
.brand span{color:#888}

/* Left nav links */
.nav-left{
  display:flex;
  align-items:center;
  gap:18px;
}

.navlink{
  color: rgba(255,255,255,0.75);
  text-decoration:none;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:13px;
}
.navlink:hover{ color:white; }

/* Right icons */
.nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  margin-left:14px;
  color:white;
  text-decoration:none;
  opacity:0.8;
  transition: all 0.2s ease;
}

.icon-link:hover{
  opacity:1;
  transform: translateY(-2px);
}

/* ===== Buttons ===== */
.btn{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  text-decoration:none;
  color:white;
  background: rgba(17,17,17,0.25);
}

.btn-primary{
  background:#2f5cff;
  border-color: rgba(47,92,255,0.35);
}

/* ===== Hero ===== */
.hero{
  padding:60px 20px;
  text-align:center;
  background: rgba(17,17,17,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  backdrop-filter: blur(10px);
}

.hero-full{
  min-height: 420px;      /* fixed height instead of viewport */
  padding: 80px 40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-title{
  font-size: clamp(44px, 6vw, 84px);
  line-height:1.05;
  margin: 0 0 14px 0;
  font-weight:800;
}

.hero-sub{
  max-width: 760px;
  margin: 0 auto 22px auto;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
}

.hero-cta{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-bottom: 26px;
}

/* ===== Filters + Search ===== */
.pills{margin-top:20px}
.pill{
  padding:8px 14px;
  margin:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
  color:white;
  cursor:pointer;
}
.pill.active{background:#2f5cff}

.search{
  margin-top:15px;
  padding:10px 12px;
  width:250px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(17,17,17,0.35);
  color:white;
  outline: none;
}

/* ===== Album Grid ===== */
.grid{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.card{
  background: rgba(17,17,17,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:15px;
  text-decoration:none;
  color:white;
  display:flex;
  flex-direction:column;
  overflow:hidden;

  /* hover + entrance animation */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  opacity:0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}

.card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.card:nth-child(1){ animation-delay: 0.05s; }
.card:nth-child(2){ animation-delay: 0.1s; }
.card:nth-child(3){ animation-delay: 0.15s; }
.card:nth-child(4){ animation-delay: 0.2s; }
.card:nth-child(5){ animation-delay: 0.25s; }
.card:nth-child(6){ animation-delay: 0.3s; }

@keyframes fadeUp{
  to{
    opacity:1;
    transform: translateY(0);
  }
}

.card img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
}

.card-meta{
  padding:20px 16px 24px;
  text-align:center;
}

.card-title,
.card-sub{
  line-height:1.4;
}

/* ===== Sections (About/Contact) ===== */
.section{
  margin-top: 50px;
  padding: 22px;
  background: rgba(17,17,17,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.section h2{
  margin:0 0 10px 0;
}

.section p{
  margin:0;
  color: rgba(255,255,255,0.85);
}

.section a{
  color:white;
}

/* ===== Album Page (Photos + Lightbox) ===== */
.photos{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:15px;
}

.photo img{
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:12px;
  cursor:pointer;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  justify-content:center;
  align-items:center;
}

.lightbox.open{display:flex}

.lb-img{
  max-height:80vh;
  max-width:90vw;
}

.lb-close,.lb-arrow{
  position:absolute;
  background:#2f5cff;
  border:none;
  color:white;
  padding:10px 14px;
  cursor:pointer;
  border-radius: 10px;
}

.lb-close{top:20px;right:20px}
.lb-arrow.left{left:20px}
.lb-arrow.right{right:20px}
.lb-count{
  position:absolute;
  bottom:20px;
  color: rgba(255,255,255,0.8);
}

/* ===== Footer ===== */
.footer{
  margin: 40px 0 10px 0;
  text-align:center;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}

/* ===== Centered Section Layout ===== */

.section-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.about-text{
  max-width:700px;
  width:100%;          /* ADD THIS */
  margin:0 auto 25px auto;
  line-height:1.7;
  opacity:0.9;
  text-align:center;
}

.contact-list{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.contact-item{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  font-size:18px;
  text-decoration:none;
  color:white;
  opacity:0.85;
  transition:all 0.2s ease;
}

.contact-item:hover{
  opacity:1;
  transform:translateY(-2px);
}

.contact-sub{
  max-width:600px;
  margin: 0 auto 30px auto;
  text-align:center;
  opacity:0.85;
  line-height:1.6;
}