body {
    background-color: #f6f6f6;
    .intro {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right top;
        background-image: url('../media/patterns/intro.jpg');
        section {
            overflow: hidden;
            position: relative;
            padding-bottom: calc((2.7 * 100vw) / 100);
            .container {
                margin-block: calc((2.1 * 100vw) / 100) calc((5.21 * 100vw) / 100);
                h2 {
                    font-weight: 700;
                    line-height: 150%;
                    margin-bottom: unset;
                    font-family: var(--neo-font);
                    color: var(--secondary-color);
                    font-size: calc((2.4 * 100vw) / 100);
                    span {
                        &:first-of-type {
                            color: var(--primary-color);
                        }
                        &:last-of-type {
                            color: #fff;
                            border-radius: 70px;
                            background-color: #FDA859;
                            padding-bottom: calc((.4 * 100vw) / 100);
                            padding-inline: calc((.73 * 100vw) / 100);
                        }
                    }
                }
                p {
                    font-weight: 700;
                    color: #09253D;
                    text-align: justify;
                    margin-bottom: unset;
                    width: calc((27.71 * 100vw) / 100);
                    font-size: calc((.83 * 100vw) / 100);
                    padding-inline-start: calc((.83 * 100vw) / 100);
                    border-inline-start: 2px solid var(--secondary-color);
                }
                h2,
                p,
                a {
                    position: relative;
                    &::after {
                        content: '';
                        top: 0;
                        left: 0;
                        bottom: 0;
                        height: 130%;
                        position: absolute;
                        background-color: #f6f6f6;
                        animation: show-inline 1s ease-in-out;
                    }
                }
            }
            .person-img {
                right: 0;
                z-index: 2;
                position: absolute;
                top: calc((10.4 * 100vw) / 100);
                width: calc((29.43 * 100vw) / 100);
                height: calc((31.04 * 100vw) / 100);
                img {
                    width: 100%;
                }
            }
            .owl-intro .owl-item {
                opacity: 1;
                transition: opacity .3s ease-in-out;
                .solution-card {
                    overflow: hidden;
                    border-radius: calc((1.1 * 100vw) / 100);
                    margin-bottom: calc((1.4 * 100vw) / 100);
                    .layer {
                        height: 100%;
                        color: #fff;
                        font-weight: 700;
                        position: relative;
                        background-size: cover;
                        background-position: center;
                        background-repeat: no-repeat;
                        backdrop-filter: blur(3.1700000762939453px);
                        p {
                            line-height: normal;
                            width: calc((15.5 * 100vw) / 100);
                            font-size: calc((1.04 * 100vw) / 100);
                        }
                        div span {
                            line-height: 150%;
                            font-family: var(--neo-font);
                            font-size: calc((.96 * 100vw) / 100);
                            padding-bottom: calc((.3 * 100vw) / 100);
                            padding-inline: calc((1.2 * 100vw) / 100);
                            border-radius: 0 calc((1.44 * 100vw) / 100);
                        }
                        h6 {
                            font-weight: 700;
                            line-height: 150%;
                            margin-bottom: unset;
                            font-family: var(--neo-font);
                            font-size: calc((.96 * 100vw) / 100);
                            margin-top: calc((.2 * 100vw) / 100);
                        }
                    }
                    &.card-half .layer {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        min-height: calc((13.7 * 100vw) / 100);
                        p {
                            margin-bottom: unset;
                            margin-inline-start: auto;
                            margin-top: calc((1.44 * 100vw) / 100);
                            margin-bottom: calc((1.3 * 100vw) / 100);
                            margin-inline-end: calc((1.73 * 100vw) / 100);
                        }
                        > img {
                            width: fit-content;
                            position: absolute;
                            left: calc((2.94 * 100vw) / 100);
                            height: calc((3.2 * 100vw) / 100);
                            bottom: calc((5.12 * 100vw) / 100);
                        }
                        > div {
                            display: flex;
                            width: fit-content;
                            align-items: center;
                            margin-inline-start: auto;
                            margin-bottom: calc((1.04 * 100vw) / 100);
                            margin-inline-end: calc((.7 * 100vw) / 100);
                            img {
                                width: calc((4.2 * 100vw) / 100);
                                margin-inline-start: calc((.7 * 100vw) / 100);
                            }
                        }
                    }
                    &.card-full .layer {
                        display: flex;
                        position: relative;
                        flex-direction: column;
                        justify-content: space-between;
                        min-height: calc((25 * 100vw) / 100);
                        > img {
                            width: fit-content;
                            position: absolute;
                            right: calc((2.65 * 100vw) / 100);
                            height: calc((8.22 * 100vw) / 100);
                            &:first-of-type {
                                top: calc((1.8 * 100vw) / 100);
                            }
                            &:last-of-type {
                                top: calc((10.74 * 100vw) / 100);
                            }
                        }
                        p {
                            text-align: center;
                            margin-inline: auto;
                            margin-block: calc((5.9 * 100vw) / 100) calc((1.8 * 100vw) / 100);
                        }
                        > div {
                            display: flex;
                            align-items: center;
                            margin-bottom: calc((1.3 * 100vw) / 100);
                            margin-inline-start: calc((.7 * 100vw) / 100);
                            img {
                                width: calc((4.2 * 100vw) / 100);
                                margin-inline-end: calc((.32 * 100vw) / 100);
                            }
                        }
                    }
                    &.solution-1 {
                        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(240deg, rgba(0, 0, 0, 0.00) 6.43%, rgba(0, 0, 0, 0.50) 73.79%), url('../media/images/solution-1.jpg');
                        .layer div span {
                            background-color: #0078A1;
                        }
                    }
                    &.solution-2,
                    &.solution-6 {
                        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(240deg, rgba(0, 0, 0, 0.00) 6.43%, rgba(0, 0, 0, 0.50) 73.79%), url('../media/images/solution-2.jpg');
                        .layer div span,
                        .arrow {
                            background-color: var(--primary-color);
                        }
                    }
                    &.solution-3 {
                        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(240deg, rgba(0, 0, 0, 0.00) 6.43%, rgba(0, 0, 0, 0.50) 73.79%), url('../media/images/solution-3.jpg');
                        .layer div span {
                            background-color: #FDA859;
                        }
                    }
                    &.solution-4 {
                        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(240deg, rgba(0, 0, 0, 0.00) 6.43%, rgba(0, 0, 0, 0.50) 73.79%), url('../media/images/solution-4.jpg');
                        .layer div span {
                            background-color: #0078A1;
                        }
                    }
                    &.solution-5 {
                        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(240deg, rgba(0, 0, 0, 0.00) 6.43%, rgba(0, 0, 0, 0.50) 73.79%), url('../media/images/solution-5.jpg');
                        .layer div span,
                        .arrow {
                            background-color: #FDA859;
                        }
                    }
                    &.solution-6 {
                        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(240deg, rgba(0, 0, 0, 0.00) 6.43%, rgba(0, 0, 0, 0.50) 73.79%), url('../media/images/solution-6.jpg');
                    }
                    .arrow {
                        bottom: 0;
                        width: 100%;
                        position: absolute;
                        border-radius: 50%;
                        left: calc((-1.4 * 100vw) / 100);
                        width: calc((3.8 * 100vw) / 100);
                        height: calc((3.8 * 100vw) / 100);
                    }
                }
                &.un-active {
                    opacity: 0;
                }
            }
            .owl-actions {
                bottom: 0;
                z-index: 2;
                display: flex;
                position: absolute;
                align-items: center;
                right: calc((28.04 * 100vw) / 100);
                .btn {
                    display: flex;
                    place-content: center;
                    border: 3px solid #BEBEBE;
                    width: calc((2.31 * 100vw) / 100);
                    height: calc((2.72 * 100vw) / 100);
                    border-radius: calc((.7 * 100vw) / 100);
                    padding: calc((.65 * 100vw) / 100) calc((.44 * 100vw) / 100);
                    img {
                        width: 100%;
                        &.active {
                            display: none;
                        }
                    }
                    &.btn-solution-prev {
                        border-color: #FDA859;
                        background-color: #FDA859;
                        margin-inline-end: calc((.7 * 100vw) / 100);
                    }
                    &.btn-solution-next {
                        margin-bottom: calc((.98 * 100vw) / 100);
                        .active {
                            transform: scale(-1);
                        }
                    }
                    &:hover {
                        border-color: #FDA859;
                        background-color: #FDA859;
                        img {
                            &.cloned {
                                display: none;
                            }
                            &.active {
                                display: block;
                            }
                        }
                    }
                }
            }
            &.en-mode {
                .container h2::after,
                .container p::after,
                .container a::after {
                    right: 0;
                    left: unset;
                }
                .person-img {
                    left: 0;
                    right: unset;
                    top: calc((15.4 * 100vw) / 100);
                    img {
                        transform: rotateY(180deg);
                    }
                }
                .owl-intro .owl-item .solution-card {
                    &.card-half .layer {
                        padding-inline-start: calc((.7 * 100vw) / 100);
                        > img {
                            left: unset;
                            right: calc((2.94 * 100vw) / 100);
                        }
                    }
                    &.card-full .layer {
                        > img {
                            right: unset;
                            left: calc((2.65 * 100vw) / 100);
                        }
                        p {
                            margin-block: calc((1.8 * 100vw) / 100);
                        }
                    }
                    .arrow {
                        left: unset;
                        transform: rotateY(180deg);
                        right: calc((-1.4 * 100vw) / 100);
                    }
                }
                .owl-actions {
                    right: unset;
                    left: calc((28.04 * 100vw) / 100);
                    .btn {
                        &.btn-solution-prev img,
                        &.btn-solution-next img.cloned {
                            transform: scale(-1);
                        }
                        &.btn-solution-next img.active {
                            transform: unset;
                        }
                    }
                }
            }
            @media screen and (max-width: 991px) {
                & {
                    padding-bottom: 16px;
                    .container {
                        margin-block: 24px;
                        h2 {
                            font-size: 20px;
                            text-align: center;
                            margin-bottom: 16px;
                            span:last-of-type {
                                padding-bottom: 4px;
                                padding-inline: 16px;
                            }
                        }
                        p {
                            width: 100%;
                            border: unset;
                            font-size: 14px;
                            font-weight: 600;
                            text-align: center;
                            padding-inline-start: unset;
                        }
                        a {
                            color: #fff;
                            font-size: 14px;
                            font-weight: 700;
                            margin-top: 16px;
                            width: fit-content;
                            margin-inline: auto;
                            background-color: var(--primary-color);
                        }
                    }
                    .owl-intro {
                        padding-inline-start: 16px;
                        .owl-item {
                            .solution-card {
                                border-radius: 12px;
                                margin-bottom: 24px;
                                .layer {
                                    padding: 24px;
                                    p {
                                        width: 100%;
                                        font-size: 16px;
                                    }
                                    div span {
                                        font-size: 12px;
                                        padding-bottom: 3px;
                                        padding-inline: 12px;
                                        border-radius: 0 12px;
                                    }
                                    h6 {
                                        font-size: 12px;
                                        margin-top: 8px;
                                    }
                                }
                                &.card-half .layer {
                                    min-height: 300px;
                                    p {
                                        margin-top: unset;
                                        margin-bottom: 16px;
                                        margin-inline-end: unset;
                                    }
                                    > img {
                                        left: 48px;
                                        height: 56px;
                                        bottom: 70px;
                                    }
                                    > div {
                                        margin-bottom: unset;
                                        margin-inline-end: unset;
                                        img {
                                            width: 48px;
                                            margin-inline-start: 8px;
                                        }
                                    }
                                }
                                &.card-full .layer {
                                    min-height: 300px;
                                    > img {
                                        right: 12px;
                                        height: 80px;
                                        &:first-of-type {
                                            top: 8px;
                                        }
                                        &:last-of-type {
                                            top: 95px;
                                        }
                                    }
                                    p {
                                        text-align: unset;
                                        margin-top: unset;
                                        margin-bottom: 16px;
                                    }
                                    > div {
                                        margin-bottom: unset;
                                        margin-inline-start: unset;
                                        img {
                                            width: 48px;
                                            margin-inline-end: 8px;
                                        }
                                    }
                                }
                                .arrow {
                                    left: -6px;
                                    width: 24px;
                                    bottom: 18px;
                                    height: 24px;
                                }
                            }
                            &.un-active {
                                opacity: 1;
                            }
                        }
                    }
                    .owl-actions {
                        position: static;
                        place-content: center;
                        .btn {
                            width: 25px;
                            height: 30px;
                            padding: unset;
                            border-width: 2px;
                            border-radius: 8px;
                            &.btn-solution-prev {
                                margin-inline-end: 8px;
                            }
                            &.btn-solution-next {
                                margin-bottom: unset;
                            }
                        }
                    }
                    &.en-mode .owl-intro .owl-item .solution-card {
                        &.card-half .layer,
                        &.card-full .layer {
                            padding: 24px;
                            min-height: 336px;
                        }
                        &.card-half .layer > img {
                            left: unset;
                            right: 48px;
                        }
                        &.card-full .layer > img {
                            right: unset;
                            left: 12px;
                            &:first-of-type {
                                top: 16px;
                            }
                            &:last-of-type {
                                top: 104px;
                            }
                        }
                    }
                }
            }
        }
    }
    main {
        overflow: hidden;
        section {
            &.learn-more {
                overflow: hidden;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: right center;
                background-image: url('../media/patterns/learn-more.jpg');
                padding-top: calc((3.44 * 100vw) / 100);
                .learn-more-info {
                    .learn-more-details {
                        width: calc((46.6 * 100vw) / 100);
                        h2 {
                            font-weight: 700;
                            line-height: 150%;
                            color: var(--primary-color);
                            font-family: var(--neo-font);
                            font-size: calc((2.5 * 100vw) / 100);
                            margin-bottom: calc((.83 * 100vw) / 100);
                        }
                        h3 {
                            color: #2D5370;
                            font-weight: 700;
                            line-height: 150%;
                            font-family: var(--neo-font);
                            font-size: calc((1.7 * 100vw) / 100);
                            margin-bottom: calc((1.25 * 100vw) / 100);
                        }
                        h2,
                        h3 {
                            position: relative;
                            &.show-inline::after {
                                content: "";
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                background-color: #f6f6f6;
                                animation: show-inline 1s 2s ease-in-out forwards;
                            }
                        }
                        ul  {
                            position: relative;
                            &.show-top::after {
                                content: "";
                                left: 0;
                                bottom: 0;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                background-color: #f6f6f6;
                                animation: show-top 1s 2s ease-in-out forwards;
                            }
                            li {
                                display: flex;
                                align-items: flex-start;
                                &:not(:first-of-type) {
                                    margin-top: calc((.83 * 100vw) / 100);
                                }
                                &:first-of-type p {
                                    width: calc((40 * 100vw) / 100);
                                }
                                > span {
                                    display: block;
                                    border-radius: 50%;
                                    background-color: transparent;
                                    margin: calc((.52 * 100vw) / 100);
                                    width: calc((1.04 * 100vw) / 100);
                                    height: calc((1.04 * 100vw) / 100);
                                    border: 6px solid var(--secondary-color);
                                }
                                p {
                                    color: #09253D;
                                    text-align: justify;
                                    line-height: normal;
                                    margin-bottom: unset;
                                    font-family: var(--cairo-font);
                                    width: calc((41.52 * 100vw) / 100);
                                    font-size: calc((1.04 * 100vw) / 100);
                                    span {
                                        color: #FDA859;
                                    }
                                }
                            }
                        }
                    }
                    .learn-more-media {
                        position: relative;
                        width: calc((47.7 * 100vw) / 100);
                        height: calc((31.04 * 100vw) / 100);
                        img {
                            top: 0;
                            right: 0;
                            z-index: 1;
                            height: 100%;
                            transform: unset;
                            position: absolute;
                        }
                        &::after {
                            content: '';
                            right: 0;
                            bottom: 0;
                            z-index: 1;
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            background-color: #f6f6f6;
                        }
                        &.show-top::after {
                            animation: show-top 1s 2s ease-in-out forwards;
                        }
                        div {
                            overflow: hidden;
                            position: relative;
                            width: calc((32.6 * 100vw) / 100);
                            height: calc((24.2 * 100vw) / 100);
                            border-radius: calc((1.04 * 100vw) / 100);
                            video {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center;
                            }
                            &::after {
                                content: '';
                                inset: 0;
                                position: absolute;
                                background-image: linear-gradient(0deg, rgba(3, 89, 123, 0.30) 0%, rgba(3, 89, 123, 0.30) 100%);
                            }
                        }
                    }
                }
                .values {
                    h3 {
                        color: #2D5370;
                        font-weight: 700;
                        font-family: var(--neo-font);
                        font-size: calc((1.7 * 100vw) / 100);
                        margin-block: calc((2.92 * 100vw) / 100) calc((2.3 * 100vw) / 100);
                    }
                    ul {
                        height: calc((18.63 * 100vw) / 100);
                        li:not(:first-of-type) {
                            margin-inline-start: calc((2.6 * 100vw) / 100);
                        }
                    }
                    .value {
                        overflow: hidden;
                        background-color: #fff;
                        font-family: var(--cairo-font);
                        transition: height .3s ease-in-out;
                        width: calc((15.83 * 100vw) / 100);
                        height: calc((10.02 * 100vw) / 100);
                        border-radius: calc((.52 * 100vw) / 100);
                        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
                        padding: calc((1.6 * 100vw) / 100) calc((1.17 * 100vw) / 100) calc((.7 * 100vw) / 100);
                        img {
                            width: calc((5.21 * 100vw) / 100);
                            margin-bottom: calc((1.04 * 100vw) / 100);
                        }
                        h5 {
                            font-weight: 400;
                            width: fit-content;
                            margin-bottom: unset;
                            color: var(--secondary-color);
                            font-size: calc((1.04 * 100vw) / 100);
                        }
                        img,
                        h5 {
                            right: 50%;
                            position: relative;
                            transform: translateX(50%);
                            transition: all .3s ease-in-out;
                        }
                        p {
                            font-weight: 500;
                            line-height: 150%;
                            text-align: justify;
                            margin-bottom: unset;
                            color: var(--secondary-color);
                            font-size: calc((.83 * 100vw) / 100);
                            margin-top: calc((1.04 * 100vw) / 100);
                        }
                        @media screen and (min-width: 992px) {
                            &:hover {
                                height: 100%;
                                img,
                                h5 {
                                    right: 0;
                                    transform: unset;
                                }
                            }
                        }
                    }
                }
                &.en-mode {
                    .learn-more-info {
                        .learn-more-details h2::after,
                        .learn-more-details h3::after {
                            left: unset;
                            right: 0;
                        }
                        .learn-more-media {
                            img {
                                left: 0;
                                right: unset;
                                transform: rotateY(180deg);
                            }
                            &::after {
                                left: 0;
                                right: unset;
                            }
                        }
                    }
                    .values {
                        ul {
                            height: calc((22.63 * 100vw) / 100);
                        }
                        .value {
                            img,
                            h5 {
                                left: 50%;
                                right: unset;
                                transform: translateX(-50%);
                            }
                            &:hover img,
                            &:hover h5 {
                                left: 0;
                                transform: unset;
                            }
                        }
                    }
                }
            }
            &.title {
                padding-top: calc((4.22 * 100vw) / 100);
                img {
                    z-index: 2;
                    position: relative;
                    width: calc((15.3 * 100vw) / 100);
                    margin-top: calc((2.2 * 100vw) / 100);
                }
                .layers {
                    z-index: 1;
                    position: relative;
                    margin-inline: auto;
                    width: calc((66.6 * 100vw) / 100);
                    &::before,
                    &::after {
                        content: '';
                        z-index: -1;
                        width: 112%;
                        height: 75%;
                        position: absolute;
                        transform: skew(-35deg) translateX(-50%);
                    }
                    &::before {
                        left: 48%;
                        background-color: #e8e8e8;
                        top: calc((2.9 * 100vw) / 100);
                    }
                    &::after {
                        left: 47%;
                        background-color: #f0f0f0;
                        top: calc((2.1 * 100vw) / 100);
                    }
                    div {
                        overflow: hidden;
                        h2 {
                            color: #2D5370;
                            font-weight: 800;
                            text-align: justify;
                            line-height: normal;
                            margin-bottom: unset;
                            font-family: var(--cairo-font);
                            font-size: calc((2.6 * 100vw) / 100);
                            span {
                                color: #fff;
                                line-height: 1.35;
                                display: inline-block;
                                background-color: #FDA859;
                                border-radius: calc((.52 * 100vw) / 100);
                                padding-inline: calc((.52 * 100vw) / 100);
                            }
                        }
                    }
                }
                &.en-mode .layers div h2 {
                    line-height: unset;
                    padding-bottom: 20px;
                }
            }
            &.solutions {
                background-size: cover;
                background-repeat: no-repeat;
                font-family: var(--cairo-font);
                background-position: right center;
                margin-bottom: calc((6.5 * 100vw) / 100);
                background-image: url('../media/patterns/learn-more.jpg');
                .container {
                    .tabs {
                        overflow-x: scroll;
                        padding-inline: calc((1.04 * 100vw) / 100);
                        margin-block: calc((6.71 * 100vw) / 100) calc((1.51 * 100vw) / 100);
                        &::-webkit-scrollbar {
                            display: none;
                        }
                        li {
                            opacity: .7;
                            display: flex;
                            cursor: pointer;
                            align-items: flex-end;
                            justify-content: center;
                            transition: all .3s ease-in-out;
                            padding: calc((.52 * 100vw) / 100);
                            height: calc((2.81 * 100vw) / 100);
                            border-bottom: 2px solid rgba(3, 89, 123, 0.20);
                            &:not(:first-of-type) {
                                padding-inline-start: calc((1.04 * 100vw) / 100);
                            }
                            img {
                                display: none;
                                width: calc((2.5 * 100vw) / 100);
                                margin-inline-end: calc((.62 * 100vw) / 100);
                            }
                            span {
                                color: #2D5370;
                                font-weight: 700;
                                text-wrap: nowrap;
                                line-height: normal;
                                font-size: calc((.94 * 100vw) / 100);
                            }
                            &:hover,
                            &.active {
                                opacity: 1;
                                border-bottom-color: var(--secondary-color);
                            }
                            &.active img {
                                display: block;
                            }
                        }
                    }
                    .info {
                        margin-inline: auto;
                        width: calc((50.23 * 100vw) / 100);
                        margin-bottom: calc((2.4 * 100vw) / 100);
                        li {
                            display: none;
                            text-align: center;
                            &.active {
                                display: block;
                            }
                            h3 {
                                font-weight: 800;
                                line-height: normal;
                                color: var(--primary-color);
                                font-size: calc((1.72 * 100vw) / 100);
                                margin-bottom: calc((.62 * 100vw) / 100);
                            }
                            h5 {
                                width: 75%;
                                color: #2D5370;
                                font-weight: 700;
                                line-height: normal;
                                margin-inline: auto;
                                font-size: calc((1.25 * 100vw) / 100);
                                margin-bottom: calc((.62 * 100vw) / 100);
                            }
                            p {
                                color: #09253D;
                                font-weight: 700;
                                line-height: normal;
                                margin-bottom: unset;
                                font-size: calc((.83 * 100vw) / 100);
                            }
                        }
                    }
                    .solutions-details-list {
                        > li {
                            display: none;
                            &.active {
                                display: block;
                            }
                            .list {
                                position: relative;
                                padding-inline-start: calc((1.9 * 100vw) / 100);
                                border-inline-start: 2px dashed var(--secondary-color);
                                > img {
                                    z-index: 2;
                                    position: absolute;
                                    transition: top 0.5s ease-in-out;
                                    &.active-arrow {
                                        top: 0;
                                        width: calc((3.2 * 100vw) / 100);
                                        right: calc((-.7 * 100vw) / 100);
                                    }
                                    &.arrow-roadmap {
                                        top: calc((.73 * 100vw) / 100);
                                        left: calc((-11.02 * 100vw) / 100);
                                        width: calc((10.9 * 100vw) / 100);
                                        height: calc((7.03 * 100vw) / 100);
                                    }
                                }
                                li {
                                    position: relative;
                                    &:not(:first-of-type) {
                                        margin-top: calc((.73 * 100vw) / 100);
                                    }
                                    &::before {
                                        z-index: 1;
                                        content: '';
                                        top: 50%;
                                        position: absolute;
                                        border-radius: 50%;
                                        transform: translateY(-50%);
                                        width: calc((.8 * 100vw) / 100);
                                        height: calc((.8 * 100vw) / 100);
                                        right: calc((-2.4 * 100vw) / 100);
                                        background-color: var(--secondary-color);
                                    }
                                    &:first-of-type::after,
                                    &:last-of-type::after {
                                        content: '';
                                        width: 2px;
                                        height: 50%;
                                        position: absolute;
                                        background-color: #f6f6f6;
                                        right: calc((-2 * 100vw) / 100);
                                    }
                                    &:first-of-type::after {
                                        top: 0;
                                    }
                                    &:last-of-type::after {
                                        bottom: 0;
                                    }
                                    h6 {
                                        cursor: pointer;
                                        color: #2D5370;
                                        font-weight: 700;
                                        margin-bottom: unset;
                                        padding: calc((1.04 * 100vw) / 100);
                                        font-size: calc((1.04 * 100vw) / 100);
                                    }
                                    > div {
                                        display: none;
                                        background-color: #fff;
                                        padding: calc((1.04 * 100vw) / 100);
                                        max-width: calc((25.99 * 100vw) / 100);
                                        border-radius: calc((1.04 * 100vw) / 100);
                                        h6 {
                                            cursor: default;
                                            padding: unset;
                                        }
                                        span {
                                            border-radius: 50%;
                                            border: 6px solid #FDA859;
                                            background-color: transparent;
                                            width: calc((1.35 * 100vw) / 100);
                                            height: calc((1.35 * 100vw) / 100);
                                            margin-inline-end: calc((.52 * 100vw) / 100);
                                        }
                                        h4 {
                                            color: var(--primary-color);
                                        }
                                        h5 {
                                            color: #09253D;
                                        }
                                        h4,
                                        h5 {
                                            font-weight: 700;
                                            line-height: normal;
                                            font-size: calc((1.04 * 100vw) / 100);
                                        }
                                        p {
                                            color: #09253D;
                                            font-weight: 700;
                                            line-height: normal;
                                            font-size: calc((.83 * 100vw) / 100);
                                            margin-block: calc((.52 * 100vw) / 100);
                                        }
                                        button {
                                            border: unset;
                                            color: #fff;
                                            font-weight: 700;
                                            font-size: calc((.83 * 100vw) / 100);
                                            background-color: var(--primary-color);
                                            border-radius: calc((.52 * 100vw) / 100);
                                            padding: calc((.42 * 100vw) / 100) calc((1.6 * 100vw) / 100);
                                        }
                                    }
                                    .media {
                                        display: none;
                                    }
                                    &.active {
                                        &::before {
                                            top: 12%;
                                            background-color: transparent;
                                        }
                                        &::after {
                                            height: 12%;
                                        }
                                        &:first-of-type::before {
                                            top: 13%;
                                        }
                                        &:last-of-type::after {
                                            height: 93%;
                                        }
                                        > h6 {
                                            display: none;
                                        }
                                        > div {
                                            display: block;
                                        }
                                    }
                                }
                            }
                        }
                        &.en-mode > li .list {
                            > img {
                                transform: rotateY(180deg);
                                &.active-arrow {
                                    right: unset;
                                    left: calc((-.7 * 100vw) / 100);
                                }
                                &.arrow-roadmap {
                                    left: unset;
                                    right: calc((-11.02 * 100vw) / 100);
                                }
                            }
                            li {
                                &::before {
                                    right: unset;
                                    left: calc((-2.4 * 100vw) / 100);
                                }
                                &:first-of-type::after,
                                &:last-of-type::after {
                                    right: unset;
                                    left: calc((-2 * 100vw) / 100);
                                }
                            }
                        }
                    }
                    .solutions-media {
                        overflow: hidden;
                        width: calc((48.96 * 100vw) / 100);
                        height: calc((25.4 * 100vw) / 100);
                        border: 5px solid rgba(0, 0, 0, 0.20);
                        border-radius: calc((.96 * 100vw) / 100);
                        box-shadow: 0px 4.611px 11.527px 0px rgba(0, 0, 0, 0.10);
                        background-color: #fff;
                        ul,
                        li {
                            width: 100%;
                            height: 100%;
                            img {
                                width: 100%;
                                height: 100%;
                                object-position: center;
                            }
                        }
                        > li,
                        > li .list li {
                            width: 100%;
                            display: none;
                            &.active {
                                display: block;
                            }
                        }
                    }
                }
            }
            &.clients {
                overflow: hidden;
                background-size: contain;
                background-repeat: no-repeat;
                font-family: var(--cairo-font);
                padding-top: calc((4.43 * 100vw) / 100);
                background-position: right top, left top;
                background-image: url('../media/patterns/clients-right.png'), url('../media/patterns/clients-left.png');
                .container {
                    position: relative;
                    .clients-info {
                        width: calc((37.71 * 100vw) / 100);
                        padding-top: calc((3.4 * 100vw) / 100);
                        h3 {
                            font-weight: 800;
                            line-height: normal;
                            color: var(--primary-color);
                            font-size: calc((1.72 * 100vw) / 100);
                            margin-bottom: calc((.42 * 100vw) / 100);
                        }
                        ul li {
                            display: none;
                            min-height: calc((4.7 * 100vw) / 100);
                            &.active {
                                display: flex;
                                align-items: center;
                            }
                            img {
                                width: calc((3 * 100vw) / 100);
                                border-radius: calc((.2 * 100vw) / 100);
                                margin-inline-end: calc((.94 * 100vw) / 100);
                            }
                            h5 {
                                color: #2D5370;
                                font-weight: 700;
                                line-height: normal;
                                margin-bottom: unset;
                                font-size: calc((1.25 * 100vw) / 100);
                            }
                        }
                        p {
                            color: #2D5370;
                            font-weight: 700;
                            position: relative;
                            text-align: justify;
                            line-height: normal;
                            margin-bottom: unset;
                            margin-top: calc((.42 * 100vw) / 100);
                            font-size: calc((.83 * 100vw) / 100);
                            padding-inline-start: calc((1.41 * 100vw) / 100);
                            &::before {
                                content: '';
                                top: 50%;
                                right: 0;
                                width: 2px;
                                height: 70%;
                                position: absolute;
                                border-radius: 100px;
                                transform: translateY(-50%);
                                background-color: #2D5370;
                            }
                        }
                    }
                    .clients-logos {
                        width: calc((57.81 * 100vw) / 100);
                        height: calc((16.1 * 100vw) / 100);
                        margin-top: calc((2.55 * 100vw) / 100);
                        .active img {
                            box-shadow: 0px 7.697px 19.242px 0px rgba(0, 0, 0, 0.10);
                        }
                        img {
                            cursor: pointer;
                            width: calc((12.5 * 100vw) / 100);
                            border-radius: calc((.8 * 100vw) / 100);
                        }
                    }
                    .clients-media {
                        top: 0;
                        left: 0;
                        position: absolute;
                        width: calc((47.9 * 100vw) / 100);
                        img {
                            width: 100%;
                            display: none;
                            &.active {
                                display: block;
                            }
                        }
                    }
                }
                &.en-mode .container {
                    .clients-info p::before {
                        left: 0;
                        right: unset;
                    }
                    .clients-media {
                        right: 0;
                        left: unset;
                    }
                }
            }
            @media screen and (max-width: 991px) {
                & {
                    &.learn-more {
                        padding-top: 24px;
                        .learn-more-info {
                            .learn-more-details {
                                width: unset;
                                h2 {
                                    font-size: 18px;
                                    text-align: center;
                                    margin-bottom: 12px;
                                    margin-inline: auto;
                                }
                                h3 {
                                    width: 90%;
                                    color: #333;
                                    font-size: 16px;
                                    text-align: center;
                                    margin-bottom: unset;
                                    margin: 12px auto;
                                }
                                ul li {
                                    &:not(:first-of-type) {
                                        margin-top: 8px;
                                    }
                                    &:first-of-type p {
                                        width: unset;
                                    }
                                    > span {
                                        margin: 4px;
                                    }
                                    p {
                                        width: unset;
                                        font-size: 12px;
                                    }
                                }
                            }
                            .learn-more-media {
                                width: unset;
                                height: unset;
                                img {
                                    bottom: 0;
                                    right: 50%;
                                    top: unset;
                                    width: 214px;
                                    height: unset;
                                    transform: translateX(50%);
                                }
                                div {
                                    width: 100%;
                                    height: 220px;
                                }
                            }
                        }
                        .values {
                            text-align: start;
                            h3 {
                                font-size: 18px;
                                text-align: center;
                                margin-block: 12px 18px;
                                color: var(--primary-color);
                            }
                            .value {
                                width: 100%;
                                height: 270px;
                                overflow: unset;
                                padding: 18px 14px;
                                border-radius: 10px;
                                img {
                                    width: 65px;
                                    margin-bottom: 12px;
                                }
                                h5 {
                                    font-size: 15px;
                                }
                                img,
                                h5 {
                                    position: static;
                                    transform: unset;
                                }
                                p {
                                    font-size: 12px;
                                    margin-top: 12px;
                                }
                            }
                        }
                        &.en-mode {
                            .learn-more-info .learn-more-media img {
                                left: 50%;
                                right: unset;
                                transform: translateX(-50%) rotateY(180deg);
                            }
                            .values .value {
                                height: 365px;
                                img,
                                h5 {
                                    transform: unset;
                                }
                            }
                        }
                    }
                    &.title {
                        padding-top: 24px;
                        img {
                            width: 40px;
                            margin-top: 12px;
                        }
                        .layers {
                            width: 75%;
                            &::before {
                                top: 15px;
                            }
                            &::after {
                                top: 10px;
                            }
                            div h2 {
                                font-size: 11px;
                                span {
                                    border-radius: 4px;
                                    padding-inline: 4px;
                                }
                            }
                        }
                        &.en-mode .layers div h2 {
                            padding-bottom: 6px;
                        }
                    }
                    &.solutions {
                        margin-bottom: 20px;
                        .container {
                            .tabs {
                                margin-block: 16px;
                                padding-inline: unset;
                                li {
                                    height: unset;
                                    padding: 8px 12px;
                                    &:not(:first-of-type) {
                                        padding-inline-start: 12px;
                                    }
                                    img {
                                        width: 30px;
                                        margin-inline-end: unset;
                                    }
                                    span {
                                        font-size: 14px;
                                    }
                                }
                            }
                            .info {
                                width: unset;
                                margin-bottom: 24px;
                                margin-inline: unset;
                                li {
                                    text-align: justify;
                                    h3 {
                                        font-size: 18px;
                                        margin-bottom: 8px;
                                    }
                                    h5 {
                                        width: unset;
                                        font-size: 16px;
                                        margin-bottom: 8px;
                                        margin-inline: unset;
                                    }
                                    p {
                                        font-size: 12px;
                                    }
                                }
                            }
                            .solutions-details-list {
                                > li .list {
                                    padding-inline-start: 12px;
                                    > img {
                                        &.active-arrow {
                                            width: 35px;
                                            right: -8px;
                                        }
                                        &.arrow-roadmap {
                                            display: none;
                                        }
                                    }
                                    li {
                                        &:not(:first-of-type) {
                                            margin-top: 10px;
                                        }
                                        &::before {
                                            width: 10px;
                                            height: 10px;
                                            right: -18px;
                                        }
                                        &:first-of-type::after,
                                        &:last-of-type::after {
                                            right: -14px;
                                        }
                                        h6 {
                                            padding: 12px;
                                            font-size: 12px;
                                        }
                                        > div {
                                            max-width: unset;
                                            padding: 12px 16px;
                                            border-radius: 10px;
                                            span {
                                                width: 10px;
                                                height: 10px;
                                                margin-inline-end: 12px;
                                            }
                                            h4,
                                            h5 {
                                                font-size: 14px;
                                            }
                                            p {
                                                font-size: 12px;
                                                margin-block: 8px;
                                            }
                                            img {
                                                width: 100%;
                                            }
                                            button {
                                                font-size: 10px;
                                                padding: 6px 12px;
                                                border-radius: 8px;
                                            }
                                            
                                        }
                                        &.active .media {
                                            display: block;
                                        }
                                    }
                                }
                                &.en-mode > li .list {
                                    > img.active-arrow {
                                        left: -8px;
                                        right: unset;
                                    }
                                    li {
                                        &::before {
                                            left: -18px;
                                            right: unset;
                                        }
                                        &:first-of-type::after,
                                        &:last-of-type::after {
                                            left: -14px;
                                            right: unset;
                                        }
                                    }
                                }
                            }
                            .solutions-media {
                                width: 100%;
                                height: 150px;
                                display: none;
                                border-width: 3px;
                                border-radius: 8px;
                                margin-bottom: 12px;
                            }
                        }
                    }
                    &.clients {
                        padding-top: 20px;
                        .container {
                            .clients-info {
                                width: 100%;
                                padding-top: unset;
                                h3 {
                                    font-size: 16px;
                                    margin-bottom: 8px;
                                }
                                ul li {
                                    min-height: 50px;
                                    img {
                                        width: 50px;
                                        border-radius: 8px;
                                        margin-inline-end: 8px;
                                    }
                                    h5 {
                                        font-size: 12px;
                                    }
                                }
                                p {
                                    font-size: 10px;
                                    margin-top: 8px;
                                    padding-inline-start: 12px;
                                    &::before {
                                        width: 1px;
                                        height: 90%;
                                    }
                                }
                            }
                            .owl-clients {
                                margin-top: 12px;
                                img {
                                    width: 100%;
                                    margin-block: 8px;
                                    border-radius: 8px;
                                    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.10);
                                }
                            }
                            .clients-media {
                                width: 100%;
                                position: static;
                                margin-top: 8px;
                            }
                        }
                    }
                }
            }
            @media screen and (min-width: 768px) and (max-width: 991px) {
                & {
                    &.learn-more {
                        .values .value {
                            height: 210px;
                            &:hover {
                                height: 210px;
                            }
                        }
                        &.en-mode .values .value {
                            height: 240px;
                            &:hover {
                                height: 240px;
                            }
                        }
                    }
                    &.title img {
                        width: 85px;
                    }
                }
            }
        }
    }
    section.request-consultation {
        background-size: cover;
        background-color: #f6f6f6;
        background-repeat: no-repeat;
        background-position: center top;
        padding-top: calc((13.02 * 100vw) / 100);
        background-image: url('../media/patterns/request-consultation.svg');
        .container {
            position: relative;
            background-color: #fff;
            font-family: var(--cairo-font);
            width: calc((68.44 * 100vw) / 100);
            bottom: calc((-4.53 * 100vw) / 100);
            padding: calc((1.5 * 100vw) / 100);
            border-radius: calc((1.04 * 100vw) / 100);
            .request-consultation-info {
                h5 {
                    font-weight: 700;
                    font-size: calc((1.5 * 100vw) / 100);
                }
                p {
                    font-weight: 300;
                    font-size: calc((1.04 * 100vw) / 100);
                }
                h5,
                p {
                    line-height: normal;
                    margin-bottom: unset;
                    color: var(--secondary-color);
                }
                button {
                    border: none;
                    color: #fff;
                    font-weight: 700;
                    background-color: #FDA859;
                    font-size: calc((.83 * 100vw) / 100);
                    margin-top: calc((1.98 * 100vw) / 100);
                    border-radius: calc((.52 * 100vw) / 100);
                    padding: calc((.42 * 100vw) / 100) calc((1.25 * 100vw) / 100);
                }
            }
            .request-consultation-media div {
                &.pattern {
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center top;
                    width: calc((23.6 * 100vw) / 100);
                    height: calc((7.34 * 100vw) / 100);
                    margin-inline-start: calc((5.4 * 100vw) / 100);
                    background-image: url('../media/patterns/request-consultation-media.svg');
                }
                &:not(.pattern) {
                    display: flex;
                    position: relative;
                    align-items: center;
                    img {
                        position: absolute;
                        &.nesting {
                            left: 0;
                            z-index: 1;
                            top: calc((-10.21 * 100vw) / 100);
                            width: calc((11.6 * 100vw) / 100);
                            height: calc((11.6 * 100vw) / 100);
                        }
                        &.roadmap {
                            bottom: 0;
                            right: calc((6 * 100vw) / 100);
                            width: calc((12.6 * 100vw) / 100);
                            height: calc((6.2 * 100vw) / 100);
                        }
                        &.gif {
                            right: 0;
                            bottom: 0;
                            width: calc((6.25 * 100vw) / 100);
                            height: calc((6.25 * 100vw) / 100);
                        }
                    }
                    ul {
                        position: relative;
                        border-radius: calc((.8 * 100vw) / 100);
                        background-color: var(--secondary-color);
                        &:first-of-type {
                            align-self: flex-start;
                            list-style: inside square;
                            top: calc((-2 * 100vw) / 100);
                            left: calc((-2.98 * 100vw) / 100);
                            padding: calc((.8 * 100vw) / 100);
                            width: calc((17.98 * 100vw) / 100);
                        }
                        &:last-of-type {
                            padding: calc((1.9 * 100vw) / 100) calc((.75 * 100vw) / 100);
                            box-shadow: 4.339px -4.339px 10.847px 0px rgba(0, 0, 0, 0.10), 0px 4.339px 10.847px 0px rgba(0, 0, 0, 0.10);
                        }
                        li {
                            color: #fff;
                            font-weight: 700;
                            line-height: 150%;
                            font-size: calc((.83 * 100vw) / 100);
                            &:not(:first-of-type) {
                                margin-top: calc((.4 * 100vw) / 100);
                            }
                        }
                    }
                    &.en-mode {
                        img {
                            transform: rotateY(180deg);
                            &.nesting {
                                right: 0;
                                left: unset;
                            }
                            &.roadmap {
                                right: unset;
                                left: calc((6 * 100vw) / 100);
                            }
                            &.gif {
                                left: 0;
                                right: unset;
                            }
                        }
                        ul:first-of-type {
                            left: unset;
                            right: calc((-2.98 * 100vw) / 100);
                        }
                    }
                }
            }
        }
        @media screen and (max-width: 991px) {
            & {
                padding-top: 16px;
                background-image: unset;
                .container {
                    width: 95%;
                    bottom: -24px;
                    padding: 12px 8px;
                    border-radius: 10px;
                    .request-consultation-info {
                        h5 {
                            font-size: 16px;
                        }
                        p {
                            font-size: 12px;
                        }
                        button {
                            font-size: 12px;
                            margin-top: 8px;
                            padding: 6px 12px;
                            border-radius: 8px;
                        }
                    }
                    .request-consultation-media div {
                        &.pattern {
                            width: 100%;
                            height: 60px;
                            margin-top: 30px;
                            margin-inline-start: unset;
                        }
                        &:not(.pattern) {
                            img {
                                &.nesting {
                                    top: -90px;
                                    width: 105px;
                                    height: 105px;
                                }
                                &.roadmap {
                                    right: 90px;
                                    bottom: 20px;
                                    width: 125px;
                                    height: 65px;
                                }
                                &.gif {
                                    width: 60px;
                                    height: 60px;
                                }
                            }
                            ul {
                                border-radius: 8px;
                                &:first-of-type {
                                    width: 90%;
                                    padding: 12px;
                                    position: static;
                                }
                                &:last-of-type {
                                    left: 0;
                                    right: -12px;
                                    padding: 12px 8px;
                                }
                                li {
                                    font-size: 10px;
                                    &:not(:first-of-type) {
                                        margin-top: 4px;
                                    }
                                }
                            }
                            &.en-mode {
                                img.roadmap {
                                    left: 80px;
                                    right: unset;
                                    bottom: 34px;
                                }
                                ul:last-of-type {
                                    right: 0;
                                    left: -12px;
                                }
                            }
                        }
                    }
                }
            }
        }
        @media screen and (min-width: 768px) and (max-width: 991px) {
            & .container .request-consultation-media div:not(.pattern) {
                img {
                    &.roadmap {
                        right: 230px;
                        bottom: 15px;
                        height: 35px;
                    }
                    &.gif {
                        width: 30px;
                        height: 30px;
                    }
                }
                ul {
                    width: 100%;
                    &:first-of-type {
                        margin-bottom: 45px;
                    }
                }
                &.en-mode {
                    img.roadmap {
                        left: 230px;
                        right: unset;
                        bottom: 15px;
                    }
                }
            }
        }
    }
}
@keyframes show-inline {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}
@keyframes show-top {
    0% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}