/* Variáveis CSS para as cores da marca Stone Security */
:root {
    --stone-security-red: #DC3545; /* Um vermelho forte, similar ao danger do Bootstrap */
    --stone-security-dark: #212529; /* Preto ou quase preto */
    --stone-security-gray: #6c757d; /* Cinza para slogans/texto secundário */
}

/* Sobrescrevendo variáveis do Bootstrap para usar as cores da Stone Security */
.btn-primary, .bg-primary, .text-primary, .border-primary {
    --bs-primary: var(--stone-security-red);
    --bs-primary-rgb: 220, 53, 69; /* RGB do vermelho para variantes */
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important; /* Garante texto branco em fundos vermelhos */
}

.btn-primary:hover, .bg-primary:hover {
    --bs-primary-hover: #C82333; /* Um tom um pouco mais escuro para o hover */
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

.bg-dark {
    background-color: var(--stone-security-dark) !important;
}

.text-muted {
    color: var(--stone-security-gray) !important;
}

/* Navbar */
.navbar-brand {
    font-size: 1.8rem;
    font-weight: 700;
}
.navbar-brand img {
    height: 40px; /* Altura da logo */
    margin-right: 10px;
    /* Se a sua logo tiver um fundo branco e a navbar for escura, ela vai se misturar bem.
       Se a logo tiver um fundo transparente ou precisar de um efeito sutil:
       background-color: white; /* Adiciona um fundo branco sutil se a logo for vazada */
       /* padding: 5px; /* Adiciona um pouco de padding em volta */
       /* border-radius: 5px; /* Arredonda as bordas se tiver fundo */
    /* Caso a logo não fique bem, podemos adicionar uma sombra suave na imagem da logo: */
    /* filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); */
}
.navbar-brand .slogan {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--stone-security-gray); /* Cor do slogan */
    display: block; /* Quebra de linha para o slogan */
    line-height: 1; /* Ajusta o espaçamento */
}

/* ... (Mantenha o restante do seu CSS conforme o código anterior) ... */
/* Ícones de benefícios na seção bg-dark */
.benefits-section .bi {
    font-size: 3.5rem;
    color: var(--stone-security-red); /* Garante que os ícones fiquem vermelhos no fundo escuro */
}

.hero-section {
    /* Define a altura mínima para a seção. Essencial para a imagem aparecer */
    min-height: 500px; /* Ajuste este valor para controlar a altura da seção */
    
    /* Configurações para o conteúdo ficar centralizado verticalmente (Flexbox) */
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */

    /* Garante que o texto tenha cor branca (já está no HTML, mas é bom reforçar) */
    color: #fff;
    /* Adiciona uma sombra ao texto para melhor contraste com a imagem de fundo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 

    /* --- PROPRIEDADES DA IMAGEM DE FUNDO --- */
    background-image: url('../img/background/seguranca-da-informacao-teresina.jpg'); /* <<--- MUITO IMPORTANTE: Mude este caminho e nome do arquivo! */
    background-size: cover; /* A imagem cobrirá toda a área da seção */
    background-position: center center; /* Centraliza a imagem no meio da seção */
    background-repeat: no-repeat; /* A imagem não se repetirá */
    background-attachment: fixed; /* (Opcional) Faz a imagem de fundo ficar fixa ao rolar a página (efeito parallax) */
    /* Se preferir que a imagem role com a seção, use: background-attachment: scroll; ou remova a linha */

    /* Adiciona um overlay escuro semi-transparente para melhorar o contraste do texto (Opcional, mas recomendado) */
    position: relative; /* Necessário para posicionar o overlay */
    z-index: 1; /* Garante que o overlay esteja abaixo do conteúdo */
}

/* Estilo para o overlay (camada escura sobre a imagem) */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Cor preta com 50% de opacidade. Ajuste a opacidade (0.1 a 0.9) */
    z-index: -1; /* Posiciona o overlay atrás do conteúdo */
}


/* Ajustes para o texto e botão, se necessário, para ficarem acima do overlay */
.hero-section .container {
    position: relative; /* Garante que o container fique acima do overlay */
    z-index: 2; /* Posiciona o container acima do overlay */
    padding-top: 100px; /* Ajuste o espaçamento interno superior */
    padding-bottom: 100px; /* Ajuste o espaçamento interno inferior */
}

/* Estilos para o botão, se precisar de mais destaque */
.hero-section .btn-primary {
    font-size: 1.3rem; /* Aumenta o tamanho da fonte do botão */
    padding: 12px 30px; /* Ajusta o padding */
}

/* Opcional: Efeito hover para o botão */
.hero-section .btn-primary:hover {
    background-color: #0056b3; /* Cor mais escura no hover */
    border-color: #0056b3;
    transform: translateY(-2px); /* Pequeno efeito de elevação */
    transition: all 0.3s ease;
}