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

 /* Center line */
 .timeline::after {
   content: '';
   position: absolute;
   width: 10px;
   /* background: #33a852; */
   top: 0;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   background-image: url(../images/service_line.png);
   background-repeat: repeat-y;
   background-position: right top;
   background-size: contain;
 }

 .timeline::before,
 .timeline::after {
   display: block;
 }

 .timeline::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 14px;
   height: 14px;
   background-color: #33a852;
   border-radius: 50%;
   z-index: 1;
 }

 .timeline-end-dot {
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 20px;
   height: 15px;
   /* background-color: #33a852; */
   border-radius: 50%;
   z-index: 1;
 }

 .timeline-box {
   position: relative;
   width: 50%;
   padding: 35px 25px;
 }

 .timeline-box .content {
   position: relative;
   border: 2px solid #52b56d;
   border-radius: 10px;
   padding: 35px 35px;
   background-color: #fff;
   margin-right: 15px;
   margin-left: 15px;
 }

 /* Arrow shape with border only */
 /* .timeline-box.left .content::before,
 .timeline-box.right .content::before {
   content: '';
   position: absolute;
   top: 20px;
   width: 30px;
   height: 30px;
   background: #fff;
   border: 2px solid #33a852;
   transform: rotate(45deg);
 } */

 .timeline-box.left .content::before,
 .timeline-box.right .content::before {
   content: '';
   position: absolute;
   /* top: 20px; */
   width: 42px;
   height: 71px;
   right: 0;
   background: #fff;
   /* border: 2px solid #33a852; */
   transform: rotate(0deg);
   background-image: url(../images/service_arrow.png);
   background-repeat: no-repeat;
   background-position: right top;
   background-size: contain;
 }

 .timeline-box.left {
   left: 0;
 }

 .timeline-box.left .content::before {
   right: -40px;
   border-left: none;
   border-bottom: none;
 }

 .timeline-box.right {
   left: 50%;
 }

 .timeline-box.right .content::before {
   left: -40px;
   transform: rotate(180deg);
   border-right: none;
   border-top: none;
 }

 .timeline-box h3 {
   margin-top: 0;
   color: #0095da;
   font-size: 14px;
   margin-bottom: 20px;
 }

 .timeline-box p {
   margin: 5px 0 0;
   font-size: 14px;
   line-height: 1.5;
   color: #0095da;
 }

 /* Responsive */
 @media (max-width: 768px) {
  .timeline-box .content {    margin-left: 20px;}
   .timeline::after {
     left: 20px;
   }

   .timeline::before {
     top: 0;
     left: 20px;
     transform: translateX(-50%);
   }

   .timeline-end-dot {
     bottom: -10px;
     left: 20px;
     transform: translateX(-50%);
   }

   .timeline-box {
     width: 100%;
     padding-left: 40px;
     margin-bottom: 30px;
   }

   .timeline-box.right {
     left: 0;
   }

   /* Fix: Arrow always point to center (left side) without flip */
   .timeline-box.left .content::before,
   .timeline-box.right .content::before {
     left: -40px;
     right: auto;
     border-left: none;
     border-bottom: none;
     /* border-right: 2px solid #33a852; */
     /* border-top: 2px solid #33a852; */
     transform: rotate(180deg);
   }
 }