.contact-container {
    display: flex;
    margin-bottom: 20px;
}

.title-contact{
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff; /* Color de fondo del contenedor */
    color: #031E54;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra para dar la sensación de flotar */
    transform: translate(0, -20px); /* Efecto de elevación */
    margin-top: 20px;
}

.title-contact span {
    margin-right: 10px; /* Espacio entre "Contáctanos" y el primer enlace */
}

.social-links {
    display: flex;
    align-items: center;
}

.social-links a {
    display: flex;
    color: #031E54;
    font-size: 25px;
    text-decoration: none;
    margin-right: 10px; /* Espacio entre los enlaces */
    margin-left: 10px;
}

.social-links a:hover{
    color: #c53c32;
}

.info-column {
    width: 30%;
    padding: 20px;
    box-sizing: border-box;
    
}

.info-block {
    margin-bottom: 20px;
    margin-right: 50px;
    border-bottom: 3px solid transparent; /* Configura un borde transparente de 3px en la parte inferior */
    background: linear-gradient(to right, transparent, #e7e7e7, transparent); /* Crea un gradiente lineal azul difuminado */
    background-clip: padding-box;
}

.block-title {
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.block-title i {
    flex-shrink: 0;
}

.block-details {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}

.map-column {
    width: 70%;
    margin-top: 40px;
}

#google-map {
    margin-top: 40px;
    height: 400px;
    width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra para dar la sensación de flotar */
    transform: translate(0, -20px); /* Efecto de elevación */
    border-radius: 20px;
}

@media(max-width:950px){
    .info-column {
        width: 40%;
    }

    .map-column {
        width: 60%;
    }
}

@media(max-width:750px){
    .info-column {
        width: 50%;
    }

    .map-column {
        width: 50%;
    }
}

@media(max-width:650px){
    .contact-container {
        display: block;
    }

    .info-column {
        width: 100%;
    }

    .map-column {
        width: 100%;
        margin-top: 10px;
    }
}