.custom-timeline {
position: relative;
max-width: 1100px;
margin: auto;
}

.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: #dbe6f3;
transform: translateX(-50%)
}

.timeline-item {
display: flex;
align-items: center;
margin: 60px 0;
position: relative
}

.timeline-item.left {
justify-content: flex-start
}

.timeline-item.right {
justify-content: flex-end
}

.timeline-content {
width: 45%;
background: #EFEFEF;
padding: 25px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,.05)
}
.timeline-content p{
font-family: "Helvetica Now Display", Sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.5px;
color: #555555;
}

.timeline-content h3 {
font-family: "Creato display", Sans-serif;
color: #000;
margin-bottom: 10px;
font-weight: 700;
font-size: 22px;
}

.timeline-number {
position: absolute;
left: 50%;
transform: translate(-50%);
background: #F9A72B;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600
}

@media (max-width: 768px) {
.timeline-line {
left:20px
}

.timeline-item {
flex-direction: column;
align-items: flex-start;
padding-left: 50px
}

.timeline-content {
width: 100%
}

.timeline-number {
left: 0;
top: 50%;
transform: translateY(-50%);
}
}