@import "styles.css";

.welcome-contact {
  text-align: left;
  padding: 0px;
  margin: 100px;
}

.h1-contact {
  font-size: 2rem;
  text-align: center;
  text-decoration: none;
}

.h2-email-us {
  text-align: center;
  font-size: 1, 5rem;
}

.form-wrapper {
  width: 100%;
  display: grid;
  grid-template-areas:
    "contact-left   contact-right"
    "contact-bottom contact-bottom";
  gap: 2rem;
}

.form-wrapper input {
  padding: 10px;
  margin-top: 10px;
}

.contact-form-left,
.contact-form-right,
.contact-form-bottom {
  display: flex;
  flex-direction: column;
}

.contact-form-left {
  grid-area: contact-left;
}

.contact-form-right {
  grid-area: contact-right;
}

.contact-form-bottom {
  grid-area: contact-bottom;
  max-width: 70%;
  margin: 0 auto;
}

.contact-form-bottom textarea {
  width: 20rem;
  height: 150px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.cta-cta-large {
  color: #fff;
  background-color: #0a3641;
  text-align: center;
  font-size: 1rem;
  border: 1px solid white;
  cursor: pointer;
}

.first-and-last-name {
  padding-left: 260px;
}

.button-contact {
  display: flex;
  flex-direction: column;
  align-items: left;
  padding-left: 260px;
  margin-top: 30px;
}

.button {
  text-align: center;
}

.text-contact {
  text-align: center;
  font-size: 20px;
}

.form-error {
  display: none;
  color: red;
  font-size: 0.9rem;
  margin-top: 2px;
}

.nameDisplay {
  margin-top: 10px;
  font-size: 1.1rem;
}

.emailDisplay {
  margin-top: 10px;
  font-size: 1.1rem;
}

.phoneDisplay {
  margin-top: 10px;
  font-size: 1.1rem;
}

.orderDisplay {
  margin-top: 10px;
  font-size: 1.1rem;
}

.messageDisplay {
  margin-top: 10px;
  font-size: 1.1rem;
}

@media only screen and (max-width: 500px) {
  .welcome-contact {
    margin: 0;
  }

  .form-wrapper {
    display: block;
    padding: 10px;
  }

  .contact-form-bottom {
    align-items: center;
  }

  .cta-cta-large {
    width: 320px;
  }

  .text-contact {
    text-align: center;
    padding-left: 0;
  }

  .h1-contact {
    text-align: center;
    padding-left: 0;
  }

  .h2-email-us {
    text-align: center;
    padding-left: 0;
  }

  .contact-form-left {
    text-align: center;
  }

  .contact-form-right {
    text-align: center;
  }
}