body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #ffeaf3, #fff7fa);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
  .header {
     margin-top: -100px;
    display: flex;
    align-items: center; /* vertically center logo and title */
    gap: 10px; /* space between logo and title */
  }

  .logo {
    height: 20rem; /* adjust as needed */
    width: auto;
    margin-top: -100px;
  }

  .title {
    font-size: 24px;
    margin: 0;
  }


.wrapper {
  width: 95%;
  max-width: 850px;
}

.booking-card {
  background: #1f5226;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  text-align: center;
  border-top: 6px solid #a1ff09;
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Header ---- */
header h1 {
  font-family: 'Playfair Display', serif;
  color: #fffb0a;
  font-size: 2em;
  margin-top:-80px;
  
}

.subtitle {
  font-size: 1em;
  color: #feffef;
 margin-top: -20px;
  font-style: italic;
}

/* ---- Headings ---- */
h2 {
  color: #fcec0e;
  font-family: 'Playfair Display', serif;
  font-size: 1.6em;
   margin-top: -10px;

}

.section-title {
  font-weight: 600;
  color: #f5e8e8;
  margin-top: -22px;
  margin-bottom: 15px;
  font-family: 'Poppins', sans-serif;
}

/* ---- Layout ---- */
.booking-section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
  align-items: flex-start;
  margin-top: -5px;
}

.calendar {
  flex: 1;
  min-width: 230px;
}

.calendar input[type="date"] {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #dddddd;
  font-size: 1em;
  cursor: pointer;
  transition: 0.3s;
  color: #080808;
}

.calendar input[type="date"]:hover {
  border-color: #8b8863;
}

/* ---- Form ---- */
.form {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input,
textarea {
  padding: 12px;
  border: 1px solid #7e7c0b;
  border-radius: 8px;
  font-size: 1em;
  font-family: 'Poppins', sans-serif;
  transition: 0.3s;
}

input:focus,
textarea:focus {
  border-color: #54d633;
  outline: none;
  box-shadow: 0 0 5px rgba(138, 214, 51, 0.3);
}

textarea {
  resize: none;
  height: 70px;
}

/* ---- Button ---- */
button {
  background-color: #f8b400;
  color: #000;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.5px;
}

button:hover {
  background-color: #b6aa7a;
  transform: scale(1.03);
}

/* ---- Note & Footer ---- */
.confirm-note {
  font-size: 0.95em;
  color: #fff6f6;
  margin-top: 8px;
  font-style: italic;
}

footer {
  margin-top: 30px;
  font-size: 0.95em;
  color: #ffffff;

  line-height: 1.7;
  border-top: 1px dashed #fffdfd;
  padding-top: 15px;
  font-family: 'Poppins', sans-serif;
}
footer a {
    color: white;               /* link color */
    text-decoration: none;      /* remove underline */
    transition: color 0.3s;     /* smooth hover effect */
  }

  footer a:hover {
    color: #ff69b4;             /* change link color on hover */
  }

@media (max-width: 650px) {
  .booking-section {
    flex-direction: column;
  }
  .calendar,
  .form {
    width: 100%;
  }
}