.timeline-section{
    padding:70px 0;
background: linear-gradient(
    135deg,
    #d7efff 0%,
    #b8e3ff 85%,
    #8fd2f7 100%
);     overflow:hidden;
}

.timeline-section .container{
    width:min(1400px,92%);
    margin:auto;
}


.timeline-heading{
    text-align:center;
    margin-bottom:80px;
}

.timeline-heading span{
    display:inline-block;
    color:#0093DA;
    font-size:18px;
    font-weight:600;
    margin-bottom:12px;
}

.timeline-heading h2{
    font-size:45px;
    font-weight:800;
    color:#006FA3;
    line-height:1.2;
}


.timeline-wrapper{
    position:relative;
    width:100%;
    max-width:1380px;
    height:620px;
    margin:auto;
}


.timeline-line{
    position:absolute;
    left:0;
    top:170px;
    width:100%;
    height:220px;
    z-index:1;
    color:#0093DA;
}


.timeline-item{
    position:absolute;
    width:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    z-index:5;
}


.timeline-item.up{
    top:0;
}


.timeline-item.down{
    top:240px;
}


.item1{
    left:10px;
    top:250px;
}

.item2{
    left:270px;
    top:10px;
}

.item3{
    left:560px;
    top:250px;
}

.item4{
    left:870px;
    top:10px;
}

.item5{
    left:1165px;
    top:220px;
}


.year{
    font-size:30px;
    font-weight:300;
    margin-bottom:20px;
}

.blue{
    color:#20b8d5;
}

.orange{
    color:#f6aa1c;
}

.pink{
    color:#e7447b;
}

.green{
    color:#5b8f38;
}

.purple{
    color:#6f55d8;
}


.timeline-dot{

    width:28px;
    height:28px;
    border-radius:50%;
    position:relative;
    z-index:20;

}


.timeline-dot::before{

    content:"";
    position:absolute;
    inset:-12px;
    border:2px solid #0093DA;
    border-radius:50%;

}


.timeline-dot::after{

    content:"";
    position:absolute;
    inset:-24px;
    border:2px solid #0093DA;
    border-radius:50%;

}


.timeline-dot.blue{
    background:#20b8d5;
}

.timeline-dot.orange{
    background:#f6aa1c;
}

.timeline-dot.pink{
    background:#e7447b;
}

.timeline-dot.green{
    background:#4f88c7;
}

.timeline-dot.purple{
    background:#5b8f38;
}

.item5 .timeline-dot{
    margin-top: -40px !important;
}


.timeline-content{

    width:220px;
    text-align:center;
    position:relative;

}

.timeline-content h3{

    color:#006FA3;
    font-size:30px;
    font-weight:600;
    margin-bottom:10px;

}

.timeline-content p{

    color:#444;
    font-size:18px;
    line-height:1.8;

}


.timeline-item.down .timeline-dot{
    margin:22px 0;
}

.timeline-item.down .timeline-dot::before{

    content:"";

    position:absolute;

    left:50%;

    top:28px;

    transform:translateX(-50%);

    width:4px;

    height:40px;

    border:none;

    border-radius:10px;

    background:#20b8d5;

}

.item3 .timeline-dot::before{
    background:#e7447b;
}

.item5 .timeline-dot::before{
    background:#5b8f38;
}


.timeline-item.up .timeline-dot{

    margin:22px 0;

}

.timeline-item.up .timeline-dot::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:28px;

    transform:translateX(-50%);

    width:4px;

    height:90px;

    border:none;

    border-radius:10px;

    background:#f6aa1c;

}

.item4 .timeline-dot::before{

    background:#4f88c7;

}


.timeline-content::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    border-radius:10px;

    margin:18px auto 0;

}

.blue-line::after{
    background:#20b8d5;
}

.orange-line::after{
    background:#f6aa1c;
}

.pink-line::after{
    background:#e7447b;
}

.green-line::after{
    background:#4f88c7;
}

.purple-line::after{
    background:#5b8f38;
}


.timeline-item.up .timeline-content{

    margin-bottom:35px;

}

.timeline-item.up .year{

    margin-top:35px;

}

.timeline-item.down .year{

    margin-bottom:35px;

}

.timeline-item.down .timeline-content{

    margin-top:35px;

}


.timeline-item{

    transition:.4s ease;

}

.timeline-dot{

    transition:.35s ease;

}

.timeline-content{

    transition:.35s ease;

}

.timeline-item:hover{

    transform:translateY(-10px);

}

.timeline-item:hover .timeline-dot{

    transform:scale(1.18);

}

.timeline-item:hover .timeline-content{

    transform:translateY(-8px);

}

.timeline-item:hover h3{

    color:#0093DA;

}

.timeline-item:hover .year{

    transform:scale(1.08);

}

.year{

    transition:.35s;

}

.item5 .year{
    position:relative;
    top:-60px;
}


@media (max-width:480px){

    .timeline-section{
        padding:60px 0;
    }

    .timeline-section .container{
        width:100%;
        padding:0 16px;
    }

    .timeline-heading{
        margin-bottom:50px;
    }

    .timeline-heading span{
        font-size:15px;
    }

    .timeline-heading h2{
        font-size:30px;
    }

    .timeline-line{
        display:none;
    }

    .timeline-wrapper{
        height:auto;
        position:relative;
        padding-left:40px;
    }

    .timeline-wrapper::before{
        content:"";
        position:absolute;
        left:20px;
        top:0;
        width:3px;
        height:100%;
        background:#0093DA;
        border-radius:10px;
    }

    .timeline-item{
        position:relative;
        width:100%;
        left:0 !important;
        top:0 !important;
        display:flex;
        flex-direction:row;
        align-items:flex-start;
        margin-bottom:45px;
        transform:none !important;
    }

    .timeline-item.up,
    .timeline-item.down{
        top:0;
    }

    .year{
        order:2;
        font-size:20px;
        margin:0 0 8px;
        text-align:left;
    }

    .timeline-dot{
        width:18px;
        height:18px;
        margin-right:18px;
        flex-shrink:0;
    }

    .timeline-dot::before,
    .timeline-dot::after{
        display:none;
    }

    .timeline-content{
        width:100%;
        margin:0 !important;
        text-align:left;
    }

    .timeline-content h3{
        font-size:30px;
        margin-bottom:8px;
    }

    .timeline-content p{
        font-size:18px;
        line-height:1.9;
        font-weight: 400;
    color: #444;    }

    .timeline-content::after{
        width:60px;
        margin:12px 0 0;
    }

    .timeline-item{
        display:grid;
        grid-template-columns:18px 1fr;
        column-gap:18px;
    }

    .timeline-dot{
        grid-row:1 / span 2;
    }

    .year{
        grid-column:2;
    }

    .item5 .year{
    position:relative;
    margin-top: 90px;
}

    .timeline-content{
        grid-column:2;
    }

    .timeline-item:hover,
    .timeline-item:hover .timeline-dot,
    .timeline-item:hover .timeline-content,
    .timeline-item:hover .year{
        transform:none;
    }

}