/* --- GENERAL --- */
body {
margin: 0;
font-family: 'Poppins', sans-serif;
color: #fff;
background-color: #000;
}

/* --- VIDEO INTRO --- */
#intro {
position: relative;
height: 100vh;
overflow: hidden;
}

#intro video {
width: 100%;
height: 100%;
object-fit: cover;
}

#intro .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}

#intro h1 {
font-size: 3rem;
letter-spacing: 3px;
text-transform: uppercase;
}

.scroll-down a {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 2rem;
color: white;
text-decoration: none;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translate(-50%, 0);}
40% {transform: translate(-50%, 10px);}
60% {transform: translate(-50%, 5px);}
}

/* --- DETAILS SECTION --- */
#details {
position: relative;
background-image: url('../newimage.jpeg'); /* Replace with your image */
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
}

/* Container to stack overlay boxes */
#details .container {
display: flex;
flex-direction: column;
gap: 40px; /* space between details and RSVP */
width: 100%;
max-width: 650px;
text-align: center;
}

/* --- OVERLAY BOX STYLE --- */
.overlay-box {
background: rgba(0, 0, 0, 0.5);
padding: 40px 30px;
border-radius: 12px;
backdrop-filter: blur(5px);
border: 2px solid #ffcc70;
}

.overlay-box h2 {
font-size: 2rem;
margin-bottom: 20px;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffcc70;
}

.overlay-box p {
font-size: 1.2rem;
margin: 8px 0;
color: #f9f9f9;
}

.overlay-box a {
color: #ffcc70;
text-decoration: none;
font-weight: 500;
}

.overlay-box a:hover {
text-decoration: underline;
}

/* --- RSVP FORM --- */
.rsvp-form {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
padding: 12px;
border: none;
border-radius: 8px;
outline: none;
font-size: 1rem;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}

.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder {
color: #ccc;
}

.rsvp-form button {
padding: 12px;
border: none;
border-radius: 8px;
background-color: #ffcc70;
color: #000;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}

.rsvp-form button:hover {
background-color: #ffd891;
}