.hero-pag-contacto-contenedor{
    background-image: url(../img/fondo.svg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 20px 0;
}

.mapa-contacto {
    display: flex;              
    justify-content: center;   
    align-items: center;        
    padding: 2rem 0;            
}

.mapa-container {
    width: 80%;                 
    max-width: 800px;          
    height: 500px;              
    border: 2px solid #ccc;     
    border-radius: 8px;         
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    overflow: hidden;         
}

.mapa-container iframe {
    width: 100%;                
    height: 100%;               
}