PNG  IHDR pHYs   OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, !{kּ> H3Q5 B.@ $pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_F@8N ' p @8N@8}' p '#@8N@8N pQ9p!i~}|6-ӪG` VP.@*j>[ K^<֐Z]@8N'KQ<Q(`s" 'hgpKB`R@Dqj '  'P$a ( `D$Na L?u80e J,K˷NI'0eݷ(NI'؀ 2ipIIKp`:O'`ʤxB8Ѥx Ѥx $ $P6 :vRNb 'p,>NB 'P]-->P T+*^h& p '‰a ‰ (ĵt#u33;Nt̵'ޯ; [3W ~]0KH1q@8]O2]3*̧7# *p>us p _6]/}-4|t'|Smx= DoʾM×M_8!)6lq':l7!|4} '\ne t!=hnLn (~Dn\+‰_4k)0e@OhZ`F `.m1} 'vp{F`ON7Srx 'D˸nV`><;yMx!IS钦OM)Ե٥x 'DSD6bS8!" ODz#R >S8!7ّxEh0m$MIPHi$IvS8IN$I p$O8I,sk&I)$IN$Hi$I^Ah.p$MIN$IR8I·N "IF9Ah0m$MIN$IR8IN$I 3jIU;kO$ɳN$+ q.x* tEXtComment

Viewing File: /home/u403625155/domains/hivereserveinc.com/public_html/dashboard/settings.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Setting - BancCo</title>
    <link rel="stylesheet" href="./assets/css/font-awesome-all.min.css" />
    <link rel="stylesheet" href="./assets/css/slick.css" />
    <link rel="stylesheet" href="./assets/css/aos.css" />
    <link rel="stylesheet" href="./assets/css/output.css" />
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <!-- layout start -->
    <div class="layout-wrapper active w-full">
      <div class="relative flex w-full">
        <aside
          class="sidebar-wrapper fixed top-0 z-30 block h-full w-[308px] bg-white dark:bg-darkblack-600 sm:hidden xl:block"
        >
          <div
            class="sidebar-header relative z-30 flex h-[108px] w-full items-center border-b border-r border-b-[#F7F7F7] border-r-[#F7F7F7] pl-[50px] dark:border-darkblack-400"
          >
            <a href="index.html">
              <img
                src="./assets/images/logo/logo-color.svg"
                class="block dark:hidden"
                alt="logo"
              />
              <img
                src="./assets/images/logo/logo-white.svg"
                class="hidden dark:block"
                alt="logo"
              />
            </a>
            <button
              type="button"
              class="drawer-btn absolute right-0 top-auto"
              title="Ctrl+b"
            >
              <span>
                <svg
                  width="16"
                  height="40"
                  viewBox="0 0 16 40"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M0 10C0 4.47715 4.47715 0 10 0H16V40H10C4.47715 40 0 35.5228 0 30V10Z"
                    fill="#EB292C"
                  />
                  <path
                    d="M10 15L6 20.0049L10 25.0098"
                    stroke="#ffffff"
                    stroke-width="1.2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="sidebar-body overflow-style-none relative z-30 h-screen w-full overflow-y-scroll pb-[200px] pl-12 pt-[14px]"
          >
            <div class="nav-wrapper mb-9 pr-[50px]">
              <div class="item-wrapper mb-5">
                <h4
                  class="border-b border-bgray-200 text-sm font-medium leading-7 text-bgray-700 dark:border-darkblack-400 dark:text-bgray-50"
                >
                  Menu
                </h4>
                <ul class="mt-2.5">
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="index.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="18"
                              height="21"
                              viewBox="0 0 18 21"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                class="path-1"
                                d="M0 8.84719C0 7.99027 0.366443 7.17426 1.00691 6.60496L6.34255 1.86217C7.85809 0.515019 10.1419 0.515019 11.6575 1.86217L16.9931 6.60496C17.6336 7.17426 18 7.99027 18 8.84719V17C18 19.2091 16.2091 21 14 21H4C1.79086 21 0 19.2091 0 17V8.84719Z"
                                fill="#1A202C"
                              />
                              <path
                                class="path-2"
                                d="M5 17C5 14.7909 6.79086 13 9 13C11.2091 13 13 14.7909 13 17V21H5V17Z"
                                fill="#EB292C"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Dashboards</span
                          >
                        </div>
                        <span>
                          <svg
                            width="6"
                            height="12"
                            viewBox="0 0 6 12"
                            fill="none"
                            class="fill-current"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              fill-rule="evenodd"
                              clip-rule="evenodd"
                              fill="currentColor"
                              d="M0.531506 0.414376C0.20806 0.673133 0.155619 1.1451 0.414376 1.46855L4.03956 6.00003L0.414376 10.5315C0.155618 10.855 0.208059 11.3269 0.531506 11.5857C0.854952 11.8444 1.32692 11.792 1.58568 11.4685L5.58568 6.46855C5.80481 6.19464 5.80481 5.80542 5.58568 5.53151L1.58568 0.531506C1.32692 0.20806 0.854953 0.155619 0.531506 0.414376Z"
                            />
                          </svg>
                        </span>
                      </div>
                    </a>
                    <ul
                      class="sub-menu ml-2.5 mt-[22px] border-l border-success-100 pl-5"
                    >
                      <li>
                        <a
                          href="index.html"
                          class="text-md inline-block py-1.5 font-medium text-bgray-600 transition-all hover:text-bgray-800 dark:text-bgray-50 hover:dark:text-success-300"
                          >Dashboard Default</a
                        >
                      </li>
                      <li>
                        <a
                          href="index-2.html"
                          class="text-md inline-block py-1.5 font-medium text-bgray-600 transition-all hover:text-bgray-800 dark:text-bgray-50 hover:dark:text-success-300"
                          >Dashboard Two</a
                        >
                      </li>
                      <li>
                        <a
                          href="statistics.html"
                          class="text-md inline-block py-1.5 font-medium text-bgray-600 transition-all hover:text-bgray-800 dark:text-bgray-50 hover:dark:text-success-300"
                          >Statistics</a
                        >
                      </li>
                      <li>
                        <a
                          href="analytics.html"
                          class="text-md inline-block py-1.5 font-medium text-bgray-600 transition-all hover:text-bgray-800 dark:text-bgray-50 hover:dark:text-success-300"
                          >Analytics</a
                        >
                      </li>
                      <li>
                        <a
                          href="home.html"
                          class="text-md inline-block py-1.5 font-medium text-bgray-600 transition-all hover:text-bgray-800 dark:text-bgray-50 hover:dark:text-success-300"
                          >Home</a
                        >
                      </li>
                    </ul>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="transaction.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="18"
                              height="20"
                              viewBox="0 0 18 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M18 16V6C18 3.79086 16.2091 2 14 2H4C1.79086 2 0 3.79086 0 6V16C0 18.2091 1.79086 20 4 20H14C16.2091 20 18 18.2091 18 16Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.25 8C4.25 7.58579 4.58579 7.25 5 7.25H13C13.4142 7.25 13.75 7.58579 13.75 8C13.75 8.41421 13.4142 8.75 13 8.75H5C4.58579 8.75 4.25 8.41421 4.25 8Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.25 12C4.25 11.5858 4.58579 11.25 5 11.25H13C13.4142 11.25 13.75 11.5858 13.75 12C13.75 12.4142 13.4142 12.75 13 12.75H5C4.58579 12.75 4.25 12.4142 4.25 12Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.25 16C4.25 15.5858 4.58579 15.25 5 15.25H9C9.41421 15.25 9.75 15.5858 9.75 16C9.75 16.4142 9.41421 16.75 9 16.75H5C4.58579 16.75 4.25 16.4142 4.25 16Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M11 0H7C5.89543 0 5 0.895431 5 2C5 3.10457 5.89543 4 7 4H11C12.1046 4 13 3.10457 13 2C13 0.895431 12.1046 0 11 0Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Transaction</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="statistics.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M18 11C18 15.9706 13.9706 20 9 20C4.02944 20 0 15.9706 0 11C0 6.02944 4.02944 2 9 2C13.9706 2 18 6.02944 18 11Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M19.8025 8.01277C19.0104 4.08419 15.9158 0.989557 11.9872 0.197453C10.9045 -0.0208635 10 0.89543 10 2V8C10 9.10457 10.8954 10 12 10H18C19.1046 10 20.0209 9.09555 19.8025 8.01277Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Statistics</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="analytics.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M14 9C12.8954 9 12 9.89543 12 11L12 13C12 14.1046 12.8954 15 14 15C15.1046 15 16 14.1046 16 13V11C16 9.89543 15.1046 9 14 9Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M6 5C4.89543 5 4 5.89543 4 7L4 13C4 14.1046 4.89543 15 6 15C7.10457 15 8 14.1046 8 13L8 7C8 5.89543 7.10457 5 6 5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Analytics</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="my-wallet.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="18"
                              viewBox="0 0 20 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20 4C20 1.79086 18.2091 0 16 0H4C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H16C18.2091 18 20 16.2091 20 14V4Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M6 9C6 7.34315 4.65685 6 3 6H0V12H3C4.65685 12 6 10.6569 6 9Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >My Wallet</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="messages.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M11.8889 22C13.4278 22 14.737 21.0724 15.2222 19.7778H8.55554C9.04075 21.0724 10.35 22 11.8889 22Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M13.7662 2.83781C13.3045 2.32351 12.6345 2 11.8889 2C10.4959 2 9.36673 3.12921 9.36673 4.52216V4.6374C6.98629 5.45244 5.224 7.38959 4.95607 9.75021L4.4592 14.1281C4.36971 14.9165 4.03716 15.6684 3.49754 16.3024C2.27862 17.7343 3.43826 19.7778 5.46979 19.7778H18.308C20.3395 19.7778 21.4992 17.7343 20.2802 16.3024C19.7406 15.6684 19.4081 14.9165 19.3186 14.1281L18.8217 9.75021C18.8148 9.68916 18.8068 9.6284 18.7979 9.56793C18.3712 9.70421 17.9164 9.77778 17.4444 9.77778C14.9898 9.77778 13 7.78793 13 5.33333C13 4.40827 13.2826 3.54922 13.7662 2.83781Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <circle
                                cx="17.4444"
                                cy="5.33333"
                                r="3.33333"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Inbox</span
                          >
                        </div>
                        <div class="flex items-center space-x-2.5">
                          <!--edit-->
                          <span>
                            <svg
                              width="10"
                              height="11"
                              viewBox="0 0 10 11"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M0.879751 10.0038L3.16823 9.67657C3.49833 9.62937 3.80424 9.47626 4.04003 9.24024L8.45886 4.81709C8.45886 4.81709 7.36911 4.81709 6.27936 3.72628C5.18961 2.63546 5.18961 1.54465 5.18961 1.54465L0.770776 5.9678C0.534986 6.20382 0.382033 6.51002 0.334876 6.84045L0.00795056 9.13116C-0.0646994 9.64021 0.371201 10.0765 0.879751 10.0038Z"
                                fill="#1A202C"
                              />
                              <path
                                opacity="0.4"
                                d="M9.5487 1.5446L8.45895 0.453784C7.8571 -0.148657 6.8813 -0.148657 6.27945 0.453784L5.1897 1.5446C5.1897 1.5446 5.1897 2.63542 6.27945 3.72623C7.3692 4.81705 8.45895 4.81705 8.45895 4.81705L9.5487 3.72623C10.1506 3.12379 10.1506 2.14704 9.5487 1.5446Z"
                                fill="#1A202C"
                              />
                            </svg>
                          </span>
                          <!--edit-->
                          <div>
                            <img
                              src="./assets/images/avatar/profile-xs.png"
                              alt="profile"
                            />
                          </div>
                          <!--counter-->
                          <div
                            class="flex h-5 w-5 items-center justify-center rounded-full bg-success-300"
                          >
                            <span class="text-[10px] font-semibold text-white"
                              >5</span
                            >
                          </div>
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="integrations.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M1.57666 3.61499C1.57666 2.51042 2.47209 1.61499 3.57666 1.61499H8.5C9.60456 1.61499 10.5 2.51042 10.5 3.61499V8.53833C10.5 9.64289 9.60456 10.5383 8.49999 10.5383H3.57666C2.47209 10.5383 1.57666 9.64289 1.57666 8.53832V3.61499Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M13.5 15.5383C13.5 14.4338 14.3954 13.5383 15.5 13.5383H20.4233C21.5279 13.5383 22.4233 14.4338 22.4233 15.5383V20.4617C22.4233 21.5662 21.5279 22.4617 20.4233 22.4617H15.5C14.3954 22.4617 13.5 21.5662 13.5 20.4617V15.5383Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <circle
                                cx="6.03832"
                                cy="18"
                                r="4.46166"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M18 2C18.4142 2 18.75 2.33579 18.75 2.75V5.25H21.25C21.6642 5.25 22 5.58579 22 6C22 6.41421 21.6642 6.75 21.25 6.75H18.75V9.25C18.75 9.66421 18.4142 10 18 10C17.5858 10 17.25 9.66421 17.25 9.25V6.75H14.75C14.3358 6.75 14 6.41421 14 6C14 5.58579 14.3358 5.25 14.75 5.25H17.25V2.75C17.25 2.33579 17.5858 2 18 2Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Integrations</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="users.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <ellipse
                                cx="11.7778"
                                cy="17.5555"
                                rx="7.77778"
                                ry="4.44444"
                                class="path-1"
                                fill="#1A202C"
                              />
                              <circle
                                class="path-2"
                                cx="11.7778"
                                cy="6.44444"
                                r="4.44444"
                                fill="#EB292C"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >User</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="calender.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="18"
                              height="21"
                              viewBox="0 0 18 21"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M0 6.5C0 4.29086 1.79086 2.5 4 2.5H14C16.2091 2.5 18 4.29086 18 6.5V8V17C18 19.2091 16.2091 21 14 21H4C1.79086 21 0 19.2091 0 17V8V6.5Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M14 2.5H4C1.79086 2.5 0 4.29086 0 6.5V8H18V6.5C18 4.29086 16.2091 2.5 14 2.5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M5 0.25C5.41421 0.25 5.75 0.585786 5.75 1V4C5.75 4.41421 5.41421 4.75 5 4.75C4.58579 4.75 4.25 4.41421 4.25 4V1C4.25 0.585786 4.58579 0.25 5 0.25ZM13 0.25C13.4142 0.25 13.75 0.585786 13.75 1V4C13.75 4.41421 13.4142 4.75 13 4.75C12.5858 4.75 12.25 4.41421 12.25 4V1C12.25 0.585786 12.5858 0.25 13 0.25Z"
                                fill="#1A202C"
                                class="path-2"
                              />
                              <circle cx="9" cy="14" r="1" fill="#EB292C" />
                              <circle
                                cx="13"
                                cy="14"
                                r="1"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <circle
                                cx="5"
                                cy="14"
                                r="1"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Calender</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="history.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="18"
                              height="21"
                              viewBox="0 0 18 21"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M17.5 12.5C17.5 17.1944 13.6944 21 9 21C4.30558 21 0.5 17.1944 0.5 12.5C0.5 7.80558 4.30558 4 9 4C13.6944 4 17.5 7.80558 17.5 12.5Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M8.99995 1.75C8.02962 1.75 7.09197 1.88462 6.20407 2.13575C5.80549 2.24849 5.39099 2.01676 5.27826 1.61818C5.16553 1.21961 5.39725 0.805108 5.79583 0.692376C6.81525 0.404046 7.89023 0.25 8.99995 0.25C10.1097 0.25 11.1846 0.404046 12.2041 0.692376C12.6026 0.805108 12.8344 1.21961 12.7216 1.61818C12.6089 2.01676 12.1944 2.24849 11.7958 2.13575C10.9079 1.88462 9.97028 1.75 8.99995 1.75Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M11 13C11 14.1046 10.1046 15 9 15C7.89543 15 7 14.1046 7 13C7 11.8954 7.89543 11 9 11C10.1046 11 11 11.8954 11 13Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M9 7.25C9.41421 7.25 9.75 7.58579 9.75 8V12C9.75 12.4142 9.41421 12.75 9 12.75C8.58579 12.75 8.25 12.4142 8.25 12V8C8.25 7.58579 8.58579 7.25 9 7.25Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >History</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="item-wrapper mb-5">
                <h4
                  class="border-b border-bgray-200 text-sm font-medium leading-7 text-bgray-700 dark:border-darkblack-400 dark:text-bgray-50"
                >
                  Help
                </h4>
                <ul class="mt-2.5">
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="support-ticket.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="18"
                              viewBox="0 0 20 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M5 2V11C5 12.1046 5.89543 13 7 13H18C19.1046 13 20 12.1046 20 11V2C20 0.895431 19.1046 0 18 0H7C5.89543 0 5 0.89543 5 2Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M0 15C0 13.8954 0.895431 13 2 13H2.17157C2.70201 13 3.21071 13.2107 3.58579 13.5858C4.36683 14.3668 5.63317 14.3668 6.41421 13.5858C6.78929 13.2107 7.29799 13 7.82843 13H8C9.10457 13 10 13.8954 10 15V16C10 17.1046 9.10457 18 8 18H2C0.89543 18 0 17.1046 0 16V15Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M7.5 9.5C7.5 10.8807 6.38071 12 5 12C3.61929 12 2.5 10.8807 2.5 9.5C2.5 8.11929 3.61929 7 5 7C6.38071 7 7.5 8.11929 7.5 9.5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M8.25 4.5C8.25 4.08579 8.58579 3.75 9 3.75L16 3.75C16.4142 3.75 16.75 4.08579 16.75 4.5C16.75 4.91421 16.4142 5.25 16 5.25L9 5.25C8.58579 5.25 8.25 4.91421 8.25 4.5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M11.25 8.5C11.25 8.08579 11.5858 7.75 12 7.75L16 7.75C16.4142 7.75 16.75 8.08579 16.75 8.5C16.75 8.91421 16.4142 9.25 16 9.25L12 9.25C11.5858 9.25 11.25 8.91421 11.25 8.5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Support</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="settings.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M13.0606 2H10.9394C9.76787 2 8.81817 2.89543 8.81817 4C8.81817 5.26401 7.46574 6.06763 6.35556 5.4633L6.24279 5.40192C5.22823 4.84963 3.93091 5.17738 3.34515 6.13397L2.28455 7.86602C1.69879 8.8226 2.0464 10.0458 3.06097 10.5981C4.17168 11.2027 4.17168 12.7973 3.06096 13.4019C2.0464 13.9542 1.69879 15.1774 2.28454 16.134L3.34515 17.866C3.93091 18.8226 5.22823 19.1504 6.24279 18.5981L6.35555 18.5367C7.46574 17.9324 8.81817 18.736 8.81817 20C8.81817 21.1046 9.76787 22 10.9394 22H13.0606C14.2321 22 15.1818 21.1046 15.1818 20C15.1818 18.736 16.5343 17.9324 17.6445 18.5367L17.7572 18.5981C18.7718 19.1504 20.0691 18.8226 20.6548 17.866L21.7155 16.134C22.3012 15.1774 21.9536 13.9542 20.939 13.4019C19.8283 12.7973 19.8283 11.2027 20.939 10.5981C21.9536 10.0458 22.3012 8.82262 21.7155 7.86603L20.6548 6.13398C20.0691 5.1774 18.7718 4.84965 17.7572 5.40193L17.6445 5.46331C16.5343 6.06765 15.1818 5.26402 15.1818 4C15.1818 2.89543 14.2321 2 13.0606 2Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Setting</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="item-wrapper mb-5">
                <h4
                  class="border-b border-bgray-200 text-sm font-medium leading-7 text-bgray-700 dark:border-darkblack-400 dark:text-bgray-50"
                >
                  Others
                </h4>
                <ul class="mt-2.5">
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="signin.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <ellipse
                                cx="11.7778"
                                cy="17.5555"
                                rx="7.77778"
                                ry="4.44444"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <circle
                                cx="11.7778"
                                cy="6.44444"
                                r="4.44444"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Signin</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="signup.html">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <ellipse
                                cx="11.7778"
                                cy="17.5555"
                                rx="7.77778"
                                ry="4.44444"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <circle
                                cx="11.7778"
                                cy="6.44444"
                                r="4.44444"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Signup</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="coming-soon.html">
                      <div class="flex items-center space-x-2.5">
                        <span class="item-ico">
                          <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M18.4 17.2C19.8833 19.1777 18.4721 22 16 22L8 22C5.52786 22 4.11672 19.1777 5.6 17.2L8.15 13.8C8.95 12.7333 8.95 11.2667 8.15 10.2L5.6 6.8C4.11672 4.82229 5.52787 2 8 2L16 2C18.4721 2 19.8833 4.82229 18.4 6.8L15.85 10.2C15.05 11.2667 15.05 12.7333 15.85 13.8L18.4 17.2Z"
                              fill="#1A202C"
                              class="path-1"
                            />
                            <path
                              d="M12.7809 9.02391C12.3805 9.52432 11.6195 9.52432 11.2191 9.02391L9.29976 6.6247C8.77595 5.96993 9.24212 5 10.0806 5L13.9194 5C14.7579 5 15.2241 5.96993 14.7002 6.6247L12.7809 9.02391Z"
                              fill="#EB292C"
                              class="path-2"
                            />
                          </svg>
                        </span>
                        <span class="item-text text-lg font-medium leading-none"
                          >Coming Soon</span
                        >
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="404.html">
                      <div class="flex items-center space-x-2.5">
                        <span class="item-ico">
                          <svg
                            width="20"
                            height="20"
                            viewBox="0 0 20 20"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle
                              cx="10"
                              cy="10"
                              r="10"
                              fill="#1A202C"
                              class="path-1"
                            />
                            <path
                              d="M9 15C9 14.4477 9.44772 14 10 14C10.5523 14 11 14.4477 11 15C11 15.5523 10.5523 16 10 16C9.44772 16 9 15.5523 9 15Z"
                              fill="#EB292C"
                              class="path-2"
                            />
                            <path
                              fill-rule="evenodd"
                              clip-rule="evenodd"
                              d="M10 12.75C9.58579 12.75 9.25 12.4142 9.25 12L9.25 5C9.25 4.58579 9.58579 4.25 10 4.25C10.4142 4.25 10.75 4.58579 10.75 5L10.75 12C10.75 12.4142 10.4142 12.75 10 12.75Z"
                              fill="#EB292C"
                              class="path-2"
                            />
                          </svg>
                        </span>
                        <span class="item-text text-lg font-medium leading-none"
                          >404</span
                        >
                      </div>
                    </a>
                  </li>
                  <li class="item py-[11px] text-bgray-900 dark:text-white">
                    <a href="#">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2.5">
                          <span class="item-ico">
                            <svg
                              width="21"
                              height="18"
                              viewBox="0 0 21 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M17.1464 10.4394C16.8536 10.7323 16.8536 11.2072 17.1464 11.5001C17.4393 11.7929 17.9142 11.7929 18.2071 11.5001L19.5 10.2072C20.1834 9.52375 20.1834 8.41571 19.5 7.73229L18.2071 6.4394C17.9142 6.1465 17.4393 6.1465 17.1464 6.4394C16.8536 6.73229 16.8536 7.20716 17.1464 7.50006L17.8661 8.21973H11.75C11.3358 8.21973 11 8.55551 11 8.96973C11 9.38394 11.3358 9.71973 11.75 9.71973H17.8661L17.1464 10.4394Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.75 17.75H12C14.6234 17.75 16.75 15.6234 16.75 13C16.75 12.5858 16.4142 12.25 16 12.25C15.5858 12.25 15.25 12.5858 15.25 13C15.25 14.7949 13.7949 16.25 12 16.25H8.21412C7.34758 17.1733 6.11614 17.75 4.75 17.75ZM8.21412 1.75H12C13.7949 1.75 15.25 3.20507 15.25 5C15.25 5.41421 15.5858 5.75 16 5.75C16.4142 5.75 16.75 5.41421 16.75 5C16.75 2.37665 14.6234 0.25 12 0.25H4.75C6.11614 0.25 7.34758 0.82673 8.21412 1.75Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M0 5C0 2.37665 2.12665 0.25 4.75 0.25C7.37335 0.25 9.5 2.37665 9.5 5V13C9.5 15.6234 7.37335 17.75 4.75 17.75C2.12665 17.75 0 15.6234 0 13V5Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                            </svg>
                          </span>
                          <span
                            class="item-text text-lg font-medium leading-none"
                            >Logout</span
                          >
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="upgrade-wrapper mb-[26px] h-[172px] w-full pr-[24px]">
              <div
                class="upgrade-banner relative h-full w-full rounded-lg"
                style="background-image: url(./assets/images/bg/upgrade-bg.png)"
              >
                <div
                  style="left: calc(50% - 20px); top: -20px"
                  class="absolute flex h-10 w-10 items-center justify-center rounded-full border border-white bg-success-300"
                >
                  <span>
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M14 12.75C14 11.7835 13.1046 11 12 11C10.8954 11 10 11.7835 10 12.75C10 13.7165 10.8954 14.5 12 14.5C13.1046 14.5 14 15.2835 14 16.25C14 17.2165 13.1046 18 12 18C10.8954 18 10 17.2165 10 16.25"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linecap="round"
                      />
                      <path
                        d="M12 9.5V11"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M12 18V19.5"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M5.63246 11.1026C6.44914 8.65258 8.74197 7 11.3246 7H12.6754C15.258 7 17.5509 8.65258 18.3675 11.1026L19.3675 14.1026C20.6626 17.9878 17.7708 22 13.6754 22H10.3246C6.22921 22 3.33739 17.9878 4.63246 14.1026L5.63246 11.1026Z"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M14.0859 7L9.91411 7L8.51303 5.39296C7.13959 3.81763 8.74185 1.46298 10.7471 2.10985L11.6748 2.40914C11.8861 2.47728 12.1139 2.47728 12.3252 2.40914L13.2529 2.10985C15.2582 1.46298 16.8604 3.81763 15.487 5.39296L14.0859 7Z"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </span>
                </div>
                <h1 class="mb-2 pt-8 text-center text-xl font-bold text-white">
                  Unlimited Cashback
                </h1>
                <p
                  class="mb-2 px-7 text-center text-sm leading-5 text-white opacity-[0.5]"
                >
                  Instant 2% back on all your spend to your account.
                </p>
                <div class="flex justify-center">
                  <a href="#">
                    <div
                      class="flex h-[36px] w-[134px] justify-center rounded-lg bg-success-300 transition duration-300 ease-in-out hover:bg-success-400"
                    >
                      <div class="flex items-center space-x-1.5">
                        <span class="text-sm font-semibold text-white"
                          >Upgrade Now</span
                        >
                        <span>
                          <svg
                            width="12"
                            height="8"
                            viewBox="0 0 12 8"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M1.33301 4H10.6663"
                              stroke="white"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                            <path
                              d="M8 6.66667L10.6667 4"
                              stroke="white"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                            <path
                              d="M8 1.33325L10.6667 3.99992"
                              stroke="white"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                          </svg>
                        </span>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="copy-write-text">
              <p class="text-sm text-[#969BA0]">© 2024 All Rights Reserved</p>
              <p class="text-sm font-medium text-bgray-700">
                Made with ❤️ by
                <a
                  href="#"
                  target="_blank"
                  class="border-b font-semibold hover:text-blue-600"
                  >QuomodoTheme</a
                >
              </p>
            </div>
          </div>
        </aside>
        <div
          style="z-index: 25"
          class="aside-overlay fixed left-0 top-0 block h-full w-full bg-black bg-opacity-30 sm:hidden"
        ></div>
        <aside class="relative hidden w-[96px] bg-white dark:bg-black sm:block">
          <div class="sidebar-wrapper-collapse relative top-0 z-30 w-full">
            <div
              class="sidebar-header sticky top-0 z-20 flex h-[108px] w-full items-center justify-center border-b border-r border-b-[#F7F7F7] border-r-[#F7F7F7] bg-white dark:border-darkblack-500 dark:bg-darkblack-600"
            >
              <a href="index.html">
                <img
                  src="./assets/images/logo/logo-short.svg"
                  class="block dark:hidden"
                  alt="logo"
                />
                <img
                  src="./assets/images/logo/logo-short-white.svg"
                  class="hidden dark:block"
                  alt="logo"
                />
              </a>
            </div>
            <div class="sidebar-body w-full pt-[14px]">
              <div class="flex flex-col items-center">
                <div class="nav-wrapper mb-[36px]">
                  <div class="item-wrapper mb-5">
                    <ul
                      class="mt-2.5 flex flex-col items-center justify-center"
                    >
                      <li class="item px-[43px] py-[11px]">
                        <a href="index.html">
                          <span class="item-ico">
                            <svg
                              width="18"
                              height="21"
                              viewBox="0 0 18 21"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                class="path-1"
                                d="M0 8.84719C0 7.99027 0.366443 7.17426 1.00691 6.60496L6.34255 1.86217C7.85809 0.515019 10.1419 0.515019 11.6575 1.86217L16.9931 6.60496C17.6336 7.17426 18 7.99027 18 8.84719V17C18 19.2091 16.2091 21 14 21H4C1.79086 21 0 19.2091 0 17V8.84719Z"
                                fill="#1A202C"
                              />
                              <path
                                class="path-2"
                                d="M5 17C5 14.7909 6.79086 13 9 13C11.2091 13 13 14.7909 13 17V21H5V17Z"
                                fill="#EB292C"
                              />
                            </svg>
                          </span>
                        </a>
                        <ul
                          class="sub-menu min-w-[200px] rounded-lg border-l border-success-100 bg-white px-5 py-2 shadow-lg"
                        >
                          <li>
                            <a
                              href="index-2.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Dashboard Two</a
                            >
                          </li>
                          <li>
                            <a
                              href="messages.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Inbox</a
                            >
                          </li>
                          <li>
                            <a
                              href="integrations.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Integrations</a
                            >
                          </li>
                          <li>
                            <a
                              href="home.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Home</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="transaction.html">
                          <span class="item-ico">
                            <svg
                              width="18"
                              height="20"
                              viewBox="0 0 18 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M18 16V6C18 3.79086 16.2091 2 14 2H4C1.79086 2 0 3.79086 0 6V16C0 18.2091 1.79086 20 4 20H14C16.2091 20 18 18.2091 18 16Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.25 8C4.25 7.58579 4.58579 7.25 5 7.25H13C13.4142 7.25 13.75 7.58579 13.75 8C13.75 8.41421 13.4142 8.75 13 8.75H5C4.58579 8.75 4.25 8.41421 4.25 8Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.25 12C4.25 11.5858 4.58579 11.25 5 11.25H13C13.4142 11.25 13.75 11.5858 13.75 12C13.75 12.4142 13.4142 12.75 13 12.75H5C4.58579 12.75 4.25 12.4142 4.25 12Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.25 16C4.25 15.5858 4.58579 15.25 5 15.25H9C9.41421 15.25 9.75 15.5858 9.75 16C9.75 16.4142 9.41421 16.75 9 16.75H5C4.58579 16.75 4.25 16.4142 4.25 16Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M11 0H7C5.89543 0 5 0.895431 5 2C5 3.10457 5.89543 4 7 4H11C12.1046 4 13 3.10457 13 2C13 0.895431 12.1046 0 11 0Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="statistics.html">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M18 11C18 15.9706 13.9706 20 9 20C4.02944 20 0 15.9706 0 11C0 6.02944 4.02944 2 9 2C13.9706 2 18 6.02944 18 11Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M19.8025 8.01277C19.0104 4.08419 15.9158 0.989557 11.9872 0.197453C10.9045 -0.0208635 10 0.89543 10 2V8C10 9.10457 10.8954 10 12 10H18C19.1046 10 20.0209 9.09555 19.8025 8.01277Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                        <ul
                          class="sub-menu min-w-[200px] rounded-lg border-l border-success-100 bg-white px-5 py-2 shadow-lg"
                        >
                          <li>
                            <a
                              href="analytics.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Analytics</a
                            >
                          </li>
                          <li>
                            <a
                              href="messages.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Inbox</a
                            >
                          </li>
                          <li>
                            <a
                              href="integrations.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Integrations</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="analytics.html">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 20 20"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M14 9C12.8954 9 12 9.89543 12 11L12 13C12 14.1046 12.8954 15 14 15C15.1046 15 16 14.1046 16 13V11C16 9.89543 15.1046 9 14 9Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M6 5C4.89543 5 4 5.89543 4 7L4 13C4 14.1046 4.89543 15 6 15C7.10457 15 8 14.1046 8 13L8 7C8 5.89543 7.10457 5 6 5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="my-wallet.html">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="18"
                              viewBox="0 0 20 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M20 4C20 1.79086 18.2091 0 16 0H4C1.79086 0 0 1.79086 0 4V14C0 16.2091 1.79086 18 4 18H16C18.2091 18 20 16.2091 20 14V4Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M6 9C6 7.34315 4.65685 6 3 6H0V12H3C4.65685 12 6 10.6569 6 9Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="messages.html">
                          <span class="item-ico">
                            <svg
                              width="16"
                              height="18"
                              viewBox="0 0 16 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M8 18C9.38503 18 10.5633 17.1652 11 16H5C5.43668 17.1652 6.61497 18 8 18Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M9.6896 0.754028C9.27403 0.291157 8.67102 0 8 0C6.74634 0 5.73005 1.01629 5.73005 2.26995V2.37366C3.58766 3.10719 2.0016 4.85063 1.76046 6.97519L1.31328 10.9153C1.23274 11.6249 0.933441 12.3016 0.447786 12.8721C-0.649243 14.1609 0.394434 16 2.22281 16H13.7772C15.6056 16 16.6492 14.1609 15.5522 12.8721C15.0666 12.3016 14.7673 11.6249 14.6867 10.9153L14.2395 6.97519C14.2333 6.92024 14.2262 6.86556 14.2181 6.81113C13.8341 6.93379 13.4248 7 13 7C10.7909 7 9 5.20914 9 3C9 2.16744 9.25436 1.3943 9.6896 0.754028Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <circle
                                cx="13"
                                cy="3"
                                r="3"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="integrations.html">
                          <span class="item-ico">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M1.57666 3.61499C1.57666 2.51042 2.47209 1.61499 3.57666 1.61499H8.5C9.60456 1.61499 10.5 2.51042 10.5 3.61499V8.53833C10.5 9.64289 9.60456 10.5383 8.49999 10.5383H3.57666C2.47209 10.5383 1.57666 9.64289 1.57666 8.53832V3.61499Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M13.5 15.5383C13.5 14.4338 14.3954 13.5383 15.5 13.5383H20.4233C21.5279 13.5383 22.4233 14.4338 22.4233 15.5383V20.4617C22.4233 21.5662 21.5279 22.4617 20.4233 22.4617H15.5C14.3954 22.4617 13.5 21.5662 13.5 20.4617V15.5383Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <circle
                                cx="6.03832"
                                cy="18"
                                r="4.46166"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M18 2C18.4142 2 18.75 2.33579 18.75 2.75V5.25H21.25C21.6642 5.25 22 5.58579 22 6C22 6.41421 21.6642 6.75 21.25 6.75H18.75V9.25C18.75 9.66421 18.4142 10 18 10C17.5858 10 17.25 9.66421 17.25 9.25V6.75H14.75C14.3358 6.75 14 6.41421 14 6C14 5.58579 14.3358 5.25 14.75 5.25H17.25V2.75C17.25 2.33579 17.5858 2 18 2Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="users.html">
                          <span class="item-ico">
                            <svg
                              width="14"
                              height="18"
                              viewBox="0 0 14 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <ellipse
                                cx="7"
                                cy="14"
                                rx="7"
                                ry="4"
                                class="path-1"
                                fill="#1A202C"
                              />
                              <circle
                                cx="7"
                                cy="4"
                                r="4"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="history.html">
                          <span class="item-ico">
                            <svg
                              width="18"
                              height="21"
                              viewBox="0 0 18 21"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M17.5 12.5C17.5 17.1944 13.6944 21 9 21C4.30558 21 0.5 17.1944 0.5 12.5C0.5 7.80558 4.30558 4 9 4C13.6944 4 17.5 7.80558 17.5 12.5Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M8.99995 1.75C8.02962 1.75 7.09197 1.88462 6.20407 2.13575C5.80549 2.24849 5.39099 2.01676 5.27826 1.61818C5.16553 1.21961 5.39725 0.805108 5.79583 0.692376C6.81525 0.404046 7.89023 0.25 8.99995 0.25C10.1097 0.25 11.1846 0.404046 12.2041 0.692376C12.6026 0.805108 12.8344 1.21961 12.7216 1.61818C12.6089 2.01676 12.1944 2.24849 11.7958 2.13575C10.9079 1.88462 9.97028 1.75 8.99995 1.75Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M11 13C11 14.1046 10.1046 15 9 15C7.89543 15 7 14.1046 7 13C7 11.8954 7.89543 11 9 11C10.1046 11 11 11.8954 11 13Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M9 7.25C9.41421 7.25 9.75 7.58579 9.75 8V12C9.75 12.4142 9.41421 12.75 9 12.75C8.58579 12.75 8.25 12.4142 8.25 12V8C8.25 7.58579 8.58579 7.25 9 7.25Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <div class="item-wrapper mb-5">
                    <ul
                      class="mt-2.5 flex flex-col items-center justify-center"
                    >
                      <li class="item px-[43px] py-[11px]">
                        <a href="support-ticket.html">
                          <span class="item-ico">
                            <svg
                              width="20"
                              height="18"
                              viewBox="0 0 20 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M5 2V11C5 12.1046 5.89543 13 7 13H18C19.1046 13 20 12.1046 20 11V2C20 0.895431 19.1046 0 18 0H7C5.89543 0 5 0.89543 5 2Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M0 15C0 13.8954 0.895431 13 2 13H2.17157C2.70201 13 3.21071 13.2107 3.58579 13.5858C4.36683 14.3668 5.63317 14.3668 6.41421 13.5858C6.78929 13.2107 7.29799 13 7.82843 13H8C9.10457 13 10 13.8954 10 15V16C10 17.1046 9.10457 18 8 18H2C0.89543 18 0 17.1046 0 16V15Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                d="M7.5 9.5C7.5 10.8807 6.38071 12 5 12C3.61929 12 2.5 10.8807 2.5 9.5C2.5 8.11929 3.61929 7 5 7C6.38071 7 7.5 8.11929 7.5 9.5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M8.25 4.5C8.25 4.08579 8.58579 3.75 9 3.75L16 3.75C16.4142 3.75 16.75 4.08579 16.75 4.5C16.75 4.91421 16.4142 5.25 16 5.25L9 5.25C8.58579 5.25 8.25 4.91421 8.25 4.5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M11.25 8.5C11.25 8.08579 11.5858 7.75 12 7.75L16 7.75C16.4142 7.75 16.75 8.08579 16.75 8.5C16.75 8.91421 16.4142 9.25 16 9.25L12 9.25C11.5858 9.25 11.25 8.91421 11.25 8.5Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                        <ul
                          class="sub-menu min-w-[200px] rounded-lg border-l border-success-100 bg-white px-5 py-2 shadow-lg"
                        >
                          <li>
                            <a
                              href="analytics.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Analytics</a
                            >
                          </li>
                          <li>
                            <a
                              href="messages.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Inbox</a
                            >
                          </li>
                          <li>
                            <a
                              href="integrations.html"
                              class="text-md inline-block py-1.5 font-medium text-bgray-600 hover:text-bgray-800"
                              >Integrations</a
                            >
                          </li>
                        </ul>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="settings.html">
                          <span class="item-ico">
                            <svg
                              width="16"
                              height="16"
                              viewBox="0 0 16 16"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M8.84849 0H7.15151C6.2143 0 5.45454 0.716345 5.45454 1.6C5.45454 2.61121 4.37259 3.25411 3.48444 2.77064L3.39424 2.72153C2.58258 2.27971 1.54473 2.54191 1.07612 3.30717L0.227636 4.69281C-0.240971 5.45808 0.0371217 6.43663 0.848773 6.87846C1.73734 7.36215 1.73734 8.63785 0.848771 9.12154C0.0371203 9.56337 -0.240972 10.5419 0.227635 11.3072L1.07612 12.6928C1.54473 13.4581 2.58258 13.7203 3.39424 13.2785L3.48444 13.2294C4.37259 12.7459 5.45454 13.3888 5.45454 14.4C5.45454 15.2837 6.2143 16 7.15151 16H8.84849C9.7857 16 10.5455 15.2837 10.5455 14.4C10.5455 13.3888 11.6274 12.7459 12.5156 13.2294L12.6058 13.2785C13.4174 13.7203 14.4553 13.4581 14.9239 12.6928L15.7724 11.3072C16.241 10.5419 15.9629 9.56336 15.1512 9.12153C14.2627 8.63784 14.2627 7.36216 15.1512 6.87847C15.9629 6.43664 16.241 5.45809 15.7724 4.69283L14.9239 3.30719C14.4553 2.54192 13.4174 2.27972 12.6058 2.72154L12.5156 2.77065C11.6274 3.25412 10.5455 2.61122 10.5455 1.6C10.5455 0.716344 9.7857 0 8.84849 0Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                d="M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="signin.html">
                          <span class="item-ico">
                            <svg
                              width="14"
                              height="18"
                              viewBox="0 0 14 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <ellipse
                                cx="7"
                                cy="14"
                                rx="7"
                                ry="4"
                                class="path-1"
                                fill="#1A202C"
                              />
                              <circle
                                cx="7"
                                cy="4"
                                r="4"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="signup.html">
                          <span class="item-ico">
                            <svg
                              width="14"
                              height="18"
                              viewBox="0 0 14 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <ellipse
                                cx="7"
                                cy="14"
                                rx="7"
                                ry="4"
                                class="path-1"
                                fill="#1A202C"
                              />
                              <circle
                                cx="7"
                                cy="4"
                                r="4"
                                fill="#EB292C"
                                class="path-2"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                      <li class="item px-[43px] py-[11px]">
                        <a href="#">
                          <span class="item-ico">
                            <svg
                              width="21"
                              height="18"
                              viewBox="0 0 21 18"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M17.1464 10.4394C16.8536 10.7323 16.8536 11.2072 17.1464 11.5001C17.4393 11.7929 17.9142 11.7929 18.2071 11.5001L19.5 10.2072C20.1834 9.52375 20.1834 8.41571 19.5 7.73229L18.2071 6.4394C17.9142 6.1465 17.4393 6.1465 17.1464 6.4394C16.8536 6.73229 16.8536 7.20716 17.1464 7.50006L17.8661 8.21973H11.75C11.3358 8.21973 11 8.55551 11 8.96973C11 9.38394 11.3358 9.71973 11.75 9.71973H17.8661L17.1464 10.4394Z"
                                fill="#EB292C"
                                class="path-2"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M4.75 17.75H12C14.6234 17.75 16.75 15.6234 16.75 13C16.75 12.5858 16.4142 12.25 16 12.25C15.5858 12.25 15.25 12.5858 15.25 13C15.25 14.7949 13.7949 16.25 12 16.25H8.21412C7.34758 17.1733 6.11614 17.75 4.75 17.75ZM8.21412 1.75H12C13.7949 1.75 15.25 3.20507 15.25 5C15.25 5.41421 15.5858 5.75 16 5.75C16.4142 5.75 16.75 5.41421 16.75 5C16.75 2.37665 14.6234 0.25 12 0.25H4.75C6.11614 0.25 7.34758 0.82673 8.21412 1.75Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M0 5C0 2.37665 2.12665 0.25 4.75 0.25C7.37335 0.25 9.5 2.37665 9.5 5V13C9.5 15.6234 7.37335 17.75 4.75 17.75C2.12665 17.75 0 15.6234 0 13V5Z"
                                fill="#1A202C"
                                class="path-1"
                              />
                            </svg>
                          </span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="upgrade-wrapper">
                  <div
                    class="flex h-10 w-10 items-center justify-center rounded-full border border-white bg-success-300"
                  >
                    <span>
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M14 12.75C14 11.7835 13.1046 11 12 11C10.8954 11 10 11.7835 10 12.75C10 13.7165 10.8954 14.5 12 14.5C13.1046 14.5 14 15.2835 14 16.25C14 17.2165 13.1046 18 12 18C10.8954 18 10 17.2165 10 16.25"
                          stroke="white"
                          stroke-width="1.5"
                          stroke-linecap="round"
                        />
                        <path
                          d="M12 9.5V11"
                          stroke="white"
                          stroke-width="1.5"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M12 18V19.5"
                          stroke="white"
                          stroke-width="1.5"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M5.63246 11.1026C6.44914 8.65258 8.74197 7 11.3246 7H12.6754C15.258 7 17.5509 8.65258 18.3675 11.1026L19.3675 14.1026C20.6626 17.9878 17.7708 22 13.6754 22H10.3246C6.22921 22 3.33739 17.9878 4.63246 14.1026L5.63246 11.1026Z"
                          stroke="white"
                          stroke-width="1.5"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M14.0859 7L9.91411 7L8.51303 5.39296C7.13959 3.81763 8.74185 1.46298 10.7471 2.10985L11.6748 2.40914C11.8861 2.47728 12.1139 2.47728 12.3252 2.40914L13.2529 2.10985C15.2582 1.46298 16.8604 3.81763 15.487 5.39296L14.0859 7Z"
                          stroke="white"
                          stroke-width="1.5"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </aside>
        <div
          class="body-wrapper flex-1 overflow-x-hidden dark:bg-darkblack-500"
        >
          <header class="header-wrapper fixed z-30 hidden w-full md:block">
            <div
              class="relative flex h-[108px] w-full items-center justify-between bg-white px-10 dark:bg-darkblack-600 2xl:px-[76px]"
            >
              <button
                title="Ctrl+b"
                type="button"
                class="drawer-btn absolute left-0 top-auto rotate-180 transform"
              >
                <span>
                  <svg
                    width="16"
                    height="40"
                    viewBox="0 0 16 40"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M0 10C0 4.47715 4.47715 0 10 0H16V40H10C4.47715 40 0 35.5228 0 30V10Z"
                      fill="#EB292C"
                    />
                    <path
                      d="M10 15L6 20.0049L10 25.0098"
                      stroke="#ffffff"
                      stroke-width="1.2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </span>
              </button>
              <!--              page-title-->
              <div>
                <h3
                  class="text-xl font-bold text-bgray-900 dark:text-bgray-50 lg:text-3xl lg:leading-[36.4px]"
                >
                  Dashboard
                </h3>
                <p
                  class="text-xs font-medium text-bgray-600 dark:text-bgray-50 lg:text-sm lg:leading-[25.2px]"
                >
                  Let’s check your update today
                </p>
              </div>
              <!--              search-bar-->
              <div class="searchbar-wrapper">
                <div
                  class="px flex h-[56px] w-[300px] items-center justify-between rounded-lg border border-transparent bg-bgray-50 px-4 focus-within:border-success-300 dark:bg-darkblack-500 lg:w-[400px]"
                >
                  <div class="flex w-full items-center space-x-3.5">
                    <span>
                      <svg
                        class="stroke-bgray-900 dark:stroke-bgray-50"
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle
                          cx="9.78639"
                          cy="9.78602"
                          r="8.23951"
                          stroke-width="1.5"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M15.5176 15.9447L18.7479 19.1667"
                          stroke-width="1.5"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </span>
                    <label for="search" class="w-full">
                      <input
                        type="text"
                        id="search"
                        placeholder="Search..."
                        class="search-input w-full border-none bg-bgray-50 bg-none px-0 text-sm tracking-wide text-bgray-600 placeholder:text-sm placeholder:font-semibold focus:outline-none focus:ring-0 dark:bg-darkblack-500 dark:placeholder:text-bgray-500"
                      />
                    </label>
                  </div>
                  <div class="flex items-center space-x-[6px]">
                    <span>
                      <svg
                        class="stroke-bgray-900 dark:stroke-gray-300"
                        width="16"
                        height="16"
                        viewBox="0 0 16 16"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M5.975 12.3875C5.975 12.8548 5.83644 13.3115 5.57685 13.7C5.31725 14.0885 4.94828 14.3914 4.51659 14.5702C4.0849 14.749 3.60988 14.7958 3.1516 14.7046C2.69332 14.6134 2.27236 14.3884 1.94196 14.058C1.61156 13.7276 1.38655 13.3067 1.2954 12.8484C1.20424 12.3901 1.25102 11.9151 1.42984 11.4834C1.60865 11.0517 1.91146 10.6827 2.29997 10.4232C2.68848 10.1636 3.14524 10.025 3.6125 10.025H12.3875C12.8548 10.025 13.3115 10.1636 13.7 10.4232C14.0885 10.6827 14.3914 11.0517 14.5702 11.4834C14.749 11.9151 14.7958 12.3901 14.7046 12.8484C14.6134 13.3067 14.3884 13.7276 14.058 14.058C13.7276 14.3884 13.3067 14.6134 12.8484 14.7046C12.3901 14.7958 11.9151 14.749 11.4834 14.5702C11.0517 14.3914 10.6827 14.0885 10.4232 13.7C10.1636 13.3115 10.025 12.8548 10.025 12.3875V3.6125C10.025 3.14524 10.1636 2.68848 10.4232 2.29997C10.6827 1.91146 11.0517 1.60865 11.4834 1.42984C11.9151 1.25102 12.3901 1.20424 12.8484 1.2954C13.3067 1.38655 13.7276 1.61156 14.058 1.94196C14.3884 2.27236 14.6134 2.69332 14.7046 3.1516C14.7958 3.60988 14.749 4.0849 14.5702 4.51659C14.3914 4.94828 14.0885 5.31725 13.7 5.57685C13.3115 5.83644 12.8548 5.975 12.3875 5.975H3.6125C3.14524 5.975 2.68848 5.83644 2.29997 5.57685C1.91146 5.31725 1.60865 4.94828 1.42984 4.51659C1.25102 4.0849 1.20424 3.60988 1.2954 3.1516C1.38655 2.69332 1.61156 2.27236 1.94196 1.94196C2.27236 1.61156 2.69332 1.38655 3.1516 1.2954C3.60988 1.20424 4.0849 1.25102 4.51659 1.42984C4.94828 1.60865 5.31725 1.91146 5.57685 2.29997C5.83644 2.68848 5.975 3.14524 5.975 3.6125V12.3875Z"
                          stroke-width="1.5"
                        />
                      </svg>
                    </span>
                    <span class="text-base text-bgray-900 dark:text-bgray-300"
                      >K</span
                    >
                  </div>
                </div>
              </div>
              <!--  quick access-->
              <div class="quick-access-wrapper relative">
                <div class="flex items-center space-x-[43px]">
                  <div class="hidden items-center space-x-5 xl:flex">
                    <button
                      type="button"
                      id="theme-toggle"
                      class="relative flex h-[52px] w-[52px] items-center justify-center rounded-[12px] border border-success-300 dark:border-darkblack-400"
                    >
                      <span class="block dark:hidden">
                        <svg
                          class="stroke-bgray-900"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M18.3284 14.8687C13.249 14.8687 9.13135 10.751 9.13135 5.67163C9.13135 4.74246 9.26914 3.84548 9.5254 3C5.74897 4.14461 3 7.65276 3 11.803C3 16.8824 7.11765 21 12.197 21C16.3472 21 19.8554 18.251 21 14.4746C20.1545 14.7309 19.2575 14.8687 18.3284 14.8687Z"
                            stroke-width="1.5"
                            stroke-linejoin="round"
                          />
                        </svg>
                      </span>
                      <span class="hidden dark:block">
                        <svg
                          class="stroke-bgray-900 dark:stroke-bgray-50"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <circle cx="12" cy="12" r="5" stroke-width="1.5" />
                          <path
                            d="M12 2V4"
                            stroke-width="1.5"
                            stroke-linecap="round"
                          />
                          <path
                            d="M12 20V22"
                            stroke-width="1.5"
                            stroke-linecap="round"
                          />
                          <path
                            d="M20.6602 7L18.9281 8"
                            stroke-width="1.5"
                            stroke-linecap="round"
                          />
                          <path
                            d="M5.07178 16L3.33973 17"
                            stroke-width="1.5"
                            stroke-linecap="round"
                          />
                          <path
                            d="M3.33984 7L5.07189 8"
                            stroke-width="1.5"
                            stroke-linecap="round"
                          />
                          <path
                            d="M18.9282 16L20.6603 17"
                            stroke-width="1.5"
                            stroke-linecap="round"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      onclick="notificationAction()"
                      id="notification-btn"
                      type="button"
                      class="relative flex h-[52px] w-[52px] items-center justify-center rounded-[12px] border border-success-300 dark:border-darkblack-400"
                    >
                      <span
                        class="absolute -right-[5px] -top-[2px] h-3.5 w-3.5 rounded-full border-2 border-white bg-bgray-300 dark:border-none dark:bg-bgray-600"
                      >
                      </span>
                      <svg
                        class="fill-bgray-900 dark:fill-white"
                        width="24"
                        height="25"
                        viewBox="0 0 24 25"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M19.9718 6.78149L19.2803 7.07178L19.9718 6.78149ZM19.3571 7.25473C19.5174 7.63666 19.957 7.81631 20.3389 7.65599C20.7209 7.49567 20.9005 7.05609 20.7402 6.67416L19.3571 7.25473ZM16.7784 2.77061C16.3937 2.61687 15.9573 2.80404 15.8036 3.18867C15.6498 3.5733 15.837 4.00973 16.2216 4.16347L16.7784 2.77061ZM16.6672 3.53388L16.3889 4.23031L16.6672 3.53388ZM4.0768 6.78149L4.76834 7.07178L4.0768 6.78149ZM3.30846 6.67416C3.14813 7.05609 3.32778 7.49567 3.70971 7.65599C4.09164 7.81631 4.53122 7.63666 4.69154 7.25473L3.30846 6.67416ZM7.82701 4.16347C8.21164 4.00973 8.39881 3.5733 8.24507 3.18867C8.09134 2.80405 7.65491 2.61687 7.27028 2.77061L7.82701 4.16347ZM7.38142 3.53388L7.10305 2.83745V2.83745L7.38142 3.53388ZM18.2395 9.93743L17.4943 10.0221V10.0221L18.2395 9.93743ZM18.6867 13.8746L19.4319 13.7899V13.7899L18.6867 13.8746ZM5.31328 13.8746L4.56807 13.7899L5.31328 13.8746ZM5.76046 9.93743L6.50567 10.0221L5.76046 9.93743ZM4.44779 15.83L3.87686 15.3436H3.87686L4.44779 15.83ZM19.5522 15.83L18.9813 16.3164L18.9813 16.3164L19.5522 15.83ZM14.2699 5.33931H13.5199C13.5199 5.65996 13.7238 5.94513 14.0272 6.04893L14.2699 5.33931ZM9.73005 5.33931L9.97284 6.04893C10.2762 5.94513 10.4801 5.65996 10.4801 5.33931H9.73005ZM15.7022 21.2175C15.8477 20.8296 15.6512 20.3973 15.2634 20.2518C14.8755 20.1064 14.4432 20.3029 14.2978 20.6907L15.7022 21.2175ZM9.70223 20.6907C9.55678 20.3029 9.12446 20.1064 8.73663 20.2518C8.34879 20.3973 8.15231 20.8296 8.29777 21.2175L9.70223 20.6907ZM19.2803 7.07178L19.3571 7.25473L20.7402 6.67416L20.6634 6.4912L19.2803 7.07178ZM16.2216 4.16347L16.3889 4.23031L16.9456 2.83745L16.7784 2.77061L16.2216 4.16347ZM20.6634 6.4912C19.9638 4.82468 18.6244 3.50849 16.9456 2.83745L16.3889 4.23031C17.6948 4.7523 18.7364 5.77599 19.2803 7.07178L20.6634 6.4912ZM3.38526 6.4912L3.30846 6.67416L4.69154 7.25473L4.76834 7.07178L3.38526 6.4912ZM7.27028 2.77061L7.10305 2.83745L7.65979 4.23031L7.82701 4.16347L7.27028 2.77061ZM4.76834 7.07178C5.31227 5.77599 6.35384 4.7523 7.65979 4.23031L7.10305 2.83745C5.4242 3.50849 4.08481 4.82468 3.38526 6.4912L4.76834 7.07178ZM17.7772 18.2056H6.22281V19.7056H17.7772V18.2056ZM17.4943 10.0221L17.9415 13.9592L19.4319 13.7899L18.9847 9.85279L17.4943 10.0221ZM6.05849 13.9592L6.50567 10.0221L5.01526 9.85279L4.56807 13.7899L6.05849 13.9592ZM5.01872 16.3164C5.59608 15.6386 5.96025 14.8241 6.05849 13.9592L4.56807 13.7899C4.50522 14.3432 4.2708 14.8812 3.87686 15.3436L5.01872 16.3164ZM17.9415 13.9592C18.0398 14.8241 18.4039 15.6386 18.9813 16.3164L20.1231 15.3436C19.7292 14.8812 19.4948 14.3432 19.4319 13.7899L17.9415 13.9592ZM6.22281 18.2056C5.5675 18.2056 5.10418 17.8817 4.89044 17.5053C4.68417 17.1421 4.68715 16.7056 5.01872 16.3164L3.87686 15.3436C3.11139 16.2422 3.0877 17.3685 3.5861 18.2461C4.07704 19.1105 5.04975 19.7056 6.22281 19.7056V18.2056ZM17.7772 19.7056C18.9503 19.7056 19.923 19.1105 20.4139 18.2461C20.9123 17.3685 20.8886 16.2422 20.1231 15.3436L18.9813 16.3164C19.3129 16.7056 19.3158 17.1421 19.1096 17.5053C18.8958 17.8817 18.4325 18.2056 17.7772 18.2056V19.7056ZM15.0199 5.33931V5.23567H13.5199V5.33931H15.0199ZM18.9847 9.85279C18.7054 7.39374 16.8802 5.43969 14.5127 4.6297L14.0272 6.04893C15.9445 6.70491 17.2914 8.23516 17.4943 10.0221L18.9847 9.85279ZM10.4801 5.33931V5.23567H8.98005V5.33931H10.4801ZM6.50567 10.0221C6.70863 8.23516 8.05551 6.70491 9.97284 6.04893L9.48727 4.6297C7.1198 5.43969 5.29456 7.39374 5.01526 9.85279L6.50567 10.0221ZM12 3.71741C12.84 3.71741 13.5199 4.39768 13.5199 5.23567H15.0199C15.0199 3.56821 13.6673 2.21741 12 2.21741V3.71741ZM12 2.21741C10.3327 2.21741 8.98005 3.56821 8.98005 5.23567H10.4801C10.4801 4.39768 11.16 3.71741 12 3.71741V2.21741ZM14.2978 20.6907C13.9752 21.5508 13.0849 22.2026 12 22.2026V23.7026C13.6851 23.7026 15.1514 22.686 15.7022 21.2175L14.2978 20.6907ZM12 22.2026C10.9151 22.2026 10.0248 21.5508 9.70223 20.6907L8.29777 21.2175C8.84856 22.686 10.3149 23.7026 12 23.7026V22.2026Z"
                        />
                      </svg>
                    </button>
                    <button
                      onclick="messageAction()"
                      type="button"
                      id="message-btn"
                      class="relative flex h-[52px] w-[52px] items-center justify-center rounded-[12px] border border-success-300 dark:border-darkblack-400"
                    >
                      <span
                        class="absolute -right-[5px] -top-[2px] h-3.5 w-3.5 rounded-full border-2 border-white bg-error-300 dark:border-none"
                      ></span>
                      <svg
                        class="stroke-bgray-900 dark:stroke-white"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M2 12V7C2 4.79086 3.79086 3 6 3H18C20.2091 3 22 4.79086 22 7V17C22 19.2091 20.2091 21 18 21H8M6 8L9.7812 10.5208C11.1248 11.4165 12.8752 11.4165 14.2188 10.5208L18 8M2 15H8M2 18H8"
                          stroke-width="1.5"
                          stroke-linecap="round"
                        />
                      </svg>
                    </button>
                    <button
                      onclick="storeAction()"
                      type="button"
                      id="store-btn"
                      class="relative flex h-[52px] w-[52px] items-center justify-center rounded-[12px] border border-success-300 dark:border-darkblack-400"
                    >
                      <span
                        class="absolute -right-[5px] -top-[2px] h-3.5 w-3.5 rounded-full border-2 border-white bg-bgray-300 dark:border-none dark:bg-bgray-600"
                      ></span>
                      <svg
                        class="stroke-bgray-900 dark:stroke-white"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M4 11H20M4 11C2.89543 11 2 10.1046 2 9V8C2 6.89543 2.89543 6 4 6H20C21.1046 6 22 6.89543 22 8V9C22 10.1046 21.1046 11 20 11M4 11L4 20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V11M12 6H16C17.1046 6 18 5.10457 18 4C18 2.89543 17.1046 2 16 2C13.7909 2 12 3.79086 12 6ZM12 6H8C6.89543 6 6 5.10457 6 4C6 2.89543 6.89543 2 8 2C10.2091 2 12 3.79086 12 6ZM12 6V22"
                          stroke-width="1.5"
                          stroke-linecap="round"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="hidden h-[48px] w-[1px] bg-bgray-300 dark:bg-darkblack-400 xl:block"
                  ></div>
                  <!--                author-->
                  <div
                    onclick="profileAction()"
                    class="flex cursor-pointer space-x-0 lg:space-x-3"
                  >
                    <div
                      class="h-[52px] w-[52px] overflow-hidden rounded-xl border border-bgray-300"
                    >
                      <img
                        class="object-cover"
                        src="./assets/images/avatar/profile-52x52.png"
                        alt="avater"
                      />
                    </div>
                    <div class="hidden 2xl:block">
                      <div class="flex items-center space-x-2.5">
                        <h3
                          class="text-base font-bold leading-[28px] text-bgray-900 dark:text-white"
                        >
                          John Doe
                        </h3>
                        <span>
                          <svg
                            class="stroke-bgray-900 dark:stroke-white"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M7 10L12 14L17 10"
                              stroke-width="2"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                          </svg>
                        </span>
                      </div>
                      <p
                        class="text-sm font-medium leading-[20px] text-bgray-600 dark:text-bgray-50"
                      >
                        Super Admin
                      </p>
                    </div>
                  </div>
                </div>
                <!--                notification ,message, store-->
                <div class="notification-popup-wrapper">
                  <div
                    onclick="notificationAction()"
                    id="noti-outside"
                    class="fixed -left-[43px] top-0 hidden h-full w-full"
                  ></div>
                  <div
                    id="notification-box"
                    style="
                      filter: drop-shadow(12px 12px 40px rgba(0, 0, 0, 0.08));
                    "
                    class="absolute -left-[347px] top-[81px] hidden w-[400px] rounded-lg bg-white dark:bg-darkblack-600"
                  >
                    <div class="relative w-full pb-[75px] pt-[66px]">
                      <div
                        class="absolute left-0 top-0 flex h-[66px] w-full items-center justify-between px-8"
                      >
                        <h3
                          class="text-xl font-bold text-bgray-900 dark:text-white"
                        >
                          Notifications
                        </h3>
                        <span>
                          <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M10.325 4.317C10.751 2.561 13.249 2.561 13.675 4.317C13.7389 4.5808 13.8642 4.82578 14.0407 5.032C14.2172 5.23822 14.4399 5.39985 14.6907 5.50375C14.9414 5.60764 15.2132 5.65085 15.4838 5.62987C15.7544 5.60889 16.0162 5.5243 16.248 5.383C17.791 4.443 19.558 6.209 18.618 7.753C18.4769 7.98466 18.3924 8.24634 18.3715 8.51677C18.3506 8.78721 18.3938 9.05877 18.4975 9.30938C18.6013 9.55999 18.7627 9.78258 18.9687 9.95905C19.1747 10.1355 19.4194 10.2609 19.683 10.325C21.439 10.751 21.439 13.249 19.683 13.675C19.4192 13.7389 19.1742 13.8642 18.968 14.0407C18.7618 14.2172 18.6001 14.4399 18.4963 14.6907C18.3924 14.9414 18.3491 15.2132 18.3701 15.4838C18.3911 15.7544 18.4757 16.0162 18.617 16.248C19.557 17.791 17.791 19.558 16.247 18.618C16.0153 18.4769 15.7537 18.3924 15.4832 18.3715C15.2128 18.3506 14.9412 18.3938 14.6906 18.4975C14.44 18.6013 14.2174 18.7627 14.0409 18.9687C13.8645 19.1747 13.7391 19.4194 13.675 19.683C13.249 21.439 10.751 21.439 10.325 19.683C10.2611 19.4192 10.1358 19.1742 9.95929 18.968C9.7828 18.7618 9.56011 18.6001 9.30935 18.4963C9.05859 18.3924 8.78683 18.3491 8.51621 18.3701C8.24559 18.3911 7.98375 18.4757 7.752 18.617C6.209 19.557 4.442 17.791 5.382 16.247C5.5231 16.0153 5.60755 15.7537 5.62848 15.4832C5.64942 15.2128 5.60624 14.9412 5.50247 14.6906C5.3987 14.44 5.23726 14.2174 5.03127 14.0409C4.82529 13.8645 4.58056 13.7391 4.317 13.675C2.561 13.249 2.561 10.751 4.317 10.325C4.5808 10.2611 4.82578 10.1358 5.032 9.95929C5.23822 9.7828 5.39985 9.56011 5.50375 9.30935C5.60764 9.05859 5.65085 8.78683 5.62987 8.51621C5.60889 8.24559 5.5243 7.98375 5.383 7.752C4.443 6.209 6.209 4.442 7.753 5.382C8.753 5.99 10.049 5.452 10.325 4.317Z"
                              stroke="#A0AEC0"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                            <path
                              d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
                              stroke="#A0AEC0"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                          </svg>
                        </span>
                      </div>
                      <ul
                        class="scroll-style-1 h-[335px] w-full overflow-y-scroll"
                      >
                        <li
                          class="border-b border-bgray-200 py-4 pl-6 pr-[50px] hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                        >
                          <a href="#">
                            <div class="noti-item">
                              <p
                                class="mb-1 text-sm font-medium text-bgray-600 dark:text-bgray-50"
                              >
                                <strong class="text-bgray-900 dark:text-white"
                                  >James Eusobio</strong
                                >
                                send a new payment for
                                <strong class="text-bgray-900 dark:text-white"
                                  >SEO writing</strong
                                >
                                totaling
                                <span class="text-success-300">$199.00</span>
                              </p>
                              <span class="text-xs font-medium text-bgray-500"
                                >23 mins ago</span
                              >
                            </div>
                          </a>
                        </li>
                        <li
                          class="border-b border-bgray-200 py-4 pl-6 pr-[50px] hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                        >
                          <a href="#">
                            <div class="noti-item">
                              <p
                                class="mb-1 text-sm font-medium text-bgray-600 dark:text-white"
                              >
                                <strong
                                  class="text-bgray-900 dark:text-bgray-50"
                                  >James Eusobio</strong
                                >
                                send a new payment for
                                <strong
                                  class="text-bgray-900 dark:text-bgray-50"
                                  >SEO writing</strong
                                >
                                totaling
                                <span class="text-error-200">$199.00</span>
                              </p>
                              <span class="text-xs font-medium text-bgray-500"
                                >23 mins ago</span
                              >
                            </div>
                          </a>
                        </li>
                        <li
                          class="border-b border-bgray-200 py-4 pl-6 pr-[50px] hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                        >
                          <a href="#">
                            <div class="noti-item">
                              <p
                                class="mb-1 text-sm font-medium text-bgray-600 dark:text-bgray-50"
                              >
                                <strong class="text-bgray-900 dark:text-white"
                                  >James Eusobio</strong
                                >
                                send a new payment for
                                <strong class="text-bgray-900 dark:text-white"
                                  >SEO writing</strong
                                >
                                totaling
                                <span class="text-success-300">$199.00</span>
                              </p>
                              <span class="text-xs font-medium text-bgray-500"
                                >23 mins ago</span
                              >
                            </div>
                          </a>
                        </li>
                        <li
                          class="border-b border-bgray-200 py-4 pl-6 pr-[50px] hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                        >
                          <a href="#">
                            <div class="noti-item">
                              <p
                                class="mb-1 text-sm font-medium text-bgray-600 dark:text-bgray-50"
                              >
                                <strong class="text-bgray-900 dark:text-white"
                                  >James Eusobio</strong
                                >
                                send a new payment for
                                <strong class="text-bgray-900 dark:text-white"
                                  >SEO writing</strong
                                >
                                totaling
                                <span class="text-success-300">$199.00</span>
                              </p>
                              <span class="text-xs font-medium text-bgray-500"
                                >23 mins ago</span
                              >
                            </div>
                          </a>
                        </li>
                        <li
                          class="border-b border-bgray-200 py-4 pl-6 pr-[50px] hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                        >
                          <a href="#">
                            <div class="noti-item">
                              <p
                                class="mb-1 text-sm font-medium text-bgray-600 dark:text-bgray-50"
                              >
                                <strong class="text-bgray-900 dark:text-white"
                                  >James Eusobio</strong
                                >
                                send a new payment for
                                <strong class="text-bgray-900 dark:text-white"
                                  >SEO writing</strong
                                >
                                totaling
                                <span class="text-success-300">$199.00</span>
                              </p>
                              <span class="text-xs font-medium text-bgray-500"
                                >23 mins ago</span
                              >
                            </div>
                          </a>
                        </li>
                      </ul>
                      <div
                        class="absolute bottom-0 left-0 flex h-[75px] w-full items-center justify-between px-8"
                      >
                        <div>
                          <a href="#">
                            <div class="flex items-center space-x-2">
                              <span>
                                <svg
                                  width="22"
                                  height="12"
                                  viewBox="0 0 22 12"
                                  fill="none"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <path
                                    d="M6 6L11 11L21 1M1 6L6 11M11 6L16 1"
                                    stroke="#0CAF60"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                  />
                                </svg>
                              </span>
                              <span
                                class="text-sm font-semibold text-success-300"
                              >
                                Mark all as read
                              </span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="message-popup-wrapper">
                  <div
                    onclick="messageAction()"
                    id="mes-outside"
                    class="fixed -left-[43px] top-0 hidden h-full w-full"
                  ></div>
                  <div
                    id="message-box"
                    style="
                      filter: drop-shadow(12px 12px 40px rgba(0, 0, 0, 0.08));
                    "
                    class="absolute -left-[276px] top-[81px] hidden w-[400px] rounded-lg bg-white dark:bg-darkblack-600"
                  >
                    <div class="relative w-full pb-[75px] pt-[66px]">
                      <div
                        class="absolute left-0 top-0 flex h-[66px] w-full items-center justify-between px-8"
                      >
                        <h3
                          class="text-xl font-bold text-bgray-900 dark:text-white"
                        >
                          Message
                        </h3>
                        <span>
                          <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M10.325 4.317C10.751 2.561 13.249 2.561 13.675 4.317C13.7389 4.5808 13.8642 4.82578 14.0407 5.032C14.2172 5.23822 14.4399 5.39985 14.6907 5.50375C14.9414 5.60764 15.2132 5.65085 15.4838 5.62987C15.7544 5.60889 16.0162 5.5243 16.248 5.383C17.791 4.443 19.558 6.209 18.618 7.753C18.4769 7.98466 18.3924 8.24634 18.3715 8.51677C18.3506 8.78721 18.3938 9.05877 18.4975 9.30938C18.6013 9.55999 18.7627 9.78258 18.9687 9.95905C19.1747 10.1355 19.4194 10.2609 19.683 10.325C21.439 10.751 21.439 13.249 19.683 13.675C19.4192 13.7389 19.1742 13.8642 18.968 14.0407C18.7618 14.2172 18.6001 14.4399 18.4963 14.6907C18.3924 14.9414 18.3491 15.2132 18.3701 15.4838C18.3911 15.7544 18.4757 16.0162 18.617 16.248C19.557 17.791 17.791 19.558 16.247 18.618C16.0153 18.4769 15.7537 18.3924 15.4832 18.3715C15.2128 18.3506 14.9412 18.3938 14.6906 18.4975C14.44 18.6013 14.2174 18.7627 14.0409 18.9687C13.8645 19.1747 13.7391 19.4194 13.675 19.683C13.249 21.439 10.751 21.439 10.325 19.683C10.2611 19.4192 10.1358 19.1742 9.95929 18.968C9.7828 18.7618 9.56011 18.6001 9.30935 18.4963C9.05859 18.3924 8.78683 18.3491 8.51621 18.3701C8.24559 18.3911 7.98375 18.4757 7.752 18.617C6.209 19.557 4.442 17.791 5.382 16.247C5.5231 16.0153 5.60755 15.7537 5.62848 15.4832C5.64942 15.2128 5.60624 14.9412 5.50247 14.6906C5.3987 14.44 5.23726 14.2174 5.03127 14.0409C4.82529 13.8645 4.58056 13.7391 4.317 13.675C2.561 13.249 2.561 10.751 4.317 10.325C4.5808 10.2611 4.82578 10.1358 5.032 9.95929C5.23822 9.7828 5.39985 9.56011 5.50375 9.30935C5.60764 9.05859 5.65085 8.78683 5.62987 8.51621C5.60889 8.24559 5.5243 7.98375 5.383 7.752C4.443 6.209 6.209 4.442 7.753 5.382C8.753 5.99 10.049 5.452 10.325 4.317Z"
                              stroke="#A0AEC0"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                            <path
                              d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
                              stroke="#A0AEC0"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                          </svg>
                        </span>
                      </div>
                      <div>
                        <div
                          class="flex items-center border-b border-bgray-200 dark:border-darkblack-400"
                        >
                          <button
                            type="button"
                            class="flex space-x-2 border-b-2 border-success-300 px-6 py-4 text-sm font-semibold capitalize text-success-300"
                          >
                            <span>All</span>
                            <span
                              class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-success-50 text-[10px] text-success-300"
                              >2</span
                            >
                          </button>
                        </div>
                        <ul
                          class="scroll-style-1 h-[335px] w-full overflow-y-scroll"
                        >
                          <li
                            class="border-b border-bgray-200 px-7 py-6 hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                          >
                            <a href="#">
                              <div class="flex space-x-3">
                                <div
                                  class="relative h-[48px] w-[48px] rounded-full"
                                >
                                  <img
                                    src="./assets/images/avatar/inbox-1.png"
                                    alt="avatar"
                                    class="h-full w-full object-cover"
                                  />
                                  <div
                                    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border border-white bg-bgray-300"
                                  ></div>
                                </div>
                                <div class="flex-1">
                                  <p
                                    class="mb-1 text-base font-bold text-bgray-900 dark:text-white"
                                  >
                                    James Eusobio
                                  </p>
                                  <p
                                    class="text-sm font-medium text-bgray-500 dark:text-bgray-50"
                                  >
                                    Hi, how are you? nedd help! .......
                                  </p>
                                  <span
                                    class="text-sm font-medium text-bgray-500 dark:text-bgray-50"
                                    >23 mins ago</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li
                            class="border-b border-bgray-200 px-7 py-6 hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                          >
                            <a href="#">
                              <div class="flex space-x-3">
                                <div
                                  class="relative h-[48px] w-[48px] rounded-full"
                                >
                                  <img
                                    src="./assets/images/avatar/inbox-2.png"
                                    alt="avatar"
                                    class="h-full w-full object-cover"
                                  />
                                  <div
                                    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border border-white bg-success-300"
                                  ></div>
                                </div>
                                <div class="flex-1">
                                  <p
                                    class="mb-1 text-base font-bold text-bgray-900"
                                  >
                                    Eusobio Joy
                                  </p>
                                  <p class="text-sm font-medium text-bgray-500">
                                    Hi, how are you? nedd help! .......
                                  </p>
                                  <span
                                    class="text-sm font-medium text-bgray-500"
                                    >23 mins ago</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li
                            class="border-b border-bgray-200 px-7 py-6 hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                          >
                            <a href="#">
                              <div class="flex space-x-3">
                                <div
                                  class="relative h-[48px] w-[48px] rounded-full"
                                >
                                  <img
                                    src="./assets/images/avatar/inbox-3.png"
                                    alt="avatar"
                                    class="h-full w-full object-cover"
                                  />
                                  <div
                                    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border border-white bg-success-300"
                                  ></div>
                                </div>
                                <div class="flex-1">
                                  <p
                                    class="mb-1 text-base font-bold text-bgray-900"
                                  >
                                    James Camaron
                                  </p>
                                  <p class="text-sm font-medium text-bgray-500">
                                    Hi, how are you? nedd help! .......
                                  </p>
                                  <span
                                    class="text-sm font-medium text-bgray-500"
                                    >23 mins ago</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li
                            class="border-b border-bgray-200 px-7 py-6 hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                          >
                            <a href="#">
                              <div class="flex space-x-3">
                                <div
                                  class="relative h-[48px] w-[48px] rounded-full"
                                >
                                  <img
                                    src="./assets/images/avatar/inbox-1.png"
                                    alt="avatar"
                                    class="h-full w-full object-cover"
                                  />
                                  <div
                                    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border border-white bg-bgray-300"
                                  ></div>
                                </div>
                                <div class="flex-1">
                                  <p
                                    class="mb-1 text-base font-bold text-bgray-900"
                                  >
                                    James Eusobio
                                  </p>
                                  <p class="text-sm font-medium text-bgray-500">
                                    Hi, how are you? nedd help! .......
                                  </p>
                                  <span
                                    class="text-sm font-medium text-bgray-500"
                                    >23 mins ago</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li
                            class="border-b border-bgray-200 px-7 py-6 hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                          >
                            <a href="#">
                              <div class="flex space-x-3">
                                <div
                                  class="relative h-[48px] w-[48px] rounded-full"
                                >
                                  <img
                                    src="./assets/images/avatar/inbox-2.png"
                                    alt="avatar"
                                    class="h-full w-full object-cover"
                                  />
                                  <div
                                    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border border-white bg-success-300"
                                  ></div>
                                </div>
                                <div class="flex-1">
                                  <p
                                    class="mb-1 text-base font-bold text-bgray-900"
                                  >
                                    James Eusobio
                                  </p>
                                  <p class="text-sm font-medium text-bgray-500">
                                    Hi, how are you? nedd help! .......
                                  </p>
                                  <span
                                    class="text-sm font-medium text-bgray-500"
                                    >23 mins ago</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li
                            class="border-b border-bgray-200 px-7 py-6 hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                          >
                            <a href="#">
                              <div class="flex space-x-3">
                                <div
                                  class="relative h-[48px] w-[48px] rounded-full"
                                >
                                  <img
                                    src="./assets/images/avatar/inbox-3.png"
                                    alt="avatar"
                                    class="h-full w-full object-cover"
                                  />
                                  <div
                                    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border border-white bg-success-300"
                                  ></div>
                                </div>
                                <div class="flex-1">
                                  <p
                                    class="mb-1 text-base font-bold text-bgray-900"
                                  >
                                    James Eusobio
                                  </p>
                                  <p class="text-sm font-medium text-bgray-500">
                                    Hi, how are you? nedd help! .......
                                  </p>
                                  <span
                                    class="text-sm font-medium text-bgray-500"
                                    >23 mins ago</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li
                            class="border-b border-bgray-200 px-7 py-6 hover:bg-bgray-100 dark:border-darkblack-400 dark:hover:bg-darkblack-500"
                          >
                            <a href="#">
                              <div class="flex space-x-3">
                                <div
                                  class="relative h-[48px] w-[48px] rounded-full"
                                >
                                  <img
                                    src="./assets/images/avatar/inbox-1.png"
                                    alt="avatar"
                                    class="h-full w-full object-cover"
                                  />
                                  <div
                                    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border border-white bg-bgray-300"
                                  ></div>
                                </div>
                                <div class="flex-1">
                                  <p
                                    class="mb-1 text-base font-bold text-bgray-900"
                                  >
                                    James Eusobio
                                  </p>
                                  <p class="text-sm font-medium text-bgray-500">
                                    Hi, how are you? nedd help! .......
                                  </p>
                                  <span
                                    class="text-sm font-medium text-bgray-500"
                                    >23 mins ago</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>

                      <div
                        class="absolute bottom-0 left-0 flex h-[75px] w-full items-center justify-between px-8"
                      >
                        <div>
                          <a href="#">
                            <div class="flex items-center space-x-2">
                              <span>
                                <svg
                                  width="22"
                                  height="12"
                                  viewBox="0 0 22 12"
                                  fill="none"
                                  xmlns="http://www.w3.org/2000/svg"
                                >
                                  <path
                                    d="M6 6L11 11L21 1M1 6L6 11M11 6L16 1"
                                    stroke="#0CAF60"
                                    stroke-width="1.5"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                  />
                                </svg>
                              </span>
                              <span
                                class="text-sm font-semibold text-success-300"
                              >
                                Mark all as read
                              </span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="store-wrapper">
                  <div
                    id="store-outside"
                    onclick="storeAction()"
                    class="fixed -left-[43px] top-0 hidden h-full w-full"
                  ></div>
                  <div
                    id="store-box"
                    style="
                      filter: drop-shadow(12px 12px 40px rgba(0, 0, 0, 0.08));
                    "
                    class="absolute -left-[134px] top-[81px] hidden w-[330px] overflow-hidden rounded-lg bg-white dark:bg-darkblack-600"
                  >
                    <div class="relative w-full p-6">
                      <div
                        class="bonus-box-wrapper w-full overflow-hidden pb-[33px]"
                      >
                        <div
                          class="bonus-box relative flex w-full justify-center"
                        >
                          <div
                            style="width: calc(100% - 20px)"
                            class="absolute left-[10px] top-[5px] h-[200px] rounded-lg bg-success-200"
                          ></div>
                          <div
                            class="relative w-full rounded-lg bg-success-300 p-5"
                          >
                            <h3
                              class="text-center text-[28px] font-bold text-white"
                            >
                              60% Bonus
                            </h3>
                            <p
                              class="mb-3 px-5 text-center text-lg font-semibold leading-[24px] text-success-100"
                            >
                              Create an Account and Get Bonus
                            </p>
                            <div class="flex justify-center">
                              <a href="#">
                                <div
                                  class="flex h-[56px] w-[166px] items-center justify-center rounded-lg bg-warning-300 transition duration-300 ease-in-out hover:bg-warning-200"
                                >
                                  <span class="text-sm font-bold text-bgray-900"
                                    >Discover More</span
                                  >
                                </div>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="progess-bar mb-[13px] flex justify-center">
                        <div class="bonus-per relative">
                          <div class="bonus-outer">
                            <div class="bonus-inner">
                              <div class="number">
                                <span class="text-sm font-medium text-bgray-900"
                                  >25%</span
                                >
                              </div>
                            </div>
                          </div>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="80px"
                            height="80px"
                          >
                            <circle
                              style="
                                stroke-dashoffset: calc(215 - 215 * (25 / 100));
                              "
                              cx="40"
                              cy="40"
                              r="35"
                              stroke-linecap="round"
                            />
                          </svg>
                        </div>
                      </div>
                      <p
                        class="mb-2.5 text-center text-sm font-semibold text-success-300"
                      >
                        Discover more
                      </p>
                      <div class="flex justify-center">
                        <img
                          src="./assets/images/avatar/members.png"
                          alt="members"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="profile-wrapper">
                  <div
                    onclick="profileAction()"
                    class="profile-outside fixed -left-[43px] top-0 hidden h-full w-full"
                  ></div>
                  <div
                    style="
                      filter: drop-shadow(12px 12px 40px rgba(0, 0, 0, 0.08));
                    "
                    class="profile-box absolute right-0 top-[81px] hidden w-[300px] overflow-hidden rounded-lg bg-white dark:bg-darkblack-600"
                  >
                    <div class="relative w-full px-3 py-2">
                      <div>
                        <ul>
                          <li class="w-full">
                            <a href="settings.html">
                              <div
                                class="flex items-center space-x-[18px] rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900 hover:dark:bg-darkblack-500"
                              >
                                <div class="w-[20px]">
                                  <span>
                                    <svg
                                      class="stroke-bgray-900 dark:stroke-bgray-50"
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                    >
                                      <path
                                        d="M12.1197 12.7805C12.0497 12.7705 11.9597 12.7705 11.8797 12.7805C10.1197 12.7205 8.71973 11.2805 8.71973 9.51047C8.71973 7.70047 10.1797 6.23047 11.9997 6.23047C13.8097 6.23047 15.2797 7.70047 15.2797 9.51047C15.2697 11.2805 13.8797 12.7205 12.1197 12.7805Z"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                      <path
                                        d="M18.7398 19.3796C16.9598 21.0096 14.5998 21.9996 11.9998 21.9996C9.39977 21.9996 7.03977 21.0096 5.25977 19.3796C5.35977 18.4396 5.95977 17.5196 7.02977 16.7996C9.76977 14.9796 14.2498 14.9796 16.9698 16.7996C18.0398 17.5196 18.6398 18.4396 18.7398 19.3796Z"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                      <path
                                        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                    </svg>
                                  </span>
                                </div>
                                <div class="flex-1">
                                  <span
                                    class="text-sm font-semibold text-bgray-900 dark:text-white"
                                    >My Profile</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="w-full">
                            <a href="messages.html">
                              <div
                                class="flex items-center space-x-[18px] rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900 dark:text-bgray-300 dark:hover:bg-darkblack-500"
                              >
                                <div class="w-[20px]">
                                  <span>
                                    <svg
                                      class="stroke-bgray-900 dark:stroke-gray-300"
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                    >
                                      <path
                                        d="M2 12V7C2 4.79086 3.79086 3 6 3H18C20.2091 3 22 4.79086 22 7V17C22 19.2091 20.2091 21 18 21H8M6 8L9.7812 10.5208C11.1248 11.4165 12.8752 11.4165 14.2188 10.5208L18 8M2 15H8M2 18H8"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                      />
                                    </svg>
                                  </span>
                                </div>
                                <div class="flex-1">
                                  <span class="text-sm font-semibold"
                                    >Inbox</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="w-full">
                            <a href="#">
                              <div
                                class="flex items-center space-x-[18px] rounded-lg p-[14px] text-success-300"
                              >
                                <div class="w-[20px]">
                                  <span>
                                    <svg
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                    >
                                      <path
                                        d="M15 10L13.7071 11.2929C13.3166 11.6834 13.3166 12.3166 13.7071 12.7071L15 14M14 12L22 12M6 20C3.79086 20 2 18.2091 2 16V8C2 5.79086 3.79086 4 6 4M6 20C8.20914 20 10 18.2091 10 16V8C10 5.79086 8.20914 4 6 4M6 20H14C16.2091 20 18 18.2091 18 16M6 4H14C16.2091 4 18 5.79086 18 8"
                                        stroke="#EB292C"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                      />
                                    </svg>
                                  </span>
                                </div>
                                <div class="flex-1">
                                  <span class="text-sm font-semibold"
                                    >Log Out</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="my-[14px] h-[1px] w-full bg-bgray-300"></div>
                      <div>
                        <ul>
                          <li class="w-full">
                            <a href="settings.html">
                              <div
                                class="rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900 dark:text-bgray-50 dark:hover:bg-darkblack-500"
                              >
                                <span class="text-sm font-semibold"
                                  >Settings</span
                                >
                              </div>
                            </a>
                          </li>
                          <li class="w-full">
                            <a href="users.html">
                              <div
                                class="rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900 dark:text-bgray-50 dark:hover:bg-darkblack-500"
                              >
                                <span class="text-sm font-semibold">Users</span>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </header>
          <header class="mobile-wrapper fixed z-20 block w-full md:hidden">
            <div
              class="flex h-[80px] w-full items-center justify-between bg-white dark:bg-darkblack-600"
            >
              <div class="flex h-full w-full items-center space-x-5">
                <button type="button" class="drawer-btn rotate-180 transform">
                  <span>
                    <svg
                      width="16"
                      height="40"
                      viewBox="0 0 16 40"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M0 10C0 4.47715 4.47715 0 10 0H16V40H10C4.47715 40 0 35.5228 0 30V10Z"
                        fill="#F7F7F7"
                      />
                      <path
                        d="M10 15L6 20.0049L10 25.0098"
                        stroke="#A0AEC0"
                        stroke-width="1.2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </span>
                </button>
                <div>
                  <a href="/">
                    <img
                      src="./assets/images/logo/logo-color.svg"
                      class="block dark:hidden"
                      alt="logo"
                    />
                    <img
                      src="./assets/images/logo/logo-white.svg"
                      class="hidden dark:block"
                      alt="logo"
                    />
                  </a>
                </div>
              </div>
              <div class="mr-2">
                <div
                  onclick="profileAction()"
                  class="flex cursor-pointer space-x-0 lg:space-x-3"
                >
                  <div
                    class="h-[52px] w-[52px] overflow-hidden rounded-xl border border-bgray-300"
                  >
                    <img
                      class="object-cover"
                      src="./assets/images/avatar/profile-52x52.png"
                      alt="avater"
                    />
                  </div>
                  <div class="hidden 2xl:block">
                    <div class="flex items-center space-x-2.5">
                      <h3
                        class="text-base font-bold leading-[28px] text-bgray-900"
                      >
                        John Doe
                      </h3>
                      <span>
                        <svg
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M7 10L12 14L17 10"
                            stroke="#28303F"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                        </svg>
                      </span>
                    </div>
                    <p
                      class="text-sm font-medium leading-[20px] text-bgray-600"
                    >
                      Super Admin
                    </p>
                  </div>
                </div>

                <div class="profile-wrapper">
                  <div
                    onclick="profileAction()"
                    class="profile-outside fixed -left-[43px] top-0 hidden h-full w-full"
                  ></div>
                  <div
                    style="
                      filter: drop-shadow(12px 12px 40px rgba(0, 0, 0, 0.08));
                    "
                    class="profile-box absolute right-0 top-[81px] hidden w-[300px] overflow-hidden rounded-lg bg-white"
                  >
                    <div class="relative w-full px-3 py-2">
                      <div>
                        <ul>
                          <li class="w-full">
                            <a href="settings.html">
                              <div
                                class="flex items-center space-x-[18px] rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900"
                              >
                                <div class="w-[20px]">
                                  <span>
                                    <svg
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                    >
                                      <path
                                        d="M12.1197 12.7805C12.0497 12.7705 11.9597 12.7705 11.8797 12.7805C10.1197 12.7205 8.71973 11.2805 8.71973 9.51047C8.71973 7.70047 10.1797 6.23047 11.9997 6.23047C13.8097 6.23047 15.2797 7.70047 15.2797 9.51047C15.2697 11.2805 13.8797 12.7205 12.1197 12.7805Z"
                                        stroke="#111827"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                      <path
                                        d="M18.7398 19.3796C16.9598 21.0096 14.5998 21.9996 11.9998 21.9996C9.39977 21.9996 7.03977 21.0096 5.25977 19.3796C5.35977 18.4396 5.95977 17.5196 7.02977 16.7996C9.76977 14.9796 14.2498 14.9796 16.9698 16.7996C18.0398 17.5196 18.6398 18.4396 18.7398 19.3796Z"
                                        stroke="#111827"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                      <path
                                        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                                        stroke="#111827"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                    </svg>
                                  </span>
                                </div>
                                <div class="flex-1">
                                  <span class="text-sm font-semibold"
                                    >My Profile</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="w-full">
                            <a href="messages.html">
                              <div
                                class="flex items-center space-x-[18px] rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900"
                              >
                                <div class="w-[20px]">
                                  <span>
                                    <svg
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                    >
                                      <path
                                        d="M2 12V7C2 4.79086 3.79086 3 6 3H18C20.2091 3 22 4.79086 22 7V17C22 19.2091 20.2091 21 18 21H8M6 8L9.7812 10.5208C11.1248 11.4165 12.8752 11.4165 14.2188 10.5208L18 8M2 15H8M2 18H8"
                                        stroke="#2A313C"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                      />
                                    </svg>
                                  </span>
                                </div>
                                <div class="flex-1">
                                  <span class="text-sm font-semibold"
                                    >Inbox</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                          <li class="w-full">
                            <a href="#">
                              <div
                                class="flex items-center space-x-[18px] rounded-lg p-[14px] text-success-300"
                              >
                                <div class="w-[20px]">
                                  <span>
                                    <svg
                                      width="24"
                                      height="24"
                                      viewBox="0 0 24 24"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                    >
                                      <path
                                        d="M15 10L13.7071 11.2929C13.3166 11.6834 13.3166 12.3166 13.7071 12.7071L15 14M14 12L22 12M6 20C3.79086 20 2 18.2091 2 16V8C2 5.79086 3.79086 4 6 4M6 20C8.20914 20 10 18.2091 10 16V8C10 5.79086 8.20914 4 6 4M6 20H14C16.2091 20 18 18.2091 18 16M6 4H14C16.2091 4 18 5.79086 18 8"
                                        stroke="#EB292C"
                                        stroke-width="1.5"
                                        stroke-linecap="round"
                                      />
                                    </svg>
                                  </span>
                                </div>
                                <div class="flex-1">
                                  <span class="text-sm font-semibold"
                                    >Log Out</span
                                  >
                                </div>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>
                      <div class="my-[14px] h-[1px] w-full bg-bgray-300"></div>
                      <div>
                        <ul>
                          <li class="w-full">
                            <a href="settings.html">
                              <div
                                class="rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900"
                              >
                                <span class="text-sm font-semibold"
                                  >Settings</span
                                >
                              </div>
                            </a>
                          </li>
                          <li class="w-full">
                            <a href="users.html">
                              <div
                                class="rounded-lg p-[14px] text-bgray-600 hover:bg-bgray-100 hover:text-bgray-900"
                              >
                                <span class="text-sm font-semibold">Users</span>
                              </div>
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </header>













          <main
            class="w-full px-6 pb-6 pt-[100px] sm:pt-[156px] xl:px-[48px] xl:pb-[48px]"
          >
            <!-- write your code here-->
            <div
              class="grid grid-cols-1 rounded-xl bg-white dark:bg-darkblack-600 xl:grid-cols-12"
            >
              <!-- Sidebar -->
              <aside
                class="col-span-3 border-r border-bgray-200 dark:border-darkblack-400"
              >
                <!-- Sidebar Tabs -->

                <div class="px-4 py-6">
                  <div
                    class="tab active flex gap-x-4 rounded-lg p-4 transition-all"
                    data-tab="tab1"
                  >
                    <div
                      class="tab-icon inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bgray-100 transition-all dark:bg-darkblack-500"
                    >
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <ellipse
                          cx="12"
                          cy="17.5"
                          rx="7"
                          ry="3.5"
                          stroke="currentColor"
                          stroke-width="1.5"
                          stroke-linejoin="round"
                        />
                        <circle
                          cx="12"
                          cy="7"
                          r="4"
                          stroke="currentColor"
                          stroke-width="1.5"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4
                        class="text-base font-bold text-bgray-900 dark:text-white"
                      >
                        Personal Informations
                      </h4>
                      <p
                        class="mt-0.5 text-sm font-medium text-bgray-700 dark:text-darkblack-300"
                      >
                        Est arcu pharetra proin pellentesque
                      </p>
                    </div>
                  </div>
                  <div
                    class="tab flex gap-x-4 rounded-lg p-4 transition-all"
                    data-tab="tab2"
                  >
                    <div
                      class="tab-icon inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bgray-100 transition-all"
                    >
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M11.0717 4.06949C8.26334 4.49348 6.01734 6.81294 5.67964 9.79403L5.33476 12.8385C5.24906 13.595 4.94246 14.3069 4.45549 14.88C3.42209 16.0964 4.26081 18 5.83014 18H18.1699C19.7392 18 20.5779 16.0964 19.5445 14.88C19.0575 14.3069 18.7509 13.595 18.6652 12.8385L18.4373 10.8267M15 20C14.5633 21.1652 13.385 22 12 22C10.615 22 9.43668 21.1652 9 20M20 5C20 6.65685 18.6569 8 17 8C15.3431 8 14 6.65685 14 5C14 3.34315 15.3431 2 17 2C18.6569 2 20 3.34315 20 5Z"
                          stroke="currentColor"
                          stroke-width="1.5"
                          stroke-linecap="round"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4
                        class="text-base font-bold text-bgray-900 dark:text-white"
                      >
                        Notification Setting
                      </h4>
                      <p
                        class="mt-0.5 text-sm font-medium text-bgray-700 dark:text-darkblack-300"
                      >
                        Est arcu pharetra proin pellentesque
                      </p>
                    </div>
                  </div>
                  <div
                    data-tab="tab3"
                    class="tab group flex gap-x-4 rounded-lg p-4 transition-all"
                  >
                    <div
                      class="tab-icon inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bgray-100 transition-all"
                    >
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M2 6H6M2 12H6M2 18H6M18 6L10 6M14 10L10 10M8 22H18C20.2091 22 22 20.2091 22 18V6C22 3.79086 20.2091 2 18 2H8C5.79086 2 4 3.79086 4 6V18C4 20.2091 5.79086 22 8 22Z"
                          stroke-width="1.5"
                          stroke-linecap="round"
                          stroke="currentColor"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4
                        class="text-base font-bold text-bgray-900 dark:text-white"
                      >
                        Program & Resources
                      </h4>
                      <p
                        class="mt-0.5 text-sm font-medium text-bgray-700 dark:text-darkblack-300"
                      >
                        Est arcu pharetra proin pellentesque
                      </p>
                    </div>
                  </div>
                  <div
                    data-tab="tab4"
                    class="tab group flex gap-x-4 rounded-lg p-4 transition-all"
                  >
                    <div
                      class="tab-icon inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bgray-100 transition-all"
                    >
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M18 15H12V7H18M18 15C19.1046 15 20 14.1046 20 13V9C20 7.89543 19.1046 7 18 7M18 15V20C18 21.1046 17.1046 22 16 22H8C6.89543 22 6 21.1046 6 20V4C6 2.89543 6.89543 2 8 2H16C17.1046 2 18 2.89543 18 4V7"
                          stroke-width="1.5"
                          stroke="currentColor"
                          stroke-linejoin="round"
                        />
                        <path
                          d="M13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19Z"
                          fill="currentColor"
                        />
                        <path
                          stroke="currentColor"
                          d="M20 10L12 10"
                          stroke-width="1.5"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4
                        class="text-base font-bold text-bgray-900 dark:text-white"
                      >
                        Payment Method
                      </h4>
                      <p
                        class="mt-0.5 text-sm font-medium text-bgray-700 dark:text-darkblack-300"
                      >
                        Est arcu pharetra proin pellentesque
                      </p>
                    </div>
                  </div>
                  <div
                    data-tab="tab5"
                    class="tab flex gap-x-4 rounded-lg p-4 transition-all"
                  >
                    <div
                      class="tab-icon inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bgray-100 transition-all"
                    >
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          fill="currentColor"
                          d="M13.6831 10.0808L14.3138 10.4866L13.6831 10.0808ZM9.25 9C9.25 9.41421 9.58579 9.75 10 9.75C10.4142 9.75 10.75 9.41421 10.75 9H9.25ZM11.25 13.5C11.25 13.9142 11.5858 14.25 12 14.25C12.4142 14.25 12.75 13.9142 12.75 13.5H11.25ZM12.75 16C12.75 15.5858 12.4142 15.25 12 15.25C11.5858 15.25 11.25 15.5858 11.25 16H12.75ZM11.25 17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17H11.25ZM21.25 12C21.25 17.1086 17.1086 21.25 12 21.25V22.75C17.9371 22.75 22.75 17.9371 22.75 12H21.25ZM12 21.25C6.89137 21.25 2.75 17.1086 2.75 12H1.25C1.25 17.9371 6.06294 22.75 12 22.75V21.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75V1.25C6.06294 1.25 1.25 6.06294 1.25 12H2.75ZM12 2.75C17.1086 2.75 21.25 6.89137 21.25 12H22.75C22.75 6.06294 17.9371 1.25 12 1.25V2.75ZM13.25 9C13.25 9.24996 13.1774 9.48068 13.0524 9.67495L14.3138 10.4866C14.5899 10.0576 14.75 9.54634 14.75 9H13.25ZM10.75 9C10.75 8.30964 11.3096 7.75 12 7.75V6.25C10.4812 6.25 9.25 7.48122 9.25 9H10.75ZM12 7.75C12.6904 7.75 13.25 8.30964 13.25 9H14.75C14.75 7.48122 13.5188 6.25 12 6.25V7.75ZM11.25 13V13.5H12.75V13H11.25ZM13.0524 9.67495C12.9265 9.87065 12.7688 10.0731 12.5836 10.3033C12.4063 10.5237 12.1979 10.7764 12.011 11.0333C11.6424 11.5398 11.25 12.2007 11.25 13H12.75C12.75 12.6947 12.9003 12.3605 13.2239 11.9158C13.383 11.697 13.558 11.4851 13.7523 11.2436C13.9387 11.0119 14.1409 10.7554 14.3138 10.4866L13.0524 9.67495ZM11.25 16V17H12.75V16H11.25Z"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4
                        class="text-base font-bold text-bgray-900 dark:text-white"
                      >
                        FAQ
                      </h4>
                      <p
                        class="mt-0.5 text-sm font-medium text-bgray-700 dark:text-darkblack-300"
                      >
                        Est arcu pharetra proin pellentesque
                      </p>
                    </div>
                  </div>
                  <div
                    data-tab="tab6"
                    class="tab group flex gap-x-4 rounded-lg p-4 transition-all"
                  >
                    <div
                      class="tab-icon inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full transition-all"
                    >
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M16 8H8M16 8C18.2091 8 20 9.79086 20 12V18C20 20.2091 18.2091 22 16 22H8C5.79086 22 4 20.2091 4 18V12C4 9.79086 5.79086 8 8 8M16 8V6C16 3.79086 14.2091 2 12 2C9.79086 2 8 3.79086 8 6V8M14 15C14 16.1046 13.1046 17 12 17C10.8954 17 10 16.1046 10 15C10 13.8954 10.8954 13 12 13C13.1046 13 14 13.8954 14 15Z"
                          stroke="currentColor"
                          stroke-width="1.5"
                          stroke-linecap="round"
                          stroke-linejoin="round"
                        />
                      </svg>
                    </div>
                    <div>
                      <h4
                        class="text-base font-bold text-bgray-900 dark:text-white"
                      >
                        Security
                      </h4>
                      <p
                        class="mt-0.5 text-sm font-medium text-bgray-700 dark:text-darkblack-300"
                      >
                        Est arcu pharetra proin pellentesque
                      </p>
                    </div>
                  </div>
                  <div
                    data-tab="tab7"
                    class="tab flex gap-x-4 rounded-lg p-4 transition-all"
                  >
                    <div
                      class="tab-icon inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-bgray-100 transition-all"
                    >
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M9 14L10.7528 15.4023C11.1707 15.7366 11.7777 15.6826 12.1301 15.2799L15 12M16 4H17C19.2091 4 21 5.79086 21 8V18C21 20.2091 19.2091 22 17 22H7C4.79086 22 3 20.2091 3 18V8C3 5.79086 4.79086 4 7 4H8M16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4M16 4C16 2.89543 15.1046 2 14 2H10C8.89543 2 8 2.89543 8 4"
                          stroke-width="1.5"
                          stroke="currentColor"
                          stroke-linecap="round"
                        />
                      </svg>
                    </div>

                    <div>
                      <h4
                        class="text-base font-bold text-bgray-900 dark:text-white"
                      >
                        Terms & Conditions
                      </h4>
                      <p
                        class="mt-0.5 text-sm font-medium text-bgray-700 dark:text-darkblack-300"
                      >
                        Est arcu pharetra proin pellentesque
                      </p>
                    </div>
                  </div>
                </div>
                <!-- Progressbar -->
                <div class="px-8">
                  <div
                    class="rounded-xl bg-bgray-200 p-7 dark:bg-darkblack-500"
                  >
                    <div
                      class="flex flex-row items-center space-x-6 md:flex-col md:space-x-0 2xl:flex-row 2xl:space-x-6"
                    >
                      <div
                        class="progess-bar mb-0 flex justify-center md:mb-[13px] xl:mb-0"
                      >
                        <div class="bonus-per relative">
                          <div class="bonus-outer">
                            <div class="bonus-inner">
                              <div class="number">
                                <span class="text-sm font-medium text-bgray-900"
                                  >64%</span
                                >
                              </div>
                            </div>
                          </div>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="80px"
                            height="80px"
                          >
                            <circle
                              style="
                                stroke-dashoffset: calc(215 - 215 * (64 / 100));
                              "
                              cx="40"
                              cy="40"
                              r="35"
                              stroke-linecap="round"
                            />
                          </svg>
                        </div>
                      </div>
                      <div
                        class="flex flex-col items-start md:items-center xl:items-start"
                      >
                        <h4
                          class="text-base font-bold text-bgray-900 dark:text-white"
                        >
                          Complete profile
                        </h4>
                        <span
                          class="text-xs font-medium text-bgray-700 dark:text-darkblack-300"
                          >Complete your profile to unlock all features</span
                        >
                      </div>
                    </div>
                    <button
                      class="mt-4 w-full rounded-lg bg-success-300 py-3 text-xs font-bold text-white transition-all hover:bg-success-400"
                    >
                      Verify identify
                    </button>
                  </div>
                </div>
              </aside>
              <!--Tab Content -->
              <div class="tab-content col-span-9 px-10 py-8">
                <!-- Personal Information -->
                <div id="tab1" class="tab-pane active">
                  <div
                    class="flex grid-cols-12 flex-col-reverse gap-12 xl:grid 2xl:flex-row"
                  >
                    <div class="xl:col-span-7 2xl:col-span-8">
                      <h3
                        class="border-b border-bgray-200 pb-5 text-2xl font-bold text-bgray-900 dark:border-darkblack-400 dark:text-white"
                      >
                        Personal Information's
                      </h3>
                      <div class="mt-8">
                        <form action="">
                          <div class="grid grid-cols-1 gap-6 2xl:grid-cols-2">
                            <div class="flex flex-col gap-2">
                              <label
                                for="fname"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >First Name</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="fname"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="lname"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Last Name</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="lname"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="email"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Email</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="email"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="phone"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Phone Number (Optional)</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="phone"
                              />
                            </div>
                          </div>
                          <h4
                            class="pb-6 pt-8 text-xl font-bold text-bgray-900 dark:text-white"
                          >
                            Personal Address
                          </h4>
                          <div class="grid grid-cols-1 gap-6 2xl:grid-cols-2">
                            <div class="flex flex-col gap-2">
                              <label
                                for="country"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Country or Region</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="country"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="country"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >City</label
                              >
                              <input
                                type="text"
                                placeholder="Washington"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="country"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="country"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Address</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="address"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="postcode"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Postal Code</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="postcode"
                              />
                            </div>
                          </div>
                          <h4
                            class="pb-6 pt-8 text-xl font-bold text-bgray-900 dark:text-white"
                          >
                            Social Information
                          </h4>
                          <div class="grid grid-cols-1 gap-6 2xl:grid-cols-2">
                            <div class="flex flex-col gap-2">
                              <label
                                for="country"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Facebook</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="fbook"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="twitter"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Twitter</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="twitter"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="linkedin"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Linkedin</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="linkedin"
                              />
                            </div>
                            <div class="flex flex-col gap-2">
                              <label
                                for="youtube"
                                class="text-base font-medium text-bgray-600 dark:text-bgray-50"
                                >Youtube</label
                              >
                              <input
                                type="text"
                                class="h-14 rounded-lg border-0 bg-bgray-50 p-4 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                                name="youtube"
                              />
                            </div>
                          </div>
                          <div class="flex justify-end">
                            <button
                              class="mt-10 rounded-lg bg-success-300 px-4 py-3.5 font-semibold text-white"
                            >
                              Save Profile
                            </button>
                          </div>
                        </form>
                      </div>
                    </div>
                    <div class="xl:col-span-5 2xl:col-span-4 2xl:mt-24">
                      <header class="mb-8">
                        <h4
                          class="mb-2 text-lg font-bold text-bgray-800 dark:text-white"
                        >
                          Update Profile
                        </h4>
                        <p class="mb-4 text-bgray-500">
                          Profile of at least Size
                          <span class="text-bgray-900 dark:text-darkblack-300"
                            >300x300.</span
                          >
                          Gifs work too.
                          <span class="text-bgray-900">Max 5mb.</span>
                        </p>
                        <div class="relative m-auto h-40 w-40 text-center">
                          <img src="assets/images/avatar/profile.png" alt="" />
                          <button class="absolute bottom-1 right-4">
                            <svg
                              width="29"
                              height="29"
                              viewBox="0 0 29 29"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <circle
                                cx="14.2414"
                                cy="14.2414"
                                r="14.2414"
                                fill="#EB292C"
                              />
                              <path
                                d="M14.6994 10.2363C15.7798 11.3167 16.8434 12.3803 17.9171 13.454C17.7837 13.584 17.6403 13.7174 17.5036 13.8574C15.5497 15.8114 13.5924 17.7653 11.6385 19.7192C11.5118 19.8459 11.3884 19.9726 11.2617 20.0927C11.2317 20.1193 11.185 20.1427 11.145 20.1427C10.1281 20.146 9.11108 20.1427 8.0941 20.146C8.02408 20.146 8.01074 20.1193 8.01074 20.0593C8.01074 19.049 8.01074 18.0354 8.01408 17.0251C8.01408 16.9784 8.03742 16.9217 8.06743 16.8917C9.26779 15.688 10.4682 14.4876 11.6685 13.2873C12.6655 12.2903 13.6591 11.2967 14.6561 10.2997C14.6761 10.2797 14.6861 10.253 14.6994 10.2363Z"
                                fill="white"
                              />
                              <path
                                d="M18.6467 12.7197C17.573 11.646 16.506 10.579 15.4424 9.51537C15.6324 9.31864 15.8292 9.11858 16.0259 8.91852C16.256 8.68845 16.4894 8.45838 16.7228 8.22831C17.0162 7.93822 17.4197 7.93822 17.7097 8.22831C18.4466 8.9552 19.1802 9.68542 19.9171 10.4123C20.2038 10.6957 20.2138 11.0992 19.9371 11.3859C19.5136 11.8261 19.0868 12.2629 18.6634 12.703C18.66 12.7097 18.65 12.7163 18.6467 12.7197Z"
                                fill="white"
                              />
                            </svg>
                          </button>
                        </div>
                      </header>
                      <div>
                        <h4
                          class="mb-2 text-lg font-bold text-bgray-800 dark:text-white"
                        >
                          Update Cover
                        </h4>
                        <p class="mb-4 text-bgray-500 dark:text-bgray-50">
                          Cover of at least Size
                          <span class="text-bgray-900">1170x920 </span>
                        </p>
                        <div class="relative w-full">
                          <img
                            src="assets/images/others/cover.jpg"
                            class="w-full"
                            alt=""
                          />
                          <button class="absolute bottom-2 right-2">
                            <svg
                              width="29"
                              height="29"
                              viewBox="0 0 29 29"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <circle
                                cx="14.2414"
                                cy="14.2414"
                                r="14.2414"
                                fill="#EB292C"
                              />
                              <path
                                d="M14.6994 10.2363C15.7798 11.3167 16.8434 12.3803 17.9171 13.454C17.7837 13.584 17.6403 13.7174 17.5036 13.8574C15.5497 15.8114 13.5924 17.7653 11.6385 19.7192C11.5118 19.8459 11.3884 19.9726 11.2617 20.0927C11.2317 20.1193 11.185 20.1427 11.145 20.1427C10.1281 20.146 9.11108 20.1427 8.0941 20.146C8.02408 20.146 8.01074 20.1193 8.01074 20.0593C8.01074 19.049 8.01074 18.0354 8.01408 17.0251C8.01408 16.9784 8.03742 16.9217 8.06743 16.8917C9.26779 15.688 10.4682 14.4876 11.6685 13.2873C12.6655 12.2903 13.6591 11.2967 14.6561 10.2997C14.6761 10.2797 14.6861 10.253 14.6994 10.2363Z"
                                fill="white"
                              />
                              <path
                                d="M18.6467 12.7197C17.573 11.646 16.506 10.579 15.4424 9.51537C15.6324 9.31864 15.8292 9.11858 16.0259 8.91852C16.256 8.68845 16.4894 8.45838 16.7228 8.22831C17.0162 7.93822 17.4197 7.93822 17.7097 8.22831C18.4466 8.9552 19.1802 9.68542 19.9171 10.4123C20.2038 10.6957 20.2138 11.0992 19.9371 11.3859C19.5136 11.8261 19.0868 12.2629 18.6634 12.703C18.66 12.7097 18.65 12.7163 18.6467 12.7197Z"
                                fill="white"
                              />
                            </svg>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Notification -->
                <div id="tab2" class="tab-pane">
                  <h3
                    class="mb-5 text-2xl font-bold text-bgray-900 dark:text-white"
                  >
                    Notification
                  </h3>
                  <div class="space-y-5">
                    <div
                      class="flex flex-col items-end justify-between border-b border-bgray-300 pb-5 dark:border-darkblack-400 sm:flex-row sm:items-center"
                    >
                      <div class="flex gap-x-4">
                        <span
                          ><svg
                            width="60"
                            height="60"
                            viewBox="0 0 60 60"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle cx="30" cy="30" r="30" fill="#EB292C" />
                            <path
                              d="M29.9703 43.7392C27.4494 43.7392 24.9286 43.7512 22.4077 43.7352C20.2721 43.7232 19.0338 42.51 19.0197 40.3809C18.9955 37.0226 18.9915 33.6643 19.0197 30.306C19.0378 28.2088 20.3265 26.9736 22.4481 26.9696C27.4212 26.9597 32.3964 26.9617 37.3695 26.9696C39.604 26.9736 40.8564 28.2208 40.8644 30.4457C40.8745 33.7381 40.8786 37.0306 40.8644 40.323C40.8544 42.506 39.6242 43.7252 37.43 43.7372C34.9434 43.7492 32.4569 43.7392 29.9703 43.7392ZM27.5321 33.7242C27.6108 33.9217 27.6592 34.5403 27.9919 34.7977C28.8954 35.4981 28.7542 36.404 28.7563 37.3159C28.7563 37.7469 28.6272 38.2538 28.8107 38.589C29.0467 39.018 29.5367 39.5827 29.9219 39.5867C30.3131 39.5907 30.8496 39.0499 31.0613 38.6229C31.261 38.2179 31.1319 37.6492 31.1319 37.1543C31.1319 36.3022 31.0936 35.522 31.868 34.8216C32.6041 34.1552 32.4871 32.8881 31.8841 32.062C31.2811 31.2359 30.2002 30.8807 29.2019 31.18C28.2521 31.4653 27.5483 32.4152 27.5321 33.7242Z"
                              fill="white"
                            />
                            <path
                              d="M37.5315 26.0269C36.3356 26.0269 35.2466 26.0269 34.0345 26.0269C34.0345 25.1629 34.0446 24.3447 34.0325 23.5246C33.9982 21.0822 32.2397 19.2345 29.9467 19.2225C27.6497 19.2105 25.8851 21.0423 25.8448 23.4967C25.8306 24.3188 25.8427 25.1429 25.8427 26.0249C24.6448 26.0249 23.5558 26.0249 22.4729 26.0249C21.7126 21.0942 23.5054 17.4326 27.7546 16.1136C32.5603 14.621 37.3984 18.127 37.5274 23.1096C37.5516 24.0634 37.5315 25.0192 37.5315 26.0269Z"
                              fill="white"
                            />
                          </svg>
                        </span>
                        <div class="flex-1">
                          <h4
                            class="text-lg font-bold text-bgray-900 dark:text-white"
                            id="availability-label"
                          >
                            All Notifcation update off
                          </h4>
                          <p
                            class="text-base text-bgray-500 dark:text-darkblack-300"
                            id="availability-description"
                          >
                            Unlockable content, only revealed by the owner of
                            the item.
                          </p>
                        </div>
                      </div>
                      <!-- Enabled: "bg-success-300", Not Enabled: "bg-[#9AA2B1]" -->
                      <button
                        type="button"
                        class="switch-btn active relative inline-flex h-5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent text-center transition-colors duration-200 ease-in-out focus:outline-none"
                        role="switch"
                        aria-checked="false"
                        aria-labelledby="availability-label"
                        aria-describedby="availability-description"
                      >
                        <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
                        <span
                          aria-hidden="true"
                          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                        ></span>
                      </button>
                    </div>
                    <div
                      class="flex flex-col items-end justify-between border-b border-bgray-300 pb-5 dark:border-darkblack-400 sm:flex-row sm:items-center"
                    >
                      <div class="flex gap-x-4">
                        <div class="w-[60px]">
                          <svg
                            width="60"
                            height="60"
                            viewBox="0 0 60 60"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle cx="30" cy="30" r="30" fill="#FFC837" />
                            <path
                              d="M29.9407 27.7853C29.3978 27.6062 28.8874 27.5042 28.4342 27.2802C24.4201 25.2948 20.4135 23.2895 16.4044 21.2942C16.1106 21.1474 15.884 20.9583 15.879 20.6075C15.874 20.2418 16.1006 20.0378 16.4094 19.8835C20.3911 17.9006 24.3728 15.9127 28.352 13.9248C29.4974 13.3526 30.6255 13.4173 31.756 13.987C34.3133 15.2733 36.8806 16.5471 39.443 17.826C40.7503 18.4778 42.0551 19.1321 43.3599 19.7865C43.4346 19.8238 43.5093 19.8586 43.5865 19.896C43.8853 20.0353 44.092 20.2517 44.092 20.5976C44.092 20.9484 43.8704 21.1449 43.5766 21.2892C41.7214 22.2123 39.8688 23.1403 38.0136 24.0633C35.8721 25.1306 33.7406 26.2129 31.5866 27.2529C31.0737 27.5017 30.4935 27.6111 29.9407 27.7853Z"
                              fill="white"
                            />
                            <path
                              d="M28.9083 38.2601C28.9083 40.4844 28.9108 42.7086 28.9058 44.9329C28.9033 45.724 28.4576 46.0027 27.728 45.6668C24.0775 43.9874 20.4245 42.313 16.7814 40.6212C15.6086 40.0763 15.0109 39.1235 15.006 37.8347C14.996 33.5952 15.001 29.3557 15.0035 25.1162C15.0035 24.2976 15.4641 23.9941 16.1962 24.3325C19.9713 26.0716 23.7438 27.8206 27.5213 29.5522C28.48 29.9926 28.9232 30.7091 28.9158 31.7566C28.9008 33.9261 28.9108 36.0931 28.9108 38.2626C28.9108 38.2601 28.9108 38.2601 28.9083 38.2601Z"
                              fill="white"
                            />
                            <path
                              d="M31.0591 38.198C31.0591 36.016 31.0641 33.8341 31.0567 31.6521C31.0542 30.6669 31.5049 29.9877 32.3889 29.5797C36.1888 27.8281 39.9912 26.0816 43.7911 24.3325C44.4834 24.0141 44.959 24.3002 44.959 25.054C44.964 29.3358 44.9714 33.6151 44.954 37.8969C44.949 39.2081 44.2767 40.1237 43.0939 40.671C40.1406 42.0344 37.1848 43.3954 34.2316 44.7563C33.5991 45.0474 32.9691 45.3385 32.3391 45.6295C31.4825 46.0226 31.0567 45.7564 31.0567 44.8259C31.0567 42.6166 31.0567 40.4048 31.0567 38.1955C31.0591 38.198 31.0591 38.198 31.0591 38.198Z"
                              fill="white"
                            />
                          </svg>
                        </div>

                        <div class="flex-1">
                          <h4
                            class="text-lg font-bold text-bgray-900 dark:text-white"
                            id="availability-label"
                          >
                            When you upload products
                          </h4>
                          <p
                            class="text-base text-bgray-500 dark:text-darkblack-300"
                            id="availability-description"
                          >
                            Evey new products upload seccessfullly doen you can
                            get notifcation
                          </p>
                        </div>
                      </div>
                      <button
                        type="button"
                        class="switch-btn relative inline-flex h-5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent text-center transition-colors duration-200 ease-in-out focus:outline-none"
                        role="switch"
                        aria-checked="false"
                        aria-labelledby="availability-label"
                        aria-describedby="availability-description"
                      >
                        <span
                          aria-hidden="true"
                          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                        ></span>
                      </button>
                    </div>
                    <div
                      class="flex flex-col items-end justify-between border-b border-bgray-300 pb-5 dark:border-darkblack-400 sm:flex-row sm:items-center"
                    >
                      <div class="flex gap-x-4">
                        <div class="w-[60px]">
                          <svg
                            width="60"
                            height="60"
                            viewBox="0 0 60 60"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle cx="30" cy="30" r="30" fill="#2DD4BF" />
                            <path
                              d="M41.8283 27.5958C41.4072 29.0508 41.0641 30.4376 40.5806 31.7718C40.4617 32.101 39.8846 32.4672 39.5142 32.4711C35.1806 32.5217 30.8469 32.5042 26.5133 32.5061C25.8719 32.5061 25.4625 32.1906 25.3163 31.577C24.6301 28.7099 23.9381 25.8428 23.283 22.9698C23.0842 22.1011 23.4799 21.5654 24.3182 21.5596C27.8506 21.5362 31.383 21.5499 35.0032 21.5499C34.9603 23.4236 35.4711 25.0617 36.8922 26.3102C38.2822 27.5393 39.9256 27.9055 41.8283 27.5958Z"
                              fill="white"
                            />
                            <path
                              d="M24.4176 33.5096C27.334 33.5096 30.1997 33.5096 33.0654 33.5096C34.9408 33.5096 36.8162 33.5057 38.6915 33.5116C39.5649 33.5135 40.0601 33.905 40.0835 34.5809C40.1069 35.2918 39.5961 35.7242 38.6877 35.7242C33.7224 35.7281 28.759 35.7281 23.7938 35.7242C22.7878 35.7242 22.5091 35.4788 22.2888 34.464C21.3452 30.1049 20.3939 25.7477 19.4679 21.3847C19.3587 20.8724 19.1579 20.5841 18.6296 20.4225C17.419 20.0524 16.2318 19.6044 15.0368 19.1837C14.0328 18.8292 13.6605 18.2877 13.9334 17.5924C14.2024 16.9048 14.7853 16.7295 15.7386 17.0606C17.2221 17.5748 18.692 18.128 20.1912 18.5955C20.9476 18.8311 21.3082 19.2577 21.4681 20.0212C22.3824 24.3589 23.3317 28.6889 24.2733 33.0207C24.3006 33.1493 24.3474 33.2778 24.4176 33.5096Z"
                              fill="white"
                            />
                            <path
                              d="M35.6934 22.2151C35.6798 19.5116 37.8729 17.3145 40.5788 17.3243C43.23 17.332 45.4134 19.533 45.4095 22.1957C45.4056 24.8505 43.2144 27.0456 40.5573 27.0515C37.9022 27.0573 35.7071 24.8758 35.6934 22.2151ZM42.6257 20.057C41.7465 20.9978 40.8848 21.921 39.8614 23.0176C39.3721 22.3534 38.9763 21.8197 38.524 21.2081C38.0698 21.6834 37.7696 21.997 37.5747 22.2034C38.4051 23.0605 39.1986 23.8766 39.9316 24.6343C41.1207 23.4422 42.345 22.2171 43.6726 20.8867C43.4562 20.7153 43.1969 20.5089 42.9357 20.3024C42.8538 20.2342 42.77 20.1719 42.6257 20.057Z"
                              fill="white"
                            />
                            <path
                              d="M37.4854 36.6242C39.2068 36.6086 40.6104 37.9603 40.6436 39.6666C40.6767 41.4021 39.2653 42.8259 37.5147 42.8259C35.805 42.8259 34.4072 41.4371 34.3994 39.7367C34.3936 38.0285 35.7699 36.6417 37.4854 36.6242ZM38.8929 39.7153C38.891 38.9615 38.2984 38.3499 37.5537 38.3343C36.7817 38.3168 36.1384 38.9537 36.1423 39.7309C36.1462 40.4769 36.7485 41.0963 37.4854 41.1157C38.2574 41.1352 38.8968 40.5002 38.8929 39.7153Z"
                              fill="white"
                            />
                            <path
                              d="M24.8751 42.825C23.1556 42.8113 21.7754 41.4304 21.7793 39.7261C21.7852 37.9672 23.179 36.6018 24.9491 36.6213C26.6569 36.6408 28.0273 38.0471 28.0078 39.7592C27.9864 41.4713 26.5906 42.8367 24.8751 42.825ZM26.2709 39.728C26.2728 38.945 25.6334 38.3159 24.8556 38.3353C24.1226 38.3548 23.4968 38.9879 23.4968 39.7163C23.4948 40.4467 24.1148 41.0876 24.8439 41.1129C25.6178 41.1401 26.2689 40.5071 26.2709 39.728Z"
                              fill="white"
                            />
                          </svg>
                        </div>

                        <div class="flex-1">
                          <h4
                            class="text-lg font-bold text-bgray-900 dark:text-white"
                            id="availability-label"
                          >
                            You got sell your prodcuts
                          </h4>
                          <p
                            class="text-base text-bgray-500 dark:text-darkblack-300"
                            id="availability-description"
                          >
                            Evey new prodcuts sell you can get notifcation
                          </p>
                        </div>
                      </div>
                      <button
                        type="button"
                        class="switch-btn active relative inline-flex h-5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent text-center transition-colors duration-200 ease-in-out focus:outline-none"
                        role="switch"
                        aria-checked="false"
                        aria-labelledby="availability-label"
                        aria-describedby="availability-description"
                      >
                        <span
                          aria-hidden="true"
                          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                        ></span>
                      </button>
                    </div>
                    <div
                      class="flex flex-col items-end justify-between border-b border-bgray-300 pb-5 dark:border-darkblack-400 sm:flex-row sm:items-center"
                    >
                      <div class="flex gap-x-4">
                        <div class="w-[60px]">
                          <img src="assets/images/icons/follower.svg" alt="" />
                        </div>
                        <div class="flex-1">
                          <h4
                            class="text-lg font-bold text-bgray-900 dark:text-white"
                            id="availability-label"
                          >
                            Got new follower
                          </h4>
                          <p
                            class="text-base text-bgray-500 dark:text-darkblack-300"
                            id="availability-description"
                          >
                            Evey new follower you can get notifcation
                          </p>
                        </div>
                      </div>
                      <button
                        type="button"
                        class="switch-btn relative inline-flex h-5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent text-center transition-colors duration-200 ease-in-out focus:outline-none"
                        role="switch"
                        aria-checked="false"
                        aria-labelledby="availability-label"
                        aria-describedby="availability-description"
                      >
                        <span
                          aria-hidden="true"
                          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                        ></span>
                      </button>
                    </div>
                    <div
                      class="flex flex-col items-end justify-between border-b border-bgray-300 pb-5 dark:border-darkblack-400 sm:flex-row sm:items-center"
                    >
                      <div class="flex gap-x-4">
                        <div class="w-[60px]">
                          <svg
                            width="60"
                            height="60"
                            viewBox="0 0 60 60"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <circle cx="30" cy="30" r="30" fill="#936DFF" />
                            <path
                              d="M37.9128 13.2706C38.2013 13.4189 38.2864 13.6656 38.2814 13.9739C38.2714 14.5905 38.2781 15.2088 38.2781 15.8655C38.4182 15.8655 38.5299 15.8655 38.6417 15.8655C40.1145 15.8671 41.5857 15.8671 43.0586 15.8688C43.9126 15.8705 44.2879 16.2605 44.2696 17.1121C44.2229 19.197 44.0077 21.2602 43.4005 23.2651C42.9368 24.8 42.283 26.2332 41.0787 27.3482C40.3331 28.0381 39.4523 28.4581 38.4415 28.5831C38.2514 28.6064 38.1863 28.6747 38.1463 28.8631C37.4691 32.0529 35.5742 34.1344 32.4467 35.0877C32.3116 35.1294 32.2032 35.161 32.2032 35.3494C32.2099 37.3242 32.2099 39.2991 32.2115 41.274C32.2115 41.304 32.2249 41.334 32.2399 41.394C32.345 41.399 32.4567 41.409 32.5685 41.409C33.2307 41.4107 33.8929 41.414 34.5551 41.4073C34.842 41.404 35.0538 41.5057 35.2206 41.7473C35.8878 42.7156 36.565 43.6789 37.2389 44.6422C37.3773 44.8405 37.5125 45.0721 37.3306 45.2721C37.2005 45.4138 36.9637 45.5304 36.7735 45.5321C32.4 45.5471 28.0248 45.5421 23.6513 45.5454C23.4178 45.5454 23.2109 45.5054 23.0858 45.2821C22.9524 45.0421 23.0491 44.8422 23.1892 44.6422C23.8581 43.6872 24.5287 42.7339 25.1875 41.7723C25.3677 41.5107 25.5945 41.404 25.9031 41.4073C26.6587 41.4157 27.4143 41.409 28.2033 41.409C28.21 41.274 28.22 41.1624 28.22 41.0507C28.2216 39.1908 28.2166 37.3326 28.225 35.4727C28.2266 35.2377 28.1633 35.1394 27.9214 35.0644C24.8823 34.1178 22.9974 32.0945 22.3119 28.9831C22.2502 28.7031 22.1551 28.6081 21.8598 28.5614C20.407 28.3364 19.3128 27.5315 18.4738 26.3532C17.5047 24.9916 16.9993 23.44 16.659 21.8285C16.3287 20.2636 16.1769 18.6753 16.1536 17.0754C16.1419 16.2388 16.5255 15.8655 17.3679 15.8638C18.8291 15.8621 20.2919 15.8605 21.7531 15.8605C21.8682 15.8605 21.9833 15.8605 22.1484 15.8605C22.1484 15.5655 22.1484 15.2872 22.1484 15.0089C22.1484 14.6622 22.1567 14.3156 22.1467 13.9689C22.1367 13.6606 22.2268 13.4123 22.5154 13.2656C27.6478 13.2706 32.7803 13.2706 37.9128 13.2706ZM30.2132 18.5787C29.8947 19.222 29.561 19.7753 29.3425 20.3719C29.109 21.0102 28.7154 21.2668 28.0482 21.2935C27.4177 21.3202 26.7922 21.4652 26.1116 21.5652C26.2217 21.6818 26.2901 21.7568 26.3635 21.8285C26.8972 22.3501 27.4393 22.8634 27.9581 23.3984C28.0548 23.4984 28.1165 23.69 28.1015 23.8284C28.0565 24.245 27.9631 24.655 27.8914 25.0683C27.8196 25.4933 27.7513 25.9199 27.6729 26.3999C28.4652 25.9832 29.2041 25.6083 29.9297 25.2083C30.1415 25.0916 30.3 25.1033 30.5051 25.2149C31.2307 25.6116 31.968 25.9882 32.7236 26.3832C32.7236 26.2899 32.7319 26.2282 32.7219 26.1716C32.5902 25.4066 32.4667 24.64 32.3183 23.8784C32.2749 23.6534 32.3233 23.5084 32.4884 23.355C32.9338 22.9401 33.3624 22.5051 33.8011 22.0818C33.9629 21.9251 34.1331 21.7768 34.3649 21.5668C33.4609 21.4368 32.6652 21.3135 31.8662 21.2102C31.6077 21.1768 31.4409 21.0968 31.3225 20.8335C30.9872 20.0969 30.6086 19.3736 30.2132 18.5787ZM42.2813 17.892C40.9219 17.892 39.6075 17.892 38.3014 17.892C38.3014 20.8019 38.3014 23.6834 38.3014 26.6449C38.6517 26.4965 38.9753 26.3999 39.2555 26.2315C40.1512 25.6932 40.6617 24.84 41.057 23.91C41.5991 22.6368 41.8943 21.2968 42.0745 19.9319C42.1612 19.2569 42.2112 18.5803 42.2813 17.892ZM22.1301 26.5865C22.1301 23.6717 22.1301 20.7819 22.1301 17.8854C20.8023 17.8854 19.4963 17.8854 18.1819 17.8854C18.1785 17.947 18.1719 17.987 18.1735 18.027C18.2753 19.6969 18.4988 21.3468 19.0142 22.9434C19.3278 23.9133 19.7198 24.855 20.4287 25.6199C20.8874 26.1166 21.4262 26.4749 22.1301 26.5865Z"
                              fill="white"
                            />
                          </svg>
                        </div>

                        <div class="flex-1">
                          <h4
                            class="text-lg font-bold text-bgray-900 dark:text-white"
                            id="availability-label"
                          >
                            Auther leavel up
                          </h4>
                          <p
                            class="text-base text-bgray-500 dark:text-darkblack-300"
                            id="availability-description"
                          >
                            Evey new prodcuts sell you can get notifcation
                          </p>
                        </div>
                      </div>

                      <button
                        type="button"
                        class="switch-btn toggle-switch relative inline-flex h-5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-300 text-center transition-colors duration-200 ease-in-out focus:outline-none"
                        role="switch"
                        aria-checked="false"
                        aria-labelledby="availability-label"
                        aria-describedby="availability-description"
                      >
                        <span
                          aria-hidden="true"
                          class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                        ></span>
                      </button>
                    </div>
                  </div>
                </div>
                <!-- Program & Resources -->
                <div id="tab3" class="tab-pane">
                  <div class="grid grid-cols-12">
                    <div
                      class="col-span-12 border-bgray-300 2xl:col-span-9 2xl:border-r"
                    >
                      <h3
                        class="mb-3 text-2xl font-bold text-bgray-900 dark:text-white"
                      >
                        Folders
                      </h3>
                      <div class="flex flex-wrap gap-3 gap-y-5 lg:gap-x-0">
                        <div
                          class="flex h-24 w-24 flex-col items-center md:h-32 md:w-32 lg:h-44 lg:w-44"
                        >
                          <svg
                            width="120"
                            height="120"
                            viewBox="0 0 120 120"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M7.56578 12.9268H36.2647C38.1443 12.9268 39.8804 13.9307 40.8183 15.5595L45.5417 22.0121C46.4796 23.6408 48.216 24.6448 50.0953 24.6448H120V98.3153C120 102.184 116.863 105.321 112.994 105.321H7.00587C3.13675 105.321 0 102.184 0 98.3153V32.8171C0 27.4018 0.836656 22.0188 2.4805 16.8589C3.08269 14.5432 5.17317 12.9268 7.56578 12.9268Z"
                              fill="#4ADE80"
                            />
                            <path
                              d="M103.16 23.4395H10.9199V62.4043H103.16V23.4395Z"
                              fill="#EBF0F3"
                            />
                            <path
                              d="M114.746 16.4297H85.825C83.7683 16.4297 81.9005 17.6297 81.0459 19.5003L76.097 30.3312C75.2421 32.2019 73.3746 33.4019 71.3179 33.4019H0V100.067C0 103.936 3.13675 107.072 7.00587 107.072H112.994C116.863 107.072 120 103.936 120 100.067V21.6841C120 18.7823 117.647 16.4297 114.746 16.4297Z"
                              fill="#EB292C"
                            />
                          </svg>
                          <h4
                            class="text-sm font-semibold dark:text-white md:text-xl"
                          >
                            2021 Invoice
                          </h4>
                          <span
                            class="text-xs text-bgray-600 dark:text-darkblack-300 md:text-base"
                            >120 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center md:h-32 md:w-32 lg:h-44 lg:w-44"
                        >
                          <svg
                            width="120"
                            height="120"
                            viewBox="0 0 120 120"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M7.56578 12.9268H36.2647C38.1443 12.9268 39.8804 13.9307 40.8183 15.5595L45.5417 22.0121C46.4796 23.6408 48.216 24.6448 50.0953 24.6448H120V98.3153C120 102.184 116.863 105.321 112.994 105.321H7.00587C3.13675 105.321 0 102.184 0 98.3153V32.8171C0 27.4018 0.836656 22.0188 2.4805 16.8589C3.08269 14.5432 5.17317 12.9268 7.56578 12.9268Z"
                              fill="#4ADE80"
                            />
                            <path
                              d="M103.16 23.4395H10.9199V62.4043H103.16V23.4395Z"
                              fill="#EBF0F3"
                            />
                            <path
                              d="M114.746 16.4297H85.825C83.7683 16.4297 81.9005 17.6297 81.0459 19.5003L76.097 30.3312C75.2421 32.2019 73.3746 33.4019 71.3179 33.4019H0V100.067C0 103.936 3.13675 107.072 7.00587 107.072H112.994C116.863 107.072 120 103.936 120 100.067V21.6841C120 18.7823 117.647 16.4297 114.746 16.4297Z"
                              fill="#EB292C"
                            />
                          </svg>
                          <h4
                            class="text-sm font-semibold dark:text-white md:text-xl"
                          >
                            2021 Invoice
                          </h4>
                          <span
                            class="text-xs text-bgray-600 dark:text-darkblack-300 md:text-base"
                            >120 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center md:h-32 md:w-32 lg:h-44 lg:w-44"
                        >
                          <svg
                            width="120"
                            height="120"
                            viewBox="0 0 120 120"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M7.56578 12.9268H36.2647C38.1443 12.9268 39.8804 13.9307 40.8183 15.5595L45.5417 22.0121C46.4796 23.6408 48.216 24.6448 50.0953 24.6448H120V98.3153C120 102.184 116.863 105.321 112.994 105.321H7.00587C3.13675 105.321 0 102.184 0 98.3153V32.8171C0 27.4018 0.836656 22.0188 2.4805 16.8589C3.08269 14.5432 5.17317 12.9268 7.56578 12.9268Z"
                              fill="#4ADE80"
                            />
                            <path
                              d="M103.16 23.4395H10.9199V62.4043H103.16V23.4395Z"
                              fill="#EBF0F3"
                            />
                            <path
                              d="M114.746 16.4297H85.825C83.7683 16.4297 81.9005 17.6297 81.0459 19.5003L76.097 30.3312C75.2421 32.2019 73.3746 33.4019 71.3179 33.4019H0V100.067C0 103.936 3.13675 107.072 7.00587 107.072H112.994C116.863 107.072 120 103.936 120 100.067V21.6841C120 18.7823 117.647 16.4297 114.746 16.4297Z"
                              fill="#EB292C"
                            />
                          </svg>
                          <h4
                            class="text-sm font-semibold dark:text-white md:text-xl"
                          >
                            2021 Invoice
                          </h4>
                          <span
                            class="text-xs text-bgray-600 dark:text-darkblack-300 md:text-base"
                            >120 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center md:h-32 md:w-32 lg:h-44 lg:w-44"
                        >
                          <svg
                            width="120"
                            height="120"
                            viewBox="0 0 120 120"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M7.56578 12.9268H36.2647C38.1443 12.9268 39.8804 13.9307 40.8183 15.5595L45.5417 22.0121C46.4796 23.6408 48.216 24.6448 50.0953 24.6448H120V98.3153C120 102.184 116.863 105.321 112.994 105.321H7.00587C3.13675 105.321 0 102.184 0 98.3153V32.8171C0 27.4018 0.836656 22.0188 2.4805 16.8589C3.08269 14.5432 5.17317 12.9268 7.56578 12.9268Z"
                              fill="#4ADE80"
                            />
                            <path
                              d="M103.16 23.4395H10.9199V62.4043H103.16V23.4395Z"
                              fill="#EBF0F3"
                            />
                            <path
                              d="M114.746 16.4297H85.825C83.7683 16.4297 81.9005 17.6297 81.0459 19.5003L76.097 30.3312C75.2421 32.2019 73.3746 33.4019 71.3179 33.4019H0V100.067C0 103.936 3.13675 107.072 7.00587 107.072H112.994C116.863 107.072 120 103.936 120 100.067V21.6841C120 18.7823 117.647 16.4297 114.746 16.4297Z"
                              fill="#EB292C"
                            />
                          </svg>
                          <h4
                            class="text-sm font-semibold dark:text-white md:text-xl"
                          >
                            2021 Invoice
                          </h4>
                          <span
                            class="text-xs text-bgray-600 dark:text-darkblack-300 md:text-base"
                            >120 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center md:h-32 md:w-32 lg:h-44 lg:w-44"
                        >
                          <svg
                            width="120"
                            height="120"
                            viewBox="0 0 120 120"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M7.56578 12.9268H36.2647C38.1443 12.9268 39.8804 13.9307 40.8183 15.5595L45.5417 22.0121C46.4796 23.6408 48.216 24.6448 50.0953 24.6448H120V98.3153C120 102.184 116.863 105.321 112.994 105.321H7.00587C3.13675 105.321 0 102.184 0 98.3153V32.8171C0 27.4018 0.836656 22.0188 2.4805 16.8589C3.08269 14.5432 5.17317 12.9268 7.56578 12.9268Z"
                              fill="#4ADE80"
                            />
                            <path
                              d="M103.16 23.4395H10.9199V62.4043H103.16V23.4395Z"
                              fill="#EBF0F3"
                            />
                            <path
                              d="M114.746 16.4297H85.825C83.7683 16.4297 81.9005 17.6297 81.0459 19.5003L76.097 30.3312C75.2421 32.2019 73.3746 33.4019 71.3179 33.4019H0V100.067C0 103.936 3.13675 107.072 7.00587 107.072H112.994C116.863 107.072 120 103.936 120 100.067V21.6841C120 18.7823 117.647 16.4297 114.746 16.4297Z"
                              fill="#EB292C"
                            />
                          </svg>
                          <h4
                            class="text-sm font-semibold dark:text-white md:text-xl"
                          >
                            2021 Invoice
                          </h4>
                          <span
                            class="text-xs text-bgray-600 dark:text-darkblack-300 md:text-base"
                            >120 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center justify-center rounded-lg border-2 border-dashed border-bgray-300 dark:border-darkblack-400 md:h-32 md:w-32 lg:h-44 lg:w-44"
                        >
                          <button class="flex flex-col items-center">
                            <span
                              class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-[#F8F8F8] dark:bg-darkblack-500"
                              ><svg
                                class="fill-bgray-900 dark:fill-white"
                                width="16"
                                height="16"
                                viewBox="0 0 16 16"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                              >
                                <path
                                  fill-rule="evenodd"
                                  clip-rule="evenodd"
                                  d="M8.79995 4.0002C8.79995 3.55837 8.44178 3.2002 7.99995 3.2002C7.55812 3.2002 7.19995 3.55837 7.19995 4.0002V7.2002H3.99995C3.55812 7.2002 3.19995 7.55837 3.19995 8.0002C3.19995 8.44202 3.55812 8.8002 3.99995 8.8002H7.19995V12.0002C7.19995 12.442 7.55812 12.8002 7.99995 12.8002C8.44178 12.8002 8.79995 12.442 8.79995 12.0002V8.8002H12C12.4418 8.8002 12.8 8.44202 12.8 8.0002C12.8 7.55837 12.4418 7.2002 12 7.2002H8.79995V4.0002Z"
                                /></svg
                            ></span>
                            <span
                              class="mt-4 block text-base font-medium text-bgray-500"
                              >Add Folder</span
                            >
                          </button>
                        </div>
                      </div>
                      <h3
                        class="mb-5 mt-10 text-3xl font-bold text-bgray-900 dark:text-white"
                      >
                        Files
                      </h3>
                      <div
                        class="flex flex-wrap gap-x-3 gap-y-5 md:gap-x-10 lg:gap-x-0"
                      >
                        <div
                          class="flex h-24 w-24 flex-col items-center lg:h-44 lg:w-44"
                        >
                          <div class="flex w-full justify-center">
                            <svg
                              width="67"
                              height="86"
                              viewBox="0 0 67 86"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M5.4032 0H46.9892L67 19.8123V80.625C67 83.5946 64.5796 86 61.5968 86H5.4032C2.42052 86 0 83.5946 0 80.625V5.37496C0 2.40536 2.4208 0 5.4032 0Z"
                                fill="white"
                              />
                              <path
                                d="M5.4032 0.5H46.7835L66.5 20.0208V80.625C66.5 83.3158 64.306 85.5 61.5968 85.5H5.4032C2.69405 85.5 0.5 83.3158 0.5 80.625V5.37496C0.5 2.68413 2.6943 0.5 5.4032 0.5Z"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M65.9198 20.4252H51.2864C48.6265 20.4252 46.468 18.2802 46.468 15.6368V1.0752"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M17.2903 31.0996C17.2903 30.5473 17.738 30.0996 18.2903 30.0996H48.7098C49.262 30.0996 49.7098 30.5473 49.7098 31.0996V63.4996C49.7098 64.0519 49.262 64.4996 48.7098 64.4996H18.2903C17.738 64.4996 17.2903 64.0519 17.2903 63.4996V31.0996Z"
                                fill="#304FFD"
                              />
                              <path
                                d="M40.6533 41.7275C40.7643 41.4409 40.9309 41.2259 41.153 41.0825C41.3874 40.9272 41.6465 40.8496 41.9303 40.8496C42.2881 40.8496 42.5904 40.9571 42.8372 41.1721C43.0963 41.3871 43.2259 41.6797 43.2259 42.05C43.2259 42.2292 43.1888 42.4263 43.1148 42.6413L39.2652 52.8359C39.1541 53.1225 38.9567 53.3495 38.6729 53.5167C38.4015 53.672 38.0992 53.7496 37.7661 53.7496C37.4329 53.7496 37.1306 53.672 36.8592 53.5167C36.5877 53.3495 36.3965 53.1225 36.2854 52.8359L33.5278 45.2929L30.6961 52.8359C30.585 53.1225 30.3938 53.3495 30.1223 53.5167C29.8509 53.672 29.5486 53.7496 29.2155 53.7496C28.8947 53.7496 28.5924 53.672 28.3086 53.5167C28.0371 53.3495 27.8459 53.1225 27.7348 52.8359L23.8852 42.6413C23.8112 42.4382 23.7742 42.2471 23.7742 42.0679C23.7742 41.6977 23.9099 41.405 24.1813 41.19C24.4528 40.9631 24.7736 40.8496 25.1437 40.8496C25.4399 40.8496 25.7051 40.9272 25.9396 41.0825C26.1864 41.2259 26.3653 41.4409 26.4763 41.7275L29.3265 49.6646L32.2878 41.7634C32.3988 41.4767 32.5715 41.2557 32.806 41.1004C33.0527 40.9452 33.3119 40.8675 33.5833 40.8675C33.8671 40.8675 34.1262 40.9452 34.3606 41.1004C34.5951 41.2557 34.7678 41.4827 34.8788 41.7813L37.7105 49.8079L40.6533 41.7275Z"
                                fill="white"
                              />
                            </svg>
                          </div>
                          <h4
                            class="mt-2 text-sm font-semibold dark:text-white md:text-base"
                          >
                            All Invoice
                          </h4>
                          <span
                            class="text-base text-bgray-600 dark:text-bgray-50"
                            >1.4 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center lg:h-44 lg:w-44"
                        >
                          <div class="flex w-full justify-center">
                            <svg
                              width="67"
                              height="86"
                              viewBox="0 0 67 86"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M5.4032 0H46.9892L67 19.8123V80.625C67 83.5946 64.5796 86 61.5968 86H5.4032C2.42052 86 0 83.5946 0 80.625V5.37496C0 2.40536 2.4208 0 5.4032 0Z"
                                fill="white"
                              />
                              <path
                                d="M5.4032 0.5H46.7835L66.5 20.0208V80.625C66.5 83.3158 64.306 85.5 61.5968 85.5H5.4032C2.69405 85.5 0.5 83.3158 0.5 80.625V5.37496C0.5 2.68413 2.6943 0.5 5.4032 0.5Z"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M65.9198 20.4252H51.2864C48.6265 20.4252 46.468 18.2802 46.468 15.6368V1.0752"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M34.7022 51.4466V48.8359H37.3266V46.2252H34.7022V43.6145H37.3266V41.0038H34.7022V38.3931H37.3266V35.7823H34.7022V33.1716H37.3266V30.5609H34.7022V27.9502H32.0777V30.5609H29.4533V33.1716H32.0777V35.7823H29.4533V38.3931H32.0777V41.0038H29.4533V43.6145H32.0777V46.2252H29.4533V48.8359H32.0777V51.4466H26.8289V57.9734C26.8289 61.5723 29.7722 64.5002 33.3899 64.5002C37.0077 64.5002 39.951 61.5723 39.951 57.9734V51.4466H34.7022ZM37.3266 57.9734C37.3266 60.1325 35.5603 61.8895 33.3899 61.8895C31.2195 61.8895 29.4533 60.1325 29.4533 57.9734V54.0573H37.3266V57.9734Z"
                                fill="#8A9099"
                              />
                              <path
                                d="M32.0778 59.2787H34.7023C35.4266 59.2787 36.0145 58.6952 36.0145 57.9733C36.0145 57.2515 35.4266 56.668 34.7023 56.668H32.0778C31.3535 56.668 30.7656 57.2515 30.7656 57.9733C30.7656 58.6952 31.3535 59.2787 32.0778 59.2787Z"
                                fill="#8A9099"
                              />
                            </svg>
                          </div>

                          <h4
                            class="mt-2 text-sm font-semibold dark:text-white md:text-base"
                          >
                            Bank Stat..
                          </h4>
                          <span
                            class="text-sm text-bgray-600 dark:text-bgray-50"
                            >1.9 GB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center lg:h-44 lg:w-44"
                        >
                          <div class="flex w-full justify-center">
                            <svg
                              width="67"
                              height="86"
                              viewBox="0 0 67 86"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M5.4032 0H46.9892L67 19.8123V80.625C67 83.5946 64.5796 86 61.5968 86H5.4032C2.42052 86 0 83.5946 0 80.625V5.37496C0 2.40536 2.4208 0 5.4032 0Z"
                                fill="white"
                              />
                              <path
                                d="M5.4032 0.5H46.7835L66.5 20.0208V80.625C66.5 83.3158 64.306 85.5 61.5968 85.5H5.4032C2.69405 85.5 0.5 83.3158 0.5 80.625V5.37496C0.5 2.68413 2.6943 0.5 5.4032 0.5Z"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M65.9198 20.4252H51.2864C48.6265 20.4252 46.468 18.2802 46.468 15.6368V1.0752"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M33.1393 41.8448C33.1393 43.1315 32.8209 44.3378 32.184 45.4636C31.5706 46.5895 30.5917 47.497 29.2471 48.1863C27.9262 48.8756 26.2513 49.2203 24.2227 49.2203H20.0828V58.4569H15.1292V34.4004H24.2227C26.1334 34.4004 27.761 34.7221 29.1056 35.3654C30.4502 36.0088 31.4527 36.8933 32.1132 38.0192C32.7973 39.1451 33.1393 40.4203 33.1393 41.8448ZM24.0104 45.3258C25.3785 45.3258 26.3929 45.0271 27.0534 44.4297C27.7139 43.8093 28.0441 42.9477 28.0441 41.8448C28.0441 39.5012 26.6995 38.3294 24.0104 38.3294H20.0828V45.3258H24.0104Z"
                                fill="#5889C4"
                              />
                              <path
                                d="M44.1576 58.7671C42.5536 58.7671 41.1147 58.4913 39.8409 57.9399C38.5671 57.3655 37.5527 56.5958 36.7979 55.6308C36.0666 54.6657 35.6656 53.5973 35.5949 52.4255H40.5839C40.6783 53.1608 41.0439 53.7697 41.6808 54.2522C42.3413 54.7347 43.1551 54.9759 44.1223 54.9759C45.0658 54.9759 45.7971 54.7921 46.316 54.4245C46.8586 54.0569 47.1299 53.5858 47.1299 53.0114C47.1299 52.3911 46.7996 51.9315 46.1391 51.6328C45.5022 51.3112 44.4761 50.9665 43.0608 50.5989C41.5982 50.2542 40.3952 49.8981 39.4517 49.5305C38.5317 49.1628 37.7297 48.5999 37.0456 47.8417C36.3851 47.0835 36.0548 46.061 36.0548 44.7743C36.0548 43.7174 36.3615 42.7524 36.9748 41.8793C37.6117 41.0062 38.5081 40.3169 39.664 39.8114C40.8434 39.3059 42.2234 39.0531 43.8038 39.0531C46.1391 39.0531 48.0026 39.6276 49.3944 40.7764C50.7861 41.9022 51.5528 43.4302 51.6943 45.3602H46.9529C46.8822 44.602 46.5519 44.0046 45.9622 43.568C45.3961 43.1085 44.6294 42.8787 43.6623 42.8787C42.7659 42.8787 42.07 43.0396 41.5747 43.3613C41.1029 43.6829 40.867 44.131 40.867 44.7054C40.867 45.3487 41.1972 45.8427 41.8577 46.1874C42.5182 46.5091 43.5443 46.8422 44.9361 47.1869C46.3514 47.5315 47.5191 47.8876 48.439 48.2553C49.359 48.6229 50.1492 49.1973 50.8097 49.9785C51.4938 50.7367 51.8476 51.7477 51.8712 53.0114C51.8712 54.1143 51.5528 55.1023 50.9159 55.9754C50.3026 56.8485 49.4062 57.5378 48.2267 58.0433C47.0709 58.5258 45.7145 58.7671 44.1576 58.7671Z"
                                fill="#5889C4"
                              />
                            </svg>
                          </div>

                          <h4
                            class="mt-2 text-sm font-semibold dark:text-white md:text-base"
                          >
                            vCard – Resume...
                          </h4>
                          <span
                            class="text-base text-bgray-600 dark:text-bgray-50"
                            >1.4 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center lg:h-44 lg:w-44"
                        >
                          <div class="flex w-full justify-center">
                            <svg
                              width="67"
                              height="86"
                              viewBox="0 0 67 86"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M5.4032 0H46.9892L67 19.8123V80.625C67 83.5946 64.5796 86 61.5968 86H5.4032C2.42052 86 0 83.5946 0 80.625V5.37496C0 2.40536 2.4208 0 5.4032 0Z"
                                fill="white"
                              />
                              <path
                                d="M5.4032 0.5H46.7835L66.5 20.0208V80.625C66.5 83.3158 64.306 85.5 61.5968 85.5H5.4032C2.69405 85.5 0.5 83.3158 0.5 80.625V5.37496C0.5 2.68413 2.6943 0.5 5.4032 0.5Z"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M65.9198 20.4252H51.2864C48.6265 20.4252 46.468 18.2802 46.468 15.6368V1.0752"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M17.2903 31.0996C17.2903 30.5473 17.738 30.0996 18.2903 30.0996H48.7098C49.262 30.0996 49.7098 30.5473 49.7098 31.0996V63.4996C49.7098 64.0519 49.262 64.4996 48.7098 64.4996H18.2903C17.738 64.4996 17.2903 64.0519 17.2903 63.4996V31.0996Z"
                                fill="#304FFD"
                              />
                              <path
                                d="M40.6533 41.7275C40.7643 41.4409 40.9309 41.2259 41.153 41.0825C41.3874 40.9272 41.6465 40.8496 41.9303 40.8496C42.2881 40.8496 42.5904 40.9571 42.8372 41.1721C43.0963 41.3871 43.2259 41.6797 43.2259 42.05C43.2259 42.2292 43.1888 42.4263 43.1148 42.6413L39.2652 52.8359C39.1541 53.1225 38.9567 53.3495 38.6729 53.5167C38.4015 53.672 38.0992 53.7496 37.7661 53.7496C37.4329 53.7496 37.1306 53.672 36.8592 53.5167C36.5877 53.3495 36.3965 53.1225 36.2854 52.8359L33.5278 45.2929L30.6961 52.8359C30.585 53.1225 30.3938 53.3495 30.1223 53.5167C29.8509 53.672 29.5486 53.7496 29.2155 53.7496C28.8947 53.7496 28.5924 53.672 28.3086 53.5167C28.0371 53.3495 27.8459 53.1225 27.7348 52.8359L23.8852 42.6413C23.8112 42.4382 23.7742 42.2471 23.7742 42.0679C23.7742 41.6977 23.9099 41.405 24.1813 41.19C24.4528 40.9631 24.7736 40.8496 25.1437 40.8496C25.4399 40.8496 25.7051 40.9272 25.9396 41.0825C26.1864 41.2259 26.3653 41.4409 26.4763 41.7275L29.3265 49.6646L32.2878 41.7634C32.3988 41.4767 32.5715 41.2557 32.806 41.1004C33.0527 40.9452 33.3119 40.8675 33.5833 40.8675C33.8671 40.8675 34.1262 40.9452 34.3606 41.1004C34.5951 41.2557 34.7678 41.4827 34.8788 41.7813L37.7105 49.8079L40.6533 41.7275Z"
                                fill="white"
                              />
                            </svg>
                          </div>
                          <h4
                            class="mt-2 text-sm font-semibold dark:text-white md:text-base"
                          >
                            Project Brief
                          </h4>
                          <span
                            class="text-base text-bgray-600 dark:text-bgray-50"
                            >1.4 MB</span
                          >
                        </div>
                        <div
                          class="flex h-24 w-24 flex-col items-center lg:h-44 lg:w-44"
                        >
                          <div class="flex w-full justify-center">
                            <svg
                              width="67"
                              height="86"
                              viewBox="0 0 67 86"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M5.4032 0H46.9892L67 19.8123V80.625C67 83.5946 64.5796 86 61.5968 86H5.4032C2.42052 86 0 83.5946 0 80.625V5.37496C0 2.40536 2.4208 0 5.4032 0Z"
                                fill="white"
                              />
                              <path
                                d="M5.4032 0.5H46.7835L66.5 20.0208V80.625C66.5 83.3158 64.306 85.5 61.5968 85.5H5.4032C2.69405 85.5 0.5 83.3158 0.5 80.625V5.37496C0.5 2.68413 2.6943 0.5 5.4032 0.5Z"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M65.9198 20.4252H51.2864C48.6265 20.4252 46.468 18.2802 46.468 15.6368V1.0752"
                                stroke="#E8E9EB"
                              />
                              <path
                                d="M20.2338 64.4996C19.7451 64.4996 19.276 64.3525 18.8757 64.0751C17.4136 63.058 17.2169 61.9264 17.3096 61.1555C17.5652 59.0354 20.3926 56.8164 25.7157 54.5557C27.8281 50.2635 29.838 44.9751 31.036 40.5566C29.6343 37.7281 28.2719 34.0584 29.2649 31.9058C29.6132 31.1518 30.0472 30.5736 30.8577 30.3236C31.1779 30.2246 31.9869 30.0996 32.2847 30.0996C32.9925 30.0996 33.6147 30.9448 34.0558 31.4657C34.4701 31.9553 35.4097 32.9932 33.5319 40.3235C35.4252 43.9489 38.1078 47.6421 40.6781 50.1711C42.5194 49.8624 44.1037 49.7048 45.3945 49.7048C47.594 49.7048 48.9269 50.1802 49.4704 51.1595C49.9198 51.9694 49.7359 52.9162 48.9226 53.9723C48.1403 54.9867 47.0616 55.5233 45.8046 55.5233C44.0967 55.5233 42.1079 54.5231 39.8901 52.5476C35.9055 53.3199 31.2523 54.6976 27.491 56.2226C26.3168 58.5327 25.1918 60.3936 24.144 61.7584C22.7044 63.6271 21.4628 64.4996 20.2338 64.4996ZM23.9727 57.8243C20.9712 59.3883 19.7479 60.6736 19.6594 61.3977C19.6453 61.5175 19.6074 61.8326 20.2647 62.2988C20.474 62.2376 21.696 61.7206 23.9727 57.8243ZM43.1262 52.0398C44.2709 52.8563 44.5504 53.2691 45.299 53.2691C45.6276 53.2691 46.5644 53.2561 46.9984 52.6948C47.2077 52.4226 47.2892 52.2481 47.3215 52.1544C47.1487 52.0697 46.9198 51.8978 45.6712 51.8978C44.9619 51.8991 44.07 51.9278 43.1262 52.0398ZM32.6344 43.4684C31.6301 46.6902 30.3043 50.1684 28.8787 53.3186C31.8141 52.2625 35.0052 51.3405 38.0025 50.688C36.1064 48.6461 34.2117 46.0963 32.6344 43.4684ZM31.7818 32.4489C31.6442 32.4918 29.9138 34.7369 31.9167 36.6369C33.2496 33.8826 31.8422 32.4306 31.7818 32.4489Z"
                                fill="#E2574C"
                              />
                            </svg>
                          </div>
                          <h4
                            class="mt-2 text-sm font-semibold dark:text-white md:text-base"
                          >
                            Brand Styles Guide
                          </h4>
                          <span
                            class="text-base text-bgray-600 dark:text-bgray-50"
                            >1.4 MB</span
                          >
                        </div>
                      </div>
                    </div>
                    <div class="col-span-3 hidden pl-11 pt-14 2xl:block">
                      <div class="flex flex-col items-center">
                        <svg
                          width="120"
                          height="120"
                          viewBox="0 0 120 120"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M7.56578 12.9268H36.2647C38.1443 12.9268 39.8804 13.9307 40.8183 15.5595L45.5417 22.0121C46.4796 23.6408 48.216 24.6448 50.0953 24.6448H120V98.3153C120 102.184 116.863 105.321 112.994 105.321H7.00587C3.13675 105.321 0 102.184 0 98.3153V32.8171C0 27.4018 0.836656 22.0188 2.4805 16.8589C3.08269 14.5432 5.17317 12.9268 7.56578 12.9268Z"
                            fill="#4ADE80"
                          />
                          <path
                            d="M103.16 23.4395H10.9199V62.4043H103.16V23.4395Z"
                            fill="#EBF0F3"
                          />
                          <path
                            d="M114.746 16.4297H85.825C83.7683 16.4297 81.9005 17.6297 81.0459 19.5003L76.097 30.3312C75.2421 32.2019 73.3746 33.4019 71.3179 33.4019H0V100.067C0 103.936 3.13675 107.072 7.00587 107.072H112.994C116.863 107.072 120 103.936 120 100.067V21.6841C120 18.7823 117.647 16.4297 114.746 16.4297Z"
                            fill="#EB292C"
                          />
                        </svg>
                        <h3
                          class="text-2xl font-semibold text-bgray-600 dark:text-white"
                        >
                          Projects
                        </h3>
                      </div>
                      <div>
                        <h4
                          class="mb-3 text-base font-semibold uppercase text-bgray-900 dark:text-white"
                        >
                          Info
                        </h4>
                        <ul class="space-y-6">
                          <li class="flex justify-between">
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Type</span
                            >
                            <span
                              class="text-left text-base font-medium text-bgray-700 dark:text-bgray-50"
                              >Folder</span
                            >
                          </li>
                          <li class="flex justify-between">
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Size</span
                            >
                            <span
                              class="text-left text-base font-medium text-bgray-700 dark:text-bgray-50"
                              >500 MB</span
                            >
                          </li>
                          <li class="flex justify-between">
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Owner</span
                            >
                            <span
                              class="text-left text-base font-medium text-bgray-700 dark:text-bgray-50"
                              >BankCo.</span
                            >
                          </li>
                          <li class="flex justify-between">
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Location</span
                            >
                            <span
                              class="text-left text-base font-medium text-bgray-700 dark:text-bgray-50"
                              >My Files</span
                            >
                          </li>
                          <li class="flex justify-between">
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Modified</span
                            >
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Sep 17, 2020 4:25</span
                            >
                          </li>
                          <li class="flex justify-between">
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Created</span
                            >
                            <span
                              class="text-base font-medium text-bgray-700 dark:text-white"
                              >Sep 10, 2020 2:25</span
                            >
                          </li>
                        </ul>
                      </div>
                      <div class="mt-8 border-t border-bgray-300 pt-7">
                        <h3
                          class="mb-4 text-base font-semibold uppercase text-bgray-900 dark:text-white"
                        >
                          Settings
                        </h3>
                        <div class="flex flex-col space-y-5">
                          <div class="flex items-center justify-between">
                            <span
                              class="text-base font-medium capitalize text-bgray-800 dark:text-white"
                              id="availability-label"
                              >File Sharing</span
                            >
                            <button
                              type="button"
                              class="switch-btn relative inline-flex h-5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent text-center transition-colors duration-200 ease-in-out focus:outline-none"
                              role="switch"
                              aria-checked="false"
                              aria-labelledby="availability-label"
                              aria-describedby="availability-description"
                            >
                              <span
                                aria-hidden="true"
                                class="pointer-events-none inline-block h-4 w-4 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                              ></span>
                            </button>
                          </div>
                          <div class="flex items-center justify-between">
                            <span
                              class="text-base font-medium capitalize text-bgray-800 dark:text-white"
                              id="availability-label"
                              >Backup</span
                            >

                            <button
                              type="button"
                              class="switch-btn active relative inline-flex h-5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 text-center transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0"
                              role="switch"
                              aria-checked="false"
                              aria-labelledby="availability-label"
                              aria-describedby="availability-description"
                            >
                              <span
                                aria-hidden="true"
                                class="pointer-events-none inline-block h-4 w-4 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                              ></span>
                            </button>
                          </div>
                          <div class="flex items-center justify-between">
                            <span
                              class="text-base font-medium capitalize text-bgray-800 dark:text-white"
                              id="availability-label"
                              >Sync</span
                            >

                            <button
                              type="button"
                              class="switch-btn relative inline-flex h-2/5 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 text-center transition-colors duration-200 ease-in-out focus:outline-none focus:ring-0"
                              role="switch"
                              aria-checked="false"
                              aria-labelledby="availability-label"
                              aria-describedby="availability-description"
                            >
                              <span
                                aria-hidden="true"
                                class="pointer-events-none inline-block h-4 w-4 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                              ></span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Payments -->
                <div id="tab4" class="tab-pane">
                  <!-- Cards -->
                  <div>
                    <h3
                      class="pb-5 text-2xl font-bold text-bgray-900 dark:text-white"
                    >
                      Payment and Billing
                    </h3>
                    <div
                      class="grid grid-cols-1 gap-5 pb-14 sm:grid-cols-2 2xl:grid-cols-3 2xl:gap-10"
                    >
                      <div
                        class="relative rounded-lg bg-gray-100 p-6 dark:bg-darkblack-500"
                      >
                        <div class="mb-5 flex gap-x-2">
                          <img src="assets/images/payments/visa.svg" alt="" />
                          <img src="assets/images/payments/master.svg" alt="" />
                          <img src="assets/images/payments/ae.svg" alt="" />
                        </div>
                        <h4
                          class="mb-2 text-base font-bold text-bgray-900 dark:text-white"
                        >
                          Credit or Debit Card
                        </h4>
                        <p class="text-sm dark:text-bgray-50">
                          Offers payment processing software for e-commerce
                          websites and mobile applications.
                        </p>
                        <button class="absolute right-5 top-5">
                          <svg
                            class="stroke-bgray-600 dark:stroke-bgray-50"
                            width="24"
                            height="25"
                            viewBox="0 0 24 25"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 14.2037C10.8954 14.2037 10 13.3074 10 12.2019C10 11.0964 10.8954 10.2002 12 10.2002C13.1046 10.2002 14 11.0964 14 12.2019C14 13.3074 13.1046 14.2037 12 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M20 14.2037C18.8954 14.2037 18 13.3074 18 12.2019C18 11.0964 18.8954 10.2002 20 10.2002C21.1046 10.2002 22 11.0964 22 12.2019C22 13.3074 21.1046 14.2037 20 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M4 14.2037C2.89543 14.2037 2 13.3074 2 12.2019C2 11.0964 2.89543 10.2002 4 10.2002C5.10457 10.2002 6 11.0964 6 12.2019C6 13.3074 5.10457 14.2037 4 14.2037Z"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="relative rounded-lg bg-gray-100 p-6 dark:bg-darkblack-500"
                      >
                        <div class="mb-5">
                          <img src="assets/images/payments/paypal.svg" alt="" />
                        </div>
                        <h4
                          class="mb-2 text-base font-bold text-bgray-900 dark:text-white"
                        >
                          PayPal
                        </h4>
                        <p class="text-sm dark:text-bgray-50">
                          Offers payment processing software for e-commerce
                          websites and mobile applications.
                        </p>
                        <button class="absolute right-5 top-5">
                          <svg
                            class="stroke-bgray-600 dark:stroke-bgray-50"
                            width="24"
                            height="25"
                            viewBox="0 0 24 25"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 14.2037C10.8954 14.2037 10 13.3074 10 12.2019C10 11.0964 10.8954 10.2002 12 10.2002C13.1046 10.2002 14 11.0964 14 12.2019C14 13.3074 13.1046 14.2037 12 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M20 14.2037C18.8954 14.2037 18 13.3074 18 12.2019C18 11.0964 18.8954 10.2002 20 10.2002C21.1046 10.2002 22 11.0964 22 12.2019C22 13.3074 21.1046 14.2037 20 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M4 14.2037C2.89543 14.2037 2 13.3074 2 12.2019C2 11.0964 2.89543 10.2002 4 10.2002C5.10457 10.2002 6 11.0964 6 12.2019C6 13.3074 5.10457 14.2037 4 14.2037Z"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="relative rounded-lg bg-gray-100 p-6 dark:bg-darkblack-500"
                      >
                        <div class="mb-5">
                          <img src="assets/images/payments/ae-l.svg" alt="" />
                        </div>
                        <h4
                          class="mb-2 text-base font-bold text-bgray-900 dark:text-white"
                        >
                          American Express
                        </h4>
                        <p class="text-sm dark:text-bgray-50">
                          Offers payment processing software for e-commerce
                          websites and mobile applications.
                        </p>
                        <button class="absolute right-5 top-5">
                          <svg
                            class="stroke-bgray-600 dark:stroke-bgray-50"
                            width="24"
                            height="25"
                            viewBox="0 0 24 25"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 14.2037C10.8954 14.2037 10 13.3074 10 12.2019C10 11.0964 10.8954 10.2002 12 10.2002C13.1046 10.2002 14 11.0964 14 12.2019C14 13.3074 13.1046 14.2037 12 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M20 14.2037C18.8954 14.2037 18 13.3074 18 12.2019C18 11.0964 18.8954 10.2002 20 10.2002C21.1046 10.2002 22 11.0964 22 12.2019C22 13.3074 21.1046 14.2037 20 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M4 14.2037C2.89543 14.2037 2 13.3074 2 12.2019C2 11.0964 2.89543 10.2002 4 10.2002C5.10457 10.2002 6 11.0964 6 12.2019C6 13.3074 5.10457 14.2037 4 14.2037Z"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="relative rounded-lg bg-gray-100 p-6 dark:bg-darkblack-500"
                      >
                        <div class="mb-5">
                          <img
                            src="assets/images/payments/amazon.svg"
                            class="block dark:hidden"
                            alt=""
                          />
                          <img
                            src="assets/images/payments/amazon-white.svg"
                            class="hidden dark:block"
                            alt=""
                          />
                        </div>
                        <h4
                          class="mb-2 text-base font-bold text-bgray-900 dark:text-white"
                        >
                          Amazon
                        </h4>
                        <p class="text-sm dark:text-bgray-50">
                          Offers payment processing software for e-commerce
                          websites and mobile applications.
                        </p>
                        <button class="absolute right-5 top-5">
                          <svg
                            class="stroke-bgray-600 dark:stroke-bgray-50"
                            width="24"
                            height="25"
                            viewBox="0 0 24 25"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 14.2037C10.8954 14.2037 10 13.3074 10 12.2019C10 11.0964 10.8954 10.2002 12 10.2002C13.1046 10.2002 14 11.0964 14 12.2019C14 13.3074 13.1046 14.2037 12 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M20 14.2037C18.8954 14.2037 18 13.3074 18 12.2019C18 11.0964 18.8954 10.2002 20 10.2002C21.1046 10.2002 22 11.0964 22 12.2019C22 13.3074 21.1046 14.2037 20 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M4 14.2037C2.89543 14.2037 2 13.3074 2 12.2019C2 11.0964 2.89543 10.2002 4 10.2002C5.10457 10.2002 6 11.0964 6 12.2019C6 13.3074 5.10457 14.2037 4 14.2037Z"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="relative rounded-lg bg-gray-100 p-6 dark:bg-darkblack-500"
                      >
                        <div class="mb-5">
                          <img
                            src="assets/images/payments/payoner.svg"
                            class="block dark:hidden"
                            alt=""
                          />
                          <img
                            src="assets/images/payments/payoneer-white.svg"
                            class="hidden dark:block"
                            alt=""
                          />
                        </div>
                        <h4
                          class="mb-2 text-base font-bold text-bgray-900 dark:text-white"
                        >
                          Payoner
                        </h4>
                        <p class="text-sm dark:text-white">
                          Offers payment processing software for e-commerce
                          websites and mobile applications.
                        </p>
                        <button class="absolute right-5 top-5">
                          <svg
                            class="stroke-bgray-600 dark:stroke-bgray-50"
                            width="24"
                            height="25"
                            viewBox="0 0 24 25"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 14.2037C10.8954 14.2037 10 13.3074 10 12.2019C10 11.0964 10.8954 10.2002 12 10.2002C13.1046 10.2002 14 11.0964 14 12.2019C14 13.3074 13.1046 14.2037 12 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M20 14.2037C18.8954 14.2037 18 13.3074 18 12.2019C18 11.0964 18.8954 10.2002 20 10.2002C21.1046 10.2002 22 11.0964 22 12.2019C22 13.3074 21.1046 14.2037 20 14.2037Z"
                              stroke-width="1.5"
                            />
                            <path
                              d="M4 14.2037C2.89543 14.2037 2 13.3074 2 12.2019C2 11.0964 2.89543 10.2002 4 10.2002C5.10457 10.2002 6 11.0964 6 12.2019C6 13.3074 5.10457 14.2037 4 14.2037Z"
                              stroke-width="1.5"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="modal-open flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-bgray-500 p-6"
                      >
                        <svg
                          width="60"
                          height="60"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M13.5005 9.25H2.00049C1.59049 9.25 1.25049 8.91 1.25049 8.5C1.25049 8.09 1.59049 7.75 2.00049 7.75H13.5005C13.9105 7.75 14.2505 8.09 14.2505 8.5C14.2505 8.91 13.9105 9.25 13.5005 9.25Z"
                            fill="#718096"
                          />
                          <path
                            d="M8.00049 17.25H6.00049C5.59049 17.25 5.25049 16.91 5.25049 16.5C5.25049 16.09 5.59049 15.75 6.00049 15.75H8.00049C8.41049 15.75 8.75049 16.09 8.75049 16.5C8.75049 16.91 8.41049 17.25 8.00049 17.25Z"
                            fill="#718096"
                          />
                          <path
                            d="M14.5005 17.25H10.5005C10.0905 17.25 9.75049 16.91 9.75049 16.5C9.75049 16.09 10.0905 15.75 10.5005 15.75H14.5005C14.9105 15.75 15.2505 16.09 15.2505 16.5C15.2505 16.91 14.9105 17.25 14.5005 17.25Z"
                            fill="#718096"
                          />
                          <path
                            d="M17.5605 21.25H6.44049C2.46049 21.25 1.25049 20.05 1.25049 16.11V7.89C1.25049 3.95 2.46049 2.75 6.44049 2.75H13.5005C13.9105 2.75 14.2505 3.09 14.2505 3.5C14.2505 3.91 13.9105 4.25 13.5005 4.25H6.44049C3.30049 4.25 2.75049 4.79 2.75049 7.89V16.1C2.75049 19.2 3.30049 19.74 6.44049 19.74H17.5505C20.6905 19.74 21.2405 19.2 21.2405 16.1V12.02C21.2405 11.61 21.5805 11.27 21.9905 11.27C22.4005 11.27 22.7405 11.61 22.7405 12.02V16.1C22.7505 20.05 21.5405 21.25 17.5605 21.25Z"
                            fill="#718096"
                          />
                          <path
                            d="M22.0005 7H16.5005C16.0905 7 15.7505 6.66 15.7505 6.25C15.7505 5.84 16.0905 5.5 16.5005 5.5H22.0005C22.4105 5.5 22.7505 5.84 22.7505 6.25C22.7505 6.66 22.4105 7 22.0005 7Z"
                            fill="#718096"
                          />
                          <path
                            d="M19.2505 9.75C18.8405 9.75 18.5005 9.41 18.5005 9V3.5C18.5005 3.09 18.8405 2.75 19.2505 2.75C19.6605 2.75 20.0005 3.09 20.0005 3.5V9C20.0005 9.41 19.6605 9.75 19.2505 9.75Z"
                            fill="#718096"
                          />
                        </svg>
                        <span class="text-lg font-medium text-bgray-600"
                          >Add wallet</span
                        >
                      </div>
                    </div>
                  </div>
                  <!-- Slider -->
                  <div
                    class="border-bgray-300 px-0 py-0 dark:border-darkblack-400 lg:border-t lg:px-7 lg:py-10"
                  >
                    <div class="items-center justify-between lg:flex">
                      <div
                        class="flex w-full flex-col items-center lg:w-[250px] 2xl:w-[400px]"
                      >
                        <div class="mb-4 flex w-full justify-between">
                          <h4
                            class="text-lg font-bold text-bgray-900 dark:text-white"
                          >
                            My Wallet
                          </h4>
                          <button>
                            <svg
                              width="20"
                              height="5"
                              viewBox="0 0 20 5"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M8.90742 2.3381C8.90742 2.95199 9.40507 3.44964 10.019 3.44964C10.6328 3.44964 11.1305 2.95199 11.1305 2.3381C11.1305 1.72422 10.6328 1.22656 10.019 1.22656C9.40507 1.22656 8.90742 1.72422 8.90742 2.3381Z"
                                stroke="#CBD5E0"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M1.12665 2.3381C1.12665 2.95199 1.62431 3.44964 2.23819 3.44964C2.85208 3.44964 3.34973 2.95199 3.34973 2.3381C3.34973 1.72422 2.85208 1.22656 2.23819 1.22656C1.62431 1.22656 1.12665 1.72422 1.12665 2.3381Z"
                                stroke="#CBD5E0"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M16.6882 2.3381C16.6882 2.95199 17.1858 3.44964 17.7997 3.44964C18.4136 3.44964 18.9113 2.95199 18.9113 2.3381C18.9113 1.72422 18.4136 1.22656 17.7997 1.22656C17.1858 1.22656 16.6882 1.72422 16.6882 2.3381Z"
                                stroke="#CBD5E0"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>
                          </button>
                        </div>
                        <div class="card-slider relative w-full">
                          <div class="m-0 w-[280px] md:w-[400px]">
                            <img
                              src="./assets/images/payments/pa-card.svg"
                              class="w-full"
                              alt="card"
                            />
                          </div>
                          <div class="m-0 w-[280px] md:w-[400px]">
                            <img
                              src="./assets/images/payments/pa-card.svg"
                              class="w-full"
                              alt="card"
                            />
                          </div>
                          <div class="m-0 w-[280px] md:w-[400px]">
                            <img
                              src="./assets/images/payments/pa-card.svg"
                              class="w-full"
                              alt="card"
                            />
                          </div>
                        </div>
                      </div>
                      <div
                        class="hidden h-[220px] w-[4px] rounded-lg bg-bgray-200 dark:bg-darkblack-400 lg:block"
                      ></div>
                      <div class="w-full lg:w-[250px] 2xl:w-[400px]">
                        <div class="w-full">
                          <h3
                            class="mb-4 text-lg font-bold text-bgray-900 dark:text-white"
                          >
                            Add money
                          </h3>
                          <div class="payment-select relative mb-3">
                            <button
                              onclick="dateFilterAction('#paymentFilter')"
                              type="button"
                              class="flex h-[56px] w-full items-center justify-between overflow-hidden rounded-lg border border-bgray-200 px-5 dark:border-darkblack-400"
                            >
                              <div class="flex items-center space-x-2">
                                <span>
                                  <img
                                    src="./assets/images/payments/paypal-smsvg.svg"
                                    alt="master"
                                  />
                                </span>
                              </div>
                              <div class="flex items-center space-x-2">
                                <span class="text-sm font-bold text-bgray-900">
                                  $24,098.00
                                </span>
                                <span
                                  class="text-sm font-medium text-bgray-900"
                                >
                                  <svg
                                    width="16"
                                    height="16"
                                    viewBox="0 0 16 16"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                  >
                                    <path
                                      d="M4 6L8 10L12 6"
                                      stroke="#A0AEC0"
                                      stroke-width="1.5"
                                      stroke-linecap="round"
                                      stroke-linejoin="round"
                                    />
                                  </svg>
                                </span>
                              </div>
                            </button>
                            <div
                              id="paymentFilter"
                              class="absolute right-0 top-full z-10 hidden w-full overflow-hidden rounded-lg bg-white shadow-lg"
                            >
                              <ul>
                                <li
                                  onclick="dateFilterAction('#paymentFilter')"
                                  class="text-bgray-90 cursor-pointer px-5 py-2 text-sm font-semibold hover:bg-bgray-100"
                                >
                                  Jan 10 - Jan 16
                                </li>
                                <li
                                  onclick="dateFilterAction('#paymentFilter')"
                                  class="cursor-pointer px-5 py-2 text-sm font-semibold text-bgray-900 hover:bg-bgray-100"
                                >
                                  Jan 10 - Jan 16
                                </li>
                                <li
                                  onclick="dateFilterAction('#paymentFilter')"
                                  class="cursor-pointer px-5 py-2 text-sm font-semibold text-bgray-900 hover:bg-bgray-100"
                                >
                                  Jan 10 - Jan 16
                                </li>
                              </ul>
                            </div>
                          </div>
                          <div
                            class="flex h-[98px] w-full flex-col justify-between rounded-lg border border-bgray-200 p-4 focus-within:border-success-300 dark:border-darkblack-400"
                          >
                            <p
                              class="text-sm font-medium text-bgray-600 dark:text-darkblack-300"
                            >
                              Enter amount
                            </p>
                            <div
                              class="flex h-[35px] w-full items-center justify-between"
                            >
                              <span
                                class="text-2xl font-bold text-bgray-900 dark:text-white"
                                >$</span
                              >
                              <label class="w-full">
                                <input
                                  type="text"
                                  class="w-full border-none p-0 text-2xl font-bold text-bgray-900 focus:outline-none focus:ring-0 dark:bg-darkblack-600 dark:text-white"
                                />
                              </label>
                              <div>
                                <img
                                  src="./assets/images/avatar/members-3.png"
                                  alt="members"
                                />
                              </div>
                            </div>
                          </div>
                          <button
                            class="mt-7 w-full rounded-lg bg-success-300 py-4 text-base font-medium text-white transition-all hover:bg-success-400"
                          >
                            Confirmed
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Faq -->
                <div id="tab5" class="tab-pane">
                  <div>
                    <h3
                      class="text-2xl font-bold text-bgray-900 dark:text-white"
                    >
                      FAQ
                    </h3>
                    <div>
                      <!-- Faq 1 -->
                      <div class="transition">
                        <div
                          class="accordion-header flex h-16 cursor-pointer items-center space-x-5 border-b border-bgray-300 transition dark:border-darkblack-400"
                        >
                          <i class="fas fa-minus text-xl text-success-300"></i>
                          <h2
                            class="title text-sm font-bold text-bgray-900 transition-all dark:text-white md:text-lg"
                          >
                            What is the most important part of a dashboard?
                          </h2>
                        </div>
                        <div
                          style="max-height: 164px"
                          class="accordion-content max-h-0 space-y-4 overflow-hidden pl-4 pt-0 lg:pl-8"
                        >
                          <div class="flex flex-row py-6">
                            <div
                              class="flex h-[93] w-1 rounded-lg bg-success-300"
                            ></div>
                            <div class="flex-1">
                              <p
                                class="pl-4 text-xs text-[#9AA2B1] lg:text-base lg:leading-7"
                              >
                                In reality, the most important aspect of a great
                                dashboard is the part that gets the least amount
                                of attention: The underlying data. More than any
                                other aspect, the data will make or break a
                                dashboard.Within this definition, successful
                                administration appears to rest on three basic
                                skills, which we will call technical, human, and
                                conceptual.Dashboards are business intelligence.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Faq 2 -->
                      <div class="transition">
                        <div
                          class="accordion-header flex h-16 cursor-pointer items-center space-x-5 border-b border-bgray-300 transition dark:border-darkblack-400"
                        >
                          <i class="fas fa-plus text-xl text-success-300"></i>
                          <h2
                            class="title text-sm text-bgray-900 transition-all dark:text-white md:text-lg"
                          >
                            What are the three types of dashboard?
                          </h2>
                        </div>
                        <div
                          class="accordion-content max-h-0 space-y-4 overflow-hidden pl-4 pt-0 lg:pl-8"
                        >
                          <div class="flex flex-row py-6">
                            <div
                              class="flex h-[93] w-1 rounded-lg bg-success-300"
                            ></div>
                            <div class="flex-1">
                              <p
                                class="pl-4 text-xs text-[#9AA2B1] lg:text-base lg:leading-7"
                              >
                                In reality, the most important aspect of a great
                                dashboard is the part that gets the least amount
                                of attention: The underlying data. More than any
                                other aspect, the data will make or break a
                                dashboard.Within this definition, successful
                                administration appears to rest on three basic
                                skills, which we will call technical, human, and
                                conceptual.Dashboards are business intelligence.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Faq 3 -->
                      <div class="transition">
                        <div
                          class="accordion-header flex h-16 cursor-pointer items-center space-x-5 border-b border-bgray-300 transition dark:border-darkblack-400"
                        >
                          <i class="fas fa-plus text-xl text-success-300"></i>
                          <h2
                            class="title text-sm text-bgray-900 transition-all dark:text-white md:text-lg"
                          >
                            What are examples of admin?
                          </h2>
                        </div>
                        <div
                          class="accordion-content max-h-0 space-y-4 overflow-hidden pl-4 pt-0 lg:pl-8"
                        >
                          <div class="flex flex-row py-6">
                            <div
                              class="flex h-[93] w-1 rounded-lg bg-success-300"
                            ></div>
                            <div class="flex-1">
                              <p
                                class="pl-4 text-xs text-[#9AA2B1] lg:text-base lg:leading-7"
                              >
                                In reality, the most important aspect of a great
                                dashboard is the part that gets the least amount
                                of attention: The underlying data. More than any
                                other aspect, the data will make or break a
                                dashboard.Within this definition, successful
                                administration appears to rest on three basic
                                skills, which we will call technical, human, and
                                conceptual.Dashboards are business intelligence.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Faq 4 -->
                      <div class="transition">
                        <div
                          class="accordion-header flex h-16 cursor-pointer items-center space-x-5 border-b border-bgray-300 transition dark:border-darkblack-400"
                        >
                          <i class="fas fa-plus text-xl text-success-300"></i>
                          <h2
                            class="title text-sm text-bgray-900 transition-all dark:text-white md:text-lg"
                          >
                            What are 5 benefits of dashboards?
                          </h2>
                        </div>
                        <div
                          class="accordion-content max-h-0 space-y-4 overflow-hidden pl-4 pt-0 lg:pl-8"
                        >
                          <div class="flex flex-row py-6">
                            <div
                              class="flex h-[93] w-1 rounded-lg bg-success-300"
                            ></div>
                            <div class="flex-1">
                              <p
                                class="pl-4 text-xs text-[#9AA2B1] lg:text-base lg:leading-7"
                              >
                                In reality, the most important aspect of a great
                                dashboard is the part that gets the least amount
                                of attention: The underlying data. More than any
                                other aspect, the data will make or break a
                                dashboard.Within this definition, successful
                                administration appears to rest on three basic
                                skills, which we will call technical, human, and
                                conceptual.Dashboards are business intelligence.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Faq 5 -->
                      <div class="transition">
                        <div
                          class="accordion-header flex h-16 cursor-pointer items-center space-x-5 border-b border-bgray-300 transition dark:border-darkblack-400"
                        >
                          <i class="fas fa-plus text-xl text-success-300"></i>
                          <h2
                            class="title text-sm text-bgray-900 transition-all dark:text-white md:text-lg"
                          >
                            What makes a good dashboard?
                          </h2>
                        </div>
                        <div
                          class="accordion-content max-h-0 space-y-4 overflow-hidden pl-4 pt-0 lg:pl-8"
                        >
                          <div class="flex flex-row py-6">
                            <div
                              class="flex h-[93] w-1 rounded-lg bg-success-300"
                            ></div>
                            <div class="flex-1">
                              <p
                                class="pl-4 text-xs text-[#9AA2B1] lg:text-base lg:leading-7"
                              >
                                In reality, the most important aspect of a great
                                dashboard is the part that gets the least amount
                                of attention: The underlying data. More than any
                                other aspect, the data will make or break a
                                dashboard.Within this definition, successful
                                administration appears to rest on three basic
                                skills, which we will call technical, human, and
                                conceptual.Dashboards are business intelligence.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Faq 6 -->
                      <div class="transition">
                        <div
                          class="accordion-header flex h-16 cursor-pointer items-center space-x-5 border-b border-bgray-300 transition dark:border-darkblack-400"
                        >
                          <i class="fas fa-plus text-xl text-success-300"></i>
                          <h2
                            class="title text-sm text-bgray-900 transition-all dark:text-white md:text-lg"
                          >
                            What are the 3 basic skills of administrator?
                          </h2>
                        </div>
                        <div
                          class="accordion-content max-h-0 space-y-4 overflow-hidden pl-4 pt-0 lg:pl-8"
                        >
                          <div class="flex flex-row py-6">
                            <div
                              class="flex h-[93] w-1 rounded-lg bg-success-300"
                            ></div>
                            <div class="flex-1">
                              <p
                                class="pl-4 text-xs text-[#9AA2B1] lg:text-base lg:leading-7"
                              >
                                In reality, the most important aspect of a great
                                dashboard is the part that gets the least amount
                                of attention: The underlying data. More than any
                                other aspect, the data will make or break a
                                dashboard.Within this definition, successful
                                administration appears to rest on three basic
                                skills, which we will call technical, human, and
                                conceptual.Dashboards are business intelligence.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Security Password -->
                <div id="tab6" class="tab-pane">
                  <div class="flex flex-col gap-10 xl:flex-row xl:items-center">
                    <div class="max-w-[614px] grow">
                      <h3
                        class="mb-3 text-2xl font-bold text-bgray-900 dark:text-white"
                      >
                        Password
                      </h3>
                      <p
                        class="fotn-medium text-sm text-bgray-500 dark:text-bgray-50"
                      >
                        Change or view your password.
                      </p>
                      <form action="" class="mt-6">
                        <div class="relative mb-6 flex flex-col">
                          <label
                            for="old"
                            class="mb-3 block text-sm font-medium text-bgray-500 dark:text-darkblack-300"
                            >Old password</label
                          >
                          <input
                            type="text"
                            class="h-14 w-full rounded-lg border-0 bg-bgray-50 px-4 py-5 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500 dark:text-white"
                          />
                          <button class="absolute right-4 top-12">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M3 3L21 21"
                                stroke="#718096"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                stroke="#718096"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                stroke="#718096"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>
                          </button>
                        </div>
                        <div class="relative mb-6 flex flex-col">
                          <label
                            for="old"
                            class="mb-3 block text-sm font-medium text-bgray-500 dark:text-darkblack-300"
                            >New password</label
                          >
                          <input
                            type="text"
                            class="h-14 w-full rounded-lg border-0 bg-bgray-50 px-4 py-5 focus:border focus:border-success-300 focus:ring-0 dark:bg-darkblack-500"
                          />
                          <button class="absolute right-4 top-12">
                            <svg
                              width="24"
                              height="24"
                              viewBox="0 0 24 24"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M3 3L21 21"
                                stroke="#718096"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M10.584 10.5869C10.2087 10.9619 9.99775 11.4707 9.99756 12.0012C9.99737 12.5317 10.2079 13.0406 10.583 13.4159C10.958 13.7912 11.4667 14.0021 11.9973 14.0023C12.5278 14.0025 13.0367 13.7919 13.412 13.4169"
                                stroke="#718096"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                              <path
                                d="M9.363 5.36506C10.2204 5.11978 11.1082 4.9969 12 5.00006C16 5.00006 19.333 7.33306 22 12.0001C21.222 13.3611 20.388 14.5241 19.497 15.4881M17.357 17.3491C15.726 18.4491 13.942 19.0001 12 19.0001C8 19.0001 4.667 16.6671 2 12.0001C3.369 9.60506 4.913 7.82506 6.632 6.65906"
                                stroke="#718096"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                              />
                            </svg>
                          </button>
                          <small
                            class="mt-1 block text-xs text-bgray-500 dark:text-darkblack-300"
                            >Minimum 6 characters</small
                          >
                        </div>
                        <div class="flex justify-end">
                          <button
                            class="rounded-lg bg-success-300 px-4 py-3 text-sm font-semibold text-white transition-all hover:bg-success-400 hover:bg-opacity-100"
                          >
                            Save Changes
                          </button>
                        </div>
                      </form>
                    </div>
                    <div class="mx-auto hidden pt-10 xl:block">
                      <img
                        src="assets/images/illustration/reset-password.svg"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
                <!-- Terms & Condition -->
                <div id="tab7" class="tab-pane">
                  <div>
                    <h3
                      class="mb-3 text-2xl font-bold text-bgray-900 dark:text-white"
                    >
                      Terms and Conditions
                    </h3>
                    <article class="mb-8">
                      <h4
                        class="mb-2 text-lg font-bold text-bgray-800 dark:text-white"
                      >
                        1. Definitions
                      </h4>
                      <p class="text-base text-[#9AA2B1] dark:text-white">
                        What you do own when you buy an are the keys to a
                        non-fungible – perhaps unique – token. That token is
                        yours to trade or hold or display in Decentraland. But
                        the digital file associated with an NFT is just as easy
                        to copy and paste and download as any other – the
                        Finally, players lose their NFTs sometimes according to
                        the rules and regulations of the NFT game.
                      </p>
                    </article>
                    <article class="mb-8">
                      <h4
                        class="mb-2 text-lg font-bold text-bgray-800 dark:text-white"
                      >
                        2. Acceptance
                      </h4>
                      <p class="text-base text-[#9AA2B1] dark:text-white">
                        Amet minim mollit non deserunt ullamco est sit aliqua
                        dolor do amet sint. Velit officia consequat duis enim
                        velit mollit. Exercitation veniam consequat sunt nostrud
                        amet.Capacity. You confirm that you have the legal
                        capacity to receive and hold and make use of the NFT
                        under French jurisdiction and any other relevant
                        jurisdiction.Acceptance. By participating in the Sale,
                        You accept and agree to these Terms and Conditions
                        without any condition or restriction. If You do not
                        agree to this Contract, You shall not participate in the
                        Sale made by the Company Exercitation veniam consequat
                        sunt nostrud amet.Capacity. You confirm that you have
                        the legal capacity to receive and hold find to
                        end.Contract, You shall not participate in the Sale made
                        by the Company Exercitation venia
                      </p>
                    </article>
                    <blockquote
                      class="mb-8 rounded-lg bg-bgray-100 px-7 py-5 text-lg text-bgray-800 dark:bg-darkblack-500 dark:text-white"
                    >
                      In reality, the most important aspect of a great dashboard
                      is the part that gets the least amount of attention: The
                      underlying data. More than any other aspect, the data will
                      make or break a dashboard.Within this definition,
                      successful administration appears to rest on three basic
                      skills, which we will call technical, and conceptual.
                    </blockquote>
                    <article class="mb-8">
                      <h4
                        class="mb-2 text-lg font-bold text-bgray-800 dark:text-white"
                      >
                        3. The Sale
                      </h4>
                      <p class="mb-6 text-base text-[#9AA2B1] dark:text-white">
                        The Company offers featuring the Betonyou universe. The
                        holders of one or more NFTs will be able to win cryptos
                        while playing video games. In the future, the Company
                        plans to develop its own games and Metaverse around the
                        Betonyou universe (“Project”).
                      </p>
                      <p class="text-base text-[#9AA2B1] dark:text-white">
                        To release the NFTs and fund the project, the Company
                        offers NFTs from a dedicated website("Sale"). The web
                        address of this website will be given at the time of the
                        mint. The NFT acquisition does not confer any rights on
                        the Company or in the future development.
                      </p>
                    </article>
                    <article>
                      <h4
                        class="mb-2 text-lg font-bold text-bgray-800 dark:text-white"
                      >
                        4. Purchaser’s obligations
                      </h4>
                      <p class="mb-6 text-base text-[#9AA2B1] dark:text-white">
                        To the fullest extent permitted by applicable law, You
                        undertake to indemnify, defend and hold harmless the
                        Company from and against all claims, demands, actions,
                        damages, losses, costs and expenses (including
                        attorneys’ fees) that arise from or relate to (i) your
                        Subscription or use of the NFTs; (ii) your
                        responsibilities or obligations under this Contract; and
                        (iii) your breach of this Contract.
                      </p>
                      <p class="text-base text-[#9AA2B1] dark:text-white">
                        Company undertakes to act with the care normally
                        expected from a professional in his field and to comply
                        with the best practice in force. The best endeavor
                        obligation only binds the Company.
                      </p>
                    </article>
                  </div>
                </div>
              </div>
            </div>
            <!-- write your code here-->
          </main>














          
        </div>
      </div>
    </div>
    <!-- layout end -->
    <!-- Modal -->
    <div
      class="modal fixed inset-0 z-50 flex hidden h-full items-center justify-center overflow-y-auto"
      id="multi-step-modal"
    >
      <div
        class="modal-overlay absolute inset-0 bg-gray-500 opacity-75 dark:bg-bgray-900 dark:opacity-50"
      ></div>
      <div class="modal-content max-w-3xl px-4 md:w-full">
        <div class="step-content step-1">
          <!-- My Content -->
          <div
            class="relative max-w-[750px] rounded-lg bg-white p-6 pb-10 transition-all dark:bg-darkblack-600"
          >
            <header>
              <div>
                <h3
                  class="mb-1 text-2xl font-bold text-bgray-900 dark:text-white"
                >
                  Add new card
                </h3>
                <p class="text-sm text-bgray-600 dark:text-darkblack-300">
                  Manage where you collect taxes and duties. Check with a tax
                  expert if you're unsure where you have a tax obligation.
                </p>
              </div>
              <div class="absolute right-0 top-0 pr-5 pt-5">
                <button
                  type="button"
                  id="step-1-cancel"
                  class="rounded-md bg-white focus:outline-none dark:bg-darkblack-500"
                >
                  <span class="sr-only">Close</span>
                  <!-- Cross Icon -->
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 6L18 18M6 18L18 6L6 18Z"
                      stroke="#747681"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </button>
              </div>
            </header>
            <div class="pb-10 pt-4">
              <table class="min-w-full">
                <thead
                  class="border-b border-t border-bgray-300 dark:border-darkblack-500"
                >
                  <tr class="dark:bg-darkblack-600">
                    <th
                      scope="col"
                      class="py-4 pl-4 pr-3 text-left text-sm font-medium text-bgray-600 dark:text-white sm:pl-6"
                    >
                      Country or region
                    </th>
                    <th
                      scope="col"
                      class="px-3 py-4 text-left text-sm font-medium text-bgray-600 dark:text-white"
                    >
                      Collecting
                    </th>
                    <th
                      scope="col"
                      class="px-3 py-4 text-left text-sm font-medium text-bgray-600 dark:text-white"
                    >
                      Percentage
                    </th>
                  </tr>
                </thead>
                <tbody class="bg-white dark:bg-darkblack-600">
                  <tr
                    class="border-b border-bgray-300 dark:border-darkblack-400"
                  >
                    <td
                      class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6"
                    >
                      <div class="flex items-center gap-3">
                        <img src="assets/images/flag/us-sm.svg" alt="" />
                        <span
                          class="text-sm font-semibold text-bgray-900 dark:text-bgray-50"
                          >United States</span
                        >
                      </div>
                    </td>
                    <td
                      class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
                    >
                      <div class="flex items-center gap-2">
                        <span
                          class="text-sm font-semibold text-bgray-900 dark:text-white"
                          >One time
                        </span>
                        <span
                          ><svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M7 10L12 14L17 10"
                              stroke-width="1.5"
                              stroke-linecap="round"
                              stroke-linejoin="round"
                            />
                          </svg>
                        </span>
                      </div>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4 text-sm">
                      <span
                        class="text-sm font-semibold text-bgray-900 dark:text-white"
                        >20%</span
                      >
                    </td>
                  </tr>
                  <tr
                    class="border-b border-bgray-300 dark:border-darkblack-400"
                  >
                    <td
                      class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6"
                    >
                      <div class="flex items-center gap-3">
                        <svg
                          class="stroke-bgray-900 dark:stroke-bgray-500"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            d="M13.7857 6L14.5807 8.00215C13.8273 7.57761 12.9442 7.33333 12 7.33333C9.23858 7.33333 7 9.42267 7 12C7 12.4149 7.058 12.8171 7.16686 13.2M10.2143 18L9.41931 15.9978C10.1727 16.4224 11.0558 16.6667 12 16.6667C14.7614 16.6667 17 14.5773 17 12C17 11.5851 16.942 11.1829 16.8331 10.8"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                          <circle cx="12" cy="12" r="10" stroke-width="1.5" />
                        </svg>

                        <span
                          class="text-sm font-semibold text-bgray-900 dark:text-white"
                          >Rest of History</span
                        >
                      </div>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4">
                      <div class="flex items-center gap-2">
                        <span class="dark:text-white"> -</span>
                      </div>
                    </td>
                    <td class="whitespace-nowrap px-3 py-4">
                      <span class="dark:text-white">-</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <form action="">
              <div class="grid grid-cols-2 gap-6">
                <div>
                  <label
                    for="chn"
                    class="mb-3 block text-base font-medium text-bgray-600 dark:text-darkblack-300"
                    >Card Holder Name</label
                  >
                  <input
                    type="text"
                    class="h-14 w-full rounded-xl border-0 bg-bgray-50 p-4 font-medium placeholder:text-bgray-900 dark:bg-darkblack-500 dark:text-white dark:placeholder:text-white"
                    placeholder="Ajay Sarkar"
                  />
                </div>
                <div>
                  <label
                    for="chn"
                    class="mb-3 block text-base font-medium text-bgray-600 dark:text-darkblack-300"
                    >Card Number</label
                  >
                  <input
                    type="text"
                    class="h-14 w-full rounded-xl border-0 bg-bgray-50 p-4 font-medium placeholder:text-bgray-900 dark:bg-darkblack-500 dark:text-white dark:placeholder:text-white"
                    placeholder="012 300 004 5641"
                  />
                </div>
                <div>
                  <label
                    for="chn"
                    class="mb-3 block text-base font-medium text-bgray-600 dark:text-darkblack-300"
                    >Valid Date</label
                  >
                  <input
                    type="text"
                    class="h-14 w-full rounded-xl border-0 bg-bgray-50 p-4 font-medium placeholder:text-bgray-900 dark:bg-darkblack-500 dark:text-white dark:placeholder:text-white"
                    placeholder="03/23"
                  />
                </div>
                <div>
                  <label
                    for="chn"
                    class="mb-3 block text-base font-medium text-bgray-600 dark:text-darkblack-300"
                    >Card Type</label
                  >
                  <input
                    type="text"
                    class="h-14 w-full rounded-xl border-0 bg-bgray-50 p-4 font-medium placeholder:text-bgray-900 dark:bg-darkblack-500 dark:text-white dark:placeholder:text-white"
                    placeholder="Visa"
                  />
                </div>
              </div>
              <div class="flex justify-center pt-11">
                <button
                  class="flex items-center justify-center rounded-lg bg-success-300 px-20 py-4 text-sm font-semibold text-white hover:bg-success-400"
                >
                  Confirmed
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!--scripts -->
    <script src="./assets/js/jquery-3.6.0.min.js"></script>
    <script src="./assets/js/aos.js"></script>
    <script src="./assets/js/slick.min.js"></script>
    <script>
      $(".card-slider").slick({
        dots: true,
        infinite: true,
        autoplay: true,
        speed: 500,
        fade: true,
        cssEase: "linear",
        arrows: false,
      });
    </script>
    <script>
      AOS.init();
    </script>
    <script src="./assets/js/quill.min.js"></script>
    <script src="./assets/js/chart.js"></script>
    <script src="./assets/js/main.js"></script>
  </body>
</html>
Back to Directory=ceiIENDB`