/* reservations  */
.reservations-wrapper {
  position: relative;
  text-align: center;
}

.hero-text-wrapper {
  width: 100%;
  color: white;
  text-shadow: 1px 1px black;
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero-text-wrapper h1 {
  font-size: 6vw;
  margin-bottom: 1vw;
}

.hero-text-wrapper h2 {
  font-size: 3.2vw;
  line-height: 4.5vw;
  width: 240px;
  margin: auto;
}

.reservation-form-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 20px auto;
}
.reservation-form-header img {
  width: 35px;
  flex-grow: 1;
  margin-right: 5px;
}

.reservation-form-header > .name {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 5.4vw;
  text-align: left;
}

.reservation-form-header > .name > .slogan {
  font-size: 3.2vw;
  font-weight: normal;
}

.reservation-form-wrapper {
  border: 2px solid black;
  width: 80%;
  max-width: 600px;
  margin: -13vw auto 50px auto;
  border-radius: 15px;
  background-color: rgb(236, 237, 237);
  color: black;
  padding: 10px;
  position: relative;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.reservation-input-wrapper {
  display: block;
  background-color: #fcfcfd;
  margin: 5px 0 10px 0;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid rgb(167, 169, 172);
}

label {
  display: block;
  font-size: 2vw;
}

.glocation,
.full-width {
  width: 97%;
}

.name-phone {
  display: flex;
  align-items: center;
}

.name-phone-item {
  flex-grow: 1;
  width: 12%;
}

.name-phone-input {
  flex-grow: 8;
  align-items: flex-end;
}

input {
  border: none;
  max-width: 95%;
}

input:focus {
  outline-width: 0;
}

textarea {
  border: none;
}

textarea:focus {
  outline-width: 0;
}

.errors {
  color: red;
  font-size: 3.4vw;
}

.errors p {
  margin: 2px;
}

.input-error {
  border: 2px solid red;
}

.reservation-input-wrapper input {
  margin: 7px;
}

::placeholder {
  color: rgb(167, 169, 172);
  font-size: 2.5vw;
}

.customer-wrapper {
  display: flex;
  gap: 10px;
}

.customer {
  flex-grow: 1;
}

.date-time-wrapper {
  display: flex;
  gap: 10px;
}

.date-time {
  flex-grow: 1;
}

.stop-wrapper {
  display: flex;
}

.stop {
  flex-grow: 1;
}

.submit-btn-wrapper {
  width: 100%;
  text-align: center;
}

.submit {
  margin: 10px auto;
  border: none;
  border-radius: 25px;
  color: white;
  padding: 10px 20px;
  background-color: rgb(0, 133, 205);
  cursor: pointer;
}

.after-submit {
  text-align: center;
  margin-bottom: 100px;
  animation-duration: 1s;
  animation-name: afterSubmit;
}

@keyframes afterSubmit {
  from {
    margin-top: initial;
  }

  to {
    margin-top: -55vw !important;
  }
}

@media (min-width: 1027px) {
  /* #international-message {
    background-color: green !important;
  } */
  .hero-text-wrapper h1 {
    font-size: 4vw;
    margin-bottom: 1.3vw;
  }

  .hero-text-wrapper h2 {
    font-size: 2vw;
    line-height: 3vw;
    width: 650px;
  }

  label {
    font-size: 1.2vw;
  }

  ::placeholder {
    font-size: 0.8vw !important;
  }

  .reservation-form-header > .name {
    font-size: 1.5vw;
  }

  .reservation-form-header > .name > .slogan {
    font-size: 0.8vw;
  }

  .reservation-form-wrapper {
    max-width: 500px;
    padding: 10px 80px;
  }

  ::placeholder {
    font-size: 1vw;
  }

  .errors {
    color: red;
    font-size: 1.2vw;
  }
}
@media (max-width: 1027px) {
  /* #international-message {
    background-color: red !important;
  } */

  .hero-text-wrapper h2 {
    font-size: 2.8vw;
    line-height: 3.7vw;
    width: 500px;
  }

  label {
    font-size: 1.8vw;
  }

  ::placeholder {
    font-size: 1.6vw;
  }

  .reservation-form-header > .name {
    font-size: 3.5vw;
  }

  .reservation-form-header > .name > .slogan {
    font-size: 1.8vw;
  }
}

@media (max-width: 850px) {
  /* #international-message {
    background-color: blue !important;
  } */
  .hero-text-wrapper h2 {
    font-size: 2.5vw;
    line-height: 3.2vw;
    width: 500px;
  }

  label {
    font-size: 2vw;
  }

  .reservation-form-header > .name {
    font-size: 3.5vw;
  }

  .reservation-form-header > .name > .slogan {
    font-size: 1.8vw;
  }
}

@media (max-width: 600px) {
  /* #international-message {
    background-color: orange !important;
  } */
  .hero-text-wrapper h2 {
    width: 360px;
  }

  label {
    font-size: 2.5vw;
  }

  ::placeholder {
    font-size: 2vw;
  }
}

@media (max-width: 450px) {
  /* #international-message {
    background-color: purple !important;
  } */

  .hero-text-wrapper h2 {
    width: 200px;
  }

  label {
    font-size: 3vw;
  }

  ::placeholder {
    font-size: 2vw;
  }
}