.btn-personas { background-color: #17a2b8 !important; }
.btn-planeta { background-color: #28a745 !important; }
.btn-prosperidad { background-color: #ffc107 !important; }
.btn-paz { background-color: #6B1B9A !important ; }
.btn-asociaciones { background-color: #007bff !important; }
.btn-todos { background-color: #ffffff !important; }
.btn {
        font-size: 1.25rem;
        padding: 10px;
        border-radius: 10px; /* Agrega bordes redondeados */
        /*background-color: #4caf50;  Cambia el color de fondo */
        color: #fff; /* Cambia el color del texto a blanco */
    }
    .btn:hover {
        background-color: #00FF00 !important; /* Cambia el color de fondo al pasar el mouse */
    }
#botones {
    display: flex!important;
    justify-content: center; /* Centra los elementos en el eje horizontal */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea si no caben */
}

#botones .col-2 {
    margin: 0 5px 10px !important; /* Ajusta la distancia entre botones y margen inferior */
    padding: 1em;
    text-align: center !important; /* Centra el contenido de los botones */
    max-width: 150px !important; /* Define un ancho máximo para los botones */
    width: 100% !important; /* Ajusta el ancho al máximo definido */
}
h2 {
    color: #ffffff !important; /* Color blanco para el texto del título */
}
    
#personas {
    color: #FFFFFF; /* Color blanco para el texto del botón "personas" */
}

#planeta {
    color: #000000; /* Color negro para el texto del botón "planeta" */
}

#prosperidad {
    color: #ffffff; /* Color naranja para el texto del botón "prosperidad" */
}

#paz {
    color: #ffffff; /* Color púrpura para el texto del botón "paz" */
}

#asociaciones {
    color: #ffffff; /* Color azul para el texto del botón "asociaciones" */
}


#imagenes img {
    max-width: 100%;
    height: auto;
    margin-bottom: 25px; /*Ajusta el margen inferior para separar las imágenes */
    /*box-sizing: border-box;*/
    border-radius: 20px; /* Aplica bordes redondeados */
}

#imagenes a {
    /*display: inline-block; /* Asegura que los enlaces sean elementos en línea con espacio alrededor */
    width: 15%; /* Esto hará que cada imagen ocupe el 20% del ancho del contenedor, totalizando el 100% para las 5 imágenes */
    box-sizing: border-box; /*Asegura que el espacio para el borde y el relleno se incluyan en el 20% */
    margin-right: 10px;
}

#imagenes {max-width: 100%;/* Ajusta el ancho del contenedor según el tamaño de la ventana del navegador */
display: flex;
justify-content: center;
}