        <style>
   
     
 
        h2 {
            text-align: center;
            color: #333;
        }
        #timeline {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }
        ol {
            list-style-type: none;
            padding: 0;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }
        .newli {
            display: inline-block;
            width: 50px; /* Smaller circle size */
            height: 50px; /* Smaller circle size */
            border-radius: 50%;
            background-color: #ddd; /* Default grey color */
            color: white;
            font-size: 14px; /* Smaller font size */
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: transform 0.3s ease, font-size 0.3s ease, background-color 0.3s ease;
            position: relative;
        }

        .newli .year {
            font-size: 12px; /* Smaller year font */
            color: black; /* Set year text color to black */
            position: absolute;
            top: -20px; /* Position year above the circle */
            width: 100%;
            text-align: center;
        }

        .newli .stage-name {
            font-size: 10px; /* Smaller stage name font */
            color: black; /* Set stage name text color to black */
            position: absolute;
            bottom: -20px; /* Position stage name below the circle */
            width: 100%;
            text-align: center;
        }

        .newli.active-year {
            background-color: #8B0000; /* Dark Red for the active circle */
            font-size: 18px;
            transform: scale(1.3);
        }

        /* Default grey color for non-active circles */
        .newli:not(.active-year) {
            background-color: #ddd;
        }

        .stage {
            display: none;
            margin-top: 10px;
            padding: 10px;
                        border-radius: 4px;
        }
        .actives {
            display: block;
        }

        /* Mobile responsive styles */
        @media screen and (max-width: 768px) {
            section {
                margin: 10px;
                padding: 15px;
            }
            #timeline {
                display: none; /* Hide the timeline on mobile */
            }
            #event-details {
                font-size: 16px;
                padding: 10px;
            }
        }

        @media screen and (max-width: 480px) {
            li {
                font-size: 12px;
                width: 40px; /* Even smaller circle size */
                height: 40px; /* Even smaller circle size */
            }
            li.active-year {
                font-size: 14px;
                width: 45px;
                height: 45px;
            }
            #event-details {
                font-size: 14px;
                padding: 8px;
            }
        }
    </style>
