/* Timeline Container */
.card .btn{
  margin: 0 auto;
  margin-top: 1.5rem;
  background-color: rgba(235, 235, 235, 0.603);
  color: black;
  text-align: center;
  width: 150px;
}
.journey h2{
    margin-top: 5rem;
}
.timeline2 {
    background: var(--bg_black);
    position: relative;
    margin: 20px auto;
    padding: 20px;
    width: 100%;
  }
  .timeline2 .container{
    margin: auto;
    max-width: 1000px;
  }
  
  /* Card container */
  .card {
    position: relative;
    left: 25%;
    max-width: 500px;
  }
  
  /* setting padding based on even or odd */
  .card:nth-child(odd) {
    padding: 30px 0 30px 30px;
  }
  .card:nth-child(even) {
    padding: 30px 30px 30px 0;
  }
  /* Global ::before */
  .card::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid orangered;
  }
  
  /* Setting the border of top, bottom, left */
  .card:nth-child(odd)::before {
    left: 0px;
    top: -5px;
    bottom: -5px;
    border-width: 5px 0 5px 5px;
    border-radius: 50px 0 0 50px;
    }
  
  /* Setting the border of top, bottom, right */
  .card:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 5px 5px 5px 0;
    border-radius: 0 50px 50px 0;
  }
  
  /* Removing the border if it is the first card */
  .card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's odd */
  .card:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's even */
  .card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
  }
  
  /* Information about the timeline */
  .info {
    display: flex;
    flex-direction: column;
    background: #333;
    color: rgba(255, 255, 255, 0.849);
    border-radius: 10px;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.308);
  }
  
  /* Title of the card */
  .title {
    color: orangered;
    position: relative;
    font-size: 2.2rem;
    text-align: center;
  }
  
  /* Timeline dot  */
  .title::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 999px;
    border: 3px solid orangered;
  }
  .container .info p{
    font-size: 1.6rem;
  }

  /* text right if the card is even 
  .card:nth-child(even) > .info > .title {
    text-align: center;
  } */
  
  /* setting dot to the left if the card is odd */
  .card:nth-child(odd) > .info > .title::before {
    margin-top: 7px;
    left: -45px;
  }
  
  /* setting dot to the right if the card is odd */
  .card:nth-child(even) > .info > .title::before {
    right: -45px;
    margin-top: 7px;
  }
@media(max-width:880px){
    .journey  h2{
        text-align: center;
        margin: auto;
        margin-top: 5rem;
    }
    .timeline2 .container{
        max-width: 500px;
      }
      
      /* Card container */
      .card {
        max-width: 300px;
        left: 0;
        margin-left: auto;
        margin-right: auto;
      }
}