@import url("/styles/base/_base.css");
@import url("/styles/layout/_header.css");
@import url("/styles/layout/_main.css");
@import url("/styles/layout/_footer.css");
@import url("/styles/modules/menu.css");
@import url("/styles/modules/form.css");
@import url("/styles/modules/buttons/button-contacto.css");
@import url("/styles/modules/_nav.css");
@import url("/styles/state/_states.css");

.section-contacto {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.buttons-contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.section-form {
  display: flex;
  flex-direction: column;
  margin: 32px 0;
}
.arrows-body {
  visibility: hidden;
}
@media (min-width: 744px) {
  .section-contacto {
    padding: 0 50px;
  }
  .buttons-contacto {
    flex-direction: row;
  }
  .section-form {
    padding: 0 50px;
    align-items: center;
  }
}
@media (min-width: 1000px) {
  .section-contacto {
    padding: 0 150px;
  }
  .section-form {
    display: grid;
    grid-template-columns: 1fr 1fr;  
    padding: 0 150px;    
    margin: 100px 0;
  }
  .arrows-body {    
    visibility: visible;
  }
  .cta-form {
    width: 600px;
    font-size: 2.8rem;
    margin: 0 50px;
  }
}