:root {

    --cor-amarelo: #f5b400;
    --cor-verde: #2bbf2b;
    --cor-azul: #1787b8;
    --cor-azul-escuro: #244c9a;

    /* secundárias */

    --cor-amarelo-claro: #f3e23a;
    --cor-verde-claro: #7ed321;
    --cor-verde-escuro: #0f5c2e;
    --cor-azul-claro: #2a9cc9;
    --cor-azul-marinho: #002b4d;

    --cinza-claro: #f5f5f5;

}
html, body {
    overflow-x: hidden;
}

.hero {
    min-height: 60vh;
    max-height: 650px;

    background:
        /* linear-gradient(
      rgba(23,135,184,0.85),
      rgba(47,179,68,0.75)
    ), */
        url("../img/banner-fundo-site-foto.png");

    background-size: cover;
    background-position: center top;
margin-right: -13rem;
    background-repeat: no-repeat;
}

.periodo {
    background: #96be3d;
    border-radius: 6px;
    padding: 9px 15px;
}

.periodo>p>svg {
    color: #115f1b;
    padding-right: 5px;
}

.periodo>p>i {
    color: #D2E28B;
    padding-right: 5px;
}

.periodo>p {
    font-size: 39px;
    color: #ffffff;
    margin: 6px 1px;
}

h3.titulo-periodo {
    color: #fff;
    font-weight: 800;
}

h2.periodo {
    font-size: 28px;
    color: #000 !important;
    text-transform: inherit !important;
    font-family: tahoma;
}
.titulo-col>p {
    font-size: 40px;
    font-weight: bolder;
    color: #fff;
    margin-top: 0;
    margin-bottom: 15px;
}

.periodo>p {
    color: #9ec544;
}
.periodo>p {
    font-size: 39px;
    color: #ffffff;
    margin: 6px 1px;
}
.topo-col.col-3 {
    margin-bottom: 50px;
    width: 22%;
    text-align: center;
}
.logo-censo{
    width:100%;
    max-width:750px;
    margin-top:90px;
    transform: scale(0.8);
}

.periodo>p>svg {
    color: #9ec544;
    padding-right: 5px;
}
h3.titulo-periodo {
    color: #fff;
    font-weight: 800;
}
.topo-col.col-3 {
    max-width: 25%;
    width: 25%;
}
.button-col {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
a.a-button {
    padding: 10px 8px;
    background: #205b9d;
    font-size: 15px;
    text-decoration: none;
    border-radius: 5px;
    color: #ffffff;
    font-weight: 500;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}


.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

@media (min-width: 992px) {
    .hero .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.hero-text {
    max-width: 550px;
}

.periodo-destaque {
    background-color: rgba(245, 180, 0, 0.9);
    /* amarelo forte com transparência */
    color: #000;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    max-width: 480px;
    /* flexbox para alinhar ícone e texto */
}

@media (max-width: 991px) {
    .periodo-destaque {
        justify-content: center !important;
    }
}

.hero-banner img {
    max-height: 115px;
    /* limita a altura do banner */
    width: auto;
}

.hero-img {
    object-fit: cover;
    object-position: center top;
    z-index: -1;
}

.bi {
    color: var(--cor-verde);
}

#contato {
    background-color: var(--cor-azul-escuro);
    color: white;
}

.btn-warning {
    background-color: var(--cor-amarelo);
    border-color: var(--cor-amarelo);
    color: #000;
}

.btn-primary {
    background-color: var(--cor-verde);
    border-color: var(--cor-verde);
}

.btn-primary:hover {
    background-color: #27993a;
    border-color: #27993a;
}

.navbar {
    background: var(--cor-azul-escuro);
}

.hero h1 {
    font-size: 2.8rem;
}

@media (min-width:1400px) {
    .hero {
        max-height: 500px;
    }
}

.hero h1 {
    font-size: 3rem;
}

.card {
    transition: 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}

section {
    scroll-margin-top: 80px;
}

#listaMapas li {
    cursor: pointer;
    transition: all .2s;
}

#listaMapas li:hover {
    background: #f1f1f1;
}

#listaMapas li.active {
    background: #0d6efd;
    color: white;
    font-weight: bold;
}

#mapaBox {
    display: none;
}


section.documentos div.titulo>h2 {
    font-size: 30px;
    text-align: center;
    margin-top: 0;
    color: #205b9d;
    text-transform: uppercase;
    padding-bottom: 15px;
}

section.documentos {
    background: #c0daf5;
    padding: 35px 0px;
}

h2 {
    color: #164194;
}