@font-face {
  font-family: title;
  src: url(../IMG/font/Caveat-Bold.ttf);
}
@font-face {
  font-family: text;
  src: url(../IMG/font/ChelseaMarket-Regular.ttf);
}
:root {
  --primary-color: #ff9233;
  --secondary-color: #004477;
  --third-color: #2897b5;
  --fourth-color: #f4f4f4;
  --fifith-color: #2d323c;
  --sixth-color: #fd9f86;
}
.formContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--secondary-color);
  border-radius: 2rem;
  padding: 45px 45px;
  width: 500px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}
.formContainer h2 {
  color: var(--primary-color);
  font-size: 3rem;
  margin-bottom: 2rem;
  font-family: title;
}
.formContainer form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.formContainer form label {
  width: 100%;
  margin: 10px 0;
  border: none;
  font-size: 1.3rem;
  color: var(--fourth-color);
  font-family: text;
}
.formContainer form input {
  width: 100%;
  padding: 15px;
  outline: none;
  font-family: text;
  font-size: 15px;
  border: 0;
  transition: all 0.5s;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
form input:focus {
  border-radius: 10px;
  transform: scale(1.05);
}
form textarea {
  width: 100%;
  padding: 10px;
  outline: none;
  border: 0;
  font-family: text;
  font-size: 15px;
}

form textarea:focus {
  border-radius: 10px;
  transform: scale(1.02);
  transition: all 0.5s;
}
form button {
  padding: 15px;
  width: 100%;
  margin: 20px;
  font-family: title;
  font-size: 25px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 1rem;
  transition: all 1s;
}

form button:hover {
  background-color: var(--sixth-color);
  transform: scale(1.1);
  transition: all 0.3s;
}
@media only screen and (max-width: 768px) {
  .formContainer {
    width: 80vw;
  }
  .containerSectionLaranja {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--primary-color);
  }
}