Our Milestones

.timeline {
white-space: nowrap;
overflow: hidden;
}
.timeline:before{content: none;}
.timeline ol {
font-size: 0;
width: 100vw;
padding: 250px 0;
transition: all 1s;
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 300px;
}
.timeline ol li:last-child {
width: 300px;
}
.timeline ol li:not(:first-child) {
margin-left: 14px;
}
.timeline ol li div {
position: absolute;
left: calc(100% + 7px);
width: 280px;
padding: 15px;
font-size: 1rem;
white-space: normal;
color: black;
}
.timeline ol li:nth-child(odd) div {
top: -16px;
}
.timeline ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: white transparent transparent transparent;
}
.timeline ol li:nth-child(even) div {
top: calc(100% + 16px);
}
.timeline ol li:nth-child(even) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent white;
}
.timeline time span {
background-image: linear-gradient(143deg, #eaeaea, #fefefe);
}
.timeline time {
position: relative ;
top: 0 ;
bottom: 0 ;
margin-bottom: 20px;
margin: 0;
margin-right: 20px;
font-size: 1.2rem;
font-weight: bold;
box-shadow: 0px 7px 25px 1px rgb(0 0 0 / 8%);
border-radius: 100%;
text-align: center;
height: 105px;
width: 105px;
margin: 0 auto;
justify-content: center;
align-items: center;
display: flex;
background: #fff;
position: relative;
color: #b72122;
left: 0;
right: 0px;
margin: 0 auto;
/* box-shadow: 0px -5px 15px 0px rgb(0 0 0 / 30%), 0px -5px 15px 0px rgb(0 0 0 / 30%), inset 0px 10px 30px rgb(0 0 0 / 30%), inset 0px -10px 30px rgb(0 0 0 / 30%); */
background-image: url(https://www.varutra.com/varutratheme/wp-content/uploads/2021/04/circle.png);
background-color: #ffffff;
background-size: contain;
}
.timeline ol li div p {
width: calc(100% – 125px);
padding: 5px 10px;
background: #b7242466;
font-weight: bold;
text-align: left;
font-size: 11px;
}
.timeline .arrows {
display: flex;
justify-content: center;
position: relative;
width: 100%;
margin: 0 auto;
right: 0;
left: 0;
margin-top: 35px;
}
.timeline .arrows .arrow {
padding: 0;
border: none;
font-size: 35px;
line-height: normal;
cursor: pointer;
color: #fff;
background: #b72122;
border-radius: 100%;
height: 35px;
width: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.timeline .arrows .arrow__prev {margin-right: 20px;}
.timeline .disabled {
opacity: .5;
}
.ms-mobile{display: none;}
ol.ms-desktop{padding: 364px 0 314px ;}
.ms-desktop li:before, .ms-desktop li:after, .ms-desktop li div:after{display: none;}
.ms-desktop li div img {height: auto ;width: 100% ;}
.ms-desktop li div{height: 306px;width: 376px ;}
.ms-desktop li:nth-child(odd) div{transform: translateY(-128%);}
.ms-desktop li:nth-child(even) div{transform: translateY(-133.2%);top: unset ;}
.ms-mobile li div {
transform: none ;
top: 0 ;
display: flex ;
flex-direction: row-reverse ;
align-items: center ;
border-bottom: 3px solid #8d241f;
flex-wrap: wrap;
padding-bottom: 20px;
}
@media screen and (max-width: 767px){
.ms-desktop{display: none;}
.ms-mobile{display: block ;}
.timeline ol li div{padding: 0 0 25px;}
}
/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 599px) {
.timeline ol,
.timeline ol li {
width: auto;
}
.timeline ol {
padding: 0;
transform: none ;
}
.timeline ol li {
display: block;
height: auto;
background: transparent;
}
.timeline ol li:first-child {
margin-top: 25px;
}
.timeline ol li:not(:first-child) {
margin-left: auto;
}
.timeline ol li div {
width: 94%;
height: auto ;
margin: 0 auto 25px;
}
.timeline ol li div {
position: static;
}
.timeline ol li:nth-child(odd) div {
transform: none;
}
.timeline ol li:nth-child(odd) div::before,
.timeline ol li:nth-child(even) div::before {
left: 50%;
top: 100%;
transform: translateX(-50%);
border: none;
border-left: 1px solid white;
height: 25px;
}
.timeline ol li:last-child,
.timeline ol li:nth-last-child(2) div::before,
.timeline ol li:not(:last-child)::after,
.timeline .arrows {
display: none;
}
}