.timeline-section {
  height: max-content !important;
  font-family: sans-serif;
  background: #0f0f0f !important;

}

/* ------------ new timeline ----------- */

.timeline-new-container{
  margin-right: auto!important;
  margin-left: auto!important;
}

.text-grey-light{
  color: #564f4f;
}

.line1{
  background: linear-gradient(90deg, transparent, #ff0000) padding-box, 
  linear-gradient(90deg, transparent, #ff0000) border-box;
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0px 8px 8px 0px;
}

.line2{
  background: linear-gradient(90deg, transparent, #ee4141) padding-box, 
  linear-gradient(90deg, transparent, #ee4141) border-box;
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0px 8px 8px 0px;
}

.line3{
  background: linear-gradient(90deg, transparent, #ff7b00) padding-box, 
  linear-gradient(90deg, transparent, #ff7b00) border-box;
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0px 8px 8px 0px;
}

.line4{
  background: linear-gradient(90deg, transparent, #f5c800) padding-box, 
  linear-gradient(90deg, transparent, #f5c800) border-box;
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0px 8px 8px 0px;
}

.line5{
  background: linear-gradient(90deg, transparent, #c2e34e) padding-box, 
  linear-gradient(90deg, transparent, #c2e34e) border-box;
  border-width: 4px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0px 8px 8px 0px;
}

.timeline-item1{
  margin-left: 80% !important;
  width: 300px !important;
}

.timeline-item2{
  margin-left: 60% !important;
  width: 300px !important;
}

.timeline-item3{
  margin-left: 40% !important;
  width: 300px !important;
}

.timeline-item4{
  margin-left: 20% !important;
  width: 300px !important;
}

.timeline-item5{
  margin-left: 0% !important;
  width: 300px !important;
}


@media screen and (min-width: 180px) and (max-width: 280px) {

  .media-flex-colum{
    width: auto !important;
  }

.timeline-item1{
    margin-left: 0% !important;
    width: 160px !important;
}
  .timeline-item1 h2{
    font-size: 12px !important;
  }
  .timeline-item1 h4{
    font-size: 9px !important;
  }
  
  .timeline-item2{
    margin-left: 0% !important;
    width: 160px !important;
  }
  
  .timeline-item2 h2{
    font-size: 12px !important;
  }
  .timeline-item2 h4{
    font-size: 9px !important;
  }
  .timeline-item3{
    margin-left: 0% !important;
    width: 160px !important;
  }
  
  .timeline-item3 h2{
    font-size: 12px !important;
  }
  .timeline-item3 h4{
    font-size: 9px !important;
  }

  .timeline-item4{
    margin-left: 0% !important;
    width: 160px !important;
  }
  
  .timeline-item4 h2{
    font-size: 12px !important;
  }
  .timeline-item4 h4{
    font-size: 9px !important;
  }

  .timeline-item5{
    margin-left: 0% !important;
    width: 160px !important;
  }
  .timeline-item5 h2{
    font-size: 12px !important;
  }
  .timeline-item5 h4{
    font-size: 9px !important;
  }

}


@media screen and (min-width: 281px) and (max-width: 500px) {
  .media-flex-colum{
    width: auto !important;
  }

  .timeline-item1{
    margin-left: 0% !important;
    width: 260px !important;
}
  .timeline-item1 h2{
    font-size: 14px !important;
  }
  .timeline-item1 h4{
    font-size: 12px !important;
  }
  
  .timeline-item2{
    margin-left: 0% !important;
    width: 260px !important;
  }
  
  .timeline-item2 h2{
    font-size: 14px !important;
  }
  .timeline-item2 h4{
    font-size: 12px !important;
  }
  .timeline-item3{
    margin-left: 0% !important;
    width: 260px !important;
  }
  
  .timeline-item3 h2{
    font-size: 14px !important;
  }
  .timeline-item3 h4{
    font-size: 12px !important;
  }

  .timeline-item4{
    margin-left: 0% !important;
    width: 260px !important;
  }
  
  .timeline-item4 h2{
    font-size: 14px !important;
  }
  .timeline-item4 h4{
    font-size: 12px !important;
  }

  .timeline-item5{
    margin-left: 0% !important;
    width: 260px !important;
  }
  .timeline-item5 h2{
    font-size: 14px !important;
  }
  .timeline-item5 h4{
    font-size: 12px !important;
  }
  
  }
  
/*   
@media screen and (min-width: 401px) and (max-width: 500px) {

    .timeline-item1{
      margin-left: 40% !important;
      width: 250px !important;
    }
    .timeline-item1 h2{
      font-size: 15px !important;
    }
    .timeline-item1 h4{
      font-size: 14px !important;
    }
    
    .timeline-item2{
      margin-left: 30% !important;
      width: 250px !important;
    }
    
    .timeline-item2 h2{
      font-size: 15px !important;
    }
    .timeline-item2 h4{
      font-size: 14px !important;
    }
    .timeline-item3{
      margin-left: 20% !important;
      width: 250px !important;
    }
    
    .timeline-item3 h2{
      font-size: 15px !important;
    }
    .timeline-item3 h4{
      font-size: 14px !important;
    }
  
    .timeline-item4{
      margin-left: 10% !important;
      width: 250px !important;
    }
    
    .timeline-item4 h2{
      font-size: 15px !important;
    }
    .timeline-item4 h4{
      font-size: 14px !important;
    }
  
    .timeline-item5{
      margin-left: 0% !important;
      width: 250px !important;
    }
    .timeline-item5 h2{
      font-size: 15px !important;
    }
    .timeline-item5 h4{
      font-size: 14px !important;
    }
  
  .row {
    --bs-gutter-x: 0rem !important;
    display: flex;
    flex-wrap: wrap;
  }

} */

  
@media screen and (min-width: 501px) and (max-width: 600px) {

    .timeline-item1{
      margin-left: 40% !important;
      width: 250px !important;
    }
    .timeline-item1 h2{
      font-size: 15px !important;
    }
    .timeline-item1 h4{
      font-size: 14px !important;
    }
    
    .timeline-item2{
      margin-left: 30% !important;
      width: 250px !important;
    }
    
    .timeline-item2 h2{
      font-size: 15px !important;
    }
    .timeline-item2 h4{
      font-size: 14px !important;
    }
    .timeline-item3{
      margin-left: 20% !important;
      width: 250px !important;
    }
    
    .timeline-item3 h2{
      font-size: 15px !important;
    }
    .timeline-item3 h4{
      font-size: 14px !important;
    }
  
    .timeline-item4{
      margin-left: 10% !important;
      width: 250px !important;
    }
    
    .timeline-item4 h2{
      font-size: 15px !important;
    }
    .timeline-item4 h4{
      font-size: 14px !important;
    }
  
    .timeline-item5{
      margin-left: 0% !important;
      width: 250px !important;
    }
    .timeline-item5 h2{
      font-size: 15px !important;
    }
    .timeline-item5 h4{
      font-size: 14px !important;
    }
  
}

  
@media screen and (min-width: 601px) and (max-width: 700px) {

    .timeline-item1{
      margin-left: 50% !important;
      width: 250px !important;
    }
    .timeline-item1 h2{
      font-size: 17px !important;
    }
    .timeline-item1 h4{
      font-size: 15px !important;
    }
    
    .timeline-item2{
      margin-left: 40% !important;
      width: 250px !important;
    }
    
    .timeline-item2 h2{
      font-size: 17px !important;
    }
    .timeline-item2 h4{
      font-size: 15px !important;
    }
    .timeline-item3{
      margin-left: 30% !important;
      width: 250px !important;
    }
    
    .timeline-item3 h2{
      font-size: 17px !important;
    }
    .timeline-item3 h4{
      font-size: 15px !important;
    }
  
    .timeline-item4{
      margin-left: 20% !important;
      width: 250px !important;
    }
    
    .timeline-item4 h2{
      font-size: 17px !important;
    }
    .timeline-item4 h4{
      font-size: 15px !important;
    }
  
    .timeline-item5{
      margin-left: 0% !important;
      width: 250px !important;
    }
    .timeline-item5 h2{
      font-size: 17px !important;
    }
    .timeline-item5 h4{
      font-size: 15px !important;
    }
  
}
  
@media screen and (min-width: 701px) and (max-width: 800px) {

    .timeline-item1{
      margin-left: 55% !important;
      width: 250px !important;
    }
    .timeline-item1 h2{
      font-size: 17px !important;
    }
    .timeline-item1 h4{
      font-size: 15px !important;
    }
    
    .timeline-item2{
      margin-left: 45% !important;
      width: 250px !important;
    }
    
    .timeline-item2 h2{
      font-size: 17px !important;
    }
    .timeline-item2 h4{
      font-size: 15px !important;
    }
    .timeline-item3{
      margin-left: 35% !important;
      width: 250px !important;
    }
    
    .timeline-item3 h2{
      font-size: 17px !important;
    }
    .timeline-item3 h4{
      font-size: 15px !important;
    }
  
    .timeline-item4{
      margin-left: 25% !important;
      width: 250px !important;
    }
    
    .timeline-item4 h2{
      font-size: 17px !important;
    }
    .timeline-item4 h4{
      font-size: 15px !important;
    }
  
    .timeline-item5{
      margin-left: 0% !important;
      width: 250px !important;
    }
    .timeline-item5 h2{
      font-size: 17px !important;
    }
    .timeline-item5 h4{
      font-size: 15px !important;
    }
  
}

@media screen and (min-width: 801px) and (max-width: 900px) {

    .timeline-item1{
      margin-left: 73% !important;
      width: 260px !important;
    }
    .timeline-item1 h2{
      font-size: 17px !important;
    }
    .timeline-item1 h4{
      font-size: 15px !important;
    }
    
    .timeline-item2{
      margin-left: 55% !important;
      width: 260px !important;
    }
    
    .timeline-item2 h2{
      font-size: 17px !important;
    }
    .timeline-item2 h4{
      font-size: 15px !important;
    }
    .timeline-item3{
      margin-left: 35% !important;
      width: 260px !important;
    }
    
    .timeline-item3 h2{
      font-size: 17px !important;
    }
    .timeline-item3 h4{
      font-size: 15px !important;
    }
  
    .timeline-item4{
      margin-left: 15% !important;
      width: 260px !important;
    }
    
    .timeline-item4 h2{
      font-size: 17px !important;
    }
    .timeline-item4 h4{
      font-size: 15px !important;
    }
  
    .timeline-item5{
      margin-left: -5% !important;
      width: 260px !important;
    }
    .timeline-item5 h2{
      font-size: 17px !important;
    }
    .timeline-item5 h4{
      font-size: 15px !important;
    }
  
}

@media screen and (min-width: 901px) and (max-width: 1000px) {

  
    .timeline-item1{
      margin-left: 75% !important;
      width: 260px !important;
    }
    .timeline-item1 h2{
      font-size: 17px !important;
    }
    .timeline-item1 h4{
      font-size: 15px !important;
    }
    
    .timeline-item2{
      margin-left: 55% !important;
      width: 260px !important;
    }
    
    .timeline-item2 h2{
      font-size: 17px !important;
    }
    .timeline-item2 h4{
      font-size: 15px !important;
    }
    .timeline-item3{
      margin-left: 35% !important;
      width: 260px !important;
    }
    
    .timeline-item3 h2{
      font-size: 17px !important;
    }
    .timeline-item3 h4{
      font-size: 15px !important;
    }
  
    .timeline-item4{
      margin-left: 15% !important;
      width: 260px !important;
    }
    
    .timeline-item4 h2{
      font-size: 17px !important;
    }
    .timeline-item4 h4{
      font-size: 15px !important;
    }
  
    .timeline-item5{
      margin-left: -5% !important;
      width: 260px !important;
    }
    .timeline-item5 h2{
      font-size: 17px !important;
    }
    .timeline-item5 h4{
      font-size: 15px !important;
    }
  
}

@media screen and (min-width: 1001px) and (max-width: 1204px) {
  
    .timeline-item1{
      margin-left: 75% !important;
      width: 290px !important;
    }
    .timeline-item1 h2{
      font-size: 19px !important;
    }
    .timeline-item1 h4{
      font-size: 17px !important;
    }
    
    .timeline-item2{
      margin-left: 55% !important;
      width: 290px !important;
    }
    
    .timeline-item2 h2{
      font-size: 19px !important;
    }
    .timeline-item2 h4{
      font-size: 17px !important;
    }
    .timeline-item3{
      margin-left: 35% !important;
      width: 290px !important;
    }
    
    .timeline-item3 h2{
      font-size: 19px !important;
    }
    .timeline-item3 h4{
      font-size: 17px !important;
    }
  
    .timeline-item4{
      margin-left: 15% !important;
      width: 290px !important;
    }
    
    .timeline-item4 h2{
      font-size: 19px !important;
    }
    .timeline-item4 h4{
      font-size: 17px !important;
    }
  
    .timeline-item5{
      margin-left: -5% !important;
      width: 290px !important;
    }
    .timeline-item5 h2{
      font-size: 19px !important;
    }
    .timeline-item5 h4{
      font-size: 17px !important;
    }
  
}

@media screen and (min-width: 1205px) and (max-width: 1400px) {

    .timeline-item1{
      margin-left: 75% !important;
      width: 290px !important;
    }
    .timeline-item1 h2{
      font-size: 19px !important;
    }
    .timeline-item1 h4{
      font-size: 17px !important;
    }
    
    .timeline-item2{
      margin-left: 55% !important;
      width: 290px !important;
    }
    
    .timeline-item2 h2{
      font-size: 19px !important;
    }
    .timeline-item2 h4{
      font-size: 17px !important;
    }
    .timeline-item3{
      margin-left: 35% !important;
      width: 290px !important;
    }
    
    .timeline-item3 h2{
      font-size: 19px !important;
    }
    .timeline-item3 h4{
      font-size: 17px !important;
    }
  
    .timeline-item4{
      margin-left: 15% !important;
      width: 290px !important;
    }
    
    .timeline-item4 h2{
      font-size: 19px !important;
    }
    .timeline-item4 h4{
      font-size: 17px !important;
    }
  
    .timeline-item5{
      margin-left: -5% !important;
      width: 290px !important;
    }
    .timeline-item5 h2{
      font-size: 19px !important;
    }
    .timeline-item5 h4{
      font-size: 17px !important;
    }
  
}

@media screen and (min-width: 1401px) {

 
    .timeline-item1{
      margin-left: 75% !important;
      width: 290px !important;
    }
    .timeline-item1 h2{
      font-size: 19px !important;
    }
    .timeline-item1 h4{
      font-size: 17px !important;
    }
    
    .timeline-item2{
      margin-left: 55% !important;
      width: 290px !important;
    }
    
    .timeline-item2 h2{
      font-size: 19px !important;
    }
    .timeline-item2 h4{
      font-size: 17px !important;
    }
    .timeline-item3{
      margin-left: 35% !important;
      width: 290px !important;
    }
    
    .timeline-item3 h2{
      font-size: 19px !important;
    }
    .timeline-item3 h4{
      font-size: 17px !important;
    }
  
    .timeline-item4{
      margin-left: 15% !important;
      width: 290px !important;
    }
    
    .timeline-item4 h2{
      font-size: 19px !important;
    }
    .timeline-item4 h4{
      font-size: 17px !important;
    }
  
    .timeline-item5{
      margin-left: -5% !important;
      width: 290px !important;
    }
    .timeline-item5 h2{
      font-size: 19px !important;
    }
    .timeline-item5 h4{
      font-size: 17px !important;
    }
  
}