const OurStory = () => {
  return (
    <div className="flex 2xl:pr-[285px] xl:pr-[128px] xl:flex-row flex-col xl:px-6 px-4 2xl:pb-[140px] xl:pb-[120px] sm:pb-[100px] pb-20">
      <div className="xl:h-full uppercase text-[#73787C] font-semibold 2xl:w-[261px] xl:w-[208px] pb-3">
        Our story
      </div>
      <div className="flex flex-col items-center w-full">
        <div className="flex flex-col max-w-[1030px]">
          <img
            className="rounded-2xl"
            src="./images/company/1.jpg"
            alt="Company"
            width={1030}
            height={720}
          />
          <div className="flex gap-4 pt-6 2xl:pb-14 pb-10 xl:flex-row flex-col text-[#73787C]">
            <p className="text-[#00BED7] font-semibold text-2xl">
              IRTH is prominently positioned among the top tier establishments
              in United Arab Emirates, a family backed investment company with
              core values of trust, strength and agility.
            </p>
            <div className="flex xl:flex-col gap-4 xl:min-w-[375px] xl:max-w-[375px] text-sm sm:flex-row flex-col">
              <p className="sm:w-1/2 xl:w-full">
                IRTH embodies the essence of legacy, anchoring its roots in the
                heart of a vibrant Dubai. As a part of a distinguished local
                family conglomerate, our privately held real estate investment
                platform draws strength from a heritage spanning over a century.
              </p>
              <p className="sm:w-1/2 xl:w-full">
                At IRTH, our foundation is built upon three CORE values: Trust,
                Strength, and Agility. These principles serve as our guiding
                light, propelling us forward as a prominent player in the realm
                of real estate investment. We proudly stand among the elite
                establishments within the UAE, a testament to our unwavering
                commitment to excellence.
              </p>
            </div>
          </div>
          <div className="flex flex-col gap-6">
            <div className="flex gap-4">
              <img
                src="./images/company/2.jpg"
                alt="2"
                className="rounded-2xl 2xl:w-[246px] 2xl:h-[302px] 2xl:max-w-[246px] 2xl:max-h-[302px] xl:min-w-[195px] xl:min-h-[240px] xl:max-w-[195px] xl:max-h-[240px] sm:w-[175px] sm:object-cover overflow-clip"
                style={{ overflowClipMargin: "unset" }}
              />
              <img
                src="./images/company/3.png"
                alt="2"
                className="rounded-2xl object-cover 2xl:h-[436px] 2xl:w-[768px] xl:w-full xl:h-[436px] h-full  sm:min-w-[200px] sm:min-h-[235px] sm:block hidden"
              />
            </div>
            <div className="flex gap-4 text-[#73787C] text-sm sm:flex-row flex-col">
              <div className="2xl:min-w-[246px] xl:min-w-[195px] xl:block hidden"></div>
              <p className="2xl:w-1/2 xl:min-w-[397px] xl:max-w-[397px]">
                Our influence extends even further through strategic
                partnerships with esteemed local and international hospitality
                brands, elevating our stature and enriching our portfolio. With
                an unwavering dedication to investment, IRTH paves the way for a
                diverse range of property ventures. Our footprint is set to
                expand both within the dynamic landscapes of Dubai and across
                international horizons. As we forge ahead, our legacy remains
                intertwined with the enduring values of trust, strength, and
                agility.
              </p>
              <p className="2xl:w-1/2 xl:w-full ">
                The Alshamsi Family , the visionary founders behind IRTH, have
                sown the seeds of a legacy that continues to flourish. Our story
                is one of resilience, growth, and an unyielding pursuit of
                excellence.
              </p>
            </div>
            <div className="sm:hidden block">
              <img
                src="./images/company/3.png"
                alt="2"
                className="rounded-2xl object-cover h-[260px]"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OurStory;
