/* Estilo automático para a página: contato */
#central {
  padding: clamp(60px, 8vw, 80px) 0;

  .central-title {
    color: var(--color-primary);
    margin-bottom: 40px;
    text-align: center;
  }

  .central-card {
    padding: 20px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 15px;
    border: 2px solid transparent;
    background:
      linear-gradient(var(--color-white), var(--color-white)) padding-box,
      var(--gradient-brand) border-box;
    height: 100%;

    .central-subtitle {
      color: var(--color-primary);
    }

    .central-text {
      color: var(--color-text);

      &:hover {
        color: var(--color-primary);
      }
    }
  }
}

#formulario {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 80px 0;

  .formulario-title {
    margin-bottom: 20px;
    text-align: center;
  }

  .formulario-subtitle {
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 30px;
  }

  .formulario-content {
    display: flex;
    flex-direction: column;
    gap: 16px;

    form {
      width: 100%;
    }

    .btn-form {
      justify-items: end;
    }
  }
}

@media (width <= 992px) {
  #central .row {
    row-gap: 20px;
    justify-content: center;

    .central-title {
      margin-bottom: 10px;
    }
  }
}

@media (width <= 768px) {
  #formulario {
    .formulario-content {
      .btn-form {
        justify-items: start;
        margin-top: 20px;
        p {
          width: 100%;
        }
      }
    }
  }
}