/* style.css */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background: linear-gradient(135deg, #ffb6d9, #ffd6ec, #fff0f7);
  overflow-x:hidden;
  color:white;
}

.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  position:relative;
}

.glass-card{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(12px);
  padding:50px;
  border-radius:30px;
  text-align:center;
  max-width:700px;
  box-shadow:0 10px 40px rgba(0,0,0,0.15);
  animation:fadeIn 1.5s ease;
}

.glass-card h1{
  font-size:4rem;
  margin-bottom:10px;
  text-shadow:0 0 15px rgba(255,255,255,0.5);
}

.glass-card h2{
  font-size:2rem;
  margin-bottom:20px;
  color:#fff0f7;
}

.glass-card p{
  font-size:1.2rem;
  line-height:1.7;
  margin-bottom:30px;
}

button{
  padding:15px 35px;
  border:none;
  border-radius:50px;
  background:white;
  color:#ff4f9a;
  font-size:1rem;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  transform:scale(1.08);
  box-shadow:0 0 20px rgba(255,255,255,0.6);
}

.message-section{
  display:flex;
  justify-content:center;
  padding:80px 20px;
}

.message-card{
  background:white;
  color:#ff4f9a;
  max-width:800px;
  padding:40px;
  border-radius:25px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
}

.message-card h3{
  font-size:2rem;
  margin-bottom:20px;
}

/* REPLACE YOUR OLD .message-card CSS WITH THIS */

.message-card{
  max-width:850px;
  padding:50px;
  border-radius:30px;
  text-align:center;

  background:linear-gradient(
    135deg,
    rgba(255,255,255,0.95),
    rgba(255,240,247,0.95)
  );

  color:#ff4f9a;

  box-shadow:
    0 10px 35px rgba(255,105,180,0.18),
    0 0 25px rgba(255,255,255,0.4);

  border:2px solid rgba(255,255,255,0.5);

  backdrop-filter:blur(12px);

  animation:fadeIn 1.2s ease;
}

.message-card h3{
  font-size:3rem;

  margin-bottom:25px;

  background:linear-gradient(90deg, #ff4f9a, #ff8fc1);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:0 4px 10px rgba(255,105,180,0.15);
}

.message-card p{
  margin-bottom:22px;

  line-height:1.9;

  font-size:1.2rem;

  color:#c94f86;
}


/* OPTIONAL LITTLE FLOATING GLOW */

.message-card::before{
  content:"✨";

  position:absolute;

  top:-18px;
  right:25px;

  font-size:2rem;

  animation:floatSparkle 3s infinite ease-in-out;
}

.message-card{
  position:relative;
}


@keyframes floatSparkle{

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

  50%{
    transform:translateY(-8px);
  }

  100%{
    transform:translateY(0px);
  }

}


/* MOBILE */

@media(max-width:700px){

  .message-card{
    padding:35px 25px;
  }

  .message-card h3{
    font-size:2.2rem;
  }

  .message-card p{
    font-size:1.05rem;
  }

}

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

.gallery h2{
  font-size:3rem;
  margin-bottom:40px;
  color:white;
}

.cards{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
}

.card{
  width:220px;
  height:220px;
  background:rgba(255,255,255,0.18);
  backdrop-filter:blur(10px);
  border-radius:25px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:0.3s;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
}

.card:hover{
  transform:translateY(-10px) scale(1.03);
}

.card span{
  font-size:4rem;
  margin-bottom:15px;
}

.card h3{
  font-size:1.5rem;
}

footer{
  text-align:center;
  padding:40px;
  font-size:1.1rem;
}

.floating-heart{
  position:fixed;
  bottom:-50px;
  color:white;
  animation:floatUp linear forwards;
  pointer-events:none;
  z-index:999;
}

@keyframes floatUp{
  to{
    transform:translateY(-120vh);
    opacity:0;
  }
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(40px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:700px){

  .glass-card h1{
    font-size:2.7rem;
  }

  .glass-card{
    padding:35px 25px;
  }

  .gallery h2{
    font-size:2.2rem;
  }

}
/* Surprise Popup */

.surprise-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:2000;
  padding:20px;
  animation:fadeOverlay 0.5s ease;
}

.surprise-box{
  background:linear-gradient(135deg, #ff8fc1, #ffcce3);
  color:white;
  max-width:700px;
  width:100%;
  padding:50px 40px;
  border-radius:30px;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
  animation:popup 0.6s ease;
}

.surprise-box h1{
  font-size:3rem;
  margin-bottom:25px;
}

.surprise-box p{
  font-size:1.25rem;
  line-height:1.9;
  margin-bottom:18px;
}

.final-line{
  font-size:1.7rem !important;
  font-weight:bold;
  margin-top:25px;
}

#closeBtn{
  margin-top:20px;
  background:white;
  color:#ff4f9a;
}

@keyframes popup{
  from{
    transform:scale(0.7);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes fadeOverlay{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}
/* QUESTION POPUP */

.question-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:3000;
  animation:fadeOverlay 0.4s ease;
}

.question-box{
  background:linear-gradient(135deg, #ff8fc1, #ffcce3);
  padding:50px 40px;
  border-radius:30px;
  text-align:center;
  color:white;
  width:90%;
  max-width:600px;
  box-shadow:0 10px 40px rgba(0,0,0,0.3);
  animation:popup 0.5s ease;
}

.question-box h1{
  font-size:2.7rem;
  margin-bottom:20px;
}

.question-box p{
  font-size:1.4rem;
  margin-bottom:35px;
}

.question-buttons{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}

.question-buttons button{
  min-width:140px;
}
footer{
    color: black;
}
html{
  scroll-behavior:smooth;
}
.card{
  transition:0.3s;
}

.card:hover{
  transform:translateY(-10px) scale(1.05);
  box-shadow:0 10px 30px rgba(255,105,180,0.4);
}