/* ------------------------------------------------ */
/* GLOBAL */
/* ------------------------------------------------ */

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
background:#f5f7fa;
color:#333;
line-height:1.7;
overflow-x:hidden;
}


/* ------------------------------------------------ */
/* NAVIGATION */
/* ------------------------------------------------ */

.topnav{
position:fixed;
top:0;
width:100%;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(8px);
padding:14px;
text-align:center;
z-index:1000;
}

.topnav a{
color:white;
margin:0 16px;
text-decoration:none;
font-weight:500;
font-size:15px;
}

.topnav a:hover{
opacity:0.8;
}


/* ------------------------------------------------ */
/* HERO SECTION */
/* ------------------------------------------------ */

.hero{

min-height:95vh;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

color:white;

background:
linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)),
url("images/ios.jpg");

background-size:cover;
background-position:center;

padding:40px;

}


/* HERO TEXT */

.hero p{
font-size:22px;
letter-spacing:1px;
margin:10px 0;
}

.hero h1{
font-size:52px;
margin:10px 0;
letter-spacing:2px;
}

.hero h2{
font-weight:300;
font-size:22px;
margin-top:10px;
}


/* ------------------------------------------------ */
/* SLOW HERO FADE IN */
/* ------------------------------------------------ */

.hero p,
.hero h1,
.hero h2,
.countdown{

opacity:0;
transform:translateY(40px);

animation:heroFade 2.5s ease forwards;

}

.hero p{ animation-delay:0.5s; }
.hero h1{ animation-delay:1.2s; }
.hero h2{ animation-delay:2s; }
.countdown{ animation-delay:3s; }

@keyframes heroFade{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}


/* ------------------------------------------------ */
/* COUNTDOWN */
/* ------------------------------------------------ */

.countdown{

display:flex;
gap:25px;
margin-top:40px;
font-size:20px;

}

.countdown div{

background:rgba(255,255,255,0.15);

padding:18px 24px;

border-radius:10px;

backdrop-filter:blur(6px);

text-align:center;

min-width:80px;

}

.countdown span{
font-size:30px;
font-weight:600;
}


/* ------------------------------------------------ */
/* SCROLL ARROW */
/* ------------------------------------------------ */

.scroll-down{

position:absolute;
bottom:40px;

font-size:40px;
color:white;

animation:bounce 2s infinite;

cursor:pointer;

}

@keyframes bounce{

0%,20%,50%,80%,100%{
transform:translateY(0);
}

40%{
transform:translateY(-10px);
}

60%{
transform:translateY(-5px);
}

}


/* ------------------------------------------------ */
/* SECTIONS */
/* ------------------------------------------------ */

section{

max-width:1000px;
margin:auto;
padding:70px 30px;

}

h2{
text-align:center;
margin-bottom:35px;
}


/* ------------------------------------------------ */
/* CELEBRATION CARDS */
/* ------------------------------------------------ */

.reasons{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;

}

.reason{

background:white;

padding:35px;

border-radius:12px;

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

text-align:center;

font-size:22px;

font-weight:500;

}


/* ------------------------------------------------ */
/* EVENT DETAILS */
/* ------------------------------------------------ */

.event{
text-align:center;
font-size:26px;
margin-top:40px;
}

.party{
text-align:center;
margin-top:20px;
font-size:20px;
}

.location{
text-align:center;
font-size:34px;
margin-top:30px;
letter-spacing:2px;
}

.rsvp{
text-align:center;
margin-top:30px;
font-size:20px;
}


/* ------------------------------------------------ */
/* VIDEO */
/* ------------------------------------------------ */

.video-section{
text-align:center;
}

.video-section video{

max-width:520px;
width:100%;

border-radius:14px;

box-shadow:0 10px 25px rgba(0,0,0,0.25);

}


/* ------------------------------------------------ */
/* MAP */
/* ------------------------------------------------ */

.map iframe{

width:100%;
height:420px;

border:0;

border-radius:12px;

box-shadow:0 6px 18px rgba(0,0,0,0.15);

}


/* ------------------------------------------------ */
/* BUTTONS */
/* ------------------------------------------------ */

.button{

display:inline-block;

padding:14px 26px;

background:#1e88e5;

color:white;

border-radius:8px;

text-decoration:none;

font-weight:500;

margin:10px;

transition:0.2s;

}

.button:hover{

background:#1565c0;

}


/* ------------------------------------------------ */
/* TRAVEL GUIDE CARDS */
/* ------------------------------------------------ */

.info-section{

background:white;

border-radius:12px;

padding:35px;

margin-bottom:30px;

box-shadow:0 4px 15px rgba(0,0,0,0.06);

}


/* ------------------------------------------------ */
/* FLOATING RSVP */
/* ------------------------------------------------ */

.rsvp-button{

position:fixed;

bottom:30px;
right:30px;

background:#ff4081;

color:white;

padding:16px 26px;

border-radius:40px;

text-decoration:none;

font-weight:600;

box-shadow:0 6px 20px rgba(0,0,0,0.3);

z-index:1000;

transition:0.25s;

}

.rsvp-button:hover{

background:#e91e63;

transform:scale(1.05);

}


/* ------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------ */

footer{

text-align:center;

padding:30px;

background:#eef2f6;

margin-top:40px;

}


/* ------------------------------------------------ */
/* MOBILE */
/* ------------------------------------------------ */

@media(max-width:700px){

.hero h1{
font-size:36px;
}

.hero h2{
font-size:18px;
}

.countdown{
flex-wrap:wrap;
justify-content:center;
}

section{
padding:50px 20px;
}

}