.contact-section{
    background: #000000;
}


@layer components {

  .contact-form-wrapper form {
    @apply max-w-5xl mx-auto space-y-8;
  }

  .contact-form-wrapper fieldset,
  .contact-form-wrapper .wpcf7-form {
    @apply grid lg:grid-cols-2 gap-4 lg:gap-8;
  }

  /* INPUTS */
  .contact-form-wrapper input[type="text"],
  .contact-form-wrapper input[type="email"],
  .contact-form-wrapper select,
  .contact-form-wrapper textarea {
    @apply w-full rounded-xl bg-white text-gray-900
           px-5 py-4 text-base lg:text-lg
           focus:outline-none focus:ring-2 focus:ring-primary;
  }

  /* CAMPOS GRANDES */
  .contact-form-wrapper textarea {
    @apply min-h-[12rem] col-span-full;
  }

  .contact-form-wrapper select {
    @apply col-span-full;
  }

  /* CAMPOS FULL */
  .contact-form-wrapper .col-span-full {
    @apply col-span-full;
  }

  /* BOTÃO */
  .contact-form-wrapper input[type="submit"],
  .contact-form-wrapper button {
    @apply btn btn-primary text-lg lg:text-3xl
           min-w-[16rem] min-h-[3.5rem]
           lg:min-h-[5rem]
           mx-auto block rounded-full
           shadow-lg;
  }

}

/* CONTAINER */
.cf7-form {
  max-width: 1000px;
  margin: 0 auto;
}

/* LINHAS */
.cf7-row {
  margin-bottom: 20px;
}

/* DUAS COLUNAS */
.cf7-row.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* INPUTS / SELECT / TEXTAREA */
.cf7-form input,
.cf7-form select,
.cf7-form textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 10px;
  border: none;
  background: #ffffff;
  font-size: 14px;
  color: #333;
  outline: none;
}

/* PLACEHOLDER */
.cf7-form input::placeholder,
.cf7-form textarea::placeholder {
  color: #9ca3af;
}

/* SELECT */
.cf7-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%236d38fc' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  cursor: pointer;
}

/* TEXTAREA */
.cf7-form textarea {
  min-height: 160px;
  resize: none;
}

/* BOTÃO */
.cf7-form input[type="submit"] {
  background: linear-gradient(90deg, #6d38fc, #7c4dff);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 16px 40px;
  cursor: pointer;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* HOVER BOTÃO */
.cf7-form input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(109,56,252,.4);
}

/* CENTRALIZAR BOTÃO */
.submit-row {
  display: flex;
  justify-content: center;
}

/* MOBILE */
@media (max-width: 768px) {
  .cf7-row.two-cols {
    grid-template-columns: 1fr;
  }
}