/* Small timeline overrides to ensure the vertical line sits under cards on mobile.
These rules are intentionally minimal and use !important so they safely override earlier rules.
*/

@media (max-width: 900px) {
    .timeline::before {
        left: 60px !important;
        width: 3px !important;
        z-index: 0 !important;
    }

    .timeline-item {
        padding-left: 92px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .timeline-marker {
        left: 0 !important;
        position: absolute !important;
        z-index: 3 !important;
    }

    .timeline-dot {
        width: 12px !important;
        height: 12px !important;
        z-index: 4 !important;
    }

    .timeline-content {
        position: relative !important;
        z-index: 2 !important;
    }
}

@media (max-width: 600px) {
    .timeline::before {
        left: 200px !important;
    }

    .timeline-item {
        padding-left: 92px !important;
    }

    .timeline-dot {
        left: 50px !important;
        width: 10px !important;
        height: 10px !important;
    }
}