#hero_section{
  background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));
}
#hero_section h1{
  font-size: 2em;
  font-weight: 700;
  color: var(--texto-claro);
}
#hero_section h1 strong{
  font-size: 1.3em;
  font-weight: 700;
}
#hero_section h1 .destaque{
  font-size: 1.2em;

}
#hero_section p{
color: var(--texto-claro);
}
#hero_section a.btn1{
  font-weight: 500;
  margin: 10px ;
  padding: 7px 0;
  width: 280px;
  border-radius: 50px;
  color: var(--texto-claro);
  background-color: var(--bg-btn);
  border: 2px solid var(--bg-btn);
}
#hero_section a.btn1:hover{
  background-color: var(--bg-btn-hover);
}

@media (min-width: 1024px) {
  /* Aqui entram os estilos só para telas grandes (como notebooks e PCs) */

  #hero_section img{
    width: 900px;
    height: auto;
  }


}