/* Process Section*/
body {
    background-color: black;
    background-image: none;
    background-size: cover;
    background-position: top center;
    position: relative;
    color: white;
    margin: 0;
    padding: 0;
}

/* Desktop / Default Layout */
.timeline { 
    margin: 0 auto;
    max-width: 750px;
    padding-top: 200px;
    display: grid;
    grid-template-columns: 1fr 3px 1fr;
    font-family: "Fira Sans", sans-serif;
    font-size: 25px;
    font-weight: 600;
    color: black;
}

.timeline__paragraph {
    font-size: 17px;
}

.timeline__component {
    margin: 0 20px 20px 20px;
}

.timeline__component--bg {
    padding: 1.5em;
    background: #b9b9b9;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.timeline__component--bottom {
    margin-bottom: 0;
}

.timeline__middle {
    position: relative;
    background: #4D4DFF;
}

.timeline__point {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background: #4D4DFF;
    border-radius: 50%;
}

.timeline__point--bottom {
    top: initial;
    bottom: 0;
}

.timeline__date--right {
    text-align: right;
}

.timeline__title {
    margin: 0;
    font-size: 1.15em;
    font-weight: bold;
}

.timeline__paragraph {
    line-height: 1.5;
}

.timeline__date {
    color: white;
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {
    .timeline {
        display: block; 
        padding: 50px 20px;
        margin-top: 20px;
        font-size: 18px;
    }

    .timeline__component {
        margin: 20px 0;
    } 

    .timeline__middle,
    .timeline__point,
    .timeline__date {
        display: none; 
    }

    .timeline__date--right {
        text-align: left; 
    }
}