@if (!empty($card->theme_color) &&  $card->theme_color != 'FFFFFF')
 <style>
     :root {
        --user-color: #{{$theme_color}}
    }
    a.user_bg_box {
        width: 84px;
        height: 84px;
        text-align: center;
        background-color: var(--user-color);
        border-radius: 18px;
    }
    a.user_bg_box img{
        max-width: 54px;
        margin: 0 auto;
        height: auto;
    }
       .profile-card .save-contact-btn {
        border-radius: 10px;
        color: #fff;
        background-color: #000000;
        padding-left: 90px;
        padding-right: 90px;
        border-radius: 18px;
    }
    .profile-card .save-contact-btn,
    .profile-card .save-contact-btn:hover{
        background-color: var(--user-color) !important;
    }
    
    
 </style>
 @else 
 
 @endif
<style>
    .contact-detial .catalog {
        margin-top: 0;
    }

    .profile-card .save-contact-btn {
        border-radius: 10px;
        color: #fff;
        background-color: #000000;
        padding-left: 90px;
        padding-right: 90px;
        border-radius: 18px;
    }

    .profile-card .save-contact-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .contact-detial .social-media {
        margin-top: 0;
    }

    .card-content-wrapper.left .user-img {
        margin: 0;
    }

    .card-content-wrapper.left .user-img img {
        width: 120px;
        height: 120px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    .card-content-wrapper.left .card-content-box {
        text-align: left;
    }

    .profile-card .save-contact-btn {
        border-radius: 10px;
        color: #fff;
        background-color: #000000;
        padding-left: 90px;
        padding-right: 90px;
        border-radius: 10px;
    }

    .profile-card .save-contact-btn {
        padding: 20px 0;
        width: calc(100% - 30px);
    }

    .connect-user {
        width: 33%;
    }

    .connect-user img {
        max-width: 84px;
    }

    .user-img img {
        margin-left: 7px;
    }

    .bg-img img {
        left: auto;
        right: 10px;
    }
    .contact-info {
    margin-top: 10px;
}
.social-media.catalog  p.heading{
                margin-bottom: 6px;
                font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
            }
    @media only screen and (max-width: 375px) {
        .profile-card p {
            padding: 0;
        }
    }
    .card-wrapper .card-content-wrapper {
        position: relative;
        /* padding: 0 15px; */
        max-width: 350px;
        width: 100%;
        padding: 0;
        margin-left: auto;
        margin-right: auto;
    }
    @media (max-width:410px) {
            .card-wrapper .card-content-wrapper {
                max-width: calc(100% - 15%);
                width: 100%;
            }
        }
</style>
<div class="card-wrapper">
    <div class="wrapper">
        <div class="profile-card">
                        <div class="bg-img" style="background-image: url('{{ asset($cover_image) }}')">
                <img src="{{ asset('assets/images/logo/preview-logo.svg') }}" alt="logo">
                <!--                @if (auth()->check() && $card->user_id == auth()->user()->id)
                                    <a href="{{ route('my_account') }}" title="Close" class="sticky-cart close">
                                        <span>x</span>
                                    </a>
                                @endif-->
            </div>
            <div class="card-content-wrapper left">
                <!--                @auth
                                    @if ($card->user_id == auth()->user()->id)
                                        <a href="{{ route('edit_card', ['card_profile_username' => $card->card_profile_username]) }}"
                                            class="edit-card-btn">Edit <i class="fa fa-pencil"></i></a>
                                    @endif
                                @endauth-->
                <div class="user-img">
                    @if ($card_logo != '' && file_exists(public_path($card_logo)))
                    <img src="{{ asset($card_logo) }}" alt="{{ $card->first_name . ' ' . $card->last_name }}"
                         class="img-fluid">
                        @if($company_logo != '' && file_exists(public_path($company_logo)))
                        <div class="user-icon-shape">
                           <img src="{{asset($company_logo)}}" alt="logo">
                        </div>
                        @endif
                    @else
                    <div class="card-img-box user-first-letter">
                        <span>{{ get_short_name($card->first_name . ' ' . $card->last_name) }}</span>
                    </div>
                        @if($company_logo != '' && file_exists(public_path($company_logo)))
                        <div class="user-icon-shape">
                           <img src="{{asset($company_logo)}}" alt="logo">
                        </div>
                        @endif
                    @endif
                </div>
                <div class="card-content-box">

                    <h1>{{ $card->first_name }} {{ $card->last_name }}</h1>
                    <h2>{{ $card->designation_role }} @if ($card->designation_role != '' && $card->company_name != '')
                        at
                        @endif {{ $card->company_name }}</h2>
                    @if ($card->company_bio != '')
                    <p></p>
                    @endif
                </div>

            </div>
            @if (request()->get('save_btn') != 'false')
            <div class="profile-card-ctr left">
                <form action="{{ route('vcf_generate') }}" id="vcfGenerate" method="post">
                    @csrf
                    @method('POST')
                    <input type="hidden" name="id" id="id" value="{{ encrypt($card->id) }}">
                    @if (!auth()->check())
                    <a href="javascript:void(0);"
                       class="save-contact-btn profile-card__button button--orange @if ($card->lead_capture_mode == 'Active') loginRegisterModalBtn @else skip-btn @endif">Save
                        Contact</a>
                    @else
                    <a href="javascript:void(0);"
                       class="save-contact-btn save-profile-card__button profile-card__button profile-card__button_submit button--orange @if (!auth()->check() && $card->lead_capture_mode == 'Active') d-none @endif">Save
                        Contact</a>
                    @endif
                    <button type="submit" name="submit" class="save-form-btn d-none">Save Contact</button>
                </form>
            </div>
            @endif
        </div>
        <div class="contact-detial">
            @if ($catWiseLinks)
            <div class="social-media">
                <div class="contact-info">
                    @foreach ($catWiseLinks as $user_key => $user_social_links)
                    @if (!in_array($user_key, ['catalogue_link1', 'catalogue_link2', 'catalogue_link3']))
                    {{-- <h3>{{$user_social_links[0]['type']}}</h3> --}}
                    @foreach ($user_social_links as $user_link)