/* css/hero.css */

/* Estilo principal da Seção Hero
*/
#hero {
    /* Caminho da Imagem:
      O '..' significa "subir um diretório".
      Do 'css/' subimos para a raiz, e então entramos em 'imagens/hero/'.
    */
    background-image: url('../imagens/hero/Foguete.png');
    
    background-size: cover;       /* Faz a imagem cobrir toda a seção */
    background-position: center;  /* Centraliza a imagem */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
    
    /* Garante que o texto seja branco (padrão do design) */
    color: var(--cor-light);
}

/* Estilo para o título (Ex: "MARKETING SOLUTIONS")
  Usamos a cor mais clara da paleta, que combina com o design
*/
.text-brand-hero {
    color: var(--cor-brand-navbar); /* #00DCDA */
}

/* Classe para o botão principal da Hero 
  (Reutilizado do design original)
*/
.btn-brand {
    background-color: var(--cor-brand);
    border-color: var(--cor-brand);
    color: var(--cor-light);
    font-weight: 600;
    padding: 0.75rem 1.5rem; /* Botão um pouco maior */
    border-radius: 30px; /* Bordas arredondadas como no design */
}
.btn-brand:hover {
    background-color: #00877e; /* Um tom mais escuro para o efeito :hover */
    border-color: #00877e;
    color: var(--cor-light);
}