/*
/* BASIC PAGE LOOK */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; background:#fafafa; color:#333; }
header { text-align:center; padding:1rem; background:#c4a5cf; color:#fff; }
header h1 { font-size:1.9rem; }
.intro { max-width:720px; margin:1rem auto; padding:0 1rem; line-height:1.6; }

/* CIRCULAR TIMELINE AREA */
.circle-wrap { display:flex; justify-content:center; align-items:center; padding:1rem; }

.circle {
  position: relative;
  width: 540px;   /* make bigger/smaller if you want */
  height: 540px;
  margin: 1rem auto;
  border: 4px dashed #bbb;   /* circular guide line */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 58%, transparent 59%); /* light center */
}

/* each milestone is positioned absolutely, then rotated+translated */
.milestone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;   /* icon size area */
  text-align: center;
  transform-origin: 0 0; /* we rotate around center point then push outwards */
}

.milestone img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #666;
  cursor: pointer;
}

.milestone span { display:block; margin-top:.35rem; font-size:.85rem; }

/* place the 10 milestones around the ring (angles: 0,36,72,...,324) */
.milestone:nth-of-type(1)  { transform: rotate( -90deg) translate(0, -230px) rotate( 90deg); }
.milestone:nth-of-type(2)  { transform: rotate( -54deg) translate(0, -230px) rotate( 54deg); }
.milestone:nth-of-type(3)  { transform: rotate( -18deg) translate(0, -230px) rotate( 18deg); }
.milestone:nth-of-type(4)  { transform: rotate(  18deg) translate(0, -230px) rotate(-18deg); }
.milestone:nth-of-type(5)  { transform: rotate(  54deg) translate(0, -230px) rotate(-54deg); }
.milestone:nth-of-type(6)  { transform: rotate(  90deg) translate(0, -230px) rotate(-90deg); }
.milestone:nth-of-type(7)  { transform: rotate( 126deg) translate(0, -230px) rotate(-126deg); }
.milestone:nth-of-type(8)  { transform: rotate( 162deg) translate(0, -230px) rotate(-162deg); }
.milestone:nth-of-type(9)  { transform: rotate( 198deg) translate(0, -230px) rotate(-198deg); }
.milestone:nth-of-type(10) { transform: rotate( 234deg) translate(0, -230px) rotate(-234deg); }

/* arrows between milestones (10 of them) */
.arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  text-align:center;
  line-height:20px;
  font-size: 18px;
  color: #777;
  transform-origin: 0 0;
}

/* half-steps between the item angles: -72,-36,0,36,72,108,144,180,216,252 (relative to -90 start) */
.arrow:nth-of-type(1)  { transform: rotate( -72deg) translate(0, -190px) rotate( 72deg); }
.arrow:nth-of-type(2)  { transform: rotate( -36deg) translate(0, -190px) rotate( 36deg); }
.arrow:nth-of-type(3)  { transform: rotate(   0deg) translate(0, -190px) rotate(  0deg); }
.arrow:nth-of-type(4)  { transform: rotate(  36deg) translate(0, -190px) rotate(-36deg); }
.arrow:nth-of-type(5)  { transform: rotate(  72deg) translate(0, -190px) rotate(-72deg); }
.arrow:nth-of-type(6)  { transform: rotate( 108deg) translate(0, -190px) rotate(-108deg); }
.arrow:nth-of-type(7)  { transform: rotate( 144deg) translate(0, -190px) rotate(-144deg); }
.arrow:nth-of-type(8)  { transform: rotate( 180deg) translate(0, -190px) rotate(-180deg); }
.arrow:nth-of-type(9)  { transform: rotate( 216deg) translate(0, -190px) rotate(-216d