.elementor-10 .elementor-element.elementor-element-e9f53a9{--display:flex;}.elementor-10 .elementor-element.elementor-element-44d34ec{--display:flex;}/* Start custom CSS for html, class: .elementor-element-91409d6 */.hero-duolingo{
  width:100%;
  background:#f2f2f2;
  padding:16px 0 24px;
  text-align:center;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

/* logo */
.hero-logo img{
  display:block;
  margin:0 auto 10px;
}

/* bloco do texto em 2 camadas */
.hero-headline-box{
  width:100%;
  margin:0;
}

/* topo (verde escuro) */
.hero-headline-top{
  background:#0b5c3b;      /* verde escuro */
  padding:12px 14px 10px;
}

/* faixa de baixo (verde diferente) */
.hero-headline-bottom{
  background:#0f8a67;      /* verde/teal mais claro */
  padding:10px 14px;
}

/* headline */
.hero-h1{
  margin:0;
  color:#fff;
  font-weight:900;
  font-size:1.08rem;
  line-height:1.25;
}

/* destaque amarelo como referência */
.hl-yellow{ color:#d4ff3f; }

/* subheadline (texto na faixa inferior) */
.hero-sub{
  margin:0;
  color:#ffffff;
  font-weight:700;
  font-size:.82rem;
  line-height:1.2;
}
.hero-sub b{ color:#d4ff3f; }

/* imagem central */
.hero-visual{
  margin:18px 0 14px;
  display:flex;
  justify-content:center;
}
.hero-image{
  width:88%;
  max-width:320px;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius:18px;
}

/* botão principal (verde com “peso” igual duolingo) */
.hero-cta-primary{
  display:block;
  margin:0 16px 8px;
  padding:14px 14px;
  border-radius:14px;
  background:#58cc02;
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
  text-decoration:none;

  /* peso visual */
  box-shadow: 0 4px 0 #46a702;
}

/* botão secundário azul (não cinza) */
.hero-cta-secondary{
  display:inline-block;
  margin-top:4px;
  color:#1a73e8;           /* azul “link” */
  font-weight:800;
  font-size:.78rem;
  text-decoration:none;
  letter-spacing:.2px;
  text-transform:uppercase;
}
.hero-cta-secondary:hover{
  text-decoration:underline;
}/* End custom CSS */