/* Temporary for development stage, recommend to copy these CSS code to frontend.css when production */
section[data-module="timeline-slide"] {}
/* Wrapper */
section[data-module="timeline-slide"] .knm-timeline-wrapper {
    position: relative;
    width: 100%;
    padding: 0px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

section[data-module="timeline-slide"] .timeline-readmore-btn {
  color: #090;
  transition: color 0.3s ease;
  font-size: 16px;
}

section[data-module="timeline-slide"] .timeline-readmore-btn:hover {
  color: #00448b;
}

/* Center container */
section[data-module="timeline-slide"] .timeline-center {
    position: relative;
    width: 80%;
}

/* Middle dashed line */
section[data-module="timeline-slide"] .timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-bottom: 2px dashed #b8b8b8;
    z-index: 1;
    transform: translateY(-50%);
}

/* Scroll container */
section[data-module="timeline-slide"] .knm-timeline-carousel {
    display: flex;
    gap: 60px;
    overflow: hidden;
    scroll-behavior: smooth;
    padding: 54px 0;
  position: relative;
  z-index: 2;
  height: 580px;
}

/* Timeline item */
section[data-module="timeline-slide"] .timeline-item {
    position: relative;
    text-align: center;
    min-width: 320px;
	top: 148px;
}

/* Year (centered on line) */
section[data-module="timeline-slide"] .timeline-item .year {
    font-size: 50px;
    font-weight: 600;
    color: #003d8d;
    margin-bottom: 8px;
	top: 100px;
	position: relative;
}
/* Year (centered on line) */
section[data-module="timeline-slide"] .timeline-item .year-bottom {
    font-size: 50px;
    font-weight: 600;
    color: #003d8d;
    margin-bottom: 8px;
}

/* Dot (centered on line) */
section[data-module="timeline-slide"] .timeline-item .dot {
    width: 14px;
    height: 14px;
    background: red;
    border-radius: 50%;
    margin: 0 auto 25px auto;
    z-index: 5;
}

/* Card style */
section[data-module="timeline-slide"] .timeline-item .card {
    background: #aee0ff;
    border-radius: 20px;
    padding: 15px;
    width: 342px;
    text-align: center;
}

section[data-module="timeline-slide"] .timeline-item .card img {
    width: 30%;
  border-radius: 8px;
  margin: 0 auto;
}

section[data-module="timeline-slide"] .timeline-item .card p {
    font-size: 16px;
    margin-top: 8px;
    color: #000;
    font-weight: 500;
	text-align: left;
    margin-left: 20px;
    margin-bottom: 0px;
}

/* Card ABOVE the line */
section[data-module="timeline-slide"] .timeline-item .card.top-card {
  margin-top: -273px;
  height: 210px;
	display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Card BELOW the line */
section[data-module="timeline-slide"] .timeline-item .card.bottom-card {
    margin-top: 10px;
	height: 210px;
	display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Arrows */
section[data-module="timeline-slide"] .timeline-arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform .3s ease;
    z-index: 10;
}

section[data-module="timeline-slide"] .timeline-arrow img {
    width: 50px;
    transition: all .3s ease;
}

/* Hover effects */
section[data-module="timeline-slide"] .left-arrow:hover img {
    content: url("https://knm.stagings.entertopwp.com/wp-content/uploads/2025/09/arrow-red-round-left-2.png");
    transform: scale(1.15);
}

section[data-module="timeline-slide"] .right-arrow:hover img {
    content: url("https://knm.stagings.entertopwp.com/wp-content/uploads/2025/09/arrow-red-round-right-2.png");
    transform: scale(1.15);
}




/* Typical laptop screen size*/
@media (max-width: 1400px) {
section[data-module="timeline-slide"] .timeline-item .year-bottom {
  font-size: 40px;
  margin-bottom: 22px;
}
section[data-module="timeline-slide"] .timeline-item .year {
  font-size: 40px;
  margin-bottom: 22px;
}
section[data-module="timeline-slide"] .timeline-item .card {
  width: 248px;
}
section[data-module="timeline-slide"] .timeline-item .card {
  padding: 8px;
}
section[data-module="timeline-slide"] .timeline-item .card p {
  margin-left: 8px;
}
section[data-module="timeline-slide"] .knm-timeline-carousel {
  gap: 40px;
padding: 70px 0;
    height: 645px;
}
section[data-module="timeline-slide"] .timeline-arrow {
  position: relative;
  top: -16px;
}
section[data-module="timeline-slide"] .timeline-line {
  top: 305px;
}
section[data-module="timeline-slide"] .timeline-item {
  min-width: 240px;
}
  section[data-module="timeline-slide"] .timeline-item .card.top-card {
    margin-top: -272px;
  }
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 1080px) {
 section[data-module="timeline-slide"] .knm-timeline-carousel {
    gap: 25px;
  }
  section[data-module="timeline-slide"] .timeline-item .card {
    width: 260px;
  }
  section[data-module="timeline-slide"] .timeline-item {
    min-width: 260px;
  }
section[data-module="timeline-slide"] .timeline-item .card p {
  font-size: 14px;
}
}

/* Mobile screen size - landscape view */
@media (max-width: 810px) {
  section[data-module="timeline-slide"] .knm-timeline-carousel {
    gap: 6px;
	padding: 38px 0;
  }  
  section[data-module="timeline-slide"] .timeline-item {
    min-width: 200px;
  }
  section[data-module="timeline-slide"] .timeline-item .card {
    width: 200px;
  }
  section[data-module="timeline-slide"] .timeline-item .card.top-card {
    margin-top: -285px;
  }
  section[data-module="timeline-slide"] .timeline-item .card p {
    margin-bottom: 8px;
  }
  section[data-module="timeline-slide"] .timeline-line {
    top: 273px;
  }
section[data-module="timeline-slide"] .timeline-arrow {
  top: -49px;
  position: relative;
}
}

/* Mobile screen size */
@media (max-width: 480px) {
  section[data-module="timeline-slide"] .knm-timeline-carousel {
    gap: 15px;
	  margin-bottom: 75px;
  }
  section[data-module="timeline-slide"] .timeline-item .card.bottom-card {
	  margin-top: 10px;
	  height: 235px;
  }
  section[data-module="timeline-slide"] .timeline-item .card {
    width: 160px;
  }
  section[data-module="timeline-slide"] .timeline-item {
    min-width: 160px;
	  top: 168px;
  }
  section[data-module="timeline-slide"] .timeline-arrow.right-arrow {
    position: absolute;
    right: -31px;
    bottom: 123px;
    z-index: 999;
  }
  section[data-module="timeline-slide"] .timeline-arrow.left-arrow {
    position: absolute;
    left: -31px;
    bottom: 123px;
    z-index: 999;
  }

  section[data-module="timeline-slide"] .timeline-arrow.right-arrow img {
    width: 44px;
  }
section[data-module=timeline-slide"] .timeline-center {
  width: 100%;
}
}