/* Timeline - scroll-snap Variante */
.ct-timeline-wrap{position:relative;padding:60px 40px;background:transparent;overflow:hidden;}
.ct-tl-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:40px 80px;
}
.ct-tl-track{display:flex;align-items:center;gap:120px;min-width:100%;position:relative;}
.ct-tl-item{
  scroll-snap-align:center;
  min-width:320px;flex:0 0 auto;display:flex;justify-content:center;position:relative;
}
/* central line */
.ct-timeline-wrap::before{
  content:"";position:absolute;left:120px;right:120px;top:50%;height:4px;background:#e6e6e6;border-radius:2px;transform:translateY(-50%);z-index:0;
}
.ct-tl-item::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid #e6e6e6;z-index:1;
}
/* card */
.ct-tl-card{background:#fff;border-radius:10px;padding:22px 28px;box-shadow:0 1px 0 rgba(0,0,0,0.06);width:320px;z-index:2;border:1px solid #ddd;position:relative;}
.ct-tl-card h3{color:#0f7f73;margin:0 0 8px;font-size:20px;}
.ct-tl-card p{margin:0;color:#4b4b4b;line-height:1.45}
.ct-tl-card::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:100%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff;}

/* nav buttons - moved outside content area */
.ct-tl-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(0,0,0,0.08);background:#fff;z-index:4;display:flex;align-items:center;justify-content:center;font-size:22px;color:#0f7f73;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.08)
}
.ct-tl-prev{left:18px}
.ct-tl-next{right:18px}

/* restrict visible line edges to viewport when small sets */
.ct-tl-viewport:focus{outline:none;}

/* responsive */
@media (max-width:1000px){
  .ct-tl-track{gap:48px;padding:0}
  .ct-timeline-wrap::before{left:60px;right:60px}
  .ct-tl-viewport{padding:24px 60px}
}
@media (max-width:700px){
  .ct-tl-item{min-width:240px}
  .ct-tl-card{width:240px;padding:16px}
  .ct-tl-nav{display:none}
  .ct-timeline-wrap::before{left:40px;right:40px}
}