/* ===== GLOBAL ===== */

body{
margin:0;
font-family:'Inter', sans-serif;
background-image:url('/images/bg-paper.JPG');
background-size:cover;
background-repeat:repeat;
background-attachment:fixed;
color:#2b2b2b;
text-align:center;
}

h1,h2,h3{
font-family:'Playfair Display', serif;
color:#1f4d3a;
margin:0;
}

/* ===== HERO ===== */

.hero{
position:relative;
padding:120px 20px 80px;
overflow:hidden;
}

.hero h1{
font-size:48px;
margin-bottom:10px;
}

.hero h2{
font-size:22px;
font-weight:400;
margin-bottom:30px;
color:#555;
}

.couple{
width:220px;
max-width:80%;
margin:20px auto;
display:block;
filter:drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}

/* ===== HERO FLORALS ===== */

.hero::before{
content:"";
position:absolute;
left:-40px;
top:40px;
width:300px;
height:300px;
background:url('/images/floral-left.png') no-repeat;
background-size:contain;
pointer-events:none;
z-index:1;
}

.hero::after{
content:"";
position:absolute;
right:-40px;
top:40px;
width:300px;
height:300px;
background:url('/images/floral-right.png') no-repeat;
background-size:contain;
pointer-events:none;
z-index:1;
}

.hero h1,
.hero h2,
.couple,
#countdown,
.invite{
position:relative;
z-index:2;
}

/* ===== COUNTDOWN ===== */

#countdown{
display:flex;
justify-content:center;
gap:12px;
margin-top:30px;
flex-wrap:wrap;
}

#countdown div{
background:#ffffffcc;
padding:15px;
border-radius:10px;
min-width:70px;
box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

#countdown span{
font-size:28px;
font-weight:600;
display:block;
color:#1f4d3a;
}

#countdown p{
margin:5px 0 0;
font-size:13px;
color:#555;
}

/* ===== INVITE TEXT ===== */

.invite{
margin-top:30px;
font-size:18px;
max-width:600px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
}

/* ===== SECTION ===== */

.section{
padding:70px 20px;
max-width:900px;
margin:auto;
}

.section h2{
margin-bottom:25px;
font-size:32px;
}

.section p{
font-size:16px;
line-height:1.7;
margin-bottom:10px;
}

/* ===== DIVIDER ===== */

.divider{
height:70px;
background:url('/images/floral-divider.png') center no-repeat;
background-size:contain;
opacity:0.8;
}

/* ===== MAP EMBEDS ===== */

iframe{
margin-top:15px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* ===== MOBILE ===== */

@media (max-width:768px){

.hero{
padding-top:90px;
}

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

.hero::before,
.hero::after{
width:150px;
height:150px;
top:20px;
opacity:0.7;
}

#countdown span{
font-size:22px;
}

}