.intro-frame {
    height: 30vw;

    .div-bg-img {
        background-color: var(--primary);

        .intro-text-intro {
            font-weight: 600;
            text-align: center;
            color: white;
            font-size: 3vw !important;
            line-height: 1.15 !important;
        }

        .circle1 {
            position: absolute;
            width: 3.5vw;
            height: 3.5vw;
            margin-top: 5vw;
            margin-left: 10vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
            /* box-shadow: 0px 0px 15px 0px; */
        }

        .circle2 {
            position: absolute;
            width: 10vw;
            height: 10vw;
            margin-top: 7vw;
            margin-left: 20vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
            /* box-shadow: 0px 0px 15px 0px; */
        }

        .circle3 {
            position: absolute;
            width: 5vw;
            height: 5vw;
            margin-top: 15vw;
            margin-left: 10vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
            /* box-shadow: 0px 0px 15px 0px; */
        }

        .circle4 {
            position: absolute;
            width: 7vw;
            height: 7vw;
            margin-top: 18vw;
            margin-left: 30vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
            /* box-shadow: 0px 0px 15px 0px; */
        }

        .circle5 {
            position: absolute;
            width: 7vw;
            height: 7vw;
            right: 0;
            margin-top: 5vw;
            margin-right: 15vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
        }

        .circle6 {
            position: absolute;
            width: 3.5vw;
            height: 3.5vw;
            right: 0;
            margin-top: 14vw;
            margin-right: 10vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
        }

        .circle7 {
            position: absolute;
            width: 10vw;
            height: 10vw;
            right: 0;
            margin-top: 15vw;
            margin-right: 20vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
        }

        .circle8 {
            position: absolute;
            width: 5vw;
            height: 5vw;
            right: 0;
            margin-top: 15vw;
            margin-right: 35vw;
            border-radius: 50%;
            background-position: center;
            background-size: cover;
        }

    }
}

.about-us-frame {
    height: 28vw;
    margin: 3vw 5vw 3vw 5vw;

    .title {
        font-weight: 700;
        padding-top: 2%;
    }

    .first-paragraph {
        padding-top: 1.5vw
    }

    .about-us-col-left {
        margin-top: 1vw;
    }

    .about-img {
        width: 100%;
        height: auto;
        right: 0;
        background-position: center;
        background-size: cover;
    }

    .about-curve {
        width: 100%;
        max-width: 10vw;
        height: auto;
    }

    .button-learn {
        display: flex;
        flex: wrap;

        .a {
            color: var(--primary);
            background-color: white;
            font-size: 1.2vw;
            opacity: 1;
            border: none;
            border-radius: 1.2vw;
            border-style: solid;
            border-width: 0.15vw;
            width: 13vw;
            height: 2.3vw;
            margin-top: 1vw;
            text-align: center;
            display: inline;
        }
    }
}

.feature-frame {
    margin-top: 0;

    .title {
        text-align: center;
        color: #c2282aff;
        width: 100%;
        font-size: 2.82vw !important;
        line-height: 1.25 !important;
    }

    .feature-frame-row-div {
        width: 100%;
        max-height: 25vw;
        margin-top: 1.5vw;
    }

    .security-img {
        position: absolute;
        width: 7vw;
        height: 7.5vw;
        right: 0;
        bottom: 0;
        background-position: center;
        background-size: cover;
    }

    .global-img {
        position: absolute;
        width: 12vw;
        height: 10vw;
        right: 2vw;
        bottom: 3.5vw;
        background-position: center;
        background-size: cover;
    }

    .connect-img {
        position: absolute;
        width: 10vw;
        height: 10vw;
        right: 2.5vw;
        bottom: 4vw;
        background-position: center;
        background-size: cover;
    }

    .linked-img {
        position: absolute;
        width: 10vw;
        height: 5vw;
        right: 0;
        bottom: 0;
        background-position: center;
        background-size: cover;
    }

    .feature-card {
        width: 100%;
        height: 20vw;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 1vw;
        padding-top: 1vw;
        padding-left: 1vw;
    }

    .feature-card-body {
        padding: 0vw !important
    }

    .feature-card-security {
        background-color: var(--tertiary1);

        .text-try-now {
            color: var(--tertiary1-6);
        }
    }

    .feature-card-global {
        background-color: var(--primary2);
        margin-left: 1.5vw;

        .card-meta {
            width: 70%;
            padding: 0vw;
        }

        .text-try-now {
            color: var(--primary6)
        }
    }

    .feature-card-connected {
        background-color: var(--tertiary3);

        .text-try-now {
            color: var(--tertiary3-6)
        }

        .card-connected-title {
            width: 70%
        }

        .card-connected-text {
            width: 70%;
            margin-top: 0.8vw;
        }
    }

    .feature-card-linked {
        background-color: var(--secondary1);
        margin-left: 1.5vw;

        .text-try-now {
            color: var(--secondary6);
        }
    }

    .text-try-now {
        font-size: 1vw;
        bottom: 1vw;
        position: absolute;
    }
}

.simplified-frame {
    height: 30vw;
    margin-top: 5vh;

    .simplified {
        width: 100%;
        background-color: var(--primary2);

        .img {
            position: absolute;
            width: 38vw;
            height: 22vw;
            left: 31%;
            margin-top: 8vw;
            background-position: center;
            background-size: cover;
        }

        .rectangle-submit-left {
            position: absolute;
            width: 15vw;
            height: 8vw;
            left: 20%;
            margin-top: 10vw;
            border-radius: 1vw 1vw 0 1vw;
            box-shadow: 0 0.1vw 0.2vw #171a1f, 0 0 0.1vw #171a1f;
            background-color: white;
            padding: 1vw;

            .total-appications-nummber {
                color: var(--tertiary3-5);
                font-weight: 700;
            }

            .title-process-submit {
                color: var(--text-natural7)
            }

            .div-submit-application {
                width: 2vw;
                height: 2vw;
                background-color: var(--primary);
                border-radius: 0.3vw;
            }

            .growth-row {
                bottom: -0.5vw;
                position: absolute;
                width: 100%;

                .growth-col-number {
                    color: var(--success65);
                    font-weight: 700;
                    font-size: 1.1vw;
                }

                .growth-col-text {
                    color: var(--text-natural5);

                    p {
                        font-size: 1vw;
                    }
                }
            }
        }

        .rectangle-submit-right {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: wrap;
            position: absolute;
            width: 7vw;
            height: 2vw;
            right: 25%;
            margin-top: 13vw;
            border-radius: 0.9vw 0.9vw 0.9vw 0;
            box-shadow: 0 0.1vw 0.2vw #171a1f, 0 0 0.1vw #171a1f;
            background-color: var(--primary);
            padding: 0.5vw;
            color: var(--white);

            i {
                background-color: white;
                color: var(--primary);
            }

            p {
                margin-bottom: 0;
            }
        }

        .simplify-title {
            position: absolute;
            top: 2vw;
        }

        .simplify-text {
            width: 100%;
            position: absolute;
            top: 3vw;
        }
    }
}

.benefit-frame {
    height: 40vw;
    margin: 3vw;

    .benefit-title {
        font-weight: 700;
        text-align: center;
        width: 100%;
        color: var(--tertiary5);
    }

    .benefit-col {
        margin-top: 3vw;

        .benefit-icon {
            font-size: 2.5vw;
            background-color: white;
            color: var(--tertiary5);
        }

        .benefit-col-title {
            font-weight: 700;
            padding-top: 2%;
        }

        .benefit-col-text {
            padding-top: 1%;
        }
    }
}

.protection-frame {
    height: 25vw;
    margin: 5vw;

    .img {
        position: absolute;
        width: 20vw;
        height: 25vw;
        background-position: center;
        background-size: cover;
    }

    .protection-col-left {
        margin-top: 0;
    }

    .protection-col-right {
        margin-top: 0;

        .protection-title {
            font-weight: 700;
            padding-top: 1vw;
            color: var(--primary);
        }

        .protection-text {
            color: var(--text-natural7);
            padding-top: 1.5vw;
        }
    }
}

.user-friendly-frame {
    height: 25vw;

    .user-friendly-title {
        font-weight: 600;
        margin-top: 5vw;
        color: var(--primary);
    }

    .user-friendly-text {
        width: 45%;
        text-align: center;
        margin-top: -10vw;
    }

    .circle-left1 {
        position: absolute;
        width: 5vw;
        height: 5vw;
        margin-top: 5vw;
        margin-left: 15vw;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
    }

    .circle-left2 {
        position: absolute;
        width: 4.5vw;
        height: 4.5vw;
        margin-top: 20vw;
        margin-left: 27vw;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
    }

    .circle-center {
        position: absolute;
        width: 4.5vw;
        height: 4.5vw;
        margin-top: 0vw;
        margin-left: 47%;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
    }

    .circle-right1 {
        position: absolute;
        width: 7vw;
        height: 7vw;
        right: -5vw;
        margin-top: 5vw;
        margin-right: 20vw;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
    }

    .circle-right2 {
        position: absolute;
        width: 4.5vw;
        height: 4.5vw;
        right: 0;
        margin-top: 20vw;
        margin-right: 25vw;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
    }
}

.conclusion-frame {
    height: 25w;
    margin-top: 1vw;

    .conclusion-title {
        font-weight: 700;
        padding-top: 0.5vw;
        color: white;
    }

    .conclusion-group-row {
        margin-top: 1.5vw;

        .text {
            font-weight: 500;
            color: white;
        }

        .icon {
            color: white;
            font-size: 1.1vw;
        }
    }

    .conclusion-img {
        padding: 2vw 10vw 2vw 10vw;
        background-color: var(--primary);
    }

    .div-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: wrap;
        width: 2vw;
        height: 2vw;
        background-color: var(--primary5);
        border-radius: 50%;
        border-style: solid;
        border-width: 0.15vw;
    }
}