<footer
  class="
    group
    relative
    bg-muted-50
    dark:bg-muted-800
    text-muted-600
    body-font
    overflow-hidden
  "
>
  <div
    class="
      absolute
      -top-6
      -left-6
      h-14
      w-0
      group-hover:w-72
      origin-top-left
      rotate-45
      bg-muted-200
      dark:bg-muted-900
      rounded-full
      transition-all
      duration-300
      delay-[25ms]
    "
  ></div>
  <div
    class="
      absolute
      -top-12
      left-20
      h-14
      w-0
      group-hover:w-48
      origin-top-left
      rotate-45
      bg-muted-200
      dark:bg-muted-900
      rounded-full
      transition-all
      duration-300
      delay-75
    "
  ></div>
  <div
    class="
      absolute
      top-24
      -left-7
      h-14
      w-0
      group-hover:w-40
      origin-top-left
      rotate-45
      bg-muted-200
      dark:bg-muted-900
      rounded-full
      transition-all
      duration-300
      delay-150
    "
  ></div>

  <div
    class="
      absolute
      -bottom-6
      -right-6
      h-14
      w-0
      group-hover:w-72
      origin-bottom-right
      rotate-45
      bg-muted-200
      dark:bg-muted-900
      rounded-full
      transition-all
      duration-300
      delay-150
    "
  ></div>
  <div
    class="
      absolute
      -bottom-12
      right-20
      h-14
      w-0
      group-hover:w-48
      origin-bottom-right
      rotate-45
      bg-muted-200
      dark:bg-muted-900
      rounded-full
      transition-all
      duration-300
      delay-75
    "
  ></div>
  <div
    class="
      absolute
      bottom-24
      -right-7
      h-14
      w-0
      group-hover:w-40
      origin-bottom-right
      rotate-45
      bg-muted-200
      dark:bg-muted-900
      rounded-full
      transition-all
      duration-300
      delay-[25ms]
    "
  ></div>

  <div class="relative w-full max-w-7xl px-5 py-24 mx-auto z-20">
    <div
      class="
        flex flex-col
        ptablet:flex-row
        ltablet:flex-row
        lg:flex-row
        gap-6
        ptablet:gap-0
        ltablet:gap-0
        lg:gap-0
        flex-wrap
        md:text-left
        text-center
        -mb-10
        -mx-4
      "
    >
      <div
        class="
          w-full
          ptablet:w-1/2
          ltablet:w-1/4
          lg:w-1/4
          flex-shrink-0
          md:mx-0
          mx-auto
          text-center
          md:text-left
          px-4
        "
      >
        <a
          class="
            flex flex-col
            md:flex-row
            gap-3
            title-font
            font-medium
            items-center
            md:justify-start
            justify-center
            text-muted-800
            dark:text-white
          "
        >
          <img
            class="h-12"
            src="/img/logo/logo-square.svg"
            alt="Mistral logo"
            width="48"
            height="48"
          />
          <span class="font-heading font-bold text-2xl">Mistral</span>
        </a>
        <p
          class="
            font-sans
            text-sm
            w-full
            max-w-xs
            mx-auto
            md:max-w-[220px] md:mx-0
            mt-2
            text-muted-500
            dark:text-muted-400
          "
        >
          Mistral is a Tailwind CSS SaaS business application template built by
          Css Ninja
        </p>
      </div>
      <div class="w-full ptablet:w-1/2 ltablet:w-1/4 lg:w-1/4 px-4">
        <h2
          class="
            font-heading font-medium
            text-muted-800
            dark:text-white
            tracking-widest
            text-sm
            mb-3
          "
        >
          MISTRAL
        </h2>
        <ul class="font-sans list-none space-y-2 mb-10">
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Home
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Product
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Jobs
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Pricing
            </a>
          </li>
        </ul>
      </div>
      <div class="w-full ptablet:w-1/2 ltablet:w-1/4 lg:w-1/4 px-4">
        <h2
          class="
            font-heading font-medium
            text-muted-800
            dark:text-white
            tracking-widest
            text-sm
            mb-3
          "
        >
          COMPANY
        </h2>
        <ul class="font-sans list-none space-y-2 mb-10">
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              About
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Signup
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Sign In
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Contact
            </a>
          </li>
        </ul>
      </div>
      <div class="w-full ptablet:w-1/2 ltablet:w-1/4 lg:w-1/4 px-4">
        <h2
          class="
            font-heading font-medium
            text-muted-800
            dark:text-white
            tracking-widest
            text-sm
            mb-3
          "
        >
          ASSISTANCE
        </h2>
        <ul class="font-sans list-none space-y-2 mb-10">
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Documentation
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Support portal
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Terms Of Service
            </a>
          </li>
          <li>
            <a
              href="#"
              class="
                text-muted-600
                dark:text-muted-400
                hover:text-primary-500
                dark:hover:text-primary-500
              "
            >
              Privacy
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="relative z-20 border-t border-muted-200 dark:border-muted-700">
    <div class="w-full max-w-7xl px-5 py-8 flex flex-wrap mx-auto items-end">
      <div
        class="
          flex
          md:flex-nowrap
          flex-wrap
          justify-center
          items-end
          md:justify-start
        "
      >
        <div class="relative font-sans sm:w-64 w-40 sm:mr-4 mr-2">
          <label
            for="footer-field"
            class="leading-7 text-sm text-muted-600 dark:text-muted-400"
          >
            Newsletter
          </label>
          <input
            type="text"
            id="footer-field"
            name="footer-field"
            placeholder="Email address"
            class="
              w-full
              bg-white
              dark:bg-muted-700/50
              rounded
              border border-muted-300
              dark:border-muted-600
              text-base text-muted-700
              dark:text-muted-100
              placeholder:text-muted-300
              dark:placeholder:text-muted-600
              py-1
              px-3
              leading-8
              transition-colors
              duration-200
              ease-in-out
              tw-accessibility
            "
          />
        </div>
        <button
          class="
            inline-flex
            text-white
            bg-primary-500
            border-0
            py-2
            px-6
            hover:bg-primary-600
            rounded
            tw-accessibility
            transition-colors
            duration-300
          "
        >
          Subscribe
        </button>
        <p
          class="
            text-muted-500 text-sm
            md:ml-6 md:mt-0
            mt-2
            sm:text-left
            text-center
          "
        >
          We promise we won't
          <br class="ptablet:block ltablet:block lg:block hidden" />
          share your address
        </p>
      </div>
      <span
        class="
          inline-flex
          ptablet:ml-auto ptablet:mt-0
          ltablet:ml-auto ltablet:mt-0
          lg:ml-auto lg:mt-0
          mt-6
          w-full
          justify-center
          md:justify-start md:w-auto
          gap-2
        "
      >
        <a
          href="#"
          class="
            text-muted-500
            hover:text-primary-500
            transition-colors
            duration-300
          "
        >
          <i class="iconify w-5 h-5" data-icon="fa6-brands:facebook-f"></i>
        </a>
        <a
          href="#"
          class="
            text-muted-500
            hover:text-primary-500
            transition-colors
            duration-300
          "
        >
          <i class="iconify w-5 h-5" data-icon="fa6-brands:twitter"></i>
        </a>
        <a class="text-muted-500">
          <a
            href="#"
            class="
              text-muted-500
              hover:text-primary-500
              transition-colors
              duration-300
            "
          >
            <i class="iconify w-5 h-5" data-icon="fa6-brands:instagram"></i>
          </a>
        </a>
        <a class="text-muted-500">
          <a
            href="#"
            class="
              text-muted-500
              hover:text-primary-500
              transition-colors
              duration-300
            "
          >
            <i class="iconify w-5 h-5" data-icon="fa6-brands:linkedin-in"></i>
          </a>
        </a>
      </span>
    </div>
  </div>
  <div class="relative z-20 bg-muted-100 dark:bg-muted-900">
    <div
      class="
        w-full
        max-w-7xl
        mx-auto
        py-4
        px-5
        flex flex-wrap flex-col
        sm:flex-row
      "
    >
      <p class="text-muted-500 text-sm text-center sm:text-left">
        © 2022 - present. All Rights Reserved.
      </p>
      <span
        class="
          sm:ml-auto sm:mt-0
          mt-2
          sm:w-auto
          w-full
          sm:text-left
          text-center text-muted-500 text-sm
        "
      >
        Made by
        <a
          href="https://cssninja.io"
          class="font-sans font-semibold text-violet-500 ml-1"
          target="_blank"
          rel="noopener noreferrer"
        >
          Css Ninja
        </a>
      </span>
    </div>
  </div>
</footer>
