.timeline-section { position: relative; }
.timeline-container { position: sticky; width: 100%; max-width: 90%; top:20px; margin: 20px auto; }
.timeline-line { position: relative; width: 100%; height: 5px; background: #D9D9D9; margin:auto; overflow: hidden; border-radius:100px; }
.progress-line { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #8B8B8B;border-radius:100px;}
.timeline-points { position: relative; width: 100%; pointer-events: none; display: flex; justify-content: space-between; margin: auto; }
.point{position: relative}
.steptext { height: 42px; padding:0 20px; margin-top:50px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14);; transition: background 0.3s ease, color 0.3s ease; }
.circle{position: absolute; width: 16px; height: 16px; background: #D9D9D9; border-radius: 100px; top: -10px; left: 50%; transform: translateX(-50%);}

@media (max-width: 991px) { 
.timeline-container{max-width:100%;}
}

@media (max-width: 768px) {
    .timeline-container {
        display: flex;
        flex-direction: row;  /* Na urzdzeniach mobilnych kontener timeline-container bdzie ukada elementy w poziomie (linia po lewej) */
        align-items: flex-start;
        position: relative;  /* Zapewnia, e elementy w kontenerze s odpowiednio pozycjonowane */
        width: 100%;  /* Szeroko kontenera na 100% */
        height: 100%;  /* Wysoko kontenera powinna by 100% */
    }

    .timeline-line {
        position: absolute; /* Ustawiamy pozycjonowanie absolutne, aby linia bya widoczna na tle punktw */
        top: 0;
        left: 0;
        height: 100%; /* Ustawiamy wysoko na 100%, aby linia rozcigaa si na pen wysoko kontenera */
        width: 3px;  /* Szeroko linii */
        background: #D9D9D9; /* Kolor linii */
        margin-right: 20px;  /* Odstp midzy lini a punktami */
        flex-shrink: 0;
        border-radius: 100px;
    }

    .progress-line {
        position: absolute;
        top: 0;
        left: 0;
        height: 0%; /* Zmienna wysoko linii postpu */
        width: 100%;
        background: #4CC9F0;
        border-radius: 100px;
    }

    .timeline-points {
        display: block;
        padding-left:40px;
    }
    
    .timeline-points .point:first-child .steptext {
        margin-top: 0; /* Usunicie marginesu grnego dla pierwszego punktu */
    }

    .steptext {
        height: 50px;
        margin-top: 60px; /* Odstp midzy tekstem a lini osi czasu */
    }

    .circle {
        position: absolute;
        width: 14px;  /* Zmniejszenie kek */
        height: 14px;
        left: -38px;  /* Wyrwnanie kek wzgldem linii */
        top: 14px;  /* Wyrwnanie kek do gry punktu */
        background: #D9D9D9;
        border-radius: 100px;
    }
}