/* body{
    line-height:1.3em;
    min-width:920px;
  } */
  .history-tl-container{
    
    max-height: 500px;  /* Set the height for the scrollable area */
    overflow-y: scroll; /* Allow scrolling */
    width:50%;
    margin:auto;
    /* display:block; */
    position:relative;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
   margin-bottom: 2rem;
   
    margin: 0 auto;

  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.history-tl-container::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
  .history-tl-container ul.tl{
      margin:20px 0;
      padding:30px 0;
      display:inline-block;
  margin-top: auto;
  }
  .history-tl-container ul.tl li{
      list-style: none;
      margin:auto;
    
      margin-left:200px;
      min-height:50px;
      
      /* border-left:1px dashed #F4A641; */
      /* padding:0 0 50px 30px; */
      padding:0 0 80px 30px;
      position:relative;
  }
  .history-tl-container  ul.tl li.completed{
    border-left:1px dashed #F4A641;
  }
  .history-tl-container  ul.tl li.upcoming{
border-left: 1px dashed gray;
  }
  ul.tl li.completed::before {
    content: " ";
    position: absolute;
    left: -10px; /* Position of the dot */
    top: -5px;
    height: 20px;
    width: 20px;
    background: #F4A641; /* Color of the completed dot */
    border-radius: 50%; /* Makes it a circle */
    transition: all 500ms ease-in-out;
  }
  
  /* Upcoming dots */
  ul.tl li.upcoming::before {
    content: " ";
    position: absolute;
    left: -10px;
    top: -5px;
    height: 20px;
    width: 20px;
    background: gray; /* No background for upcoming dots */
    border: 2px solid gray ;/* Only the border for upcoming dots */
    border-radius: 50%;
    transition: all 500ms ease-in-out;
  }
  
  
 
  ul.tl li .timestamp{
      color: #8D8D8D;
      position: absolute;
    /* width:100px; */
    left: -40%;
    /* left: -90%; */
      text-align: right;
      font-size:1rem;
      /* font-weight: bold; */
      /* font-size: 12px; */
  }
  /* Remove the line before the last child */
ul.tl li:last-child {
    /* border-left: 0; */
    position: relative;
  }
  
 .roadmap-container{
    
    display: flex;
    align-items: center;
    justify-content: center;
   /* height: 100vh; */
 }
 .roadmap-heading-div{
    width: 70%;
 }
 .roadmap-heading-div p{
    text-align: justify;
 }
 @media screen and (max-width:480px){
.roadmap-container{
        flex-direction: column;
    }
 }
    @media screen and (min-width:1001px){
 .roadmap-heading-div h1{
    font-size: 120px;
 }
 .roadmap-container{
    height: 100vh;
 }
}

 @media screen and (max-width:576px) {
    
    .roadmap-heading-div h1{
        font-size: 35px;
    }
    ul.tl li .timestamp{
        left: -80%;
    }
    .history-tl-container{
        width: 100%;
    }
    .roadmap-heading-div{
        width: 100%;
    }
    
 }

 @media screen and (max-width:1000px){
    .roadmap-container{
        flex-direction: column;
    }
 }

 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape){
   .roadmap-heading-div{
    width: 50%;
   }
   .roadmap-heading-div h1{
    font-size: 80px;
 }
 .history-tl-container ul.tl li{
    margin-left: 180px;
 }
  
}
.roadmap-outer-container{
	background-image: url('../images/banner/roadmap-bg.jpg');
    padding-top: 2rem;
}

@media screen and (max-width:1024px) and (min-width:768px){
    .roadmap-heading-div{
        width: 80%;
    }
    .history-tl-container{
        width: 70%;
    } 
}