@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Comforter+Brush&family=Heebo:wght@100;400;900&family=Lora&display=swap');

:root {

  /**
   * colores
   */

  --battleship-gray: hsl(0, 0%, 53%);
  --viridian-red: hsl(0, 82%, 31%);
  --silver-chalice: hsl(0, 0%, 69%);
  --mikado-yellow: hsl(139, 88%, 16%);
  --granite-gray: hsl(0, 0%, 40%);
  --independence: hsl(219, 20%, 32%);
  --spanish-gray: hsl(0, 0%, 61%);
  --oxford-blue: hsl(222, 46%, 17%);
  --black-coral: hsl(223, 8%, 44%);
  --eerie-black: hsl(210, 11%, 15%);
  --light-gray: hsl(0, 0%, 80%);
  --white-2: hsl(0, 0%, 98%);
  --white-1: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --jet: hsl(17, 90%, 31%);


  /**
   * typografia
   */
  --font-family1: 'Abril Fatface', cursive;
  --font-family2: 'Comforter Brush', cursive;
  --font-family3: 'Heebo', sans-serif;


  /**
   * transition
   */

  --transition-1: 0.15s ease;
  --transition-2: 0.35s ease;
  --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);

}



/************************************************/




.get-in-touch {
  max-width: 800px;
  margin: 50px auto;
  position: relative;

}

.get-in-touch .title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 3.2em;
  line-height: 48px;
  padding-bottom: 48px;
  color: #ffffff;
  background: linear-gradient(to right, #e73018, #6bcf74);
  background-clip: text !important;
}

.contact-form .form-field {
  position: relative;
  margin: 32px 0;
}

.contact-form .input-text {
  display: block;
  width: 100%;
  height: 36px;
  border-width: 0 0 2px 0;
  border-color: #5543ca;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
}

.contact-form .input-text:focus {
  outline: none;
}

.contact-form .input-text:focus+.label,
.contact-form .input-text.not-empty+.label {
  -webkit-transform: translateY(-24px);
  transform: translateY(-24px);
}

.contact-form .label {
  position: absolute;
  left: 20px;
  bottom: 11px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: #5543ca;
  cursor: text;
  transition: transform .2s ease-in-out;

}

.contact-form .submit-btn {
  display: inline-block;
  background-color: #000;
  background: linear-gradient(to right, #e73018, #6bcf74);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  width: 200px;
  cursor: pointer;
}


.submit-btn:hover {

  background-color: var(--jet);

}