/* Estilos para el contenedor de redes sociales */
.social-container {
    display: flex;
    justify-content: center; /* Centra los íconos horizontalmente */
    gap: 20px; /* Espaciado entre los íconos */
    margin-top: 20px;
}

/* Estilos para los íconos sociales */
.social-icon {
    width: 50px; /* Tamaño del contenedor del ícono */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Hace los íconos circulares */
    background-color: #f0f0f0; /* Fondo gris claro */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para los íconos */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Estilos para las imágenes dentro de los íconos */
.social-icon img {
    width: 70%; /* Ajusta el tamaño de la imagen dentro del ícono */
    height: auto;
}

/* Efecto hover para los íconos */
.social-icon:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el mouse */
    background-color: #e0e0e0; /* Cambia el color de fondo al pasar el mouse */
}

/* Centrar el contenido de Contactside */
.Contactside {
    display: flex;
    flex-direction: column; /* Asegura que los elementos estén en columna */
    align-items: center; /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente */
    text-align: center; /* Centra el texto */
    margin: 20px 0; /* Espaciado superior e inferior */
}

/* Centrar los elementos dentro de .social-container */
.social-container {
    display: flex;
    justify-content: center; /* Centra los íconos horizontalmente */
    gap: 20px; /* Espaciado entre los íconos */
    margin-top: 20px;
}