box-sizing: border-box !important;
position: relative !important;
max-width: 720px !important;
margin: 0 auto !important;
padding: 0px 0px !important;
font-family: 'Open Sans', sans-serif !important;
#hci-timeline-wrap .hci-line {
position: relative !important;
#hci-timeline-wrap .hci-line::before {
position: absolute !important;
background: #e0e0e0 !important;
transform: translateX(-50%) !important;
#hci-timeline-wrap .hci-row {
display: flex !important;
align-items: flex-start !important;
position: relative !important;
margin-bottom: 20px !important;
min-height: 70px !important;
#hci-timeline-wrap .hci-dot {
position: absolute !important;
transform: translateX(-50%) !important;
background: #c0392b !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
#hci-timeline-wrap .hci-spacer {
width: calc(50% - 0px) !important;
flex-shrink: 0 !important;
#hci-timeline-wrap .hci-content-right {
width: calc(50% - 20px) !important;
margin-right: 20px !important;
text-align: right !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
flex-shrink: 0 !important;
#hci-timeline-wrap .hci-content-left {
width: calc(50% - 20px) !important;
margin-left: 20px !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
flex-shrink: 0 !important;
#hci-timeline-wrap .hci-badge {
display: inline-block !important;
background: #fde8e8 !important;
color: #c0392b !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 4px 12px !important;
border-radius: 20px !important;
margin-bottom: 8px !important;
white-space: nowrap !important;
line-height: 1.4 !important;
#hci-timeline-wrap .hci-title {
font-family: 'Merriweather', Georgia, serif !important;
font-size: 17px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin-bottom: 6px !important;
line-height: 1.3 !important;
#hci-timeline-wrap .hci-desc {
font-size: 13px !important;
color: #666666 !important;
line-height: 1.6 !important;
font-weight: 400 !important;
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<div id="hci-timeline-wrap">
<!-- April 1 — content on LEFT side -->
<div class="hci-content-right">
<span class="hci-badge">April 1</span>
<div class="hci-title">Applications Open</div>
<div class="hci-desc"></div>
<div class="hci-dot"></div>
<div class="hci-spacer"></div>
<!-- April 30 — content on RIGHT side -->
<div class="hci-spacer"></div>
<div class="hci-dot"></div>
<div class="hci-content-left">
<span class="hci-badge">April 30</span>
<div class="hci-title">Applications Open</div>
<div class="hci-desc">Selected applicants contacted – May 31</div>
<!-- May 31 — content on LEFT side -->
<div class="hci-content-right">
<span class="hci-badge">April 30</span>
<div class="hci-title">Application Close</div>
<div class="hci-desc">Program Launch Event – June<br> (dates vary by city)</div>
<div class="hci-dot"></div>
<div class="hci-spacer"></div>
<!-- June — content on RIGHT side -->
<div class="hci-spacer"></div>
<div class="hci-dot"></div>
<div class="hci-content-left">
<span class="hci-badge">June-December </span>
<div class="hci-title">Melectiom Lonenays contacted</div>
<div class="hci-desc">Project development, mentorship, training</div>
<!-- July–Dec — content on LEFT side -->
<div class="hci-content-right">
<span class="hci-badge">Late 2026 / Early 2027</span>
<div class="hci-title">Global Youth Convention</div>
<div class="hci-desc"></div>
<div class="hci-dot"></div>
<div class="hci-spacer"></div>