/* Estilos generales del footer */
.footer {
    background-image: url('../images/footer/banner3.png'); /* Cambia 'ruta/a/tu/imagen.jpg' por la ruta de tu imagen */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
    position: relative; /* Para usar con los pseudo-elementos */

    color: #fff;
    padding: 20px 0;
    font-family: Arial, sans-serif;
}

.container-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.menu-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.menu-footer .title-footer {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.menu-footer .contact-info,
.menu-footer .information,
.menu-footer .my-account,
.menu-footer .newsletter {
    flex: 1;
    margin-right: 20px;
}

.menu-footer ul {
    list-style-type: none;
    padding: 0;
}

.menu-footer ul li {
    margin-bottom: 10px;
}

.menu-footer ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.menu-footer ul li a:hover {
    color: #6ed6dd;
}

.copyright {
    text-align: center; /* Alinea horizontalmente el contenido */
    background-color: #000000;
    color: #fff;
    padding: 20px 0;
    font-family: Arial, sans-serif;
    margin-bottom: 20px;
}

.copyright p {
    margin: 0; /* Elimina el margen por defecto del párrafo */
}


/* Estilos específicos para la lista de redes sociales */
ul.redes1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the list items */
    margin: 0 auto; /* Center the list horizontally */
    padding: 0;
    max-width: 300px; /* Set a maximum width for the list */
}

ul.redes1 li.redes1 {
    list-style: none;
    margin-bottom: 10px; /* Reduce the margin between list items */
}

ul.redes1 li.redes1 a {
    text-decoration: none;
    display: block;
    width: 150px; /* Reduce the width of each list item */
    height: 40px; /* Reduce the height of each list item */
    background: #6ed6dd;
    text-align: left;
    transform: rotate(-0deg) skew(8deg) translate(0, 0);
    transition: transform 0.5s, box-shadow 0.5s, background-color 0.5s;
    box-shadow: -10px 10px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    color: #fff; /* Color de texto blanco por defecto */
    font-size: 18px; /* Tamaño de fuente aumentado */
    line-height: 40px; /* Ajuste para bajar el texto */
    text-align: center;
    left: -30px;

}


/* Cambios de color de fondo específicos */

ul.redes1 li.redes1 a.facebook:hover {
    background-color: #1877f2; /* Azul de Facebook al hacer hover */
}

ul.redes1 li.redes1 a.whatsapp:hover {
    background-color: #25d366; /* Celeste de whatsapp al hacer hover */
}

ul.redes1 li.redes1 a.google:hover {
    background-color: #dd4b39; /* Rojo de Google al hacer hover */
}

ul.redes1 li.redes1 a.instagram:hover {
    background-color: #9E37B8  ; /* Morado de Instagram al hacer hover */
}

@media (max-width: 768px) {
    .menu-footer .title-footer {
        font-size: 16px; /* Ajuste de tamaño para títulos en móvil */
    }

    .menu-footer .contact-info,
    .menu-footer .information,
    .menu-footer .my-account,
    .menu-footer .newsletter {
        margin-bottom: 30px; /* Añade un margen inferior para separar los bloques */
    }

    ul.redes1 {
        max-width: none; /* Eliminar el máximo ancho en móvil */
        width: 100%; /* Ocupar el ancho completo del contenedor */
        display: flex; /* Asegura que los íconos estén en fila */
        flex-wrap: wrap; /* Permite que los íconos se envuelvan si no caben en una fila */
        justify-content: flex-end; /* Alinea los íconos hacia la derecha */
        padding: 0;
        margin: 0;
    }

    ul.redes1 li.redes1 {
        list-style: none;
        margin-bottom: 20px; /* Aumenta el espacio entre los bloques */
    }

    ul.redes1 li.redes1 a {
        text-decoration: none;
        display: flex;
        align-items: center; /* Alinea verticalmente el contenido del enlace */
        justify-content: center; /* Alinea horizontalmente el contenido del enlace */
        width: 15vh; /* Ancho del botón */
        height: 40px; /* Alto del botón */
        font-size: 18px; /* Tamaño de fuente adecuado */
        line-height: 40px; /* Ajuste para centrar el texto verticalmente */
        background: #6ed6dd;
        color: #fff; /* Color del texto */
        text-align: center;
        box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.5);
        transition: background-color 0.3s, box-shadow 0.3s; /* Transiciones suaves para color y sombra */
    }
    
    ul.redes1 li.redes1 a:hover {
        background-color: #4bb3b3; /* Color de fondo al pasar el ratón */
        box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.7); /* Sombra más pronunciada al pasar el ratón */
    }
}