.eb-garamond-<uniquifier> {
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.nav-colored {
    background: linear-gradient(to right, #8dd6e4, #a7cae8, #c4bbea); /* Degradado de verde, azul y morado */
}



.card {
    width: 280px; /* Ancho de las tarjetas */
    margin: 0 auto; /* Centrar las tarjetas horizontalmente */
    margin-bottom: 20px; /* Espacio entre las tarjetas */
    border: 1px solid #ccc; /* Borde de las tarjetas */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    transition: box-shadow 0.3s ease; /* Transición suave de la sombra */
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra aumentada al pasar el mouse */
}

.card-link {
    text-decoration: none; /* Quita el subrayado del enlace */
    color: inherit; /* Color del texto del enlace */
}

.card-body {
    padding: 20px; /* Espaciado interno del cuerpo de la tarjeta */
}

.card-title {
    font-size: 20px; /* Tamaño de fuente del título */
    margin-bottom: 5px; /* Espacio entre el título y el texto */
    font-family: "EB Garamond", serif;
}

.card-text {
    font-size: 16px; /* Tamaño de fuente del texto */
    color: #666; /* Color del texto */
}

#applentes
{
    
    margin: 0 2em 0 0;
    width: 25%;
}

#appmedicamentos
{
    
    margin: 0 0 0 2em;
    width: 25%;
}

.container.mt-3 h3
{
    text-align: center;
    font-family: "EB Garamond", serif;
    font-size:40px;
    color: #4e79a7; /* Azul suave */

}



/* Estilos para dispositivos móviles (hasta 576px) */
@media (max-width: 576px) {
    .card {
        width: 100%; /* Ocupar todo el ancho del contenedor padre */
    }

    #applentes
    {
        margin: 0 0 1em 0;
        width: 80%;
    }

    #appmedicamentos
    {
        margin: 0 0 2em 0;
        width: 80%;
    }

    .container.mt-3 h3
    {

        font-size:26px;

    }


}

/* Estilos para tablet (de 577px a 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .card {
        width: 45%; /* Mostrar dos tarjetas por fila */
        margin-right: 5%; /* Espacio entre las tarjetas */
    }

    .card:nth-child(2n) {
        margin-right: 0; /* Eliminar el margen derecho de la segunda tarjeta en cada fila */
    }

    #applentes
    {
        margin: 0 0 1em 0;
        width: 80%;
    }

    #appmedicamentos
    {
        margin: 0 0 2em 0;
        width: 80%;
    }

    .container.mt-3 h3
    {

        font-size:26px;

    }
}

/* Estilos para tablet (de 577px a 768px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .card {
        width: 90%; /* Mostrar dos tarjetas por fila */
        margin-right: 5%; /* Espacio entre las tarjetas */
    }

    .card:nth-child(2n) {
        margin-right: 0; /* Eliminar el margen derecho de la segunda tarjeta en cada fila */
    }

    #applentes
    {
        margin: 0 0 1em 0;
        width: 80%;
    }

    #appmedicamentos
    {
        margin: 0 0 2em 0;
        width: 80%;
    }

    .container.mt-3 h3
    {

        font-size:32px;

    }
}