/* Define la clase de animación */
.fade-in {
    animation: fadeIn 1s forwards; /* Duración de 0.5 segundos */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Comienza invisible */
    }
    to {
        opacity: 1; /* Termina visible */
    }
}

.fade-out {
    animation: fadeOut 1s forwards; /* Duración de 0.5 segundos */
}

@keyframes fadeOut {
    from {
        opacity: 1; /* Comienza visible */
    }
    to {
        opacity: 0; /* Termina invisible */
    }
}

.readmore {
    display: flex;
    align-items: center;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    transition: 0.3s;
    font-weight: 700;
    font-size: 15px;
}
  
.readmore i {
    margin-left: 8px;
}