<style>
/* Base styles */
    html {
        line-height: 1.15; /* 1 */
        -webkit-text-size-adjust: 100%; /* 2 */
    }

    .relative {
        position: relative;
    }

    .top-md {
        top: 3.75rem;
    }

    .-right-lg {
        right: -6rem;
    }

    .bottom-md {
        bottom: 3.75rem;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .mt-6 {
        margin-top: 1.5rem;
    }

    .mt-sm {
        margin-top: 2rem;
    }

    .-mt-lg {
        margin-top: -6rem;
    }

    .mb-0 {
        margin-bottom: 0px;
    }

    .mb-4 {
        margin-bottom: 1rem;
    }

    .mb-sm {
        margin-bottom: 2rem;
    }

    .block {
        display: block;
    }

    .inline-block {
        display: inline-block;
    }

    .flex {
        display: flex;
    }

    .table {
        display: table;
    }

    .grid {
        display: grid;
    }

    .hidden {
        display: none;
    }

    .h-40 {
        height: 10rem;
    }

    .w-14 {
        width: 3.5rem;
    }

    .w-40 {
        width: 10rem;
    }

    .w-full {
        width: 100%;
    }

    .flex-1 {
        flex: 1 1 0%;
    }

    @-webkit-keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes ping {
        75%,
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    @keyframes ping {
        75%,
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    @-webkit-keyframes pulse {
        50% {
            opacity: 0.5;
        }
    }

    @keyframes pulse {
        50% {
            opacity: 0.5;
        }
    }

    @-webkit-keyframes bounce {
        0%,
        100% {
            transform: translateY(-25%);
            -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }

        50% {
            transform: none;
            -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
    }

    @keyframes bounce {
        0%,
        100% {
            transform: translateY(-25%);
            -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
        }

        50% {
            transform: none;
            -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        }
    }

    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .items-start {
        align-items: flex-start;
    }

    .items-center {
        align-items: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .gap-3 {
        gap: 0.75rem;
    }

    .gap-4 {
        gap: 1rem;
    }

    .gap-8 {
        gap: 2rem;
    }

    .gap-10 {
        gap: 2.5rem;
    }

    .space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }

    .overflow-x-hidden {
        overflow-x: hidden;
    }

    .rounded {
        border-radius: 0.25rem;
    }

    .rounded-md {
        border-radius: 0.375rem;
    }

    .rounded-full {
        border-radius: 9999px;
    }

    .rounded-l-md {
        border-top-left-radius: 0.375rem;
        border-bottom-left-radius: 0.375rem;
    }

    .border {
        border-width: 1px;
    }

    .border-opacity-20 {
        --tw-border-opacity: 0.2;
    }

    .bg-green {
        --tw-bg-opacity: 1;
        background-color: rgba(28, 184, 149, var(--tw-bg-opacity));
    }

    .bg-blue {
        --tw-bg-opacity: 1;
        background-color: rgba(24, 106, 171, var(--tw-bg-opacity));
    }

    .bg-grey-100 {
        --tw-bg-opacity: 1;
        background-color: rgba(245, 248, 252, var(--tw-bg-opacity));
    }

    .bg-white {
        --tw-bg-opacity: 1;
        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    }

    .p-6 {
        padding: 1.5rem;
    }

    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .py-sm {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .py-md {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

    .pt-2 {
        padding-top: 0.5rem;
    }

    .pt-6 {
        padding-top: 1.5rem;
    }

    .pt-sm {
        padding-top: 2rem;
    }

    .pb-sm {
        padding-bottom: 2rem;
    }

    .text-center {
        text-align: center;
    }

    .text-sm {
        font-size: 0.875rem;
    }

    .text-lg {
        font-size: 1.125rem;
    }

    .text-xl {
        font-size: 1.25rem;
    }

    .text-2xl {
        font-size: 1.5rem;
    }

    .text-3xl {
        font-size: 2rem;
    }

    .font-bold {
        font-weight: 700;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .leading-tight {
        line-height: 1.25;
    }

    .tracking-wide {
        letter-spacing: 0.025em;
    }

    .text-blue {
        --tw-text-opacity: 1;
        color: rgba(24, 106, 171, var(--tw-text-opacity));
    }

    .text-grey-700 {
        --tw-text-opacity: 1;
        color: rgba(121, 136, 163, var(--tw-text-opacity));
    }

    .text-white {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
    }

    .opacity-40 {
        opacity: 0.4;
    }

    .hover\:opacity-50:hover {
        opacity: 0.5;
    }

    .hover\:opacity-60:hover {
        opacity: 0.6;
    }

    .hover\:opacity-80:hover {
        opacity: 0.8;
    }

    *,
    ::before,
    ::after {
        --tw-shadow: 0 0 #0000;
    }

    *,
    ::before,
    ::after {
        --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59, 130, 246, 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
    }

    .transition {
        transition-property: background-color, border-color, color, fill, stroke,
            opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
        transition-property: background-color, border-color, color, fill, stroke,
            opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: background-color, border-color, color, fill, stroke,
            opacity, box-shadow, transform, filter, backdrop-filter,
            -webkit-backdrop-filter;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    @media (min-width: 640px) {
    }

    @media (min-width: 780px) {
        .md\:absolute {
            position: absolute;
        }

        .md\:mr-6 {
            margin-right: 1.5rem;
        }

        .md\:mb-0 {
            margin-bottom: 0px;
        }

        .md\:block {
            display: block;
        }

        .md\:flex {
            display: flex;
        }

        .md\:w-1\/2 {
            width: 50%;
        }

        .md\:w-1\/4 {
            width: 25%;
        }

        .md\:w-3\/4 {
            width: 75%;
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .md\:border-r-2 {
            border-right-width: 2px;
        }

        .md\:border-grey-700 {
            --tw-border-opacity: 1;
            border-color: rgba(121, 136, 163, var(--tw-border-opacity));
        }

        .md\:p-12 {
            padding: 3rem;
        }

        .md\:p-sm {
            padding: 2rem;
        }

        .md\:py-lg {
            padding-top: 6rem;
            padding-bottom: 6rem;
        }

        .md\:pr-6 {
            padding-right: 1.5rem;
        }

        .md\:pb-0 {
            padding-bottom: 0px;
        }

        .md\:text-2xl {
            font-size: 1.5rem;
        }

        .md\:text-3xl {
            font-size: 2rem;
        }

        .md\:text-4xl {
            font-size: 3rem;
        }
    }

/* Custom styles */
    body {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        margin: 0;
font-size: 1rem;
    }

    h1,
    h2,
    h3,
    h4 {
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0;
    }

    a {
        text-decoration: none;
        transition: all 0.3s ease;
        color: #186AAB;
    }

 a:hover {
        color: #1CB895;
    }


    .bg-blue a {
        color: #fff;
    }

    footer a {
        color: #7988a3;
    }

.bg-blue a:hover {
color: #fff;
}

    .container {
        max-width: 1240px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    header {
        background: url(https://idiligo.com/wp-content/uploads/2021/11/map-side-l-1.png)
                no-repeat bottom left,
            url(https://idiligo.com/wp-content/uploads/2021/11/map-side-r-1.png)
                no-repeat bottom right;
    }

header p {
font-size: 1.5rem;
color: #0e5199;
}

    @media (min-width: 770px) {
        .container {
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        header {
            min-height: 540px;
        }
header p {
font-size: 2rem;
color: #0e5199;
}
        
    }



    .btn-outline,
    .btn-full {
        display: inline-block;
        position: relative;
        padding: 10px 24px;
        line-height: 100%;
        border-radius: 4px;
    }

    .btn-full-lg {
        padding: 16px 24px;
    }

    .btn-full {
        background: #1cb895;
        color: #fff;
    }

    .btn-full:hover {
        opacity: 0.8;
    }

    .btn-outline {
        color: #1cb895;
        border: 2px solid #1cb895;
    }

    .btn-outline:hover {
        background: #1cb895;
        color: #fff;
    }



    /* Responsive videos */
    .embed-container {
        position: relative;
        height: 0;
        padding-bottom: 56.25%;
    }

    .embed-container-vimeo {
        position: relative;
        height: 0;
        padding-bottom: 74%;
    }

    .embed-container iframe,
    .embed-container-vimeo iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

	#photo img {
		width:auto;
		height:100px;
border-radius: 12px;
	}

</style>
<div class="elfsight-app-1b7ae886-7607-4d10-a1fe-84607b47e65f"></div>
<div class="text-blue overflow-x-hidden">
    
        <header class="py-md relative">
            <div class="container flex items-center">
                <div class="w-full md:w-1/2">
                    <img src="https://idiligo.com/wp-content/themes/idiligo/images/idiligo-logo.svg" alt="idiligo logo" data-image="tz31aoangkcj">
                    <div class="py-sm">
                        <h1 class="text-3xl md:text-2xl font-bold">Hello [flow:clientFirstName],</h1>
                        <div class="text-2xl md:text-3xl pt-sm font-bold">
                        <p>It was a pleasure meeting you. Here the discussed information. Please check below if there are any open actions for you to proceed.</p>
                        </div>
                    </div>
                    <a class="hover:opacity-50 text-white" href="#content"><svg width="53" height="51" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M52 25.5C52 38.995 40.62 50 26.5 50S1 38.995 1 25.5 12.38 1 26.5 1 52 12.005 52 25.5Z" fill="#fff" stroke="#186AAB" stroke-width="2"></path>
                        <path stroke="#186AAB" stroke-width="2" d="M26.52 15v21M32.041 30.035l-5.52 5.521L21 30.036"></path>
                    </svg></a>
                </div>
            </div>
            <div class="hidden md:block md:absolute w-full md:w-1/2 top-md bottom-md rounded-l-md bg-green -right-lg" style="background: url(https://idiligo.com/wp-content/uploads/2021/11/pedro-lastra-Nyvq2juw4_o-unsplash-scaled.jpg) no-repeat center; background-size: cover;"></div>
        </header>
    
    
        <main id="content" class="py-md md:py-lg bg-grey-100">
            <section class="w-full">
                <div class="container md:flex gap-10 pb-sm items-start">
                    
                    <div class="bg-blue mb-sm md:mb-0 p-6 md:p-sm pb-sm rounded md:w-1/4 text-center text-white ">
                        <div class="h-40 w-40 rounded-full mx-auto inline-block -mt-lg mb-4" style="background-size: cover;"><p id="photo">[user:ProfilePicture]</p>
                        </div>
                        <h4 class="uppercase opacity-40 text-sm tracking-wide">Your Idiligo contact</h4>
                        <span class="text-xl md:text-2xl font-bold leading-tight block pt-6">[user:Voornaam] [user:Name]</span>
                        <span class="text-lg block pt-2">[user:PhoneNumber]</span>
                        <span class="text-lg block pt-2"><a href="mailto:[user:Email]">[user:Email]</a></span>
                        <div class="pt-sm"><a href="https://outlook.office365.com/owa/calendar/Idiligo@idiligo.com/bookings/" class="btn-full btn-full-lg text-lg">Schedule a meeting</a></div>
                    </div>
                    
                    
                    <div class="w-full md:w-3/4 p-6 md:p-12 bg-white rounded-md">
                        <div class="flex gap-3 items-center pb-sm">
                            <svg width="43" height="43" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="21.5" cy="21.5" r="21.5" fill="#186AAB"></circle>
                                <path d="M17.2 16.1h9.3M17.2 20h9.3M17.2 23.8h5.3" stroke="#fff" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                                <rect x="12.9" y="10.626" width="18" height="22" rx="2" stroke="#fff" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></rect>
                            </svg>
                            <h2 class="md:text-3xl text-2xl mb-0">Documents</h2>
                        </div>
          <div>
             
             <div class="md:pr-6 md:mr-6 pb-sm md:pb-0">
                <h4 class="uppercase text-sm tracking-wide">To sign</h4>
                <div class="space-y-2 pt-6">
                   <div class="bg-grey-100 flex justify-between py-2 px-4 rounded-md items-center gap-4">
                      <div class="flex-1">[call:Signatures]</div>
                   </div>
                </div>
             </div>
             
          </div>
          <div>
             <div>
                <h4 class="uppercase text-sm tracking-wide"><br><br>To download</h4>
                <div class="space-y-2 pt-6">
                   [flow:document1][flow:document2][flow:document3]
                </div>
             </div>
          </div>		  
		  
       </div>
    </div>

                
                 <div class="container">
                     <div class="p-6 md:p-12 bg-white rounded-md">
                         <div class="flex gap-3 items-center pb-sm">
                            <svg width="43" height="43" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="21.5" cy="21.5" r="21.5" fill="#186AAB"></circle>
                                <path d="m25 21.55-5.25-3.94v7.88L25 21.55Z" fill="#fff"></path>
                                <rect x="10" y="13" width="23" height="17" rx="3" stroke="#fff" stroke-width="2"></rect>
                            </svg>
                             <h2 class="md:text-3xl text-2xl mb-0">Videos</h2>
                         </div>
                         <div>
                                [flow:video0][flow:video1][flow:video2][flow:video3]
                         </div>
                     </div>
                 </div>   
            </section>
        </main>
    
    
        <footer class="text-center py-sm text-grey-700">
            Visit <a class="hover:opacity-60" href="http://www.idiligo.com">www.idiligo.com</a> to learn more
        </footer>
</div>