:root {
  --clr-border-timeline: #EB2A2E;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section-timeline {
  text-align: center !important;
  position: relative;
  padding: 50px 0;
  height: 1800px;
}
.section-timeline .container {
  max-width: 1300px;
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  position: relative;
}

.section-timeline .timeline {
  list-style: none;
  position: relative;
  margin: 30px 0;
}
.section-timeline .timeline li {
  height: 80px;
  width: 80px;
  position: absolute;
  border-color: var(--clr-border-timeline);
}
.section-timeline .timeline li:nth-child(odd) {
  border-style: solid;
  border-width: 2px 2px 2px 0;
  left: -40px;
  transform: translateX(50%);
  border-radius: 0 80px 80px 0;
  box-shadow: 13px 0 15px -12px rgba(0, 0, 0, .3);
}
.section-timeline .timeline li:nth-child(even) {
  left: -40px;
  border-style: solid;
  border-width: 2px 0 2px 2px;
  transform: translateX(-50%);
  border-radius: 80px 0 0 80px;
  box-shadow: -15px 0 15px -12px rgba(0, 0, 0, .5);
}

/* Style li */
.section-timeline .timeline li:nth-child(2) {
  top: 78px;
}
.section-timeline .timeline li:nth-child(3) {
  top: 156px;
}
.section-timeline .timeline li:nth-child(4) {
  top: 234px;
}
.section-timeline .timeline li:nth-child(5) {
  top: 312px;
}
.section-timeline .timeline li:nth-child(6) {
  top: 390px;
}
.section-timeline .timeline li:nth-child(7) {
  top: 468px;
}
.section-timeline .timeline li:nth-child(8) {
  top: 546px;
}
.section-timeline .timeline li:nth-child(9) {
  top: 624px;
}
.section-timeline .timeline li:nth-child(10) {
  top: 702px;
}
.section-timeline .timeline li:nth-child(11) {
  top: 780px;
}
.section-timeline .timeline li:nth-child(12) {
  top: 858px;
}
.section-timeline .timeline li:nth-child(13) {
  top: 936px;
}
.section-timeline .timeline li:nth-child(14) {
  top: 1014px;
}
.section-timeline .timeline li:nth-child(15) {
  top: 1092px;
}
.section-timeline .timeline li:nth-child(16) {
  top: 1170px;
}
.section-timeline .timeline li:nth-child(17) {
  top: 1248px;
}
.section-timeline .timeline li:nth-child(17) {
  top: 1248px;
}
.section-timeline .timeline li:nth-child(18) {
  top: 1326px;
}
.section-timeline .timeline li:nth-child(19) {
  top: 1404px;
}

/* Style pseudo Element */
.section-timeline .timeline li:before {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  border: 2px solid #EB2A2E;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--clr-border-timeline);
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
}
.section-timeline .timeline li:nth-child(odd):before {
  right: 0;
  transform: translateY(-50%) translateX(50%);
}
.section-timeline .timeline li:nth-child(even):before {
  left: 0;
  transform: translateY(-50%) translateX(-50%);
}

.section-timeline .timeline li:nth-child(1):after,
.section-timeline .timeline li:last-child:after {
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: var(--clr-border-timeline);
}
.section-timeline .timeline li:nth-child(1):after {
  top: 0;
  transform: translate(-50%, -50%)
}
.section-timeline .timeline li:last-child:after {
  bottom: 0;
  right:0;
  transform: translate(-740%, 65%)
}

.section-timeline .timeline li:nth-child(1):before {content: '1'}
.section-timeline .timeline li:nth-child(2):before {content: '2'}
.section-timeline .timeline li:nth-child(3):before {content: '3'}
.section-timeline .timeline li:nth-child(4):before {content: '4'}
.section-timeline .timeline li:nth-child(5):before {content: '5'}
.section-timeline .timeline li:nth-child(6):before {content: '6'}
.section-timeline .timeline li:nth-child(7):before {content: '7'}
.section-timeline .timeline li:nth-child(8):before {content: '8'}
.section-timeline .timeline li:nth-child(9):before {content: '9'}
.section-timeline .timeline li:nth-child(10):before {content: '10'}
.section-timeline .timeline li:nth-child(11):before {content: '11'}
.section-timeline .timeline li:nth-child(12):before {content: '12'}
.section-timeline .timeline li:nth-child(13):before {content: '13'}
.section-timeline .timeline li:nth-child(14):before {content: '14'}
.section-timeline .timeline li:nth-child(15):before {content: '15'}
.section-timeline .timeline li:nth-child(16):before {content: '16'}
.section-timeline .timeline li:nth-child(17):before {content: '17'}
.section-timeline .timeline li:nth-child(18):before {content: '18'}
.section-timeline .timeline li:nth-child(19):before {content: '19'}


/* Style content */
.section-timeline .timeline .content {
  position: absolute;
  min-width: 180px;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  max-height: 120px;
  
}
.section-timeline .timeline li:nth-child(odd) .content {
  left: calc(100% + 30px);
}
.section-timeline .timeline li:nth-child(even) .content {
  right: calc(100% + 30px);
}

.section-timeline .timeline .content > * {
  padding: .5rem;
}
.section-timeline .timeline .content h3 {
  text-align: center;
  margin: 0;
  box-shadow: 0 5px 8px -6px rgba(0, 0, 0, .4);
  color: white;
}
.section-timeline .timeline li:nth-child(odd) h3 {
  background-color: #441F76;
}
.section-timeline .timeline li:nth-child(even) h3 {
  background-color: #441F76;
}

@media (max-width: 767px) {
  .section-timeline {
    min-width: 350px;
  }
  .section-timeline .timeline li {
    width: 40px;
  }
  .section-timeline .timeline .content {
    width: 70px !important;
  }
  .section-timeline .timeline li:nth-child(1):after {
    display: none;
  }
  .section-timeline {
    margin-left: 40px;
    padding: 30px 0px;
  }
}

@media (max-width: 575px) { 
  .section-timeline {
    margin-left: 20px;
  }
  .section-timeline .timeline li:nth-child(odd) .content {
    left: calc(100% + -15px);
  }
  .section-timeline .timeline li:nth-child(even) .content {
    right: calc(100% + -15px);
  }
}