/* Import other timeline layouts */
@import url('./vertical-timeline-layout-right.css');
@import url('./vertical-timeline-layout-left.css');
@import url('./vertical-timeline-layout-compact.css');

/* =========================================
   Main Container & Structure
   ========================================= */
.ks-timeline-story-wrapper,
.ks-timeline-vertical-wrapper,
.ks-timeline-story-container {
  position: relative;
  margin: 0 auto;
}

.ks-timeline-story-wrapper {
  width: 100%;
  display: block;
  text-align: center;
  margin: 30px auto;
}

.ks-timeline-vertical-wrapper {
  text-align: left;
  padding: calc(var(--ks-line-width, 2px) * 3) 0;
}

.ks-timeline-story-container {
  margin: 0;
  padding: 40px 0;
  display: flow-root;
  width: 100% !important;
}

.ks-timeline-story-container::before {
  content: "";
  position: absolute;
  inset: 0 0 0 calc(50% - var(--ks-line-width, 2px) / 2);
  width: var(--ks-line-width, 2px);
  background-color: var(--ks-line-bg-color, #ccc);
}

/* =========================================
   Start/End Points & Progress Line
   ========================================= */
.ks-timeline-start,
.ks-timeline-end {
  background-color: var(--ks-line-bg-color, #ccc);
  width: calc(var(--ks-line-width, 2px) * 3);
  height: calc(var(--ks-line-width, 2px) * 3);
  position: absolute;
  left: calc(50% - var(--ks-line-width, 2px) * 1.5);
  z-index: 1;
  border-radius: 50%;
}

.ks-timeline-start {
  top: calc(var(--ks-line-width, 2px) / 2.5);
}

.ks-timeline-end {
  bottom: calc(var(--ks-line-width, 2px) / 2.5);
}

.ks-timeline-inner-line:not(.line-filling-false) {
  position: absolute;
  inset: 0 0 0 calc(50% - var(--ks-line-width, 2px) / 2);
  width: var(--ks-line-width, 2px);
  background-color: var(--ks-line-filling-color, #007cba);
  height: 0;
  max-height: 100%;
  transition: height 0.6s ease-in-out;
}

.inner-line-filling-false .line-filling-false {
  display: none;
}

/* =========================================
   Year Markers
   ========================================= */
.ks-timeline-year {
  position: relative;
  margin: 22px 0 50px;
  justify-content: center;
  width: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent !important;
}

.ks-timeline-year-label {
  width: calc(var(--ks-year-box-size, 60px) * 1.5);
  height: calc(var(--ks-year-box-size, 60px) * 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  overflow: hidden;
  background-color: var(--ks-year-box-bg, #fff);
  color: var(--ks-year-text-color, #333);
  border-radius: var(--ks-year-box-radius, 4px);
  box-shadow:
    0 0 0 var(--ks-line-width, 2px) #fff,
    inset 0 0 0 var(--ks-line-width, 2px) rgba(0, 0, 0, 0.05),
    0 0 0 calc(var(--ks-line-width, 2px) * 2) var(--ks-line-bg-color, #ccc);
}

.ks-timeline-year-label.year-shape-circle {
  width: var(--ks-year-box-size, 60px);
  height: var(--ks-year-box-size, 60px);
  border-radius: 50%;
}

.ks-timeline-year.in-view .ks-timeline-year-label {
  box-shadow:
    0 0 0 2px #fff,
    inset 0 0 0 2px rgba(0, 0, 0, 0.05),
    0 0 0 5px var(--ks-line-filling-color, #007cba);
}

/* =========================================
   Timeline Stories & Layout
   ========================================= */
.ks-timeline-story {
  position: relative;
  width: calc(50% - (var(--ks-icon-size, 30px) + var(--ks-line-width, 2px) * 2));
  float: right;
  clear: both;
  margin-bottom: 50px;
}

.ks-timeline-story-left {
  float: left;
}

/* =========================================
   Labels & Text
   ========================================= */
.ks-timeline-labels {
  position: absolute;
  padding: 0;
  margin: 0;
  justify-content: space-between;
  top: calc(var(--ks-icon-position, 50) * 1% - var(--ks-icon-size, 30px) * var(--ks-icon-position, 50) / 100 - (var(--ks-label-big-size, 18px) / 2 - var(--ks-icon-size, 30px) / 2.5));
  right: calc(100% + var(--ks-icon-size, 30px) * 2 + var(--ks-line-width, 2px) * 2.5);
  text-align: left;
}

.ks-timeline-labels .ks-timeline-label-sm,
.ks-timeline-labels .ks-timeline-label-lg {
  line-height: 1em;
  white-space: nowrap;
  max-width: 100%;
  text-wrap: auto;
}

.ks-timeline-labels .ks-timeline-label-sm {
  color: var(--ks-label-sm-color, #666);
  font-size: var(--ks-label-small-size, 14px);
  font-weight: var(--ks-label-small-weight, 400);
}

.ks-timeline-labels .ks-timeline-label-lg {
  color: var(--ks-label-lg-color, #333);
  font-size: var(--ks-label-big-size, 18px);
  font-weight: var(--ks-label-big-weight, 600);
}

.ks-timeline-story-left .ks-timeline-labels {
  left: calc(100% + var(--ks-icon-size, 30px) * 2 + var(--ks-line-width, 2px) * 2.5);
  right: auto;
}

.ks-timeline-story-right .ks-timeline-labels {
  text-align: right;
}

.ks-timeline-story-left .ks-timeline-labels,
.ks-timeline-story-right .ks-timeline-labels {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ks-label-gap, 8px);
}

/* =========================================
   Icons & Content Areas
   ========================================= */
.ks-timeline-icon {
  position: absolute;
  width: var(--ks-icon-size, 30px);
  height: var(--ks-icon-size, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: var(--ks-icon-bg, #fff);
  color: var(--ks-icon-color, #333);
  font-size: 20px;
  line-height: 1;
  left: calc(var(--ks-icon-size, 30px) / 2 - (var(--ks-icon-size, 30px) * 2 + var(--ks-line-width, 2px) * 2));
  top: calc(var(--ks-icon-position, 50) * 1% - var(--ks-icon-size, 30px) * var(--ks-icon-position, 50) / 100);
  border-radius: var(--ks-icon-radius, 4px);
  box-shadow:
    0 0 0 var(--ks-line-width, 2px) #fff,
    inset 0 0 0 var(--ks-line-width, 2px) rgba(0, 0, 0, 0.05),
    0 0 0 calc(var(--ks-line-width, 2px) * 2) var(--ks-line-bg-color, #ccc);
}

.ks-timeline-story-left .ks-timeline-icon {
  background-color: var(--ks-icon-bg, #fff);
  left: auto;
  right: calc(var(--ks-icon-size, 30px) / 2 - (var(--ks-icon-size, 30px) * 2 + var(--ks-line-width, 2px) * 1.5));
}

.ks-timeline-icon .ks-timeline-icon-color {
  font-size: var(--ks-icon-text-size, 16px);
  color: var(--ks-icon-color, #333);
}

.ks-timeline-icon svg.ks-timeline-icon-color {
  fill: var(--ks-icon-color, #333);
  width: var(--ks-icon-text-size, 16px);
  height: var(--ks-icon-text-size, 16px);
}

.ks-timeline-story.in-view .ks-timeline-icon:not(.icon-filling-false) {
  background-color: var(--ks-line-filling-color, #007cba);
  box-shadow:
    0 0 0 2px #fff,
    inset 0 0 0 2px rgba(0, 0, 0, 0.05),
    0 0 0 5px var(--ks-line-filling-color, #007cba);
}

.ks-timeline-content {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  position: relative;
  margin: 0;
  background-color: var(--ks-content-box-bg-color, #fff);
  border-radius: var(--ks-content-box-radius, 4px);
  padding: var(--ks-content-box-padding, 20px);
  border-style: solid;
  border-width: var(--ks-content-box-border-top-width, 1px) var(--ks-content-box-border-right-width, 1px) var(--ks-content-box-border-bottom-width, 1px) var(--ks-content-box-border-left-width, 1px);
  border-color: var(--ks-content-box-border-color, #e5e5e5);
}

.ks-timeline-story.ks-timeline-story-left .ks-timeline-content {
  border-width: var(--ks-content-box-border-top-width, 1px) var(--ks-content-box-border-left-width, 1px) var(--ks-content-box-border-bottom-width, 1px) var(--ks-content-box-border-right-width, 1px);
}

.ks-timeline-head h1,
.ks-timeline-head h2,
.ks-timeline-head h3,
.ks-timeline-head h4,
.ks-timeline-head h5,
.ks-timeline-head h6 {
  margin-bottom: 0;
}

.ks-timeline-title {
  cursor: context-menu;
  width: 100%;
  font-size: var(--ks-content-box-title-font-size, 18px);
  font-weight: 600;
  line-height: 28px;
  color: var(--ks-content-box-title-color, #333);
}

.ks-timeline-title a {
  text-decoration: none !important;
  color: var(--ks-title-color, #333);
  cursor: pointer;
}

.ks-timeline-description {
  width: 100%;
  order: 3;
  display: inline-block;
  margin: 0;
  color: var(--ks-content-box-desc-color, #666);
  font-size: var(--ks-content-box-desc-font-size, 14px);
}

.ks-timeline-description p {
  color: inherit;
  margin: 0;
}

.ks-timeline-media img {
  width: 100%;
  height: auto;
  display: block;
}

.ks-timeline-btn-wrapper {
  padding: 15px 0;
}

/* =========================================
   Arrows - Optimized Structure
   ========================================= */
.ks-timeline-arrow {
  position: absolute;
  width: calc(var(--ks-icon-size, 30px) / 2.5);
  height: calc(var(--ks-icon-size, 30px) / 2.5);
  transform: rotate(45deg);
  border-style: var(--ks-content-box-border-style, solid);
  border-color: var(--ks-content-box-border-color, #e5e5e5);
  z-index: 2;
}

/* Vertical Arrows */
.ks-timeline-vertical-wrapper .ks-timeline-arrow {
  left: calc(var(--ks-icon-size, 30px) / 6);
  top: calc(var(--ks-icon-position, 50) * 1% - var(--ks-icon-size, 30px) * var(--ks-icon-position, 50) / 100 + var(--ks-icon-size, 30px) / 2 - var(--ks-icon-size, 30px) / 7);
  background: linear-gradient(to right, var(--ks-content-box-bg-color, #fff) 50%, transparent 48%);
  border-width: 0 0 var(--ks-content-box-border-left-width, 1px) var(--ks-content-box-border-left-width, 1px);
}

/* Right Side Arrows */
.ks-timeline-story-right .ks-timeline-arrow {
  left: calc(var(--ks-icon-size, 30px) / 8 - var(--ks-icon-size, 30px) / 3 + var(--ks-content-box-border-left-width, 1px) / 3);
  background: linear-gradient(to top right, var(--ks-content-box-bg-color, #fff) 52%, transparent 48%);
  border-width: 0 0 var(--ks-content-box-border-left-width, 1px) var(--ks-content-box-border-left-width, 1px);
}

/* Left Side Arrows */
.ks-timeline-story-left .ks-timeline-arrow {
  left: auto;
  right: calc(var(--ks-icon-size, 30px) / 8 - var(--ks-icon-size, 30px) / 3 + var(--ks-content-box-border-left-width, 1px) / 3);
  background: linear-gradient(to bottom left, var(--ks-content-box-bg-color, #fff) 52%, transparent 48%);
  border-width: var(--ks-content-box-border-left-width, 1px) var(--ks-content-box-border-left-width, 1px) 0 0;
}

/* =========================================
   Button Component
   ========================================= */
.button-60 {
  font-size: 14px !important;
  align-items: center;
  appearance: none;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 1.5;
  padding: calc(0.5em - 1px) 1em;
  position: relative;
  text-align: center;
  user-select: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.button-60:active {
  border-color: #4a4a4a;
  outline: 0;
}

.button-60:hover {
  border-color: #b5b5b5;
}

.button-60:focus:not(:active) {
  box-shadow: rgba(72, 95, 199, 0.25) 0 0 0 0.125em;
}
/* ================== Mobile Responsive ================== */
@media (max-width: 767px) {
   .ks-timeline-vertical-wrapper {
      text-align: left;
      padding: calc(var(--ks-line-width, 2px)*3) 0;
      margin: 0 auto;
   }

   .ks-timeline-vertical-wrapper .ks-timeline-year {
      justify-content: flex-start;
      left: calc(-1*var(--ks-line-width, 2px)/2 + var(--ks-icon-size, 30px)/2);
      margin: 20px 0;
      overflow-x: hidden;
      padding: 20px 0 !important;
   }

   .ks-timeline-vertical-wrapper .ks-timeline-story-container {
      overflow: visible;
   }

   .ks-timeline-year-label {
      position: relative;
      overflow: visible !important;
      left: calc(var(--ks-icon-size, 30px)*1.5);
   }

   .ks-timeline-year-label::before {
      content: "";
      position: absolute;
      top: calc(50% - var(--ks-line-width, 2px)/2) !important;
      right: 100%;
      width: 100%;
      height: var(--ks-line-width, 2px);
      background-color: var(--ks-line-bg-color, #ccc);
      z-index: -1;
   }

   .ks-timeline-year.in-view .ks-timeline-year-label::before {
      background-color: var(--ks-line-filling-color, #007cba);
   }

   .ks-timeline-start,
   .ks-timeline-end {
      left: calc(var(--ks-icon-size, 30px)/2 - var(--ks-line-width, 2px)*1.5);
   }

   .ks-timeline-story-container::before,
   .ks-timeline-inner-line {
      left: calc(var(--ks-icon-size, 30px)/2 - var(--ks-line-width, 2px)/2);
   }

   .ks-timeline-story {
      width: auto;
      float: unset;
      text-align: left;
      margin-left: calc(var(--ks-icon-size, 30px)*1.5 + var(--ks-line-width, 2px)*2);
      top: 0;
   }

   .ks-timeline-story .ks-timeline-icon,
   .ks-timeline-story .ks-timeline-story-left .ks-timeline-icon {
      top: calc(var(--ks-icon-position, 50)*1% - var(--ks-icon-size, 30px)*var(--ks-icon-position, 50)/100 + var(--ks-label-big-size, 18px) + var(--ks-label-small-size, 14px) + var(--ks-label-gap, 8px) + 30px - ((var(--ks-label-big-size, 18px) + var(--ks-label-small-size, 14px) + var(--ks-label-gap, 8px) + 12px)*var(--ks-icon-position, 50)/100));
      left: calc(var(--ks-icon-size, 30px)/2 - var(--ks-icon-size, 30px)*2 - var(--ks-line-width, 2px)*2) !important;
   }

   .ks-timeline-story .ks-timeline-arrow,
   .ks-timeline-story .ks-timeline-story-left .ks-timeline-arrow {
      top: calc(var(--ks-icon-position, 50)*1% - var(--ks-icon-size, 30px)*var(--ks-icon-position, 50)/100 + var(--ks-label-big-size, 18px) + var(--ks-label-small-size, 14px) + var(--ks-label-gap, 8px) + 40px - ((var(--ks-label-big-size, 18px) + var(--ks-label-small-size, 14px) + var(--ks-label-gap, 8px) + 12px)*var(--ks-icon-position, 50)/100));
      left: calc(var(--ks-icon-size, 30px)/7 - var(--ks-icon-size, 30px)/3 + var(--ks-content-box-border-left-width, 1px)/3);
      border-width: 0 0 var(--ks-content-box-border-left-width, 1px) var(--ks-content-box-border-left-width, 1px);
      background: linear-gradient(to top right, var(--ks-content-box-bg-color, #fff) 52%, transparent 48%);
   }

   .ks-timeline-labels {
      position: relative;
      inset: 0;
      width: 100%;
      margin: 20px 5px 20px 0;
      text-align: left !important;      
   }

   .ks-timeline-story-left .ks-timeline-labels {
      color: var(--ks-second-color, #666);
      left: 0;
      right: auto;
      position: relative;
      top: 0;
   }

   .ks-timeline-story.ks-timeline-story-left .ks-timeline-content {
      border-width: var(--ks-content-box-border-top-width, 1px) var(--ks-content-box-border-right-width, 1px) var(--ks-content-box-border-bottom-width, 1px) var(--ks-content-box-border-left-width, 1px) !important;
   }
   
}