/* Estilos para o hero com imagens de fundo */

/* Base para todos os heroes com imagem */
.hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #FFFFFF;
    padding: 80px 20px;
    text-align: center;
}

/* Overlay escuro para melhorar a legibilidade do texto */
.hero-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay preto semi-transparente */
    z-index: 1;
}

/* Colocar o conteúdo acima do overlay */
.hero-image .container {
    position: relative;
    z-index: 2;
}

/* Imagem 1 - Para a página inicial */
.hero-image-1 {
    background-image: url('../img/abstract-blue-tachnology-big-data-ai-background_1017-19684.jpg');
}

/* Imagem 2 - Para a página de tutoriais */
.hero-image-2 {
    background-image: url('../img/2cef0fe6d4b4bc6bca1e451a60bef67c.jpg');
}

/* Imagem 3 - Para a página sobre */
.hero-image-3 {
    background-image: url('../img/310b756831fadc082e2d21c3ea613065.jpg');
}

/* Imagem 4 - Para a página de carreira/checklist */
.hero-image-4 {
    background-image: url('../img/ed2f34bc0521a9a75ba5aa863765409c.jpg');
}

/* Estilização específica para texto no hero */
.hero-image h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-image p {
    font-size: 1.3rem;
    max-width: 800px;
    margin: 0 auto 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Responsividade */
@media (max-width: 768px) {
    .hero-image {
        padding: 60px 20px;
    }
    
    .hero-image h1 {
        font-size: 2.2rem;
    }
    
    .hero-image p {
        font-size: 1.1rem;
    }
}