.timeline-container { position: relative; padding: 2rem 0; margin: 0 auto; max-width: 1024px; }
.timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background-color: #E5E7EB; transform: translateX(-50%); display: none; }
.timeline-item { position: relative; margin-bottom: 3rem; padding: 0 1rem; }
.timeline-dot { position: absolute; left: 50%; top: 1.25rem; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background-color: #FFFFFF; border: 4px solid #E5E7EB; transform: translateX(-50%); z-index: 10; transition: border-color 0.3s ease; display: none; }
.timeline-item:hover .timeline-dot { border-color: #3B82F6; }
.timeline-item-heading .date { font-size: 1.25rem; font-weight: 500; color: #9B1A2B; line-height: 1.2; }
.timeline-item-content { margin-top: 1rem; }
.timeline-item-content p { color: #4B5563; line-height: 1.6; margin: 0; }
.timeline-image { margin-top: 1rem; max-width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
@media (min-width: 768px) {
	.timeline-line, .timeline-dot { display: block; }
	.timeline-item { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
	.timeline-item-content { margin-top: 0; }
	.timeline-item:nth-child(odd) .timeline-item-heading { grid-column: 1; text-align: right; }
	.timeline-item:nth-child(odd) .timeline-item-content { grid-column: 2; }
	.timeline-item:nth-child(even) .timeline-item-heading { grid-column: 2; text-align: left; }
	.timeline-item:nth-child(even) .timeline-item-content { grid-column: 1; grid-row: 1; text-align: right; }
}