.container  {
padding: 2rem;
margin: 0 auto;
max-width: 800px;
text-align: justify;
line-height: 1.5;
font-weight: 400;
color: rgb(120, 113, 109);
padding-top: 2rem; 
}

.top-section{
text-align: center;
max-width: 600px;
margin: 0 auto;
}

.timeline {
position: relative;
min-height: 150px;
}

.line {
position: absolute;
z-index: 1;
left: calc(50% - 1px);
width: 2px;
top: -50px;
bottom: -50px;
background-color: rgb(49, 39, 131);
display: none;
}

.line:before,
.line:after {
position: absolute;
display: block;
content: '';
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: rgb(49, 39, 131);
left: 50%;
transform: translateX(-50%);
}

.line:before {
bottom: 0;
}

.section_txt {
display: flex;
opacity: 0;
transform: translateX(-100%);
transition: 600ms ease;
position: relative;
z-index: 2;
margin: 50px 0;
padding: 1rem;
align-items: center;
min-height: 300px;
}

.section_txt:nth-child(odd){
flex-direction: row-reverse;
transform: translateX(100%);
}

.bead {
position: absolute;
display: block;
height: 1rem;
width: 1rem;
border-radius: 50%;
background-color: rgb(49, 39, 131);
left: 50%;
top: 20%;
transform: translateX(-50%);
}

.content {
width: calc(50% - 2rem);
}

.show-me:nth-child(n){
transform: none;
opacity: 1;
}