@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

body{
font-family: Arial, sans-serif;
background:#EED5D2;
margin:0;
overflow-x:hidden;
}

h1, h2, h3, h4, h5, h6{
font-family: 'Great Vibes', cursive !important;
font-weight:bold;
}

header h1{
font-size:4em;
}

header{
background:#6E7460;
color:white;
padding:25px;
text-align:center;
}

nav a{
color:white;
margin:15px;
text-decoration:none;
font-weight:bold;
}

.container{
max-width:1000px;
margin:auto;
padding:40px;
}

.hero{
text-align:center;
padding:80px;
}

button{
background:#B88C81;
color:white;
padding:10px 20px;
border:none;
border-radius:5px;
}

.registry-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.card{
background:white;
padding:20px;
border-radius:10px;
}

.page-title{
text-align:center;
font-size: 48px;
color:#6E7460;
margin-bottom:40px;
}

.timeline{
display:grid;
gap:20px;
max-width:600px;
margin:auto;
}

.timeline-item{
background:white;
padding:20px;
border-left:5px solid #B88C81;
border-radius:8px;
}

.registry-img{
width:100%;
border-radius:8px;
margin-bottom:10px;
}

.price{
font-weight:bold;
color:#6E7460;
}

.reserved{
color:#B88C81;
font-weight:bold;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}

.gallery-item img{
width:100%;
border-radius:10px;
}

.caption{
text-align:center;
font-style:italic;
}

.form-container{
max-width:500px;
margin:auto;
}

.form-group{
margin-bottom:15px;
}

input, textarea, select{
width:100%;
padding:10px;
border-radius:5px;
border:1px solid #ccc;
}

.message-card{
background:white;
padding:20px;
border-radius:10px;
margin-bottom:15px;
}

.date{
font-size:12px;
color:#888;
}

.section{
margin-top:80px;
text-align:center;
}

.timeline{
display:grid;
gap:20px;
max-width:600px;
margin:auto;
}

.timeline-item{
background:white;
padding:20px;
border-left:5px solid #B88C81;
border-radius:8px;
}

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

.gallery-item img{
width:100%;
border-radius:10px;
}

.hero{
text-align:center;
padding:100px 20px;
}

.date{
font-size:22px;
color:#B88C81;
}

#countdown{
font-size:28px;
margin-top:20px;
color:#6E7460;
}

/* Floating flower petals */
.petals-container{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:9999;
overflow:hidden;
}

.petal{
position:absolute;
top:-60px;
opacity:0;
will-change:transform,opacity;
animation:petalFall linear infinite, petalSway ease-in-out infinite;
}

.petal svg{
width:35px;
height:auto;
filter:drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

.petal-1{ left:1%; animation-duration:10s,4s; animation-delay:0s,0s; }
.petal-2{ left:96%; animation-duration:12s,3.5s; animation-delay:1.5s,0.5s; }
.petal-3{ left:3%; animation-duration:14s,5s; animation-delay:3s,1s; }
.petal-4{ left:94%; animation-duration:11s,4.5s; animation-delay:0.8s,0.3s; }
.petal-5{ left:2%; animation-duration:13s,3.8s; animation-delay:5s,1.5s; }
.petal-6{ left:97%; animation-duration:9s,4.2s; animation-delay:2s,0.7s; }
.petal-7{ left:4%; animation-duration:15s,5.5s; animation-delay:7s,2s; }
.petal-8{ left:95%; animation-duration:10.5s,3.2s; animation-delay:4s,1.2s; }
.petal-9{ left:0%; animation-duration:12.5s,4.8s; animation-delay:6s,0.4s; }
.petal-10{ left:98%; animation-duration:11.5s,3.6s; animation-delay:3.5s,1.8s; }
.petal-11{ left:5%; animation-duration:13.5s,4.1s; animation-delay:8s,0.9s; }
.petal-12{ left:93%; animation-duration:10s,5.2s; animation-delay:1s,0.6s; }

@keyframes petalFall{
0%{
  transform:translateY(-60px) rotate(0deg);
  opacity:0;
}
5%{
  opacity:0.85;
}
90%{
  opacity:0.6;
}
100%{
  transform:translateY(110vh) rotate(360deg);
  opacity:0;
}
}

@keyframes petalSway{
0%,100%{
  margin-left:0px;
}
25%{
  margin-left:15px;
}
75%{
  margin-left:-15px;
}
}

/* Scroll fade-in float animation */
.float-in{
opacity:0;
transform:translateY(30px);
transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}

.float-in-visible{
opacity:1;
transform:translateY(0);
}