/* =========================
   TIMELINE
   ========================= */


.timeline {

    position:relative;

    max-width:900px;

    margin:auto;

}



.timeline::before {

    content:"";

    position:absolute;

    left:20px;

    top:0;

    bottom:0;

    width:2px;

    background:var(--border-color);

}




.timeline-item {

    position:relative;

    padding-left:70px;

    margin-bottom:3rem;

}




.timeline-marker {

    position:absolute;

    left:11px;

    top:10px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--primary);

    border:4px solid var(--bg-primary);

}




.timeline-content {

    background:var(--bg-card);



    border-radius:20px;

    padding:1.8rem;

    box-shadow:var(--shadow-md);

    border:solid;

}





.timeline-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

}




.timeline-header h3 {

    margin:0;

    font-size:1.3rem;

}




.timeline-badge {

    padding:.4rem .8rem;

    border-radius:20px;

    background:rgba(59,130,246,.15);

    color:var(--primary-hover);

    font-size:.85rem;

}




.timeline-date {

    color:var(--text-secondary);

    margin:.8rem 0;

}