:root {
            --c1: #8e44ad; --c2: #c0392b; --c3: #d35400; --c4: #f39c12; --c5: #27ae60;
            --c6: #2980b9; --c7: #16a085; --c8: #e67e22; --c9: #2ecc71; --c10: #34495e;
        }

        body { background-color: #fff; font-family: 'Segoe UI', sans-serif; }

        .timeline-section {
            padding: 60px 15px;
            max-width: 1200px; /* Wider for two columns */
            margin: 0 auto;
        }

        .timeline-header { margin-bottom: 50px; }

        .timeline-container {
            position: relative;
        }

        /* Main vertical line */
        .timeline-container::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, var(--c1), var(--c10));
            z-index: 1;
        }

        .milestone-row {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            margin-bottom: 0;
        }

        .milestone-item {
            position: relative;
            width: 100%;
            margin-bottom: 40px;
            padding: 0 15px;
        }

        /* Two columns on larger screens */
        @media (min-width: 768px) {
            .milestone-item {
                width: 50%;
                margin-bottom: 80px; /* More space between rows */
            }
            
            /* Alternate sides */
            .milestone-item:nth-child(odd) {
                padding-right: 50px;
            }
            
            .milestone-item:nth-child(even) {
                padding-left: 50px;
                margin-top: 80px; /* Offset even items */
            }
        }

        /* The L-Shaped Path (Vertical version) */
        .milestone-box {
            border: 5px solid currentColor;
            border-radius: 20px;
            padding: 40px 25px 30px 30px;
            position: relative;
            background: #fff;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            z-index: 2;
        }

        .milestone-box:hover {
            transform: translateY(-5px);
        }

        /* Connector line from main line to box */
        .milestone-box::before {
            content: '';
            position: absolute;
            top: 50%;
            width: 50px;
            height: 5px;
            background-color: currentColor;
            z-index: 1;
        }

        /* Left side items */
        @media (min-width: 768px) {
            .milestone-item:nth-child(odd) .milestone-box::before {
                right: -55px;
            }
            
            .milestone-item:nth-child(even) .milestone-box::before {
                left: -55px;
            }
        }

        .milestone-item:nth-child(odd) .milestone-box::before {
            right: -55px;
        }

        .milestone-item:nth-child(even) .milestone-box::before {
            left: -55px;
        }

        /* The Year/Icon Header */
        .milestone-top {
            position: absolute;
            top: -28px;
            left: 20px;
            display: flex;
            align-items: center;
            background: #fff;
            padding: 0 10px;
            gap: 15px;
        }

        .year-label { 
            font-size: 1.8rem; 
            font-weight: 800; 
            color: currentColor; 
        }

        .icon-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: currentColor;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        /* Dot on the main timeline */
        .path-dot {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 24px;
            background-color: currentColor;
            border: 5px solid #fff;
            border-radius: 50%;
            z-index: 3;
            box-shadow: 0 0 0 3px currentColor;
            transition: transform 0.3s ease;
        }

        .path-dot:hover {
            transform: translateX(-50%) scale(1.2);
        }

        /* Dot positioning */
        @media (min-width: 768px) {
            .milestone-item:nth-child(odd) .path-dot {
                right: -12px;
                left: auto;
            }
            
            .milestone-item:nth-child(even) .path-dot {
                left: -12px;
            }
        }

        .milestone-item:nth-child(odd) .path-dot {
            right: -12px;
            left: auto;
        }

        .milestone-item:nth-child(even) .path-dot {
            left: -12px;
        }

        .milestone-box h5 { font-weight: 700; color: #333; margin-top: 10px; }
        .milestone-box p { color: #666; font-size: 0.95rem; line-height: 1.6; }

        /* Color Classes */
        .yr-2017 { color: var(--c1); } .yr-2018 { color: var(--c2); }
        .yr-2019 { color: var(--c3); } .yr-2020 { color: var(--c4); }
        .yr-2021 { color: var(--c5); } .yr-2022 { color: var(--c6); }
        .yr-2023 { color: var(--c7); } .yr-2024 { color: var(--c8); }
        .yr-2025 { color: var(--c9); } .yr-2026 { color: var(--c10); }

        /* Ensure the timeline continues to last item */
        .timeline-container::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 40px;
            background: linear-gradient(to bottom, var(--c10), transparent);
            bottom: -40px;
            z-index: 1;
        }