#mobile-menu {
    transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
    #mobile-menu.show {
        display: block;
    }
}


.roadmap-container {
position: relative;
}

/* Timeline slider styling */

/* Slider styling */

.slider-container {
    position: relative;
    padding-top: 1rem;
}

.timeline-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #4A5568;
    border-radius: 4px;
    outline: none;
    position: relative;
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1E2749;
    border: 4px solid #7BA793;
    cursor: pointer;
    margin-top: 0px; /* Center on track */
    position: relative;
    z-index: 6;
}

.timeline-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7BA793;
    border: 4px solid #1E2749;
    cursor: pointer;
    position: relative;
    z-index: 6;
}

/* Slides styling */
.roadmap-slides {
    margin-top: 2rem;
}

.roadmap-slide {
    display: none;
}

.roadmap-slide.active {
    display: block;
}

/* Marker lines */

.timeline-markers {
    position: absolute;
    width: 100%;
    height: 16px; /* Same as slider track height */
    pointer-events: none;
    z-index: 5;
    top: 22px; /* Adjust this to align with slider */
}

.timeline-marker {
    position: absolute;
    width: 4px;
    height: 16px; /* Slightly taller than the track */
    background: #7BA793;
    transform: translateX(-50%); /* Center the marker on its position */
}

/* Position markers */
.timeline-marker:nth-child(1) { left: 0; }
.timeline-marker:nth-child(2) { left: 50%; }
.timeline-marker:nth-child(3) { left: 100%; }