<template>
    <div class="flexBox flex-col mt-[20vw] md:mt-[8.5vw] mb-[6.5vw] relative">
        <div class="w-[81.2vw] flex justify-between">
          <div class="w-full md:w-[30.5%] flex gap-[1vw]">
            <div class="w-full md:w-[70%] flex gap-[3vw] md:gap-[1vw] border-b h-[13.077vw] md:h-[6.4vw]">
              <svg
              class="h-[8.462vw] md:h-[2.76vw] w-[1.538vw] md:w-[0.521vw]"
                viewBox="0 0 10 53"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
                  fill="#0D3F40"
                />
              </svg>
              <p class="w-full md:w-[18vw] text-[4.8vw] md:text-[1.69vw] text-[#383E43] font-semibold">
                بخشی از فعالیت های ShinanLearning
              </p>
            </div>
          </div>
          <div class="flex gap-[2vw] md:gap-[0.6vw] absolute md:left-[0.5vw] top-[20vw] md:top-[3.2vw]">
            <svg
            class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
              viewBox="0 0 60 60"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle
                cx="30"
                cy="30"
                r="29.5"
                transform="rotate(-180 30 30)"
                stroke="#878787"
              />
              <path
                d="M26.9999 22.0802L33.5199 28.6002C34.2899 29.3702 34.2899 30.6302 33.5199 31.4002L26.9999 37.9202"
                stroke="#878787"
                stroke-width="2"
                stroke-miterlimit="10"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
  
            <svg
            class="h-[12.308vw] md:h-[3.125vw] w-[12.308vw] md:w-[3.125vw]"
              viewBox="0 0 60 60"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <circle cx="30" cy="30" r="29.5" stroke="#383E43" />
              <g clip-path="url(#clip0_1_1122)">
                <path
                  d="M33.0001 37.9198L26.4801 31.3998C25.7101 30.6298 25.7101 29.3698 26.4801 28.5998L33.0001 22.0798"
                  stroke="#383E43"
                  stroke-width="2"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </g>
              <defs>
                <clipPath id="clip0_1_1122">
                  <rect
                    width="24"
                    height="24"
                    fill="white"
                    transform="translate(18 18)"
                  />
                </clipPath>
              </defs>
            </svg>
          </div>
        </div>
  
  
        <div class="flex flex-col flex-col-reverse md:flex-row items-center justify-between mt-[25vw] md:mt-[1.6vw] w-full md:w-[81.2%]">
          <div>
              <h2 class="text-[4.544vw] mt-[10vw] md:mt-0 md:text-[1.502vw] text-[#383E43] ">آموزش آنلاین</h2>
              <p class="text-[3.59vw] md:text-[1.186vw] text-[#878787] leading-[7.692vw] md:leading-[2.083vw] mt-[3vw] md:mt-[1vw] w-[81.2vw] md:w-[39.844vw]">
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
                از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و
                سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای
                متنوع با هدف بهبود ابزارهای کاربردی می باشد
              </p>
  
          </div>
          <img
            class="h-[85.692vw] md:h-[20.469vw] w-[87.692vw] md:w-[20.469vw] rounded-[50%] object-cover"
            src="/public/images/about-slider.jpg"
            alt=""
          />
        </div>
      </div>  
</template>