/* Reseteo de márgenes y altura */
html, body {
    height: 100%; /* Asegura que el cuerpo ocupe el 100% de la altura */
    margin: 0; /* Elimina márgenes por defecto */
    font-family: Arial, sans-serif; /* Fuente básica */
}

/* Contenedor principal */
#mainContainer {
    min-height: 100vh; /* Asegura que el contenedor principal ocupe al menos el 100% de la altura de la ventana */
    display: flex;
    flex-direction: column; /* Apila los elementos de forma vertical */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

/* Estilos generales para el footer */
#site-footer {
    width: 100%; /* Asegura que el footer ocupe todo el ancho disponible */
    position: relative; /* Posicionamiento relativo para ajustar elementos dentro del footer */
}

/* Contenido del footer */
.footer-content {
    background-color: #f8f8f8; /* Fondo gris claro */
    color: black; /* Color del texto */
    padding: 20px; /* Espacio alrededor del contenido */
    display: flex; /* Usar flexbox para alinear el logo y la información */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    align-items: flex-start; /* Alinear los elementos al principio */
}

/* Logo del footer */
.footer-left {
    display: flex;
    align-items: flex-start; /* Alinear elementos al inicio */
    flex: 1; /* Permite que el área del logo se ajuste */
    margin-bottom: 20px; /* Espacio inferior en pantallas pequeñas */
}

.footer-logo {
    width: 180px; /* Tamaño del logo */
    height: auto;
    margin-right: 20px; /* Espacio a la derecha del logo */
}

/* Información de contacto del footer */
.footer-contact {
    display: flex;
    flex-direction: row; /* Organiza la información de contacto en una fila */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    margin-left: 20px;
}

.contact-item {
    margin-right: 20px; /* Espacio entre los bloques de información */
    margin-bottom: 10px; /* Espacio inferior para evitar aglomeraciones */
}

.contact-item h3 {
    color: #91BF2C; /* Color de los encabezados */
    margin: 0; /* Eliminar márgenes por defecto */
    font-size: 18px; /* Tamaño de fuente para los encabezados */
}

.contact-item p {
    margin: 5px 0; /* Espacio entre las líneas de información */
    color: gray; /* Color del texto de información */
    font-size: 16px;
}

.contact-item a {
    color: #91BF2C; /* Color de los enlaces */
    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}

/* Parte inferior del footer */
.footer-bottom {
    background-color: #91BF2C; /* Fondo verde */
    color: white; /* Color del texto */
    padding: 10px 20px; /* Espacio interno */
    width: 100%; /* Asegura que el fondo cubra todo el ancho disponible */
    display: flex; /* Usar flexbox para alinear los elementos */
    justify-content: space-between; /* Distribuir espacio entre el texto y los íconos */
    align-items: center; /* Alinear elementos verticalmente al centro */
    margin-top: 20px; /* Espacio entre la información y el fondo verde */
}

/* Texto de copyright */
.footer-copyright {
    margin: 0; /* Eliminar márgenes por defecto */
    font-size: 14px;
}

/* Contenedor de redes sociales */
.social-container {
    display: flex;
    align-items: center; /* Alinear verticalmente el texto y los íconos de redes sociales */
}

.follow-us {
    margin-right: 15px; /* Espacio entre el texto "FOLLOW US" y los íconos */
    font-size: 14px; /* Tamaño de fuente */
    color: white; /* Color del texto */
}

/* Íconos de redes sociales en el footer */
#social-icons-footer-bottom {
    display: flex;
}

#social-icons-footer-bottom a {
    margin: 0 10px;
}

#social-icons-footer-bottom img {
    width: 24px;
    height: 24px;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Apilar los elementos verticalmente */
        align-items: center; /* Centrar los elementos */
        text-align: center; /* Alinear el texto al centro */
        padding: 10px; /* Ajustar el padding */
    }

    .footer-left {
        margin: 0; /* Eliminar margen */
        flex-direction: column; /* Apilar el logo y el contenido de contacto verticalmente */
        align-items: center; /* Centrar el contenido */
    }

    .footer-logo {
        margin: 0 0 10px 0; /* Ajustar el margen del logo */
        width: 150px; /* Reducir el tamaño del logo */
    }

    .footer-contact {
        margin-left: 0; /* Eliminar margen */
        padding-top: 10px; /* Ajustar el padding superior */
    }

    .contact-item {
        margin-right: 0; /* Eliminar margen derecho */
        margin-bottom: 15px; /* Añadir margen inferior entre los ítems de contacto */
    }

    .footer-bottom {
        flex-direction: column; /* Apilar el contenido verticalmente */
        align-items: center; /* Centrar el contenido */
    }

    .social-container {
        margin-top: 10px; /* Ajustar el margen superior */
    }

    /* Ajustes para contenedor */
    .container {
        padding: 10px; /* Ajustar el padding para pantallas pequeñas */
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 769px) {
    .container {
        padding: 20px; /* Padding más amplio en pantallas grandes */
    }
}