body{
font-family:'Raleway',sans-serif;
background:#f6f7fb;
}

.hero{
position:relative;
height:80vh;
overflow:hidden;
}

.hero-img{
height:80vh;
object-fit:cover;
}

.hero-overlay{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:10;
padding:20px;
}

.hero-title{
font-family:'Playfair Display',serif;
font-size:3rem;
font-weight:700;
}

.hero-subtitle{
font-size:1.2rem;
opacity:0.9;
}

#wishSection{
padding-top:80px;
padding-bottom:80px;
}

.card{
border:none;
border-radius:18px;
box-shadow:0 10px 35px rgba(230, 43, 167, 0.932);
}

#wishWall .card{
transition:0.3s;
}

#wishWall .card:hover{
transform:translateY(-6px);
}

footer{
background:#a40ad3;
color:white;
}

/* MOBILE RESPONSIVE */

@media (max-width:768px){

.hero{
height:65vh;
}

.hero-img{
height:65vh;
}

.hero-title{
font-size:2rem;
}

.hero-subtitle{
font-size:1rem;
}

}

@keyframes gradientMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

.card{
border-radius:20px;
}

#wishWall .card{
border:none;
box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

footer{
background:#801f80;
color:white;
}
.hero-section{
padding:100px 0;
background:linear-gradient(135deg,#801f80,#801f80,#801f80,#801f80);
}

.hero-title{
font-family:'Playfair Display',serif;
font-size:3rem;
font-weight:700;
}

.hero-subtitle{
font-size:1.2rem;
margin-top:10px;
}

/* FRAME */

.hero-frame{
background:white;
padding:15px;
border-radius:25px;
box-shadow:0 25px 60px rgba(0,0,0,0.2);
display:inline-block;
}

.hero-photo{
width:100%;
max-width:420px;
border-radius:18px;
}

/* MOBILE */

@media(max-width:768px){

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

.hero-title{
font-size:2rem;
}

.hero-photo{
max-width:300px;
}

}
.hero-frame{
animation:float 5s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0px);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0px);}
}
.intro-screen{
position:fixed;
width:100%;
height:100vh;
background:#faf7f7;
color:white;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
z-index:9999;
}

.intro-box{
max-width:500px;
}

.private-message{
display:none;
height:100vh;
background:#fff7f8;
align-items:center;
justify-content:center;
}

.message-card{
max-width:600px;
padding:40px;
background:white;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,0.2);
text-align:center;
}

.love-note{
font-size:1.2rem;
line-height:1.7;
margin:20px 0;
}
/* DARK MODE */

body{
background:#000;
color:white;
transition:0.8s;
}


/* LIGHT MODE AFTER BUTTON */

body.lights-on{
background:#fff7fb;
color:#222;
}


/* INTRO SCREEN */

.intro-dark{

position:fixed;
width:100%;
height:100vh;

background:#f3eded;

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

}


.intro-card{

text-align:center;

max-width:500px;

}


.surprise-title{

font-size:3rem;
margin-bottom:30px;

}


.intro-text{

font-size:1.2rem;
margin-top:15px;

}


button{

margin-top:10px;

}
.private-message{
display:none;
height:100vh;
background:#fff7f8;
align-items:center;
justify-content:center;
position:fixed;
top:0;
width:100%;
z-index:1000;
}
/* All buttons default color */
button, .btn {
  background-color: #ff69b4 !important;  /* hot pink */
  color: white !important;
  border: none !important;
  transition: 0.3s;
}

/* Hover effect */
button:hover, .btn:hover {
  background-color: #ff85c1 !important; /* lighter pink on hover */
  color: white !important;
}

/* Optional: change specific button types if you want */
#lightBtn { background-color:#ff69b4 !important; }
#songBtn  { background-color:#ff69b4 !important; }
#noteBtn  { background-color:#ff69b4 !important; }
body {
  background: #ffe4f0; /* soft pink */
  color: #222;
  transition: 0.8s;
}
body.lights-on {
  background: #ffe4f0; /* pink when lights are on */
  color: #222;
}
.hero-section {
  background: linear-gradient(135deg,#801f80,#801f80); /* purple gradient */
}
/* Hero section text always white */
.hero-section .hero-title,
.hero-section .hero-subtitle {
    color: #ffffff !important; /* ensures text stays white */
}

/* Optional: if you use the framed photo hero */
.hero-frame .hero-title,
.hero-frame .hero-subtitle {
    color: #ffffff !important;
}
.hero-section .hero-title,
.hero-section .hero-subtitle {
    text-shadow: 1px 1px 5px rgba(0,0,0,0.4);
}
/* PRIMARY THEME */
:root{
--primary:#801f80;     /* purple */
--accent:#ff4da6;      /* pink */
}


/* HERO BACKGROUND */
.hero-section{
background:var(--primary) !important;
color:white !important;
}


/* HERO TEXT */
.hero-title,
.hero-subtitle{
color:white !important;
}


/* BUTTON COLOR OVERRIDE */
.btn,
button{
background:var(--accent) !important;
border:none !important;
color:white !important;
}
/* BUTTON HOVER */
.btn:hover,
button:hover{
background:#ff70b8 !important;
color:white !important;
}


/* MAIN PAGE BACKGROUND */
body.lights-on{
background:#fff5fb !important;
}
.romantic-btn{
background:#ff4da6;
color:white;
border:none;
}

.romantic-btn:hover{
background:#ff70b8;
}
.video-frame{

background:white;
padding:10px;
border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,0.25);

max-width:420px;
margin:20px auto;

}


.intro-card{

display:flex;
flex-direction:column;

align-items:center;

text-align:center;

max-width:600px;

margin:auto;

}