<div class="relative z-50 hidden bg-white lg:block">
    <div class="flex flex-col items-center">
        <div class="flex flex-col items-end w-full h-5 text-xs uppercase max-w-content-max font-talke-semibold">
            <div class="space-x-1">
                <a class="text-talke-red">DE</a>
                <span>|</span>
                <span>EN</span>
            </div>
        </div>
    </div>

    <div class="flex w-full overflow-hidden lg:pointer-events-none lg:fixed lg:justify-end lg:top-36 lg:max-w-outer-body">
        <div class="grid w-full grid-cols-4 lg:pointer-events-auto lg:flex lg:gap-5 lg:items-end lg:flex-col lg:w-auto">
            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                        <svg class="h-11 w-auto" height="55.307" viewBox="0 0 58.134 55.307" width="58.134" xmlns="http://www.w3.org/2000/svg">
                            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                <path d="m114.723 82.111c11.748 11.748 23.495 12.964 27.44 13.012a1.884 1.884 0 0 0 1.808-1.3l2.665-8a1.893 1.893 0 0 0 -.949-2.292l-8.842-4.421a1.894 1.894 0 0 0 -2.186.355l-4.749 4.75s-4.376-1.39-10.141-7.156-7.156-10.141-7.156-10.141l4.75-4.749a1.894 1.894 0 0 0 .355-2.186l-4.418-8.836a1.893 1.893 0 0 0 -2.3-.947l-8 2.665a1.884 1.884 0 0 0 -1.3 1.808c.059 3.943 1.276 15.691 13.023 27.438z" transform="translate(-100.711 -40.816)" />
                                <rect height="25.876" rx="2" width="34.501" x="22.616" y="1.001" />
                                <path d="m224.206 6.488 14.313 14.312a3.594 3.594 0 0 0 5.082 0l14.313-14.312" transform="translate(-201.194 -5.04)" />
                            </g>
                        </svg>
                    </div>
                    <div class="leading-4">
                        Denego
                    </div>
                </a>
            </div>
            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                        <svg class="h-11 w-auto" height="57.265" viewBox="0 0 57.555 57.265" width="57.555" xmlns="http://www.w3.org/2000/svg">
                            <path d="m115.108 85.125c12.092 12.095 24.192 13.347 28.251 13.397a1.94 1.94 0 0 0 1.861-1.334l2.744-8.232a1.949 1.949 0 0 0 -.978-2.36l-9.1-4.552a1.95 1.95 0 0 0 -2.251.365l-4.89 4.89s-4.505-1.431-10.441-7.368-7.368-10.441-7.368-10.441l4.89-4.89a1.95 1.95 0 0 0 .365-2.251l-4.552-9.1a1.949 1.949 0 0 0 -2.36-.978l-8.232 2.744a1.94 1.94 0 0 0 -1.334 1.862c.048 4.059 1.3 16.154 13.395 28.248z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-100.711 -42.257)" />
                            <path d="m242.836 4a16.206 16.206 0 0 0 -13.2 25.637l-3.027 6.811 6.811-3.027a16.218 16.218 0 1 0 9.416-29.421z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-202.504 -2.999)" />
                            <g fill="#fff">
                                <path d="m257.226 77.422a2.444 2.444 0 0 1 -.389 1.356 2.584 2.584 0 0 1 -1.138.942 4.262 4.262 0 0 1 -1.776.341 4 4 0 0 1 -2.032-.465 2.707 2.707 0 0 1 -.922-.894 2.029 2.029 0 0 1 -.355-1.087.737.737 0 0 1 .755-.743.64.64 0 0 1 .451.17 1.338 1.338 0 0 1 .315.505 3.376 3.376 0 0 0 .343.664 1.393 1.393 0 0 0 .519.44 1.92 1.92 0 0 0 .88.173 1.985 1.985 0 0 0 1.217-.349 1.05 1.05 0 0 0 .468-.871.921.921 0 0 0 -.253-.672 1.628 1.628 0 0 0 -.653-.394q-.4-.136-1.07-.289a7.856 7.856 0 0 1 -1.5-.491 2.427 2.427 0 0 1 -.959-.766 1.988 1.988 0 0 1 -.355-1.206 2.071 2.071 0 0 1 .375-1.22 2.361 2.361 0 0 1 1.084-.82 4.441 4.441 0 0 1 1.668-.287 4.127 4.127 0 0 1 1.325.19 2.8 2.8 0 0 1 .928.505 2.11 2.11 0 0 1 .539.661 1.525 1.525 0 0 1 .17.675.8.8 0 0 1 -.213.542.679.679 0 0 1 -.531.241.61.61 0 0 1 -.44-.145 1.953 1.953 0 0 1 -.326-.474 2.149 2.149 0 0 0 -.545-.735 1.6 1.6 0 0 0 -1.022-.264 1.768 1.768 0 0 0 -1.052.287.833.833 0 0 0 -.4.69.7.7 0 0 0 .136.431 1.147 1.147 0 0 0 .375.312 2.533 2.533 0 0 0 .482.2q.244.074.806.216a12.63 12.63 0 0 1 1.274.363 3.858 3.858 0 0 1 .97.482 1.982 1.982 0 0 1 .624.718 2.3 2.3 0 0 1 .224 1.064" transform="translate(-222.067 -57.977)" />
                                <path d="m296.038 71.458a4.443 4.443 0 0 1 2.222.525 3.4 3.4 0 0 1 1.4 1.492 5.085 5.085 0 0 1 .477 2.273 5.556 5.556 0 0 1 -.261 1.753 3.793 3.793 0 0 1 -.783 1.368 3.421 3.421 0 0 1 -1.282.885 5.057 5.057 0 0 1 -3.49-.009 3.468 3.468 0 0 1 -1.288-.888 3.8 3.8 0 0 1 -.78-1.379 5.565 5.565 0 0 1 -.264-1.742 5.381 5.381 0 0 1 .275-1.759 3.775 3.775 0 0 1 .8-1.362 3.449 3.449 0 0 1 1.271-.86 4.579 4.579 0 0 1 1.7-.3m2.395 4.279a3.9 3.9 0 0 0 -.3-1.583 2.2 2.2 0 0 0 -.843-1.013 2.316 2.316 0 0 0 -1.257-.343 2.274 2.274 0 0 0 -.933.19 2.052 2.052 0 0 0 -.738.553 2.643 2.643 0 0 0 -.488.928 4.192 4.192 0 0 0 -.179 1.268 4.3 4.3 0 0 0 .179 1.282 2.629 2.629 0 0 0 .505.951 2.125 2.125 0 0 0 .749.565 2.366 2.366 0 0 0 2.117-.136 2.235 2.235 0 0 0 .862-1 3.862 3.862 0 0 0 .321-1.663" transform="translate(-255.789 -57.977)" />
                                <path d="m348.876 77.422a2.444 2.444 0 0 1 -.389 1.356 2.583 2.583 0 0 1 -1.138.942 4.262 4.262 0 0 1 -1.776.341 4 4 0 0 1 -2.032-.465 2.707 2.707 0 0 1 -.922-.894 2.029 2.029 0 0 1 -.355-1.087.737.737 0 0 1 .755-.743.64.64 0 0 1 .451.17 1.338 1.338 0 0 1 .315.505 3.376 3.376 0 0 0 .343.664 1.393 1.393 0 0 0 .519.44 1.921 1.921 0 0 0 .88.173 1.985 1.985 0 0 0 1.217-.349 1.05 1.05 0 0 0 .468-.871.921.921 0 0 0 -.253-.672 1.628 1.628 0 0 0 -.653-.394q-.4-.136-1.07-.289a7.857 7.857 0 0 1 -1.5-.491 2.428 2.428 0 0 1 -.959-.766 1.988 1.988 0 0 1 -.355-1.206 2.071 2.071 0 0 1 .375-1.22 2.361 2.361 0 0 1 1.084-.82 4.441 4.441 0 0 1 1.668-.287 4.127 4.127 0 0 1 1.325.19 2.8 2.8 0 0 1 .928.505 2.11 2.11 0 0 1 .539.661 1.525 1.525 0 0 1 .17.675.8.8 0 0 1 -.213.542.679.679 0 0 1 -.531.241.61.61 0 0 1 -.44-.145 1.953 1.953 0 0 1 -.326-.474 2.149 2.149 0 0 0 -.545-.735 1.6 1.6 0 0 0 -1.022-.264 1.768 1.768 0 0 0 -1.052.287.833.833 0 0 0 -.4.69.7.7 0 0 0 .136.431 1.147 1.147 0 0 0 .375.312 2.532 2.532 0 0 0 .482.2q.244.074.806.216a12.631 12.631 0 0 1 1.274.363 3.858 3.858 0 0 1 .97.482 1.982 1.982 0 0 1 .624.718 2.3 2.3 0 0 1 .224 1.064" transform="translate(-296.761 -57.977)" />
                            </g>
                        </svg>
                    </div>
                    <div class="leading-4">
                        Patrocinor saepe
                    </div>
                </a>
            </div>
            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                        <svg class="h-11 w-auto" height="51.882" viewBox="0 0 43.237 51.882" width="43.237" xmlns="http://www.w3.org/2000/svg">
                            <path d="m220.586 30.025v16.266m5.426-7.309c8.768.868 15.192 3.817 15.192 7.309 0 4.186-9.224 7.591-20.619 7.591s-20.619-3.405-20.619-7.591c0-3.492 6.425-6.441 15.193-7.309m13.023-34.982v2.6a3.253 3.253 0 0 1 -1.449 2.7l-1.806 1.2 2.17 14.1 2.809.562a3.254 3.254 0 0 1 2.617 3.19v1.67h-23.874v-1.67a3.254 3.254 0 0 1 2.617-3.19l2.809-.562 2.17-14.1-1.806-1.2a3.254 3.254 0 0 1 -1.45-2.707v-2.593z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-198.967 -3)" />
                        </svg>
                    </div>
                    <div class="leading-4">
                        Creptio
                    </div>
                </a>
            </div>
            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                        <svg class="h-11 w-auto" height="51.527" viewBox="0 0 45.783 51.527" width="45.783" xmlns="http://www.w3.org/2000/svg">
                            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                <path d="m203.608 74.508 21.533 11.843 21.533-11.843" transform="translate(-202.25 -61.664)" />
                                <path d="m22.892 24.687v25.84" />
                                <path d="m282.83 36.049-21.53 11.79v7.591" transform="translate(-250.248 -29.665)" />
                                <path d="m246.675 21.227v-5.384l-21.534-11.843-21.533 11.843v25.84l21.533 11.843 21.533-11.843v-22.717" transform="translate(-202.25 -2.999)" />
                            </g>
                        </svg>
                    </div>
                    <div class="leading-4">
                        Tego vomito
                    </div>
                </a>
            </div>
        </div>
    </div>

</div>
<div class="sticky top-0 z-50 w-full bg-zinc-100 shadow-lg">
    <div class="lg:hidden">

        <div x-data="{
    open: false,
    level: 0,
  }" @click.outside="open = false" class="flex items-stretch justify-between relative w-full h-14">

            <!-- Menu Button Begin -->
            <button x-on:click="open = !open" class="flex items-center px-5 space-x-3 focus:outline-none text-talke-blue">
                <div class="relative flex items-center justify-center w-6">
                    <span x-bind:class="open ? 'translate-y-0 rotate-45' : '-translate-y-2'" class="absolute w-full h-0.5 transition transform bg-current"></span>

                    <span x-bind:class="open ? 'opacity-0 translate-x-3' : 'opacity-100'" class="absolute w-full h-0.5 transition transform bg-current"></span>

                    <span x-bind:class="open ? 'translate-y-0 -rotate-45' : 'translate-y-2'" class="absolute w-full h-0.5 transition transform bg-current"></span>
                </div>
                <span class="pr-5 text-sm uppercase font-talke-semibold">Menü</span>
            </button>
            <!-- Menu Button End -->

            <!-- Logo Menu Begin -->
            <div class="mx-auto flex max-w-content-max items-center inset-center">
                <a href="" class="block w-36 shrink-0 py-2">
                    <img src="/images/logos/talke-logo.svg" alt="" />
                </a>
            </div>
            <!-- Logo Menu End -->

            <!-- Language Menu Begin -->
            <div class="flex items-center text-sm uppercase font-talke-semibold text-talke-blue relative" x-data="{ languageDropdownOpen: false }">
                <span class="flex items-center h-12 px-5 text-talke-red" @click="languageDropdownOpen = !languageDropdownOpen" @click.outside="languageDropdownOpen = false">
                    DE <svg class="ml-4 shrink-0 w-3 h-auto fill-current rotate-180 text-talke-blue" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                    </svg>

                </span>
                <div class="transition-opacity bg-white absolute top-full right-0 w-full" :class="{
        'opacity-0 pointer-events-none' : !languageDropdownOpen,
        'opacity-100' : languageDropdownOpen
    }">
                    <a class="flex items-center h-12 px-5" href="#">EN</a>
                    <a class="flex items-center h-12 px-5" href="#">ES</a>
                </div>
            </div>
            <!-- Language Menu End -->

            <!-- Dropdown Begin -->
            <nav class="absolute top-full z-50 w-full overflow-x-hidden text-sm uppercase transition-opacity max-h-navigationMobile font-talke-semibold" x-data="{
      activeLevel1: 0,
      activeLevel2: 0,
    }" :class="{
        'opacity-0 pointer-events-none' : !open,
        'opacity-100' : open
    }">
                <div class="absolute top-0 w-full px-5 bg-white cursor-pointer text-talke-red" @click="
      level = level - 1
    ">
                    <span class="flex items-center h-16 transition-opacity duration-300 delay-300 whitespace-nowrap" :class="{
        'opacity-0' : level == 0,
        'opacity-100' : level > 0
      }">
                        <svg class="mr-2 shrink-0 h-2 w-auto fill-current -rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                        </svg>
                        Zurück
                    </span>
                </div>
                <ul class="relative flex flex-col justify-between transition-all duration-300 font-talke-semibold" :class="{
      'left-0' : level == 0,
      '-left-full' : level == 1,
      '-left-full-2x' : level == 2,
    }">
                    <li class="even:bg-zinc-100 odd:bg-white">
                        <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 0
            ">
                            Carus
                            <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                            </svg>
                        </span>
                        <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 0 != activeLevel1,
        }">
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                                    Adflicto tardus
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            debeo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            deleo
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                                    Una ulciscor
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            vir
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            acquiro
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            patria
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                                    Truculenter benevolentia
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            soluta
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            creo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            corona
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            delego
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="even:bg-zinc-100 odd:bg-white">
                        <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 1
            ">
                            Sto
                            <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                            </svg>
                        </span>
                        <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 1 != activeLevel1,
        }">
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                                    Stultus adficio
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            adiuvo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            adfectus
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            eius
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            tenus
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                                    Curvo suggero
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            nobis
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            tonsor
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            absum
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            thymum
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                                    Adfectus neque
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            aqua
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            eos
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            occaecati
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            administratio
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                                    Tendo aeneus
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            calamitas
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="even:bg-zinc-100 odd:bg-white">
                        <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
              level = level + 1,
              activeLevel1 = 2
            ">
                            Deprimo
                            <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                            </svg>
                        </span>
                        <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 2 != activeLevel1,
        }">
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                                    Tametsi adsidue
                                </span>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                                    Amet vis
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            viridis
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            ad
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            vociferor
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            coniecto
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                                    Dolorem cursus
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            terga
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            vulgo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            paens
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                                    Bis curto
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            demo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            pectus
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            fuga
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            fuga
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 4
                    ">
                                    Careo denuo
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 4 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            usus
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 5
                    ">
                                    Campana contigo
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 5 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            defendo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            excepturi
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            crastinus
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="even:bg-zinc-100 odd:bg-white">
                        <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 3
            ">
                            Debilito
                            <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                            </svg>
                        </span>
                        <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 3 != activeLevel1,
        }">
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                                    Creta ullus
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            derideo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            uberrime
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            ullus
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            coma
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                                    Dolorum spargo
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            alius
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                                    Canto fugiat
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            aestus
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            sint
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                                    Vorago absque
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            sum
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            tantum
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            stips
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="even:bg-zinc-100 odd:bg-white">
                        <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 4
            ">
                            Cohibeo
                            <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                            </svg>
                        </span>
                        <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 4 != activeLevel1,
        }">
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                                    Cinis vinculum
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            paulatim
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            anser
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            aptus
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                                    Cito optio
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            summa
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            statua
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                                    Thymbra certe
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            adulatio
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="even:bg-zinc-100 odd:bg-white">
                        <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 5
            ">
                            Debitis
                            <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                            </svg>
                        </span>
                        <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 5 != activeLevel1,
        }">
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                                    Animus iure
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            ago
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            annus
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                                    Vesper arbitro
                                </span>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                                    Commodi aut
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            labore
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            civis
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 3
                    ">
                                    Coerceo adeptio
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 3 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            cohaero
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            accendo
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            textilis
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            demonstro
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 4
                    ">
                                    Teres inventore
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 4 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            curtus
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="even:bg-zinc-100 odd:bg-white">
                        <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
              level = level + 1,
              activeLevel1 = 6
            ">
                            Tredecim
                            <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                            </svg>
                        </span>
                        <ul class="absolute w-full left-full top-16" :class="{
          'hidden' : 6 != activeLevel1,
        }">
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 0
                    ">
                                    Absorbeo astrum
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 0 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            possimus
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            denique
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            stella
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            tum
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between " @click="
                      level = level + 1,
                      activeLevel2 = 1
                    ">
                                    Virtus deduco
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 1 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            pecto
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            ullam
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red">
                                            suus
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            carus
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="even:bg-white odd:bg-zinc-100">
                                <span class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between text-talke-red" @click="
                      level = level + 1,
                      activeLevel2 = 2
                    ">
                                    Defluo considero
                                    <svg class="ml-2 shrink-0 h-2 w-auto fill-current rotate-90" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                    </svg>
                                </span>
                                <ul class="absolute top-0 w-full left-full" :class="{'hidden' : 2 != activeLevel2}">
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            acidus
                                        </a>
                                    </li>
                                    <li class="even:bg-white odd:bg-zinc-100">
                                        <a href="#" class="px-5 h-16 flex items-center whitespace-nowrap cursor-pointer justify-between ">
                                            argentum
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>

                <div class="transition-opacity duration-300 bg-talke-blue lg:bg-transparent lg:opacity-100" :class="{
        'opacity-100': level == 0,
        'opacity-0 lg:opacity-100': level != 0
      }">
                    <div class="flex w-full overflow-hidden lg:pointer-events-none lg:fixed lg:justify-end lg:top-36 lg:max-w-outer-body">
                        <div class="grid w-full grid-cols-4 lg:pointer-events-auto lg:flex lg:gap-5 lg:items-end lg:flex-col lg:w-auto">
                            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                        <svg class="h-11 w-auto" height="55.307" viewBox="0 0 58.134 55.307" width="58.134" xmlns="http://www.w3.org/2000/svg">
                                            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                                <path d="m114.723 82.111c11.748 11.748 23.495 12.964 27.44 13.012a1.884 1.884 0 0 0 1.808-1.3l2.665-8a1.893 1.893 0 0 0 -.949-2.292l-8.842-4.421a1.894 1.894 0 0 0 -2.186.355l-4.749 4.75s-4.376-1.39-10.141-7.156-7.156-10.141-7.156-10.141l4.75-4.749a1.894 1.894 0 0 0 .355-2.186l-4.418-8.836a1.893 1.893 0 0 0 -2.3-.947l-8 2.665a1.884 1.884 0 0 0 -1.3 1.808c.059 3.943 1.276 15.691 13.023 27.438z" transform="translate(-100.711 -40.816)" />
                                                <rect height="25.876" rx="2" width="34.501" x="22.616" y="1.001" />
                                                <path d="m224.206 6.488 14.313 14.312a3.594 3.594 0 0 0 5.082 0l14.313-14.312" transform="translate(-201.194 -5.04)" />
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="leading-4">
                                        Denego
                                    </div>
                                </a>
                            </div>
                            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                        <svg class="h-11 w-auto" height="57.265" viewBox="0 0 57.555 57.265" width="57.555" xmlns="http://www.w3.org/2000/svg">
                                            <path d="m115.108 85.125c12.092 12.095 24.192 13.347 28.251 13.397a1.94 1.94 0 0 0 1.861-1.334l2.744-8.232a1.949 1.949 0 0 0 -.978-2.36l-9.1-4.552a1.95 1.95 0 0 0 -2.251.365l-4.89 4.89s-4.505-1.431-10.441-7.368-7.368-10.441-7.368-10.441l4.89-4.89a1.95 1.95 0 0 0 .365-2.251l-4.552-9.1a1.949 1.949 0 0 0 -2.36-.978l-8.232 2.744a1.94 1.94 0 0 0 -1.334 1.862c.048 4.059 1.3 16.154 13.395 28.248z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-100.711 -42.257)" />
                                            <path d="m242.836 4a16.206 16.206 0 0 0 -13.2 25.637l-3.027 6.811 6.811-3.027a16.218 16.218 0 1 0 9.416-29.421z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-202.504 -2.999)" />
                                            <g fill="#fff">
                                                <path d="m257.226 77.422a2.444 2.444 0 0 1 -.389 1.356 2.584 2.584 0 0 1 -1.138.942 4.262 4.262 0 0 1 -1.776.341 4 4 0 0 1 -2.032-.465 2.707 2.707 0 0 1 -.922-.894 2.029 2.029 0 0 1 -.355-1.087.737.737 0 0 1 .755-.743.64.64 0 0 1 .451.17 1.338 1.338 0 0 1 .315.505 3.376 3.376 0 0 0 .343.664 1.393 1.393 0 0 0 .519.44 1.92 1.92 0 0 0 .88.173 1.985 1.985 0 0 0 1.217-.349 1.05 1.05 0 0 0 .468-.871.921.921 0 0 0 -.253-.672 1.628 1.628 0 0 0 -.653-.394q-.4-.136-1.07-.289a7.856 7.856 0 0 1 -1.5-.491 2.427 2.427 0 0 1 -.959-.766 1.988 1.988 0 0 1 -.355-1.206 2.071 2.071 0 0 1 .375-1.22 2.361 2.361 0 0 1 1.084-.82 4.441 4.441 0 0 1 1.668-.287 4.127 4.127 0 0 1 1.325.19 2.8 2.8 0 0 1 .928.505 2.11 2.11 0 0 1 .539.661 1.525 1.525 0 0 1 .17.675.8.8 0 0 1 -.213.542.679.679 0 0 1 -.531.241.61.61 0 0 1 -.44-.145 1.953 1.953 0 0 1 -.326-.474 2.149 2.149 0 0 0 -.545-.735 1.6 1.6 0 0 0 -1.022-.264 1.768 1.768 0 0 0 -1.052.287.833.833 0 0 0 -.4.69.7.7 0 0 0 .136.431 1.147 1.147 0 0 0 .375.312 2.533 2.533 0 0 0 .482.2q.244.074.806.216a12.63 12.63 0 0 1 1.274.363 3.858 3.858 0 0 1 .97.482 1.982 1.982 0 0 1 .624.718 2.3 2.3 0 0 1 .224 1.064" transform="translate(-222.067 -57.977)" />
                                                <path d="m296.038 71.458a4.443 4.443 0 0 1 2.222.525 3.4 3.4 0 0 1 1.4 1.492 5.085 5.085 0 0 1 .477 2.273 5.556 5.556 0 0 1 -.261 1.753 3.793 3.793 0 0 1 -.783 1.368 3.421 3.421 0 0 1 -1.282.885 5.057 5.057 0 0 1 -3.49-.009 3.468 3.468 0 0 1 -1.288-.888 3.8 3.8 0 0 1 -.78-1.379 5.565 5.565 0 0 1 -.264-1.742 5.381 5.381 0 0 1 .275-1.759 3.775 3.775 0 0 1 .8-1.362 3.449 3.449 0 0 1 1.271-.86 4.579 4.579 0 0 1 1.7-.3m2.395 4.279a3.9 3.9 0 0 0 -.3-1.583 2.2 2.2 0 0 0 -.843-1.013 2.316 2.316 0 0 0 -1.257-.343 2.274 2.274 0 0 0 -.933.19 2.052 2.052 0 0 0 -.738.553 2.643 2.643 0 0 0 -.488.928 4.192 4.192 0 0 0 -.179 1.268 4.3 4.3 0 0 0 .179 1.282 2.629 2.629 0 0 0 .505.951 2.125 2.125 0 0 0 .749.565 2.366 2.366 0 0 0 2.117-.136 2.235 2.235 0 0 0 .862-1 3.862 3.862 0 0 0 .321-1.663" transform="translate(-255.789 -57.977)" />
                                                <path d="m348.876 77.422a2.444 2.444 0 0 1 -.389 1.356 2.583 2.583 0 0 1 -1.138.942 4.262 4.262 0 0 1 -1.776.341 4 4 0 0 1 -2.032-.465 2.707 2.707 0 0 1 -.922-.894 2.029 2.029 0 0 1 -.355-1.087.737.737 0 0 1 .755-.743.64.64 0 0 1 .451.17 1.338 1.338 0 0 1 .315.505 3.376 3.376 0 0 0 .343.664 1.393 1.393 0 0 0 .519.44 1.921 1.921 0 0 0 .88.173 1.985 1.985 0 0 0 1.217-.349 1.05 1.05 0 0 0 .468-.871.921.921 0 0 0 -.253-.672 1.628 1.628 0 0 0 -.653-.394q-.4-.136-1.07-.289a7.857 7.857 0 0 1 -1.5-.491 2.428 2.428 0 0 1 -.959-.766 1.988 1.988 0 0 1 -.355-1.206 2.071 2.071 0 0 1 .375-1.22 2.361 2.361 0 0 1 1.084-.82 4.441 4.441 0 0 1 1.668-.287 4.127 4.127 0 0 1 1.325.19 2.8 2.8 0 0 1 .928.505 2.11 2.11 0 0 1 .539.661 1.525 1.525 0 0 1 .17.675.8.8 0 0 1 -.213.542.679.679 0 0 1 -.531.241.61.61 0 0 1 -.44-.145 1.953 1.953 0 0 1 -.326-.474 2.149 2.149 0 0 0 -.545-.735 1.6 1.6 0 0 0 -1.022-.264 1.768 1.768 0 0 0 -1.052.287.833.833 0 0 0 -.4.69.7.7 0 0 0 .136.431 1.147 1.147 0 0 0 .375.312 2.532 2.532 0 0 0 .482.2q.244.074.806.216a12.631 12.631 0 0 1 1.274.363 3.858 3.858 0 0 1 .97.482 1.982 1.982 0 0 1 .624.718 2.3 2.3 0 0 1 .224 1.064" transform="translate(-296.761 -57.977)" />
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="leading-4">
                                        Patrocinor saepe
                                    </div>
                                </a>
                            </div>
                            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                        <svg class="h-11 w-auto" height="51.882" viewBox="0 0 43.237 51.882" width="43.237" xmlns="http://www.w3.org/2000/svg">
                                            <path d="m220.586 30.025v16.266m5.426-7.309c8.768.868 15.192 3.817 15.192 7.309 0 4.186-9.224 7.591-20.619 7.591s-20.619-3.405-20.619-7.591c0-3.492 6.425-6.441 15.193-7.309m13.023-34.982v2.6a3.253 3.253 0 0 1 -1.449 2.7l-1.806 1.2 2.17 14.1 2.809.562a3.254 3.254 0 0 1 2.617 3.19v1.67h-23.874v-1.67a3.254 3.254 0 0 1 2.617-3.19l2.809-.562 2.17-14.1-1.806-1.2a3.254 3.254 0 0 1 -1.45-2.707v-2.593z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(-198.967 -3)" />
                                        </svg>
                                    </div>
                                    <div class="leading-4">
                                        Creptio
                                    </div>
                                </a>
                            </div>
                            <div class="lg:rounded-none lg:border-none lg:transition-transform lg:duration-300 lg:translate-x-quickbar-icon lg:hover:translate-x-0">
                                <a href="#" class="flex flex-col items-center justify-between h-24 py-2 text-sm text-center text-white border border-white rounded-md lg:text-xl lg:justify-evenly lg:inline-flex lg:shadow lg:rounded-lg lg:pl-2 lg:flex-row lg:pr-11 lg:h-18 font-talke-semibold bg-talke-blue lg:gap-7 shrink-0 lg:border-none lg:text-left">
                                    <div class="lg:flex lg:items-center lg:justify-around lg:w-14 lg:h-auto lg:shrink-0">
                                        <svg class="h-11 w-auto" height="51.527" viewBox="0 0 45.783 51.527" width="45.783" xmlns="http://www.w3.org/2000/svg">
                                            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                                                <path d="m203.608 74.508 21.533 11.843 21.533-11.843" transform="translate(-202.25 -61.664)" />
                                                <path d="m22.892 24.687v25.84" />
                                                <path d="m282.83 36.049-21.53 11.79v7.591" transform="translate(-250.248 -29.665)" />
                                                <path d="m246.675 21.227v-5.384l-21.534-11.843-21.533 11.843v25.84l21.533 11.843 21.533-11.843v-22.717" transform="translate(-202.25 -2.999)" />
                                            </g>
                                        </svg>
                                    </div>
                                    <div class="leading-4">
                                        Tego vomito
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </nav>
            <!-- Dropdown End -->

        </div>

    </div>
    <div class="hidden lg:block">
        <div class="mx-auto flex max-w-content-max items-center">
            <a href="" class="block w-50 shrink-0">
                <img src="/images/logos/talke-logo.svg" alt="" />
            </a>
            <div class="ml-5 flex-grow">
                <!-- navigation-template.hbs -->
                <nav class="relative z-50">
                    <ul class="flex justify-between pl-5 uppercase font-talke-semibold" x-data="">
                        <li class="relative" @mouseenter="
          dropdownToggle($el);" @mouseleave="
          dropdownToggle($el);">
                            <span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
                                Carus
                                <svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                </svg>
                            </span>
                            <ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Adflicto tardus

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                debeo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                deleo
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Una ulciscor

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                vir
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                acquiro
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                patria
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
                    expandSubMenu($el);">
                                        Truculenter benevolentia

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                soluta
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                creo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                corona
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                delego
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="relative" @mouseenter="
          dropdownToggle($el);" @mouseleave="
          dropdownToggle($el);">
                            <span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
                                Sto
                                <svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                </svg>
                            </span>
                            <ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Stultus adficio

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                adiuvo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                adfectus
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                eius
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                tenus
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Curvo suggero

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                nobis
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                tonsor
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                absum
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                thymum
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
                    expandSubMenu($el);">
                                        Adfectus neque

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                aqua
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                eos
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                occaecati
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                administratio
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Tendo aeneus

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                calamitas
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="relative" @mouseenter="
          dropdownToggle($el);" @mouseleave="
          dropdownToggle($el);">
                            <span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red">
                                Deprimo
                                <svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                </svg>
                            </span>
                            <ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <a href="#" class="flex items-center justify-between p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                        Tametsi adsidue
                                    </a>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Amet vis

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                viridis
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                ad
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                vociferor
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                coniecto
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
                    expandSubMenu($el);">
                                        Dolorem cursus

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                terga
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                vulgo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                paens
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Bis curto

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                demo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                pectus
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                fuga
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                fuga
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Careo denuo

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                usus
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Campana contigo

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                defendo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                excepturi
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                crastinus
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="relative" @mouseenter="
          dropdownToggle($el);" @mouseleave="
          dropdownToggle($el);">
                            <span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
                                Debilito
                                <svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                </svg>
                            </span>
                            <ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Creta ullus

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                derideo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                uberrime
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                ullus
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                coma
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Dolorum spargo

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                alius
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
                    expandSubMenu($el);">
                                        Canto fugiat

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                aestus
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                sint
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Vorago absque

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                sum
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                tantum
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                stips
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="relative" @mouseenter="
          dropdownToggle($el);" @mouseleave="
          dropdownToggle($el);">
                            <span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
                                Cohibeo
                                <svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                </svg>
                            </span>
                            <ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Cinis vinculum

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                paulatim
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                anser
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                aptus
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Cito optio

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                summa
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                statua
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
                    expandSubMenu($el);">
                                        Thymbra certe

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                adulatio
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="relative" @mouseenter="
          dropdownToggle($el);" @mouseleave="
          dropdownToggle($el);">
                            <span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
                                Debitis
                                <svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                </svg>
                            </span>
                            <ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Animus iure

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                ago
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                annus
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <a href="#" class="flex items-center justify-between p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                        Vesper arbitro
                                    </a>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
                    expandSubMenu($el);">
                                        Commodi aut

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                labore
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                civis
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Coerceo adeptio

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                cohaero
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                accendo
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                textilis
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                demonstro
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Teres inventore

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                curtus
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="relative" @mouseenter="
          dropdownToggle($el);" @mouseleave="
          dropdownToggle($el);">
                            <span class="h-16 flex items-center whitespace-nowrap cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red ">
                                Tredecim
                                <svg class="rotate-180 transition-transform duration-300 shrink-0 ml-2 shrink-0 fill-current pointer-events-none" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                </svg>
                            </span>
                            <ul class="w-full shadow-lg opacity-0 pointer-events-none inset-center-x top-16 min-w-navigation max-h-navigationDesktop" data-level="1">
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Absorbeo astrum

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                possimus
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                denique
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                stella
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                tum
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red " @mouseover="
                    expandSubMenu($el);">
                                        Virtus deduco

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                pecto
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                ullam
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                suus
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                carus
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="relative odd:bg-white even:bg-zinc-100 text-xxs group">
                                    <span class="p-5 flex items-center justify-between cursor-pointer underline transition-colors duration-300 hover:decoration-inherit decoration-transparent hover:text-talke-red text-talke-red" @mouseover="
                    expandSubMenu($el);">
                                        Defluo considero

                                        <svg class="ml-5 rotate-90 transition-transform duration-300 w-3 h-auto shrink-0 fill-current" viewBox="2.2135 0.4149 15.93 8.9516" width="15.93px" height="8.952px" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M 3.921 9.074 C 3.53 9.464 2.897 9.464 2.506 9.074 C 2.116 8.684 2.116 8.05 2.506 7.66 L 9.459 0.707 C 9.657 0.509 9.919 0.411 10.179 0.415 C 10.438 0.411 10.7 0.509 10.898 0.707 L 17.851 7.66 C 18.241 8.05 18.241 8.684 17.851 9.074 C 17.46 9.464 16.827 9.464 16.436 9.074 L 10.179 2.816 L 3.921 9.074 Z" />
                                        </svg>
                                    </span>
                                    <ul class="absolute top-0 transition-all duration-200 delay-100 bg-white opacity-0 pointer-events-none left-full bg-inherit min-w-navigation group-hover:pointer-events-auto group-hover:opacity-100" data-level="2">
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                acidus
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="block p-5 underline transition-colors duration-300 cursor-pointer hover:decoration-inherit decoration-transparent hover:text-talke-red">
                                                argentum
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>
</div>

<div id="c185" class="mb-12 mask-bottom">
    <div class="w-full pt-10 bg-cover pb-mask" style="background-image: url('https://picsum.photos/1366/532')">
        <div class="px-8 mb-10 md:mb-0">
            <div class="w-full px-5 mx-auto text-white rounded py-7 max-w-text-box bg-talke-blue-70">
                <h2 class="mb-3 text-xl font-talke-semibold">Repudiandae acies</h2>

                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">Spiculum comes creo cogo collum amaritudo conduco quod</h1>

                <p class="text-lg font-talke-regular">Ater cito cupio cultellus vociferor carmen omnis cupiditas thymbra adipiscor verumtamen synagoga reprehenderit ultra venustas adversus spiculum alo arx suus quasi vix acervus venio ventosus doloribus vesica aestas defendo celebrer.</p>

                <div class="mt-8">

                    <a class="cursor-pointer rounded px-5 py-3 text-lg transition-colors duration-300 font-talke-regular bg-talke-red hover:bg-talke-active-red text-white ">Vapulus annus</a>

                </div>

            </div>

        </div>
    </div>
</div>

<div class="my-12 px-8" id="c503">
    <div class="mb-12 md:mt-0">
        <div class="mx-auto text-center max-w-teaser-intro
  text-talke-blue
  
">
            <h1 class="mb-3 text-xl font-talke-semibold">
                Quis speciosus
            </h1>
            <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                Acceptus averto arguo nihil
            </h2>
            <p class="text-sm font-talke-regular text-talke-text-gray">
                Velut somnus bonus sum campana chirographum aduro cui tempore tunc velum sodalitas talio coma titulus decumbo credo despecto creptio ceno.
            </p>
        </div>

    </div>
    <div class="mx-auto w-full max-w-content-max">
        <div class="tagembed-widget" style="width:100%;height:100%;overflow:auto;" data-widget-id="231368" website="1"></div>
        <script src="https://widget.tagembed.com/embed.min.js" type="text/javascript"></script>
    </div>
</div>

<div class="my-12 px-8" id="c121">
    <section class="mx-auto w-full max-w-content-max splide splideTeaserbox">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <a href="" class="relative flex flex-col overflow-hidden text-white rounded group h-80 bg-talke-blue pt-48 hover:pt-0 transition-all duration-500 w-48">
                        <img class="absolute inset-0 w-full h-auto" src="https://picsum.photos/id/26/200/200" alt="" />
                        <div class="relative flex-grow px-3 pt-3 pb-3 transition-all duration-300 rounded bg-talke-blue -top-1 group-hover:pt-8">
                            <h2 class="mb-2 text-lg font-talke-semibold">
                                Sponte ipsum
                            </h2>
                            <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
                                traho ulciscor
                            </h3>
                            <p class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular">
                                Eius debitis adeptio cito mollitia vespillo absum beatus comptus cernuus dapifer universe capitulus demo benevolentia theologus uter ait crustulum tenus.
                            </p>
                        </div>
                    </a>

                </li>
                <li class="splide__slide">
                    <a href="" class="relative flex flex-col overflow-hidden text-white rounded group h-80 bg-talke-blue pt-48 hover:pt-0 transition-all duration-500 w-48">
                        <img class="absolute inset-0 w-full h-auto" src="https://picsum.photos/id/38/200/200" alt="" />
                        <div class="relative flex-grow px-3 pt-3 pb-3 transition-all duration-300 rounded bg-talke-blue -top-1 group-hover:pt-8">
                            <h2 class="mb-2 text-lg font-talke-semibold">
                                Balbus deduco
                            </h2>
                            <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
                                ducimus sopor
                            </h3>
                            <p class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular">
                                Cum tremo centum statim textilis atqui balbus apparatus tubineus dapifer strenuus argentum perferendis arcesso annus ab vorago paulatim amet autus.
                            </p>
                        </div>
                    </a>

                </li>
                <li class="splide__slide">
                    <a href="" class="relative flex flex-col overflow-hidden text-white rounded group h-80 bg-talke-blue pt-48 hover:pt-0 transition-all duration-500 w-48">
                        <img class="absolute inset-0 w-full h-auto" src="https://picsum.photos/id/59/200/200" alt="" />
                        <div class="relative flex-grow px-3 pt-3 pb-3 transition-all duration-300 rounded bg-talke-blue -top-1 group-hover:pt-8">
                            <h2 class="mb-2 text-lg font-talke-semibold">
                                Sol supra
                            </h2>
                            <h3 class="text-2xl uppercase mb-7 font-talke-semibold">
                                victoria vacuus
                            </h3>
                            <p class="text-sm transition-opacity opacity-0 group-hover:opacity-100 font-talke-regular">
                                Magnam urbs cognomen tabula desidero subnecto articulus asper auctor suadeo adduco vix illum vix trado crustulum eos spectaculum una unde.
                            </p>
                        </div>
                    </a>

                </li>
            </ul>
        </div>
    </section>
</div>

<div class="px-8 my-12" id="c466">
    <div class="mb-12">
        <div class="mx-auto text-center max-w-teaser-intro
  text-talke-blue
  
">
            <h1 class="mb-3 text-xl font-talke-semibold">
                Quis speciosus
            </h1>
            <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                Acceptus averto arguo nihil
            </h2>
            <p class="text-sm font-talke-regular text-talke-text-gray">
                Velut somnus bonus sum campana chirographum aduro cui tempore tunc velum sodalitas talio coma titulus decumbo credo despecto creptio ceno.
            </p>
        </div>

    </div>
    <div class="flex flex-col items-center w-full gap-8 mx-auto mb-12 lg:items-start lg:justify-center lg:flex-row max-w-teaser-intro">
        <div class="w-full md:w-2/3 lg:w-1/3">
            <a href="" class="flex flex-col">
                <img class="w-24 h-auto mb-6" src="/images/dummy/dummy-icon-00.svg" alt="" />
                <h2 class="mb-3 text-2xl font-talke-light text-talke-blue"></h2>
                <ul class="contentlist">
                    <li>
                        Eveniet tersus arma tergo voluptas aeternus apto undique convoco demo articulus voluptatibus attonbitus ab vox virgo terga vilicus natus apparatus
                    </li>
                    <li>
                        Terreo tardus tandem ipsam ipsum vivo depraedor vita custodia antepono velociter ventosus sequi bellum tabesco viduo depulso aequitas censura tollo
                    </li>
                    <li>
                        Denego compello velociter laudantium facilis certus audentia cotidie crux tripudio vitiosus vesper aro natus ex explicabo corrumpo eius utpote vespillo
                    </li>
                </ul>
            </a>
        </div>
        <div class="w-full md:w-2/3 lg:w-1/3">
            <a href="" class="flex flex-col">
                <img class="w-24 h-auto mb-6" src="/images/dummy/dummy-icon-00.svg" alt="" />
                <h2 class="mb-3 text-2xl font-talke-light text-talke-blue"></h2>
                <ul class="contentlist">
                    <li>
                        Delicate vomica quod vapulus ultra creber adaugeo tardus charisma vomito vomica corporis esse subseco somnus ter civitas aegrotatio audacia calcar
                    </li>
                    <li>
                        Carcer corrumpo suscipit vomica circumvenio crinis circumvenio patior conservo tertius pel cedo eligendi inflammatio comes nihil dicta rem virgo neque
                    </li>
                    <li>
                        Tui uterque valde charisma tandem civis atqui ipsum universe aurum caelestis capto paulatim textus denique maiores credo velit cervus decerno
                    </li>
                </ul>
            </a>
        </div>
        <div class="w-full md:w-2/3 lg:w-1/3">
            <a href="" class="flex flex-col">
                <img class="w-24 h-auto mb-6" src="/images/dummy/dummy-icon-00.svg" alt="" />
                <h2 class="mb-3 text-2xl font-talke-light text-talke-blue"></h2>
                <ul class="contentlist">
                    <li>
                        Pel crepusculum adamo occaecati adstringo spiritus thema unde asporto reiciendis cupressus tollo consuasor dens audio sumptus vobis quos pecto thema
                    </li>
                    <li>
                        Sollicito strenuus terebro articulus ex adipisci vulariter sunt arcesso teres tabesco argentum calamitas conatus cibus teres adsum vetus amissio corona
                    </li>
                    <li>
                        Strues cado thalassinus careo curo aliquid surculus amor caries cito consequatur dapifer tantum animus viscus sopor despecto comparo supellex clementia
                    </li>
                </ul>
            </a>
        </div>
    </div>
</div>

<div class="my-12 mask-top" id="c315">
    <div class="mask-bottom
    
    
  ">
        <div class="w-full bg-cover py-mask" style="background-image: url('https://picsum.photos/1366/788')">
            <div class="px-8 my-10 md:my-0">
                <div class="w-full px-5 mx-auto text-white rounded py-7 max-w-text-box bg-talke-blue-70">
                    <h2 class="mb-3 text-xl font-talke-semibold">Suffragium cito</h2>

                    <h1 class="mb-2 text-2xl uppercase font-talke-semibold">Defero dapifer voluptatibus delinquo vinculum admoveo caritas porro</h1>

                    <p class="text-lg font-talke-regular">Vulnus vomito tamen defero vapulus concedo culpo vix patrocinor numquam utilis thermae demulceo cunae adipisci aegrus porro pel modi conservo conqueror beatae caute cuppedia usque aduro degenero ager quam ante.</p>

                    <div class="mt-8">

                        <a class="cursor-pointer rounded px-5 py-3 text-lg transition-colors duration-300 font-talke-regular bg-white hover:bg-talke-light-grey text-talke-blue hover:text-talke-light-blue">Vapulus annus</a>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<div class="my-12 px-8" id="c253">
    <div class="mb-12 md:mt-0">
        <div class="mx-auto text-center max-w-teaser-intro
  text-talke-blue
  
">
            <h1 class="mb-3 text-xl font-talke-semibold">
                Quis speciosus
            </h1>
            <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                Acceptus averto arguo nihil
            </h2>
            <p class="text-sm font-talke-regular text-talke-text-gray">
                Velut somnus bonus sum campana chirographum aduro cui tempore tunc velum sodalitas talio coma titulus decumbo credo despecto creptio ceno.
            </p>
        </div>

    </div>
    <div class="mx-auto mb-12 grid w-full max-w-content-max gap-8 md:grid-cols-3">
        <a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
            <div class="aspect-h-9 aspect-w-16 w-full">
                <iframe src="https://www.youtube-nocookie.com/embed/ioBnTsh_4YE?autohide=1&controls=1&iv_load_policy=3" allowfullscreen="" allow="fullscreen"></iframe>
            </div>
            <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
                <div>
                    <h2 class="mb-3 font-talke-semibold text-lg">
                        Palm Beach Gardens | 17.01.2026 | Communis nulla acer sunt
                    </h2>
                    <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                        Textilis adfero suggero thesis
                    </h1>
                    <p class="mb-5 font-talke-regular text-lg">
                        Demo administratio creta adopto vinitor deludo cumque comparo cogito aperio tabesco contigo vilis vox tertius vacuus sopor tantum vesper sono.
                    </p>
                </div>
                <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
                    Celer
                </div>
            </div>
        </a>

        <a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
            <div class="relative w-full overflow-hidden pb-[calc(100%_/_683_*_384)]">
                <img class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105" src="https://picsum.photos/id/32/683/384" alt="" />
            </div>
            <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
                <div>
                    <h2 class="mb-3 font-talke-semibold text-lg">
                        New Guidofort | 15.09.2025 | Ademptio tempus subnecto coruscus
                    </h2>
                    <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                        Tabula abbas acidus averto
                    </h1>
                    <p class="mb-5 font-talke-regular text-lg">
                        Terminatio angulus antiquus tergo vinitor viriliter tametsi aeger vesper corona convoco damnatio crapula catena cito astrum usque altus autus umerus.
                    </p>
                </div>
                <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
                    Amoveo
                </div>
            </div>
        </a>

        <a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
            <div class="relative w-full overflow-hidden pb-[calc(100%_/_683_*_384)]">
                <img class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105" src="https://picsum.photos/id/64/683/384" alt="" />
            </div>
            <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
                <div>
                    <h2 class="mb-3 font-talke-semibold text-lg">
                        Bahringermouth | 29.03.2026 | Bellicus depopulo pauper angulus
                    </h2>
                    <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                        Supplanto comedo somnus contabesco
                    </h1>
                    <p class="mb-5 font-talke-regular text-lg">
                        Aufero eius conicio acceptus saepe voro tero cunabula auctus triumphus calamitas voluptatibus thermae paens dedico spiculum truculenter cresco despecto pax.
                    </p>
                </div>
                <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
                    Uter
                </div>
            </div>
        </a>

    </div>
    <div class="mb-10 flex justify-around md:mb-0">

        <a class="cursor-pointer rounded px-5 py-3 text-lg transition-colors duration-300 font-talke-regular bg-talke-blue hover:bg-talke-light-blue text-white ">Vapulus annus</a>

    </div>
</div>

<div class="my-12 mask-top" id="c806">
    <div class="mask-bottom
    
    
  ">
        <div class="w-full bg-cover py-mask" style="background-image: url('https://picsum.photos/1366/788')">
            <div class="px-8 my-10 md:my-0">
                <div class="w-full px-5 mx-auto text-white rounded py-7 max-w-text-box bg-talke-blue-70">
                    <h2 class="mb-3 text-xl font-talke-semibold">Suffragium cito</h2>

                    <h1 class="mb-2 text-2xl uppercase font-talke-semibold">Defero dapifer voluptatibus delinquo vinculum admoveo caritas porro</h1>

                    <p class="text-lg font-talke-regular">Vulnus vomito tamen defero vapulus concedo culpo vix patrocinor numquam utilis thermae demulceo cunae adipisci aegrus porro pel modi conservo conqueror beatae caute cuppedia usque aduro degenero ager quam ante.</p>

                    <div class="mt-8">

                        <a class="cursor-pointer rounded px-5 py-3 text-lg transition-colors duration-300 font-talke-regular bg-talke-red hover:bg-talke-active-red text-white ">Vapulus annus</a>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<div class="px-8 my-12" id="c143">
    <div class="mb-12">
        <div class="mx-auto text-center max-w-teaser-intro
  text-talke-blue
  
">
            <h1 class="mb-3 text-xl font-talke-semibold">
                Quis speciosus
            </h1>
            <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                Acceptus averto arguo nihil
            </h2>
            <p class="text-sm font-talke-regular text-talke-text-gray">
                Velut somnus bonus sum campana chirographum aduro cui tempore tunc velum sodalitas talio coma titulus decumbo credo despecto creptio ceno.
            </p>
        </div>

    </div>
    <div class="grid w-full gap-8 mx-auto md:grid-cols-2 max-w-teaserbox-medium-2-cols">
        <a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
            <div class="relative w-full overflow-hidden pb-[calc(100%_/_340_*_230)]">
                <img class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105" src="https://picsum.photos/id/59/340/230" alt="" />
            </div>
            <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
                <div>
                    <h2 class="mb-3 font-talke-semibold text-lg">
                        Nemo usque
                    </h2>
                    <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                        Amaritudo coerceo celebrer degero
                    </h1>
                    <p class="mb-5 font-talke-regular text-lg">
                        Officiis atrox utilis cuius aufero subiungo suscipit solutio adstringo cito tot verumtamen adduco communis cerno sponte confero artificiose demitto aegrus.
                    </p>
                </div>
                <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
                    Voluptates
                </div>
            </div>
        </a>

        <a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
            <div class="relative w-full overflow-hidden pb-[calc(100%_/_340_*_230)]">
                <img class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105" src="https://picsum.photos/id/85/340/230" alt="" />
            </div>
            <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
                <div>
                    <h2 class="mb-3 font-talke-semibold text-lg">
                        Vallum tollo
                    </h2>
                    <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                        Solitudo patria aegrotatio spiculum
                    </h1>
                    <p class="mb-5 font-talke-regular text-lg">
                        Desino termes est creta patruus velut in celo audentia decipio sustineo crustulum crux caste tendo ventito bene adnuo asporto sint.
                    </p>
                </div>
                <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
                    Barba
                </div>
            </div>
        </a>

        <a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
            <div class="relative w-full overflow-hidden pb-[calc(100%_/_340_*_230)]">
                <img class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105" src="https://picsum.photos/id/26/340/230" alt="" />
            </div>
            <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
                <div>
                    <h2 class="mb-3 font-talke-semibold text-lg">
                        Vitiosus campana
                    </h2>
                    <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                        Amaritudo coepi strues solitudo
                    </h1>
                    <p class="mb-5 font-talke-regular text-lg">
                        Tui tertius nesciunt crepusculum sol dolore taceo aut tricesimus suggero vis culpa sit vox antea armarium consequuntur autus suffragium comes.
                    </p>
                </div>
                <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
                    Uterque
                </div>
            </div>
        </a>

        <a href="#" class="group relative flex flex-col overflow-hidden rounded bg-talke-blue bg-white text-talke-blue">
            <div class="relative w-full overflow-hidden pb-[calc(100%_/_340_*_230)]">
                <img class="absolute inset-0 h-auto w-full scale-100 transition-transform duration-500 ease-in-out group-hover:scale-105" src="https://picsum.photos/id/27/340/230" alt="" />
            </div>
            <div class="relative -mt-1 flex flex-grow flex-col justify-between rounded bg-white p-5">
                <div>
                    <h2 class="mb-3 font-talke-semibold text-lg">
                        Dens vomica
                    </h2>
                    <h1 class="mb-2 font-talke-semibold text-2xl uppercase">
                        Thorax copiose sollers testimonium
                    </h1>
                    <p class="mb-5 font-talke-regular text-lg">
                        Crudelis recusandae cerno quam cunabula somniculosus tabernus vindico barba accusator adduco vitae trepide basium vesper studio ad succurro caute veniam.
                    </p>
                </div>
                <div class="font-talke-semibold text-lg underline decoration-transparent transition-colors duration-500 group-hover:decoration-inherit">
                    Thermae
                </div>
            </div>
        </a>

    </div>
</div>

<div class="my-12 mask-top" id="c510">
    <div class="mask-bottom
    
    
  ">
        <div class="w-full bg-cover py-mask" style="background-image: url('https://picsum.photos/1366/788')">
            <div class="px-8 my-10 md:my-0">
                <div class="w-full px-5 mx-auto text-white rounded py-7 max-w-text-box bg-talke-blue-70">
                    <h2 class="mb-3 text-xl font-talke-semibold">Suffragium cito</h2>

                    <h1 class="mb-2 text-2xl uppercase font-talke-semibold">Defero dapifer voluptatibus delinquo vinculum admoveo caritas porro</h1>

                    <p class="text-lg font-talke-regular">Vulnus vomito tamen defero vapulus concedo culpo vix patrocinor numquam utilis thermae demulceo cunae adipisci aegrus porro pel modi conservo conqueror beatae caute cuppedia usque aduro degenero ager quam ante.</p>

                    <div class="mt-8">

                        <a class="cursor-pointer rounded px-5 py-3 text-lg transition-colors duration-300 font-talke-regular bg-talke-teal  text-talke-dark-blue hover:text-talke-text-gray">Vapulus annus</a>

                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<div class="bg-talke-teal py-[calc(15.4%_+_48px)] -my-[calc(15.4%_+_48px)]"></div>

<div class="my-12 mask-top" id="c107">
    <div class="mask-bottom
    bg-white
    
  ">
        <div class="px-8 py-mask">
            <div class="mb-12">
                <div class="mx-auto text-center max-w-teaser-intro
  text-talke-blue
  
">
                    <h1 class="mb-3 text-xl font-talke-semibold">
                        Quis speciosus
                    </h1>
                    <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                        Acceptus averto arguo nihil
                    </h2>
                    <p class="text-sm font-talke-regular text-talke-text-gray">
                        Velut somnus bonus sum campana chirographum aduro cui tempore tunc velum sodalitas talio coma titulus decumbo credo despecto creptio ceno.
                    </p>
                </div>

            </div>
            <div class="flex justify-around">

                <a class="cursor-pointer rounded px-5 py-3 text-lg transition-colors duration-300 font-talke-regular bg-talke-red hover:bg-talke-active-red text-white ">Vapulus annus</a>

            </div>
        </div>
    </div>
</div>

<div class="mask-footer bg-talke-light-blue pb-[16%] -mt-[calc(15.4%_+_50px)] -mb-px">
</div>

<div class="px-8 pb-12 bg-talke-light-blue">
    <div class="flex flex-col justify-between w-full mx-auto space-y-20 text-white max-w-content-max lg:space-y-0 lg:flex-row">
        <div>
            <ol class="space-y-6 text-sm font-talke-semibold">
                <li>
                    <a href="#">Demonstro aequus</a>
                </li>
                <li>
                    <a href="#">Aegre spectaculum</a>
                </li>
                <li>
                    <a href="#">Turbo arto</a>
                </li>
                <li>
                    <a href="#">Eveniet antea</a>
                </li>
            </ol>
        </div>
        <div class="flex flex-col">
            <div class="min-w-full w-min">
                <div class="mb-3 text-2xl uppercase font-talke-regular">
                    Follow us
                </div>
                <div class="mb-8 text-lg break-words font-talke-regular">
                    Laudantium trado aduro tersus ad curto una:
                </div>
            </div>
            <div class="flex space-x-4">
                <a href="#" target="_blank">
                    <img src="/images/icons/instagram.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/facebook.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/linkedin.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/xing.svg" alt="" />
                </a>
                <a href="#" target="_blank">
                    <img src="/images/icons/youtube.svg" alt="" />
                </a>
            </div>
        </div>
    </div>
</div>
<div class="px-8 py-5 bg-talke-blue text-talke-light-blue">
    <div class="w-full mx-auto text-xs max-w-content-max font-talke-semibold">
        &copy; ALFRED TALKE GmbH & Co.
    </div>
</div>

<div class="fixed bottom-0 flex items-end justify-end w-full h-screen pb-5 pr-6 transition-opacity pointer-events-none lg:opacity-0 max-w-outer-body z-50" x-data="" :class="{
      'lg:opacity-100 lg:delay-300': showQuickbarJumptop,
      'lg:opacity-0': !showQuickbarJumptop}">
    <div class="inline-flex items-center justify-center rounded shadow cursor-pointer pointer-events-auto bg-talke-light-blue w-14 h-14" x-on:click="
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    })
  ">
        <svg height="27.445" viewBox="0 0 30.816 27.445" width="30.816" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                <path d="m122.786 4v11.442c0 14.346-13.984 13.984-13.984 13.984l-6.8.017" transform="translate(-100.998 -3)" />
                <path d="m254.558 14.17 7.628-10.17 7.628 10.171" transform="translate(-240.398 -3)" />
            </g>
        </svg>
    </div>
</div>
{{render "@header"}}

{{render "@stage"}}

{{render "@social-wall"}}

{{render "@teaserbox-small"}}

{{render "@teaserbox-icon-text-3-cols--default"}}

{{render "@imagebox--white"}}

{{render "@teaserbox-news-3-cols--no-mask"}}

{{render "@imagebox--red"}}

{{render "@teaserbox-medium-2-cols"}}

{{render "@imagebox--teal"}}

{{render "@spacer--teal"}}

{{render "@textbox--masked"}}

{{render "@footer"}}

{{render "@quickbar-jumptop"}}
/* No context defined. */

No notes defined.