@extends('theme::user.layouts.app')

<style>
	.nav-link.active {
	    background-color: #ffffff !important;
	    color: #364257 !important;
	}

	.nav-link.active .svg-stroke {
		stroke: #364257;
	}

	.nav-link {
		background-color: #364257 !important;
	    color: #ffffff !important;
	}

	.nav-link .svg-stroke {
		stroke: #ffffff;
	}
</style>

@section('content')

<div class="col">
    <div class="row" style="margin: 0px;">
        <div class="col-xxl-6" style="margin-top: 20px;margin-bottom: 20px;">
            <h1 style="font-size: 24px;text-align: left;color: rgb(7,7,7);">Account</h1>
        </div>
        <div class="col-xxl-6 flex justify-end" align="right" style="margin-top: 5px;margin-bottom: 20px">
            <a href="#" class="btn btn-danger" style="background-color: #9B0025; color: #fff;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">Log out</a>
        </div>
    </div>
</div>
<div class="card" style="border-radius: 35px;">
    <div class="card-body scstyle-15" style="overflow: auto;height: 650px; border-radius: 35px; padding: 0px;">
        <nav class="nav nav-pills nav-justified" style="height: 50px; border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;">
            <a class="nav-link active flex items-center" style="justify-content: center; height: 50px; border-top-right-radius: 0px; border-top-left-radius: 20px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;" aria-current="page" data-bs-toggle="tab" data-bs-target="#queue-tab-pane" type="button" role="tab" aria-controls="queue-tab-pane" aria-selected="false">
                <svg class="svg-stroke" style="width: 50px;" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 76 75" fill="none">
                    <path class="svg-stroke" d="M45.7798 26.5655C45.7798 30.6927 44.0159 37.776 38.1363 37.776C32.2567 37.776 30.4928 30.6928 30.4928 26.5655C30.4928 21.2716 34.24 19.0918 38.1363 19.0918C42.0326 19.0918 45.7798 21.2716 45.7798 26.5655Z" fill="#364257" stroke="#364257" stroke-miterlimit="10"/>
                    <path class="svg-stroke" d="M47.9534 37.7754C51.4378 40.0581 54.2727 43.908 54.2727 48.4623C54.2727 54.2142 53.0314 56.4596 41.2395 56.4596H35.0332C23.2413 56.4596 22 54.2142 22 48.4623C22 43.908 24.835 40.0583 28.3192 37.7754" stroke="#364257" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
                </svg>
                <strong>My Account</strong>
            </a>
            <a class="nav-link flex items-center" style="justify-content: center; height: 50px; border-top-right-radius: 20px; border-top-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;" data-bs-toggle="tab" data-bs-target="#completed-tab-pane" type="button" role="tab" aria-controls="completed-tab-pane" aria-selected="false">
                <svg style="width: 25px;"  width="50" height="50" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="vuesax/linear/receipt-text">
                        <path class="svg-stroke" id="Vector" d="M40.2619 8.75237V13.4426C40.2619 16.5047 38.3237 18.4428 35.2615 18.4428H28.6333V4.89557C28.6333 2.74428 30.397 1 32.5483 1C34.6608 1.01938 36.5989 1.87214 37.9943 3.26757C39.3897 4.68238 40.2619 6.62047 40.2619 8.75237Z" fill="white" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                        <path class="svg-stroke" id="Vector_2" d="M1.5 10.6905V37.8238C1.5 39.4324 3.32176 40.3433 4.6009 39.3742L7.91508 36.8935C8.69032 36.312 9.77566 36.3896 10.4734 37.0873L13.6906 40.3239C14.4464 41.0797 15.6869 41.0797 16.4427 40.3239L19.6987 37.0679C20.377 36.3896 21.4624 36.312 22.2182 36.8935L25.5324 39.3742C26.8115 40.3239 28.6333 39.413 28.6333 37.8238V4.87618C28.6333 2.74428 30.3776 1 32.5095 1H11.1905H9.25237C3.43809 1 1.5 4.46918 1.5 8.75237V10.6905Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                        <path class="svg-stroke" id="Vector_3" d="M9.25238 14.5684H20.8809" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path class="svg-stroke" id="Vector_4" d="M10.706 22.3184H19.4274" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </g>
                </svg>
                <strong class="pl-5">Subscription</strong>
            </a>
        </nav>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="queue-tab-pane" role="tabpanel" aria-labelledby="queue-tab" tabindex="0">
                <div class="col">
                    <div class="row mt-20">
                        <div class="col-xxl-5 flex justify-end">
                            <svg style="width: 150px;" class="pr-2" width="150" height="150" viewBox="0 0 236 232" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g filter="url(#filter0_d_209_6048)">
                                    <ellipse cx="118" cy="111.609" rx="110" ry="107.609" fill="white"/>
                                    <path d="M70.1739 87.125H113.749V176.17H70.1739V87.125Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M97.8434 49.4336H153.184V100.348H122.028V77.8662H97.8434V49.4336Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M122.028 108.949H166.474V176.174H122.028V108.949Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M122.028 100.354V108.949" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M78.8885 103.648H87.0882V111.943H78.8885V103.648Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M96.7541 103.648H104.954V111.943H96.7541V103.648Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M78.8885 122.385H87.0882V130.68H78.8885V122.385Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M96.7541 122.385H104.954V130.68H96.7541V122.385Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M78.8885 140.906H87.0882V149.201H78.8885V140.906Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M96.7541 140.906H104.954V149.201H96.7541V140.906Z" stroke="#6D7581" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M122.028 100.349H153.183V49.4336H97.8448V77.8674H122.03L122.028 100.349Z" fill="#6D7581"/>
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M139.457 129.44H131.397V121.064H139.457V129.44ZM166.691 108.941H122.026V176.165H166.691V108.941ZM139.457 148.175H131.396V139.799H139.457V148.175ZM149.262 148.175V139.799H157.323V148.175H149.262ZM149.262 129.44V121.065H157.323V129.44H149.262Z" fill="#6D7581"/>
                                </g>
                                <circle cx="197.56" cy="189.407" r="30.4403" fill="#F3CF5D"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M195.037 181.857C194.355 181.857 193.732 182.245 193.427 182.859C192.889 183.942 191.79 184.627 190.587 184.627H190.062C188.923 184.627 188 185.556 188 186.703V195.011C188 196.158 188.923 197.088 190.062 197.088H205.187C206.326 197.088 207.25 196.158 207.25 195.011V186.703C207.25 185.556 206.326 184.627 205.187 184.627C204.105 184.627 203.086 184.114 202.437 183.242L202.025 182.688C201.635 182.165 201.024 181.857 200.375 181.857H195.037ZM192.197 182.24C192.735 181.157 193.834 180.473 195.037 180.473H200.375C201.457 180.473 202.475 180.986 203.125 181.857L203.537 182.411C203.927 182.934 204.538 183.242 205.187 183.242C207.086 183.242 208.625 184.792 208.625 186.703V195.011C208.625 196.923 207.086 198.473 205.187 198.473H190.062C188.164 198.473 186.625 196.923 186.625 195.011V186.703C186.625 184.792 188.164 183.242 190.062 183.242H190.587C191.269 183.242 191.892 182.854 192.197 182.24ZM197.625 186.011C195.346 186.011 193.5 187.871 193.5 190.165C193.5 192.459 195.346 194.319 197.625 194.319C199.903 194.319 201.75 192.459 201.75 190.165C201.75 187.871 199.903 186.011 197.625 186.011ZM192.125 190.165C192.125 187.106 194.587 184.627 197.625 184.627C200.662 184.627 203.125 187.106 203.125 190.165C203.125 193.224 200.662 195.703 197.625 195.703C194.587 195.703 192.125 193.224 192.125 190.165Z" fill="#364257"/>
                                <defs>
                                    <filter id="filter0_d_209_6048" x="0" y="0" width="236" height="231.217" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                        <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                                        <feOffset dy="4"/>
                                        <feGaussianBlur stdDeviation="4"/>
                                        <feComposite in2="hardAlpha" operator="out"/>
                                        <feColorMatrix type="matrix" values="0 0 0 0 0.080434 0 0 0 0 0.470833 0 0 0 0 0.329856 0 0 0 0.25 0"/>
                                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_209_6048"/>
                                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_209_6048" result="shape"/>
                                    </filter>
                                </defs>
                            </svg>
                        </div>
                        <div class="col-xxl-7">
                            <div class="col">
                                <div class="row" style="margin: 0px;margin-top: 20px;">
                                    <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                                        <h1 style="color: rgb(0,0,0);font-size: 20px;">Company </h1>
                                    </div>
                                    <div class="col-xxl-7">
                                        <input class="w-full form-control form-control-sm" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);">
                                    </div>
                                </div>
                                <div class="row" style="margin: 0px;margin-top: 20px;">
                                    <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                                        <h1 style="color: rgb(0,0,0);font-size: 20px;">Director Alias Name </h1>
                                    </div>
                                    <div class="col-xxl-7">
                                        <input class="w-full form-control form-control-sm" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);">
                                    </div>
                                </div>
                                <div class="row" style="margin: 0px;margin-top: 20px;">
                                    <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                                        <h1 style="color: rgb(0,0,0);font-size: 20px;">Email </h1>
                                    </div>
                                    <div class="col-xxl-7">
                                        <input class="w-full form-control form-control-sm" type="text" style="border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;height: 50px;border-style: solid;border-color: #6D7581;font-size: 20px;color: rgb(0,0,0);">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-20">
                        <div class="col flex justify-center">
                            <a href="#" class="btn btn-success" style="color: #FFFFFF;background: #009B9A;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">Save</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="completed-tab-pane" role="tabpanel" aria-labelledby="completed-tab" tabindex="0">
                <!-- Bookkeeping Service -->
                <div class="flex justify-center items-center mt-3 d-none">
                    <h2 style="font-size: 24px;">Bookkeeping Service Subscription Packages</h2>
                    &emsp;
                    <div class="form-check form-switch" style="box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25); border-radius: 25px;">
                        <input class="form-check-input ml-1" type="checkbox" id="flexSwitchCheckDefault">
                        <label class="form-check-label mr-1" style="font-size: 18px; color: #009B9A;" for="flexSwitchCheckDefault">Annually</label>
                    </div>
                    &emsp;
                    <a href="#" class="btn btn-success" style="color: #FFFFFF;background: #009B9A;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">
                        <svg style="width: 25px;" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 38 38" fill="none">
                            <path d="M26.0308 14.0918C31.7308 14.5826 34.0583 17.5118 34.0583 23.9243V24.1301C34.0583 31.2076 31.2242 34.0418 24.1467 34.0418H13.8392C6.76166 34.0418 3.92749 31.2076 3.92749 24.1301V23.9243C3.92749 17.5593 6.22332 14.6301 11.8283 14.1076" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M19 3.16602V23.5593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M24.3017 20.0293L18.9975 25.3335L13.6934 20.0293" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        &nbsp;
                        Download Invoice
                    </a>
                </div>
                <div class="row flex flex-wrap mx-auto mt-12">
                    <div class="col">
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #F3CF5D;border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 pt-7">
                                    <div class="absolute right-0 inline-block mr-6 transform">
                                        <!-- <h2 class="relative z-20 w-full h-full px-2 py-1 text-xs font-bold leading-tight tracking-wide text-center uppercase bg-white border-2 border-wave-400 text-wave-500 rounded">Flexi</h2> -->
                                    </div>
                                </div>

                                <div class="px-10 mt-5 flex justify-center">
                                    <span class="font-mono text-5xl font-bold">Demi</span>
                                </div>

                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500" align="center">Monthly Revenue under HK$50K</p>
                                </div>

                                <div class="relative" style="margin-left: 15px; margin-right: 15px; z-index: 999;">
                                    <div style="margin-bottom: -35px; border-radius: 45px; background-color: #009B9A; box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25)" data-plan="1" class="inline-flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-white transition duration-150 ease-in-out from-wave-600 to-indigo-500 hover:from-wave-500 hover:to-indigo-400 cursor-pointer rounded-b-md checkout focus:outline-none disabled:opacity-25">
                                        <span style="font-size: 20px;">HK</span><p style="font-size: 30px;" class="text-lg">$14,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #ffffff;border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-3 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Annual Support</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-3 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="px-3 mt-1 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Government &amp; Tax Filings</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-2 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2">
                            <a href="#" class="btn btn-success" disabled style="color: #000;background: #fff;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px; opacity: 0.9;">
                                Current Plan
                            </a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #F3CF5D;border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 pt-7">
                                    <div class="absolute right-0 inline-block mr-6 transform">
                                        <!-- <h2 class="relative z-20 w-full h-full px-2 py-1 text-xs font-bold leading-tight tracking-wide text-center uppercase bg-white border-2 border-wave-400 text-wave-500 rounded">Flexi</h2> -->
                                    </div>
                                </div>

                                <div class="px-10 mt-5 flex justify-center">
                                    <span class="font-mono text-5xl font-bold">Demi</span>
                                </div>

                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500" align="center">Monthly Revenue under HK$50K</p>
                                </div>

                                <div class="relative" style="margin-left: 15px; margin-right: 15px; z-index: 999;">
                                    <div style="margin-bottom: -35px; border-radius: 45px; background-color: #009B9A; box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25)" data-plan="1" class="inline-flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-white transition duration-150 ease-in-out from-wave-600 to-indigo-500 hover:from-wave-500 hover:to-indigo-400 cursor-pointer rounded-b-md checkout focus:outline-none disabled:opacity-25">
                                        <span style="font-size: 20px;">HK</span><p style="font-size: 30px;" class="text-lg">$14,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #ffffff;border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-3 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Annual Support</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-3 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="px-3 mt-1 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Government &amp; Tax Filings</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-2 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2">
                            <a href="#" class="btn btn-success" style="color: #000;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px; opacity: 0.9;">
                                Upgrade now
                            </a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #F3CF5D;border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 pt-7">
                                    <div class="absolute right-0 inline-block mr-6 transform">
                                        <!-- <h2 class="relative z-20 w-full h-full px-2 py-1 text-xs font-bold leading-tight tracking-wide text-center uppercase bg-white border-2 border-wave-400 text-wave-500 rounded">Flexi</h2> -->
                                    </div>
                                </div>

                                <div class="px-10 mt-5 flex justify-center">
                                    <span class="font-mono text-5xl font-bold">Demi</span>
                                </div>

                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500" align="center">Monthly Revenue under HK$50K</p>
                                </div>

                                <div class="relative" style="margin-left: 15px; margin-right: 15px; z-index: 999;">
                                    <div style="margin-bottom: -35px; border-radius: 45px; background-color: #009B9A; box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25)" data-plan="1" class="inline-flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-white transition duration-150 ease-in-out from-wave-600 to-indigo-500 hover:from-wave-500 hover:to-indigo-400 cursor-pointer rounded-b-md checkout focus:outline-none disabled:opacity-25">
                                        <span style="font-size: 20px;">HK</span><p style="font-size: 30px;" class="text-lg">$14,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #ffffff;border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-3 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Annual Support</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-3 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="px-3 mt-1 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Government &amp; Tax Filings</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-2 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2">
                            <a href="#" class="btn btn-success" style="color: #000;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px; opacity: 0.9;">
                                Upgrade now
                            </a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #F3CF5D;border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 pt-7">
                                    <div class="absolute right-0 inline-block mr-6 transform">
                                        <!-- <h2 class="relative z-20 w-full h-full px-2 py-1 text-xs font-bold leading-tight tracking-wide text-center uppercase bg-white border-2 border-wave-400 text-wave-500 rounded">Flexi</h2> -->
                                    </div>
                                </div>

                                <div class="px-10 mt-5 flex justify-center">
                                    <span class="font-mono text-5xl font-bold">Demi</span>
                                </div>

                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500" align="center">Monthly Revenue under HK$50K</p>
                                </div>

                                <div class="relative" style="margin-left: 15px; margin-right: 15px; z-index: 999;">
                                    <div style="margin-bottom: -35px; border-radius: 45px; background-color: #009B9A; box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25)" data-plan="1" class="inline-flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-white transition duration-150 ease-in-out from-wave-600 to-indigo-500 hover:from-wave-500 hover:to-indigo-400 cursor-pointer rounded-b-md checkout focus:outline-none disabled:opacity-25">
                                        <span style="font-size: 20px;">HK</span><p style="font-size: 30px;" class="text-lg">$14,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #ffffff;border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-3 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Annual Support</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-3 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="px-3 mt-1 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Government &amp; Tax Filings</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-2 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2">
                            <a href="#" class="btn btn-success" style="color: #000;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px; opacity: 0.9;">
                                Upgrade now
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Company Secretary Service -->
                <div class="flex justify-center items-center mt-3 d-none">
                    <h2 style="font-size: 24px;">Company Secretary Service Subscription Packages</h2>
                    &emsp;
                    <div class="form-check form-switch" style="box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25); border-radius: 25px;">
                        <input class="form-check-input ml-1" type="checkbox" id="flexSwitchCheckDefault">
                        <label class="form-check-label mr-1" style="font-size: 18px; color: #009B9A;" for="flexSwitchCheckDefault">Annually</label>
                    </div>
                    &emsp;
                    <a href="#" class="btn btn-success" style="color: #FFFFFF;background: #009B9A;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">
                        <svg style="width: 25px;" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 38 38" fill="none">
                            <path d="M26.0308 14.0918C31.7308 14.5826 34.0583 17.5118 34.0583 23.9243V24.1301C34.0583 31.2076 31.2242 34.0418 24.1467 34.0418H13.8392C6.76166 34.0418 3.92749 31.2076 3.92749 24.1301V23.9243C3.92749 17.5593 6.22332 14.6301 11.8283 14.1076" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M19 3.16602V23.5593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M24.3017 20.0293L18.9975 25.3335L13.6934 20.0293" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        &nbsp;
                        Download Invoice
                    </a>
                </div>
                <div class="row flex flex-wrap mx-auto mt-12">
                    <div class="col-xxl-6 offset-xxl-3">
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #F3CF5D;border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 pt-7">
                                    <div class="absolute right-0 inline-block mr-6 transform">
                                        <!-- <h2 class="relative z-20 w-full h-full px-2 py-1 text-xs font-bold leading-tight tracking-wide text-center uppercase bg-white border-2 border-wave-400 text-wave-500 rounded">Flexi</h2> -->
                                    </div>
                                </div>

                                <div class="px-10 mt-5 flex justify-center">
                                    <span class="font-mono text-5xl font-bold">Demi</span>
                                </div>

                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500" align="center">Monthly Revenue under HK$50K</p>
                                </div>

                                <div class="relative" style="margin-left: 15px; margin-right: 15px; z-index: 999;">
                                    <div style="margin-bottom: -35px; border-radius: 45px; background-color: #009B9A; box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25)" data-plan="1" class="inline-flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-white transition duration-150 ease-in-out from-wave-600 to-indigo-500 hover:from-wave-500 hover:to-indigo-400 cursor-pointer rounded-b-md checkout focus:outline-none disabled:opacity-25">
                                        <span style="font-size: 20px;">HK</span><p style="font-size: 30px;" class="text-lg">$14,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #ffffff;border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-3 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Annual Support</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-3 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="px-3 mt-1 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Government &amp; Tax Filings</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-2 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2">
                            <a href="#" class="btn btn-success" disabled style="color: #000;background: #fff;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px; opacity: 0.9;">
                                Current Plan
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Incorporation Service -->
                <div class="flex justify-center items-center mt-3 d-none">
                    <h2 style="font-size: 24px;">Incorporation Packages</h2>
                    &emsp;
                    <a href="#" class="btn btn-success" style="color: #FFFFFF;background: #009B9A;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px;">
                        <svg style="width: 25px;" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 38 38" fill="none">
                            <path d="M26.0308 14.0918C31.7308 14.5826 34.0583 17.5118 34.0583 23.9243V24.1301C34.0583 31.2076 31.2242 34.0418 24.1467 34.0418H13.8392C6.76166 34.0418 3.92749 31.2076 3.92749 24.1301V23.9243C3.92749 17.5593 6.22332 14.6301 11.8283 14.1076" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M19 3.16602V23.5593" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M24.3017 20.0293L18.9975 25.3335L13.6934 20.0293" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        &nbsp;
                        Download Invoice
                    </a>
                </div>
                <div class="row flex flex-wrap mx-auto mt-12">
                    <div class="col">
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #F3CF5D;border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 pt-7">
                                    <div class="absolute right-0 inline-block mr-6 transform">
                                        <!-- <h2 class="relative z-20 w-full h-full px-2 py-1 text-xs font-bold leading-tight tracking-wide text-center uppercase bg-white border-2 border-wave-400 text-wave-500 rounded">Flexi</h2> -->
                                    </div>
                                </div>

                                <div class="px-10 mt-5 flex justify-center">
                                    <span class="font-mono text-5xl font-bold">Demi</span>
                                </div>

                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500" align="center">Monthly Revenue under HK$50K</p>
                                </div>

                                <div class="relative" style="margin-left: 15px; margin-right: 15px; z-index: 999;">
                                    <div style="margin-bottom: -35px; border-radius: 45px; background-color: #009B9A; box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25)" data-plan="1" class="inline-flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-white transition duration-150 ease-in-out from-wave-600 to-indigo-500 hover:from-wave-500 hover:to-indigo-400 cursor-pointer rounded-b-md checkout focus:outline-none disabled:opacity-25">
                                        <span style="font-size: 20px;">HK</span><p style="font-size: 30px;" class="text-lg">$14,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #ffffff;border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Annual Support</p>
                                </div>
                                <div class="relative px-10 pt-0 pb-3 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                                <hr/>
                                <div class="px-10 mt-1 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Optional</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-2 text-gray-700 rounded-b-lg flex justify-center">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                                &emsp;
                                                <span style="font-size: 15px;">HK</span><p style="font-size: 25px;" class="text-lg">$14,000</p>
                                                &emsp;
                                                <div class="form-check form-switch" style="box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25); border-radius: 25px;">
                                                    <input class="form-check-input ml-1" type="checkbox" id="flexSwitchCheckDefault">
                                                </div>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                                &emsp;
                                                <span style="font-size: 15px;">HK</span><p style="font-size: 25px;" class="text-lg">$14,000</p>
                                                &emsp;
                                                <div class="form-check form-switch" style="box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25); border-radius: 25px;">
                                                    <input class="form-check-input ml-1" type="checkbox" id="flexSwitchCheckDefault">
                                                </div>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2">
                            <a href="#" class="btn btn-success" disabled style="color: #000;background: #fff;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px; opacity: 0.9;">
                                Current Plan
                            </a>
                        </div>
                    </div>
                    <div class="col">
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #F3CF5D;border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 pt-7">
                                    <div class="absolute right-0 inline-block mr-6 transform">
                                        <!-- <h2 class="relative z-20 w-full h-full px-2 py-1 text-xs font-bold leading-tight tracking-wide text-center uppercase bg-white border-2 border-wave-400 text-wave-500 rounded">Flexi</h2> -->
                                    </div>
                                </div>

                                <div class="px-10 mt-5 flex justify-center">
                                    <span class="font-mono text-5xl font-bold">Demi</span>
                                </div>

                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500" align="center">Monthly Revenue under HK$50K</p>
                                </div>

                                <div class="relative" style="margin-left: 15px; margin-right: 15px; z-index: 999;">
                                    <div style="margin-bottom: -35px; border-radius: 45px; background-color: #009B9A; box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25)" data-plan="1" class="inline-flex items-center justify-center w-full px-4 py-4 text-base font-semibold text-white transition duration-150 ease-in-out from-wave-600 to-indigo-500 hover:from-wave-500 hover:to-indigo-400 cursor-pointer rounded-b-md checkout focus:outline-none disabled:opacity-25">
                                        <span style="font-size: 20px;">HK</span><p style="font-size: 30px;" class="text-lg">$14,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full px-0 mx-auto mb-6 lg:px-3 lg:mb-0">
                            <div style="background-color: #ffffff;border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;" class="relative flex flex-col mb-10 border border-gray-200 rounded-lg shadow-xl border-b-none sm:mb-0">
                                <div class="px-10 mt-10 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Annual Support</p>
                                </div>
                                <div class="relative px-10 pt-0 pb-3 text-gray-700 rounded-b-lg">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <svg style="color: #F3CF5D;" class="w-4 h-4 mr-3 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                                    <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"></path>
                                                </svg>

                                                <span>
                                                    Annual Review by Accountant
                                                </span>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                                <hr/>
                                <div class="px-10 mt-1 pb-4 justify-center">
                                    <p class="text-xl text-black-500">Optional</p>
                                </div>
                                <div class="relative px-3 pt-0 pb-2 text-gray-700 rounded-b-lg flex justify-center">
                                    <ul class="flex flex-col">
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                                &emsp;
                                                <span style="font-size: 15px;">HK</span><p style="font-size: 25px;" class="text-lg">$14,000</p>
                                                &emsp;
                                                <div class="form-check form-switch" style="box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25); border-radius: 25px;">
                                                    <input class="form-check-input ml-1" type="checkbox" id="flexSwitchCheckDefault">
                                                </div>
                                            </span>
                                        </li>
                                        <li class="relative">
                                            <span class="flex items-center">
                                                <span>
                                                    Unaudited Tax Filings
                                                </span>
                                                &emsp;
                                                <span style="font-size: 15px;">HK</span><p style="font-size: 25px;" class="text-lg">$14,000</p>
                                                &emsp;
                                                <div class="form-check form-switch" style="box-shadow: 0px 4px 8px 0px rgba(21, 120, 84, 0.25); border-radius: 25px;">
                                                    <input class="form-check-input ml-1" type="checkbox" id="flexSwitchCheckDefault">
                                                </div>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="flex justify-center mt-2">
                            <a href="#" class="btn btn-success" style="color: #000;background: #F3CF5D;font-size: 19px;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;width: 200px;height: 50px; opacity: 0.9;">
                                Upgrade now
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- List Properties Modal --}}
<div class="modal fade custom-modal style2" id="listPropertiesModal" tabindex="-1" aria-labelledby="listPropertiesModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg modal-dialog-centered">
		<div class="modal-content mx-auto">
			<div class="modal-body p-0">
				<p class="modal-title">Properties</p>
				<div class="col">
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-3 offset-xxl-0 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Document Name:</h1>
                        </div>
                        <div class="col" style="width: 765px;">
                            Copy of DCE Ltd.CI.jpg
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Original Name:</h1>
                        </div>
                        <div class="col">
                            DCE Ltd.CI.jpg
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Document ID:</h1>
                        </div>
                        <div class="col">
                            202305151356-5
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Document Type:</h1>
                        </div>
                        <div class="col">
                            Company Secretary
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Document Category:</h1>
                        </div>
                        <div class="col">
                            CI
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Status:</h1>
                        </div>
                        <div class="col">
                            Completed
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Last status timestamp:</h1>
                        </div>
                        <div class="col">
                            20230515-14:43
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col">
                            <hr class="new2">
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Company Name:</h1>
                        </div>
                        <div class="col">
                            DCE Food Delivery Ltd
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Company ID:</h1>
                        </div>
                        <div class="col">
                            202302
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Uploaded on:</h1>
                        </div>
                        <div class="col">
                            2023/05/14 - 13:36
                        </div>
                    </div>
                    <div class="row" style="margin: 0px;margin-top: 20px;">
                        <div class="col-xxl-5 d-xxl-flex align-items-xxl-center" style="width: 250px;">
                            <h1 style="color: rgb(0,0,0);font-size: 20px;">Uploaded by:</h1>
                        </div>
                        <div class="col">
                            Mary Chan
                        </div>
                    </div>
                    <div class="row flex justify-center items-center" style="margin-top: 20px;">
                        <button class="btn" style="width: 200px;background: #9B0025;color: rgb(255,255,255);border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;" type="button" data-bs-dismiss="modal">Back</button>
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>

@endsection