.essencia-section {
        position: relative;
    }

    .essencia-list li {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
    }

    #history{
        margin-top: 50pt;
    }

    .essencia-list i {
        margin-right: 12px;
        font-size: 1.2rem;
    }

    .image-shape-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image-shape-container .shape {
        position: absolute;
        background-color: rgb(var(--bs-primary-rgb)); /* Usa a cor azul primária */
        border-radius: 1rem;
    }

    /* Forma azul de trás, maior */
    .image-shape-container .shape-1 {
        width: 100%;
        height: 80%;
        opacity: 0.8;
        transform: rotate(-10deg);
    }

    /* Forma azul da frente, menor */
    .image-shape-container .shape-2 {
        width: 90%;
        height: 70%;
        opacity: 0.5;
        transform: rotate(15deg);
    }

    /* A imagem fica por cima das formas */
    .image-shape-container img {
        position: relative;
        z-index: 1;
    }
     .hero-full-screen {
        
        position: relative; /* Cria o contexto para posicionar os elementos filhos */
        background-image: url("/../images/background.jpg");
        background-size: cover; /* Garante que a imagem cubra todo o espaço */
        background-position: center center; /* Centraliza a imagem */
        display: flex;
        flex-direction: column;

        padding: 4rem;
    
    }

    .hero-logo {
        position: relative; /* Garante que fique acima da fita se necessário */
        z-index: 2;
    }

    .hero-logo img {
        max-width: 300px; /* Define um tamanho máximo para o logo */
        height: auto;
    }

    .hero-ribbon {
        position: absolute;
        top: 0;
        right: 0;
        width: 60%; /* Largura da fita */
        max-width: 800px;
        z-index: 1;
    }

    .hero-ribbon img {
        width: 100%;
        height: auto;
    }
    
    /* Ajuste para o padding-top do conteúdo principal */
    main {
        /* Remove o padding-top que era controlado pelo JS, já que o header agora é diferente */
        padding-top: 0 !important; 
    }
    /* === ESTILOS DO HEADER FIXO === */
#navMain {
    background-color: #0C1E32 !important; /* Cor de fundo sólida e permanente */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}
#navMain #logo {
    height: 40px; /* Tamanho único e fixo para o logo */
}
    .pilares-section {
        background-color: rgb(var(--bs-primary-rgb)); /* Usa a cor azul primária do seu site */
        color: white;
    }

    /* Sobrescreve a cor escura padrão dos títulos APENAS nesta seção */
    .pilares-section h1,
    .pilares-section h2,
    .pilares-section h3,
    .pilares-section h4 {
        color: white;
    }

    /* Deixa o texto do parágrafo um pouco mais suave para melhor contraste */
    .pilares-section p {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.95rem;
    }

    .pilar-icon {
        height: 50px;
        margin-bottom: 1.5rem;
        /* Este filtro transforma qualquer ícone em branco para combinar com o design */
        filter: brightness(0) invert(1);
    }
    #diferenciais .d-flex {
        align-items: flex-start; /* Alinha o ícone com o topo do texto */
    }

    #diferenciais .bi {
        /* Garante que o ícone não encolha */
        flex-shrink: 0;
    }


@media (max-width: 767px) {
  .pilares-section.hero-shape {
    clip-path: none;
    padding-bottom: 3rem; 
  }

  /* Garante que o texto e ícones não fiquem colados */
  #pilares .row.text-center > div {
    margin-bottom: 2rem;
  }

 
}