#primary section.milestones {
            background: #F3F5FB;
        }

        .milestones__title {
            margin-top: 24px;
        }

        .milestones__steps {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .milestones__timeline {
            position: relative;
        }

        .milestones__step {
            position: relative;
            flex: 1;
            text-align: start;
        }

        .milestones__step-content {
            transition: all 0.3s ease;
        }

        .milestones__step:not(:first-child) .milestones__step-content {
            opacity: 0;
            transform: translateY(20px);
        }

        .milestones__dot {
            position: absolute;
            width: 32px;
            height: 32px;
            transition: all 0.3s ease;
            z-index: 1;
            opacity: 0;
        }

        .milestones__dot::before {
            content: '';
            position: absolute;
            width: 32px;
            height: 32px;
            background-color: #C9CFF9;
            border-radius: 24px;
            z-index: 1;
        }

        .milestones__dot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            background-color: #1629D6;
            border-radius: 23px;
            z-index: 1;
        }

        .milestones__step:not(:last-child)::before {
            content: '';
            position: absolute;
            top: 0;
            background: #CFCFCF;
        }

        .milestones__step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 0;
            background: #969AF2;
        }

        .milestones__timeline::after {
            content: '';
            position: absolute;
            top: 0;
            z-index: 2;
            width: 16px;
            height: 16px;
            background-color: #1629D6;
            border-radius: 23px;
            opacity: var(--dot-opacity, 1);
        }

        .milestones__step.animated .milestones__dot {
            opacity: 1;
        }

        .milestones__step.animated .milestones__step-content {
            opacity: 1;
            transform: translateY(0);
        }

        .milestones__number {
            font-weight: 500;
            line-height: 130%;
            color: #1629D6;
        }

        .milestones__desc {
            color: var(--grey-600, #4f4f4f);
            max-width: 281px;
        }


        @media screen and (min-width: 991px) {
            .milestones__steps {
                margin-top: 60px;
            }

            .milestones__number {
                font-size: 24px;
            }

            .milestones__step {
                padding-top: 42px;
                padding-right: 16px;
            }

            .milestones__dot {
                top: 0;
                left: -8px;
                transform: translateY(-50%);
            }

            .milestones__step:not(:last-child)::before {
                left: 0;
                width: 100%;
                height: 1px;
            }

            .milestones__step:not(:last-child)::after {
                left: 0;
                width: var(--progress, 0%);
                height: 1px;
                transition: width 2s linear;
            }

            .milestones__timeline::after {
                top: 0;
                left: var(--dot-position, 0%);
                transition: left 2s linear, opacity 0.5s ease;
                transform: translateY(-50%);
            }
        }


        @media screen and (max-width: 990px) {
            .milestones__steps {
                margin-top: 40px;
            }

            .milestones__step {
                padding-bottom: 40px;
                padding-left: 36px;
            }

            .milestones__step:last-child {
                padding-bottom: 0;
            }

            .milestones__number {
                font-size: 20px;
            }

            .milestones__desc {
                font-size: 14px;
                line-height: 140%;
                margin-top: 16px;
            }

            .milestones__steps {
                flex-direction: column;
            }

            .milestones__dot {
                left: -5.5px;
                top: -8px;
            }

            .milestones__step:not(:last-child)::before {
                left: 10px;
                width: 1px;
                height: 100%;
            }

            .milestones__step:not(:last-child)::after {
                left: 10px;
                width: 1px;
                height: var(--progress, 0%);
                transition: height 2s linear;
            }

            .milestones__timeline::after {
                top: var(--dot-position, 0%);
                left: 3px;
                transition: top 2s linear, opacity 0.5s ease;
            }
        }

        @media screen and (min-width: 789px) {
            #primary section.milestones {
                padding-top: 80px;
                padding-bottom: 80px;
            }
        }

        @media screen and (max-width: 768px) {
            #primary section.milestones {
                padding-top: 40px;
                padding-bottom: 40px;
            }
        }