.timeline-section{


    padding:120px 0;


}




.timeline{


    position:relative;


    max-width:900px;


    margin:80px auto 0;


}





.timeline::before{


    content:"";


    position:absolute;


    right:50%;


    transform:translateX(50%);


    top:0;


    bottom:0;


    width:4px;


    background:

    linear-gradient(

        var(--cyan),

        var(--yellow)

    );


    border-radius:20px;



}





.timeline-item{


    position:relative;


    width:50%;


    padding:25px 40px;



}




.timeline-item:nth-child(odd){


    right:50%;


    text-align:right;


}



.timeline-item:nth-child(even){


    left:0;


    text-align:left;


}





.timeline-number{


    position:absolute;


    top:35px;



    width:70px;


    height:70px;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--cyan)

    );



    color:#081120;


    font-weight:900;


    font-size:20px;



    box-shadow:

    0 10px 30px rgba(58,134,255,.35);



}




.timeline-item:nth-child(odd) .timeline-number{


    left:-35px;


}





.timeline-item:nth-child(even) .timeline-number{


    right:-35px;


}




.timeline-content{


    background:

    rgba(255,255,255,.07);



    border:

    1px solid rgba(255,255,255,.1);



    padding:30px;


    border-radius:28px;



    transition:.35s;



}



.timeline-content:hover{


    transform:scale(1.04);


    background:

    rgba(255,255,255,.12);



}




.timeline-date{


    display:block;


    margin-bottom:12px;


    color:var(--cyan);


    font-size:13px;


    font-weight:700;


}


.timeline-content h3{


    font-size:28px;


    margin-bottom:15px;


}





.timeline-content p{


    color:var(--text-muted);


    line-height:2;


}





@media(max-width:800px){



    .timeline::before{


        right:20px;


    }




    .timeline-item,


    .timeline-item:nth-child(even),


    .timeline-item:nth-child(odd){


        width:100%;


        right:auto;


        left:auto;


        padding-right:70px;


        text-align:right;


    }





    .timeline-item .timeline-number,


    .timeline-item:nth-child(even) .timeline-number,


    .timeline-item:nth-child(odd) .timeline-number{


        right:-15px;


        left:auto;


    }



}