.card-body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
 }



 .card-body ul {
     margin-bottom: auto;
 }

 .card-body a:hover {
     text-decoration: underline;
 }

 .card-deck {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 }

 .card {
     width: 300px;
     /* Ajusta el ancho deseado de tus cartas */
     border: 1px solid #57b230;
     border-radius: 8px;
     padding: 16px;
     text-align: center;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     background-color: #ffffff;
     color: #333;
     /* Color de texto oscuro para el modo claro */

 }

 .card h2 {
     color: #555;
     /* Color de texto oscuro para los elementos h2 en el modo claro */
 }

 .card-header {
     background-color: #ffffff;
     /* Color de fondo para la cabecera de la tarjeta en el modo claro */
 }


 /* Estilos para las imágenes dentro de las cartas */
 .card img {
     max-width: 100%;
     /* La imagen no superará el ancho de la tarjeta */
     height: auto;
     /* La altura se ajustará proporcionalmente al ancho */
     display: block;
     margin: 0 auto;
     border-radius: 8px;
     /* Opcional: para añadir bordes redondeados a las imágenes */
 }

 /* Centrar imágenes en formato móvil */
 @media (max-width: 767px) {
     .card img {
         display: block;
         margin: 0 auto;
     }
 }

 h1 {
     text-align: center;
     margin-bottom: 20px;
 }




 body {
     background-color: #ffffff;
     color: #000000;
 }



 /* Estilos para las tarjetas */
 .card button {
     display: block;
     margin: 20px auto 0;
     padding: 10px 20px;
     background-color: #57b230;
     color: #000000;
     border: 2px solid #57b230;
     border-radius: 4px;
     cursor: pointer;
 }

 /* Opcional: Estilos adicionales para resaltar el botón al pasar el cursor sobre él */
 .card button:hover {
     background-color: #ffffff;
     color: #57b230;
 }

 /* Estilos para el texto dentro de las tarjetas */
 .card-body {
     padding: 1.25rem;
 }



 @media screen and (min-width:0px) and (max-width:767px) {
     .iframe-container iframe {
         height: 266px
     }
 }