/* CONTACT SECTION */
.contact_section {
  width: 85%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 25vh auto;
}
.contact_section .section_title {
  width: 100%;
  text-align: center;
  border: none;
  padding-bottom: 0;
}
.contact_section .section_title_span {
  width: 60%;
  max-width: 300px;
  margin: 0 auto;
  display: inline-block;
}
.contact_section .section_desc {
  width: 100%;
  text-align: center;
  color: #999;
}
.contact_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 5vh;
  max-width: 500px;
}
.contact_form .error_msg_p {
  text-align: center;
}

.phone_input {
  flex-direction: row !important;
  flex-wrap: nowrap;
}
.message_input {
  grid-area: message;
}

.field {
  width: 100%;
  /* margin: 0 auto; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 5vh;
  /* overflow: hidden; */
}
.form_input {
  width: 100%;
  display: block;
  /* height: 80%; */
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); /* Ajusta los valores según tus preferencias */
  border-bottom: 1px solid #e1e1e1!important;
  padding: 6px;
}
.form_input::placeholder {
  color: #bbb;
  font-style: italic;
  font-size: clamp(1rem, 1vw + 0.1rem, 1.2rem);
}
textarea.form_input {
  height: 10rem;
  resize: none;
  border: none;
  outline: none;
}
.button_container {
  width: 100%;
  grid-area: button;
  text-align: center;
}
.form_button {
  width: 50%;
  max-width: 300px;
  margin: 0 auto;
  border: none;
  background-color: #000;
  color: #fff;
  padding: 10px 0;
  border-radius: 1rem;
  font-size: clamp(0.85rem, 1vw + 0.15rem, 1.3rem);
  transition: all .3s ease-in-out;
  border: 1px solid;
}
.form_button:hover{
  color: #000;
  background-color: #fff;
}
.spinner_container {
  background-color: #999;
  opacity: 0.75;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prefix_phone {
  width: 40%;
  margin-right: 15px;
  padding: 5px;
  cursor: pointer;
  color: #aaa;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #e1e1e1;
  background-color: transparent;
}
@media (min-width: 768px) {
  /* CONTACT SECTION */
  .contact_form { 
    margin-top: 10vh;
  }
  .field {
    height: 2.5rem;
  }
  .form_input {
    height: 100%;
  }
  .field.textarea_field {
    height: 100%;
    max-height: unset;
  }

  /*  */
}

@media (min-width: 1024px) {
  /* CONTACT SECTION */
  
  .contact_form{
    max-width: 750px;
  }
  /*  */
}