main section {
    &.intro {
        padding-block: calc((3.1 * 100vw) / 100) calc((7.1 * 100vw) / 100);
        .intro-details {
            background-size: contain;
            background-repeat: no-repeat;
            width: calc((82.73 * 100vw) / 100);
            background-position: top right, top left;
            padding-inline: calc((11.15 * 100vw) / 100);
            background-image: url("../media/patterns/intro-right.svg"), url("../media/patterns/intro-left.svg");
            div {
                img {
                    width: calc((.8 * 100vw) / 100);
                    &:last-of-type {
                        transform: rotateY(180deg);
                    }
                }
                h6 {
                    font-weight: 700;
                    color: var(--secondary-color);
                    font-family: var(--tajawal-font);
                    font-size: calc((1.04 * 100vw) / 100);
                    margin-inline: calc((.52 * 100vw) / 100);
                }
                + img {
                    width: calc((3.6 * 100vw) / 100);
                    margin-block: calc((.42 * 100vw) / 100) calc((.7 * 100vw) / 100);
                }
                &.en-mode img {
                    &:first-of-type {
                        transform: rotateY(180deg);
                    }
                    &:last-of-type {
                        transform: unset;
                    }
                }
            }
            h2 {
                color: #333;
                font-weight: 700;
                line-height: 150%;
                font-size: calc((2.3 * 100vw) / 100);
                margin-bottom: calc((.83 * 100vw) / 100);
                font-family: var(--neo-font);
                span {
                    color: #49889B;
                }
            }
            p {
                color: #000;
                text-align: justify;
                font-family: var(--tajawal-font);
                font-size: calc((1.25 * 100vw) / 100);
                margin-bottom: calc((.33 * 100vw) / 100);
                span {
                    color: var(--secondary-color);
                }
                + img {
                    display: flex;
                    width: calc((3.6 * 100vw) / 100);
                    margin-inline-start: calc((5.65 * 100vw) / 100);
                }
            }
        }
        .intro-view {
            margin-top: calc((.14 * 100vw) / 100);
            button {
                margin-bottom: calc((1.9 * 100vw) / 100);
                border-radius: calc((.52 * 100vw) / 100);
                background-color: var(--secondary-color);
                padding: calc((.81 * 100vw) / 100) calc((1.41 * 100vw) / 100);
                img {
                    width: calc((1.51 * 100vw) / 100);
                    margin-inline-end: calc((.83 * 100vw) / 100);
                }
                p {
                    font-weight: 700;
                    margin-bottom: unset;
                    font-family: var(--tajawal-font);
                    font-size: calc((1.25 * 100vw) / 100);
                }
                img,
                p {
                    z-index: 1;
                    position: relative;
                }
            }
            .intro-view-images {
                background-repeat: no-repeat;
                height: calc((36.72 * 100vw) / 100);
                padding-inline: calc((4.43 * 100vw) / 100);
                background-position: left top, right top, center;
                background-size: calc((3.4 * 100vw) / 100) calc((7 * 100vw) / 100), calc((4 * 100vw) / 100) calc((6.5 * 100vw) / 100), cover;
                background-image: url("../media/patterns/intro-half-left.svg"), url("../media/patterns/intro-half-right.svg"), url("../media/images/intro-layer.svg");
                .images-layer {
                    height: inherit;
                    position: relative;
                    width: calc((55.71 * 100vw) / 100);
                    transition: transform .5s ease-in-out;
                    transform: translateY(calc((3.12 * 100vw) / 100));
                    .box {
                        z-index: 3;
                        position: absolute;
                        transition: all .5s ease-in-out;
                        width: calc((7.22 * 100vw) / 100);
                        &.box-right {
                            top: calc((16.9 * 100vw) / 100);
                            right: calc((-3.61 * 100vw) / 100);
                        }
                        &.box-left {
                            top: calc((1.3 * 100vw) / 100);
                            left: calc((-3.61 * 100vw) / 100);
                        }
                    }
                    .layer-card {
                        top: 50%;
                        left: 50%;
                        z-index: 1;
                        position: absolute;
                        transition: all .5s ease-in-out;
                        width: calc((10.98 * 100vw) / 100);
                        &.card-1 {
                            top: 10%;
                            right: 10%;
                        }
                        &.card-2 {
                            top: 50%;
                            right: 10%;
                        }
                        &.card-3 {
                            top: 20%;
                            left: 10%;
                        }
                        &.card-4 {
                            top: 50%;
                            left: 10%;
                        }
                    }
                    .scroll-layer {
                        inset: 0;
                        z-index: 2;
                        overflow: hidden;
                        position: absolute;
                        border-radius: calc((.6 * 100vw) / 100);
                        border: 8.996px solid rgba(0, 0, 0, 0.10);
                        img {
                            inset: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: fill;
                            position: absolute;
                            object-position: center;
                            transition: top .5s ease-in-out;
                            &:first-of-type {
                                top: -100%;
                            }
                        }
                    }
                }
                &:hover .images-layer {
                    .scroll-layer img {
                        &:first-of-type {
                            top: 0;
                        }
                        &:last-of-type {
                            top: 100%;
                        }
                    }
                    @media screen and (min-width: 991px) {
                        & {
                            transform: translateY(0);
                            .box {
                                &.box-right {
                                    top: calc((20 * 100vw) / 100);
                                    right: calc((-9.22 * 100vw) / 100);
                                }
                                &.box-left {
                                    top: calc((22.13 * 100vw) / 100);
                                    left: calc((-7.92 * 100vw) / 100);
                                }
                            }
                            .layer-card {
                                &.card-1 {
                                    top: calc((-2.82 * 100vw) / 100);
                                    right: calc((-13 * 100vw) / 100);
                                }
                                &.card-2 {
                                    top: calc((8.5 * 100vw) / 100);
                                    right: calc((-14.15 * 100vw) / 100);
                                }
                                &.card-3 {
                                    top: calc((-2.9 * 100vw) / 100);
                                    left: calc((-12.99 * 100vw) / 100);
                                }
                                &.card-4 {
                                    top: calc((9.1 * 100vw) / 100);
                                    left: calc((-14.12 * 100vw) / 100);
                                }
                                &.en-mode {
                                    &.card-1 {
                                        top: calc((-2.82 * 100vw) / 100);
                                        left: calc((58 * 100vw) / 100);
                                    }
                                    &.card-2 {
                                        top: calc((8.5 * 100vw) / 100);
                                        left: calc((59 * 100vw) / 100);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &.trusted .container {
        margin-bottom: calc((5.8 * 100vw) / 100);
        h5 {
            font-weight: 800;
            color: var(--secondary-color);
            font-family: var(--cairo-font);
            font-size: calc((1.25 * 100vw) / 100);
            margin-bottom: calc((.99 * 100vw) / 100);
        }
        div img {
            width: calc((8.44 * 100vw) / 100);
            &:not(:first-of-type){
                margin-inline-start: calc((2.1 * 100vw) / 100);
            }
        }
    }
    &.experiment {
        overflow: hidden;
        background-repeat: no-repeat;
        padding-bottom: calc((4.11 * 100vw) / 100);
        background-position: calc((-18.1 * 100vw) / 100) 400%;
        background-image: url("../media/patterns/intro-right.svg");
        background-size: calc((36.2 * 100vw) / 100) calc((36.14 * 100vw) / 100);
        .layer {
            position: relative;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: 105% center;
            background-image: url("../media/images/experiment-bg.png");
            padding-block: calc((4.74 * 100vw) / 100) calc((3.65 * 100vw) / 100);
            .owl-experiment {
                margin-inline-start: calc((4.74 * 100vw) / 100);
                .owl-stage-outer .owl-stage .owl-item {
                    opacity: 0;
                    transition: all .6s ease-in-out;
                    &.cloned {
                        opacity: 0;
                    }
                    &.active {
                        opacity: 1;
                    }
                    &.un-active {
                        opacity: 0;
                    }
                }
                .experiment-card {
                    text-align: center;
                    background-color: #FFF;
                    font-family: var(--neo-font);
                    width: calc((20.4 * 100vw) / 100);
                    min-height: calc((26.2 * 100vw) / 100);
                    border: 1px solid rgba(0, 0, 0, 0.20);
                    border-radius: calc((.52 * 100vw) / 100);
                    padding-inline: calc((1.04 * 100vw) / 100);
                    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
                    padding-block: calc((3.2 * 100vw) / 100) calc((2.7 * 100vw) / 100);
                    img {
                        margin-inline: auto;
                        width: calc((18.3 * 100vw) / 100);
                        height: calc((16.51 * 100vw) / 100);
                        margin-bottom: calc((1.25 * 100vw) / 100);
                    }
                    h6 {
                        color: #333;
                        font-weight: 400;
                        margin-bottom: unset;
                        font-size: calc((1.04 * 100vw) / 100);
                    }
                    p {
                        height: 0;
                        overflow: hidden;
                        text-align: justify;
                        margin-bottom: unset;
                        transition: all 1s linear;
                        font-size: calc((.83 * 100vw) / 100);
                        span {
                            color: var(--secondary-color);
                        }
                    }
                    &.active {
                        padding-inline: calc((1.8 * 100vw) / 100);
                        padding-block: calc((1.04 * 100vw) / 100) calc((1.15 * 100vw) / 100);
                        img {
                            width: calc((15.7 * 100vw) / 100);
                            height: calc((13.7 * 100vw) / 100);
                        }
                        h6 {
                            font-weight: 500;
                            color: var(--primary-color);
                            margin-bottom: calc((.21 * 100vw) / 100);
                        }
                        p {
                            height: auto;
                            overflow: hidden;
                        }
                    }
                }
            }
            .experiment-info {
                top: 50%;
                z-index: 1;
                position: absolute;
                transform: translateY(-50%);
                font-family: var(--neo-font);
                right: calc((6.1 * 100vw) / 100);
                h6 {
                    color: #FFF;
                    font-weight: 700;
                    width: fit-content;
                    font-size: calc((1.04 * 100vw) / 100);
                    background-color: var(--primary-color);
                    margin-bottom: calc((1.15 * 100vw) / 100);
                }
                p {
                    color: #F9F9F9;
                    font-size: calc((2.6 * 100vw) / 100);
                    margin-bottom: calc((1.15 * 100vw) / 100);
                }
                .experiment-details {
                    position: relative;
                    span {
                        color: #FFF;
                        font-size: calc((1.25 * 100vw) / 100);
                    }
                    img {
                        top: 50%;
                        position: absolute;
                        transform: translateY(-50%);
                        width: calc((1.6 * 100vw) / 100);
                        right: calc((-2.02 * 100vw) / 100);
                    }
                }
                .experiment-actions {
                    margin-top: calc((4.84 * 100vw) / 100);
                    button {
                        position: relative;
                        &:first-of-type span {
                            right: calc((-.7 * 100vw) / 100);
                        }
                        &:last-of-type {
                            margin-inline-start: calc((.4 * 100vw) / 100);
                            span {
                                left: calc((-.7 * 100vw) / 100);
                            }
                        }
                        img {
                            z-index: 1;
                            position: relative;
                            width: calc((1.81 * 100vw) / 100);
                        }
                        span {
                            top: 50%;
                            position: absolute;
                            border-radius: 50%;
                            transform: translateY(-50%);
                            width: calc((1.94 * 100vw) / 100);
                            height: calc((1.94 * 100vw) / 100);
                            background-color: var(--primary-color);
                        }
                    }
                }
            }
        }
        &.en-mode .layer {
            background-position: -5% center;
            .owl-experiment .experiment-card {
                min-height: calc((27.4 * 100vw) / 100);
            }
            .experiment-info {
                right: unset;
                left: calc((6.1 * 100vw) / 100);
                .experiment-details img {
                    right: unset;
                    left: calc((-2.02 * 100vw) / 100);
                }
                .experiment-actions button {
                    &:first-of-type span {
                        right: unset;
                        left: calc((-.7 * 100vw) / 100);
                    }
                    &:last-of-type span {
                        left: unset;
                        right: calc((-.7 * 100vw) / 100);
                    }
                }
            }
        }
    }
    &.why-choose {
        position: relative;
        background-repeat: no-repeat;
        background-position: 85% 70%;
        padding-bottom: calc((9.04 * 100vw) / 100);
        background-image: url("../media/patterns/intro-right.svg");
        background-size: calc((20.52 * 100vw) / 100) calc((20.5 * 100vw) / 100);
        .why-choose-info {
            margin-inline-start: calc((6.5 * 100vw) / 100);
            h6,
            h5 {
                font-weight: 500;
                margin-bottom: unset;
                font-family: var(--neo-font);
                font-size: calc((2.1 * 100vw) / 100);
            }
            h6 {
                color: var(--primary-color);
            }
            h5 {
                color: var(--secondary-color);
            }
            > a {
                padding: calc((.52 * 100vw) / 100);
                border-radius: calc((.52 * 100vw) / 100);
                background-color: var(--secondary-color);
                p {
                    z-index: 1;
                    font-weight: 700;
                    position: relative;
                    margin-bottom: unset;
                    font-family: var(--tajawal-font);
                    font-size: calc((1.25 * 100vw) / 100);
                }
            }
        }
        .why-choose-view {
            position: relative;
            padding-top: calc((2.13 * 100vw) / 100);
            &::before {
                z-index: 1;
                content: "";
                top: 0;
                left: 0;
                right: 0;
                bottom: 10%;
                position: absolute;
                background-color: #FAFAFA;
                border-end-start-radius: calc((5.21 * 100vw) / 100);
                border-start-start-radius: calc((5.21 * 100vw) / 100);
            }
            > p {
                z-index: 1;
                color: #000;
                position: relative;
                text-align: justify;
                margin-inline: auto;
                font-family: var(--neo-font);
                width: calc((50.83 * 100vw) / 100);
                font-size: calc((1.25 * 100vw) / 100);
                margin-bottom: calc((3.7 * 100vw) / 100);
            }
            .why-choose-card {
                display: flex;
                position: relative;
                text-align: center;
                align-items: center;
                margin-inline: auto;
                flex-direction: column;
                justify-content: center;
                background-color: #FAFAFA;
                width: calc((12.64 * 100vw) / 100);
                height: calc((14.32 * 100vw) / 100);
                border: 1px solid rgba(0, 0, 0, 0.10);
                border-radius: calc((3.8 * 100vw) / 100);
                padding-inline: calc((.5 * 100vw) / 100);
                &::after {
                    content: "";
                    right: 0;
                    bottom: 0;
                    opacity: 0;
                    position: absolute;
                    border-radius: 50%;
                    transition: all .3s linear;
                    width: calc((3.5 * 100vw) / 100);
                    height: calc((3.5 * 100vw) / 100);
                    background-color: var(--primary-color);
                }
                img {
                    margin-inline: auto;
                    transition: all .3s linear;
                    width: calc((4.13 * 100vw) / 100);
                    height: calc((4.13 * 100vw) / 100);
                    margin-bottom: calc((1.32 * 100vw) / 100);
                }
                p {
                    margin-bottom: unset;
                    transition: all .3s linear;
                    font-family: var(--neo-font);
                    font-size: calc((.75 * 100vw) / 100);
                }
                &.active {
                    margin-bottom: 7.225px;
                    background-color: #FFF;
                    width: calc((14.15 * 100vw) / 100);
                    height: calc((16.9 * 100vw) / 100);
                    border-radius: calc((4.6 * 100vw) / 100);
                    padding-inline: calc((2.03 * 100vw) / 100);
                    box-shadow: 0px 2.89px 7.225px 0px rgba(0, 0, 0, 0.10);
                    &::after {
                        opacity: 1;
                    }
                    img {
                        width: calc((6.1 * 100vw) / 100);
                        height: calc((6.1 * 100vw) / 100);
                        margin-bottom: calc((1.05 * 100vw) / 100);
                    }
                    p {
                        font-weight: 500;
                    }
                }
            }
        }
        .why-choose-actions {
            margin-block: calc((3.12 * 100vw) / 100);
            button {
                position: relative;
                &:first-of-type span {
                    right: calc((-.7 * 100vw) / 100);
                }
                &:last-of-type {
                    margin-inline-start: calc((.4 * 100vw) / 100);
                    span {
                        left: calc((-.7 * 100vw) / 100);
                    }
                }
                img {
                    z-index: 1;
                    position: relative;
                    width: calc((1.81 * 100vw) / 100);
                }
                span {
                    top: 50%;
                    position: absolute;
                    border-radius: 50%;
                    transform: translateY(-50%);
                    width: calc((1.94 * 100vw) / 100);
                    height: calc((1.94 * 100vw) / 100);
                    background-color: var(--primary-color);
                }
            }
            &.en-mode button {
                &:first-of-type span {
                    right: unset;
                    left: calc((-.7 * 100vw) / 100);
                }
                &:last-of-type span {
                    left: unset;
                    right: calc((-.7 * 100vw) / 100);
                }
            }
        }
    }
    &.accreditation {
        position: relative;
        margin-bottom: calc((9.74 * 100vw) / 100);
        &::before {
            content: "";
            top: 50%;
            height: 80%;
            z-index: -1;
            position: absolute;
            border-radius: 100px;
            transform: translateY(-50%);
            background-color: #FAFAFA;
            left: calc((1.9 * 100vw) / 100);
            right: calc((1.9 * 100vw) / 100);
        }
        .accreditation-view {
            overflow: hidden;
            position: relative;
            background-color: #FFF;
            width: calc((42.45 * 100vw) / 100);
            height: calc((28.6 * 100vw) / 100);
            border-radius: calc((.6 * 100vw) / 100);
            border: 8.996px solid rgba(0, 0, 0, 0.10);
            margin-inline-end: calc((5.21 * 100vw) / 100);
            img {
                left: 0;
                right: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                transition: top .5s ease-in-out;
                &:first-of-type {
                    top: -100%;
                    &.active {
                        top: 0;
                    }
                }
                &:not(:first-of-type) {
                    top: 100%;
                    &.active {
                        top: 0;
                    }
                }
            }
        }
        .accreditation-list {
            font-family: var(--neo-font);
            width: calc((42.8 * 100vw) / 100);
            padding-inline-start: calc((2.1 * 100vw) / 100);
            h4 {
                font-weight: 700;
                position: relative;
                color: var(--primary-color);
                font-size: calc((1.72 * 100vw) / 100);
                margin-bottom: calc((1.04 * 100vw) / 100);
                &::before {
                    content: "";
                    top: 50%;
                    position: absolute;
                    border-radius: 100px;
                    transform: translateY(-50%);
                    width: calc((.31 * 100vw) / 100);
                    height: calc((1.41 * 100vw) / 100);
                    right: calc((-1.04 * 100vw) / 100);
                    background-color: var(--secondary-color);
                }
                &.en-mode::before {
                    right: unset;
                    left: calc((-1.04 * 100vw) / 100);
                }
            }
            ul li {
                opacity: .5;
                cursor: pointer;
                transition: opacity .3s ease-in-out;
                &:not(:first-of-type) {
                    margin-top: calc((2.1 * 100vw) / 100);
                }
                div {
                    display: flex;
                    align-items: center;
                    img {
                        width: calc((2.34 * 100vw) / 100);
                        height: calc((2.34 * 100vw) / 100);
                        margin-inline-end: calc((.52 * 100vw) / 100);
                    }
                    h6 {
                        color: #000;
                        font-weight: 400;
                        margin-bottom: unset;
                        transition: all .3s ease-in-out;
                        font-size: calc((1.25 * 100vw) / 100);
                    }
                }
                > img {
                    display: none;
                }
                &.active {
                    opacity: 1;
                    div h6 {
                        font-weight: 700;
                        color: var(--secondary-color);
                    }
                }
            }
        }
    }
    &.advantages {
        position: relative;
        background-repeat: no-repeat;
        font-family: var(--neo-font);
        background-position: calc(-2.3 * 100vw / 100) bottom, center;
        padding-block: calc(4.3 * 100vw / 100) calc(1.5 * 100vw / 100);
        padding-inline: calc(5.1 * 100vw / 100) calc(5.9 * 100vw / 100);
        background-size: calc(26.8 * 100vw / 100) calc(28.7 * 100vw / 100), cover;
        background-image: url("../media/patterns/advantages.svg"), url("../media/images/advantages-bg.jpg");
        > img {
            position: absolute;
            width: calc(5.24 * 100vw / 100);
            height: calc(3.8 * 100vw / 100);
            right: calc(28.55 * 100vw / 100);
            bottom: calc(-2.5 * 100vw / 100);
        }
        .advantages-info {
            img {
                width: calc(4.45 * 100vw / 100);
                margin-inline-end: calc(1.13 * 100vw / 100);
                + p {
                    color: #F9F9F9;
                    font-weight: 700;
                    font-size: calc(1.04 * 100vw / 100);
                }
            }
            h3 {
                font-size: 700;
                color: var(--primary-color);
                font-size: calc(2.1 * 100vw / 100);
                margin-block: calc(2.4 * 100vw / 100) calc(3.4 * 100vw / 100);
            }
            h4 {
                color: #FFF;
                font-size: 500;
                position: relative;
                font-size: calc(1.72 * 100vw / 100);
                margin-bottom: calc(4.6 * 100vw / 100);
                padding-bottom: calc(.9 * 100vw / 100);
                &::before,
                &::after {
                    right: 0;
                    top: 100%;
                    content: "";
                    position: absolute;
                    height: calc(.2 * 100vw / 100);
                    border-radius: calc(.42 * 100vw / 100);
                }
                &::before {
                    background-color: #D9D9D9;
                    width: calc(8.65 * 100vw / 100);
                }
                &::after {
                    width: calc(5.43 * 100vw / 100);
                    background-color: var(--secondary-color);
                }
            }
            ul li {
                display: flex;
                cursor: pointer;
                align-items: center;
                &:not(:last-of-type) {
                    padding-bottom: calc((2.04 * 100vw) / 100);
                    span::after {
                        content: "";
                        right: 40%;
                        position: absolute;
                        border-radius: 100px;
                        background-color: #ffffff4d;
                        width: calc((.3 * 100vw) / 100);
                        height: calc((1.42 * 100vw) / 100);
                        bottom: calc((-1.73 * 100vw) / 100);
                    }
                }
                span {
                    color: #FFF;
                    display: flex;
                    font-weight: 500;
                    border-radius: 50%;
                    position: relative;
                    align-items: center;
                    justify-content: center;
                    background-color: #ffffff4d;
                    width: calc((2.1 * 100vw) / 100);
                    height: calc((2.1 * 100vw) / 100);
                    font-size: calc((1.25 * 100vw) / 100);
                    margin-inline-end: calc((1.04 * 100vw) / 100);
                }
                h5 {
                    font-weight: 500;
                    color: #ffffff4d;
                    margin-bottom: unset;
                    font-size: calc((1.25 * 100vw) / 100);
                }
                &.active {
                    span {
                        background-color: var(--primary-color);
                        &::after {
                            background-color: #FFF;
                        }
                    }
                    h5 {
                        color: #F9F9F9;
                    }
                }
            }
            a {
                padding: calc((.52 * 100vw) / 100);
                margin-top: calc(3.54 * 100vw / 100);
                border-radius: calc((.52 * 100vw) / 100);
                background-color: var(--secondary-color);
                p {
                    z-index: 1;
                    font-weight: 700;
                    position: relative;
                    margin-bottom: unset;
                    font-family: var(--tajawal-font);
                    font-size: calc((1.25 * 100vw) / 100);
                }
            }
        }
        .advantages-content {
            > p {
                color: #F9F9F9;
                text-align: justify;
                font-size: calc(1.25 * 100vw / 100);
                margin-bottom: calc(1.98 * 100vw / 100);
            }
            .advantages-stepper {
                overflow: hidden;
                border-radius: calc(2.6 * 100vw / 100);
                > ul {
                    display: none;
                    align-items: center;
                    background-color: #00B7FB;
                    justify-content: space-between;
                    padding-inline: calc(4 * 100vw / 100);
                    padding-block: calc(1.25 * 100vw / 100) calc(3.96 * 100vw / 100);
                    &.active {
                        display: flex;
                    }
                    li {
                        display: flex;
                        position: relative;
                        align-items: center;
                        justify-content: end;
                        &:not(:last-of-type) {
                            margin-inline-end: calc(.6 * 100vw / 100);
                        }
                        &:not(:first-of-type) {
                            width: calc(100% / 2);
                            &::after {
                                content: "";
                                top: 50%;
                                right: 0;
                                position: absolute;
                                border-radius: 100px;
                                transform: translateY(-50%);
                                left: calc(2.3 * 100vw / 100);
                                background-color: #ffffff66;
                                height: calc(.22 * 100vw / 100);
                            }
                        }
                        .step {
                            display: flex;
                            cursor: pointer;
                            font-weight: 700;
                            border-radius: 50%;
                            color: #ffffff80;
                            position: relative;
                            align-items: center;
                            justify-content: center;
                            border: 2px solid transparent;
                            background-color: #ffffff66;
                            width: calc(1.8 * 100vw / 100);
                            height: calc(1.8 * 100vw / 100);
                            font-size: calc(1.04 * 100vw / 100);
                            h6 {
                                top: 150%;
                                width: 500%;
                                font-weight: 700;
                                position: absolute;
                                color: #ffffff80;
                                text-align: center;
                                margin-bottom: unset;
                                font-size: calc(.85 * 100vw / 100);
                            }
                        }
                        &.active {
                            &::after {
                                background-color: var(--secondary-color);
                            }
                            .step {
                                color: #FFF;
                                border-color: var(--secondary-color);
                                background-color: var(--secondary-color);
                                h6 {
                                    color: #FFF;
                                }
                            }
                        }
                    }
                }
                .advantages-view {
                    background-color: #023447;
                    background-repeat: no-repeat;
                    padding-block: calc(1.3 * 100vw / 100);
                    padding-inline-end: calc(1.5 * 100vw / 100);
                    padding-inline-start: calc(2.97 * 100vw / 100);
                    background-image: url("../media/patterns/advantages.svg");
                    background-size: calc(26.8 * 100vw / 100) calc(28.7 * 100vw / 100);
                    background-position: calc(-8.2 * 100vw / 100) calc(8.2 * 100vw / 100);
                    > div {
                        &:first-of-type {
                            overflow-y: scroll;
                            scrollbar-width: none;
                            -ms-overflow-style: none;
                            height: calc((32.8 * 100vw) / 100);
                            &::-webkit-scrollbar {
                                display: none;
                            }
                            > img {
                                width: calc(3.12 * 100vw / 100);
                                margin-inline-end: calc(1.04 * 100vw / 100);
                            }
                            ul {
                                display: none;
                                &.active {
                                    display: block;
                                }
                                li {
                                    display: none;
                                    h5 {
                                        color: #FFF;
                                        font-weight: 700;
                                        font-size: calc(1.25 * 100vw / 100);
                                        margin-top: calc(.83 * 100vw / 100);
                                        margin-bottom: calc(1.98 * 100vw / 100);
                                    }
                                    p {
                                        color: #F9F9F9;
                                        font-size: calc(1.25 * 100vw / 100);
                                        margin-bottom: calc(.83 * 100vw / 100);
                                    }
                                    img {
                                        width: 100%;
                                        border-radius: calc((.6 * 100vw) / 100);
                                    }
                                    &.active {
                                        display: block;
                                    }
                                }
                            }
                        }
                        &:last-of-type {
                            margin-inline-start: calc((2.7 * 100vw) / 100);
                            button {
                                position: relative;
                                &:first-of-type span {
                                    right: calc((-.7 * 100vw) / 100);
                                }
                                &:last-of-type {
                                    margin-inline-start: calc((.4 * 100vw) / 100);
                                    span {
                                        left: calc((-.7 * 100vw) / 100);
                                    }
                                }
                                img {
                                    z-index: 1;
                                    position: relative;
                                    width: calc((1.81 * 100vw) / 100);
                                }
                                span {
                                    top: 50%;
                                    position: absolute;
                                    border-radius: 50%;
                                    transform: translateY(-50%);
                                    width: calc((1.94 * 100vw) / 100);
                                    height: calc((1.94 * 100vw) / 100);
                                    background-color: var(--primary-color);
                                }
                            }
                        }
                    }
                }
            }
        }
        &.en-mode {
            .advantages-info {
                h4::after,
                h4::before {
                    left: 0;
                    right: unset;
                }
            }
            .advantages-content .advantages-stepper {
                > ul li:not(:first-of-type)::after {
                    left: 0;
                    right: calc(2.3 * 100vw / 100);
                }
                .advantages-view > div:last-of-type button {
                    &:first-of-type span {
                        right: unset;
                        left: calc((-.7 * 100vw) / 100);
                    }
                    &:last-of-type span {
                        left: unset;
                        right: calc((-.7 * 100vw) / 100);
                    }
                }
            }
        }
    }
    &.benefits {
        text-align: center;
        font-family: var(--neo-font);
        background-repeat: no-repeat;
        background-position: 1% 131%;
        padding-block: calc(5.21 * 100vw / 100);
        background-image: url("../media/patterns/intro-right.svg");
        background-size: calc(15.24 * 100vw / 100) calc(16.25 * 100vw / 100);
        h3 {
            color: #1B1E1D;
            font-weight: 500;
            width: fit-content;
            position: relative;
            margin-inline: auto;
            font-size: calc(1.98 * 100vw / 100);
            margin-bottom: calc(3.1 * 100vw / 100);
            padding-bottom: calc(.9 * 100vw / 100);
            &::before,
            &::after {
                right: 0;
                top: 100%;
                content: "";
                position: absolute;
                height: calc(.2 * 100vw / 100);
                border-radius: calc(.42 * 100vw / 100);
            }
            &::before {
                background-color: #D9D9D9;
                width: calc(8.65 * 100vw / 100);
            }
            &::after {
                width: calc(5.43 * 100vw / 100);
                background-color: var(--secondary-color);
            }
        }
        .benefits-card {
            padding-inline-start: calc(1.04 * 100vw / 100);
            div {
                background-color: #FFF;
                color: var(--secondary-color);
                padding: calc(.52 * 100vw / 100);
                border-radius: calc(1.6 * 100vw / 100);
                border: 1px solid rgba(3, 89, 123, 0.20);
                img {
                    width: 80%;
                    height: calc(15.7 * 100vw / 100);
                }
                h6 {
                    font-weight: 700;
                    min-height: calc(2.4 * 100vw / 100);
                    font-size: calc(1.04 * 100vw / 100);
                    margin-block: calc(.83 * 100vw / 100) calc(.52 * 100vw / 100);
                }
                p {
                    margin-bottom: unset;
                    font-size: calc(.83 * 100vw / 100);
                    min-height: calc(2.5 * 100vw / 100);
                }
            }
        }
        .carousel-actions {
            margin-block: calc(2.65 * 100vw / 100) calc(1.5 * 100vw / 100);
            .carousel-indicators button {
                opacity: .4;
                border-radius: 50%;
                width: calc(.73 * 100vw / 100);
                height: calc(.73 * 100vw / 100);
                background-color: var(--primary-color);
                &.active {
                    opacity: 1;
                }
            }
        }
        .carousel-prev-next {
            margin-inline-end: calc((2.2 * 100vw) / 100);
            button {
                position: relative;
                &:first-of-type span {
                    right: calc((-.7 * 100vw) / 100);
                }
                &:last-of-type {
                    margin-inline-start: calc((.4 * 100vw) / 100);
                    span {
                        left: calc((-.7 * 100vw) / 100);
                    }
                }
                img {
                    z-index: 1;
                    position: relative;
                    width: calc((1.81 * 100vw) / 100);
                }
                span {
                    top: 50%;
                    position: absolute;
                    border-radius: 50%;
                    transform: translateY(-50%);
                    width: calc((1.94 * 100vw) / 100);
                    height: calc((1.94 * 100vw) / 100);
                    background-color: var(--primary-color);
                }
            }
            &.en-mode button {
                &:first-of-type span {
                    right: unset;
                    left: calc((-.7 * 100vw) / 100);
                }
                &:last-of-type span {
                    left: unset;
                    right: calc((-.7 * 100vw) / 100);
                }
            }
        }
        &.en-mode {
            h3::after,
            h3::before {
                left: 0;
                right: unset;
            }
        }
    }
    &.trainee-journey {
        background-color: #FBFBFB;
        background-repeat: no-repeat;
        background-position: 1% -18%;
        border-radius: calc((1.04 * 100vw) / 100);
        background-image: url("../media/patterns/intro-right.svg");
        padding-block: calc((2.1 * 100vw) / 100) calc((.73 * 100vw) / 100);
        background-size: calc(15.24 * 100vw / 100) calc(16.25 * 100vw / 100);
        .trainee-journey-header {
            font-family: var(--neo-font);
            padding-inline-end: calc((6.25 * 100vw) / 100);
            padding-inline-start: calc((4.84 * 100vw) / 100);
            > div {
                &:first-of-type {
                    margin-bottom: calc((2.4 * 100vw) / 100);
                    img {
                        width: calc((4.54 * 100vw) / 100);
                        margin-inline-end: calc((.82 * 100vw) / 100);
                    }
                    span {
                        font-weight: 700;
                        color: var(--secondary-color);
                        font-size: calc((1.04 * 100vw) / 100);
                    }
                }
                &:last-of-type {
                    margin-bottom: calc((2.2 * 100vw) / 100);
                    div {
                        text-align: center;
                        margin-inline-end: calc((7.3 * 100vw) / 100);
                        h3 {
                            font-weight: 700;
                            text-wrap: nowrap;
                            margin-bottom: unset;
                            color: var(--primary-color);
                            font-size: calc((2.1 * 100vw) / 100);
                        }
                        img {
                            height: calc((.55 * 100vw) / 100);
                            margin-top: calc((.6 * 100vw) / 100);
                        }
                    }
                    p {
                        text-align: justify;
                        margin-bottom: unset;
                        color: var(--secondary-color);
                        font-size: calc((1.25 * 100vw) / 100);
                    }
                }
            }
            h4 {
                font-weight: 500;
                position: relative;
                color: var(--secondary-color);
                font-size: calc(1.72 * 100vw / 100);
                margin-bottom: calc(4.2 * 100vw / 100);
                padding-bottom: calc(.9 * 100vw / 100);
                &::before,
                &::after {
                    right: 0;
                    top: 100%;
                    content: "";
                    position: absolute;
                    height: calc(.2 * 100vw / 100);
                    border-radius: calc(.42 * 100vw / 100);
                }
                &::before {
                    background-color: #D9D9D9;
                    width: calc(8.65 * 100vw / 100);
                }
                &::after {
                    width: calc(5.43 * 100vw / 100);
                    background-color: var(--secondary-color);
                }
            }
        }
        .table-responsive {
            white-space: nowrap;
            scrollbar-width: none;
            scroll-behavior: smooth;
            -ms-overflow-style: none;
            &::-webkit-scrollbar {
                display: none;
            }
            table td {
                min-width: calc((24.63 * 100vw) / 100);
                &:first-of-type {
                    padding-inline-start: calc((4.84 * 100vw) / 100);
                }
                .line {
                    width: 100%;
                    position: relative;
                    height: calc((.3 * 100vw) / 100);
                    margin-top: calc((1.12 * 100vw) / 100);
                    background-color: rgba(129, 129, 129, 0.40);
                    &::after {
                        top: 0;
                        right: 0;
                        bottom: 0;
                        width: 0%;
                        content: "";
                        height: 100%;
                        position: absolute;
                        transition: width .3s ease-in-out;
                        background-color: var(--secondary-color);
                    }
                    img {
                        top: 50%;
                        right: 45%;
                        z-index: 1;
                        position: absolute;
                        transform: translateY(-50%);
                        height: calc((2.24 * 100vw) / 100);
                        &.un-active,
                        &.active {
                            opacity: 0;
                            transition: opacity .3s ease-in-out;
                        }
                    }
                }
                h5 {
                    text-wrap: wrap;
                    font-weight: 700;
                    color: #CDCDCD;
                    text-align: center;
                    margin-inline: auto;
                    margin-bottom: unset;
                    font-family: var(--neo-font);
                    font-size: calc((1.25 * 100vw) / 100);
                    margin-top: calc((2.1 * 100vw) / 100);
                    max-width: calc((16.61 * 100vw) / 100);
                }
                &.un-active {
                    .line {
                        &::after {
                            width: 100%;
                        }
                        img.un-active {
                            opacity: 1;
                        }
                    }
                    h5 {
                        color: #000;
                        width: calc((16.61 * 100vw) / 100);
                    }
                }
                &.active {
                    .line {
                        &::after {
                            width: 100%;
                            border-end-end-radius: 100px;
                            border-start-end-radius: 100px;
                        }
                        img.active {
                            opacity: 1;
                        }
                    }
                    h5 {
                        color: var(--secondary-color);
                    }
                }
            }
        }
        .trainee-journey-actions {
            padding-inline-start: calc((4.84 * 100vw) / 100);
            margin-block: calc((1.25 * 100vw) / 100) calc((3.65 * 100vw) / 100);
            button {
                position: relative;
                &:first-of-type span {
                    right: calc((-.7 * 100vw) / 100);
                }
                &:last-of-type {
                    margin-inline-start: calc((.4 * 100vw) / 100);
                    span {
                        left: calc((-.7 * 100vw) / 100);
                    }
                }
                img {
                    z-index: 1;
                    position: relative;
                    width: calc((1.81 * 100vw) / 100);
                }
                span {
                    top: 50%;
                    opacity: 1;
                    position: absolute;
                    border-radius: 50%;
                    transform: translateY(-50%);
                    width: calc((1.94 * 100vw) / 100);
                    height: calc((1.94 * 100vw) / 100);
                    transition: opacity .3s ease-in-out;
                    background-color: var(--primary-color);
                }
                &.btn-disabled span {
                    opacity: 0;
                }
            }
        }
        .trainee-journey-content > li {
            opacity: 0;
            display: none;
            align-items: center;
            justify-content: space-between;
            animation: fade-out .8s ease-in-out;
            padding-inline-start: calc((4.84 * 100vw) / 100);
            .content-info {
                margin-inline-end: calc((2.42 * 100vw) / 100);
                img {
                    width: calc((2.24 * 100vw) / 100);
                    margin-inline-end: calc((.83 * 100vw) / 100);
                }
                div {
                    color: #000;
                    font-family: var(--neo-font);
                    h4 {
                        font-weight: 700;
                        font-size: calc((1.72 * 100vw) / 100);
                        margin-bottom: calc((2.6 * 100vw) / 100);
                    }
                    ul {
                        list-style: disc;
                        padding-inline-start: 16px;
                        li {
                            text-align: justify;
                            font-size: calc((1.25 * 100vw) / 100);
                            &:not(:first-of-type) {
                                margin-top: calc((.42 * 100vw) / 100);
                            }
                        }
                    }
                }
            }
            .content-media {
                text-align: end;
                position: relative;
                img:not(.gif) {
                    width: calc((40.5 * 100vw) / 100);
                }
                &:not(.gif) {
                    padding-inline-end: calc((1.15 * 100vw) / 100);
                }
                .gif {
                    position: absolute;
                    top: calc((6.11 * 100vw) / 100);
                    left: calc((5.8 * 100vw) / 100);
                    width: calc((21.7 * 100vw) / 100);
                    height: calc((13.6 * 100vw) / 100);
                }
            }
            &.active {
                opacity: 1;
                display: flex;
                animation: fade-in .8s ease-in-out;
            }
        }
        &.en-mode {
            .trainee-journey-header {
                h4::after,
                h4::before {
                    left: 0;
                    right: unset;
                }
            }
            .table-responsive table td .line::after {
                left: 0;
                right: unset;
            }
            .trainee-journey-actions button {
                &:first-of-type span {
                    right: unset;
                    left: calc((-.7 * 100vw) / 100);
                }
                &:last-of-type span {
                    left: unset;
                    right: calc((-.7 * 100vw) / 100);
                }
            }
            .trainee-journey-content > li .content-media .gif {
                top: calc((5.2 * 100vw) / 100);
                left: calc((11 * 100vw) / 100);
                width: calc((18.4 * 100vw) / 100);
                height: calc((11.6 * 100vw) / 100);
            }
        }
    }
    &.general-benefits {
        position: relative;
        font-family: var(--neo-font);
        background-repeat: no-repeat;
        background-position: right bottom, left 15%;
        padding-block: calc(8.1 * 100vw / 100) calc(4.9 * 100vw / 100);
        background-size: calc((20.52 * 100vw) / 100) calc((21.9 * 100vw) / 100);
        background-image: url("../media/patterns/intro-right.svg"), url("../media/patterns/intro-right.svg");
        > img {
            right: 60%;
            position: absolute;
            top: calc(2.3 * 100vw / 100);
            width: calc(3.5 * 100vw / 100);
        }
        h3 {
            color: #1B1E1D;
            font-weight: 500;
            width: fit-content;
            position: relative;
            margin-inline: auto;
            font-size: calc(1.98 * 100vw / 100);
            margin-bottom: calc(4.53 * 100vw / 100);
            padding-bottom: calc(.73 * 100vw / 100);
            &::before,
            &::after {
                right: 0;
                top: 100%;
                content: "";
                position: absolute;
                height: calc(.2 * 100vw / 100);
                border-radius: calc(.42 * 100vw / 100);
            }
            &::before {
                background-color: #D9D9D9;
                width: calc(8.65 * 100vw / 100);
            }
            &::after {
                width: calc(5.43 * 100vw / 100);
                background-color: var(--secondary-color);
            }
        }
        > ul {
            height: calc(24 * 100vw / 100);
            > li {
                text-align: center;
                background-color: #FFF;
                color: var(--secondary-color);
                transition: all .3s ease-in-out;
                width: calc(20.52 * 100vw / 100);
                padding: calc(1.04 * 100vw / 100);
                border-radius: calc(1.6 * 100vw / 100);
                border: 1px solid rgba(3, 89, 123, 0.20);
                &:not(:first-of-type) {
                    margin-inline-start: calc(3.12 * 100vw / 100);
                }
                img {
                    width: 100%;
                    border-radius: calc((.6 * 100vw) / 100);
                }
                div {
                    overflow-y: hidden;
                    max-height: calc(7.4 * 100vw / 100);
                    padding-inline: calc(1.8 * 100vw / 100);
                    h6 {
                        font-weight: 700;
                        font-size: calc(1.04 * 100vw / 100);
                        margin-block: calc(1.9 * 100vw / 100) calc(.52 * 100vw / 100);
                    }
                    p {
                        margin-bottom: unset;
                        transition: all .3s .2s ease-in-out;
                        font-size: calc(.83 * 100vw / 100);
                        min-height: calc(3.75 * 100vw / 100);
                    }
                    ul {
                        list-style: disc;
                        margin-top: calc(.52 * 100vw / 100);
                        padding-inline-start: calc(.83 * 100vw / 100);
                        li {
                            color: #000;
                            font-size: calc(.83 * 100vw / 100);
                        }
                    }
                }
                @media screen and (min-width: 992px) {
                    &:hover {
                        display: flex;
                        align-items: start;
                        text-align: justify;
                        justify-content: stretch;
                        padding-inline-end: unset;
                        flex-direction: row-reverse;
                        width: calc(41.7 * 100vw / 100);
                        img {
                            width: 55%;
                            object-fit: cover;
                            object-position: right center;
                            height: calc(20 * 100vw / 100);
                        }
                        div {
                            max-height: none;
                            overflow-y: unset;
                        }
                    }
                }
            }
        }
        &.en-mode {
            h3::after,
            h3::before {
                left: 0;
                right: unset;
            }
            > ul > li:hover img {
                object-position: left center;
            }
        }
    }
    @media screen and (max-width: 991px) {
        & {
            &.intro {
                padding-block: 16px;
                .intro-details {
                    width: 100%;
                    padding-inline: 12px;
                    background-size: 100px;
                    div {
                        img {
                            width: 12px;
                        }
                        h6 {
                            font-size: 14px;
                            margin-inline: 8px;
                        }
                        + img {
                            width: 30px;
                            margin-block: 0px 8px;
                        }
                    }
                    h2 {
                        font-size: 22px;
                        margin-bottom: 12px;
                    }
                    p {
                        font-size: 14px;
                        text-align: center;
                        margin-bottom: 22px;
                        + img {
                            display: none;
                        }
                    }
                }
                .intro-view {
                    margin-top: unset;
                    button {
                        padding: 8px 12px;
                        margin-bottom: 12px;
                        border-radius: 12px;
                        img {
                            width: 16px;
                            margin-inline-end: 8px;
                        }
                        p {
                            font-size: 12px;
                        }
                    }
                    .static-cards {
                        margin-block: 16px;
                        align-items: center;
                        justify-content: space-evenly;
                        img {
                            width: calc(90% / 4);
                            animation: up-down 2s ease-in-out;
                            &.card-1 {
                                animation-delay: 0s;
                            }
                            &.card-2 {
                                animation-delay: 2s;
                            }
                            &.card-3 {
                                animation-delay: 4s;
                            }
                            &.card-4 {
                                animation-delay: 6s;
                            }
                        }
                    }
                    .intro-view-images {
                        height: 200px;
                        margin-bottom: 28px;
                        padding-inline: 12px;
                        .images-layer {
                            width: 85%;
                            transform: unset;
                            .box {
                                width: 50px;
                                &.box-right {
                                    top: 90%;
                                    right: 20px;
                                }
                                &.box-left {
                                    top: 83%;
                                    left: 20px;
                                }
                            }
                            .layer-card {
                                display: none;
                            }
                            .scroll-layer {
                                border-radius: 12px;
                            }
                        }
                    }
                }
            }
            &.trusted .container {
                margin-bottom: 12px;
                h5 {
                    font-size: 16px;
                    margin-bottom: 12px;
                }
                div img {
                    width: 80px;
                    &:not(:first-of-type){
                        margin-inline-start: 12px;
                    }
                }
            }
            &.experiment {
                padding-bottom: unset;
                .layer {
                    padding-block: 32px 24px;
                    .owl-experiment .experiment-card {
                        width: 100%;
                        min-height: 244px;
                        border-radius: 12px;
                        padding-block: 12px;
                        padding-inline: 12px;
                        &.active {
                            padding-block: 12px;
                            padding-inline: 12px;
                        }
                        img,
                        &.active img {
                            width: 140px;
                            height: 122px;
                            margin-bottom: 12px;
                        }
                        h6 {
                            font-size: 10px;
                            font-weight: 500;
                            color: var(--primary-color);
                        }
                        p {
                            height: unset;
                            overflow: unset;
                            font-size: 8px;
                        }
                    }
                    .experiment-info {
                        h6 {
                            font-size: 7px;
                        }
                        p {
                            font-size: 23px;
                        }
                        .experiment-details {
                            span {
                                font-size: 11px;
                            }
                            img {
                                display: none;
                            }
                        }
                        .experiment-actions {
                            margin-top: 24px;
                            button {
                                &:first-of-type span {
                                    right: -8px;
                                }
                                &:last-of-type {
                                    margin-inline-start: 8px;
                                    span {
                                        left: -8px;
                                    }
                                }
                                img {
                                    width: 20px;
                                }
                                span {
                                    top: 60%;
                                    width: 22px;
                                    height: 22px;
                                }
                            }
                        }
                    }
                }
                &.en-mode .layer {
                    .owl-experiment .experiment-card {
                        min-height: 270px;
                    }
                    .experiment-info {
                        left: 16px;
                        .experiment-actions button {
                            &:first-of-type span {
                                left: -8px;
                            }
                            &:last-of-type span {
                                right: -8px;
                            }
                        }
                    }
                }
            }
            &.why-choose {
                padding-bottom: 32px;
                .why-choose-info {
                    margin-inline-start: unset;
                    h6,
                    h5 {
                        font-size: 16px;
                    }
                    > a {
                        padding: 6px;
                        margin-top: 12px;
                        border-radius: 8px;
                        p {
                            font-size: 12px;
                        }
                    }
                }
                .why-choose-view {
                    padding-top: 12px;
                    > p {
                        width: 100%;
                        font-size: 12px;
                        padding-inline: 16px;
                    }
                    .why-choose-card {
                        width: 100%;
                        height: 130px;
                        border-radius: 42px;
                        padding-inline: 12px;
                        &::after {
                            width: 30px;
                            height: 30px;
                        }
                        img {
                            width: 50px;
                            height: 50px;
                            margin-bottom: 12px;
                        }
                        p {
                            font-size: 9px;
                        }
                        &.active {
                            width: 100%;
                            height: 190px;
                            border-radius: 47px;
                            padding-inline: 22px;
                            img {
                                width: 60px;
                                height: 60px;
                                margin-bottom: 12px;
                            }
                        }
                    }
                }
                .why-choose-actions {
                    margin-block: 12px;
                    button {
                        &:first-of-type span {
                            right: -8px;
                        }
                        &:last-of-type {
                            margin-inline-start: 8px;
                            span {
                                left: -8px;
                            }
                        }
                        img {
                            width: 20px;
                        }
                        span {
                            top: 60%;
                            width: 22px;
                            height: 22px;
                        }
                    }
                    &.en-mode button {
                        &:first-of-type span {
                            left: -8px;
                        }
                        &:last-of-type span {
                            right: -8px;
                        }
                    }
                }
            }
            &.accreditation {
                margin-bottom: 32px;
                .accreditation-list {
                    width: 95%;
                    margin-inline: auto;
                    h4 {
                        font-size: 18px;
                        margin-bottom: 24px;
                        margin-inline-start: 12px;
                        &::before {
                            width: 6px;
                            height: 27px;
                            right: -12px;
                            border-radius: 100px;
                        }
                        &.en-mode::before {
                            left: -12px;
                        }
                    }
                    ul li {
                        opacity: 1;
                        &:not(:first-of-type) {
                            margin-top: 16px;
                        }
                        div {
                            img {
                                width: 34px;
                                height: 34px;
                                margin-inline-end: 12px;
                            }
                            h6 {
                                font-size: 12px;
                                font-weight: 700;
                                color: var(--secondary-color);
                            }
                        }
                        > img {
                            width: 100%;
                            display: block;
                            margin-top: 12px;
                        }
                    }
                }
            }
            &.advantages {
                padding-block: 32px;
                padding-inline: 16px;
                > img {
                    right: 50%;
                    width: 30px;
                    height: 30px;
                    bottom: -15px;
                    transform: translateX(50%);
                }
                .advantages-info {
                    margin-bottom: 24px;
                    img {
                        width: 50px;
                        margin-inline-end: 16px;
                        + p {
                            font-size: 16px;
                        }
                    }
                    h3 {
                        font-size: 24px;
                        margin-block: 12px;
                    }
                    h4 {
                        font-size: 16px;
                        margin-bottom: 16px;
                        padding-bottom: 8px;
                        &::before,
                        &::after {
                            height: 2px;
                            border-radius: 100px;
                        }
                        &::before {
                            width: 65px;
                        }
                        &::after {
                            width: 30px;
                        }
                    }
                    ul li {
                        &:not(:last-of-type) {
                            padding-bottom: 32px;
                            span::after {
                                right: 50%;
                                width: 5px;
                                height: 20px;
                                bottom: -26px;
                                transform: translateX(50%);
                            }
                        }
                        span {
                            width: 20px;
                            height: 20px;
                            font-size: 12px;
                            margin-inline-end: 12px;
                        }
                        h5 {
                            font-size: 16px;
                        }
                    }
                    a {
                        font-size: 12px;
                        padding: 6px 12px;
                        border-radius: 8px;
                        p {
                            font-size: 12px;
                        }
                    }
                }
                .advantages-content {
                    > p {
                        font-size: 16px;
                        margin-bottom: 24px;
                    }
                    .advantages-stepper {
                        border-radius: 12px;
                        > ul {
                            padding-inline: 20px;
                            padding-block: 12px 60px;
                            li {
                                &:not(:last-of-type) {
                                    margin-inline-end: 4px;
                                }
                                &:not(:first-of-type)::after {
                                    left: 24px;
                                    height: 3px;
                                }
                                .step {
                                    width: 20px;
                                    height: 20px;
                                    font-size: 12px;
                                    h6 {
                                        width: unset;
                                        font-size: 8px;
                                    }
                                }
                            }
                        }
                        .advantages-view {
                            padding: 12px;
                            > div {
                                &:first-of-type {
                                    height: 200px;
                                    > img {
                                        width: 30px;
                                        margin-inline-end: 12px;
                                    }
                                    ul li {
                                        h5 {
                                            font-size: 15px;
                                            margin-top: unset;
                                            margin-bottom: 8px;
                                        }
                                        p {
                                            font-size: 12px;
                                            margin-bottom: 12px;
                                        }
                                    }
                                }
                                &:last-of-type {
                                    margin-inline-start: 12px;
                                    button {
                                        &:first-of-type span {
                                            right: -5px;
                                        }
                                        &:last-of-type {
                                            margin-inline-start: 8px;
                                            span {
                                                left: -5px;
                                            }
                                        }
                                        img {
                                            width: 16px;
                                        }
                                        span {
                                            top: 60%;
                                            width: 16px;
                                            height: 16px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                &.en-mode .advantages-content .advantages-stepper {
                    > ul li:not(:first-of-type)::after {
                        left: 2px;
                        right: 24px;
                    }
                    .advantages-view > div:last-of-type button {
                        &:first-of-type span {
                            right: unset;
                            left: -5px;
                        }
                        &:last-of-type span {
                            left: unset;
                            right: -5px;
                        }
                    }
                }
            }
            &.benefits {
                padding-block: 32px;
                h3 {
                    font-size: 18px;
                    margin-bottom: 16px;
                    padding-bottom: 8px;
                    &::before,
                    &::after {
                        right: 50%;
                        height: 2px;
                        border-radius: 100px;
                        transform: translateX(50%);
                    }
                    &::before {
                        width: 65px;
                    }
                    &::after {
                        width: 30px;
                    }
                }
                .benefits-card {
                    margin-inline: 12px;
                    padding-inline-start: unset;
                    div {
                        padding: 16px;
                        border-radius: 12px;
                        img {
                            width: 100px;
                            height: unset;
                            margin-inline: auto;
                        }
                        h6 {
                            font-size: 16px;
                            margin-block: 8px;
                        }
                        p {
                            font-size: 14px;
                            min-height: 42px;
                        }
                    }
                }
                .carousel-prev-next {
                    margin-top: 16px;
                    margin-inline-end: unset;
                    button {
                        &:first-of-type span {
                            right: -8px;
                        }
                        &:last-of-type {
                            margin-inline-start: 8px;
                            span {
                                left: -8px;
                            }
                        }
                        img {
                            width: 24px;
                        }
                        span {
                            width: 24px;
                            height: 24px;
                        }
                    }
                    &.en-mode button {
                        &:first-of-type span {
                            left: -8px;
                        }
                        &:last-of-type span {
                            right: -8px;
                        }
                    }
                }
                &.en-mode {
                    h3::after,
                    h3::before {
                        left: 50%;
                        right: unset;
                        transform: translate(-50%);
                    }
                    .benefits-card div p {
                        min-height: 63px;
                    }
                }
            }
            &.trainee-journey {
                border-radius: 12px;
                padding-block: 12px;
                .trainee-journey-header {
                    padding-inline: 12px;
                    > div {
                        &:first-of-type {
                            margin-bottom: 12px;
                            img {
                                width: 40px;
                                margin-inline-end: 12px;
                            }
                            span {
                                font-size: 16px;
                            }
                        }
                        &:last-of-type {
                            margin-bottom: 12px;
                            div {
                                text-align: start;
                                margin-inline-end: 12px;
                                h3 {
                                    font-size: 16px;
                                }
                                img {
                                    height: 7px;
                                    margin-top: 4px;
                                }
                            }
                            p {
                                font-size: 12px;
                            }
                        }
                    }
                    h4 {
                        font-size: 16px;
                        margin-bottom: 12px;
                        padding-bottom: 12px;
                        &::before,
                        &::after {
                            height: 2px;
                            border-radius: 100px;
                        }
                        &::before {
                            width: 65px;
                        }
                        &::after {
                            width: 30px;
                        }
                    }
                }
                .table-responsive table td {
                    min-width: 150px;
                    .line {
                        height: 2px;
                        img {
                            height: 12px;
                        }
                    }
                    h5 {
                        font-size: 12px;
                        max-width: 120px;
                    }
                    &.un-active h5 {
                        width: 120px;
                    }
                }
                .trainee-journey-actions {
                    margin-block: 8px;
                    button {
                        &:first-of-type span {
                            right: -4px;
                        }
                        &:last-of-type {
                            margin-inline-start: 8px;
                            span {
                                left: -4px;
                            }
                        }
                        img {
                            width: 20px;
                        }
                        span {
                            top: 60%;
                            width: 16px;
                            height: 16px;
                        }
                    }
                }
                .trainee-journey-content > li {
                    padding-inline: 12px;
                    .content-info {
                        margin-inline-end: 12px;
                        img {
                            width: 30px;
                            margin-inline-end: 12px;
                        }
                        div {
                            h4 {
                                font-size: 16px;
                                margin-bottom: 12px;
                            }
                            ul {
                                padding-inline-start: 12px;
                                li {
                                    font-size: 12px;
                                    &:not(:first-of-type) {
                                        margin-top: 8px;
                                    }
                                }
                            }
                        }
                    }
                    .content-media {
                        margin-top: 12px;
                        img:not(.gif) {
                            width: 100%;
                        }
                        &:not(.gif) {
                            padding-inline-end: 12px;
                        }
                        .gif {
                            top: 14.2vw;
                            left: 13.6vw;
                            width: 50vw;
                            height: 32vw;
                        }
                    }
                    &.active {
                        display: block;
                    }
                }
                &.en-mode {
                    .trainee-journey-actions button {
                        &:first-of-type span {
                            left: -4px;
                        }
                        &:last-of-type span {
                            right: -4px;
                        }
                    }
                    .trainee-journey-content > li .content-media .gif {
                        top: 12vw;
                        left: 25.6vw;
                        width: 42vw;
                        height: 27vw;
                    }
                }
                @media screen and (min-width: 768px) and (max-width: 991px) {
                    & {
                        .trainee-journey-content > li .content-media .gif {
                            top: 14.2vw;
                            left: 13.6vw;
                            width: 51+vw;
                            height: 32vw;
                        }
                        &.en-mode .trainee-journey-content > li .content-media .gif {
                            top: 12.3vw;
                            left: 26.4vw;
                            width: 42vw;
                            height: 27vw;
                        }
                    }
                }
            }
            &.general-benefits {
                padding-block: 32px;
                > img {
                    top: -12px;
                    width: 25px;
                }
                h3 {
                    width: 90%;
                    font-size: 24px;
                    margin-bottom: 32px;
                    padding-bottom: 12px;
                    &::before,
                    &::after {
                        height: 2px;
                        border-radius: 100px;
                    }
                    &::before {
                        width: 65px;
                    }
                    &::after {
                        width: 30px;
                    }
                }
                > ul {
                    height: unset;
                    padding-inline: 12px;
                    > li {
                        width: 100%;
                        padding: 12px;
                        border-radius: 12px;
                        &:not(:first-of-type) {
                            margin-top: 16px;
                            margin-inline-start: unset;
                        }
                        div {
                            max-height: unset;
                            padding-inline: unset;
                            h6 {
                                font-size: 16px;
                                margin-block: 8px;
                            }
                            p {
                                font-size: 12px;
                                min-height: unset;
                            }
                            ul {
                                margin-top: 8px;
                                padding-inline-start: 12px;
                                li {
                                    text-align: start;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
        display: flex;
    }
    to {
        opacity: 1;
    }
}
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        display: none;
    }
}
@keyframes up-down {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}