<template>
  <div class="-z-[1] relative mt-[140vw] lg:mt-[50vw] flex flex-col items-center justify-center">
   <div class="relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center">
       <svg class="absolute" width="48.125vw" height="48.125vw" viewBox="0 0 924 924" fill="none" xmlns="http://www.w3.org/2000/svg">
           <circle cx="462" cy="462" r="461" stroke="#878787" stroke-width="2" stroke-dasharray="8 8"/>
           </svg>
           <svg class="absolute" width="75.365vw" height="75.365vw" viewBox="0 0 1447 1447" fill="none" xmlns="http://www.w3.org/2000/svg">
               <circle cx="723.5" cy="723.5" r="722.5" stroke="#878787" stroke-width="2" stroke-dasharray="8 8"/>
               </svg>

        
               
       <img
         src="/public/images/assal.png"
         alt="product-name"
         class="w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
       />
       <h1 class="font-bold text-[4.038vw] lg:text-[2.21vw] text-[#383E43] my-[2.083vw]">عسل آقای عسل</h1>
       <p class="text-[3.59vw] lg:text-[1.823vw] text-[#383E43] font-semibold" dir="rtl">
           510,000
           <span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
       </p>

   </div>
  </div>
</template>