<div
  class="
    fixed
    lg:absolute
    top-0
    lg:top-14
    inset-x-0
    lg:left-0
    w-full
    lg:w-[640px]
    h-screen
    lg:h-auto
    pt-2
    lg:-translate-x-1/4
    transition-all
    duration-300
  "
  x-bind:class="{
    'opacity-100 translate-y-0 z-50': openedMegamenu === 'megamenu-1',
    'opacity-0 translate-y-1 pointer-events-none z-0': openedMegamenu !== 'megamenu-1'
  }"
  x-cloak
>
  <div
    class="
      relative
      w-full
      px-3
      pb-3
      pt-12
      lg:p-3
      rounded-2xl
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      shadow-2xl shadow-muted-500/20
      dark:shadow-muted-800/20
    "
  >
    <!--Close button-->
    <button
      type="button"
      class="
        absolute
        top-2
        right-2
        h-12
        w-12
        flex
        lg:hidden
        items-center
        justify-center
        text-muted-600
        dark:text-muted-200
      "
      @click="megamenuOpened = false, openedMegamenu = ''"
    >
      <i class="iconify w-6 h-6" data-icon="lucide:x"></i>
    </button>

    <!--Grid-->
    <div
      class="
        grid
        md:grid-cols-2
        gap-1
        md:gap-2
        text-left
        overflow-y-auto
        slimscroll
        ptablet:pb-10
        ltablet:pb-10
      "
    >
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-primary-100
            dark:bg-primary-500
            text-primary-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:ear-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Interview management
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-lime-100
            dark:bg-lime-500
            text-lime-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i
            class="iconify w-5 h-5"
            data-icon="ph:magnifying-glass-duotone"
          ></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Advanced search
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-violet-100
            dark:bg-violet-500
            text-violet-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:sparkle-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Hotlist / Talent pool
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-yellow-100
            dark:bg-yellow-500
            text-yellow-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:note-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Resume builder
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-fuchsia-100
            dark:bg-fuchsia-500
            text-fuchsia-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:envelope-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Email integration
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-teal-100
            dark:bg-teal-500
            text-teal-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i
            class="iconify w-5 h-5"
            data-icon="ph:microsoft-excel-logo-duotone"
          ></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            CSV import / export
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-rose-100
            dark:bg-rose-500
            text-rose-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i
            class="iconify w-5 h-5"
            data-icon="ph:circles-three-plus-duotone"
          ></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            Task management
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
      <!--Grid item-->
      <a
        href="/product.html"
        class="
          relative
          flex
          gap-2
          p-4
          rounded-xl
          hover:bg-muted-100
          dark:hover:bg-muted-900
          z-10
          transition-colors
          duration-300
        "
      >
        <div
          class="
            relative
            inline-flex
            items-center
            justify-center
            w-10
            min-w-[2.5rem]
            h-10
            bg-primary-100
            dark:bg-primary-500
            text-primary-500
            dark:text-white
            mask mask-hexed
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:gift-duotone"></i>
        </div>
        <div>
          <h4
            class="
              font-heading font-semibold
              text-sm text-muted-800
              dark:text-white
            "
          >
            All Features
          </h4>
          <p class="font-sans text-xs text-muted-500 dark:text-muted-400">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit tum
            Torquatus.
          </p>
        </div>
      </a>
    </div>
  </div>
</div>
