@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

:root {
  --white: #fff;
  --black: #323135;
  --crystal: #a8dadd;
  --columbia-blue: #cee9e4;
  --midnight-green: #01565b;
  --yellow: #fff;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
  position: relative;
  white-space: nowrap;
  max-width: 1400px;
  padding: 0 10px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px auto;
  grid-gap: 20px;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 30px;
  width: 100px;
  z-index: 2;
}

.timeline::after {
  right: 0;
  background: linear-gradient(270deg, var(--timeline-gradient));
}

.timeline::before {
  left: 340px;
  background: linear-gradient(90deg, var(--timeline-gradient));
}

.timeline .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 40px;
  color: var(--white);
  background: var(--midnight-green);
  white-space: normal;
  border-radius: 10px;
}

.timeline .info img {
  margin-bottom: 20px;
}

.timeline .info p {
  margin-top: 10px;
  color: var(--crystal);
}

.timeline .info a {
  text-decoration: none;
}

.timeline ol::-webkit-scrollbar {
  height: 4px;
}

.timeline ol::-webkit-scrollbar-track {
  border-radius: 92px;
}

.timeline ol::-webkit-scrollbar-thumb {
  background: var(--midnight-green);
  border-radius: 2px; 
}

.timeline ol::-webkit-scrollbar-track {
    background: transparent;
}

.timeline ol {
  font-size: 0;
  padding: 250px 0;
  transition: all 1s;
  overflow-x: auto; /* Pastikan overflow-x aktif */
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; /* Untuk browser Firefox */
  scrollbar-color: var(--midnight-green) transparent; /* Untuk browser Firefox */
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 350px;
  height: 2px;
  background: #22aca6;
  scroll-snap-align: start;
}

.timeline ol li.first-line {
  width: 100px; /* Lebar lebih pendek untuk elemen dengan class first-line */
}
.timeline ol li div.third-line {
  width: 500px; /* Lebar lebih pendek untuk elemen dengan class first-line */
}


.timeline ol li:last-child {
  width: 340px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

/* .timeline ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #22aca6;
  z-index: 1;
} */


.timeline ol li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid #22aca6; /* Ganti warna sesuai kebutuhan */
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: var(--black);
  background: var(--white);
  border-radius: 0 10px 10px 10px;
}

@media (max-width: 768px) {
    .timeline ol li {
        position: relative;
        display: inline-block;
        list-style-type: none;
        width: 463px;
        height: 2px;
        background: #22aca6;
        scroll-snap-align: start;
      }
}

.timeline ol li div::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
  border-radius: 10px 10px 10px 0;
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: var(--white) transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent var(--white);
}

.timeline time {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--midnight-green);
}

/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 800px) {
  .timeline {
    display: block;
  }

  .timeline::before,
  .timeline::after {
    width: 50px;
  }

  .timeline::before {
    left: 0;
  }

  .timeline .info {
    display: none;
  }
}