footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    background-color: #0a0e20;
    position: relative; /* Cambiar a static si no hay necesidad de posicionamiento */
    width: 100%; /* Asegura que ocupe todo el ancho */
    margin-top: auto; /* Empuja el footer hacia abajo cuando el contenido sea escaso */
    color: white;
}


footer .container {
    max-width: 1200px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Centrado horizontal */
}

footer .row {
    display: flex; /* Organización en filas flexibles */
    flex-wrap: wrap; /* Permite ajuste en dispositivos pequeños */
    justify-content: space-between; /* Espaciado entre columnas */
}

footer .col-md-4 {
    margin-bottom: 1.5rem; /* Espaciado inferior entre columnas */
}

footer h5 {
    font-weight: bold; /* Negrita para los títulos */
    margin-bottom: 1rem; /* Separación debajo de los encabezados */
}

footer p {
    color: #f8fafa; /* Texto en azul claro */
    margin-bottom: 1rem; /* Margen inferior entre párrafos */
}

footer  a {
    color: white; /* Enlaces blancos */
    text-decoration: none; /* Sin subrayado */
}

footer a:hover {
    text-decoration: underline; /* Subrayado al pasar el cursor */
}

footer .btn-primary {
    background-color: #003d99; /* Botón principal azul oscuro */
    border: none; /* Sin bordes */
    color: white; /* Texto del botón en blanco */
}

footer .btn-light {
    color: #0d3c66; /* Botón secundario con texto azul */
    background-color: white; /* Fondo blanco */
    border: none; /* Sin bordes */
}

footer .text-center {
    text-align: center; /* Alineación centrada para el contenido */
}

footer .d-flex {
    display: flex; /* Elementos dispuestos en línea */
    justify-content: center; /* Centrado horizontal */
}

footer .me-3 {
    margin-right: 1rem; /* Margen derecho entre iconos o botones */
}

footer .border-secondary {
    border-color: #6c757d !important; /* Color del separador horizontal */
}

footer .bi {
    font-size: 1.25rem; /* Tamaño de iconos (Bootstrap Icons) */
    color: white; /* Color blanco para iconos */
}
.icon-container i {
    font-size: 1.5rem;
    margin-right: 10px;
  }
  .footer .highlight {
    font-weight: bold;
  } 
@media (max-width: 576px) {
    footer .col-md-4 {
        text-align: center; /* Centra las columnas en dispositivos pequeños */
        margin-bottom: 2rem; /* Mayor separación en pantallas pequeñas */
    }

    footer .d-flex {
        flex-direction: column; /* Iconos y botones en columna */
        align-items: center; /* Centrado vertical en móviles */
    }

    footer .me-3 {
        margin-right: 0; /* Elimina margen en móviles */
        margin-bottom: 1rem; /* Espaciado inferior para elementos en columna */
    }
}