/*=========================================
	=        AboutPage Timeline CSS    =
===========================================*/
.attractive-timeline-section { background-color: #f8f9fa; }
.attractive-timeline { position: relative; max-width: 900px; margin: 0 auto; }
.attractive-timeline::before { content: ''; position: absolute; width: 4px; background-color: #dee2e6; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); }
.timeline-block { padding: 10px 40px; position: relative; width: 50%; }
.timeline-dot { position: absolute; width: 24px; height: 24px; background-color: white; border: 5px solid; top: 32px; border-radius: 50%; z-index: 1; transition: transform 0.3s ease; }
.timeline-block.left { left: 0; }
.timeline-block.right { left: 50%; }
.timeline-block.left .timeline-dot { right: -12px; }
.timeline-block.right .timeline-dot { left: -12px; }
.timeline-card { padding: 25px; background-color: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.07); transition: all 0.3s ease; }
.timeline-block:hover .timeline-card {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.1); 
}
.timeline-block:hover .timeline-dot {
    transform: scale(1.2);
}
.timeline-card h5 { font-size: 1.25rem; font-weight: 700; color: #333; margin-bottom: 10px; }
.timeline-card p { font-size: 0.95rem; line-height: 1.6; color: #555; margin: 0; }

@media (max-width: 767px) {
    .attractive-timeline::before { left: 20px; }
    .timeline-block { width: 100%; padding-left: 50px; padding-right: 0; }
    .timeline-block.left, .timeline-block.right { left: 0; }
    .timeline-block.left .timeline-dot, .timeline-block.right .timeline-dot { left: 8px; }
}