.contact-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-image: url('../imagenes/escudo.png'); /* Imagen de fondo */
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 40px;
    color: #f1f1f1;
    position: relative;
    flex-wrap: wrap;
}
@media (max-width:768px){
    .contact-section {
        background-size: 0%;
    }
}

.left-container {
    max-width: 50%;
}

.contact-title {
    color: #1a1a1a;
    font-size: 4rem; /* Título más grande */
    margin-bottom: 20px;
}

.contact-info {
    margin-bottom: 20px;
}

.contact-text {
    color: #1a1a1a;
    font-size: 1.5rem; /* Texto más grande */
    margin: 10px 0;
}

.contact-text a {
    color: #ccb370; /* Color dorado de los enlaces */
    text-decoration: none;
    transition: color 0.3s;
}

.contact-text a:hover {
    color: #e0a500; /* Color al pasar el ratón */
}

.social-media {
    display: flex;
    justify-content: flex-start;
    gap: 20px; /* Espacio entre los iconos */
    margin: 20px 0;
}

.social-media a {
    color: #1a1a1a; /* Color blanco para los iconos */
    font-size: 3rem; /* Iconos más grandes */
    text-decoration: none;
}

.iconos-redes-contact {
    transition: color 0.3s, transform 0.3s;
}

.iconos-redes-contact:hover {
    transform: scale(1.1); /* Efecto de agrandamiento al pasar el ratón */
}

/* Cambiar el color de los iconos al color original de cada red social */

.iconos-redes-contact.fa-facebook-square:hover {
    color: #1877f2; /* Color azul de Facebook */
}
.iconos-redes-contact.fa-twitter:hover {
    color: #1da1f2; /* Color azul de Twitter */
}
.iconos-redes-contact.fa-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); /* Color similar a instagram */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.iconos-redes-contact.fa-whatsapp:hover {
    color: #25d366; /* Color verde de WhatsApp */
}

/*Mapa iframe animacion style*/

.map-container {
    width: 100%;
    max-width: 600px; /* Tamaño máximo */
    margin-top: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 
                0 6px 6px rgba(0, 0, 0, 0.1); /* Sombra flotante */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.map-container:hover {
    transform: translateY(-2px); /* Efecto flotante al hacer hover */
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.4), 
                0 10px 10px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al hacer hover */
}

.responsive-iframe {
    width: 100%;
    border-radius: 5px;
    height: 300px; /* Manteniendo el tamaño especificado */
    border: 0;
}

/*logo style*/

.logo-container {
    position: relative;
    display: inline-block;
    max-width: 35%; /* Hacemos el logo más pequeño */
    text-align: center;
}

.logo-container img {
    max-width: 80%; /* Ajustamos el tamaño del logo */
    height: auto;
}

.tooltip {
    display: none;
    position: absolute;
    bottom: -30px; /* Ajusta según sea necesario */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 10; /* Asegura que el tooltip esté por encima de otros elementos */
}

.logo-container:hover .tooltip {
    display: block;
}

@media (max-width: 768px) {
    .contact-section {
        flex-direction: column;
        align-items: center;
        padding: 0px 15px;
    }

    .left-container, .logo-container {
        max-width: 100%;
    }
    
    .logo-container {
        margin-bottom: 20px;
    }

    .logo-container img {
        max-width: 50%;
    }

    .map-container {
        max-width: 100%;
    }

    .responsive-iframe {
        height: 200px; /* Ajuste del tamaño en pantallas pequeñas */
    }

    .contact-title {
        font-size: 2.5rem; /* Ajuste del tamaño en pantallas pequeñas */
    }

    .contact-text {
        font-weight: bolder;
        font-size: 1.2rem; /* Ajuste del tamaño en pantallas pequeñas */
    }
    
    .contact-text a {
        font-weight: bold;
    }
    
    .social-media a {
        font-size: 2.8rem; /* Iconos ligeramente más pequeños en pantallas pequeñas */
    }
    
    .tooltip {
        bottom: -15px;
    }
}