/*=====================================================
Milestones
=====================================================*/

.zup-milestones{
    position:relative;
    width:100%;
    color:#fff;
}

.zup-milestones-data{
    display:none;
}

/*=====================================================
Header
=====================================================*/

.zup-milestones-header{
    position:relative;
    margin-bottom:40px;
}

.zup-milestones-line{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent 0%,
        #8d97a3 20%,
        #8d97a3 80%,
        transparent 100%
    );
    z-index:1;
}

.zup-milestones-line-top{
    top:0;
}

.zup-milestones-line-bottom{
    bottom:0;
}

/*=====================================================
Scroll
=====================================================*/

.zup-milestones-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    cursor:grab;
}

.zup-milestones-scroll::-webkit-scrollbar{
    display:none;
}

.zup-milestones-scroll.dragging{
    cursor:grabbing;
}

/*=====================================================
Years
=====================================================*/

.zup-milestones-years{
    display:flex;
    align-items:center;
    gap:90px;
    width:max-content;
    padding:15px calc(50vw - 90px);
}

.zup-milestone-year{
    flex:0 0 auto;
    font-size:35px;
    font-weight:400;
    line-height:1;
    color:rgba(255,255,255,.25);
    cursor:pointer;
    user-select:none;
    transition:.35s ease;
}

.zup-milestone-year:hover{
    color:rgba(255,255,255,.6);
}

.zup-milestone-year.active{
    color:#fff;
}

/*=====================================================
Arrow
=====================================================*/

.zup-milestones-arrow{
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    z-index:20;
    pointer-events:none;
}

.zup-milestones-arrow img{
    display:block;
    width:24px;
    height:auto;
    filter:
        drop-shadow(0 4px 10px rgba(255,255,255,.15))
        drop-shadow(0 0 18px rgba(110,170,255,.18));
}

/*=====================================================
Content
=====================================================*/

.zup-milestones-content{
    max-width:auto;
    margin:0 auto;
}

.zup-milestone-panel{
    display:none;
    opacity:0;
    transform:translateY(20px);
}

.zup-milestone-panel.active{
    display:block;
    animation:zupMilestoneFade .45s ease forwards;
}

@keyframes zupMilestoneFade{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.zup-milestone-year{
    transition:.35s ease;
}

.zup-milestone-year.active{
    color:#fff;
    transform:scale(1.06);
    text-shadow:
        0 0 10px rgba(255,255,255,.25),
        0 0 30px rgba(140,190,255,.18);
}


.zup-milestone-panel h2{
    margin:0 0 35px;
    text-align:center;
    font-size:20px;
    font-weight:600;
    color:#fff;
	text-transform:uppercase;
}

.zup-milestone-text{
    font-size:18px;
    line-height:1.4;
}

.zup-milestone-text ul{
    margin:0;
    padding-left:22px;
}

.zup-milestone-text li{
    margin-bottom:0px;
}


.zup-milestone-year{
    position:relative;
}

.zup-milestone-year::after{
content: "";
  position: absolute;
  left: 50%;
  top: 130%;
  width: 170px;
  height: 90px;
  transform: translate(-50%,-50%);
  background: radial-gradient( ellipse, rgba(255,255,255,0.5) 0%, rgba(255,255,255,.0) 45%, transparent 90% );
  opacity: 0;
  transition: .35s;
  pointer-events: none;
  z-index: -1;
}

.zup-milestone-year.active::after{
    opacity:1;
}
/*=====================================================
Animation
=====================================================*/

@keyframes zupFade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*=====================================================
Responsive
=====================================================*/

@media(max-width:991px){

    .zup-milestones-years{
        gap:50px;
        padding:35px calc(50vw - 50px);
    }

    .zup-milestone-year{
        font-size:34px;
    }

    .zup-milestone-panel h2{
        font-size:18px;
    }

    .zup-milestone-text{
        font-size:18px;
    }

}