<template>
    <div
    class="flex flex-col md:flex-row justify-between items-center py-[10vw] md:py-0 absolute top-[140vw] md:top-[54.3vw] w-full z-[3] border-y h-[133.846vw] md:h-[9.115vw] text-[#383E43] px-[10vw]"
  >
    <div class="flexBox flex-col">
      <p class="text-[8.318vw] md:text-[2.344vw]">{{info.data.value.expertise}}</p>
      <p class="text-[3.59vw] md:text-[0.938vw]">حوزه تخصصی</p>
    </div>
    <div class="flexBox flex-col">
      <p class="text-[8.318vw] md:text-[2.344vw]">{{ numberFormat(info.data.value.student) }}</p>
      <p class="text-[3.59vw] md:text-[0.938vw]">دانشجو</p>
    </div>
    <div class="flexBox flex-col">
      <p class="text-[8.318vw] md:text-[2.344vw]">{{ numberFormat(info.data.value.title) }}</p>
      <p class="text-[3.59vw] md:text-[0.938vw]">عنوان آموزشی</p>
    </div>
    <div class="flexBox flex-col">
      <p class="text-[8.318vw] md:text-[2.344vw]">{{ numberFormat(info.data.value.hours) }}</p>
      <p class="text-[3.59vw] md:text-[0.938vw]">ساعت آموزش</p>
    </div>
  </div>

</template>
<script setup>
const info = await useFetch('/api/settings')
</script>