.event-container {

    font-family: Arial, sans-serif;

    max-width: 800px;

    margin: 2rem auto 5rem auto;

    display: flex;

    align-items: start;

    gap: 20px;

}

.event-date {

    color: #fff;

    background-color: #1a7abe;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    position: relative;

    transition: all 0.6s ease;

    backface-visibility: hidden;

    top: 20px;

}



.event-date:hover {

    animation: spinVertical 0.6s forwards;

}



.event-date:hover::after {

    /*content: "\f073"; */

    font-family: 'Font Awesome 5 Free'; 

    font-weight: 900; 

    font-size: 24px;

    color: #333;

    display: block;

}



@keyframes spinVertical {

    from {

        transform: rotateY(0deg);

    }

    to {

        transform: rotateY(360deg);

    }

}



.event-content {

    flex: 1;

}

.event-title {

    font-size: 22px;

    font-weight: 600;

    margin-bottom: 5px;

    color: #292929;

}

.event-description {

    margin-bottom: 22px;

    color: #555;

    font-size: 16px;

}

.event-links a {

    text-decoration: none;

    margin-right: 15px;

}

.event-links a:first-child {

    color: #00bde6;

    font-weight: 600;

    text-decoration-line: underline;

    text-transform: uppercase;

    font-size: 12px;

}

.event-links a:last-child {

    color: #00bde6;

    font-weight: 600;

     text-decoration-line: underline; 

     text-transform: uppercase;

    /* letter-spacing: 2px;*/

    font-size: 12px;

    text-align: right;

    float: right;

}

.event-links a:last-child::before {

    content: "📅 ";

}



.txtDia {

    font-size: 40px;

    font-weight: 400;

    color: #fff;

    text-align: center;    

    line-height: 0.5;

}



.txtMes {

    font-size: 20px;

    font-weight: 400;

    color: #fff;

    text-align: center;  

    line-height: 0px;

}

}