/* @import url('https://fonts.googleapis.com/css?family=Exo+2:400,700&subset=cyrillic');

 body {
	 font-family: 'Exo 2', sans-serif;
	 line-height: 1.5;
}
 .wrapper {
	 margin: 0 auto;
	 padding: 0 35.66% 10px;
	 width: 100%;
}
 article {
	 position: relative;
	 max-width: 980px;
	 margin: 0 auto;
}
 .timeline__nav {
	 position: fixed;
	 z-index: 99;
	 top: 0;
	 left: 20;
	 transition: top 0.3s ease-out;
}
 .timeline__nav ul {
	 list-style: none;
	 list-style-position: inside;
	 margin: 15px 0;
}
 .timeline__nav ul li {
	 margin: 15px 0;
	 padding-left: 0;
	 list-style-type: none;
	 color: #bfc1c3;
	 border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
	 cursor: pointer;
	 transition: all 0.3s ease-out;
}
 .timeline__nav ul li.active {
	 font-weight: bold;
	 color: #f94125;
	 border-bottom: 1px dotted transparent;
	 transform: scale(1.2);
}
 .timeline__nav ul li:hover {
	 color: #000;
} */

@import url('https://fonts.googleapis.com/css?family=Exo+2:400,700&subset=cyrillic');

body {
    font-family: 'Exo 2', sans-serif;
    line-height: 1.5;
}

.wrapper {
    margin: 0 auto;
    padding: 0 35.66% 10px;
    width: 100%;
}

article {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
}

.timeline__nav {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 20; /* Adjusted to 0 for better alignment */
    width: 250px; /* Set a fixed width */
    transition: top 0.3s ease-out;
    background: #fff; /* Added background to make it visible */
    padding: 15px; /* Added padding */
}

/* Hide timeline__nav on mobile devices */
@media (max-width: 768px) {
    .timeline__nav {
        display: none;
    }
}

.timeline__nav ul {
    list-style: none;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.timeline__nav ul li {
    margin: 15px 0;
    padding-left: 0;
    list-style-type: none;
    color: #bfc1c3;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.timeline__nav ul li.active {
    font-weight: bold;
    color: #f94125;
    border-bottom: 1px dotted transparent;
    transform: scale(1.2);
}

.timeline__nav ul li:hover {
    color: #000;
}
.timeline__section .milestone:hover{
	color: #f94125;
}

/* Make timeline section responsive */
@media (max-width: 768px) {
    .wrapper {
        padding: 0 10px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 576px) {
    .timeline__nav {
        display: none; /* Ensure it's hidden on very small screens */
    }
}