/* milestones */
  .milestones{ margin-top: 150px;}
  .milestones-header{ max-width: 1200px; margin: auto;}
  .milestones-header p{ padding: 0; margin: auto;}
  .milestones-header p:nth-child(1){ font-size: 32px;font-family: 'Inter-Black';}
  .milestones-header p:nth-child(2){ font-size: 18px; line-height: 32px; margin-top: 40px;}

/* time line*/
.time-line{ margin-top: 100px;}

  .time-line .slider-item .year{ min-height: 280px; position: relative; }
  .time-line .slider-item .year span{position: relative; z-index: 1; display: flex; margin: auto; align-items: center; justify-content: center; width: 130px; height: 130px; background-color: #FFF; border-radius: 50%; font-size: 38px;  font-family: "BarlowSemiCondensed-SemiBold"; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);}
  .time-line .slider-item .year::before{ position: absolute; content: ''; height: 100%; left: 50%; top: 0; margin-left: -1px; }

  .time-line .slider-item.item-odd .year span{ border: 9px solid var(--color-blue); color: var(--color-blue);}
  .time-line .slider-item.item-odd .year::before{ border-left: 3px solid var(--color-blue);}

  .time-line .slider-item.item-even .year span{ position: absolute; left: 50%; bottom: 10px; margin-left: -65px; border: 8px solid #04abf4; color: #04abf4; }
  .time-line .slider-item.item-even .year::before{ border-left: 3px solid #04abf4; height: 80%;}

  .time-line .slider-item .bar{ height: 30px; background-color: var(--color-blue); position: relative;}
  .time-line .slider-item .bar::after{
    content: ''; 
    position: absolute;
    border-style: solid;
    border-width: 10px;
    margin-left: -10px;
    left: 50%;
  }
  .time-line .slider-item.item-odd .bar::after{
    border-color:var(--color-blue) var(--color-blue) transparent transparent; 
    transform: rotate(135deg);  bottom: -10px;
  }
  .time-line .slider-item.item-even .bar::after{
    border-color:#04abf4 #04abf4 transparent transparent; 
    transform: rotate(-45deg);  top: -10px;
  }

  .time-line .slider-item .bar.first{ border-radius: 15px 0 0 15px;}
  .time-line .slider-item .bar.end{ border-radius: 0 15px 15px 0;}
  .time-line .slider-item.item-even .bar{ background-color: #04abf4;}
  .time-line .item-body{ min-height: 280px; text-align: center;}
  .time-line .item-body .title{ font-size: 24px; padding: 18px 0; margin-bottom: 18px; position: relative;}
  .time-line .item-body .title::after{ content: ''; width: 100px; border-bottom: 3px solid var(--color-blue); position: absolute; left: 50%; bottom: 0; margin-left: -50px;}
  .time-line .item-body .content{ 
    font-size: 16px; line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .time-line .slider-item.item-odd .item-body .title{ padding-top: 40px;}

  /* slick-dots */
  .time-line .slick-dots{ margin-top: 150px;  text-align: center; color: #888; font-size: 26px; font-family: "BarlowSemiCondensed-SemiBold"; }
  .time-line .slick-dots .slick-active{ color: var(--color-blue);}
  .time-line .slick-dots li{ display: inline-block; width: 9.8%;}
  .time-line .slick-dots li a{ cursor: pointer; position: relative;}
  .time-line .slick-dots li a:hover{ color: var(--color-blue);}
  .time-line .slick-dots li.slick-active a::after{ content: ''; position: absolute; left: 50%; bottom: -18px; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-blue);}

  /* slick-arrow */
  .time-line .slick-arrow{ position: absolute; border: none; width: 50px; height: 75%; overflow: hidden; text-indent: -999px; top: 0; margin-top: 0; 
    background-color: transparent;
    z-index: 2;
  }
  .time-line .slick-arrow::before{ content: ''; top: 47%; cursor: pointer; position: absolute; width: 41px; height: 41px; background-image: url(../img/home/dot-arrow-blue.png); background-size: cover;}
  .time-line .slick-arrow.slick-prev::before{ left: 0; transform:rotate(180deg);}
  .time-line .slick-arrow.slick-next::before{ right: 0;}
  .time-line .slick-prev{ left: 0;background-image: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,1));}
  .time-line .slick-next{ transition: all 1s; right: 0;background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,1));}
  .time-line .slick-disabled{ display: none !important;}

  /* dark model */
body.dark .time-line .slick-next {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.8), rgba(0,0,0,1));
}
body.dark .time-line .slick-prev {
  background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.8), rgba(0,0,0,1));
}

  @media screen and (max-width: 640px) {
    
  /* milestones */
  .milestones {
    margin-top: 60px;
  }
  .milestones-header{ padding: 0 15px;}
  .milestones-header p:nth-child(1) {
    font-size: 18px;
  }
  .milestones-header p:nth-child(2) {
    font-size: 16px;
    line-height: 24px;
    margin-top: 10px;
  }

  .time-line {
    margin-top: 50px;
  }
  .time-line .slider-item .year span {
    width: 80px;
    height: 80px;
    font-size: 24px;
  }
  .time-line .slider-item.item-odd .year span {
    border: 5px solid var(--color-blue);
  }
  .time-line .item-body .title {
    font-size: 16px;
    padding: 10px 0;
    margin-bottom: 10px;
  }
  .time-line .item-body .content {
    font-size: 14px;
    line-height: 18px;
  }
  .time-line .item-body {
    min-height: 200px;
  }
  .time-line .slider-item .year {
    min-height: 200px;
  }
  .time-line .slider-item.item-even .year span {
    margin-left: -40px;
    border: 5px solid #04abf4;
  }
  .time-line .slider-item .bar {
    height: 15px;
  }
  .time-line .slider-item .bar::after {
    border-width: 8px;
    margin-left: -8px;
  }
  .time-line .slider-item.item-even .bar::after {
    top: -8px;
  }
  .time-line .slider-item.item-odd .bar::after {
    bottom: -8px;
}
.time-line .slick-dots {
  margin-top: 50px;
  font-size: 14px;
  text-align: left;
}
.time-line .slick-dots li {
  width: 19.5%;
  margin-top: 30px;
  text-align: center;
}
.time-line .slick-dots li a:hover{ color: #888;}
.time-line .slick-dots li.slick-active a::after {
  bottom: -10px;
  margin-left: -3px;
  width: 6px;
  height: 6px;
}
.time-line .slick-arrow{ width: 60px;}
.time-line .slick-arrow::before {
  top: 193px;  
  width: 30px;
  height: 30px;
}
.time-line .slick-arrow.slick-prev::before {
  left: 10px;
}
.time-line .slick-arrow.slick-next::before {
  right: 10px;
}
  }