function Frame1597884955() {
  return (
    <div className="box-border content-stretch flex flex-col gap-7 items-center justify-start leading-[0] not-italic p-0 relative shrink-0 text-center w-[652px]">
      <div className="font-['Inter:Semi_Bold',_sans-serif] font-semibold relative shrink-0 text-[#26231a] text-[48px] tracking-[-0.96px] w-full">
        <p className="block leading-[53px]">Our Approach</p>
      </div>
      <div className="font-['Inter:Regular',_sans-serif] font-normal relative shrink-0 text-[18px] text-[rgba(38,35,26,0.8)] w-full">
        <p className="block leading-[24px]">
          Programmatic journey over 6–12 weeks combining practical application with peer learning for maximum management
          effectiveness.
        </p>
      </div>
    </div>
  );
}

function Component01() {
  return (
    <div className="absolute bg-[#ffffff] h-[234px] left-0 top-0 w-[1230px]" data-name="01">
      <div
        className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic text-[18px] text-[rgba(38,35,26,0.8)] text-left top-[186px] w-[652px]"
        style={{ left: "calc(50% - 400px)" }}
      >
        <p className="block leading-[24px]">
          Comprehensive assessment of current management skills and development needs
        </p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] not-italic text-[#26231a] text-[40px] text-center text-nowrap top-10 tracking-[-0.8px] translate-x-[-50%]"
        style={{ left: "calc(50% - 577.5px)" }}
      >
        <p className="adjustLetterSpacing block leading-[53px] whitespace-pre">(01)</p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[53px] not-italic text-[#26231a] text-[40px] text-left text-nowrap top-10 tracking-[-0.8px] whitespace-pre"
        style={{ left: "calc(50% - 400px)" }}
      >
        <p className="adjustLetterSpacing block mb-0">{`Skills `}</p>
        <p className="adjustLetterSpacing block">Assessment</p>
      </div>
      <div className="absolute h-0 left-0 top-0 w-[1230px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 1230 1">
            <line id="Line 62" stroke="var(--stroke-0, black)" x2="1230" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Component02() {
  return (
    <div className="absolute bg-[#ffffff] h-[234px] left-0 top-[274px] w-[1230px]" data-name="02">
      <div
        className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic text-[#26231a] text-[18px] text-left top-[186px] w-[652px]"
        style={{ left: "calc(50% - 399px)" }}
      >
        <p className="block leading-[24px]">
          Customized curriculum design based on assessment results and operational context
        </p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] not-italic text-[#26231a] text-[40px] text-center text-nowrap top-10 tracking-[-0.8px] translate-x-[-50%]"
        style={{ left: "calc(50% - 576.5px)" }}
      >
        <p className="adjustLetterSpacing block leading-[53px] whitespace-pre">(02)</p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[53px] not-italic text-[#26231a] text-[40px] text-left text-nowrap top-10 tracking-[-0.8px] whitespace-pre"
        style={{ left: "calc(50% - 399px)" }}
      >
        <p className="adjustLetterSpacing block mb-0">{`Program `}</p>
        <p className="adjustLetterSpacing block">Design</p>
      </div>
      <div className="absolute h-0 left-[3px] top-0 w-[1230px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 1230 1">
            <line id="Line 62" stroke="var(--stroke-0, black)" x2="1230" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Component03() {
  return (
    <div className="absolute bg-[#ffffff] h-[234px] left-0 top-[548px] w-[1230px]" data-name="03">
      <div
        className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic text-[18px] text-[rgba(38,35,26,0.8)] text-left top-[186px] w-[601px]"
        style={{ left: "calc(50% - 398px)" }}
      >
        <p className="block leading-[24px]">
          Hands-on workshops and peer learning sessions with real-world application
        </p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] not-italic text-[#26231a] text-[40px] text-center text-nowrap top-10 tracking-[-0.8px] translate-x-[-50%]"
        style={{ left: "calc(50% - 576px)" }}
      >
        <p className="adjustLetterSpacing block leading-[53px] whitespace-pre">(03)</p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[53px] not-italic text-[#26231a] text-[40px] text-left text-nowrap top-10 tracking-[-0.8px] whitespace-pre"
        style={{ left: "calc(50% - 398px)" }}
      >
        <p className="adjustLetterSpacing block mb-0">{`Interactive `}</p>
        <p className="adjustLetterSpacing block">Learning</p>
      </div>
      <div className="absolute h-0 left-1 top-0 w-[1230px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 1230 1">
            <line id="Line 62" stroke="var(--stroke-0, black)" x2="1230" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Component04() {
  return (
    <div className="absolute bg-[#ffffff] h-[234px] left-0 top-[822px] w-[1230px]" data-name="04">
      <div
        className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic text-[18px] text-[rgba(38,35,26,0.8)] text-left top-[186px] w-[601px]"
        style={{ left: "calc(50% - 398px)" }}
      >
        <p className="block leading-[24px]">
          Ongoing support and progress tracking to ensure skills transfer and improvement
        </p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] not-italic text-[#26231a] text-[40px] text-center text-nowrap top-10 tracking-[-0.8px] translate-x-[-50%]"
        style={{ left: "calc(50% - 575.5px)" }}
      >
        <p className="adjustLetterSpacing block leading-[53px] whitespace-pre">(04)</p>
      </div>
      <div
        className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[53px] not-italic text-[#26231a] text-[40px] text-left text-nowrap top-10 tracking-[-0.8px] whitespace-pre"
        style={{ left: "calc(50% - 398px)" }}
      >
        <p className="adjustLetterSpacing block mb-0">{`Application & `}</p>
        <p className="adjustLetterSpacing block">Review</p>
      </div>
      <div className="absolute h-0 left-1 top-0 w-[1230px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 1230 1">
            <line id="Line 62" stroke="var(--stroke-0, black)" x2="1230" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Frame1597884956() {
  return (
    <div className="h-[1056px] relative shrink-0 w-full">
      <Component01 />
      <Component02 />
      <Component03 />
      <Component04 />
    </div>
  );
}

export default function OurApproachSection() {
  return (
    <div
      className="box-border content-stretch flex flex-col gap-20 items-center justify-start p-0 relative size-full"
      data-name="Our approach section"
    >
      <Frame1597884955 />
      <Frame1597884956 />
    </div>
  );
}