.zd-timeline {
  --zd-red: #9E1712;
  --zd-blue: #1DABE2;
  --zd-yellow: #FDDC1E;
  --zd-darkblue: #006689;
  --zd-heading: #1A202C;
  --zd-text: #737373;
  --zd-bg: #F8FAFC;
  --zd-line: #E2E8F0;

  font-family: inherit;
  color: var(--zd-text);
  box-sizing: border-box;
}
.zd-timeline *, .zd-timeline *::before, .zd-timeline *::after { box-sizing: border-box; }


.zd-tl__track {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 0;
}
.zd-tl__track::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--zd-line);
}


.zd-tl__item {
  position: relative;
  width: 50%;
  padding: 14px 48px;
}
.zd-tl__item[data-side="left"]  { left: 0; }
.zd-tl__item[data-side="right"] { left: 50%; }


.zd-tl__item::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
}
.zd-tl__item[data-side="left"]::before  { right: -1.5px; }
.zd-tl__item[data-side="right"]::before { left: -1.5px; }


.zd-tl__item::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--zd-blue);
  z-index: 2;
}
.zd-tl__item[data-side="left"]::after  { right: -9px; }
.zd-tl__item[data-side="right"]::after { left: -9px; }


.zd-tl__item[data-color="red"]::after      { border-color: var(--zd-red); }
.zd-tl__item[data-color="blue"]::after     { border-color: var(--zd-blue); }
.zd-tl__item[data-color="yellow"]::after   { border-color: var(--zd-yellow); }
.zd-tl__item[data-color="darkblue"]::after { border-color: var(--zd-darkblue); }

.zd-tl__item[data-color="red"]::before      { background: var(--zd-red); }
.zd-tl__item[data-color="blue"]::before     { background: var(--zd-blue); }
.zd-tl__item[data-color="yellow"]::before   { background: var(--zd-yellow); }
.zd-tl__item[data-color="darkblue"]::before { background: var(--zd-darkblue); }


.zd-tl__card {
  background: #fff;
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 12px 30px rgba(16,24,40,0.08);
}
.zd-tl__item[data-side="left"]  .zd-tl__card { text-align: right; }


.zd-tl__year {
  font-size: 30px;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 6px;
}
.zd-tl__item[data-color="red"]      .zd-tl__year { color: var(--zd-red); }
.zd-tl__item[data-color="blue"]     .zd-tl__year { color: var(--zd-blue); }
.zd-tl__item[data-color="yellow"]   .zd-tl__year { color: #C9A100; }      
.zd-tl__item[data-color="darkblue"] .zd-tl__year { color: var(--zd-darkblue); }




.zd-tl__text { margin: 0; font-size: 18px; line-height: 1.55; color: var(--zd-text);     text-align: justify;}



@media (max-width: 900px) {
  .zd-tl__item { padding: 12px 28px; }
}


@media (max-width: 600px) {
  .zd-tl__track::before { left: 20px; }
  .zd-tl__item,
  .zd-tl__item[data-side="left"],
  .zd-tl__item[data-side="right"] {
    width: 100%;
    left: 0;
    padding: 10px 0 10px 48px;
  }
  .zd-tl__item::before {
    left: 18.5px !important;
    right: auto !important;
  }
  .zd-tl__item::after {
    left: 11px !important;
    right: auto !important;
    top: 24px;
  }
  .zd-tl__item[data-side="left"]  .zd-tl__card,
  .zd-tl__item[data-side="right"] .zd-tl__card { text-align: left; }
  .zd-tl__year { font-size: 26px; }
}