:root {
--white: #fff;
--black: #323135;
--timeline-gradient: rgba(111, 238, 225, 1) 0%, rgba(111, 238, 225, 1) 50%,
rgba(111, 238, 225, 0) 100%;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
background: transparent;
border: none;
cursor: pointer;
outline: none;
}
a {
color: inherit;
}
img {
max-width: 100%;
height: auto;
}
body {
font: normal 16px/1.5 "Inter", sans-serif;
color: var(--black);
margin-bottom: 50px;
} .section {
padding: 50px 0;
}
.section .container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.section h1 {
font-size: 2.5rem;
line-height: 1.25;
}
.section h2 {
font-size: 1.3rem;
} .timeline {
position: relative;
white-space: nowrap;
max-width: 100%;
height: 105%;
padding: 0 10px;
margin: 0 auto;
display: grid;
grid-template-columns: auto;
grid-gap: 20px;
}    .timeline ol::-webkit-scrollbar-thumb {
background: transparent; } .timeline ol::-webkit-scrollbar-thumb:hover {
background: transparent;
}
.timeline ol::-webkit-scrollbar {
display: none;
}
.timeline ol {
-ms-overflow-style: none;
scrollbar-width: none; 
font-size: 0;
padding: 300px 0;
transition: all 1s;
overflow-x: scroll;
scrollbar-color: transparent transparent; 
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 300px;
height: 5px;
background: none;
border-bottom: 1px dashed var(--black);
}
.timeline ol li.firstli {
width: 50px;
}
.timeline ol li:last-child {
width: 340px;
}
.timeline ol li:not(:first-child) {
margin-left: 0px;
}
.timeline ol li:not(:last-child)::after {
content: "";
position: absolute;
top: 100%;
left: calc(100% + 1px);
bottom: 0;
width: 8px;
height: 8px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--white);
border: 1px solid var(--black);
z-index: 1;
}
.timeline ol li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 0px;
font-size: 1rem;
white-space: normal;
color: var(--black);
border-radius: 0 10px 10px 10px;
}
.timeline ol li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
border-radius: 10px 10px 10px 0;
}
.timeline ol li:nth-child(even) div {
top: calc(100% + 16px);
}
.timeline time {
display: block;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 8px;
color: black;
} @media screen and (max-width: 800px) {
.timeline {
display: block;
width: 90%; 
margin: 0 auto; 
}
.timeline::before,
.timeline::after {
width: 50px;
}
.timeline::before {
left: 0;
}
.timeline ol li {
width: 100%;
margin-left: 0;
padding: 20px 0;
}
.timeline ol li div {
margin: 0 auto;
width: 90%;
}
.timeline ol {
scroll-padding: 10%;
}    
}