/* Scroll area */
.scroll-wrapper {
    height: 400vh;
    width: 1104px;
    margin: 0 auto;
}

/* Sticky runway container */
.runway-container {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    left: 50%;
}

/* Runway */
.runway {
  width: 102px;
  height: 140vh;
  background: url(../images/runway.svg) no-repeat;
  position: relative;
}

/* Plane */
.plane {
  position: absolute;
  top: 10%;
  font-size: 40px;
  z-index: 10;
  transition: opacity 0.4s ease, transform 0.1s linear;
}

.plane.hide {
  opacity: 0;
}

/* Milestones */
.milestone {
  position: absolute;
  top: 110%; /* 👈 base hidden position */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.milestone.show {
  opacity: 1;
  transform: translateY(0);
}

.milestone span {
  color: orange;
  font-weight: bold;
}

.milestone.left {
    left: 102.5px;
    text-align: right;
}


.milestone.right {
  right: 106.5px;
}


/* .milestone.left .timelinelogo_bx:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 4px;
    background: url(../images/shape.svg) no-repeat;
    width: 100%;
    height: 100px;
}
.milestone.right .timelinelogo_bx:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 4px;
    background: url(../images/shape_right.svg) no-repeat;
    width: 100%;
    height: 100px;
} */
.timelinelogo_bx {
/*     background: #2A2E36; */
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    position: relative;
    left: 2px;
    margin-bottom: 10px;
}
.timelinelogo_bx img {
    width: 200px;
    height: 90px;
    object-fit: contain;
/*     filter: brightness(0) invert(1); */
    padding: 10px;
}
.timeline_box .timeline_year {
    color: #FF7600;
    text-align: left;
    font-weight: 500;
    margin-bottom: 0;
}
/* Spacer so footer never overlaps */
.timeline-spacer {
  height: 120vh;
}