.timeline-wrapper {
  position: relative;
}

.text {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 20px;
}

.text1 {
  top: 2%;
  transform: translateX(260px);
}

.text2 {
  top: 15%;
  transform: translateX(-260px);
  align-items: flex-end;
}
.text2 .colDesc {
  position: relative;
  left: 15px;
}
.text3 {
  top: 26%;
  transform: translateX(260px);
}

.text4 {
  top: 39%;
  transform: translateX(-260px);
  align-items: flex-end;
}

.colNo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 400;
  background: #fcdd00;
}

.colTitle {
  font-family: "Satoshi-Variable", Sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 2px;
  letter-spacing: 0%;
  white-space: nowrap;
  color: #202428;
  padding-top: 20px;
}

.colDesc {
  font-family: "Satoshi-Variable", Sans-serif;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: -1%;
  max-width: 400px;
  width: 400px;
}

.titleDesc {
  font-family: "Satoshi-Variable", Sans-serif;
  max-width: 697px;
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: -1%;
  text-align: center;
  margin-top: 32px;
}

.timeline-wrapper {
  margin-top: 100px;
  height: 200vh; /* 2 folds height like you wanted */
  display: flex;
  justify-content: center;
}

.timeline {
  position: relative;
  width: 4px;
  height: 1025px;
}

.line-track {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 4px;
}

.line-fill {
  position: absolute;
  top: 0;
  width: 4px;
  height: 0%;
  background: #CD1543;
  border-radius: 4px;
}

.icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 105px;
}

/* Position icons along line */
.icon[data-step="1"] {
  top: 4%;
}
.icon[data-step="2"] {
  top: 29%;
}
.icon[data-step="3"] {
  top: 56%;
}
.icon[data-step="4"] {
  top: 84%;
}

/* SVG Coloring */
.icon svg {
  width: 70px;
  height: auto;
  color: #bec4cb;
  transition: color 0.3s ease;
}

/* default stars = also gray */
.icon svg .star {
  color: #bec4cb;
  transition: color 0.3s ease;
}

/* when active */
.icon.active svg {
  color: red; /* main turns red */
}

.icon.active svg .star {
  color: #ffd700; /* ⭐ stars → yellow */
}

.icon1 {
  transform: translateX(-155px);
}

.icon2 {
  transform: translateX(62px);
}

.icon3 {
  transform: translateX(-155px);
}

.icon.icon4 {
  transform: translateX(62px);
}

.buyProcessSection {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  margin-top: 93px;
}

.buyProcessSection h2 {
  font-family: "_Tanker";
    max-width: 587px;
  font-weight: 400;
  font-style: Regular;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: 1%;
  text-align: center;
  color: #202428;
}

.buyProcessSection h2 span {
  font-family: "Bochild";
  color: #cd1543;
}

.icon.active svg path {
  fill: #FCDD00;
}

.icon.active svg path:nth-child(5) {
  fill: #CD1543;
}

.icon-hover {
  display: none;
}

.icon.active img.icon-default {
  display: none;
}

.icon.active img.icon-hover {
  display: block;
}

.text.text2,
.text.text4 {
  text-align: right;
}

.line-track::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: #ccc;
  bottom: 0;
  border-radius: 50%;
  left: -8px;
  transition: background-color 0.4s ease;
}

.line-track.finish::after {
  background-color: #CD1543;
}

.timeline-wrapper-responsive {
    display: none;
}

@media (max-width: 768px) {
/*** Responsive adjustments */
.buyProcessSection{display: none;}
.timeline-wrapper-responsive {
    display: block;
}
.timeline-progress {
    position: absolute;
    top: 12px;
    /* aligned with first icon centre */
    bottom: 12px;
    /* aligned with last icon centre */
    left: 40px;
    /* centre of icon column (60px/2 + 10px margin) */
    width: 4px;
    background-color: #d6cfc4;
    /* neutral grey */
    border-radius: 4px;
    transform: translateX(-50%);
    z-index: 1;
    overflow: hidden;
}

/* red filler – height changes with scroll, but icons never turn red */
.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* JS controlled */
    background-color: #d62828;
    /* solid red */
    border-radius: 4px;
    transition: height 0.1s ease-out;
    box-shadow: 0 0 4px rgba(214, 40, 40, 0.3);
}

/* each timeline entry */
.timeline-step {
    display: flex;
    padding-bottom: 20px;
    position: relative;
    z-index: 3;
    /* above the line */
    align-items: flex-start;
}

/* icon – permanently neutral, exactly like the original design.
           No active class will ever change its background. */
.timeline-icon {
    width: 60px;
    height: 60px;
    background-color: #FCDD00;
    /* neutral greyish-beige, matches original */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.6rem;
    color: #000000;
    /* muted brown-grey */
    margin-right: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    border: 2px solid transparent;
    transition: none;
    /* no colour change ever */
    position: relative;
    z-index: 5;
}



.timeline-content h2 {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #2e2a24;
    margin-bottom: 0.3rem;
}

.timeline-content p {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #4f4a42;
    max-width: 520px;
}



/* responsiveness */

    .timeline-progress {
        left: 25px;
    }

    .timeline-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        margin-right: 16px;
    }

    .timeline-content {
        padding-left: 25px;
    }

    .timeline-content h2 {
        font-size: 1.6rem;
    }

    .timeline-step.active img.icon-default {
    display: none;
}

.timeline-step.active img.icon-hover {
    display: block;
}
	
	.step-number img {
	  height: 64px;
	}
	
	.timeline-content h2 {
	  font-family: "Satoshi-Variable", Sans-serif;
	  font-size: 20px;
	  font-weight: 700;
	  padding-top: 10px;
	  padding-bottom: 10px;
	}
	
	.timeline-content p {
	  font-family: "Satoshi-Variable", Sans-serif;
	  font-size: 16px;
	  font-weight: 500;
	}

}