.timeline-filters {
  display: flex;
    flex-wrap: wrap; 
     gap: 0;
     margin-bottom: 20px;
     color: #fff;
     align-items: center;
 gap: 7px;
}

.fil-rt {
  display: flex;
    flex-wrap: wrap; 
}

 .timeline-filters h4 {
     margin: 0;
     font-weight: 300;
     padding-right: 25px;
}
 .tl-filter {
     border: 0;
     padding: 20px 30px;
     border-radius: 0;
     cursor: pointer;
     border: #455075 solid 1px;
     text-align: center;
}
 .tl-filter.active {
     background: #455075 !important;
     color: #fff !important;
}
 .timeline-wrapper {
     position: relative;
     margin-top:80px;
     padding-left: 18%;
}
 .timeline-item {
     position: relative;
     border-left: #959698 solid 2px;
     padding-bottom: 50px;
}
 .timeline-item:last-child {
     border: none;
}
.timeline-year {
    position: absolute;
    left: -107px;
    top: 0;
    /* background: #222; */
    color: #959698;
    border-radius: 16px;
    padding: 0px 14px;
    font-weight: 400;
    font-size: 26px;
    width: 96px;
}

 /* .timeline-year:after {
     content: "";
     background: #959698;
     width: 17px;
     height: 17px;
     display: block;
     position: absolute;
     right: -18px;
     top: -2px;
     border-radius: 100px;
     outline-color: #0055ff;
     outline-offset: 3px;
     outline: #959698 solid 2px;
}  */ 


 .timeline-content {
     color: #fff;
     padding-left: 10%;
     display: flex;
     gap: 10%; }

 .timeline-content a {
     color: #fff;
     text-decoration: underline;
}

 .timeline-content a:hover {
     color: #F3D257;
}

 h3.timeline-title {
     font-size: 25px;
     color: #F3D257;
     margin-bottom: 25px;
}

 .timeline-desc {
     margin-bottom: 10px;
     width: 60%;
}
 .timeline-image {
     width: 40%;
}
 .timeline-image img {
     max-width: 100%;
     display: block;
     width: 100%;
}
 .timeline-link {
     display: inline-block;
     margin-top: 8px;
}

.timeline-item.timeline-end {
    padding-bottom: 0;
}

.active .timeline-year {
    color: #F3D257;
}

/*--animation-----*/
 

/* timeline vertical line */
#timeline::before {
    content: "";
    position: absolute;
    left: auto;
    top: 0;
    transform: translateX(-50%);
    width: 3px;
    height: var(--line-height, 0);
    background: #F3D257;
   transition: height 6.5s ease; /* 👈 slow effect */
    margin-left: 1px;
    z-index: 1;
}

/* timeline circles */
.timeline-item::before {
    content: "";
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #959698;
    outline: #959698 solid 2px;
    z-index: 2;
   transition: background 6.5s ease, box-shadow 6.5s ease; /* 👈 slow fill */
    outline-offset: 3px;
}
 
/* when active */
.timeline-item.active::before {
    background: #F3D257;
    outline: #F3D257 solid 2px;
}



.timeline-item.timeline-end {
    border: none;
}

.timeline-item.timeline-end .timeline-year {
    color: #F3D257;
}

.timeline-item.timeline-end .timeline-year:after {
    background: #F3D257;
    outline-color: #F3D257;
        right: -20px;
}


@media (max-width:991px) {   

.tl-filter { 
    padding: 13px 10px;
    text-align: center;
    min-width: 114px;
    font-size: 14px; }

.timeline-filters h4 { 
    font-size: 14px; }

.timeline-wrapper {
    padding-left: 25%;
}

.timeline-desc {
    width: 100%; }
    
.timeline-content {
    flex-flow: column;
}

.timeline-image {
    width: 100%;
    max-width: 250px; }


}