*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:#fffcf9;
color:#333;
overflow-x:hidden;
}

h1,h2,h3{
font-family:'Playfair Display',serif;
}

/* NAVBAR */
.navbar{
  position: fixed;
  top: 20px; /* slight floating effect */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar:hover{
  background: rgba(255,255,255,0.35);
}

.nav-menu a{
  color: #f8f8f8;
  font-weight: 600;
  transition: all 0.3s ease;
}

.nav-menu a:hover{
  color: #D4AF37;
}

/* HERO */

.hero{
height:100vh;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.bg-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-1;
}

.hero-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
color:white;
}

.hero-title{
font-size:3.5rem;
font-weight:400;
}

.hero-subtext{
letter-spacing:4px;
margin-bottom:15px;
font-size:.8rem;
text-transform:uppercase;
}

.hero-divider{
width:60px;
height:1px;
background:#D4AF37;
margin:20px auto;
}

.hero-date{
font-size:1.2rem;
letter-spacing:3px;
}

.amp{
color:#D4AF37;
font-style:italic;
}

/* GALLERY */

.gallery{
padding:80px 6%;
background:white;
}

.section-header{
text-align:center;
margin-bottom:40px;
}

.gold-text{
color:#D4AF37;
letter-spacing:4px;
font-size:.7rem;
text-transform:uppercase;
}

.grid-container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;
}

.photo-card{
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 20px rgba(0,0,0,.08);
transition:transform .6s ease, box-shadow .6s ease;
}

.photo-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 18px 35px rgba(0,0,0,.12);
}

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

/* DRESS CODE */

.dress-code{
padding:80px 20px;
background:#fdf8f0;
}

.dress-card{
border:1px solid #D4AF37;
padding:50px 25px;
text-align:center;
border-radius:20px;
max-width:520px;
margin:auto;
}

.ornament{
font-size:2rem;
color:#D4AF37;
margin-bottom:10px;
}

.palette-grid{
display:flex;
justify-content:center;
gap:18px;
margin-top:30px;
}

.color-circle{
width:50px;
height:50px;
border-radius:50%;
border:3px solid white;
box-shadow:0 4px 10px rgba(0,0,0,.1);
margin-bottom:6px;
}

.color-item span{
font-size:.65rem;
color:#888;
text-transform:uppercase;
}

/* LOCATION */

.location{
padding:70px 20px;
}

.location-wrapper{
display:flex;
gap:20px;
max-width:900px;
margin:auto;
}

.loc-card{
flex:1;
background:white;
padding:30px 15px;
border-radius:12px;
text-align:center;
box-shadow:0 6px 20px rgba(0,0,0,.06);
transition:transform .4s ease;
}

.loc-card:hover{
transform:translateY(-5px);
}

.qr-code{
width:100%;
max-width:90px;
margin-top:15px;
cursor:pointer;
transition:transform .4s ease;
}

.qr-code:hover{
transform:scale(1.08);
}

/* RSVP */

.rsvp{
padding:80px 20px;
background:white;
}

.rsvp-container{
max-width:500px;
margin:auto;
text-align:center;
}

.rsvp form{
display:flex;
flex-direction:column;
gap:14px;
margin-top:25px;
}

.rsvp input,
.rsvp select,
.rsvp textarea{
padding:15px;
border:1px solid #e5e5e5;
border-radius:8px;
font-size:15px;
background:#fafafa;
}

.rsvp input:focus,
.rsvp select:focus,
.rsvp textarea:focus{
border-color:#D4AF37;
outline:none;
background:white;
}

#sendBtn{
background:#D4AF37;
color:white;
padding:18px;
border:none;
border-radius:50px;
font-weight:700;
letter-spacing:2px;
cursor:pointer;
transition:all .4s ease;
}

#sendBtn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(212,175,55,.4);
}

.hidden{
display:none;
}

/* FOOTER */

.main-footer{
padding:70px 20px;
background:#1a1a1a;
color:white;
text-align:center;
}

.main-footer p{
font-size:.7rem;
color:#888;
}

.brand-footer{
display:block;
margin-top:10px;
font-size:1.4rem;
color:#D4AF37;
}

/* LOGO */

.logo{
height:35px;
}


/* COUNTDOWN */

.countdown{
display:flex;
justify-content:center;
gap:25px;
margin-top:25px;
}

.time span{
font-size:1.8rem;
font-weight:700;
color:#D4AF37;
display:block;
}

.time p{
font-size:.7rem;
letter-spacing:2px;
text-transform:uppercase;
}


/* LIGHTBOX */

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
display:none;
justify-content:center;
align-items:center;
z-index:2000;
}

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:10px;
}


/* FADE ANIMATION */

.fade-in{
opacity:0;
transform:translateY(40px);
transition:all 1.2s ease;
}

.fade-in.appear{
opacity:1;
transform:translateY(0);
}

.music-btn{
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: rgba(212,175,55,0.8);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.music-btn:hover{
  transform: scale(1.1);
}