/* RESERVATION PAGE CSS */

.reservation-hero{
  position:relative;
  height:50vh;

  background-image:url('/images/royal_spice_reservation.jpg');
  background-size:cover;
  background-position:center;

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

.page-header{
  position:relative;
  z-index:2;
  color:white;
  text-align:center;
}

.page-header h1{
  font-size:40px;
  margin-bottom:1rem;
    color: var(--primary-red-color);
}

/* FORM */

.reservation-section{
  padding:5rem 1rem;
}

.reservation-container{
  /* max-width:700px; */
  margin:auto;
  background:white;
  padding:3rem;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.reservation-container h2{
  margin-bottom:2rem;
  text-align:center;
}

.form-group{
  display:flex;
  flex-direction:column;
  margin-bottom:1.5rem;
}

.form-group label{
  margin-bottom:0.5rem;
  font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea{
  padding:14px;
  border:1px solid #ddd;
  border-radius:5px;
  font-size:1rem;
}
#time{
  padding:10px;
  width:100%;
  margin-bottom:1rem;
  
}

#formMessage{
  margin-top:1rem;
  text-align:center;
  font-weight:bold;
}

/* MOBILE */

@media(max-width:768px){

  .hero-content h1{
    font-size:2.5rem;
  }

  .reservation-container{
    padding:1rem;
  }
  .reservation-section{
  padding:5rem 0rem;
}
}