.date .important-dates {
    color: var(--blue-font);
    text-align: center;
    margin: 20px 0;
}

.date {
    margin: 10px auto;
    overflow-x: hidden;
}

.date .row {
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
    grid-column-gap: 20px;
    padding: 0px 20px;
}

.date .row .line {
    position: relative;
    background-color: var(--black-bg);
}

.date .row .content time {
    position: relative;
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 20px;
    background-color: transparent;
    color: var(--black-font);
}

.date .row .content time::before {
    position: absolute;
    content: ' ';
    width: 20px;
    height: 3px;
    background-color: var(--black-bg);
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.date .row .content .description {
    position: relative;
    background: var(--half-white-bg);
    box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    /* margin: 0px 0px 5px; */
    border: 1px solid var(--black-bg);
    border-left: 7px solid var(--black-bg);
    border-radius: 5px;
}

.date .row .content .description::before {
    position: absolute;
    content: ' ';
    width: 20px;
    height: 20px;
    background-color: var(--black-bg);
    top: -10px;
    left: 20px;
    clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 0% 50%);
}

.date .row .content .description h3 {
    color: var(--black-bg);
    margin-bottom: 5px;
}

.date .row .content .description p {
    color: var(--dark-gray-bg);
    line-height: 1.4;
}

.date .row .empty-column {
    grid-area: empty_column;
}

.date .row .line {
    grid-area: the_line;
}

.date .row .content {
    grid-area: the_contents;
    padding: 10px 0px;
}

.date .row:nth-child(odd) {
    grid-template-areas: ' empty_column the_line the_contents';
}

.date .row:nth-child(even) {
    grid-template-areas: ' the_contents the_line empty_column';
    text-align: right;
}

.date .row:nth-child(even) time::before {
    right: initial;
    left: 100%;
}

.date .row:nth-child(even) .description::before {
    left: initial;
    right: 20px;
}

.date .row:nth-child(even) .description {
    text-align: left;
}

.date .row .line .circle {
    content: ' ';
    position: absolute;
    width: 17px;
    height: 17px;
    background-color: var(--black-bg);
    border: 3px solid var(--black-bg);
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.date .row .line .start {
    top: -10px;

}

.date .row .line .end {
    bottom: 0;
}

/* Removed animations */
.row:nth-child(odd) .description,
.row:nth-child(even) .description {
    transform: none;
    opacity: 1;
}

.row:nth-child(odd) .show,
.row:nth-child(even) .show {
    transform: none;
    opacity: 1;
}


.date .buttons {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.date .buttons button {
    background-color: var(--half-white-bg);
    color: var(--black-font);
    border: none;
    padding: 10px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.date .buttons button:hover {
    background-color: var(--fade-red);
}

.date .buttons button.active {
    background-color: var(--red-bg);
    color: var(--white-font);
}

.date p.note {
    max-width: 900px;
    padding: 5vw;
    padding-bottom: 0;
    text-align: center;
}


@media(max-width: 770px) {

    .date .row:nth-child(odd),
    .date .row:nth-child(even) {
        grid-template-columns: 3px 1fr;
        grid-template-areas: 'the_line the_contents';
        text-align: left;
    }

    .date .row:nth-child(even) time::before {
        left: initial;
        right: 100%;
    }

    .date .row:nth-child(even) .description::before {
        right: initial;
        left: 20px;
    }

    .date .row .empty-column {
        display: none;
    }
}

@media(max-width: 520px) {

    .date .row:nth-child(odd),
    .date .row:nth-child(even) {
        grid-template-columns: 0;
        grid-column-gap: 0px;
    }

    .date .row .content time::before {
        display: none;
    }

    .date .row .line {
        display: none;
    }
}