/* Estilo base do mapa */
#map {
    width: 100%; /* O mapa ocupará 100% da largura do contêiner pai */
    max-width: 520px; /* Largura máxima de 520px */
    height: 210px; /* Altura padrão */
    margin-top: 20px;
}

/* Para telas menores, mantemos a altura */
@media (max-width: 520px) {
    #map {
        height: 210px; /* Altura constante para telas menores */
    }
}

/* Para telas de tablet */
@media (max-width: 768px) {
    #map {
        height: 180px; /* Reduz a altura para 180px em dispositivos menores */
    }
}

/* Para telas muito pequenas, como celulares */
@media (max-width: 480px) {
    #map {
        height: 150px; /* Reduz a altura para 150px em dispositivos muito pequenos */
    }
}



.container-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box-map {
    background-color: var(--primary-color);
    border-radius: 10px;

    padding-top: 15px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;

    color: #ffffff;
}