.contact {
  padding: 50px 60px 80px;
  background-color: #e1e1e1;
}

.contact h2 {
  color: var(--mainColor);
  text-align: center;
  margin-bottom: 80px;
}

.contact .container {
  margin: 100px 0;
}

.contact .container form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

@media (max-width: 790px) {
  .contact .container form {
    flex-direction: column;
  }
}

.contact .container form .left, .contact .container form .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40%;
  gap: 10px;
}

@media (max-width: 790px) {
  .contact .container form .left, .contact .container form .right {
    width: 90%;
  }
}

.contact .container form span {
  color: red;
  text-align: left;
  width: 100%;
  opacity: 0.7;
  display: none;
}

.contact .container form .left span:not(:first-of-type) {
  margin-top: 10px;
}

.contact .container form .left span:not(:last-of-type) {
  margin-bottom: 10px;
}

.contact .container form .right span {
  margin-bottom: 10px;
}

.contact .container form input{
  width: 100%;
  height: 60px;
  padding: 10px;
  border-radius: 7px;
  font-size: 18px;
  border: none;
  background-color: rgb(255 255 255 / 60%);
}

.contact .container form .right textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  border-radius: 7px;
  font-size: 18px;
  border: none;
  background-color: rgb(255 255 255 / 60%);
  resize: none;
}

.contact .container form input:focus:not([type="submit"]),
.contact .container form textarea:focus {
  outline: 2px var(--mainColor) solid;
}

.contact .container form input[type="submit"] {
  background-color: var(--mainColor);
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  font-size: 25px;
  transition: opacity 0.3s ease;
}

.contact .container form input[type="submit"]:hover {
  opacity: 1;
}