<section class="w-full py-12 px-4 bg-white dark:bg-muted-900 overflow-hidden">
  <div class="w-full max-w-7xl mx-auto">
    <!--Section title-->
    <div class="w-full max-w-2xl mx-auto text-center space-y-4 py-6">
      <!--Badge-->
      <span
        class="
          inline-block
          font-sans
          text-xs
          py-1.5
          px-3
          m-1
          rounded-lg
          bg-primary-100
          text-primary-500
          dark:bg-primary-500 dark:text-white
        "
      >
        Our Values
      </span>
      <!--Title-->
      <h2
        class="
          font-heading font-bold
          text-4xl
          md:text-5xl
          text-muted-800
          dark:text-white
        "
      >
        Our company values
      </h2>
      <!--Subtitle-->
      <p class="font-sans text-lg text-muted-500 dark:text-muted-400">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus:
        Prorsus, inquit, assentior; Videmus igitur ut conquiescere.
      </p>
    </div>

    <div>
      <div class="relative w-full max-w-4xl mx-auto py-6">
        <!--Polka dots-->
        <div class="absolute -top-5 -left-8 z-0">{{> shapes/polka}}</div>
        <div class="absolute -bottom-5 -right-8 z-0">{{> shapes/polka}}</div>

        <div
          class="
            relative
            flex flex-col
            md:flex-row
            shadow-xl shadow-muted-400/10
            dark:shadow-muted-800/10
            z-10
          "
        >
          <!--Item-->
          <div
            class="
              group
              flex-1
              bg-white
              dark:bg-muted-800
              border border-muted-200
              dark:border-muted-700
              text-center
              px-6
              py-10
            "
          >
            <div
              class="
                flex
                items-center
                justify-center
                w-14
                h-14
                mx-auto
                mask mask-deca
                mb-4
                bg-primary-100
                text-primary-500
                dark:bg-primary-500/20 dark:text-primary-500
                group-hover:bg-primary-500 group-hover:text-white
                transition-colors
                duration-300
              "
            >
              <i
                class="block mx-auto iconify w-8 h-8"
                data-icon="ph:handshake-duotone"
              ></i>
            </div>

            <h3
              class="
                font-heading font-semibold
                text-xl
                relative
                text-muted-800
                dark:text-white
                leading-tight
                mb-4
              "
            >
              Integrity
            </h3>
            <p
              class="
                text-sm text-muted-500
                dark:text-muted-400
                leading-relaxed
                mb-4
              "
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              odio leo, gravida at facilisis nec, maximus in magna.
            </p>
          </div>
          <!--Item-->
          <div
            class="
              group
              flex-1
              bg-white
              dark:bg-muted-800
              border
              md:border-l-0 md:border-r-0
              border-muted-200
              dark:border-muted-700
              text-center
              px-6
              py-10
            "
          >
            <div
              class="
                flex
                items-center
                justify-center
                w-14
                h-14
                mx-auto
                mask mask-deca
                mb-4
                bg-yellow-100
                text-yellow-500
                dark:bg-yellow-500/10 dark:text-yellow-500
                group-hover:bg-yellow-500 group-hover:text-white
                transition-colors
                duration-300
              "
            >
              <i
                class="block mx-auto iconify w-8 h-8"
                data-icon="ph:sparkle-duotone"
              ></i>
            </div>

            <h3
              class="
                font-heading font-semibold
                text-xl
                relative
                text-muted-800
                dark:text-white
                leading-tight
                mb-4
              "
            >
              Excellence
            </h3>
            <p
              class="
                text-sm text-muted-500
                dark:text-muted-400
                leading-relaxed
                mb-4
              "
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              odio leo, gravida at facilisis nec, maximus in magna.
            </p>
          </div>
          <!--Item-->
          <div
            class="
              group
              flex-1
              bg-white
              dark:bg-muted-800
              border border-muted-200
              dark:border-muted-700
              text-center
              px-6
              py-10
            "
          >
            <div
              class="
                flex
                items-center
                justify-center
                w-14
                h-14
                mx-auto
                mask mask-deca
                mb-4
                bg-emerald-100
                text-emerald-500
                dark:bg-emerald-500/20 dark:text-emerald-500
                group-hover:bg-emerald-500 group-hover:text-white
                transition-colors
                duration-300
              "
            >
              <i
                class="block mx-auto iconify w-8 h-8"
                data-icon="ph:handshake-duotone"
              ></i>
            </div>

            <h3
              class="
                font-heading font-semibold
                text-xl
                relative
                text-muted-800
                dark:text-white
                leading-tight
                mb-4
              "
            >
              Professionalism
            </h3>
            <p
              class="
                text-sm text-muted-500
                dark:text-muted-400
                leading-relaxed
                mb-4
              "
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
              odio leo, gravida at facilisis nec, maximus in magna.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
