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


li {
    color: black;
}



body {
    background: #FDFBF7;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 100px auto;
}

.container{
  padding: 10px 50px;
  position: relative;
  width: 60%;
  animation: movedown 1s linear forwards;
  opacity: 0;
}
@keyframes movedown{
  0%{
    opacity: 1;
    transform: translateY(-30px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}

.container:nth-child(1){
  animation-delay: 0s;
}  
.container:nth-child(2){
  animation-delay: 1s;
}  
.container:nth-child(3){
  animation-delay: 2s;
}  
.container:nth-child(4){
  animation-delay: 3s;
}  
.container:nth-child(5){
  animation-delay: 4s;
}  
.container:nth-child(6){
  animation-delay: 5s;
}  


/* background: linear-gradient(135deg, #ff9a9e, #fad0c4); */
/* background: linear-gradient(135deg, #ff9b4e, #fde4cf);*/
/* background: linear-gradient(135deg, #ff9b4e, #fffbf2);*/
/* background: linear-gradient(135deg, #fffbf2, #ff9b4e);*/
.text-box {
    background: linear-gradient(135deg, #ff9b4e, #fffbf2);
    padding: 10px 20px;
    border-radius: 6px;
    position: relative;
    border-radius: 6px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    color: #333;
}


/*.text-box:hover {
/*  background: #ffe5b4; /* Soft peach */*/
/*  border-color: #ff9900; /* Warm orange */*/
/*  transform: scale(1.05);*/
/*} */

.left-container{
  left: 0;
}

.right-container{
  left: 60%;
}

.container img{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 60%;
  right: -30px;
  top: 32px;
  z-index: 10;
}

.right-container img{
  left: -30px;
}

.timeline::after{
  content: '';
  position: absolute;
  width: 6px;
  height: 100%;
  background:#bb4808;
  top: 0;
  left: 60%;
  margin-left: -3px;
  z-index: -1;
  animation: moveline 6s linear forwards;
}
@keyframes moveline{
  0%{
    height: 0;
  }
  100%{
    height: 100%;
  }
}


.text-box h2{
  font-weight: 600;
  color: black;
}


.text-box h5{
  display: inline-block;
  margin-bottom: 40px;
  font-weight: 600;
}


.left-container-arrow {
  position: absolute;
  top: 28px;
  right: -15px;
  width: 15px;
  height: 30px;
  background: linear-gradient(135deg, #ff9b4e, #fde4cf);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}



.right-container-arrow {
  position: absolute;
  top: 28px;
  left: -15px;
  width: 15px;
  height: 30px;
  background: linear-gradient(135deg, #ff9b4e, #fde4cf);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}




.circle {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;  /* Adjust size */
    height: 20px;
    background-color: white; /* Circle color */
    border: 4px solid #a64d00;
    border-radius: 50%;
    z-index: 2;
}

/* Ensure the circle aligns with the timeline */
.left-container .circle {
    left: calc(100% + 0.1px); /* Adjusts for left-aligned nodes */
}

.right-container .circle {
    left: -0.5px; /* Adjusts for right-aligned nodes */
    top: 12%;
}



@media screen and (max-width: 600px){
  .timeline{
    margin: 50px auto;
  }
  .timeline after{
    left: 31px;
  }
  .container{
    width: 100%;
    padding-left: 80px;
    padding-right: 25px;
  }
  .text-box{
    font-size: 13px;
  }
  .text-box small{
    margin-bottom: 10px;
  }
  .right-container{
    left: 0;
  }
  .left-container img, .right-container img{
    left: 10px;
  }
  .left-container-arrow, .right-container-arrow{
    border-right: 15px solid #fff;
    border-left: 0;
    left: -15px;
  }
}