<template>
    <div class="h-[40.625vw] mt-[7.4vw] relative w-full flex flex-col md:flex-row justify-between">
        <div
          class="flexBox bg-white absolute -right-[65vw] rounded-b-[50%]  md:right-0 w-[230vw] md:w-[42vw] -top-[60vw] md:-top-[10vw] z-[1] h-[121.538vw] md:h-[60.625vw] md:rounded-b-[0vw] md:!rounded-l-[27vw]"
        >
          <div class="flex mt-[45vw] ms-[45vw] md:ms-[10vw] md:mt-[1.3vw] flex-col text-[#383E43]">
            <h2 class="text-[7.264vw] md:text-[2.344vw] border-b w-[65vw] md:w-[14vw] pb-[1.2vw] font-bold md:-tracking-[0.1vw]">
              درباره ما
            </h2>
            <p class="font-[400] text-[5.192vw] md:text-[1.69vw] w-[50%] md:w-[80%] md:w-[24.688vw] mt-[2.5vw] leading-[10.79vw] md:leading-[3vw]">
              ما از
              <span class="font-semibold"> قدرت آموزش </span>
              برای ایجاد
              <span class="font-semibold">تغییرات معنادار</span>
              استفاده می کنیم.
            </p>
          </div>
        </div>
        <NuxtImg
        :placeholder="[30, 20]"
          class="top-[55vw] md:top-0 md:h-[40.625vw] left-0 absolute"
          src="/images/aboutHead.jpg"
          alt="header-image"
        />
      </div>
</template>