.timeline-holder { padding: 0 160px; }
.timeline-item { width: 290px; max-width: calc(100vw - 60px); height: auto; }
.timeline-box {  flex-flow: column; min-height: 460px; height: 100%;}
.timeline-box-year-wrapper { height: 220px; margin-bottom: 42px; }
.timeline-box-year-holder {  text-align: center;    align-items: end; height: 100%;}
.timeline-box-year { font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: .05em; padding: 8px 35px;}
.tby-shape { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid currentColor; }

.timeline-box-content-wrapper { height: 220px; margin-top: 38px; align-items: start; }
.timeline-box-content { padding: 15px 20px; gap: 16px; }
.tbc-text {line-height: 1.1;flex-grow: 1;max-height: 190px;overflow-y: auto;}
.tbc-text h3 { font-size: 18px; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 11px; }
.tbc-icon { width: 30px; flex-shrink: 0; padding-top: 6px; }
.tbc-text::-webkit-scrollbar { width: 3px; }
.tbc-text::-webkit-scrollbar-track { background: transparent;  }
.tbc-text::-webkit-scrollbar-thumb { background-color: var(--kal-black);  border-radius: 4px; }

.timeline-line {position: relative;width: 100%;height: 20px;background: var(--kal-black);}
.timeline-line-square { width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: currentColor; }

.timeline-item:nth-child(even) .timeline-box { flex-flow: column-reverse; }
.timeline-item:nth-child(even) .timeline-box-year-wrapper { margin: 42px 0 0; }
.timeline-item:nth-child(even) .timeline-box-year-holder { align-items: flex-start; }
.timeline-item:nth-child(even) .tby-shape { top: -18px; border: 0; border-bottom: 18px solid currentColor; }
.timeline-item:nth-child(even) .timeline-box-content-wrapper { margin: 0 0 42px; align-items: flex-end; }

.timeline-box-content::before, .timeline-box-content::after { content: ''; position: absolute; width: 1px; background: var(--kal-grey); z-index: 1;}
.timeline-box-content::before { bottom: 0;left: 100%; height: calc(100% + 42px); }
.timeline-box-content::after { bottom: 0;right: 100%; height: calc(100% + 62px); }
.timeline-item:nth-child(even) .timeline-box-content::before, .timeline-item:nth-child(even) .timeline-box-content::after { top: 0; bottom: auto; }
.timeline-item:last-child .timeline-box-content::before, .timeline-item:first-child .timeline-box-content::after { display: none; }

.custom-swiper-button { position: absolute; top: 50%; transform: translateY(-50%); width: 75px; height: 75px; padding: 12px;}
.custom-swiper-button-prev { left: 35px;}
.custom-swiper-button-next { right: 25px;}
.custom-swiper-button.swiper-button-disabled { opacity: .3; filter: grayscale(100%); cursor: no-drop; }


/* ========================================== 
! Large devices (desktops, less than 1400px)
=========================================== */
@media (max-width:1399.98px){
    .timeline-holder { padding: 0 110px; }
    .custom-swiper-button { padding: 15px; }
    .custom-swiper-button-prev { left: 2px; }
    .custom-swiper-button-next { right: 2px; }

}
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px){ 
    .timeline-holder { padding: 0 86px; }
    .timeline-item { width: 310px; }
    .timeline-box-content { gap: 40px; }
    .custom-swiper-button { width: 55px; height: 55px; padding: 10px;}
}
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px){
    .timeline-holder { padding: 0 95px; }
    .timeline-item { width: 260px; }
    .timeline-box-content { gap: 10px; padding: 15px 10px 15px 20px;}
    .tbc-icon { width: 25px; } 
    .custom-swiper-button { width: 66px; height: 66px; padding: 13px;}
    .custom-swiper-button-prev { left: 0; }
    .custom-swiper-button-next { right: 0; }
}
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px){
    .timeline-holder { padding: 0; }
    .timeline-slider { overflow: visible;}
    .timeline-item:first-child .timeline-line:after, .timeline-item:last-child .timeline-line:after { content: ''; width: 15px; height: 100%; position: absolute; top: 50%; transform: translateY(-50%); background: var(--kal-black); }
    .timeline-item:first-child .timeline-line::after { right: 100%; }
    .timeline-item:last-child .timeline-line::after { left: 100%; }
    .custom-slider-navigation { margin-top: 25px; }
    .custom-swiper-button { position: relative; top: auto; transform: none; }
}
/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px){
}
/* ======================================================
! Extra small devices (portrait phones, less than 370px)
====================================================== */
@media (max-width:369.98px){
}