/* FORMULÁRIO */
.form--contato {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
  padding: 40px;
  border-radius: 5px;
}

.form--contato :is(input, textarea, select) {
  padding: 1.3rem;
  margin: .5rem 0 0;
  border: none;
}

.form--contato input#anexo {
  padding: .72rem 1rem
}

.form--contato select {
  line-height: 100%;
  padding: .813rem 1rem
}

.form--contato label {
  text-transform: uppercase
}

.form--contato [type=submit] {
  position: relative;
  min-width: fit-content;
  padding: .875rem 1.5rem;
  color: var(--grey);
  font-size: .875rem;
  font-family: var(--primary-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid #0004;
  border-radius: .25rem;
  background-color: transparent;
  transition: var(--transition)
}

.form--contato [type=submit]:hover {
  color: #fff;
  background-color: transparent;
  border-color: var(--primary-color)
}

.form--contato [type=submit]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--primary-color);
  transition: var(--transition);
  z-index: -1;
  opacity: 0
}

.form--contato [type=submit]:hover::before {
  width: 100%;
  opacity: 1
}

.form--contato [type=submit]:active,
.form--contato [type=submit]:focus {
  color: #fff;
  border-color: var(--dark)
}

.form--contato .form__title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1.3em;
}

.form--contato .form__title h2 {
  margin: 0;
  color: var(--secondary-color);
  font-size: 2.5em;
}

.form--contato [type=submit]:active::before,
.form--contato [type=submit]:focus::before {
  background-color: var(--dark);
  width: 100%;
  opacity: 1
}

.form--contato .form__icon {
  display: block;
  position: relative;
  clear: both;
}

.form--contato .form__icon :is(input, textarea) {
  padding-right: 50px;
  background-color: #F4F4F4;
}

.form--contato .form__icon i {
  position: absolute;
  top: 0;
  display: block;
  z-index: 1;
  line-height: unset;
  margin-top: 15px;
  margin-bottom: 10px;
  padding: 12px 15px 22px 4px;
  right: 0;
  color: #B7B7B7;
}

/* INFORMAÇÕES DE CONTATO */
.contato .contato__item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
  width: 100%;
}

.contato .contato__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  padding: 1em;
  color: #fff;
  font-size: 1.5rem;
  background-color: #fff;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  transition: var(--transition);
  outline: transparent solid 2px
}

.contato .contato__icon i {
  color: var(--primary-color);
}

.contato .contato__icon:hover {
  background-color: var(--secondary-color);
  outline-color: var(--secondary-color);
  outline-offset: 0.375rem
}

.contato .contato__info .info__title {
  display: block;
  margin-bottom: .5rem;
  color: var(--secondary-color);
  font-size: 1.3rem;
}

.contato .contato__info :is(span, a):not(.social__link, .roll) {
  display: block;
  color: var(--grey);
  font-size: .875rem;
  line-height: 1.5;
  transition: var(--transition);
  word-break: break-all
}

.contato .contato__info a:hover {
  color: var(--primary-color)
}

.contato .contato__info a:active,
.contato .contato__info a:focus {
  color: var(--primary-color);
  text-decoration: underline
}

.contato .contato__social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem
}

.contato .social__link {
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid rgba(0, 0, 0, .25);
  border-radius: .25rem;
  overflow: hidden;
  position: relative;
  color: var(--grey);
  transition: var(--transition)
}

.contato .social__link .roll {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1rem;
  text-align: center;
  transition: .5s cubic-bezier(.175, .885, .32, 1.275)
}

.contato .social__link:hover,
.contato .social__link:hover .roll {
  color: #fff
}

.contato .social__link:hover {
  border-color: var(--secondary-color);
  background-color: var(--secondary-color)
}

.contato .social__link .roll:first-child {
  transform: translate(-50%, -50%)
}

.contato .social__link .roll:last-child {
  transform: translate(-50%, 100%)
}

.contato .social__link:hover .roll:first-child {
  top: 0;
  transform: translate(-50%, -100%)
}

.contato .social__link:hover .roll:last-child {
  transform: translate(-50%, -50%)
}

.contato .contato__left {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
}

.contato .contato__left h2 {
  color: #fff;
  background-color: var(--primary-color);
  border-radius: 10px 10px 0 0;
  text-align: center;
  margin: 0;
  padding: 2em 0;
}

.contato .contato__item {
  padding: 26px 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

@media screen and (max-width:576px) {
  .contato__left {
    order: 1
  }
}