.atuacao {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
  }
  
.containerAtuacao {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1100px;
    width: 100%;
    gap: 40px; /* Espaço entre imagem e texto */
}

.imagemMapa {
    flex: 0.8;
    display: flex;
    justify-content: center;
}

.imagemMapa img {
    max-width: 100%;
    height: auto;
}

.conteudoTexto {
    flex: 1.2;
    padding: 0px;
    margin-top: 0; 
}

.tituloSecao {
    color: #bb2227;
    font-size: 16px;
    text-transform: uppercase;
    width: 100%;              /* Ocupa toda a largura do container */
    text-align: center;       /* Centraliza o texto */
    position: absolute;       /* Opcional: para fixar no topo da seção */
    top: 40px;                /* Ajuste de distância do topo da seção */

}
  

.tituloPrincipal {
    font-size: 22px;
    font-weight: 450;
    margin: 10px 0;
}

.descricaoTexto {
    font-size: 16px;
    line-height: 1.5;
    color: #565656;
}

@media (max-width: 768px) {
    .atuacao {
        height: auto; /* Remove a altura fixa para telas menores */
        padding: 20px 10px; /* Espaçamento para o conteúdo */
    }

    .containerAtuacao {
        flex-direction: column; /* Empilha imagem e texto */
        align-items: center; /* Centraliza os itens */
        gap: 20px; /* Reduz o espaço entre imagem e texto */
    }

    .imagemMapa {
        flex: 0; /* Remove a flexibilidade, faz a imagem ocupar apenas o necessário */
        width: 80%; /* Ajusta a largura da imagem */
        display: flex;
        justify-content: center;
    }

    .imagemMapa img {
        max-width: 100%; /* Garante que a imagem ocupe toda a largura disponível */
        height: auto;
    }

    .conteudoTexto {
        flex: 1; /* Flex de 1 para que o texto ocupe o restante do espaço */
        text-align: center; /* Centraliza o texto no mobile */
        padding: 0 20px; /* Adiciona padding lateral para melhor leitura */
    }

    .tituloSecao {
        font-size: 14px; /* Reduz o tamanho da fonte no título da seção */
        top: 0; /* Remove o deslocamento do topo */
    }

    .tituloPrincipal {
        font-size: 20px; /* Diminui o tamanho do título principal */
        margin: 10px 0;
    }

    .descricaoTexto {
        font-size: 14px; /* Diminui o tamanho da fonte do texto */
        line-height: 1.4; /* Ajusta o espaçamento entre as linhas */
    }
}