@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Exo+2:wght@700&display=swap');

:root {
    --primary-color: #091a3b;
    --secondary-color: #c09652;
    --accent-color: #ef7a03;
    --text-color: #091a3b;
    --bg-light: #f8f8f8;
    --font-main: 'DM Sans', sans-serif;
    --font-header: 'Exo 2', sans-serif;
}

/* Banner Principal */
.banner-quem-somos {
    position: relative;
    width: 100%;
    height: 60vh;
    background: url('/img/placeholder-1920x600.png') no-repeat center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-family: var(--font-header);
}

/* Efeito de escurecimento */
.banner-quem-somos .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(9, 26, 59, 0.75); /* Cor primária com opacidade */
    top: 0;
    left: 0;
}

/* Conteúdo do banner */
.banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.banner-content h1 {
    font-size: 2rem;
    font-weight: bold;
}

.banner-content p {
    font-size: 1.2rem;
    margin-top: 8px;
    font-family: var(--font-main);
}

/* Responsividade */
@media (max-width: 768px) {
    .banner-content h1 {
        font-size: 1.5rem;
    }

    .banner-content p {
        font-size: 1rem;
    }
}