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

.timeline h2,p{
    color: white
}

.timeline p{
    font-size: 15px;
}
.con{
    padding: 10px 50px;
    position: relative;
    width:50%;
    animation: movedown 1s linear forwards;
    opacity:0;
   
}



@keyframes movedown{
    0%{
        opacity:1;
        transform:translateY(-30px);
   
    }
    100%{
        opacity:1;
        transform:translateY(0px);
   
   
    }
}


.con:nth-child(1){
    animation-delay:0s;
}

.con:nth-child(2){
    animation-delay:1s;
}

.con:nth-child(3){
    animation-delay:2s;
}

.con:nth-child(4){
    animation-delay:3s;
}

.con:nth-child(5){
    animation-delay:4s;
}

.con:nth-child(6){
    animation-delay:5s;
}


.text-box{
    padding :20px 30px ; 
    background :  #c09891;
    position:relative;
    border-radius:6px;
    font-size:15px;


}


.left-con{
  left :0;
}

.right-con{
left:50%
}

.con img{
    position: absolute;
    width: 40px;
    border-radius:50%;
    right:-20px;
    top:32px;
    z-index:10;
}

.right-con img{
    left:-20px;
}

.timeline::after{

    content: '';   
    position: absolute;   
    width: 6px;   
    height: 100%;   
    background: #FA6B9B;   
    top: 0;   
    left: 50%;    
    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;
    }

    .text-box small{
       display:inline-block;
       margin-bottom: 15px; 
    }


    .left-con-arrow{
    height: 0;
    width: 0;
    position: absolute; 
    border-left: 15px solid #fa99ba;
    top: 28px;
    z-index: 1;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    right: -14px;
    }

    .right-con-arrow{
        height: 0;
        width: 0;
        position: absolute; 
        border-right: 15px solid  #fa99ba;
        top: 28px;
        z-index: 1;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        left: -14px;
        }


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

    .timeline{
    
    margin: 50px auto;
    
    }
    
    .timeline::after{
    
     left: 31px;
    
    }
    
    .con{
    
    width: 100%;
    
    padding-left: 80px; 
    padding-right: 25px;
    
    }

    .text-box{

        font-size: 13px;
        
        }
        
        .text-box small{
             margin-bottom: 10px;
        
        }
        
        .right-con{ 
            left: 0;
        
        }
        
        .left-con img, .right-con img{
             left: 10px; 
            } 

        .left-con-arrow,.right-con-arrow{
            border-right: 15px solid #FA6B9B;
            border-left:0;
            left:15px;
        }
    
    }