.qrcode-type-vcard-plus {
    $icons-color: rgb(30, 79, 176);

    @include base-qrcode-type($icons-color: $icons-color);

    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    .custom-links {
        margin-bottom: 2rem;
        display: flex;
        flex-wrap: wrap;

        align-items: center;
        justify-content: center;

        .custom-link {
            margin-right: 1rem;
            margin-top: 1rem;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .faqs-card {
        header {
            text-align: center;
            justify-content: center;
        }

        .faq-items {
            line-height: 1.7;
        }

        .faq-item {
            position: relative;
            border-bottom: 2px solid #e6ebff;
        }

        .faq-title {
            margin: 0.5rem 0;
            display: flex;
            align-items: center;
            svg {
                width: 2rem;
                height: 2rem;
                margin-left: auto;

                transition: 0.25s linear;

                path {
                    fill: var(--blue-gray-1);
                }
            }
        }

        .faq-item.active {
            .faq-title {
                svg {
                    transform: rotate(90deg) scale(0.9);
                    opacity: 0.5;
                }
            }
        }

        .faq-description {
            transition: all 0.5s ease;
            max-height: 700px;
            overflow: hidden;
            transform: scale(1);
            margin-bottom: 1rem;
        }

        .faq-item:not(.active) {
            .faq-description {
                max-height: 0;
                opacity: 0;
                transform: scale(0.9);
                margin-bottom: 0;
            }
        }
    }

    .social-icons {
        a {
            * {
                fill: $icons-color;
            }
        }
    }

    .details-container {
        background-image: linear-gradient(
            135deg,
            rgb(245, 244, 255),
            rgb(151, 151, 151)
        );

        .gradient-bg {
            background-image: linear-gradient(
                135deg,
                rgb(102, 211, 211),
                rgb(3, 78, 78)
            );
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 0;
            height: 60%;
            border-radius: 1rem;
            border-bottom-right-radius: 2rem;
            border-bottom-left-radius: 2rem;
        }

        & > *:not(.gradient-bg) {
            z-index: 1;
            position: relative;
        }
    }

    .qrcode-container {
        background-color: white;
        padding: 1rem;
        border-radius: 1rem;
        box-shadow: $box-shadow;
        width: 50vw;
        max-width: 300px;
        margin: 0 auto;
        margin-top: -10rem;
    }

    .vertical-list {
        text-align: center;
        color: white;
        padding: 0 1rem;

        .name {
            font-size: 2.4rem;
        }

        .company {
            margin-top: 0rem;
            font-size: 1.3rem;
            font-weight: bold;
        }

        .designation {
            margin-bottom: 0.5rem;
        }

        .short-bio {
            line-height: 2;
        }
    }

    .button.add-contact.floating {
        position: fixed;
        bottom: 3rem;
        z-index: 1;
        box-shadow: $box-shadow, $box-shadow;
        background-color: #7031d8;
        color: white;
        transition: none;
    }

    .classic-add-to-contacts {
        margin: 2rem 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .button {
            border: 0;
            background-color: #7031d8;
            color: white;
        }
    }

    .portfolio-title {
        color: var(--blue-text-color);
        text-align: center;
        margin: 2rem 0;
    }

    .portfolio-image {
        border-radius: 1rem;
        background-color: white;
        text-align: center;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: $box-shadow;
        position: relative;

        a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        img {
            border-radius: 0.5rem;
        }

        .caption {
            display: block;
            margin-top: 1rem;
            font-weight: bold;
        }

        .description {
            margin-top: 1rem;
            line-height: 1.7;
        }
    }

    .lead-form-trigger {
        margin: 1rem auto;
    }
}
