Subpage

<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="px-8 my-12" id="c107">
    <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 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="bg-talke-blue py-[calc(15.4%_+_48px)] -my-[calc(15.4%_+_48px)]"></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="bg-talke-blue py-[calc(15.4%_+_48px)] -my-[calc(15.4%_+_48px)]"></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="px-8 my-12" id="c598">
    <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="mx-auto mb-12 text-2xl text-center max-w-content-max font-talke-light text-talke-blue">
        Chicago
    </div>
    <div class="splide splideContacts">
        <div class="mx-auto mb-12 splide__track max-w-content-max ">
            <ul class="splide__list ">
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/82/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Elena Grady
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Product Solutions Producer
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 396 711 216</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">elena.grady@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/93/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Andy Hoeger
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Human Optimization Developer
                                </h2>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">andy.hoeger@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/43/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Vivianne Johnson
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Regional Research Executive
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 277 498 725</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">vivianne.johnson@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/86/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Shayne Collier
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Principal Tactics Orchestrator
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 954 970 132</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">shayne.collier@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/75/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Darren Cartwright
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Senior Implementation Designer
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 525 730 775</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">darren.cartwright@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/78/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Jerry Little
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Human Brand Engineer
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 580 316 174</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">jerry.little@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/69/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Ariane Lind
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Lead Response Strategist
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 105 133 848</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">ariane.lind@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/33/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Rashawn Wilkinson
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Internal Tactics Technician
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 128 218 405</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">rashawn.wilkinson@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/83/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Marcellus Keebler
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Product Tactics Representative
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 184 807 289</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">marcellus.keebler@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="flex w-full splide__slide ">
                    <div class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                        <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                            <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/79/342/245" alt="" />
                        </div>
                        <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                            <div>
                                <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                    Scarlett Pollich
                                </h1>
                                <h2 class="mb-5 text-lg font-talke-semibold">
                                    Forward Response Representative
                                </h2>
                                <p class="mb-5 text-lg font-talke-semibold text-talke-light-blue">
                                    Tel: <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="tel:#">+49 953 802 790</a>
                                </p>
                            </div>
                            <div class="text-lg font-talke-semibold text-talke-light-blue">
                                E-Mail:<br>
                                <a class="underline transition-colors duration-500 hover:decoration-inherit decoration-transparent" href="mailto:#">scarlett.pollich@talke.com</a>
                            </div>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
        <div class="flex mx-auto justify-evenly splide__arrows max-w-content-max ">
            <button class="flex items-center justify-center w-10 h-10 text-white rounded prev bg-talke-blue">
                <svg class="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>
            </button>
            <ul class="px-10 splide__pagination"></ul>
            <button class="flex items-center justify-center w-10 h-10 text-white rounded next bg-talke-blue">
                <svg class="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>
            </button>
        </div>
    </div>
</div>

<div class="my-12 mask-top" id="c169">
    <div class="mask-bottom
    
    bg-talke-blue
  ">
        <div class="text-white space-y-14 py-mask">
            <div class="px-8 mx-auto max-w-text-box">
                <h1 class="mb-5 text-2xl uppercase font-talke-semibold text-talke-headline">
                    Cogito solvo valetudo taceo advenio abstergo aegre consequatur
                </h1>
                <div class="richtext">
                    <p class="contenttext">
                        Cupio templum curto iste angulus vallum viridis admiratio cras averto. Arbitro vulgo tondeo doloremque sol.Cunabula umerus spiculum aveho venustas verto. <a href="#">Tendo sopor</a>. Toties architecto nobis tolero comis aurum colo statua deduco tutis. Demum benigne harum amplus somnus error atavus thermae condico.
                    </p>
                    <p class="contenttext">
                        Antiquus arma dens labore vacuus impedit. Tepidus corona centum arguo tamdiu suscipio damno solium cavus ipsam.Atqui caterva comminor sequi cruciamentum amet. <a href="#">Cunae tempora</a>. Attollo statim supellex explicabo adsidue bonus vilis celebrer umerus. Argentum repudiandae amo terror clarus suspendo ubi summopere cibo.
                    </p>
                    <p class="contenttext">
                        Expedita curriculum ubi supellex. Bos tonsor acsi teneo calcar vinculum.Anser demonstro adamo viriliter vallum carpo. <a href="#">Capitulus sponte</a>. Despecto suasoria consequatur aureus summa ventus spero verbera neque pariatur. Perspiciatis ipsa stillicidium virtus eius.
                    </p>
                </div>
                <figure>
                    <img class="w-full h-auto mt-5" src="https://picsum.photos/525/440" alt="" />
                    <figcaption class="mt-2 text-xs">
                        &copy; Ea cuius apud
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
</div>

<div class="my-12 text-talke-text-gray space-y-14">
    <div class="px-8 mx-auto max-w-text-box">
        <h1 class="mb-5 text-2xl uppercase font-talke-semibold text-talke-headline">
            Cogito solvo valetudo taceo advenio abstergo aegre consequatur
        </h1>
        <div class="richtext">
            <p class="contenttext">
                Cupio templum curto iste angulus vallum viridis admiratio cras averto. Arbitro vulgo tondeo doloremque sol.Cunabula umerus spiculum aveho venustas verto. <a href="#">Tendo sopor</a>. Toties architecto nobis tolero comis aurum colo statua deduco tutis. Demum benigne harum amplus somnus error atavus thermae condico.
            </p>
            <p class="contenttext">
                Antiquus arma dens labore vacuus impedit. Tepidus corona centum arguo tamdiu suscipio damno solium cavus ipsam.Atqui caterva comminor sequi cruciamentum amet. <a href="#">Cunae tempora</a>. Attollo statim supellex explicabo adsidue bonus vilis celebrer umerus. Argentum repudiandae amo terror clarus suspendo ubi summopere cibo.
            </p>
            <p class="contenttext">
                Expedita curriculum ubi supellex. Bos tonsor acsi teneo calcar vinculum.Anser demonstro adamo viriliter vallum carpo. <a href="#">Capitulus sponte</a>. Despecto suasoria consequatur aureus summa ventus spero verbera neque pariatur. Perspiciatis ipsa stillicidium virtus eius.
            </p>
        </div>
        <h2 class="mt-8 mb-3 text-2xl text-talke-blue font-talke-light">Depereo curis tunc thesis arca pauci</h2>
        <div class="aspect-w-16 aspect-h-9">
            <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <p class="mt-2 text-xs">
            &copy; Ea cuius apud
        </p>
    </div>
</div>

<div class="my-12 mask-top" id="c753">
    <div class="mask-bottom
    
    bg-talke-blue
  ">
        <div class="px-8 py-mask">
            <div class="mb-12 text-white">
                <div class="mx-auto text-center max-w-teaser-intro
      
      
    ">
                    <h1 class="mb-3 text-xl font-talke-semibold">
                        Adamo culpo
                    </h1>
                    <h2 class="mb-3 text-2xl uppercase font-talke-semibold">
                        Pecto quam magni atrox
                    </h2>
                </div>
            </div>
            <div class="splide splideRelatedTopics">
                <div class="mx-auto mb-12 splide__track max-w-content-max">
                    <ul class="splide__list">
                        <li class="flex w-full splide__slide">
                            <a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                                <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                                    <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/12/342/245" alt="" />
                                </div>
                                <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                                    <div>
                                        <h2 class="mb-3 text-lg font-talke-semibold">
                                            Adiuvo venustas
                                        </h2>
                                        <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                            Desino decerno tamquam
                                        </h1>
                                        <p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
                                            Desidero dolorum degenero. Theatrum veritatis vestrum cognomen temptatio avarus templum nisi absens. Apto argentum universe tabernus. Callide tam anser acies ulciscor totus rem molestiae congregatio vomer.
                                        </p>
                                    </div>
                                    <div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
                                        Read more
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li class="flex w-full splide__slide">
                            <a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                                <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                                    <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/23/342/245" alt="" />
                                </div>
                                <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                                    <div>
                                        <h2 class="mb-3 text-lg font-talke-semibold">
                                            Capillus totidem
                                        </h2>
                                        <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                            Atqui aegrotatio sordeo
                                        </h1>
                                        <p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
                                            Omnis crebro ocer congregatio calamitas capto quas alienus. Apparatus despecto claudeo autus totus iure clibanus illum tolero. Peccatus vis sperno adamo admitto volutabrum vigor cur tabernus. Rem vir illum vis.
                                        </p>
                                    </div>
                                    <div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
                                        Read more
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li class="flex w-full splide__slide">
                            <a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                                <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                                    <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/16/342/245" alt="" />
                                </div>
                                <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                                    <div>
                                        <h2 class="mb-3 text-lg font-talke-semibold">
                                            Spectaculum cultura
                                        </h2>
                                        <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                            Ab vir aegrotatio
                                        </h1>
                                        <p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
                                            Calcar nam admiratio civitas suscipio solum vereor volutabrum ustilo adhuc. Stips pax delectus. Accedo umbra unde caelum. Thesis omnis bos.
                                        </p>
                                    </div>
                                    <div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
                                        Read more
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li class="flex w-full splide__slide">
                            <a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                                <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                                    <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/24/342/245" alt="" />
                                </div>
                                <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                                    <div>
                                        <h2 class="mb-3 text-lg font-talke-semibold">
                                            Thorax eos
                                        </h2>
                                        <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                            Defessus centum valens
                                        </h1>
                                        <p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
                                            Cribro harum claro aliquam delicate. Tyrannus cernuus coma theca. Vesco deleo depromo subseco facilis impedit cedo. Ver contabesco comedo aiunt vesco somniculosus stella.
                                        </p>
                                    </div>
                                    <div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
                                        Read more
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li class="flex w-full splide__slide">
                            <a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                                <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                                    <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/78/342/245" alt="" />
                                </div>
                                <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                                    <div>
                                        <h2 class="mb-3 text-lg font-talke-semibold">
                                            Confero depopulo
                                        </h2>
                                        <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                            Tergeo consequuntur allatus
                                        </h1>
                                        <p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
                                            Sum compono nemo aeger nisi praesentium tribuo. Error clementia aiunt amiculum amplus amaritudo terror supellex. Tollo cognomen caritas acsi stella. Ars cupressus demitto volubilis argentum sordeo tracto aiunt auctus.
                                        </p>
                                    </div>
                                    <div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
                                        Read more
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li class="flex w-full splide__slide">
                            <a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                                <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                                    <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/27/342/245" alt="" />
                                </div>
                                <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                                    <div>
                                        <h2 class="mb-3 text-lg font-talke-semibold">
                                            Uberrime defero
                                        </h2>
                                        <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                            Cubicularis adsidue arma
                                        </h1>
                                        <p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
                                            Claustrum balbus tubineus tenax cultellus subnecto verecundia tristis. Exercitationem approbo copia teneo fugiat blanditiis veniam. Tumultus vaco soluta commodi dolorum arma numquam aestus. Thymbra socius desidero assentator somniculosus trucido utique armarium.
                                        </p>
                                    </div>
                                    <div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
                                        Read more
                                    </div>
                                </div>
                            </a>

                        </li>
                        <li class="flex w-full splide__slide">
                            <a href="#" class="relative flex flex-col w-full overflow-hidden bg-white rounded text-talke-blue bg-talke-blue group">
                                <div class="relative w-full pb-[calc(100%_/_340_*_230)] overflow-hidden">
                                    <img class="absolute inset-0 w-full h-auto transition-transform duration-500 ease-in-out scale-100 group-hover:scale-105" src="https://picsum.photos/id/92/342/245" alt="" />
                                </div>
                                <div class="relative flex flex-col justify-between flex-grow p-5 -mt-1 bg-white rounded">
                                    <div>
                                        <h2 class="mb-3 text-lg font-talke-semibold">
                                            Communis carus
                                        </h2>
                                        <h1 class="mb-2 text-2xl uppercase font-talke-semibold">
                                            Blanditiis voluptatem studio
                                        </h1>
                                        <p class="mb-5 text-lg font-talke-regular text-talke-light-blue">
                                            Amaritudo tot tabula verto dignissimos consectetur. Distinctio tenetur chirographum delinquo sub sunt ambitus curto. Necessitatibus caput demitto solum conforto caelum. Angelus caelum cubo clibanus alo tunc desparatus sit totam vallum.
                                        </p>
                                    </div>
                                    <div class="text-lg underline transition-colors duration-500 group-hover:decoration-inherit font-talke-semibold decoration-transparent">
                                        Read more
                                    </div>
                                </div>
                            </a>

                        </li>
                    </ul>
                </div>
                <div class="flex mx-auto justify-evenly splide__arrows max-w-content-max">
                    <button class="flex items-center justify-center w-10 h-10 bg-white rounded text-talke-blue prev">
                        <svg class="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>
                    </button>
                    <ul class="px-10 splide__pagination"></ul>
                    <button class="flex items-center justify-center w-10 h-10 bg-white rounded text-talke-blue next">
                        <svg class="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>
                    </button>
                </div>
            </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 "@textbox--simple"}}

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

{{render "@spacer--blue"}}

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

{{render "@spacer--blue"}}

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

{{render "@contacts-carousel-3-cols"}}

{{render "@text--text-with-image-blue"}}

{{render "@text--text-with-video"}}

{{render "@related-topics-carousel-3-cols"}}

{{render "@footer"}}

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

No notes defined.