/* contenedor carrousel */
#carousel {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
}
/* contenido carrrousel */
#slide-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
  color: #000;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.slide {
  padding: 20px;
  scroll-snap-align: center;
  position: relative;
  min-width: 100%;
  text-align: center;
}
/* contenedor botones */
.slide-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
/* contenedor indicadores */
.slide-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  gap: 20px;
}
.slide-indicator {
  display: flex;
  justify-items: center;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  overflow: hidden;
}
.slide-indicator::after {
  content: "";
  border: 1px var(--primaryColor) solid;
  height: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.3s ease-out;
}
.slide-indicator.active::after,
.slide-indicator:hover::after {
  background-color: var(--primaryColor);
}

/* .active::after{
  background-color: var(--primaryColor);
} */

/* flechas */
.arrow {
  border: 1px black solid;
  color: black;
  text-decoration: none;
  cursor: pointer;
  padding: 10px;
}



.formulario{
  background-color: var(--white);
  border-radius: 15px;
  width: 60%;
}
.formGroup{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 10px;
  & input{
      font-family: var(--poppins);
  }

  & textArea{
      font-family: var(--poppins);
  }
}

.form50{
  width: 48%;
}
.formInput{
  width: 100%;
  padding: 15px;
  border-radius: 10px;
  border: 1px gray solid;
}
.formTextArea{
  resize: vertical;
}

.formInputIcon{
  position: relative;
  & input{
      padding-left: 40px;
  }

  & .inputIcon{
      position: absolute;
      top: 33%;
      left: 3%;
      color: var(--secondaryColor);
      font-weight: 700;
      font-size: 20px;
  }
}

.formSubmit{
  width: 100%;
  padding: 15px 10px ;
  background-color: var(--primaryColor);
  color: var(--white);
  border: none;
  border-radius: 15px;
  transition: all 0.3s ease-out;
  &:hover{
      transform: scale(103%);
  }
}

@media screen and (max-width: 430px) {

  .formulario{
    width: 100%;
    padding: 10px;
  }

  .form50{
    width: 100%;
  }

  .formGroup{
    gap: 10px;
  }
}