import svgPaths from "./svg-tirbryj54p";
import imgVt from "figma:asset/2a32b13e0ed94d79c4867062010cb1a848d72dc1.png";
import imgVt1 from "figma:asset/f6c7124d0a9ca2463b53b6a370a48c4c0bbba57d.png";
import imgVt2 from "figma:asset/ef6f48b2b60d04fc8723d03a71f9dca2b6067704.png";
import imgVt3 from "figma:asset/a384e2e7712b48e54fadc7594244c40162ad4152.png";
import imgVt4 from "figma:asset/dda914a03c57961a1affac724d29681004341456.png";
import imgVt5 from "figma:asset/129015504c88093e4b54dc6e8c91b3997d9ccc5b.png";
import imgVt6 from "figma:asset/1512fbc49cf628796adeccca6752a29d1e61ecf4.png";
import imgVt7 from "figma:asset/4af0d5b295cf8650b4caa23233d3dcf539032a73.png";
import imgVt8 from "figma:asset/1d756a3ad6ee9098afb373e07e18ddd36571954c.png";
import imgVt9 from "figma:asset/d37e3e3f9d3f32fcf86dddd187aa6fd48832406a.png";
import imgVt10 from "figma:asset/3c5d5a12a7b44ab1b1ac2db7faa54270de100d86.png";
import imgSpotlightPoi3Png from "figma:asset/a3956d2491d1e44ca71fc856b229d3e22523f828.png";
import imgButtonTransparentPng from "figma:asset/a812c79b0d125e4946b33446eae0353f518627e2.png";
import imgM1Png from "figma:asset/eaf15191e9a315d2d4b384ffcb22910687c3d328.png";

function Menu() {
  return (
    <div className="absolute contents leading-[0] left-[551px] not-italic text-nowrap top-[84px]" data-name="Menu">
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[551px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Resources</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[551px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">{`Download `}</p>
        <p className="mb-0">Help Center</p>
        <p>&nbsp;</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[756px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">Why Travellers</p>
        <p className="mb-0">Customer Stories</p>
        <p>Instagram post</p>
      </div>
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[756px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Travellers</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[984px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">Terms and Conditions</p>
        <p className="mb-0">Privacy Policy</p>
        <p className="mb-0">FAQs</p>
        <p>Information</p>
      </div>
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[984px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Company</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[34px] left-[1186px] text-[#676a6c] text-[14px] top-[124px] whitespace-pre">
        <p className="mb-0">App Store</p>
        <p>Google Play Store</p>
      </div>
      <div className="absolute font-['Inter:Medium',_sans-serif] font-medium left-[1186px] text-[#2d3134] text-[18px] top-[84px]">
        <p className="leading-[18px] text-nowrap whitespace-pre">Get App</p>
      </div>
    </div>
  );
}

function ICon() {
  return (
    <div className="absolute left-[135px] size-[32px] top-[226px]" data-name="ICon">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ICon">
          <circle cx="16" cy="16" id="Ellipse 2612" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
          <path d={svgPaths.pe943800} fill="var(--fill-0, #5B5F62)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function ICon1() {
  return (
    <div className="absolute left-[227px] size-[32px] top-[226px]" data-name="ICon">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ICon">
          <circle cx="16" cy="16" id="Ellipse 2614" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
          <path d={svgPaths.p3754fa00} fill="var(--fill-0, #5B5F62)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function ICon2() {
  return (
    <div className="absolute left-[181px] size-[32px] top-[226px]" data-name="ICon">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ICon">
          <circle cx="16" cy="16" id="Ellipse 2613" r="15.5" stroke="var(--stroke-0, #5B5F62)" />
          <path clipRule="evenodd" d={svgPaths.p2eab3c00} fill="var(--fill-0, #5B5F62)" fillRule="evenodd" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function SocailIcon() {
  return (
    <div className="absolute contents left-[135px] top-[226px]" data-name="Socail Icon">
      <ICon />
      <ICon1 />
      <ICon2 />
    </div>
  );
}

function Img() {
  return (
    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[79.01px] w-[98px]" data-name="img">
      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
        <p className="leading-[20px] whitespace-pre">Logo</p>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <div className="absolute h-[339px] left-0 overflow-clip top-[3421px] w-[1440px]" data-name="Footer">
      <Menu />
      <SocailIcon />
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[135px] not-italic text-[#5b5f62] text-[16px] top-[134px] w-[141px]">
        <p className="leading-[26px]">Enjoy the touring with Salty</p>
      </div>
      <Img />
    </div>
  );
}

function Frame1261155253() {
  return (
    <div className="absolute content-stretch flex font-['Poppins:Regular',_sans-serif] gap-[37px] items-center leading-[0] left-[305px] not-italic text-[#2d3134] text-[16px] text-nowrap top-[43px] tracking-[0.16px]">
      <div className="relative shrink-0">
        <p className="leading-[16px] text-nowrap whitespace-pre">About Us</p>
      </div>
      <div className="relative shrink-0">
        <p className="leading-[16px] text-nowrap whitespace-pre">Our Products</p>
      </div>
      <div className="relative shrink-0">
        <p className="leading-[16px] text-nowrap whitespace-pre">Your Card</p>
      </div>
    </div>
  );
}

function Frame1261155252() {
  return (
    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[1131px] px-[24px] py-[16px] rounded-[24px] top-[27px]">
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[16px] text-nowrap text-white tracking-[0.16px]">
        <p className="leading-[16px] whitespace-pre">Get a City Card</p>
      </div>
    </div>
  );
}

function Img1() {
  return (
    <div className="absolute bg-[#434343] h-[35px] left-[135px] overflow-clip top-[34px] w-[98px]" data-name="img">
      <div className="absolute font-['Sen:Bold',_sans-serif] font-bold leading-[0] text-[15px] text-nowrap text-white" style={{ top: "calc(50% - 10.5px)", left: "calc(50% - 18px)" }}>
        <p className="leading-[20px] whitespace-pre">Logo</p>
      </div>
    </div>
  );
}

function LanguageSvgrepoCom() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="language_svgrepo.com">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="language_svgrepo.com">
          <path d={svgPaths.p317063f1} fill="var(--fill-0, #2D3134)" id="Vector" />
        </g>
      </svg>
    </div>
  );
}

function CartLargeMinimalisticSvgrepoCom() {
  return (
    <div className="relative shrink-0 size-[24px]" data-name="cart-large-minimalistic_svgrepo.com">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 24 24">
        <g id="cart-large-minimalistic_svgrepo.com">
          <path d={svgPaths.p1873f780} id="Vector" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
          <path d={svgPaths.p1358f400} id="Vector_2" stroke="var(--stroke-0, #2D3134)" strokeWidth="1.5" />
          <path d={svgPaths.p2ddd6280} id="Vector_3" stroke="var(--stroke-0, #2D3134)" strokeLinecap="round" strokeWidth="1.5" />
        </g>
      </svg>
    </div>
  );
}

function Frame48095472() {
  return (
    <div className="absolute content-stretch flex gap-[16px] items-center left-[1030px] top-[39px]">
      <LanguageSvgrepoCom />
      <CartLargeMinimalisticSvgrepoCom />
    </div>
  );
}

function Navigation() {
  return (
    <div className="absolute backdrop-blur-[10px] backdrop-filter bg-[rgba(255,255,255,0.3)] h-[102px] left-0 overflow-clip top-0 w-[1440px]" data-name="Navigation">
      <Frame1261155253 />
      <Frame1261155252 />
      <Img1 />
      <Frame48095472 />
    </div>
  );
}

function Button() {
  return (
    <div className="absolute bg-[rgba(91,95,98,0.12)] h-[40px] left-[15px] rounded-[200px] top-[10px] w-[96.61px]" data-name="Button">
      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[18px] justify-center leading-[0] not-italic text-[13.672px] text-black text-center top-[20px] translate-x-[-50%] translate-y-[-50%] w-[64.81px]" style={{ left: "calc(50% + 0.1px)" }}>
        <p className="leading-[28px]">Bestseller</p>
      </div>
    </div>
  );
}

function Button1() {
  return (
    <div className="absolute bg-neutral-100 h-[40px] left-[120px] rounded-[200px] top-[10px] w-[145px]" data-name="Button">
      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[18px] justify-center leading-[0] not-italic text-[13.781px] text-black text-center top-[20px] translate-x-[-50%] translate-y-[-50%] w-[113.25px]" style={{ left: "calc(50% + 0.125px)" }}>
        <p className="leading-[28px]">Free cancellation</p>
      </div>
    </div>
  );
}

function Button2() {
  return (
    <div className="absolute bg-neutral-100 h-[40px] left-[275px] rounded-[200px] top-[10px] w-[159px]" data-name="Button">
      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic text-[13.781px] text-black text-center text-nowrap top-[20px] translate-x-[-50%] translate-y-[-50%]" style={{ left: "calc(50% - 1px)" }}>
        <p className="leading-[28px] whitespace-pre">Reservation Required</p>
      </div>
    </div>
  );
}

function DivColAuto() {
  return (
    <div className="absolute bottom-[3509px] h-[204px] left-[135px] w-[788px]" data-name="div.col-auto">
      <Button />
      <Button1 />
      <Button2 />
      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold h-[108px] justify-center leading-[56px] left-[15px] not-italic text-[#2d3134] text-[39.688px] top-[126px] translate-y-[-50%] w-[758.37px]">
        <p className="mb-0">Phi Phi Islands Adventure Day Trip with</p>
        <p>Seaview Lunch by V. Marine Tour</p>
      </div>
    </div>
  );
}

function Image() {
  return <div className="absolute bg-[#c4c4c4] bottom-0 left-0 right-[452px] top-0" data-name="image" />;
}

function Image1() {
  return <div className="absolute bg-[#c4c4c4] bottom-[260px] left-[733px] right-[-10px] top-0" data-name="image" />;
}

function Image2() {
  return <div className="absolute bg-[#c4c4c4] bottom-0 left-[733px] right-[187px] top-[260px]" data-name="image" />;
}

function Image3() {
  return <div className="absolute bg-[#c4c4c4] bottom-0 left-[993px] right-[-77px] top-[260px]" data-name="image" />;
}

function DivTourSingleGrid() {
  return (
    <div className="absolute h-[510px] left-[135px] overflow-clip right-[135px] top-[373px]" data-name="div.tourSingleGrid">
      <Image />
      <Image1 />
      <Image2 />
      <Image3 />
    </div>
  );
}

function DivFlexCenter() {
  return (
    <div className="absolute bg-[#c8c8c8] left-[15px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
        <p className="leading-[20px]"></p>
      </div>
    </div>
  );
}

function Group1() {
  return (
    <div className="absolute contents left-[15px] top-[15.38px]">
      <DivFlexCenter />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[75px] not-italic text-[#2d3134] text-[14.766px] top-[29.17px] translate-y-[-50%] w-[59.61px]">
        <p className="leading-[24px]">Duration</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[75px] not-italic text-[#717171] text-[13.453px] top-[52.17px] translate-y-[-50%] w-[42.79px]">
        <p className="leading-[22.4px]">3 days</p>
      </div>
    </div>
  );
}

function DivFlexCenter1() {
  return (
    <div className="absolute bg-[#c8c8c8] left-[235px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
        <p className="leading-[20px]"></p>
      </div>
    </div>
  );
}

function Group2() {
  return (
    <div className="absolute contents left-[235px] top-[15.38px]">
      <DivFlexCenter1 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[295px] not-italic text-[#2d3134] text-[14.531px] top-[29.17px] translate-y-[-50%] w-[75.4px]">
        <p className="leading-[24px]">Group Size</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[295px] not-italic text-[#717171] text-[13.672px] top-[52.17px] translate-y-[-50%] w-[62.73px]">
        <p className="leading-[22.4px]">10 people</p>
      </div>
    </div>
  );
}

function DivFlexCenter2() {
  return (
    <div className="absolute bg-[#c8c8c8] left-[455px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
        <p className="leading-[20px]"></p>
      </div>
    </div>
  );
}

function Group3() {
  return (
    <div className="absolute contents left-[455px] top-[15.38px]">
      <DivFlexCenter2 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[515px] not-italic text-[#2d3134] text-[14.297px] top-[29.17px] translate-y-[-50%] w-[34.29px]">
        <p className="leading-[24px]">Ages</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[515px] not-italic text-[#717171] text-[13.672px] top-[52.17px] translate-y-[-50%] w-[61.97px]">
        <p className="leading-[22.4px]">18-99 yrs</p>
      </div>
    </div>
  );
}

function DivFlexCenter3() {
  return (
    <div className="absolute bg-[#c8c8c8] left-[675px] rounded-[12px] size-[50px] translate-y-[-50%]" data-name="div.flex-center" style={{ top: "calc(50% - 1657.12px)" }}>
      <div aria-hidden="true" className="absolute border border-[#e7e6e6] border-solid inset-0 pointer-events-none rounded-[12px]" />
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[20px] top-[25px] translate-y-[-50%] w-[20.2px]">
        <p className="leading-[20px]"></p>
      </div>
    </div>
  );
}

function Group4() {
  return (
    <div className="absolute contents left-[675px] top-[15.38px]">
      <DivFlexCenter3 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[24px] justify-center leading-[0] left-[735px] not-italic text-[#2d3134] text-[14.297px] top-[29.17px] translate-y-[-50%] w-[74.12px]">
        <p className="leading-[24px]">Languages</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[18px] justify-center leading-[0] left-[735px] not-italic text-[#717171] text-[13.344px] top-[52.17px] translate-y-[-50%] w-[113.78px]">
        <p className="leading-[22.4px]">English, Japanese</p>
      </div>
    </div>
  );
}

function IIconCheck() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2671.5px] left-[15px] rounded-[24px] top-[699.5px] w-[24px]" data-name="i.icon-check">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function IIconCheck1() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2600.25px] left-[15px] rounded-[24px] top-[770.75px] w-[24px]" data-name="i.icon-check">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function IIconCheck2() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2557.12px] left-[15px] rounded-[24px] top-[813.88px] w-[24px]" data-name="i.icon-check">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function IIconCheck3() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2485.87px] left-[15px] rounded-[24px] top-[885.13px] w-[24px]" data-name="i.icon-check">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function IIconCheck4() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2442.75px] left-[15px] rounded-[24px] top-[928.25px] w-[24px]" data-name="i.icon-check">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function IIconCheck5() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2399.62px] left-[15px] rounded-[24px] top-[971.38px] w-[24px]" data-name="i.icon-check">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[#63b06f] text-[10px] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function ChevronDown() {
  return (
    <div className="relative size-[16px]" data-name="Chevron down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
        <g id="Chevron down">
          <path d="M4 6L8 10L12 6" id="Icon" stroke="var(--stroke-0, #1E1E1E)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6" />
        </g>
      </svg>
    </div>
  );
}

function Frame1261155309() {
  return (
    <div className="content-stretch flex gap-[6px] items-center relative shrink-0 w-full">
      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[14.648px] text-nowrap">
        <ul className="css-ed5n1g">
          <li className="leading-[28.13px] list-disc ms-[21.972px]">
            <span>{`Via `}</span>
            <span className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid underline">CityCards Portal</span>
          </li>
        </ul>
      </div>
      <div className="flex items-center justify-center relative shrink-0">
        <div className="flex-none scale-y-[-100%]">
          <ChevronDown />
        </div>
      </div>
    </div>
  );
}

function Frame1261155308() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[6px] items-start left-[16px] top-[1161px] w-[349px]">
      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[14.648px] w-full">
        <ul className="css-ed5n1g">
          <li className="leading-[28.13px] list-disc ms-[21.972px]">
            <span>{`By Calling on `}</span>
            <span className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid underline">022 2645675</span>
          </li>
        </ul>
      </div>
      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[14.648px] w-full">
        <ul className="css-ed5n1g">
          <li className="leading-[28.13px] list-disc ms-[21.972px]">
            <span>{`Email your details at `}</span>
            <span className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid underline">islands.booking@mail.com</span>
          </li>
        </ul>
      </div>
      <Frame1261155309 />
    </div>
  );
}

function IIconCross() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2671.5px] left-[505px] rounded-[24px] top-[699.5px] w-[24px]" data-name="i.icon-cross">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[10px] text-[red] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function IIconCross1() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2628.37px] left-[505px] rounded-[24px] top-[742.63px] w-[24px]" data-name="i.icon-cross">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[10px] text-[red] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function IIconCross2() {
  return (
    <div className="absolute bg-[#dbdbdb] bottom-[2585.25px] left-[505px] rounded-[24px] top-[785.75px] w-[24px]" data-name="i.icon-cross">
      <div className="absolute flex flex-col font-['Inter:Regular',_'Noto_Sans:Regular',_sans-serif] font-normal h-[10px] justify-center leading-[0] left-[7px] not-italic text-[10px] text-[red] top-[12px] translate-y-[-50%] w-[10.2px]">
        <p className="leading-[10px]"></p>
      </div>
    </div>
  );
}

function DivRoadmapContent() {
  return <div className="absolute h-[84.38px] left-[53px] top-[1360.5px] w-[580px]" data-name="div.roadmap__content" />;
}

function Vt() {
  return (
    <div className="absolute left-[495px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt} />
      </div>
    </div>
  );
}

function Vt1() {
  return (
    <div className="absolute left-[239px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt1} />
      </div>
    </div>
  );
}

function Vt2() {
  return (
    <div className="absolute left-[495px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt2} />
      </div>
    </div>
  );
}

function Vt3() {
  return (
    <div className="absolute left-[239px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt3} />
      </div>
    </div>
  );
}

function Vt4() {
  return (
    <div className="absolute left-[751px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt4} />
      </div>
    </div>
  );
}

function Vt5() {
  return (
    <div className="absolute left-[751px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt5} />
      </div>
    </div>
  );
}

function Vt6() {
  return (
    <div className="absolute left-[495px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt6} />
      </div>
    </div>
  );
}

function Vt7() {
  return (
    <div className="absolute left-[751px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt7} />
      </div>
    </div>
  );
}

function Vt8() {
  return (
    <div className="absolute left-[239px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt8} />
      </div>
    </div>
  );
}

function Vt9() {
  return (
    <div className="absolute left-[-17px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 59px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt9} />
      </div>
    </div>
  );
}

function Vt10() {
  return (
    <div className="absolute left-[-17px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% + 197px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt4} />
      </div>
    </div>
  );
}

function Vt11() {
  return (
    <div className="absolute left-[-17px] size-[256px] translate-y-[-50%]" data-name="vt" style={{ top: "calc(50% - 315px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgVt10} />
      </div>
    </div>
  );
}

function SpotlightPoi3Png() {
  return (
    <div className="absolute h-[37px] left-[160px] top-[149px] w-[26px]" data-name="spotlight-poi3.png">
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgSpotlightPoi3Png} />
      </div>
    </div>
  );
}

function SpotlightPoi3Png1() {
  return (
    <div className="absolute h-[37px] left-[426px] top-[213px] w-[26px]" data-name="spotlight-poi3.png">
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgSpotlightPoi3Png} />
      </div>
    </div>
  );
}

function ButtonTransparentPng() {
  return (
    <div className="absolute h-[37px] left-[160px] translate-y-[-50%] w-[26px]" data-name="Button → transparent.png" style={{ top: "calc(50% - 107.5px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgButtonTransparentPng} />
      </div>
    </div>
  );
}

function ButtonTransparentPng1() {
  return (
    <div className="absolute h-[37px] left-[426px] translate-y-[-50%] w-[26px]" data-name="Button → transparent.png" style={{ top: "calc(50% - 43.5px)" }}>
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgButtonTransparentPng} />
      </div>
    </div>
  );
}

function M1Png() {
  return (
    <div className="absolute h-[52px] left-[649.72px] top-[65.29px] w-[53px]" data-name="m1.png">
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgM1Png} />
      </div>
    </div>
  );
}

function M1Png1() {
  return (
    <div className="absolute h-[52px] left-[557.73px] top-[51.79px] w-[53px]" data-name="m1.png">
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <img alt="" className="absolute left-0 max-w-none size-full top-0" src={imgM1Png} />
      </div>
    </div>
  );
}

function Div() {
  return (
    <div className="absolute bg-[#e5e3df] inset-0" data-name="div">
      <Vt />
      <Vt1 />
      <Vt2 />
      <Vt3 />
      <Vt4 />
      <Vt5 />
      <Vt6 />
      <Vt7 />
      <Vt8 />
      <Vt9 />
      <Vt10 />
      <Vt11 />
      <SpotlightPoi3Png />
      <SpotlightPoi3Png1 />
      <ButtonTransparentPng />
      <ButtonTransparentPng1 />
      <M1Png />
      <div className="absolute flex flex-col font-['Arial:Bold',_sans-serif] h-[53px] justify-center leading-[0] not-italic text-[11px] text-black text-center top-[91.79px] translate-x-[-50%] translate-y-[-50%] w-[6.458px]" style={{ left: "calc(50% + 251.389px)" }}>
        <p className="leading-[53px]">2</p>
      </div>
      <M1Png1 />
      <div className="absolute flex flex-col font-['Arial:Bold',_sans-serif] h-[53px] justify-center leading-[0] not-italic text-[11px] text-black text-center top-[78.29px] translate-x-[-50%] translate-y-[-50%] w-[6.458px]" style={{ left: "calc(50% + 159.399px)" }}>
        <p className="leading-[53px]">2</p>
      </div>
    </div>
  );
}

function Div1() {
  return (
    <div className="absolute inset-[1879.88px_15px_965.12px_15px] overflow-clip" data-name="div">
      <Div />
    </div>
  );
}

function Calendar() {
  return (
    <div className="absolute contents left-[15px] top-[1279px]" data-name="Calendar">
      <div className="absolute bg-white h-[367px] left-[15px] rounded-[9px] top-[1279px] w-[393px]" />
      <div className="absolute font-['Poppins:Bold',_sans-serif] leading-[0] left-[49px] not-italic text-[20px] text-black text-nowrap top-[1307px] tracking-[0.38px]">
        <p className="leading-[24px] whitespace-pre">Jan 2024</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[72.21px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[16px] whitespace-pre">Mon</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[165.07px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[16px] whitespace-pre">Wed</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[118.64px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[16px] whitespace-pre">Tue</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[211.5px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[16px] whitespace-pre">Thu</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[257.93px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[16px] whitespace-pre">Fri</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[304.36px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[16px] whitespace-pre">Sat</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] justify-center leading-[0] left-[351.29px] not-italic text-[12px] text-[rgba(60,60,67,0.6)] text-center text-nowrap top-[1362px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[16px] whitespace-pre">Sun</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">28</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">29</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">30</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-[grey] text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">31</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">1</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">2</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1412.43px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">3</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">4</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">5</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">6</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">7</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">8</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">9</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1450.71px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">10</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">11</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">12</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">13</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">14</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">15</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">16</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1489px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">17</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">18</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">19</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">20</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">21</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">22</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[#7f7f7f] text-[16px] text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">23</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1527.29px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">24</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">25</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">26</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">27</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">28</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">29</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">30</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-black text-center top-[1565.57px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">31</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[72.21px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">1</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[118.64px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">2</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[165.07px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">3</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[211.5px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">4</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[257.93px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">5</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[304.36px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">6</p>
      </div>
      <div className="absolute flex flex-col font-['Poppins:Regular',_sans-serif] h-[38.286px] justify-center leading-[0] left-[350.79px] not-italic text-[16px] text-[grey] text-center top-[1603.86px] tracking-[-0.32px] translate-x-[-50%] translate-y-[-50%] w-[46.429px]">
        <p className="leading-[21px]">7</p>
      </div>
    </div>
  );
}

function Pay() {
  return (
    <div className="absolute bg-black box-border content-stretch flex gap-[8px] items-center justify-center left-[15px] pl-[8px] pr-[12px] py-[14px] rounded-[38px] top-[1665px] w-[199px]" data-name="Pay">
      <div className="font-['Inter:Bold',_sans-serif] font-bold leading-[0] not-italic relative shrink-0 text-[#f3f3f3] text-[16px] text-nowrap">
        <p className="leading-[12px] whitespace-pre">Confirm Booking</p>
      </div>
    </div>
  );
}

function Section() {
  return (
    <div className="absolute inset-[942px_408px_-474px_152px]" data-name="Section">
      <Group1 />
      <Group2 />
      <Group3 />
      <Group4 />
      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold h-[45px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[29.18px] top-[147.88px] translate-y-[-50%] w-[208.9px]">
        <p className="leading-[45px]">Tour Overview</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[104.37px] justify-center leading-[28.13px] left-[15px] not-italic text-[#2d3134] text-[14.414px] top-[246.56px] translate-y-[-50%] w-[844.72px]">
        <p className="mb-0">The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day.</p>
        <p className="mb-0">Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and</p>
        <p className="mb-0">{`Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup`}</p>
        <p>and drop-off all included.</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[30px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[19.219px] top-[337.88px] translate-y-[-50%] w-[139.59px]">
        <p className="leading-[30px]">Tour Highlights</p>
      </div>
      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1310.91px)" }} />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.648px] top-[386.94px] translate-y-[-50%] w-[459.31px]">
        <p className="leading-[28.13px]">Experience the thrill of a speedboat to the stunning Phi Phi Islands</p>
      </div>
      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1282.78px)" }} />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.648px] top-[415.06px] translate-y-[-50%] w-[402.47px]">
        <p className="leading-[28.13px]">Be amazed by the variety of marine life in the archepelago</p>
      </div>
      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1254.66px)" }} />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.531px] top-[443.19px] translate-y-[-50%] w-[536.48px]">
        <p className="leading-[28.13px]">Enjoy relaxing in paradise with white sand beaches and azure turquoise water</p>
      </div>
      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1226.53px)" }} />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.648px] top-[471.31px] translate-y-[-50%] w-[353.56px]">
        <p className="leading-[28.13px]">Feel the comfort of a tour limited to 35 passengers</p>
      </div>
      <div className="absolute bg-black left-[23px] rounded-[3px] size-[3px] translate-y-[-50%]" data-name="List → Item" style={{ top: "calc(50% - 1198.41px)" }} />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[28.13px] justify-center leading-[0] left-[36px] not-italic text-[#2d3134] text-[14.531px] top-[499.44px] translate-y-[-50%] w-[411.9px]">
        <p className="leading-[28.13px]">Catch a glimpse of the wild monkeys around Monkey Beach</p>
      </div>
      <div className="absolute bg-[#e7e6e6] h-px left-[15px] right-[15px] top-[573.5px]" data-name="div.line" />
      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold h-[45px] justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[30px] top-[657px] translate-y-[-50%] w-[237.42px]">
        <p className="leading-[45px]">{`What's included`}</p>
      </div>
      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[30px] text-nowrap top-[1123.5px] translate-y-[-50%]">
        <p className="leading-[45px] whitespace-pre">How to make a booking?</p>
      </div>
      <IIconCheck />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[48.13px] justify-center leading-[28.13px] left-[54px] not-italic text-[#2d3134] text-[14.414px] top-[727.57px] translate-y-[-50%] w-[296px]">
        <p className="mb-0">Beverages, drinking water, morning tea and</p>
        <p>buffet lunch</p>
      </div>
      <IIconCheck1 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.531px] top-[784.75px] translate-y-[-50%] w-[77.98px]">
        <p className="leading-[28.13px]">Local taxes</p>
      </div>
      <IIconCheck2 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[48.12px] justify-center leading-[28.13px] left-[54px] not-italic text-[#2d3134] text-[14.883px] top-[841.94px] translate-y-[-50%] w-[316.51px]">
        <p className="mb-0">Hotel pickup and drop-off by air-conditioned</p>
        <p>minivan</p>
      </div>
      <IIconCheck3 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.648px] top-[899.13px] translate-y-[-50%] w-[238.11px]">
        <p className="leading-[28.13px]">InsuranceTransfer to a private pier</p>
      </div>
      <IIconCheck4 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.531px] top-[942.25px] translate-y-[-50%] w-[74.59px]">
        <p className="leading-[28.13px]">Soft drinks</p>
      </div>
      <IIconCheck5 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[54px] not-italic text-[#2d3134] text-[14.648px] top-[985.38px] translate-y-[-50%] w-[75.79px]">
        <p className="leading-[28.13px]">Tour Guide</p>
      </div>
      <Frame1261155308 />
      <IIconCross />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[544px] not-italic text-[#2d3134] text-[14.063px] top-[713.5px] translate-y-[-50%] w-[38.9px]">
        <p className="leading-[28.13px]">Towel</p>
      </div>
      <IIconCross1 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[544px] not-italic text-[#2d3134] text-[14.414px] top-[756.63px] translate-y-[-50%] w-[29.14px]">
        <p className="leading-[28.13px]">Tips</p>
      </div>
      <IIconCross2 />
      <div className="absolute flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[20px] justify-center leading-[0] left-[544px] not-italic text-[#2d3134] text-[14.531px] top-[799.75px] translate-y-[-50%] w-[139.17px]">
        <p className="leading-[28.13px]">Alcoholic Beverages</p>
      </div>
      <div className="absolute bg-[#e7e6e6] h-px left-[15px] right-[15px] top-[1059.5px]" data-name="div.line" />
      <div className="absolute flex flex-col font-['Inter:Bold',_sans-serif] font-bold justify-center leading-[0] left-[15px] not-italic text-[#2d3134] text-[29.414px] text-nowrap top-[1827.38px] translate-y-[-50%]">
        <p className="leading-[45px] whitespace-pre">Location on map</p>
      </div>
      <DivRoadmapContent />
      <Div1 />
      <div className="absolute bg-[#e7e6e6] h-px left-[15px] right-[15px] top-[2489.88px]" data-name="div.line" />
      <Calendar />
      <Pay />
    </div>
  );
}

export default function TravelLandingPage() {
  return (
    <div className="bg-[#f8f8f8] relative size-full" data-name="Travel Landing Page">
      <Footer />
      <Navigation />
      <DivColAuto />
      <DivTourSingleGrid />
      <Section />
    </div>
  );
}