/* ===============================
   BASE LAYOUT
================================= */
.vt-timeline-wrapper{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  font-family:Arial,sans-serif;
}

/* slider always full screen */
.vt-slides{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* ===============================
   LEFT YEARS NAV (OVERLAY)
   - 50% height
   - vertically centered
   - scroll when extra years
================================= */
.vt-years-nav{
      position: absolute;
    left: 0;
    top: 60%;
    transform: translateY(-60%);
    height: 65vh;
    width: clamp(78px, 8vw, 120px);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: clamp(12px, 4vh, 22px) 0;
    z-index: 50;

  /* Optional background 
  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border-top-right-radius:18px;
  border-bottom-right-radius:18px;*/
}

/* Divider line between nav and slider */
.vt-years-nav:after{
  content:"";
  position:absolute;
  top:0;
  right:-1px;
  width:2px;
  height:100%;
  background:transparent;
}

/* inner vertical line behind years */
.vt-years-line{
  position:absolute;
  top:clamp(14px, 2vh, 24px);
  bottom:clamp(14px, 2vh, 24px);
  left:50%;
  width:1px;
background:transparent;
  transform:translateX(-50%);
  z-index:0;
}

/* arrows */
.vt-nav-arrow{
  width:clamp(32px, 4vw, 42px);
  height:clamp(32px, 4vw, 42px);
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.35);
  color:#fff;
  cursor:pointer;
  transition:all .25s;
  font-size:clamp(12px, 1.2vw, 16px);
  line-height:1;
  flex:0 0 auto;
  z-index:2;
}

.vt-nav-arrow:hover{
  border-color:#ffcc00;
  color:#ffcc00;
}

/* years list wrapper (SCROLLABLE) */
.vt-years-list{
  width:100%;
  flex:1;
  min-height:0; /* IMPORTANT for scroll inside flex */

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  
  padding:25px 0;

  overflow-y:auto;  /* IMPORTANT */
  overflow-x:hidden;

  scroll-behavior:smooth;
  z-index:2;
  gap:clamp(15px, 3vh, 30px);
}

/* hide scrollbar */
.vt-years-list::-webkit-scrollbar{
  width:0;
  height:0;
}

.vt-year-item{
  cursor:pointer;
  font-size:clamp(12px, 1.4vw, 16px);
  transition:all .25s;
  opacity:.7;
  user-select:none;
  white-space:nowrap;
  z-index:2;
}

.vt-year-item:hover{ opacity:1; }

.vt-year-item.active{
  color:#ffcc00;
  font-weight:bold;
  opacity:1;
}

/* ===============================
   SLIDES (SMOOTH TRANSITION)
================================= */
.vt-slide{
  position:absolute;
  inset:0;

  opacity:0;
  visibility:hidden;

  transform:scale(1.01); /* small scale to avoid jump */
  transition:opacity .8s ease, transform .8s ease;

  will-change:opacity, transform;
}

.vt-slide.active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
}

/* background layer (GPU smooth) */
.vt-slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;

  transform:scale(1) translateZ(0);
  will-change:transform;
}

/* zoom out only in 1 second */
.vt-slide.active .vt-slide-bg{
  animation: zoomout 2s ease-out forwards;
}

@keyframes zoomout{
  from{ transform:scale(1.5) translateZ(0); }
  to{ transform:scale(1) translateZ(0); }
}

/* ===============================
   OVERLAY CONTENT (FADE + CENTER)
================================= */
.vt-slide-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
  color:#fff;

  padding:clamp(18px, 5vw, 70px);

  /* leave space for years overlay nav */
  padding-left:calc(clamp(78px, 8vw, 120px) + clamp(20px, 3vw, 60px));

  display:flex;
  align-items:center;

  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s ease, transform .7s ease;

  overflow:hidden;
}

.vt-slide.active .vt-slide-overlay{
  opacity:1;
  transform:translateY(0);
}

/* content wrapper */
.vt-overlay-inner{
  width:100%;
  max-width:min(650px, 92%);
}

/* Big year inside content */
.vt-content-year{
  font-size:clamp(30px, 5vw, 60px);
  font-weight:700;
  color:#ffcc00;
  margin-bottom:clamp(12px, 2vw, 20px);
  line-height:1;
}

/* Title */
.vt-content-text h2{
  font-size:clamp(18px, 2.4vw, 32px);
  margin:0 0 clamp(10px, 1.5vw, 16px);
  color:#ffffff;
}

/* Description */
.vt-content-text p{
  font-size:clamp(14px, 1.5vw, 16px);
  line-height:1.65;
  opacity:.95;
}

/* allow scroll if content long */
.vt-slide-overlay{
  overflow-y:auto;
}

/* ===============================
   BOTTOM NAV (progress + pause)
================================= */
.vt-bottom-nav{
  position:absolute;
  left:calc(clamp(78px, 6vw, 120px) + clamp(18px, 5vw, 70px));
  right:clamp(18px, 5vw, 70px);
  bottom:clamp(14px, 3vw, 30px);

  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:10;
}

.vt-bottom-left{
  display:flex;
  align-items:center;
  gap:20px;
}

.vt-counter{
  font-size:14px;
  color:#fff;
  opacity:.95;
  letter-spacing:.5px;
}

.vt-pause-btn{
  background:transparent;
  border:none;
  color:#fff;
  font-size:14px;
  cursor:pointer;
  padding:0;
  opacity:.9;
  transition:opacity .25s;
}

.vt-pause-btn:hover{ opacity:1; }

.vt-pause-icon{
  margin-left:8px;
  font-weight:bold;
}

/* progress line */
.vt-progress{
  width:100%;
  height:3px;
  background:rgba(255,255,255,0.35);
  position:relative;
  overflow:hidden;
}

.vt-progress-bar{
  width:0%;
  height:100%;
  background:#fff;
  transition:width linear;
}

/* ===============================
   TABLET BREAKPOINT
================================= */
@media (max-width: 1024px){
  .vt-years-nav{
    width:clamp(70px, 10vw, 100px);
  }

  .vt-slide-overlay{
    padding-left:calc(clamp(70px, 10vw, 100px) + clamp(18px, 4vw, 50px));
  }

  .vt-bottom-nav{
    left:calc(clamp(70px, 10vw, 100px) + clamp(18px, 4vw, 50px));
  }
}

/* ===============================
   MOBILE BREAKPOINT
================================= */
@media (max-width:768px){

  /* nav becomes top bar */
  .vt-years-nav{
    position:absolute;
    top:0;
    left:0;
    transform:none;

    width:100%;
    height:auto;

    flex-direction:row;
    justify-content:flex-start;
    gap:12px;
    padding:12px 14px;

    background:rgba(0,0,0,0.65);
    border-radius:0;
  }

  .vt-years-nav:after,
  .vt-years-line{
    display:none;
  }

  .vt-years-list{
    flex-direction:row;
    gap:12px;
    flex:1;
    overflow-x:auto;
    overflow-y:hidden;
    justify-content:flex-start;
    padding:0;
  }

  .vt-slide-overlay{
    align-items:flex-start;
    padding:20px;
    padding-top:90px; /* space for top nav */
  }

  /* bottom nav full width */
  .vt-bottom-nav{
    left:18px;
    right:18px;
  }

  .vt-slides{
    height:100vh;
  }

  .vt-content-year{
    font-size:46px;
  }
}

/* optional separator image */
.forLineBg {
  width:100%;
  opacity:.7;
  height:4.5rem;
  display:inline-block;
  background-image:url(../img/3.svg);
  background-repeat:no-repeat;
  background-position:center;
}
/* use SVG icons for arrows */
.vt-nav-arrow{
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px 16px; /* adjust size */
}

/* UP arrow svg */
.vt-nav-up{
  background-image:url("../img/top.svg");
}

/* DOWN arrow svg */
.vt-nav-down{
  background-image:url("../img/bottom.svg"); /* create bottom.svg */
  transform: scaleY(-1);
}
/* show only 5 year items */
.vt-years-list{
  max-height: calc((30px * 1.5) * 5 + (35px * 4)); /* 5 items + 4 gaps */
  overflow-y: auto;
  scrollbar-width: none; /* firefox hide scrollbar */
}

.vt-years-list::-webkit-scrollbar{
  display:none; /* chrome hide scrollbar */
}
.vt-years-list{
  height:60%;       /* already you wanted nav 50% */
  overflow-y:auto;
}
.vt-year-item{
  position:relative;
  padding-bottom:30px; /* space for line */
}

/* line after every year */
.vt-year-item::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:20px;   /* line length */
  height:18px;  /* line height */
  background-image:url('../img/3.svg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.9;
}

/* remove line after last year */
.vt-year-item:last-child::after{
  display:none;
}