:root{
--color1: #9C1245;
--color2: #840B38;
}
.main-timeline{
font-family: 'Poppins', sans-serif;
padding: 25px 0;
}
.main-timeline:before{
content: '';
background: linear-gradient(to right, #eee,#bbb,#eee);
height: 100%;
width: 30px;
transform: translateX(-50%);
position: absolute;
left: 50%;
top: 0;
}
.main-timeline:after{
content: '';
display: block;
clear: both;
}
.main-timeline .timeline{
width: 50%;
padding: 0 0 30px 0;
margin: 0 0 20px;
float: left;
position: relative;
z-index: 1;
}
.main-timeline .timeline-content{
color: #fff;
background: var(--color1);
padding: 25px 25px 25px 100px;
border-radius: 50px 50px 50px;
display: block;
position: relative;
}
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-content:before,
.main-timeline .timeline-content:after{
content: '';
background: var(--color2);
height: 80px;
width: 130px;
position: absolute;
right: 0;
bottom: -30px;
z-index: -1;
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.main-timeline .timeline-content:before{
background: transparent;
height: 18px;
width: 18px;
border-radius: 50%;
border: 2px solid var(--color2);
transform: rotateX(30deg);
bottom: -37px;
right: -7px;
clip-path: none;
}
.main-timeline .timeline-icon{
font-size: 45px;
font-weight: 600;
transform: translateY(-50%);
position: absolute;
top: 50%;
left: 30px;
}
.main-timeline .title{
font-size: 19px;
font-weight: 600;
text-transform: capitalize;
margin: 0 0 10px;
}
.main-timeline .description{
font-size: 13px;
letter-spacing: 1px;
margin: 0;
}
.main-timeline .timeline:nth-child(even){
float: right;
margin: 0 0 30px 10px;
}
.main-timeline .timeline:nth-child(even) .timeline-content{ padding: 25px 100px 25px 25px; }
.main-timeline .timeline:nth-child(even) .timeline-content:before{
right: auto;
left: -7px;
}
.main-timeline .timeline:nth-child(even) .timeline-content:after{
transform: rotateY(180deg);
right: auto;
left: 0;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
right: 30px;
left: auto;
}
.main-timeline .timeline:nth-child(2){
--color1: #065382;
--color2: #073B62;
}
.main-timeline .timeline:nth-child(3){
--color1: #FE7A33;
--color2: #E76621;
}
.main-timeline .timeline:nth-child(4){
--color1: #17CAD9;
--color2: #0FACBB;
}
@media screen and (max-width:767px){
.main-timeline:before{
transform: translateX(0);
left: 0;
}
.main-timeline .timeline,
.main-timeline .timeline:nth-child(even){
width: 100%;
margin: 0 0 30px;
}
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(even) .timeline-content{
padding: 100px 25px 25px;
}
.main-timeline .timeline-content:before,
.main-timeline .timeline:nth-child(even) .timeline-content:before{
left: -7px;
right: auto;
}
.main-timeline .timeline-content:after,
.main-timeline .timeline:nth-child(even) .timeline-content:after{
transform: rotateY(180deg);
left: 0;
right: 0;
}
.main-timeline .timeline-icon,
.main-timeline .timeline:nth-child(even) .timeline-icon{
left: 30px;
right: auto;
top: 20px;
transform: translateY(0);
}
}