@media (max-width: 991px) {
    .mobile-timeline-container {
        position: relative;
        padding: 20px 0;
        overflow: hidden;
    }

    .mobile-timeline-line {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #00aeef;
        transform: translateX(-50%);
        z-index: 1;
    }

    .mobile-timeline-row {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 60px;
        z-index: 2;
    }

    /* Connector Line (Dashed) */
    .mobile-connector {
        position: absolute;
        top: 50%;
        height: 0;
        border-top: 2px dashed #87CEFA;
        /* Light Blue Dashed */
        transform: translateY(-50%);
        z-index: 0;
    }

    /* Connector Positioning */
    .mobile-connector.left {
        right: 50%;
        width: 25%;
    }

    .mobile-connector.right {
        left: 50%;
        width: 25%;
    }

    /* Hollow Circles */
    .mobile-circle {
        width: 16px;
        height: 16px;
        background-color: #fff;
        border: 3px solid #00aeef;
        /* Cyan Border */
        border-radius: 50%;
        /* Circle */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
    }

    /* Circle Positioning */
    .mobile-circle.center {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .mobile-circle.end-left {
        left: 25%;
        /* Aligned with connector end */
        transform: translate(-50%, -50%);
    }

    .mobile-circle.end-right {
        right: 25%;
        transform: translate(50%, -50%);
    }

    /* ALIGNMENT FOR ALL ROWS (Push connectors down to text level) */
    .mobile-timeline-row .mobile-connector,
    .mobile-timeline-row .mobile-circle {
        top: 106% !important;
        /* Align with text description generally */
    }

    /* 2009 Exception: Align to top (Candles/Year) */
    .mobile-timeline-row-2009 .mobile-connector,
    .mobile-timeline-row-2009 .mobile-circle {
        top: 105% !important;
    }

    /* Content Boxes */
    .mobile-content-box {
        width: 42%;
        position: relative;
    }

    .mobile-content-box.text-side {
        padding: 0 5px;
    }

    .mobile-content-box.img-side {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-year {
        font-weight: 800;
        color: #00aeef;
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .mobile-desc {
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.3;
        color: #333;
    }
}