/* >>> CONTACT1 component */

._contact1-section input::placeholder {
  font-family: var(--font-sans-serif);
}

/* Estilo para o placeholder do textarea */
._contact1-section textarea::placeholder {
  font-family: var(--font-sans-serif);
}

._contact1-header{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

._contact1-header>div{
  flex: 1;
}

._contact1-cta{
  display: flex;
}

._contact1-content{
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

._contact1-body{
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
._contact1-body>div{
  flex: 1;
}

._contact1-infos{
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

._contact1-infos__item{
  font-weight: 400;
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

._contact1-infos__item span{
  color: var(--color-gray);
  font-size: 1.6rem;
  font-weight: 600;
}

._contact1-social{
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

._contact1-social a{
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center; 
  background-color: var(--color-secondary-dark);
  border-radius: 50px;
  color: var(--color-white);
  font-size: 3rem;
  transition: .3s all ease-in-out;
}

._contact1-social a:hover{
  background-color: var(--color-secondary);
  color: var(--color-white);
}

._contact1-form{
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

._contact1-form form{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

._contact1-field span{
  display: flex;
  /* 
  padding: 1rem 2.4rem;
  margin-top: .25rem;
   */
}

._contact1-field input[type=text],
._contact1-field textarea{
  border: 1px solid var(--color-gray);
  padding: 0 2.4rem;
  height: 5.2rem; 
  border-radius: 5rem;
  font-size: 1.6rem;
  font-weight: 300;
  width: 100%;
  font-weight: 500;
  outline: none;
  transition: .2s all ease-in-out;
}
._contact1-field textarea{
  width: 100%;
  min-height: 14rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-radius: 2rem;
  font-family: var(--font-sans-serif);
  font-weight: 500;
  outline: none;
  transition: .2s all ease-in-out;
}

._contact1-field input:focus,
._contact1-field textarea:focus{
  border-color: var(--color-primary);
}

._contact1-submit button{
  background-color: var(--color-secondary-dark);
  color: var(--color-clean);
  border-radius: 5rem;
  padding: 0 2.4rem;
  height: 5.2rem; 
  font-size: 1.8rem;
  border: none;
  cursor: pointer;
  transition: .3s all ease-in-out;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
._contact1-submit button:hover{
  background-color: var(--color-secondary);
  color: var(--color-white);
  gap: 1.6rem;
}
._contact1-submit button i{
  font-size: 2rem;
}

._contact1-cta a{
  background-color: var(--color-primary);
  color: var(--color-clean);
  border-radius: 5rem;
  padding: 0 2.4rem;
  height: 5.2rem; 
  font-size: 1.8rem;
  border: none;
  cursor: pointer;
  transition: .3s all ease-in-out;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
._contact1-cta a:hover{
  background-color: var(--color-secondary);
  color: var(--color-dark);
  gap: 1.6rem;
}

._contact1-success{
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
._contact1-success i{
  color: green;
  font-size: 2.2rem;
}

._contact1-map{
  width: 100%;
  height: 360px; 
  overflow: hidden;
  border-radius: 2.8rem;
  padding-top: 4rem;
}
._contact1-map iframe{
  width: 100% !important;
  height: 100% !important; 
  border-radius: 2.8rem;
}

/* responsive */
@media(min-width:820px){
  ._contact1-header{
    flex-direction: row;
    gap: 6rem;
  } 
  ._contact1-cta{
    justify-content: end;
  }
  ._contact1-body{
    flex-direction: row;
  }
  ._contact1-infos__item{
    font-size: 2rem;
  }
}


.meu-input.borda-vermelha {
  border: 2px solid red;
}

/* CONTACT1 component <<< */