.timeline-container {
            flex: 1;
            position: relative;
            height: 40px; 
            background: 
                linear-gradient(135deg, 
                    rgba(245, 222, 179, 0.4) 0%, 
                    rgba(222, 184, 135, 0.5) 50%, 
                    rgba(210, 180, 140, 0.6) 100%
                );
            border-radius: 20px;
            overflow: visible;
            margin-right: 35%; 
            border: 1px solid rgba(160, 82, 45, 0.2);
            box-shadow: inset 0 2px 4px rgba(139, 69, 19, 0.1);
        }

        .timeline-bar {
            position: absolute;
            height: 100%;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: white;
            font-size: 14px;
            transform-origin: left center;
            transform: scaleX(0);
            animation: expandBar 1.5s ease-out forwards;
        }

        @keyframes expandBar {
            0% { transform: scaleX(0); opacity: 0.7; }
            100% { transform: scaleX(1); opacity: 1; }
        }

        .timeline-bar:hover {
            transform: scaleY(1.2);
            z-index: 10;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }