/* ===== ROOT ===== */
.timeline-container {
width: 90%;
max-width: 1000px;
margin: 40px auto;
position: relative;
padding: 40px 0;
font-family: "Segoe UI", sans-serif;
}

/* Vertical line */
.timeline-container::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 4px;
height: 100%;
background: #e0e0e0;
transform: translateX(-50%);
}

/* ===== ITEM ===== */
.timeline-item {
width: 100%;
display: flex;
margin-bottom: 40px;
position: relative;
}

.timeline-item.left {
justify-content: flex-end;
}

.timeline-item.right {
justify-content: flex-start;
}

/* Extra offset for even items on mobile */
@media (max-width: 768px) {
.timeline-container::before {
    left: 20px;
}

.timeline-item {
    justify-content: flex-start;
}

.timeline-content {
    width: calc(100% - 60px);
    margin-left: 40px;
}

/* ✅ ADD THIS */
.timeline-item.right .timeline-content {
    margin-left: 60px;
}

.timeline-icon {
    left: 20px;
}
}


/* ===== CARD ===== */
.timeline-content {
width: 45%;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
display: flex;
overflow: hidden;
box-sizing: border-box; /* ✅ ADD */
}

/* ===== TEXT + DATE (50 / 50) ===== */
.timeline-text,
.timeline-date {
flex: 0 0 50%;
}

/* TEXT */
.timeline-text {
padding: 20px;
}

.timeline-text h3 {
margin: 0;
font-size: 15px;
letter-spacing: 0.4px;
}
.timeline-text sup {
    vertical-align: super;
    font-size: smaller;
	padding:0 0 0 5px;
}

/* DATE */
.timeline-date {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
text-align: center;
padding: 10px;
}

/* ===== ICON ===== */
.timeline-icon {
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transform: translate(-50%, -50%);
font-size: 18px;
z-index: 2;
}

/* ===== COLORS ===== */
.purple {
background: #8e44ad;
}
.blue {
background: #4a69bd;
}
.green {
background: #27ae60;
}
.pink {
background: #d980fa;
}

.text-purple h3 {
color: #8e44ad;
}
.text-blue h3 {
color: #4a69bd;
}
.text-green h3 {
color: #27ae60;
}
.text-pink h3 {
color: #d980fa;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
.timeline-container::before {
    left: 20px;
}

.timeline-item {
    justify-content: flex-start;
}

.timeline-content {
    width: calc(100% - 60px);
    margin-left: 40px;
}

/* keep 50 / 50 even on mobile */
.timeline-text,
.timeline-date {
    flex: 0 0 50%;
    min-width: 0; 
}

.timeline-icon {
    left: 20px;
}
}