CORE_V5 // views

PATH: home / rwabteecom / public_html / storage / framework / views /

Editing: fc214cfe5a56140eb2e9c2e4045cca59.php

<link href="<?php echo e(asset('front/css/bootstrap.min.css')); ?>" rel="stylesheet">
    <title>vcard</title>

<body class="
    <?php if($blog->vcard->template_id == 1): ?>
            vcard-one-body
    <?php elseif($blog->vcard->template_id == 2): ?>
            vcard-two-body
    <?php elseif($blog->vcard->template_id == 3): ?>
            vcard-three-body
    <?php elseif($blog->vcard->template_id == 4): ?>
            vcard-four-body
    <?php elseif($blog->vcard->template_id == 5): ?>
            vcard-five-body
    <?php elseif($blog->vcard->template_id == 6): ?>
            vcard-six-body
    <?php elseif($blog->vcard->template_id == 7): ?>
            vcard-seven-body
    <?php elseif($blog->vcard->template_id == 8): ?>
            vcard-eight-body
    <?php elseif($blog->vcard->template_id == 9): ?>
            vcard-nine-body
    <?php elseif($blog->vcard->template_id == 10): ?>
            vcard-ten-body
    <?php elseif($blog->vcard->template_id == 12): ?>
            vcard-twelve-body
    <?php elseif($blog->vcard->template_id == 13): ?>
            vcard-thirteen-body
    <?php elseif($blog->vcard->template_id == 14): ?>
            vcard-fourteen-body
    <?php elseif($blog->vcard->template_id == 15): ?>
            vcard-fifteen-body
    <?php elseif($blog->vcard->template_id == 16): ?>
            vcard-sixteen-body
    <?php elseif($blog->vcard->template_id == 17): ?>
            vcard-seventeen-body
    <?php elseif($blog->vcard->template_id == 18): ?>
            vcard-eighteen-body
    <?php elseif($blog->vcard->template_id == 19): ?>
            vcard-nineteen-body
    <?php elseif($blog->vcard->template_id == 20): ?>
            vcard-twenty-body
    <?php elseif($blog->vcard->template_id == 21): ?>
            vcard-twentyone-body
    <?php elseif($blog->vcard->template_id == 22): ?>
            vcard-twentytwo-body
    <?php elseif($blog->vcard->template_id == 23): ?>
            vcard-twentythree-body
    <?php elseif($blog->vcard->template_id == 24): ?>
            vcard-twentyfour-body
    <?php elseif($blog->vcard->template_id == 25): ?>
            vcard-twentyfive-body
    <?php elseif($blog->vcard->template_id == 26): ?>
            vcard-twentysix-body
    <?php elseif($blog->vcard->template_id == 27): ?>
            vcard-twentyseven-body
    <?php elseif($blog->vcard->template_id == 28): ?>
            vcard-twentyeight-body
    <?php elseif($blog->vcard->template_id == 29): ?>
            vcard-twentynine-body
    <?php elseif($blog->vcard->template_id == 30): ?>
            vcard-thirty-body
    <?php elseif($blog->vcard->template_id == 31): ?>
            vcard-thirtyone-body
    <?php elseif($blog->vcard->template_id == 32): ?>
            vcard-thirtytwo-body
    <?php elseif($blog->vcard->template_id == 33): ?>
            vcard-thirtythree-body
    <?php elseif($blog->vcard->template_id == 34): ?>
            vcard-thirtyfour-body
    <?php elseif($blog->vcard->template_id == 35): ?>
            vcard-thirtyfive-body
    <?php elseif($blog->vcard->template_id == 36): ?>
            vcard-thirtysix-body
    <?php elseif($blog->vcard->template_id == 37): ?>
            vcard-thirtyseven-body
    <?php endif; ?>">

<div class="w-100 h-100 position-absolute top-0
    <?php if($blog->vcard->template_id == 1): ?>
            vcard-one-effect
    <?php elseif($blog->vcard->template_id == 2): ?>
            vcard-two-effect
    <?php elseif($blog->vcard->template_id == 3): ?>
            vcard-three-effect
    <?php elseif($blog->vcard->template_id == 4): ?>
            vcard-four-effect
    <?php elseif($blog->vcard->template_id == 5): ?>
            vcard-five-effect
    <?php elseif($blog->vcard->template_id == 6): ?>
            vcard-six-effect
    <?php elseif($blog->vcard->template_id == 7): ?>
            vcard-seven-effect
    <?php elseif($blog->vcard->template_id == 8): ?>
            vcard-eight-effect
    <?php elseif($blog->vcard->template_id == 9): ?>
            vcard-nine-effect
    <?php elseif($blog->vcard->template_id == 10): ?>
            vcard-ten-effect
    <?php elseif($blog->vcard->template_id == 12): ?>
            vcard-twelve-effect
    <?php elseif($blog->vcard->template_id == 13): ?>
            vcard-thirteen-effect
    <?php elseif($blog->vcard->template_id == 14): ?>
            vcard-fourteen-effect
    <?php elseif($blog->vcard->template_id == 15): ?>
            vcard-fifteen-effect
    <?php elseif($blog->vcard->template_id == 16): ?>
            vcard-sixteen-effect
    <?php elseif($blog->vcard->template_id == 17): ?>
            vcard-seventeen-effect
    <?php elseif($blog->vcard->template_id == 18): ?>
            vcard-eighteen-effect
    <?php elseif($blog->vcard->template_id == 19): ?>
            vcard-nineteen-effect
    <?php elseif($blog->vcard->template_id == 20): ?>
            vcard-twenty-effect
    <?php elseif($blog->vcard->template_id == 21): ?>
            vcard-twentyone-effect
    <?php elseif($blog->vcard->template_id == 22): ?>
            vcard-twentytwo-effect
    <?php elseif($blog->vcard->template_id == 23): ?>
            vcard-twentythree-effect
    <?php elseif($blog->vcard->template_id == 24): ?>
            vcard-twentyfour-effect
    <?php elseif($blog->vcard->template_id == 25): ?>
            vcard-twentyfive-effect
    <?php elseif($blog->vcard->template_id == 26): ?>
            vcard-twentysix-effect
    <?php elseif($blog->vcard->template_id == 27): ?>
            vcard-twentyseven-effect
    <?php elseif($blog->vcard->template_id == 28): ?>
            vcard-twentyeight-effect
    <?php elseif($blog->vcard->template_id == 29): ?>
            vcard-twentynine-effect
    <?php elseif($blog->vcard->template_id == 30): ?>
            vcard-thirty-effect
    <?php elseif($blog->vcard->template_id == 31): ?>
            vcard-thirtyone-effect
    <?php elseif($blog->vcard->template_id == 32): ?>
            vcard-thirtytwo-effect
    <?php elseif($blog->vcard->template_id == 33): ?>
            vcard-thirtythree-effect
    <?php elseif($blog->vcard->template_id == 34): ?>
            vcard-thirtyfour-effect
    <?php elseif($blog->vcard->template_id == 35): ?>
            vcard-thirtyfive-effect
    <?php elseif($blog->vcard->template_id == 36): ?>
            vcard-thirtysix-effect
    <?php elseif($blog->vcard->template_id == 37): ?>
            vcard-thirtyseven-effect
    <?php endif; ?>">
            <?php if($blog->vcard->template_id == 12): ?>
            <div class="top-animation">
            <?php for($i = 0; $i < 10; $i++): ?>
                <span></span>
            <?php endfor; ?>
            </div>
            <div class="bottom-animation">
            <?php for($i = 0; $i < 10; $i++): ?>
                <span></span>
            <?php endfor; ?>
            </div>
        <?php endif; ?>
         <?php if($blog->vcard->template_id == 14): ?>
         <div class="bg-vectors">
            <div class="fireworks">
                <?php for($i = 0; $i < 600; $i++): ?>
                    <div class="line">
                        <div class="spark">
                            <div class="fire"></div>
                        </div>
                    </div>
                <?php endfor; ?>
            </div>
    </div>
            <?php endif; ?>
            <?php if($blog->vcard->template_id == 29): ?>
<div>
    <?php for($i = 0; $i < 20; $i++): ?> <div class="snowflake">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="19" viewBox="0 0 22 19" fill="none">
            <path
                d="M2.4375 0C4.0875 0 5.7375 0 7.4375 0C7.4375 0.403333 7.4375 0.806667 7.4375 1.22222C7.85 1.22222 8.2625 1.22222 8.6875 1.22222C8.6875 1.62556 8.6875 2.02889 8.6875 2.44444C9.1 2.44444 9.5125 2.44444 9.9375 2.44444C9.9375 2.84778 9.9375 3.25111 9.9375 3.66667C10.35 3.66667 10.7625 3.66667 11.1875 3.66667C11.1875 3.26333 11.1875 2.86 11.1875 2.44444C11.6 2.44444 12.0125 2.44444 12.4375 2.44444C12.4375 2.04111 12.4375 1.63778 12.4375 1.22222C12.85 1.22222 13.2625 1.22222 13.6875 1.22222C13.6875 0.818889 13.6875 0.415556 13.6875 0C15.3375 0 16.9875 0 18.6875 0C18.6875 0.403333 18.6875 0.806667 18.6875 1.22222C19.1 1.22222 19.5125 1.22222 19.9375 1.22222C19.9375 1.62556 19.9375 2.02889 19.9375 2.44444C20.3294 2.44444 20.7212 2.44444 21.125 2.44444C21.125 4.86444 21.125 7.28445 21.125 9.77778C20.7331 9.77778 20.3413 9.77778 19.9375 9.77778C19.9375 10.5844 19.9375 11.3911 19.9375 12.2222C19.525 12.2222 19.1125 12.2222 18.6875 12.2222C18.6875 12.6256 18.6875 13.0289 18.6875 13.4444C18.275 13.4444 17.8625 13.4444 17.4375 13.4444C17.4375 13.8478 17.4375 14.2511 17.4375 14.6667C17.025 14.6667 16.6125 14.6667 16.1875 14.6667C16.1875 15.07 16.1875 15.4733 16.1875 15.8889C15.775 15.8889 15.3625 15.8889 14.9375 15.8889C14.9375 16.2922 14.9375 16.6956 14.9375 17.1111C14.1125 17.1111 13.2875 17.1111 12.4375 17.1111C12.4375 17.5144 12.4375 17.9178 12.4375 18.3333C11.2 18.3333 9.9625 18.3333 8.6875 18.3333C8.6875 17.93 8.6875 17.5267 8.6875 17.1111C7.8625 17.1111 7.0375 17.1111 6.1875 17.1111C6.1875 16.7078 6.1875 16.3044 6.1875 15.8889C5.775 15.8889 5.3625 15.8889 4.9375 15.8889C4.9375 15.4856 4.9375 15.0822 4.9375 14.6667C4.525 14.6667 4.1125 14.6667 3.6875 14.6667C3.6875 14.2633 3.6875 13.86 3.6875 13.4444C3.275 13.4444 2.8625 13.4444 2.4375 13.4444C2.4375 12.6378 2.4375 11.8311 2.4375 11C2.025 11 1.6125 11 1.1875 11C1.1875 10.1933 1.1875 9.38667 1.1875 8.55556C0.795625 8.55556 0.40375 8.55556 0 8.55556C0 6.53889 0 4.52222 0 2.44444C0.391875 2.44444 0.78375 2.44444 1.1875 2.44444C1.1875 2.04111 1.1875 1.63778 1.1875 1.22222C1.6 1.22222 2.0125 1.22222 2.4375 1.22222C2.4375 0.818889 2.4375 0.415556 2.4375 0Z"
                fill="#FF9496" />
            <path
                d="M15 1.28345C15.8044 1.28345 16.6087 1.28345 17.4375 1.28345C17.5 2.26122 17.5 2.26122 17.4375 2.38345C17.491 2.38297 17.491 2.38297 17.5455 2.38248C17.7061 2.38121 17.8667 2.38041 18.0273 2.37963C18.0835 2.37912 18.1396 2.3786 18.1974 2.37808C18.2508 2.37788 18.3041 2.37768 18.3591 2.37748C18.4086 2.37716 18.458 2.37684 18.5089 2.37651C18.625 2.38345 18.625 2.38345 18.6875 2.44456C18.6875 2.84789 18.6875 3.25122 18.6875 3.66678C17.45 3.66678 16.2125 3.66678 14.9375 3.66678C14.9375 2.44456 14.9375 2.44456 15 2.20011C15 1.89761 15 1.59511 15 1.28345Z"
                fill="#F7A8AA" />
            <path
                d="M15.0625 1.22217C16.6712 1.22217 18.28 1.22217 19.9375 1.22217C19.9375 2.02883 19.9375 2.8355 19.9375 3.66661C19.525 3.66661 19.1125 3.66661 18.6875 3.66661C18.6669 3.26328 18.6463 2.85995 18.625 2.44439C18.2331 2.42422 17.8413 2.40406 17.4375 2.38328C17.4375 2.02028 17.4375 1.65728 17.4375 1.28328C17.3394 1.2884 17.2412 1.29352 17.1401 1.2988C16.4416 1.33276 15.759 1.36121 15.0625 1.28328C15.0625 1.26311 15.0625 1.24295 15.0625 1.22217Z"
                fill="#FF868A" />
            <path
                d="M11.1875 2.44458C11.6 2.44458 12.0125 2.44458 12.4375 2.44458C12.4375 3.25125 12.4375 4.05791 12.4375 4.88902C11.6125 4.88902 10.7875 4.88902 9.9375 4.88902C9.9375 4.48569 9.9375 4.08236 9.9375 3.6668C10.35 3.6668 10.7625 3.6668 11.1875 3.6668C11.1875 3.26347 11.1875 2.86014 11.1875 2.44458Z"
                fill="#FF868A" />
            <path
                d="M18.6875 3.66675C19.1 3.66675 19.5125 3.66675 19.9375 3.66675C19.9375 4.47341 19.9375 5.28008 19.9375 6.11119C19.525 6.11119 19.1125 6.11119 18.6875 6.11119C18.6875 5.30453 18.6875 4.49786 18.6875 3.66675Z"
                fill="#FF868A" />
            <path
                d="M16.1875 2.44458C17.0125 2.44458 17.8375 2.44458 18.6875 2.44458C18.6875 2.84791 18.6875 3.25125 18.6875 3.6668C17.8625 3.6668 17.0375 3.6668 16.1875 3.6668C16.1875 3.26347 16.1875 2.86014 16.1875 2.44458Z"
                fill="#FDEAF2" />
            <path
                d="M18.6875 9.77783C19.1 9.77783 19.5125 9.77783 19.9375 9.77783C19.9375 10.1812 19.9375 10.5845 19.9375 11.0001C19.525 11.0001 19.1125 11.0001 18.6875 11.0001C18.6875 10.5967 18.6875 10.1934 18.6875 9.77783Z"
                fill="#F28F92" />
            <path
                d="M9.9375 4.88892C10.35 4.88892 10.7625 4.88892 11.1875 4.88892C11.1875 5.29225 11.1875 5.69558 11.1875 6.11114C10.775 6.11114 10.3625 6.11114 9.9375 6.11114C9.9375 5.7078 9.9375 5.30447 9.9375 4.88892Z"
                fill="#FF868A" />
            <path
                d="M18.6875 3.66675C19.1 3.66675 19.5125 3.66675 19.9375 3.66675C19.9375 4.07008 19.9375 4.47341 19.9375 4.88897C19.525 4.88897 19.1125 4.88897 18.6875 4.88897C18.6875 4.48564 18.6875 4.0823 18.6875 3.66675Z"
                fill="#FDC2C4" />
            <path
                d="M17.4375 3.66675C17.85 3.66675 18.2625 3.66675 18.6875 3.66675C18.6875 4.07008 18.6875 4.47341 18.6875 4.88897C18.275 4.88897 17.8625 4.88897 17.4375 4.88897C17.4375 4.48564 17.4375 4.0823 17.4375 3.66675Z"
                fill="#F7A8AA" />
            <path
                d="M18.6875 2.44458C19.1 2.44458 19.5125 2.44458 19.9375 2.44458C19.9375 2.84791 19.9375 3.25125 19.9375 3.6668C19.525 3.6668 19.1125 3.6668 18.6875 3.6668C18.6875 3.26347 18.6875 2.86014 18.6875 2.44458Z"
                fill="#FF868A" />
            <path
                d="M16.1875 2.44458C16.6 2.44458 17.0125 2.44458 17.4375 2.44458C17.4375 2.84791 17.4375 3.25125 17.4375 3.6668C17.025 3.6668 16.6125 3.6668 16.1875 3.6668C16.1875 3.26347 16.1875 2.86014 16.1875 2.44458Z"
                fill="#FDC2C4" />
            <path
                d="M19.9375 2.44458C20.3294 2.44458 20.7212 2.44458 21.125 2.44458C21.125 4.86458 21.125 7.28458 21.125 9.77791C20.7331 9.77791 20.3413 9.77791 19.9375 9.77791C19.9375 7.35791 19.9375 4.93791 19.9375 2.44458Z"
                fill="#C82D4D" />
            <path
                d="M0 2.44458C0.391875 2.44458 0.78375 2.44458 1.1875 2.44458C1.1875 4.46125 1.1875 6.47791 1.1875 8.55569C0.795625 8.55569 0.40375 8.55569 0 8.55569C0 6.53902 0 4.52236 0 2.44458Z"
                fill="#C82D4D" />
            <path
                d="M18.6875 9.77783C19.1 9.77783 19.5125 9.77783 19.9375 9.77783C19.9375 10.5845 19.9375 11.3912 19.9375 12.2223C19.525 12.2223 19.1125 12.2223 18.6875 12.2223C18.6875 12.6256 18.6875 13.0289 18.6875 13.4445C18.275 13.4445 17.8625 13.4445 17.4375 13.4445C17.4375 13.8478 17.4375 14.2512 17.4375 14.6667C17.025 14.6667 16.6125 14.6667 16.1875 14.6667C16.1875 14.2432 16.1875 13.8197 16.1875 13.3834C16.6 13.3834 17.0125 13.3834 17.4375 13.3834C17.4375 12.9801 17.4375 12.5767 17.4375 12.1612C17.85 12.1612 18.2625 12.1612 18.6875 12.1612C18.6875 11.3747 18.6875 10.5882 18.6875 9.77783Z"
                fill="#C82D4D" />
            <path
                d="M13.6875 0C15.3375 0 16.9875 0 18.6875 0C18.6875 0.403333 18.6875 0.806667 18.6875 1.22222C17.0375 1.22222 15.3875 1.22222 13.6875 1.22222C13.6875 0.818889 13.6875 0.415556 13.6875 0Z"
                fill="#C82D4D" />
            <path
                d="M2.4375 0C4.0875 0 5.7375 0 7.4375 0C7.4375 0.403333 7.4375 0.806667 7.4375 1.22222C5.7875 1.22222 4.1375 1.22222 2.4375 1.22222C2.4375 0.818889 2.4375 0.415556 2.4375 0Z"
                fill="#C82D4D" />
            <path
                d="M8.6875 17.1111C9.925 17.1111 11.1625 17.1111 12.4375 17.1111C12.4375 17.5144 12.4375 17.9178 12.4375 18.3333C11.2 18.3333 9.9625 18.3333 8.6875 18.3333C8.6875 17.93 8.6875 17.5266 8.6875 17.1111Z"
                fill="#C82D4D" />
            <path
                d="M12.4375 15.8889C13.2625 15.8889 14.0875 15.8889 14.9375 15.8889C14.9375 16.2922 14.9375 16.6956 14.9375 17.1111C14.1125 17.1111 13.2875 17.1111 12.4375 17.1111C12.4375 16.7078 12.4375 16.3045 12.4375 15.8889Z"
                fill="#C82D4D" />
            <path
                d="M6.1875 15.8889C7.0125 15.8889 7.8375 15.8889 8.6875 15.8889C8.6875 16.2922 8.6875 16.6956 8.6875 17.1111C7.8625 17.1111 7.0375 17.1111 6.1875 17.1111C6.1875 16.7078 6.1875 16.3045 6.1875 15.8889Z"
                fill="#C82D4D" />
            <path
                d="M2.4375 11C2.85 11 3.2625 11 3.6875 11C3.6875 11.8067 3.6875 12.6133 3.6875 13.4444C3.275 13.4444 2.8625 13.4444 2.4375 13.4444C2.4375 12.6378 2.4375 11.8311 2.4375 11Z"
                fill="#C82D4D" />
            <path
                d="M1.1875 8.55566C1.6 8.55566 2.0125 8.55566 2.4375 8.55566C2.4375 9.36233 2.4375 10.169 2.4375 11.0001C2.025 11.0001 1.6125 11.0001 1.1875 11.0001C1.1875 10.1934 1.1875 9.38678 1.1875 8.55566Z"
                fill="#C82D4D" />
            <path
                d="M14.9375 14.6667C15.35 14.6667 15.7625 14.6667 16.1875 14.6667C16.1875 15.0701 16.1875 15.4734 16.1875 15.889C15.775 15.889 15.3625 15.889 14.9375 15.889C14.9375 15.4856 14.9375 15.0823 14.9375 14.6667Z"
                fill="#C82D4D" />
            <path
                d="M4.9375 14.6667C5.35 14.6667 5.7625 14.6667 6.1875 14.6667C6.1875 15.0701 6.1875 15.4734 6.1875 15.889C5.775 15.889 5.3625 15.889 4.9375 15.889C4.9375 15.4856 4.9375 15.0823 4.9375 14.6667Z"
                fill="#C82D4D" />
            <path
                d="M3.6875 13.4446C4.1 13.4446 4.5125 13.4446 4.9375 13.4446C4.9375 13.8479 4.9375 14.2512 4.9375 14.6668C4.525 14.6668 4.1125 14.6668 3.6875 14.6668C3.6875 14.2635 3.6875 13.8601 3.6875 13.4446Z"
                fill="#C82D4D" />
            <path
                d="M9.9375 3.66675C10.35 3.66675 10.7625 3.66675 11.1875 3.66675C11.1875 4.07008 11.1875 4.47341 11.1875 4.88897C10.775 4.88897 10.3625 4.88897 9.9375 4.88897C9.9375 4.48564 9.9375 4.0823 9.9375 3.66675Z"
                fill="#C82D4D" />
            <path
                d="M11.1875 2.44458C11.6 2.44458 12.0125 2.44458 12.4375 2.44458C12.4375 2.84791 12.4375 3.25125 12.4375 3.6668C12.025 3.6668 11.6125 3.6668 11.1875 3.6668C11.1875 3.26347 11.1875 2.86014 11.1875 2.44458Z"
                fill="#C82D4D" />
            <path
                d="M8.6875 2.44458C9.1 2.44458 9.5125 2.44458 9.9375 2.44458C9.9375 2.84791 9.9375 3.25125 9.9375 3.6668C9.525 3.6668 9.1125 3.6668 8.6875 3.6668C8.6875 3.26347 8.6875 2.86014 8.6875 2.44458Z"
                fill="#C82D4D" />
            <path
                d="M18.6875 1.22217C19.1 1.22217 19.5125 1.22217 19.9375 1.22217C19.9375 1.6255 19.9375 2.02883 19.9375 2.44439C19.525 2.44439 19.1125 2.44439 18.6875 2.44439C18.6875 2.04106 18.6875 1.63772 18.6875 1.22217Z"
                fill="#C82D4D" />
            <path
                d="M12.4375 1.22217C12.85 1.22217 13.2625 1.22217 13.6875 1.22217C13.6875 1.6255 13.6875 2.02883 13.6875 2.44439C13.275 2.44439 12.8625 2.44439 12.4375 2.44439C12.4375 2.04106 12.4375 1.63772 12.4375 1.22217Z"
                fill="#C82D4D" />
            <path
                d="M7.4375 1.22217C7.85 1.22217 8.2625 1.22217 8.6875 1.22217C8.6875 1.6255 8.6875 2.02883 8.6875 2.44439C8.275 2.44439 7.8625 2.44439 7.4375 2.44439C7.4375 2.04106 7.4375 1.63772 7.4375 1.22217Z"
                fill="#C82D4D" />
            <path
                d="M1.1875 1.22217C1.6 1.22217 2.0125 1.22217 2.4375 1.22217C2.4375 1.6255 2.4375 2.02883 2.4375 2.44439C2.025 2.44439 1.6125 2.44439 1.1875 2.44439C1.1875 2.04106 1.1875 1.63772 1.1875 1.22217Z"
                fill="#C82D4D" />
        </svg>
</div>
<?php endfor; ?>
</div>
<?php endif; ?>
<?php if($blog->vcard->template_id == 35): ?>
    <div class="position-fixed top-0 w-100 h-100 start-0">
        <div class="fog-layer">
            <img src="<?php echo e(asset('assets/img/vcard35/bg-effect-gif.gif')); ?>" class="object-fit-contain w-100 h-100" />
        </div>
        <div class="fog-layer-right">
            <img src="<?php echo e(asset('assets/img/vcard35/bg-effect-gif.gif')); ?>" class="object-fit-contain w-100 h-100" />
        </div>
    </div>
<?php endif; ?>

<?php if($blog->vcard->template_id == 26): ?>
        
        <div class="position-fixed w-100 h-100 top-0 start-0 min-h-800 -z-1">
                <div class="open-vector">
                <div class="main-bg-vector position-relative">
                        <img src="<?php echo e(asset('assets/img/vcard26/open.svg')); ?>" alt="background-img" loading="lazy" class="position-absolute" />
                </div>
                </div>
                <div class="open-vector volume-vector">
                <div class="main-bg-vector position-relative">
                        <img src="<?php echo e(asset('assets/img/vcard26/volume-vector.svg')); ?>" alt="background-img" loading="lazy" class="position-absolute top-50 start-50 translate-middle" />
                </div>
                </div>
                <div class="open-vector sale-vector">
                <div class="main-bg-vector position-relative">
                        <img src="<?php echo e(asset('assets/img/vcard26/close-white.svg')); ?>" alt="background-img" loading="lazy" class="position-absolute top-50 start-50 translate-middle" />
                </div>
                </div>
                <div class="cart-trolly w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/cart-trolly.svg')); ?>" alt="cart-img" loading="lazy" class="position-relative w-100" />
                </div>
                <div class="phone-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/phone-bg.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="close-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/close.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="umbrella-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/umbrella.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="circle-dollor-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/circle-dollor.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="headphone-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/headphone.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="purse-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/purse-svg.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="credit-card w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/purse-svg.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="van-img w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/truck.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="message-img w-45">
                <div class="position-relative">
                        <img src="<?php echo e(asset('assets/img/vcard26/messages.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                        <div class="message-line">
                        <span class="line line-1"></span>
                        <span class="line line-2"></span>
                        <span class="line line-3"></span>
                        <span class="line line-4"></span>
                        </div>
                </div>
                </div>
                <div class="location-bg w-45">
                <div class="position-relative">
                        <img src="<?php echo e(asset('assets/img/vcard26/location-bg.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                        <img src="<?php echo e(asset('assets/img/vcard26/check-circle.svg')); ?>" alt="cart-img" loading="lazy"  class="check-circle" />
                </div>
                </div>
                <div class="shopping-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/shopping-bag.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
                <div class="dollor-bg w-45">
                <img src="<?php echo e(asset('assets/img/vcard26/dollor.svg')); ?>" alt="cart-img" loading="lazy" class="w-100" />
                </div>
        </div>
<?php endif; ?>

<?php if($blog->vcard->template_id == 30): ?>
<div class="background-bg-animation">
    <div class="bg-gif left-gif">
            <img src="<?php echo e(asset('assets/img/vcard30/bg.gif')); ?>" alt="bg-gif" class="w-100">
    </div>
    <div class="bg-gif right-gif">
        <img src="<?php echo e(asset('assets/img/vcard30/bg.gif')); ?>" alt="bg-gif" class="w-100">
    </div>
    <div class="main-wrapper d-flex justify-content-between">
            <div class="inner-row">
                <div class="line-wrapper">
                    <div class="line">
                        <span class="circle"></span>
                    </div>
                    <div class="line">
                        <span class="circle"></span>
                    </div>
                    <div class="line">
                        <span class="circle"></span>
                    </div>
                </div>
            </div>
            <div class="inner-row">
                <div class="line-wrapper justify-content-end">
                    <div class="line">
                        <span class="circle"></span>
                    </div>
                    <div class="line">
                        <span class="circle"></span>
                    </div>
                    <div class="line">
                        <span class="circle"></span>
                    </div>
                </div>
            </div>
    </div>
</div>
<?php endif; ?>

<?php if($blog->vcard->template_id == 19): ?>
    <div class="bg-animation d-flex align-items-center">
        <div class="w-50 h-100 position-relative">
            <div class="vector-13">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector13.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-1">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector24.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-2">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector2.png')); ?>" alt="images" class="w-100" />
            </div>
             <div class="vector-12">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector12.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-14">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector14.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-16">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector16.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="fashion-text">
                <img src=" <?php echo e(asset('assets/img/vcard19/fashion.png')); ?>" alt="images" class="w-100" />
            </div>
        </div>
         <div class="w-50 h-100 position-relative">
            <div class="vector-4">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector15.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-5">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector8.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-6">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector4.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-11">
                <div class="position-relative">
                    <img src=" <?php echo e(asset('assets/img/vcard19/vector-11.png')); ?>" alt="images" class="w-100" />
                    <div class="position-absolute sub-img">
                        <img src="<?php echo e(asset('assets/img/vcard19/vector-11(2).png')); ?>" alt="">
                    </div>
                </div>
            </div>
            <div class="vector-9">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector9.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-15">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector5.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="beauty-text">
                <img src=" <?php echo e(asset('assets/img/vcard19/beauty.png')); ?>" alt="images" class="w-100" />
            </div>
            <div class="vector-10">
                <img src=" <?php echo e(asset('assets/img/vcard19/vector10.png')); ?>" alt="images" class="w-100" />
            </div>
         </div>
    </div>
<?php endif; ?>

<?php if($blog->vcard->template_id == 36): ?>
<div class="vcard-thirtysix-effect position-fixed top-0 start-0 w-100 h-100">
    <div class="planes">
        <div class="fly-plane"><img src="<?php echo e(asset('assets/img/vcard36/plane.svg')); ?>" alt="Plane"/></div>
        <div class="fly-plane"><img src="<?php echo e(asset('assets/img/vcard36/plane.svg')); ?>" alt="Plane"/></div>
        <div class="fly-plane"><img src="<?php echo e(asset('assets/img/vcard36/plane.svg')); ?>" alt="Plane"/></div>
        <div class="fly-plane"><img src="<?php echo e(asset('assets/img/vcard36/plane.svg')); ?>" alt="Plane"/></div>
        <div class="fly-plane"><img src="<?php echo e(asset('assets/img/vcard36/plane.svg')); ?>" alt="Plane"/></div>
        <div class="fly-plane"><img src="<?php echo e(asset('assets/img/vcard36/plane.svg')); ?>" alt="Plane"/></div>
        <div class="fly-plane"><img src="<?php echo e(asset('assets/img/vcard36/plane.svg')); ?>" alt="Plane"/></div>
    </div>
    <div class="parachutes">
        <div class="parachute"></div>
        <div class="parachute"></div>
        <div class="parachute"></div>
        <div class="parachute"></div>
        <div class="parachute"></div>
    </div>
</div>
<?php endif; ?>
            <?php if($blog->vcard->template_id == 15): ?>
                <canvas id="waveCanvas"></canvas>
                <?php endif; ?>

<?php if($blog->vcard->template_id == 34): ?>
                <?php
                    $animations = [
                        ['top' => '5%', 'left' => '2%', 'size' => '40px', 'animation' => 'zoomOut 5s ease-in-out infinite'],
                        ['top' => '25%', 'left' => '2%', 'size' => '70px', 'animation' => 'zoomIn'],
                        ['top' => '45%', 'left' => '2%', 'size' => '50px', 'animation' => 'zoomOut'],
                        ['top' => '65%', 'left' => '2%', 'size' => '80px', 'animation' => 'zoomIn'],
                        ['top' => '85%', 'left' => '2%', 'size' => '60px', 'animation' => 'zoomOut'],
                        ['top' => '10%', 'left' => '14%', 'size' => '70px','animation' => 'zoomIn'],
                        ['top' => '30%', 'left' => '14%', 'size' => '40px','animation' => 'zoomOut'],
                        ['top' => '50%', 'left' => '14%', 'size' => '80px','animation' => 'zoomIn'],
                        ['top' => '70%', 'left' => '14%', 'size' => '50px','animation' => 'zoomOut'],
                        ['top' => '90%', 'left' => '14%', 'size' => '70px','animation' => 'zoomIn'],
                        ['top' => '5%', 'left' => '25%', 'size' => '40px','animation' => 'zoomOut'],
                        ['top' => '25%', 'left' => '25%', 'size' => '70px','animation' => 'zoomIn'],
                        ['top' => '45%', 'left' => '25%', 'size' => '50px','animation' => 'zoomOut'],
                        ['top' => '65%', 'left' => '25%', 'size' => '80px','animation' => 'zoomIn'],
                        ['top' => '85%', 'left' => '25%', 'size' => '60px','animation' => 'zoomOut'],
                        ['top' => '5%', 'left' => '71%', 'size' => '40px','animation' => 'zoomIn'],
                        ['top' => '25%', 'left' => '71%', 'size' => '70px','animation' => 'zoomOut'],
                        ['top' => '45%', 'left' => '71%', 'size' => '50px','animation' => 'zoomIn'],
                        ['top' => '65%', 'left' => '71%', 'size' => '80px','animation' => 'zoomOut'],
                        ['top' => '85%', 'left' => '71%', 'size' => '60px','animation' => 'zoomIn'],
                        ['top' => '10%', 'left' => '82%', 'size' => '70px','animation' => 'zoomOut'],
                        ['top' => '30%', 'left' => '82%', 'size' => '40px','animation' => 'zoomIn'],
                        ['top' => '50%', 'left' => '82%', 'size' => '80px','animation' => 'zoomOut'],
                        ['top' => '70%', 'left' => '82%', 'size' => '50px','animation' => 'zoomIn'],
                        ['top' => '90%', 'left' => '82%', 'size' => '70px','animation' => 'zoomOut'],
                        ['top' => '5%', 'left' => '94%', 'size' => '40px','animation' => 'zoomIn'],
                        ['top' => '25%', 'left' => '94%', 'size' => '70px','animation' => 'zoomOut'],
                        ['top' => '45%', 'left' => '94%', 'size' => '50px','animation' => 'zoomIn'],
                        ['top' => '65%', 'left' => '94%', 'size' => '80px','animation' => 'zoomOut'],
                        ['top' => '85%', 'left' => '94%', 'size' => '60px','animation' => 'zoomIn'],
                    ];
                ?>
                <div class="body-animated-background w-100 overflow-hidden position-fixed" style="height:100vh;">
                <?php $__currentLoopData = $animations; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $anim): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <lottie-player
                        src="<?php echo e(asset('assets/img/vcard34/body-animated-vector.json')); ?>"
                        background="transparent"
                        speed="1"
                        loop
                        autoplay
                        class="position-absolute"
                        style="top: <?php echo e($anim['top']); ?>; left: <?php echo e($anim['left']); ?>; width: <?php echo e($anim['size']); ?>; height: <?php echo e($anim['size']); ?>;    animation: <?php echo e($anim['animation']); ?> 5s ease-in-out infinite; opacity:0.5; ">
                    </lottie-player>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            <?php endif; ?>
                <?php if($blog->vcard->template_id == 33): ?>
<div class="vcardthirty-effect position-reltive w-100 h-100">
    <video class="bg-video" autoplay muted loop>
        <source src="<?php echo e(asset('assets/img/vcard33/video-bg.mp4')); ?>" type="video/mp4">
    </video>
    </div>
<?php endif; ?>
<?php if($blog->vcard->template_id == 32): ?>
<div class="vcard-thirtytwo-effect-bg position-fixed w-100 h-100 top-0 start-0 d-flex">
    <div class="left-img-1 top-0">
    <img src="<?php echo e(asset('assets/img/vcard32/light1.png')); ?>" alt="left-img-1">
    </div>
    <div class="left-img-2 top-0">
    <img src="<?php echo e(asset('assets/img/vcard32/light2.png')); ?>" alt="left-img-1">
    </div>
    <div class="left-img-1 top-0">
    <img src="<?php echo e(asset('assets/img/vcard32/light2.png')); ?>" alt="left-img-1">
    </div>
    <div class="left-img-2 top-0">
    <img src="<?php echo e(asset('assets/img/vcard32/light1.png')); ?>" alt="left-img-1">
    </div>
</div>
    <?php endif; ?>
    <?php if($blog->vcard->template_id == 31): ?>
<div class="bg-effect position-fixed top-0 start-0 w-100 h-100">
</div>
<?php endif; ?>

<?php if($blog->vcard->template_id == 25): ?>
        <div class="background-animation-card25">
            <div class="left-img  d-flex align-items-center justify-content-between ">
                <div class="hand-img">
                    <img src="<?php echo e(asset('assets/img/vcard25/hand-img.png')); ?>" class="w-100 h-100 object-fit-cover" loading="lazy" />
                </div>
                <div class="heart">
                    <img src="<?php echo e(asset('assets/img/vcard25/bg-heart.png')); ?>" class="w-100 h-100 object-fit-cover" loading="lazy" />
                </div>
                <div class="hand-img">
                    <img src="<?php echo e(asset('assets/img/vcard25/hand-img.png')); ?>" class="w-100 h-100 object-fit-cover" loading="lazy" />
                </div>
            </div>
        </div>
        <div class="background-right-animtion">
            <div class="position-relative">
            <div class="animation-donation">
                    <div class="heart-bg">
                        <img src=" <?php echo e(asset('assets/img/vcard25/animation-bg-heart.png')); ?>" alt="bg-img" class="w-100">
                    </div>
                    <div class="box-img">
                        <img src="<?php echo e(asset('assets/img/vcard25/box-images.png')); ?>" alt="">
                    </div>
                    <div class="main-girl-img">
                        <div class="girl-image">
                            <img src="<?php echo e(asset('assets/img/vcard25/girls-img.png')); ?>" alt="">
                        </div>
                        <div class="girl-head">
                            <img src="<?php echo e(asset('assets/img/vcard25/girl-head.png')); ?>" alt="">
                        </div>
                        <div class="girl-hand">
                            <img src="<?php echo e(asset('assets/img/vcard25/girl-hand.png')); ?>" alt="">
                        </div>
                        <div class="girl-neck">
                            <img src="<?php echo e(asset('assets/img/vcard25/girl-neck.png')); ?>" alt="">
                        </div>
                    </div>
                    <div class="main-img-boy">
                        <div class="boys-img">
                            <img src="<?php echo e(asset('assets/img/vcard25/boy-img.png')); ?>" alt="">
                        </div>
                        <div class="boys-head">
                            <img src="<?php echo e(asset('assets/img/vcard25/boy-head.png')); ?>" alt="">
                        </div>
                        <div class="boys-hand">
                            <img src="<?php echo e(asset('assets/img/vcard25/boys-hand.png')); ?>" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
<?php endif; ?>

<?php if($blog->vcard->template_id == 27): ?>
<div class="vcard-tewntyseven position-fixed top-0 left-0 right-0 bottom-0 w-100 h-100">
    <div class="main-bg-effect position-fixed top-0 left-0 right-0 bottom-0 w-100 h-100">
        <div class="bg-image-half">
        <img src="<?php echo e(asset('assets/img/vcard27/bg-main-effect-1.png')); ?>" alt="Background Image">
    </div>
    <div class="bg-image-half-right">
        <img src="<?php echo e(asset('assets/img/vcard27/bg-main-effect-2.png')); ?>" alt="Background Image">
    </div></div>
  
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-1.png')); ?>" class="icon float-down left-0">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-2.png')); ?>" class="icon float-down left-10">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-3.png')); ?>" class="icon float-down left-20">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-4.png')); ?>" class="icon float-down left-30">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-5.png')); ?>" class="icon float-down left-40">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-6.png')); ?>" class="icon float-down left-50">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-7.png')); ?>" class="icon float-down left-60">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-8.png')); ?>" class="icon float-down left-70">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-5.png')); ?>" class="icon float-down left-80">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-3.png')); ?>" class="icon float-down left-90">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-4.png')); ?>" class="icon float-down left-100">
  
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-8.png')); ?>" class="icon float-up left-5">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-7.png')); ?>" class="icon float-up left-15">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-6.png')); ?>" class="icon float-up left-25">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-5.png')); ?>" class="icon float-up left-35">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-4.png')); ?>" class="icon float-up left-45">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-3.png')); ?>" class="icon float-up left-55">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-2.png')); ?>" class="icon float-up left-65">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-1.png')); ?>" class="icon float-up left-75">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-8.png')); ?>" class="icon float-up left-85">
  <img src="<?php echo e(asset('assets/img/vcard27/effect-img-7.png')); ?>" class="icon float-up left-95">
    </div>
<?php endif; ?>
<?php if($blog->vcard->template_id == 23): ?>
<div class="position-fixed top-0 start-0 w-100 h-100">
    <div class="vector-animtion w-100 h-100">
        <img src="<?php echo e(asset('assets/img/vcard23/vector1.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector2.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector3.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector4.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector5.png')); ?>" alt="images" class="" />
    </div>
    <div class="vector-animtion-right w-100 h-100">
        <img src="<?php echo e(asset('assets/img/vcard23/vector6.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector7.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector8.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector9.png')); ?>" alt="images" class="" />
        <img src="<?php echo e(asset('assets/img/vcard23/vector10.png')); ?>" alt="images" class="" />
    </div>
    <div class="bg-effect-1-vcard23">
     <img src="<?php echo e(asset('assets/img/vcard23/bg-effect-1-main.gif')); ?>" alt="images" class="w-100" />
    </div>
    <div class="bg-effect-2-vcard23">
     <img src="<?php echo e(asset('assets/img/vcard23/bg-effect-2.gif')); ?>" alt="images" class="w-100" />
    </div>
</div>
<?php endif; ?>

<?php if($blog->vcard->template_id == 21): ?>
<div class="bg-effect-vcard21 position-fixed w-100 h-100 top-0 start-0">
    <div class="bg"></div>
    <div class="bg-vector">
        <div class="bg-icon facebook-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>
        </div>
        <div class="bg-icon instagram-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
        </div>
        <div class="bg-icon twitter-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
        </div>
        <div class="bg-icon google-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>
        </div>
        <div class="bg-icon linkedin-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg>
        </div>
        <div class="bg-icon telegram-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/></svg>
        </div>
        <div class="bg-icon whatsapp-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
        </div>
        <div class="bg-icon snapchat-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M510.846 392.673c-5.211 12.157-27.239 21.089-67.36 27.318-2.064 2.786-3.775 14.686-6.507 23.956-1.625 5.566-5.623 8.869-12.128 8.869l-.297-.005c-9.395 0-19.203-4.323-38.852-4.323-26.521 0-35.662 6.043-56.254 20.588-21.832 15.438-42.771 28.764-74.027 27.399-31.646 2.334-58.025-16.908-72.871-27.404-20.714-14.643-29.828-20.582-56.241-20.582-18.864 0-30.736 4.72-38.852 4.72-8.073 0-11.213-4.922-12.422-9.04-2.703-9.189-4.404-21.263-6.523-24.13-20.679-3.209-67.31-11.344-68.498-32.15a10.627 10.627 0 0 1 8.877-11.069c69.583-11.455 100.924-82.901 102.227-85.934.074-.176.155-.344.237-.515 3.713-7.537 4.544-13.849 2.463-18.753-5.05-11.896-26.872-16.164-36.053-19.796-23.715-9.366-27.015-20.128-25.612-27.504 2.437-12.836 21.725-20.735 33.002-15.453 8.919 4.181 16.843 6.297 23.547 6.297 5.022 0 8.212-1.204 9.96-2.171-2.043-35.936-7.101-87.29 5.687-115.969C158.122 21.304 229.705 15.42 250.826 15.42c.944 0 9.141-.089 10.11-.089 52.148 0 102.254 26.78 126.723 81.643 12.777 28.65 7.749 79.792 5.695 116.009 1.582.872 4.357 1.942 8.599 2.139 6.397-.286 13.815-2.389 22.069-6.257 6.085-2.846 14.406-2.461 20.48.058l.029.01c9.476 3.385 15.439 10.215 15.589 17.87.184 9.747-8.522 18.165-25.878 25.018-2.118.835-4.694 1.655-7.434 2.525-9.797 3.106-24.6 7.805-28.616 17.271-2.079 4.904-1.256 11.211 2.46 18.748.087.168.166.342.239.515 1.301 3.03 32.615 74.46 102.23 85.934 6.427 1.058 11.163 7.877 7.725 15.859z"/></svg>
        </div>
        <div class="bg-icon dribble-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"/></svg>
        </div>
        <div class="bg-icon youtube-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
        </div>
        <div class="bg-icon pinterest-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg>
        </div>
        <lottie-player style="position:fixed; bottom:0; left:0; width:24%; height:auto;" src="<?php echo e(asset('assets/img/vcard21/social-media-marketing.json')); ?>"
            background="transparent"
            speed="1"
            loop
            autoplay>
        </lottie-player>
         <lottie-player style="position:fixed; bottom:0; right:0; width:28%; height:auto;" src="<?php echo e(asset('assets/img/vcard21/social-media-network.json')); ?>"
            background="transparent"
            speed="1"
            loop
            autoplay>
        </lottie-player>
    </div>
    </div>
    <?php endif; ?>
<?php if($blog->vcard->template_id == 20): ?>
<div class="bg-effect-vcard20 position-fixed top-0 start-0 w-100 h-100">
    <div class="bg-main w-50 h-100 position-absolute top-0 start-0">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-cover" />
    </div>
    <div class="bg-main w-50 h-100 position-absolute top-0 end-0">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-cover" />
    </div>
    <div class="bg-effect-1 position-absolute bottom-0 start-0">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20-01.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-1 position-absolute bottom-0 end-0">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20-02.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-2 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/shape_2.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-3 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/red_chili.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-4 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/shape_5.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-5 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/red_chili_3.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-6 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/tomato_5.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-7 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/shape_4.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-8 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/shape_3.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-9 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/cherry_1.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-10 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20-03.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-11 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20-04.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-12 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20-05.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-13 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20-06.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
    <div class="bg-effect-14 bg-effect position-absolute">
        <img src="<?php echo e(asset('assets/img/vcard20/bg-effect-vcard20-08.png')); ?>" loading="lazy" class="w-100 h-100 object-fit-contain" />
    </div>
</div>

<?php endif; ?>
<?php if($blog->vcard->template_id == 18): ?>
<div class="position-fixed w-100 h-100 top-0 start-0 bg-effect-vcard18">
    <div class="background-vcard18-bg-effect"></div>
    </div>
<?php endif; ?>
<?php if($blog->vcard->template_id == 17): ?>
<div class="vcard17-bg-effect position-fixed top-0 start-0 w-100 h-100">
    <video class="vcard17-bg-video w-100 h-100 object-fit-cover" autoplay muted loop>
        <source src="<?php echo e(asset('assets/img/vcard17/vcard17-bg-video.mp4')); ?>" type="video/mp4">
    </video>
</div>
<?php endif; ?>
</div>
    <div class="container">
        
        <div class="main-content w-100 h-auto mx-auto position-relative
    <?php if($blog->vcard->template_id == 1): ?> vcard-one-bg
    <?php elseif($blog->vcard->template_id == 2): ?>
            vcard-two-bg
    <?php elseif($blog->vcard->template_id == 3): ?>
            vcard-three-bg
    <?php elseif($blog->vcard->template_id == 4): ?>
            vcard-four-bg
    <?php elseif($blog->vcard->template_id == 5): ?>
            vcard-five-bg
    <?php elseif($blog->vcard->template_id == 6): ?>
            vcard-six-bg
    <?php elseif($blog->vcard->template_id == 7): ?>
            vcard-seven-bg h-auto
    <?php elseif($blog->vcard->template_id == 8): ?>
            vcard-eight-bg h-auto
    <?php elseif($blog->vcard->template_id == 9): ?>
            vcard-nine-bg
    <?php elseif($blog->vcard->template_id == 10): ?>
            vcard-ten-bg
    <?php elseif($blog->vcard->template_id == 13): ?>
           vcard-thirteen-bg
    <?php elseif($blog->vcard->template_id == 14): ?>
           vcard-fourteen-bg
    <?php elseif($blog->vcard->template_id == 12): ?>
            vcard-twelve-bg
    <?php elseif($blog->vcard->template_id == 15): ?>
            vcard-fifteen-bg
    <?php elseif($blog->vcard->template_id == 16): ?>
            vcard-sixteen-bg
    <?php elseif($blog->vcard->template_id == 17): ?>
            vcard-seventeen-bg
    <?php elseif($blog->vcard->template_id == 21): ?>
            vcard-twentyone-bg
    <?php elseif($blog->vcard->template_id == 25): ?>
            vcard-twentyfive-bg
    <?php elseif($blog->vcard->template_id == 22): ?>
            vcard-twentytwo-bg h-auto
    <?php elseif($blog->vcard->template_id == 20): ?>
            vcard-twenty-bg
    <?php elseif($blog->vcard->template_id == 18): ?>
    vcard-eighteen-bg
    <?php elseif($blog->vcard->template_id == 19): ?>
            vcard-nineteen-bg
    <?php elseif($blog->vcard->template_id == 26): ?>
            vcard-twentysix-bg h-auto
    <?php elseif($blog->vcard->template_id == 28): ?>
            vcard-twentyeight-bg h-auto
    <?php elseif($blog->vcard->template_id == 30): ?>
            vcard-thirty-bg h-auto
    <?php elseif($blog->vcard->template_id == 29): ?>
            vcard-twentynine-bg h-auto
    <?php elseif($blog->vcard->template_id == 23): ?>
            vcard-twentythree-bg h-auto
    <?php elseif($blog->vcard->template_id == 24): ?>
            vcard-twentyfour-bg h-auto
    <?php elseif($blog->vcard->template_id == 31): ?>
            vcard-thirtyone-bg h-auto
    <?php elseif($blog->vcard->template_id == 32): ?>
            vcard-thirtytwo-bg h-auto
    <?php elseif($blog->vcard->template_id == 34): ?>
            vcard-thirtyfour-bg h-auto
    <?php elseif($blog->vcard->template_id == 33): ?>
            vcard-thirtythree-bg h-auto
    <?php elseif($blog->vcard->template_id == 35): ?>
            vcard-thirtyfive-bg h-auto
    <?php elseif($blog->vcard->template_id == 36): ?>
            vcard-thirtysix-bg h-auto
    <?php elseif($blog->vcard->template_id == 37): ?>
            vcard-thirtyseven-bg h-auto
    <?php elseif($blog->vcard->template_id == 27): ?>
            vcard-twentyseven-bg h-auto <?php endif; ?>">
            <div class="vcard-one-main-section p-3">
                <div class="d-flex justify-content-between align-items-center pb-3 gap-4" <?php if(getLanguage($blog->vcard) ==
                    'Arabic'): ?> dir="rtl" <?php endif; ?>>
                    <h2 class="blog-title
             <?php if($blog->vcard->template_id == 1): ?> vcard-one-title
            <?php elseif($blog->vcard->template_id == 2): ?>
                        vcard-two-title
<?php elseif($blog->vcard->template_id == 3): ?>
                        vcard-three-title
<?php elseif($blog->vcard->template_id == 4): ?>
                        vcard-four-title
<?php elseif($blog->vcard->template_id == 5): ?>
                        vcard-five-title
<?php elseif($blog->vcard->template_id == 6): ?>
                        vcard-six-title
<?php elseif($blog->vcard->template_id == 7): ?>
                        vcard-seven-title
<?php elseif($blog->vcard->template_id == 8): ?>
                        vcard-eight-title
<?php elseif($blog->vcard->template_id == 9): ?>
                        vcard-nine-title
<?php elseif($blog->vcard->template_id == 10): ?>
                        vcard-ten-title
<?php elseif($blog->vcard->template_id == 13): ?>
                   vcard-thirteen-title
<?php elseif($blog->vcard->template_id == 14): ?>
                   vcard-fourteen-title
<?php elseif($blog->vcard->template_id == 12): ?>
                    vcard-twelve-title
<?php elseif($blog->vcard->template_id == 15): ?>
                        vcard-fifteen-title
<?php elseif($blog->vcard->template_id == 17): ?>
                vcard-seventeen-title text-dark
<?php elseif($blog->vcard->template_id == 16): ?>
                        vcard-sixteen-title
<?php elseif($blog->vcard->template_id == 21): ?>
                        vcard-twentyone-title
<?php elseif($blog->vcard->template_id == 24): ?>
                        vcard-twentyfour-title
<?php elseif($blog->vcard->template_id == 25): ?>
                        vcard-twentyfive-title
<?php elseif($blog->vcard->template_id == 22): ?>
                        vcard-twentytwo-title
<?php elseif($blog->vcard->template_id == 20): ?>
vcard-twenty-title
<?php elseif($blog->vcard->template_id == 18): ?>
                        vcard-eighteen-title
<?php elseif($blog->vcard->template_id == 19): ?>
                        vcard-nineteen-title
<?php elseif($blog->vcard->template_id == 26): ?>
                        vcard-twentysix-title
<?php elseif($blog->vcard->template_id == 28): ?>
                        vcard-twentyeight-title
<?php elseif($blog->vcard->template_id == 30): ?>
                        vcard-thirty-title
<?php elseif($blog->vcard->template_id == 29): ?>
                        vcard-twentynine-title
<?php elseif($blog->vcard->template_id == 23): ?>
                        vcard-twentythree-title
<?php elseif($blog->vcard->template_id == 31): ?>
                        vcard-thirtyone-title
<?php elseif($blog->vcard->template_id == 32): ?>
                        vcard-thirtytwo-title
<?php elseif($blog->vcard->template_id == 34): ?>
                        vcard-thirtyfour-title
<?php elseif($blog->vcard->template_id == 33): ?>
                        vcard-thirtythree-title
<?php elseif($blog->vcard->template_id == 35): ?>
                        vcard-thirtyfive-title
<?php elseif($blog->vcard->template_id == 36): ?>
                        vcard-thirtysix-title
<?php elseif($blog->vcard->template_id == 37): ?>
                        vcard-thirtyseven-title
<?php elseif($blog->vcard->template_id == 27): ?>
                        vcard-twentyseven-title <?php endif; ?>">
                        <?php echo e($blog->title); ?></h2>
                    <div class="blog-hover-btn">
                        <a class="btn d-none d-sm-block
                    <?php if($blog->vcard->template_id == 1): ?> vcard-one-back
                    <?php elseif($blog->vcard->template_id == 2): ?>
                            vcard-two-back
                    <?php elseif($blog->vcard->template_id == 3): ?>
                            vcard-three-back
                    <?php elseif($blog->vcard->template_id == 4): ?>
                            vcard-four-back
                    <?php elseif($blog->vcard->template_id == 5): ?>
                            vcard-five-back
                    <?php elseif($blog->vcard->template_id == 6): ?>
                            vcard-six-back
                    <?php elseif($blog->vcard->template_id == 7): ?>
                            vcard-seven-back
                    <?php elseif($blog->vcard->template_id == 8): ?>
                            vcard-eight-back
                    <?php elseif($blog->vcard->template_id == 9): ?>
                            vcard-nine-back
                    <?php elseif($blog->vcard->template_id == 10): ?>
                            vcard-ten-back
                    <?php elseif($blog->vcard->template_id == 13): ?>
                            vcard-thirteen-back
                    <?php elseif($blog->vcard->template_id == 14): ?>
                            vcard-fourteen-back
                    <?php elseif($blog->vcard->template_id == 12): ?>
                            vcard-twelve-back
                    <?php elseif($blog->vcard->template_id == 15): ?>
                            vcard-fifteen-back
                    <?php elseif($blog->vcard->template_id == 17): ?>
                            vcard-seventeen-back
                    <?php elseif($blog->vcard->template_id == 16): ?>
                            vcard-sixteen-back
                    <?php elseif($blog->vcard->template_id == 21): ?>
                            vcard-twentyone-back
                    <?php elseif($blog->vcard->template_id == 24): ?>
                            vcard-twentyfour-back
                    <?php elseif($blog->vcard->template_id == 25): ?>
                            vcard-twentyfive-back
                    <?php elseif($blog->vcard->template_id == 22): ?>
                            vcard-twentytwo-back" data-button-style="<?php echo e(isset($dynamicVcard) ? $dynamicVcard->button_style : 'default'); ?>

<?php elseif($blog->vcard->template_id == 20): ?>
                            vcard-twenty-back
                    <?php elseif($blog->vcard->template_id == 18): ?>
                            vcard-eighteen-back
                    <?php elseif($blog->vcard->template_id == 19): ?>
                            vcard-nineteen-back
                    <?php elseif($blog->vcard->template_id == 26): ?>
                            vcard-twentysix-back
                    <?php elseif($blog->vcard->template_id == 28): ?>
                            vcard-twentyeight-back
                    <?php elseif($blog->vcard->template_id == 30): ?>
                            vcard-thirty-back
                    <?php elseif($blog->vcard->template_id == 29): ?>
                            vcard-twentynine-back
                    <?php elseif($blog->vcard->template_id == 23): ?>
                            vcard-twentythree-back
                    <?php elseif($blog->vcard->template_id == 31): ?>
                            vcard-thirtyone-back
                    <?php elseif($blog->vcard->template_id == 32): ?>
                            vcard-thirtytwo-back
                    <?php elseif($blog->vcard->template_id == 34): ?>
                            vcard-thirtyfour-back
                    <?php elseif($blog->vcard->template_id == 36): ?>
                            vcard-thirtysix-back
                    <?php elseif($blog->vcard->template_id == 33): ?>
                            vcard-thirtythree-back btn btn-gradient
                    <?php elseif($blog->vcard->template_id == 35): ?>
                            vcard-thirtyfive-back
                    <?php elseif($blog->vcard->template_id == 37): ?>
                            vcard-thirtyseven-back text-white
                    <?php elseif($blog->vcard->template_id == 27): ?>
                            vcard-twentyseven-back <?php endif; ?>" href="<?php echo e(url()->previous()); ?>" role="button">
                            <?php echo e(__('messages.common.back')); ?>

<?php if($blog->vcard->template_id == 33): ?>
                            <div class="wave"></div>
                            <?php endif; ?>
                        </a>
                    </div>
                </div>

<div class="img-bx
            <?php if($blog->vcard->template_id == 1): ?> vcard-one-img-bx
            <?php elseif($blog->vcard->template_id == 2): ?>
                    vcard-two-img-bx
            <?php elseif($blog->vcard->template_id == 3): ?>
                    vcard-three-img-bx
            <?php elseif($blog->vcard->template_id == 4): ?>
                    vcard-four-img-bx
            <?php elseif($blog->vcard->template_id == 5): ?>
                    vcard-five-img-bx
            <?php elseif($blog->vcard->template_id == 6): ?>
                    vcard-six-img-bx
            <?php elseif($blog->vcard->template_id == 7): ?>
                    vcard-seven-img-bx
            <?php elseif($blog->vcard->template_id == 8): ?>
                    vcard-eight-img-bx
            <?php elseif($blog->vcard->template_id == 9): ?>
                    vcard-nine-img-bx
            <?php elseif($blog->vcard->template_id == 10): ?>
                    vcard-ten-img-bx
            <?php elseif($blog->vcard->template_id == 13): ?>
                    vcard-thirteen-img-bx
            <?php elseif($blog->vcard->template_id == 14): ?>
                    vcard-fourteen-img-bx
            <?php elseif($blog->vcard->template_id == 12): ?>
                    vcard-twelve-img-bx
            <?php elseif($blog->vcard->template_id == 13): ?>
                    vcard-thirteen-img-bx
            <?php elseif($blog->vcard->template_id == 15): ?>
                    vcard-fifteen-img-bx
            <?php elseif($blog->vcard->template_id == 17): ?>
                    vcard-seventeen-img-bx
            <?php elseif($blog->vcard->template_id == 16): ?>
                     vcard-sixteen-img-bx
            <?php elseif($blog->vcard->template_id == 21): ?>
                     vcard-twentyone-img-bx
            <?php elseif($blog->vcard->template_id == 24): ?>
                     vcard-twentyfour-img-bx
            <?php elseif($blog->vcard->template_id == 25): ?>
                     vcard-twentyfive-img-bx
            <?php elseif($blog->vcard->template_id == 22): ?>
                     vcard-twentytwo-img-bx
            <?php elseif($blog->vcard->template_id == 18): ?>
                     vcard-eighteen-img-bx
            <?php elseif($blog->vcard->template_id == 19): ?>
                     vcard-nineteen-img-bx
            <?php elseif($blog->vcard->template_id == 20): ?>
                    vcard-twenty-img-bx
            <?php elseif($blog->vcard->template_id == 26): ?>
                    vcard-twentysix-img-bx
            <?php elseif($blog->vcard->template_id == 28): ?>
                    vcard-twentyeight-img-bx
            <?php elseif($blog->vcard->template_id == 30): ?>
                    vcard-thirty-img-bx
            <?php elseif($blog->vcard->template_id == 29): ?>
                    vcard-twentynine-img-bx
            <?php elseif($blog->vcard->template_id == 23): ?>
                    vcard-twentythree-img-bx
            <?php elseif($blog->vcard->template_id == 31): ?>
                    vcard-thirtyone-img-bx
            <?php elseif($blog->vcard->template_id == 32): ?>
                    vcard-thirtytwo-img-bx
            <?php elseif($blog->vcard->template_id == 34): ?>
                    vcard-thirtyfour-img-bx
            <?php elseif($blog->vcard->template_id == 34): ?>
                    vcard-thirtysix-img-bx
            <?php elseif($blog->vcard->template_id == 33): ?>
                    vcard-thirtythree-img-bx
            <?php elseif($blog->vcard->template_id == 35): ?>
                    vcard-thirtyfive-img-bx
            <?php elseif($blog->vcard->template_id == 37): ?>
                    vcard-thirtyseven-img-bx
            <?php elseif($blog->vcard->template_id == 27): ?>
                    vcard-twentyseven-img-bx <?php endif; ?>">
                    <img src="<?php echo e($blog->blog_icon); ?>" />
                </div>
                <div class="details mt-4" <?php if(getLanguage($blog->vcard->default_language) == 'Arabic'): ?> dir="rtl" <?php endif; ?>>
                    <p class="fw-light"><?php echo $blog->description; ?></p>
                    <div class="blog-hover-btn-mobile fw-light d-flex align-items-center justify-content-center d-sm-none">
                        <a class="btn float-end
                    <?php if($blog->vcard->template_id == 1): ?> vcard-one-back
                    <?php elseif($blog->vcard->template_id == 2): ?>
                            vcard-two-back
                    <?php elseif($blog->vcard->template_id == 3): ?>
                            vcard-three-back
                    <?php elseif($blog->vcard->template_id == 4): ?>
                            vcard-four-back
                    <?php elseif($blog->vcard->template_id == 5): ?>
                            vcard-five-back
                    <?php elseif($blog->vcard->template_id == 6): ?>
                            vcard-six-back
                    <?php elseif($blog->vcard->template_id == 7): ?>
                            vcard-seven-back
                    <?php elseif($blog->vcard->template_id == 8): ?>
                            vcard-eight-back
                    <?php elseif($blog->vcard->template_id == 9): ?>
                            vcard-nine-back
                    <?php elseif($blog->vcard->template_id == 10): ?>
                            vcard-ten-back
                    <?php elseif($blog->vcard->template_id == 13): ?>
                            vcard-thirteen-back
                    <?php elseif($blog->vcard->template_id == 14): ?>
                            vcard-fourteen-back
                    <?php elseif($blog->vcard->template_id == 12): ?>
                            vcard-twelve-back
                    <?php elseif($blog->vcard->template_id == 15): ?>
                            vcard-fifteen-back
                    <?php elseif($blog->vcard->template_id == 17): ?>
                            vcard-seventeen-back
                    <?php elseif($blog->vcard->template_id == 16): ?>
                            vcard-sixteen-back
                    <?php elseif($blog->vcard->template_id == 21): ?>
                            vcard-twentyone-back
                    <?php elseif($blog->vcard->template_id == 24): ?>
                            vcard-twentyfour-back
                    <?php elseif($blog->vcard->template_id == 25): ?>
                            vcard-twentyfive-back
                    <?php elseif($blog->vcard->template_id == 22): ?>
                    vcard-twentytwo-back" data-button-style="<?php echo e(isset($dynamicVcard) ? $dynamicVcard->button_style : 'default'); ?>

<?php if($blog->vcard->template_id == 33): ?>
                            <div class="wave"></div>
                            <?php endif; ?>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

document.documentElement.style.setProperty('--primary-color', primaryColor);
            document.documentElement.style.setProperty('--green-100', backColor);
            document.documentElement.style.setProperty('--green', backSecondColor);
            document.documentElement.style.setProperty('--black', buttonTextColor);
            document.documentElement.style.setProperty('--gray-100', textDescriptionColor);
            document.documentElement.style.setProperty('--white', textLabelColor);

});
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            var buttonStyle = <?php echo json_encode($dynamicVcard->button_style ?? null, 15, 512) ?>;
            applyButtonStyle(buttonStyle);
        });

if (!tsParticles || targets.length === 0) return;

targets.forEach((el) => {
      tsParticles.load(el, {
        fpsLimit: 60,
        particles: {
          number: {
            value: 60,
            density: {
              enable: true,
              area: 800
            }
          },
          color: { value: "#c9ecec" },
          shape: {
            type: "circle",
            stroke: { width: 0, color: "#000000" },
            polygon: { sides: 5 },
            image: {
              src: "https://cdn.matteobruni.it/images/particles/github.svg",
              width: 100,
              height: 100
            }
          },
          opacity: {
            value: 1,
            animation: { enable: false }
          },
          size: {
            value: 7,
            random: { enable: true, minimumValue: 2 },
            animation: { enable: false }
          },
          lineLinked: {
            enable: false
          },
          move: {
            collisions: true,
            enable: true,
            speed: 0.5,
            out_mode: "bounce"
          }
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onClick: { enable: true, mode: "push" },
            resize: true
          },
          modes: {
            push: { particles_nb: 4 }
          }
        },
        detectRetina: true
      });
    });
  });
</script>
<?php if($blog->vcard->template_id == 28): ?>
<script>
  const svgShapes = [ `<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 20 20" fill="none">
  <path d="M11.4025 1.14664C9.16811 3.38346 8.84891 7.21802 11.0833 7.21802C13.1581 7.21802 16.1906 1.14664 14.5946 0.188004C13.7966 -0.291315 12.3601 0.188004 11.4025 1.14664Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M4.22028 1.94551C2.14546 3.86278 3.10307 7.21802 5.49709 7.21802C6.7739 7.21802 7.89111 5.78006 7.89111 4.02256C7.89111 0.827097 6.1355 -0.131541 4.22028 1.94551Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M15.3924 5.7804C12.2004 7.69768 11.7216 10.4138 14.9136 10.4138C17.6269 10.4138 21.2977 6.25972 19.5421 5.14131C18.7441 4.66199 16.9885 4.98154 15.3924 5.7804Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M1.02843 9.9343C-0.886789 11.8516 -0.0887816 13.4493 3.10325 14.4079C4.85886 14.8873 6.29528 16.485 6.29528 17.7632C6.29528 19.0414 7.41249 20 8.6893 20C10.2853 20 11.0833 18.2425 11.0833 14.4079C11.0833 9.29521 10.6045 8.81589 6.61448 8.81589C4.06086 8.81589 1.50723 9.29521 1.02843 9.9343Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M12.6794 14.5677C12.6794 16.0057 13.7967 16.8045 15.3927 16.485C19.3827 15.6861 19.8615 12.0113 16.0311 12.0113C14.1159 12.0113 12.6794 12.97 12.6794 14.5677Z" fill="#6549C2" fill-opacity="0.5"/>
</svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 15 16" fill="none">
  <path d="M2.29995 2.67613C-3.40345 8.468 2.29995 17.1558 10.6649 15.0321C14.4672 14.0668 15.4178 12.7154 14.8474 8.66107C14.4672 5.76513 13.5166 3.25531 12.376 2.86919C8.95392 1.90388 5.15165 5.76513 6.29233 9.04719C7.05279 10.7848 8.57369 11.557 9.71437 10.7848C11.2353 10.0125 11.0452 9.04719 9.33415 7.88882C7.2429 6.53738 7.43301 6.15125 10.0946 6.15125C14.2771 6.15125 14.2771 11.1709 10.2847 12.7154C7.2429 13.8738 1.91973 10.9778 1.91973 7.88882C1.91973 7.11657 3.25052 4.99288 4.96154 3.44838C6.48245 1.71081 7.2429 0.359375 6.29233 0.359375C5.34177 0.359375 3.63075 1.32469 2.29995 2.67613Z" fill="#6549C2" fill-opacity="0.5"/>
</svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="18" viewBox="0 0 14 18" fill="none">
  <path d="M4.9 1.23025C2.1 1.57369 0 2.26056 0 2.77571C0 4.49288 9.275 17.2 10.5 17.2C11.9 17.2 14 8.78581 14 3.29086C14 1.40197 12.95 0.199952 11.9 0.199952C10.675 0.371669 7.525 0.88682 4.9 1.23025ZM11.55 6.21005C11.025 7.75551 10.5 10.1595 10.5 11.705C10.5 13.9373 9.625 13.5939 7 10.3313C2.45 4.6646 2.625 3.46258 8.05 3.46258C11.55 3.46258 12.425 4.14945 11.55 6.21005Z" fill="#6549C2" fill-opacity="0.5"/>
</svg>`,
`<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 20 20" fill="none">
  <path d="M11.4025 1.14664C9.16811 3.38346 8.84891 7.21802 11.0833 7.21802C13.1581 7.21802 16.1906 1.14664 14.5946 0.188004C13.7966 -0.291315 12.3601 0.188004 11.4025 1.14664Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M4.22028 1.94551C2.14546 3.86278 3.10307 7.21802 5.49709 7.21802C6.7739 7.21802 7.89111 5.78006 7.89111 4.02256C7.89111 0.827097 6.1355 -0.131541 4.22028 1.94551Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M15.3924 5.7804C12.2004 7.69768 11.7216 10.4138 14.9136 10.4138C17.6269 10.4138 21.2977 6.25972 19.5421 5.14131C18.7441 4.66199 16.9885 4.98154 15.3924 5.7804Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M1.02843 9.9343C-0.886789 11.8516 -0.0887816 13.4493 3.10325 14.4079C4.85886 14.8873 6.29528 16.485 6.29528 17.7632C6.29528 19.0414 7.41249 20 8.6893 20C10.2853 20 11.0833 18.2425 11.0833 14.4079C11.0833 9.29521 10.6045 8.81589 6.61448 8.81589C4.06086 8.81589 1.50723 9.29521 1.02843 9.9343Z" fill="#6549C2" fill-opacity="0.5"/>
  <path d="M12.6794 14.5677C12.6794 16.0057 13.7967 16.8045 15.3927 16.485C19.3827 15.6861 19.8615 12.0113 16.0311 12.0113C14.1159 12.0113 12.6794 12.97 12.6794 14.5677Z" fill="#6549C2" fill-opacity="0.5"/>
</svg>`];

const container = document.querySelector('.vcard-twentyeight-effect');
  const particles = [];
  const size = 110; // in px
  const count = 60;

function isOverlapping(x, y, others) {
    return others.some(p => {
      return Math.abs(p.x - x) < size && Math.abs(p.y - y) < size;
    });
  }

for (let i = 0; i < count; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle-vcard28';
    particle.innerHTML = svgShapes[i % svgShapes.length];
    container.appendChild(particle);

let x, y, tries = 0;
    do {
      x = Math.random() * (container.clientWidth - size);
      y = Math.random() * (container.clientHeight - size);
      tries++;
      if (tries > 1000) break;
    } while (isOverlapping(x, y, particles));

const speedX = (Math.random() - 0.5) * 1.2;
    const speedY = (Math.random() - 0.5) * 1.2;

particles.push({ el: particle, x, y, speedX, speedY });
  }

function animate() {
    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];

p.x += p.speedX;
      p.y += p.speedY;

if (p.x < 0 || p.x > container.clientWidth - size) p.speedX *= -1;
      if (p.y < 0 || p.y > container.clientHeight - size) p.speedY *= -1;

for (let j = 0; j < particles.length; j++) {
        if (i === j) continue;
        const other = particles[j];
        if (Math.abs(p.x - other.x) < size && Math.abs(p.y - other.y) < size) {
          p.speedX *= -1;
          p.speedY *= -1;
          break;
        }
      }

p.el.style.transform = `translate(${p.x}px, ${p.y}px)`;
    }

requestAnimationFrame(animate);
  }

animate();
</script>
<?php endif; ?>
<?php if($blog->vcard->template_id == 37): ?>
<script>
    function randNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
        }

class Flower {
        constructor(opts) {
        this.left = opts.left;
        this.top = opts.top;
        this.size = randNum(10, 20);
        this.drawFlower();
        }

spinFlower(el) {
        let r = 0;
        const spd = Math.random() * (0.3 - 0.01) + 0.01; // reduced spin speed
        const spin = () => {
            r = (r + spd) % 360;
            el.style.transform = `rotate(${r}deg)`;
            requestAnimationFrame(spin);
        };
        spin();
        }

fall(el) {
        const maxRight = this.left + randNum(20, 50);
        const maxLeft = this.left - randNum(20, 50);
        let direction = ['left', 'right'][randNum(0, 1)];

fadeOut(el) {
        el.style.opacity = 1;
        const fade = () => {
            if ((el.style.opacity -= 0.0025) < 0) {
            el.parentNode && el.parentNode.removeChild(el);
            } else {
            requestAnimationFrame(fade);
            }
        };
        fade();
        }

get petal() {
        const petal = document.createElement('div');
        petal.style.userSelect = 'none';
        petal.style.position = 'absolute';
        petal.style.background = 'radial-gradient(white 10%, #cee7d5 50%, #2a9f2e 70%)';
        petal.style.backgroundSize = this.size + 'px';
        petal.style.backgroundPosition = `-${this.size / 2}px 0`;
        petal.style.width = petal.style.height = this.size / 2 + 'px';
        petal.style.borderTopLeftRadius = petal.style.borderBottomRightRadius = (42.5 * this.size) / 100 + 'px';
        return petal;
        }

get petal_styles() {
        return [
            { transform: 'rotate(-47deg)', left: '50%', marginLeft: `-${this.size / 4}px`, top: '0' },
            { transform: 'rotate(15deg)', left: '100%', marginLeft: `-${this.size * 0.39}px`, top: `${this.size * 0.175}px` },
            { transform: 'rotate(93deg)', left: '100%', marginLeft: `-${this.size * 0.51}px`, top: `${this.size * 0.58}px` },
            { transform: 'rotate(175deg)', left: '0%', marginLeft: `${this.size * 0.05}px`, top: `${this.size * 0.58}px` },
            { transform: 'rotate(250deg)', left: '0%', marginLeft: `-${this.size * 0.08}px`, top: `${this.size * 0.175}px` }
        ];
        }

get flower() {
        const flower = document.createElement('div');
        flower.className = 'flower';
        flower.style.userSelect = 'none';
        flower.style.position = 'fixed';
        flower.style.left = this.left + 'px';
        flower.style.top = this.top + 'px';
        flower.style.width = this.size + 'px';
        flower.style.height = this.size + 'px';
        flower.style.pointerEvents = 'none';

// Set a random width and height for SVG
        const svgSize = randNum(15, 40); // Customize size range here

// SVG content as string
        const svgHTML = `
        <svg width="${svgSize}" height="${svgSize}" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M25 0.5C27.9407 0.5 29.5598 2.52017 30.4678 4.69238C30.9194 5.77303 31.179 6.86066 31.3252 7.68164C31.398 8.09083 31.4419 8.43139 31.4678 8.66797C31.4807 8.78586 31.4891 8.87779 31.4941 8.93945C31.4967 8.97021 31.499 8.99374 31.5 9.00879C31.5005 9.01631 31.5008 9.02203 31.501 9.02539V9.0293L31.5664 10.1602L32.3574 9.34961L32.3721 9.33496C32.3829 9.32406 32.4004 9.30714 32.4229 9.28516C32.468 9.24099 32.5363 9.17502 32.625 9.09277C32.8026 8.92821 33.063 8.69616 33.3896 8.43164C34.0453 7.90074 34.9596 7.24582 36.0039 6.73145C37.0513 6.21562 38.2009 5.85515 39.3379 5.87988C40.4588 5.90434 41.5952 6.30225 42.6465 7.35352C44.7082 9.41519 44.3087 12.1415 43.2598 14.5156C42.7415 15.6886 42.082 16.7294 41.5488 17.4795C41.283 17.8535 41.0503 18.1533 40.8848 18.3584C40.8021 18.4608 40.736 18.5393 40.6914 18.5918C40.6694 18.6178 40.6527 18.6376 40.6416 18.6504C40.636 18.6568 40.6315 18.6621 40.6289 18.665L40.626 18.668L39.833 19.5625L41.0264 19.499H41.0303C41.0336 19.4989 41.0395 19.4984 41.0469 19.498C41.0619 19.4974 41.0848 19.497 41.1152 19.4961C41.1769 19.4943 41.2695 19.4924 41.3877 19.4922C41.6242 19.4918 41.9643 19.498 42.373 19.5254C43.1935 19.5803 44.2776 19.7187 45.3535 20.0488C46.4325 20.3799 47.471 20.8942 48.2354 21.6787C48.9877 22.451 49.5 23.5105 49.5 25C49.5 26.4902 48.9872 27.5862 48.2266 28.4092C47.4558 29.2431 46.4108 29.8173 45.3301 30.209C44.252 30.5997 43.1663 30.7979 42.3457 30.8984C41.9367 30.9485 41.5959 30.9745 41.3594 30.9873C41.2414 30.9937 41.1495 30.9964 41.0879 30.998C41.0571 30.9989 41.0336 30.9998 41.0186 31H40.998L39.8398 31.0029L40.6367 31.8428V31.8438L40.6396 31.8467L40.6982 31.9102C40.7401 31.9564 40.8021 32.0264 40.8799 32.1172C41.0359 32.2993 41.2559 32.5665 41.5059 32.9014C42.0072 33.573 42.6235 34.5087 43.0996 35.5752C44.0567 37.7192 44.3972 40.2513 42.3242 42.3242C41.2675 43.3809 40.1454 43.7971 39.0537 43.8486C37.9474 43.9009 36.8392 43.5795 35.835 43.1045C34.833 42.6305 33.9613 42.0156 33.3369 41.5156C33.0259 41.2666 32.7787 41.048 32.6104 40.8926C32.5263 40.815 32.4616 40.7536 32.4189 40.7119C32.3976 40.6911 32.3813 40.6753 32.3711 40.665C32.366 40.6599 32.3626 40.6556 32.3604 40.6533L32.3574 40.6504L31.5664 39.8389L31.501 40.9707V40.9746C31.5008 40.978 31.5005 40.9837 31.5 40.9912C31.499 41.0063 31.4967 41.0298 31.4941 41.0605C31.4891 41.1222 31.4807 41.2141 31.4678 41.332C31.4419 41.5686 31.398 41.9092 31.3252 42.3184C31.179 43.1393 30.9194 44.227 30.4678 45.3076C29.5598 47.4798 27.9407 49.5 25 49.5C22.0593 49.5 20.4402 47.4798 19.5322 45.3076C19.0806 44.227 18.821 43.1393 18.6748 42.3184C18.602 41.9092 18.5581 41.5686 18.5322 41.332C18.5193 41.2141 18.5109 41.1222 18.5059 41.0605C18.5033 41.0298 18.501 41.0063 18.5 40.9912C18.4995 40.9837 18.4992 40.978 18.499 40.9746V40.9707L18.4336 39.8389L17.6416 40.6504V40.6514C17.6412 40.6518 17.6405 40.6524 17.6396 40.6533C17.6374 40.6556 17.634 40.6599 17.6289 40.665C17.6187 40.6753 17.6024 40.6911 17.5811 40.7119C17.5384 40.7536 17.4737 40.815 17.3896 40.8926C17.2213 41.048 16.9741 41.2666 16.6631 41.5156C16.0387 42.0156 15.167 42.6305 14.165 43.1045C13.1608 43.5795 12.0526 43.9009 10.9463 43.8486C9.85463 43.7971 8.7325 43.3809 7.67578 42.3242C5.60283 40.2513 5.94327 37.7192 6.90039 35.5752C7.3765 34.5087 7.99283 33.573 8.49414 32.9014C8.74406 32.5665 8.96412 32.2993 9.12012 32.1172C9.1979 32.0264 9.25992 31.9564 9.30176 31.9102L9.36035 31.8467L9.36328 31.8438L9.3623 31.8428L10.1602 31.0029L9.00098 31H8.98145C8.96641 30.9998 8.94294 30.9989 8.91211 30.998C8.85051 30.9964 8.75856 30.9937 8.64062 30.9873C8.40411 30.9745 8.06332 30.9485 7.6543 30.8984C6.83371 30.7979 5.74803 30.5997 4.66992 30.209C3.58921 29.8173 2.54418 29.2431 1.77344 28.4092C1.01283 27.5862 0.5 26.4902 0.5 25C0.5 23.5105 1.0123 22.451 1.76465 21.6787C2.52903 20.8942 3.56748 20.3799 4.64648 20.0488C5.72243 19.7187 6.80648 19.5803 7.62695 19.5254C8.03568 19.498 8.37583 19.4918 8.6123 19.4922C8.73047 19.4924 8.82309 19.4943 8.88477 19.4961C8.91516 19.497 8.93813 19.4974 8.95312 19.498C8.96054 19.4984 8.96635 19.4989 8.96973 19.499H8.97363L10.1621 19.5625L9.375 18.6689L9.37207 18.666C9.36973 18.6633 9.36623 18.659 9.36133 18.6533C9.35086 18.6412 9.33454 18.6217 9.31348 18.5967C9.27136 18.5467 9.20896 18.4718 9.13086 18.374C8.97439 18.1781 8.75441 17.8916 8.50391 17.5332C8.0014 16.8142 7.38231 15.8146 6.9043 14.6836C5.94015 12.4022 5.60484 9.74672 7.67578 7.67578C8.7325 6.61906 9.85463 6.20294 10.9463 6.15137C12.0526 6.09913 13.1608 6.42049 14.165 6.89551C15.167 7.36946 16.0387 7.98435 16.6631 8.48438C16.9741 8.73344 17.2213 8.952 17.3896 9.10742C17.4737 9.18497 17.5384 9.24643 17.5811 9.28809C17.6024 9.30891 17.6187 9.32472 17.6289 9.33496C17.634 9.34008 17.6374 9.3444 17.6396 9.34668L17.6416 9.34863L18.4336 10.1611L18.499 9.0293V9.02539C18.4992 9.02203 18.4995 9.01631 18.5 9.00879C18.501 8.99374 18.5033 8.97021 18.5059 8.93945C18.5109 8.87779 18.5193 8.78586 18.5322 8.66797C18.5581 8.43139 18.602 8.09083 18.6748 7.68164C18.821 6.86066 19.0806 5.77303 19.5322 4.69238C20.4402 2.52017 22.0593 0.5 25 0.5Z" fill="#CEE7D5" stroke="#2a9f2e"/>
        </svg>
        `;

flower.innerHTML = svgHTML;

this.fadeOut(flower);
        this.spinFlower(flower);
        this.fall(flower);
        return flower;
        }

drawFlower() {
        document.body.appendChild(this.flower);
        }
        }

let flowerInterval;

function stopFlowerInterval() {
        clearInterval(flowerInterval);
        }

document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
        stopFlowerInterval();
        } else {
        startFlowerInterval();
        }
        });

window.addEventListener('beforeunload', () => {
        document.querySelectorAll('.flower').forEach(f => f.remove());
        });

startFlowerInterval();
</script>
<?php endif; ?>
<?php if($blog->vcard->template_id == 15): ?>
<script>
    const canvas = document.getElementById("waveCanvas");
    const ctx = canvas.getContext("2d");
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener("resize", resizeCanvas);
    let t = 0;
    function drawWave(color, amp, freq, speed, offsetY) {
      ctx.beginPath();
      ctx.moveTo(0, offsetY);

for (let x = 0; x <= canvas.width; x++) {
        const y = Math.sin((x * freq) + (t * speed)) * amp + offsetY;
        ctx.lineTo(x, y);
      }
      ctx.strokeStyle = color;
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const spacing = 160; // vertical gap between wave sets
      for (let y = 0; y <= canvas.height + spacing; y += spacing) {
        drawWave("rgba(125,104,87,0.08)", 40, 0.01, 0.03, y - 30);
        drawWave("rgba(125,104,87,0.09)", 30, 0.012, 0.025, y - 20);
        drawWave("rgba(125,104,87,0.1)", 25, 0.015, 0.02, y);
        drawWave("rgba(125,104,87,0.09)", 20, 0.018, 0.015, y + 20);
        drawWave("rgba(125,104,87,0.08)", 15, 0.02, 0.01, y + 30);
      }
      t += 0.3;
      requestAnimationFrame(animate);
    }
    animate();
  </script>
<?php endif; ?>
<?php if($blog->vcard->template_id == 15): ?>
<script>
    const canvas = document.getElementById("waveCanvas");
    const ctx = canvas.getContext("2d");
    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener("resize", resizeCanvas);
    let t = 0;
    function drawWave(color, amp, freq, speed, offsetY) {
      ctx.beginPath();
      ctx.moveTo(0, offsetY);

for (let x = 0; x <= canvas.width; x++) {
        const y = Math.sin((x * freq) + (t * speed)) * amp + offsetY;
        ctx.lineTo(x, y);
      }
      ctx.strokeStyle = color;
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const spacing = 160; // vertical gap between wave sets
      for (let y = 0; y <= canvas.height + spacing; y += spacing) {
        drawWave("rgba(125,104,87,0.08)", 40, 0.01, 0.03, y - 30);
        drawWave("rgba(125,104,87,0.09)", 30, 0.012, 0.025, y - 20);
        drawWave("rgba(125,104,87,0.1)", 25, 0.015, 0.02, y);
        drawWave("rgba(125,104,87,0.09)", 20, 0.018, 0.015, y + 20);
        drawWave("rgba(125,104,87,0.08)", 15, 0.02, 0.01, y + 30);
      }
      t += 0.3;
      requestAnimationFrame(animate);
    }
    animate();
  </script>
<?php endif; ?>
<?php if($blog->vcard->template_id == 31): ?>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const container = document.querySelector(".bg-effect");
        const images = [
            "<?php echo e(asset('assets/img/vcard31/bg-effect-1.svg')); ?>",
            "<?php echo e(asset('assets/img/vcard31/bg-effect-2.svg')); ?>",
            "<?php echo e(asset('assets/img/vcard31/bg-effect-3.svg')); ?>",
            "<?php echo e(asset('assets/img/vcard31/vector-img10.png')); ?>",
            "<?php echo e(asset('assets/img/vcard31/vector-img12.png')); ?>",
            "<?php echo e(asset('assets/img/vcard31/bg-effect-6.png')); ?>",
            "<?php echo e(asset('assets/img/vcard31/bg-effect-7.png')); ?>",
            "<?php echo e(asset('assets/img/vcard31/bg-effect-8.png')); ?>",
        ];

const placedPositions = [];
        const minDistance = 200; // Minimum distance between centers
        const imageSize = 80; // Size in px (same as CSS)
        const maxAttempts = 1000;

function isFarEnough(x, y) {
            return placedPositions.every(pos => {
                const dx = pos.x - x;
                const dy = pos.y - y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                return distance >= minDistance;
            });
        }

for (let i = 0; i < 30; i++) {
            let attempts = 0;
            let x, y;
            let valid = false;

while (!valid && attempts < maxAttempts) {
                x = Math.random() * (window.innerWidth - imageSize);
                y = Math.random() * (window.innerHeight - imageSize);
                if (isFarEnough(x, y)) {
                    valid = true;
                    placedPositions.push({ x, y });

const wrapper = document.createElement("div");
                    wrapper.className = "bg-effect-1";
                    wrapper.style.position = "absolute";
                    wrapper.style.left = x + "px";
                    wrapper.style.top = y + "px";

const img = document.createElement("img");
                    img.src = images[Math.floor(Math.random() * images.length)];
                    img.alt = "bg-img";
                    img.className = "w-100 h-100 object-fit-contain";

wrapper.appendChild(img);
                    container.appendChild(wrapper);
                }
                attempts++;
            }

if (attempts >= maxAttempts) {
                console.warn("Could not place all images without overlapping.");
                break;
            }
        }
    });
</script>
<?php endif; ?>

<?php if($blog->vcard->template_id == 24): ?>
<script>
    'use strict';
    var app = {
      chars: 'abcdefghijklmnopqrstuvwxyz0123456789±×÷=≠≈√∞πΣ∑ΔΩ∫∇∂≤≥≡⊕⊗∩∪∅∃∀∈∉→←↔⇌∴∵'.split(''),
      colors: ['#423f8d', '#1cbbb4', '#ed078b', '#f7941e'],

init: function () {
        app.container = document.createElement('div');
        app.container.className = 'animation-container';
        document.body.appendChild(app.container);
        setInterval(app.add, 100);
      },

add: function () {
        var element = document.createElement('span');
        app.container.appendChild(element);
        app.animate(element);
      },

animate: function (element) {
        var character = app.chars[Math.floor(Math.random() * app.chars.length)];
        var duration = Math.random() * 10 + 10;
        var offset = Math.random() * 100;
        var size = Math.floor(Math.random() * 26) + 10;
        var color = app.colors[Math.floor(Math.random() * app.colors.length)];
        element.style.left = offset + 'vw';
        element.style.fontSize = size + 'px';
        element.style.animationDuration = duration + 's';
        element.style.color = color;
        var inner = document.createElement('span');
        inner.className = 'char';
        inner.textContent = character;

element.appendChild(inner);

setTimeout(function () {
          if (element && element.parentNode) {
            element.parentNode.removeChild(element);
          }
        }, duration * 1000);
      }
    };

</html>
<?php /**PATH /home/rwabteecom/public_html/resources/views/vcards/blog.blade.php ENDPATH**/ ?>

CANCEL