

.timeline {
  position: relative;
  padding: 64px 0;
}

.timeline__bar {
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 0;
  background: #E3E6EC;
}

.timeline__item {
  position: relative;
}

.timeline__box {
  position: relative;
  max-width: calc(50% - 64px);
  padding: 32px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0px 32px 64px rgba(34, 35, 38, 0.05), 0px 16px 32px rgba(34, 35, 38, 0.05);
}

.timeline__item--right .timeline__box {
  float: right;
}



.timeline__box:after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 0;
  transform: rotate(45deg);
  position: absolute;
  right: -10px;
  top: 50%;
  margin-top: -15px;
}

.timeline--valign-top .timeline__box:after {
  top: 64px;
  margin-top: 0;
}

.timeline__item--right .timeline__box:after {
  right: 0;
  left: -10px;
}



.timeline__dot {
  width: 30px;
  height: 30px;
  padding: 5px;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  left: 50%;
  margin-left: -15px;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0px 8px 16px rgba(34, 35, 38, 0.05), 0px 4px 8px rgba(34, 35, 38, 0.05);
}

.timeline--valign-top .timeline__dot {
  top: 64px;
  margin-top: 0;
}

.timeline__dot:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: #00cdff;
  border-radius: 100%;
}

.timeline__dot:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: 50%;
  margin-left: -5px;
  background: #fff;
  border-radius: 100%;
}

.timeline__dot .ttip-holder {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  right: -16px;
}

.timeline__badge {
  margin-bottom: .56rem;
}

.timeline__text > *:last-child {
  margin-bottom: 0;
}

.timeline__img-tag {
  border-radius: 0;
}

/* Dark */

.timeline--dark .timeline__bar {
  background: rgba(255, 255, 255, .2);
}

.timeline--dark .timeline__box,
.timeline--dark .timeline__box:after,
.timeline--dark .timeline__dot,
.timeline--dark .timeline__dot:after {
  background: #222326;
}

/* Responsive */

@media (min-width: 768px) {
  .timeline__badge {
    display: none;
  }
}

@media (min-width: 1139px) {
  .timeline__content {
    display: flex;
    align-items: center;
  }
  
  .timeline--valign-top .timeline__content {
    align-items: flex-start;
  }
  
  .timeline__text {
    width: 70%;
    padding: .56rem;
  }
  
  .timeline__item--no-img .timeline__text {
    width: 100%;
  }
  
  .timeline__item--left .timeline__text {
    padding-inline-end: 32px;
  }
  
  .timeline__item--right .timeline__text {
    order: 2;
    padding-inline-start: 32px;
  }
  
  .timeline__item--no-img .timeline__text {
    padding-inline-end: .56rem;
    padding-inline-start: .56rem;
  }
  
  .timeline__img {
    width: 30%;
    flex-shrink: 0;
    text-align: center;
  }

  .timeline__img-tag {
    width: 100%;
  }
}

@media (max-width: 1139px) {
  .timeline__img {
    margin-top: 32px;
  }
}

@media (max-width: 767px) {

  .timeline {
    padding: 0;
  }

  .timeline__item {
    max-width: 100%;
    margin: 0;
  }
  
  .timeline__box {
    max-width: 100%;
    padding-bottom: 41.6px;
  }
  
  .timeline__item + .timeline__item .timeline__box {
    margin-top: 32px;
  }

  .timeline__bar,
  .timeline__dot,
  .timeline__box:after {
    display: none;
  }
}


/* Custom project styles */
/* ================================================================ */

.timeline__text h1, .timeline__text .h1, 

.timeline__text h2, .timeline__text .h2, 

.timeline__text h3, .timeline__text .h3, 

.timeline__text h4, .timeline__text .h4, 

.timeline__text h5, .timeline__text .h5, 

.timeline__text h6, .timeline__text .h6
 {
	margin-bottom: 16.0px;
}

.timeline__text a {
	display: inline-block;
	text-align: left;
	max-width: max-content;
	overflow: visible;
	position: relative;
	font-weight: 500;
}

.timeline__text a::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%; right: -20px;
	transform: translateY(calc(-50% + 1px));
	width: 10px; height: 11px;
/*
	background: url('data:image/svg+xml;utf-8,<svg fill="%2300cdff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
*/
}

/*
.timeline__text a:hover::before {
	background: url('data:image/svg+xml;utf-8,<svg fill="%23061017" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"/></svg>');
}
/*

.timeline__dot:before {
	background: #061017;
}

.ttip {
	color: #fff;
}

.ttip:not(.ttip--accent)::before,
.ttip:not(.ttip--accent)::after {
	background: #061017;
}