.timeline-wrapper{
    position:relative;
    --fill-height:0%;
}

/* .timeline-wrapper::before{
    content:'';
    position:absolute;
    left:34px;
    top:20px;
    bottom:20px;
    width:2px;
    background:#d9d9d9;
}

.timeline-wrapper::after{
    content:'';
    position:absolute;
    left:34px;
    top:20px;
    width:2px;
    height:var(--fill-height);
    background:#000;
    transition:none;
} */
.timeline-wrapper{
    position:relative;
}

.timeline-wrapper::before{
    content:'';
    position:absolute;
    left:34px;
    top:var(--line-start, 35px);
    height:var(--line-height, 200px);
    width:2px;
    background:#d9d9d9;
}

.timeline-wrapper::after{
    content:'';
    position:absolute;
    left:34px;
    top:var(--line-start, 35px);
    height:var(--fill-height, 0px);
    width:2px;
    background:#000;
}

.timeline-item{
    display:flex;
    gap:25px;
    margin-bottom:40px;
}

.timeline-icon {
    width: 73px;
    height: 73px;
    min-width: 73px;
    border-radius: 50%;
    background: #ffffff;
    
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 2;

    /* Gradient border trick */
    padding: 2px; 
    background: linear-gradient(180deg, #C6D4EB 0%, #00AFFF 100%);
}

/* Inner white circle */
.timeline-icon::before {
    content: "";
    position: absolute;
    inset: 1px;  /* border thickness */
    border-radius: 50%;
    background: #fff;
    z-index: -1;
}

/* Optional shadow */
.timeline-icon {
    box-shadow: 0px 20px 50px #DBE3F1; 
}

.timeline-content h3{
    margin-bottom:10px;
}

.timeline-content p{
    line-height:1.7;
}