.page-template-quiz-fin {
    .container_quiz {
        @media (max-width: 991px) {
            padding-bottom: 40px;
        }

        .title_quiz {
            z-index: 10;

            h1 {
                font-weight: 500;
                text-align: center;
                margin-top: 100px !important;
                line-height: 42px;
                margin-bottom: 20px;

                @media (min-width: 992px) {
                    font-size: 38px;
                    line-height: 51px;
                    margin: 0 !important;
                }
            }

            h2 {
                font-weight: 300;
                text-align: center;
                max-width: 850px;
                text-align: center;

                @media (min-width: 992px) {
                    font-size: 30px;
                    line-height: 42px;
                }
            }
        }

        .img_fin_quiz {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            @media (min-width: 992px) {
                margin-top: -90px;
                flex-direction: row;
            }

            img {
                height: 200px;
                width: 200px;
                border-radius: 38px;
                object-fit: cover;

                @media (min-width: 992px) {
                    height: 235px;
                    width: 325px;

                    &#img_bg2 {
                        margin: 170px -70px 0 0px;
                        z-index: 2;
                    }

                    &#img_bg1 {
                        z-index: 1;
                    }

                    &#img_fin3 {
                        margin: 170px 0px 0 -70px;
                        z-index: 2;
                    }
                }

                @media (max-width: 991px) {
                    &#img_bg2 {
                        margin: 0 0 -30px 0;
                    }

                    &#img_fin3 {
                        margin: -30px 0 0 0;
                        z-index: 2;
                    }
                }
            }
        }

        p {
            text-align: center;
            margin: 0;
            color: var(--white);
            font-weight: 300;
            line-height: 35px;

            @media (min-width: 992px) {
                font-size: 25px;
            }
        }
    }
}

.page-template-quiz,
.page-template-quiz1,
.page-template-quiz2,
.page-template-quiz3,
.page-template-quiz4,
.page-template-quiz-5,
.page-template-quiz-fin {
    background: var(--white);

    main {
        background: var(--blue);
        display: flex;
        align-items: center;
        padding: 0 40px;

        .wrapper_quiz {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            margin-top: 170px;

            @media (min-width: 992px) {
                margin-top: 70px;
            }

            .container_quiz {
                display: flex;
                flex-direction: column;
                gap: 50px;

                .title_quiz {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;

                    >* {
                        margin: 0;
                        color: var(--white);
                    }
                }

                .gform_wrapper {
                    .gform_heading {
                        display: none;
                    }

                    form {
                        display: flex;
                        justify-content: space-between;

                        @media (max-width: 991px) {
                            flex-direction: column;
                        }
                        
                        /* &:has(.gform-body > #gform_page_2_3) {
                            h2 {
                                position: relative;

                                &:after {
                                    content: "(1)";
                                    position: absolute;
                                    top: -8px;
                                    right: -30px;
                                    font-size: 16px;
                                    opacity: 1 !important;
                                    color: var(--white);
                                }
                            }
                        } */

                        .gf_progressbar_wrapper {
                            flex: 0.4;
                            margin: 0;
                            display: flex;
                            flex-direction: column;
                            gap: 25px;

                            .gfield_label {
                                order: 1;
                                color: var(--white);
                                font-weight: 500;
                                width: 95%;
                                font-size: 28px;
                                line-height: 38px;
                                display: block !important;

                                @media (min-width: 1200px) {
                                    /* font-size: 33px;
                                    line-height: 50px; */
                                    font-size: 25px;
                                        line-height: 35px;
                                }

                                sup {
                                    font-size: 14px;
                                    position: relative;
                                    bottom: 20px;
                                    right: -5px;
                                }

                                .gfield_required {
                                    display: none;
                                }
                            }

                            h2 {
                                order: -1;
                                color: rgba(255, 255, 255, 0.4);
                                font-family: var(--main-font);
                                font-size: 22px;
                                font-style: italic;
                                font-weight: 500;
                                width: fit-content;
                            }

                            .gf_progressbar {
                                order: 2;
                                background: rgba(255, 255, 255, 0.4);
                                margin: auto 0 60px 0;

                                @media (max-width: 991px) {
                                    margin: auto 0 40px 0;
                                }

                                .gf_progressbar_percentage {
                                    background: var(--red);
                                }
                            }

                            .gf_progressbar_title {
                                display: none;
                            }
                        }

                        .gform-body {
                            flex: 0.5;

                            #gform_page_2_3,
                            #gform_page_6_2,
                            #gform_page_7_3 {
                                .gchoice {
                                    label {
                                        font-size: 18px;
                                    }
                                }

                                .gfield--type-html {
                                    color: var(--white);
                                    font-size: 14px;
                                    font-style: italic;
                                    font-weight: 300;

                                    a {
                                        color: var(--white) !important;
                                        text-decoration: underline !important;
                                    }
                                }
                            }

                            .gfield_radio {
                                gap: 30px;

                                .gchoice {
                                    width: 100%;
                                    display: flex;
                                    cursor: pointer;

                                    &:hover {
                                        label {
                                            background: var(--white);
                                            color: var(--blue);
                                        }
                                    }

                                    &:first-child label:before {
                                        content: '1';
                                    }

                                    &:nth-child(2) label:before {
                                        content: '2';
                                    }

                                    &:nth-child(3) label:before {
                                        content: '3';
                                    }

                                    input {
                                        display: none;

                                        &:checked {
                                            &+label {
                                                background: var(--white);
                                                color: var(--blue);
                                            }
                                        }
                                    }

                                    label {
                                        background: rgba(255, 255, 255, 0.4);
                                        font-size: 20px;
                                        font-weight: 500;
                                        color: var(--white);
                                        padding: 2px;
                                        line-height: 27px;
                                        border-radius: 50px;
                                        font-family: var(--main-font);
                                        display: flex;
                                        align-items: center;
                                        width: 100%;
                                        transition: var(--transition);

                                        &:before {
                                            display: inline-block;
                                            background: var(--blue);
                                            color: var(--white);
                                            font-size: 29px;
                                            font-weight: 500;
                                            width: 51px;
                                            height: 51px;
                                            margin-right: 15px;
                                            border-radius: 50px;
                                            display: grid;
                                            place-items: center;
                                            min-width: 51px !important;
                                        }

                                        sup {
                                            font-size: 0.65em;
                                            align-self: flex-start;
                                            margin-top: 4px;
                                            margin-right: 4px;
                                            line-height: 1;
                                        }
                                    }
                                }
                            }

                            .gform_page_footer {
                                @media (max-width: 991px) {
                                    margin: 0;
                                }

                                .gform_previous_button {
                                    display: none;
                                }

                                .gform_next_button,
                                .gform_button.button {
                                    background: var(--red) !important;
                                    padding: 18px 59px !important;
                                    border-radius: 50px !important;
                                    height: fit-content !important;
                                    font-weight: 500 !important;
                                    margin-top: 100px;

                                    @media (max-width: 991px) {
                                        margin: 30px auto;
                                    }
                                }

                                @media (min-width: 992px) {
                                    .gform_button[type="submit"] {
                                        margin-top: 0 !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .logo_sma_header {
            position: absolute;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}