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

 .container {
     padding: 10px 50px;
     position: relative;
     width: 50%;

 }

 .timeline_section {
     margin: 120px;
 }

 .text-box {
     padding: 20px 30px;
     background: linear-gradient(90deg,
             #8b5e00 0%,
             #a97400 25%,
             #c49102 50%,
             #a97400 75%,
             #8b5e00 100%);
     position: relative;
     border: 6px;
     font-size: 15px;
     border-radius: 12px;
 }

 .left-container {
     right: 10%;
 }

 .right-container {
     left: 53%;
 }



 .timeline::after {
     content: "";
     position: absolute;
     width: 6px;
     height: 100%;
     background: linear-gradient(90deg,
             #8b5e00 0%,
             #a97400 25%,
             #c49102 50%,
             #a97400 75%,
             #8b5e00 100%);
     top: 0;
     left: 50%;
     z-index: -1;

 }


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

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



 .timeline_section {
     width: 80%;
     margin-left: auto;
     margin-right: auto;
 }

 .timeline_section h1 {
     text-align: center;
     width: 100%;
     font-size: 42px;
 }

 .timeline_section h1 span {
     color: #B8860B;
 }

 b {
     text-align: end;
     font-size: 32px;
     margin-top: 12px;
     margin-bottom: 12px;
 }



 @media screen and (max-width:900px) {
     .timeline {
         margin: 50px auto;
     }

     .timeline::after {
         left: 31px;
     }

     .container {
         width: 100%;
         padding-left: 50px;
         padding-right: 25px;
     }

     .text-box {
         font-size: 12px;
     }

     .text-box small {
         font-size: 10px;
     }

     .right-container {
         left: 0;
     }

     .left-container {
         right: 0;
     }

     .timeline_section {
         text-align: center;
     }

     .timeline_section h1 {
         font-size: 28px;

     }

 }