:root {
    --serenity-dark: #1A3026;   /* Esse verde-floresta escuro do banner */
    --serenity-creme: #C9B07A;  /* O tom dourado/bege do logo "Serenity & Co." */
    --serenity-white: #FFFFFF;
}

/* 1. Alterar o Header (Banner Principal) */
header, .hero-section {
    background-color: var(--serenity-dark) !important;
    color: var(--serenity-creme) !important;
}

header h1, header p {
    color: var(--serenity-creme) !important;
}

/* 1. Altera a cor dos links do menu no header */
header nav a, 
header a, 
.nav-link {
    color: var(--serenity-creme) !important;
}

/* 2. Altera a cor do nome da empresa (caso seja texto e não imagem) */
header .brand-name, 
header span {
    color: var(--serenity-creme) !important;
}

/* 3. Efeito de Hover (para o usuário saber onde está clicando) */
header nav a:hover {
    filter: brightness(1.2);
    text-decoration: underline;
}

/* 4. Caso o botão de menu (hambúrguer) no mobile apareça preto */
header button svg {
    stroke: var(--serenity-creme) !important;
    fill: var(--serenity-creme) !important;
}

/* Seleciona a tag footer e qualquer div dentro dela que tenha fundo azul/cinza */
footer, 
footer div, 
.footer-section {
    background-color: var(--serenity-dark) !important;
    color: var(--serenity-creme) !important;
}

/* Garante que o texto de copyright e links também mudem */
footer p, 
footer span, 
footer a {
    color: var(--serenity-creme) !important;
    opacity: 0.9;
}

/* Ajuste para a linha divisória (se houver) para não sumir no fundo escuro */
footer {
    border-top: 1px solid rgba(201, 176, 122, 0.2) !important; /* var(--serenity-creme) com opacidade */
}

/* Hover dos links no footer */
footer a:hover {
    filter: brightness(1.2);
    text-decoration: underline;
}

/* 3. Ajustar Botões para o estilo Serenity */
.btn-primary {
    background-color: var(--serenity-creme) !important;
    color: var(--serenity-dark) !important;
    border: none;
}

.btn-secondary {
    border: 1px solid var(--serenity-creme) !important;
    color: var(--serenity-creme) !important;
    background: transparent;
}

/* 4. Títulos e links */
h2, h3 {
    color: var(--serenity-dark);
}

a:hover {
    color: var(--serenity-creme);
}