:root{
  --primary:#c77dff;
  --accent:#7b2cbf;
  --bg:#0d0d0d;
}

body{
  margin:0;
  font-family:'Segoe UI',sans-serif;
  color:#fff;
}

/* SECTION */
.section{
  padding:80px 20px;
  text-align:center;
  background:#6a329f;
}

.section h1{
  font-family:'Allura',cursive;
  font-size:54px;
  color:#fff;
  position:relative;
  display:inline-block; /* IMPORTANT FIX */
  line-height:1.2;      /* spacing control */
}

.section h1::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-8px; 
  width:80px;
  height:4px;
  background:linear-gradient(90deg,#c77dff,#7b2cbf);
  border-radius:10px;
}

.section p{
  margin-top: 15px;
  font-size:15px;
  color:#ccc;
  margin-bottom:40px;
}

/* TIMELINE */
.timeline{
  position:relative;
  max-width:1000px;
  margin:auto;
}

.timeline::after{
  content:'';
  position:absolute;
  width:3px;
  background:linear-gradient(to bottom,var(--accent),var(--primary));
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:var(--line-height,0%);
  transition:height 0.3s ease;
}

/* STEP */
.step{
  position:relative;
  width:50%;
  padding:20px;
  opacity:0;
  transform:translateY(40px);
  transition:all 0.6s ease;
}

.step.show{
  opacity:1;
  transform:translateY(0);
}

.step.left{ left:0; text-align:right; }
.step.right{ left:50%; text-align:left; }

/* CARD */
.card{
  position:relative;
  background:#fff;
  border-radius:12px;
  padding:20px;
  max-width:280px;

  border:2px solid transparent;
  background-clip:padding-box;
  transition:0.4s;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  padding:2px;
  background:linear-gradient(135deg,#7b2cbf,#c77dff);

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

.step.left .card{
  margin-left:auto;
  margin-right:40px;
}

.step.right .card{
  margin-left:40px;
}

.card:hover{
  transform:translateY(-6px) scale(1.02);
}

.card h3{
  font-size:16px;
  color:#3c096c;
  text-align:left;
}

.card p{
  font-size:13px;
  color:#5a189a;
  text-align:left;
  margin-top:6px;
}

/* ICON TITLE */
.icon-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

.icon-title i{
  color:var(--primary);
}

/* NUMBER */
.number{
  position:absolute;
  top:25px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#222;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

.step.left .number{ right:-17px; }
.step.right .number{ left:-17px; }

.step.active .number{
  background:linear-gradient(135deg,var(--accent),var(--primary));
}

/* DOT */
.dot{
  position:absolute;
  width:16px;
  height:16px;
  background:#555;
  border-radius:50%;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  border:3px solid #0d0d0d;
}

.step.active .dot{
  background:var(--primary);
}

@media(max-width:768px){

  .timeline::after{
    left:30px; /* center line position */
  }
.section h1{
    font-size: 25px;
}
  .step{
    width:100%;
    padding-left:80px; /* space for line + number */
    text-align:left;
  }

  .step.left,
  .step.right{
    left:0;
  }

  /* DOT (centered on line) */
  .dot{
    left:30px;
    transform:translateX(-50%);
  }

  /* NUMBER (same vertical line) */
  .number{
    left:30px;
    transform:translateX(-50%);
  }

  /* remove conflicting old rules */
  .step.left .number,
  .step.right .number{
    left:30px;
    right:auto;
  }

  .card{
    margin:0 !important;
    max-width:100%;
  }
}