/* 1. ESTILOS GERAIS */

body {

    font-family: 'Roboto', 'Segoe UI', sans-serif; /* Fonte moderna e legível */

    margin: 0;

    background-color: #f8f9fa; /* Fundo muito claro */

}

 

 

/* 2. ESTILOS DA SEÇÃO HERO - O FOCO DO ESTUDO */

.hero-section {

    background-color: #175696; /* Um fundo escuro para criar contraste */
    background-image: url("./img/giphy.gif");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff; /* Texto branco */

   

    /* Usamos Flexbox aqui para centralizar o container de conteúdo verticalmente.

     * Isso é útil se quisermos que a seção ocupe a tela inteira.

     */

    display: flex;

    align-items: center;

    justify-content: center;

   

    /* Define uma altura mínima para a seção, igual à altura da janela de visualização.

     * Isso faz com que a seção Hero ocupe a tela inteira verticalmente.

     */

    min-height: 100vh;

 

    /* Adiciona um padding para garantir que o conteúdo não cole nas bordas

     * em telas pequenas.

     */

    padding: 20px;

}

 

/* 3. O CONTAINER DO CONTEÚDO */

.hero-content {

    text-align: center; /* Centraliza todo o texto e o botão */

    max-width: 700px; /* Limita a largura máxima do texto para melhor legibilidade */

}

 

 

/* 4. ESTILOS DE TIPOGRAFIA - HIERARQUIA VISUAL */

.hero-title {

    /* Tamanho de fonte muito grande para ser o ponto de foco principal */

    font-size: 3.5rem; /* 56px */

   

    /* Peso da fonte mais grosso para dar impacto */

    font-weight: 700;

   

    line-height: 1.2; /* Espaçamento entre as linhas do título, caso ele quebre */

    margin-top: 0;

    margin-bottom: 20px; /* Espaço abaixo do título */

}

 

.hero-subtitle {

    font-size: 1.25rem; /* 20px */

    font-weight: 300; /* Peso mais leve para o texto de suporte */

    line-height: 1.6;

    margin-bottom: 40px; /* Espaço maior para separar o texto do botão */

   

    /* Cor um pouco mais suave que o branco puro para reduzir o contraste */

    color: #e9ecef;

}

 

 

/* 5. ESTILOS DO BOTÃO (CALL-TO-ACTION) */

.hero-button {

    /* ----- Estilos visuais do botão ----- */

    background-color: #007bff; /* Cor de destaque (azul) */

    color: #ffffff;

    border-radius: 5px; /* Cantos arredondados */

    text-decoration: none; /* Remove o sublinhado */

    font-weight: bold;

    font-size: 1rem;

   

    /* ----- Box Model para o botão ----- */

    /* O padding cria o "corpo" do botão ao redor do texto */

    padding: 15px 30px;

   

    /* ----- Animação suave ----- */

    transition: background-color 0.3s, transform 0.2s;

}

 

/* Efeito de hover para o botão */

.hero-button:hover {

    background-color: #0056b3; /* Um tom de azul mais escuro */

   

    /* Um pequeno efeito de "salto" para dar feedback */

    transform: translateY(-2px);

}

.button-flexbox{
    gap: 40px;
    display: flex;
    justify-content: center;
}

.button-flexbox a:last-child{
    background: none;
    border: 2px solid black;
}

.button-flexbox a:last-child:hover{
    background: rgba(0,0,0,0.3);
}