/* ====================================
   DEFINIÇÕES DE CORES E VARIÁVEIS RGB
   ==================================== */
:root {
    --primary-color: #678A24; /* Verde Principal (Mais Escuro) */
    --secondary-color: #93C44A; /* Verde Secundário (Médio/Claro) */
    --dark-color: #4D4D4D; /* Cinza Escuro (Texto, Fundo do Menu) */
    --light-color: #F7F7F7; /* Cinza Claro (Fundo das Seções) */
}

/* ====================================
   ESTILOS GERAIS
   ==================================== */
body {
    background-color: var(--light-color);
    color: var(--dark-color);
}

/* Fundo das Seções claras (sobrescreve o padrão do Bootstrap) */
.bg-light {
    background-color: var(--light-color) !important;
}

/* ====================================
   ANIMAÇÕES E TRANSIÇÕES
   ==================================== */

/* Botões e Destaques - Transição para Hover */
.btn-primary, .bg-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transition: all 0.3s ease-in-out; 
}

/* Efeito de Transição (Hover) nos Botões */
.btn-primary:hover {
    background-color: var(--secondary-color) !important; /* Mudar para verde mais claro */
    border-color: var(--secondary-color) !important;
    transform: scale(1.03); /* Pequena animação */
}

/* ====================================
   NAVEGAÇÃO E MENUS
   ==================================== */

/* Menu Superior (.menu-top) - Fundo #93C44A */
.menu-superior {
    background-color: var(--secondary-color) !important; 
    border-bottom: 1px solid var(--primary-color) !important; 
}

.menu-superior a {
    /* Links na cor #4D4D4D */
    color: var(--dark-color) !important; 
    font-weight: 500; 
    transition: color 0.3s;
}

.menu-superior a:hover {
    color: var(--dark-color); 
    opacity: 0.8;
}

/* Menu Principal (Navbar) */
.navbar-dark.bg-dark {
    background-color: var(--dark-color) !important;
}
/* Cor do destaque do logo e links ativos no menu principal */
.navbar-brand .text-secondary, .navbar-nav .nav-link.active {
    color: var(--secondary-color) !important; 
}

/* ====================================
   SEÇÃO PRINCIPAL (BANNER)
   ==================================== */

/* Banner Principal - Fundo #678A24 */
.banner-principal {
    /*background-color: var(--primary-color);*/
    background-image: url('images/banner.jpg');
    color: white;
    width: 100%;
    height: 600px;
    display: flex;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* Mockup/Imagem de destaque no Banner */
.mockup-destaque {
    height: 300px; 
    background-color: rgba(255, 255, 255, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ====================================
   RODAPÉ (FOOTER)
   ==================================== */

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

/* Títulos do rodapé em verde secundário */
footer h5 {
    color: var(--secondary-color) !important; 
}

/* Links do Rodapé */
.footer a {
    color: var(--light-color) !important;
    transition: color 0.3s;
}
.footer a:hover {
    color: var(--secondary-color) !important; /* Destaque em verde claro no hover */
}

/* ====================================
   OUTROS COMPONENTES
   ==================================== */
/* Títulos de Seção e Ícones em Verde Principal */
h2.text-primary, h3.text-primary, h4.text-primary, .text-primary {
    /* Garante que o elemento .text-primary use a cor #678A24 */
    color: var(--primary-color) !important;
}

/* Placeholder das Imagens (para contraste) */
.bg-secondary {
    background-color: var(--dark-color) !important;
}