.do-timeline{
  width:100%;
  text-align:center;
}

.do-timeline,
.do-timeline *{
  box-sizing:border-box;
}

.do-track{
  position:relative;
  max-width:1400px;
  margin:0 auto;
}

/* Outer shell keeps line + dots aligned */
.do-swiper-shell{
  --do-side-gap: 90px;
  position:relative;
  width:min(1200px, 100%);
  margin:0 auto;
  padding:12px var(--do-side-gap);
}

/* This viewport clips extra half circles */
.do-swiper-viewport{
  position:relative;
  overflow:hidden;
  width:100%;
}

.do-swiper{
  position:relative;
  width:100%;
  overflow:visible;
}

/* Center line */
.do-line{
  position:absolute;
  left:var(--do-side-gap);
  right:var(--do-side-gap);
  top:50%;
  height:2px;
  background:#b9d86a;
  transform:translateY(-50%);
  z-index:0;
  opacity:.85;
  pointer-events:none;
}

/* Fixed edge dots */
.do-edge-dot{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.5px solid #0b1e3a;
  background:#fff;
  z-index:3;
  pointer-events:none;
}

.do-edge-dot-left{
  left:var(--do-side-gap);
}

.do-edge-dot-right{
  right:var(--do-side-gap);
}

.do-swiper .swiper-wrapper{
  align-items:center;
}

.do-swiper .swiper-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
}

/* Fixed arrows */
.do-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  padding: 0px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background:#0b1e3a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}

.do-prev{
  left:10px;
}

.do-next{
  right:10px;
}

.do-arrow:hover{
  filter:brightness(1.05);
}

.do-arrow-icon{
  font-size:18px;
  line-height:1;
}

.do-arrow-img{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
}

.do-arrow svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* Year circles */
.do-year{
  position:relative;
  z-index:2;
  width:62px;
  height:62px;
  border-radius:50%;
  border:1.8px solid #0b1e3a;
  background:#fff;
  color:#0b1e3a;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .25s ease;
}

.do-year:hover{
  background:#0b1e3a;
  color:#fff;
}

.do-swiper .swiper-slide-prev .do-year,
.do-swiper .swiper-slide-next .do-year{
  width:70px;
  height:70px;
}

.do-year.is-active{
  width:86px;
  height:86px;
  background:#0b1e3a;
  color:#fff;
  border-color:#0b1e3a;
  box-shadow:0 0 0 4px #b9d86a;
}

/* Content */
.do-content{
  margin-top:34px;
  max-width:760px;
  margin-inline:auto;
}

.do-content h3{
  margin:0 0 10px;
  font-size:18px;
  color:#0b1e3a;
  font-weight:700;
}

.do-content p{
  margin:0;
  font-size:12px;
  color:#6b7280;
  line-height:1.6;
}

/* No arrows state */
.do-track.no-arrows .do-swiper-shell{
  --do-side-gap: 24px;
}

/* Responsive */
@media (max-width: 1024px){
  .do-swiper-shell{
    width:100%;
  }
}

@media (max-width: 767px){
  .do-swiper-shell{
    --do-side-gap: 70px;
    padding-top:12px;
    padding-bottom:12px;
  }

  .do-track.no-arrows .do-swiper-shell{
    --do-side-gap: 18px;
  }

  .do-prev{
    left:6px;
  }

  .do-next{
    right:6px;
  }

  .do-content{
    margin-top:26px;
    padding:0 16px;
  }

  .do-content h3{
    font-size:16px;
  }

  .do-content p{
    font-size:12px;
  }
}