/* Timeline wrapper */
.ev-timeline-wrap {
  max-width: 100%;
  padding: 20px;
  background: #fff;
  overflow-x: auto;
}

/* Timeline container */
.ev-timeline {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 60px;
  padding: 40px 0;
}

.ev-timeline-item.left .ev-timeline-year{
	top:50px;
}
.ev-timeline-item.right .ev-timeline-year {
	top:-32px;
}
.ev-timeline-text p{
	margin-bottom:0px;
}

/* Central line */
.ev-timeline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #d6d6d6;
  z-index: 1;
}

/* Timeline item */
.ev-timeline-item {
  position: relative;
  flex: 0 0 140px; /* width of each step */
  text-align: center;
  z-index: 2;
}

/* Year box (centered on line) */
.ev-timeline-year {
  background: #cce5e1;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  position: relative;
  margin: 60px 0px;
 
}

/* Item content (image + text) */
.ev-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* Image */
.ev-timeline-image img {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: #fff;
  width:auto;
}

/* Text */
.ev-timeline-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  max-width: 160px;
  max-height:140px;
}

/* Alternate positioning */
.ev-timeline-item.left .ev-timeline-content {
  flex-direction: column-reverse; /* text above, image below */
}
.ev-timeline-item.right .ev-timeline-content {
  flex-direction: column; /* image above, text below */
}

/* Year box base */
.ev-timeline-year {
  position: relative;
  z-index: 2;
}

/* LEFT items → arrow points UP */
.ev-timeline-item.left .ev-timeline-year::before {
  content: "";
  position: absolute;
  top: -80px;        /* how far upward the line extends */
  left: 50%;          /* center it horizontally */
  transform: translateX(-50%);
  width: 2px;         /* thin vertical line */
  height: 80px;      /* line length */
  background: var(--qiolo-primary-color);
}

.ev-timeline-item.left .ev-timeline-year::after {
  content: "";
  position: absolute;
  top: -82px;         /* arrow tip above connector */
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--qiolo-primary-color); /* arrow points upward */
}

/* RIGHT items → arrow points DOWN */
.ev-timeline-item.right .ev-timeline-year::before {
  content: "";
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 60px;
  background: var(--qiolo-primary-color);
}
.ev-timeline-item.right .ev-timeline-year::after {
  content: "";
  position: absolute;
  bottom: -62px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--qiolo-primary-color); /* arrow points downward */
}

/* Responsive */
/* Mobile: keep horizontal scroll, don’t center */
@media (max-width: 768px) {
  .ev-timeline {
    justify-content: flex-start;   /* align items from the left */
    overflow-x: auto;              /* enable horizontal scroll */
    scroll-snap-type: x mandatory; /* optional: smooth snap scrolling */
    padding-bottom: 20px;          /* room for scrollbar */
	padding-top:0px;
	gap:0px;
  }
  .ev-timeline-item {
    flex: 0 0 auto;                /* fixed width per item */
    scroll-snap-align: start;      /* optional: snap each item nicely */
  }
  .ev-timeline-item.left .ev-timeline-year {
	top:50px;	
  }
  .ev-timeline-item.right .ev-timeline-year {
	top:-20px;	
  }
  .ev-timeline .ev-timeline-item:last-child .ev-timeline-year {
	top:-2px;	
  }	
  /* optional: nicer thin scrollbar on mobile */
  .ev-timeline::-webkit-scrollbar {
    height: 6px;
  }
  .ev-timeline::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
  }
  .ev-timeline::-webkit-scrollbar-track {
    background: transparent;
  }
  .ev-timeline-wrap {
	padding:0px;
   }
  .ev-timeline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;              /* base width */
  min-width: 1000px;          /* force full stretch */
  height: 2px;
  background: #d6d6d6;
  z-index: 1;
  }
  .ev-timeline-image img {
		max-height:120px;
  }
	 
}