/* Corrección de los íconos de Font Awesome */
.social_icon ul li a.fa {
    font-family: 'FontAwesome';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    text-align: center;
}

.social_icon ul li a.fa:before {
    font-size: 18px;
    display: block;
}

.social_icon ul li a.fa:hover {
    transform: translateY(-2px);
    background-color: #009FE3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Asegurarse que los íconos específicos se carguen correctamente */
.fa-facebook:before {
    content: "\f09a";
}

.fa-twitter:before {
    content: "\f099";
}

.fa-whatsapp:before {
    content: "\f232";
}

.fa-youtube:before {
    content: "\f16a";
}

/* Estilos para mejorar visibilidad en el header */
.header_top .social_icon ul li a.fa {
    font-size: 18px;
    margin-right: 5px;
}

/* Estilos para mejorar visibilidad en el footer */
footer .social_icon ul li a.fa {
    font-size: 18px;
    margin-right: 5px;
}