import svgPaths from "./svg-afhvgvqd7l";

function Frame121() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0">
      <div className="flex flex-col font-['Inter:Semi_Bold',_sans-serif] font-semibold h-[48px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[24px] tracking-[-0.48px] w-[179px]">
        <p className="leading-[28px]">Order Summary</p>
      </div>
      <div className="h-0 relative shrink-0 w-[476px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Frame73() {
  return (
    <div className="content-stretch flex font-['Inter:Medium',_sans-serif] font-medium items-center justify-between leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-full">
      <div className="flex flex-col justify-center relative shrink-0 text-nowrap">
        <p className="leading-[22px] whitespace-pre">Melbourne- Unlimited Card</p>
      </div>
      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[68px]">
        <p className="leading-[22px]">$49.80</p>
      </div>
    </div>
  );
}

function Frame1261155295() {
  return (
    <div className="content-stretch flex gap-[8px] items-center relative shrink-0">
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
        <p className="leading-[normal] whitespace-pre">2 Days</p>
      </div>
      <div className="relative shrink-0 size-[3px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
        </svg>
      </div>
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
        <p className="leading-[normal] whitespace-pre">Adults-3</p>
      </div>
      <div className="relative shrink-0 size-[3px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 3 3">
          <circle cx="1.5" cy="1.5" fill="var(--fill-0, #676767)" id="Ellipse 2637" r="1.5" />
        </svg>
      </div>
      <div className="font-['Poppins:Regular',_sans-serif] leading-[0] not-italic relative shrink-0 text-[#333333] text-[14px] text-nowrap">
        <p className="leading-[normal] whitespace-pre">Kids-3</p>
      </div>
    </div>
  );
}

function Frame74() {
  return (
    <div className="relative shrink-0 w-full">
      <div className="flex flex-row items-center relative size-full">
        <div className="box-border content-stretch flex items-center justify-between pl-px pr-[8px] py-0 relative w-full">
          <Frame1261155295 />
          <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[25px] justify-center leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[51px]">
            <p className="leading-[12px]">Qty: 1</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Frame75() {
  return (
    <div className="basis-0 content-stretch flex flex-col gap-[4px] grow items-start min-h-px min-w-px relative shrink-0">
      <Frame73 />
      <Frame74 />
    </div>
  );
}

function Frame76() {
  return (
    <div className="content-stretch flex gap-[16px] items-start relative shrink-0 w-full">
      <Frame75 />
    </div>
  );
}

function Frame83() {
  return (
    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0 w-[476px]">
      <Frame76 />
    </div>
  );
}

function Frame68() {
  return (
    <div className="bg-white box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-[192px] py-[14px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal justify-center leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] text-nowrap">
        <p className="leading-[18px] whitespace-pre">Gift or discount code</p>
      </div>
    </div>
  );
}

function Frame69() {
  return (
    <div className="bg-[#acacac] box-border content-stretch flex gap-[10px] items-center justify-center px-[23px] py-[13px] relative rounded-[4px] shrink-0">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[20px] justify-center leading-[0] not-italic relative shrink-0 text-[#f3f3f3] text-[16px] w-[46px]">
        <p className="leading-[12px]">Apply</p>
      </div>
    </div>
  );
}

function Frame70() {
  return (
    <div className="content-stretch flex gap-[16px] items-start relative shrink-0">
      <Frame68 />
      <Frame69 />
    </div>
  );
}

function Frame82() {
  return (
    <div className="content-stretch flex flex-col gap-[36px] items-start relative shrink-0">
      <div className="h-0 relative shrink-0 w-[476px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame70 />
    </div>
  );
}

function Frame71() {
  return (
    <div className="content-stretch flex font-['Inter:Medium',_sans-serif] font-medium gap-[346px] items-start leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[16px]">
      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[70px]">
        <p className="leading-[12px]">Subtotal</p>
      </div>
      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[60px]">
        <p className="leading-[12px]">$49.80</p>
      </div>
    </div>
  );
}

function Frame72() {
  return (
    <div className="content-stretch flex font-['Inter:Medium',_sans-serif] font-medium gap-[346px] items-start leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[16px]">
      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[70px]">
        <p className="leading-[12px]">Discount</p>
      </div>
      <div className="flex flex-col h-[25px] justify-center relative shrink-0 w-[60px]">
        <p className="leading-[12px]">-$7.20</p>
      </div>
    </div>
  );
}

function Frame77() {
  return (
    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0">
      <Frame71 />
      <Frame72 />
    </div>
  );
}

function Frame81() {
  return (
    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0">
      <div className="h-0 relative shrink-0 w-[476px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame77 />
    </div>
  );
}

function Frame78() {
  return (
    <div className="content-stretch flex flex-col gap-[4px] items-start relative shrink-0">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[22px] justify-center relative shrink-0 text-[#0a0d13] text-[16px] w-[38px]">
        <p className="leading-[12px]">Total</p>
      </div>
      <div className="flex flex-col font-['Inter:Regular',_sans-serif] font-normal h-[22px] justify-center relative shrink-0 text-[#acacac] text-[14px] w-[166px]">
        <p className="leading-[22px]">Including $2.24 in taxes</p>
      </div>
    </div>
  );
}

function Frame79() {
  return (
    <div className="content-stretch flex gap-[183px] items-start leading-[0] not-italic relative shrink-0">
      <Frame78 />
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[55px] justify-center relative shrink-0 text-[#0a0d13] text-[36px] w-[127px]">
        <p className="leading-[18px]">$42.60</p>
      </div>
    </div>
  );
}

function Frame80() {
  return (
    <div className="content-stretch flex flex-col gap-[24px] items-start relative shrink-0">
      <div className="h-0 relative shrink-0 w-[476px]">
        <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 476 1">
            <line id="Line 5" stroke="var(--stroke-0, #ACACAC)" x2="476" y1="0.5" y2="0.5" />
          </svg>
        </div>
      </div>
      <Frame79 />
    </div>
  );
}

function Frame84() {
  return (
    <div className="absolute box-border content-stretch flex flex-col gap-[36px] items-start left-[18px] p-[48px] top-[75px]">
      <Frame121 />
      <Frame83 />
      <Frame82 />
      <Frame81 />
      <Frame80 />
    </div>
  );
}

function OrderSummary() {
  return (
    <div className="absolute h-[1024px] left-[720px] top-0 w-[720px]" data-name="Order summary">
      <div className="absolute bg-[#f9fafa] h-[1024px] left-0 top-0 w-[720px]">
        <div aria-hidden="true" className="absolute border border-[#d9d9d9] border-solid inset-0 pointer-events-none" />
      </div>
      <Frame84 />
    </div>
  );
}

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-1/2 overflow-clip top-[2173px] translate-x-[-50%] 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 ImageSvgrepoCom() {
  return (
    <div className="absolute left-1/2 size-[60px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="image_svgrepo.com">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
        <g id="image_svgrepo.com">
          <path d={svgPaths.p1660e80} id="Vector" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
          <path d={svgPaths.p349a7f80} id="Vector_2" stroke="var(--stroke-0, white)" strokeLinejoin="round" strokeWidth="2.5" />
        </g>
      </svg>
    </div>
  );
}

function Img1() {
  return (
    <div className="absolute bg-[#d9d9d9] h-[252px] left-[1698px] rounded-[20px] top-[2084px] w-[362px]" data-name="img">
      <ImageSvgrepoCom />
    </div>
  );
}

function Button() {
  return (
    <div className="absolute contents left-[1948px] top-[2439px]" data-name="Button">
      <div className="absolute h-[37px] left-[1948px] rounded-[26px] top-[2439px] w-[100px]">
        <div aria-hidden="true" className="absolute border border-[#2d3134] border-solid inset-0 pointer-events-none rounded-[26px]" />
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1964px] not-italic text-[14px] text-nowrap top-[2451px]">
        <p className="leading-[14px] whitespace-pre">Book Now</p>
      </div>
    </div>
  );
}

function Card8() {
  return (
    <div className="absolute contents left-[1686px] top-[2072px]" data-name="Card 8">
      <div className="absolute bg-white h-[440px] left-[1686px] rounded-[16px] top-[2072px] w-[386px]">
        <div aria-hidden="true" className="absolute border-2 border-solid border-white inset-0 pointer-events-none rounded-[16px]" />
      </div>
      <Img1 />
      <Button />
      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[0px] text-nowrap top-[2447px]">
        <p className="leading-[20px] whitespace-pre">
          <span className="text-[24px]">$99</span>
          <span className="text-[#5b5f62] text-[24px]"> </span>
          <span className="font-['Inter:Regular',_sans-serif] font-normal not-italic text-[#5b5f62] text-[16px]">/Person</span>
        </p>
      </div>
      <div className="absolute font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] left-[1710px] not-italic text-[#2d3134] text-[24px] text-nowrap top-[2360px]">
        <p className="leading-[24px] whitespace-pre">Rome, Italy</p>
      </div>
      <div className="absolute font-['Inter:Regular',_sans-serif] font-normal leading-[0] left-[1710px] not-italic text-[#5b5f62] text-[14px] text-nowrap top-[2398px]">
        <p className="leading-[14px] whitespace-pre">Mountain Hiking Tour</p>
      </div>
    </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 Img2() {
  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 />
      <Img2 />
      <Frame48095472 />
    </div>
  );
}

function Frame6() {
  return (
    <div className="relative rounded-[4px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="relative size-full">
        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[16px] w-[460px]">
            <p className="leading-[22px]">Frank</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Frame67() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[356px] w-[527px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
        <p className="leading-[22px]">First Name</p>
      </div>
      <Frame6 />
    </div>
  );
}

function Frame7() {
  return (
    <div className="relative rounded-[4px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="relative size-full">
        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#2d3134] text-[16px] w-[460px]">
            <p className="leading-[22px]">Adam S</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Frame85() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[460px] w-[527px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
        <p className="leading-[22px]">Last Name</p>
      </div>
      <Frame7 />
    </div>
  );
}

function Frame8() {
  return (
    <div className="relative rounded-[4px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="relative size-full">
        <div className="box-border content-stretch flex gap-[10px] items-start leading-[0] not-italic pl-[16px] pr-[12px] py-[12px] relative text-[16px] w-full">
          <div className="basis-0 font-['Inter:Regular',_sans-serif] font-normal grow min-h-px min-w-px relative shrink-0 text-[#2d3134]">
            <p className="leading-[22px]">frank2023.mail.com</p>
          </div>
          <div className="font-['Inter:Semi_Bold',_sans-serif] font-semibold relative shrink-0 text-black text-nowrap">
            <p className="[text-decoration-skip-ink:none] [text-underline-position:from-font] decoration-solid leading-[22px] underline whitespace-pre">Verify</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Frame61() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[564px] w-[527px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
        <p className="leading-[22px]">Email Address</p>
      </div>
      <Frame8 />
    </div>
  );
}

function Frame9() {
  return (
    <div className="relative rounded-[4px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="relative size-full">
        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[460px]">
            <p className="leading-[22px]">Enter mobile number</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Frame62() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[668px] w-[527px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium h-[17px] justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] w-[129px]">
        <p className="leading-[22px]">Phone Number</p>
      </div>
      <Frame9 />
    </div>
  );
}

function Frame10() {
  return (
    <div className="relative rounded-[4px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="relative size-full">
        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[460px]">
            <p className="leading-[22px]">DD/MM/YYYY</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Frame63() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] top-[772px] w-[527px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre">Select Travel date</p>
      </div>
      <Frame10 />
    </div>
  );
}

function Frame12() {
  return (
    <div className="relative rounded-[4px] shrink-0 w-full">
      <div aria-hidden="true" className="absolute border-[#acacac] border-[1.5px] border-solid inset-[-1.5px] pointer-events-none rounded-[5.5px]" />
      <div className="relative size-full">
        <div className="box-border content-stretch flex gap-[10px] items-start pl-[16px] pr-0 py-[12px] relative w-full">
          <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[16px] w-[460px]">
            <p className="leading-[22px]">Enter Address</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function Frame64() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[16px] items-start left-[135px] opacity-60 top-[963px] w-[527px]">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre">Search Address</p>
      </div>
      <Frame12 />
    </div>
  );
}

function Content() {
  return (
    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[24px] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
        <p className="mb-[16px]">Address</p>
        <p>&nbsp;</p>
      </div>
    </div>
  );
}

function Input() {
  return (
    <div className="relative rounded-[8px] shrink-0 w-full" data-name="Input">
      <div className="flex flex-row items-center overflow-clip relative size-full">
        <div className="box-border content-stretch flex gap-[8px] items-center px-[16px] py-[11px] relative w-full">
          <Content />
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
    </div>
  );
}

function InputWithLabel() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre">Billing address 1</p>
      </div>
      <Input />
    </div>
  );
}

function InputFieldBase() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
      <InputWithLabel />
    </div>
  );
}

function Input1() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="Input">
      <InputFieldBase />
    </div>
  );
}

function Content1() {
  return (
    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
        <p className="leading-[24px]">Enter City</p>
      </div>
    </div>
  );
}

function Input2() {
  return (
    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
      <div className="flex flex-row items-center overflow-clip relative size-full">
        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
          <Content1 />
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
    </div>
  );
}

function InputWithLabel1() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre">City</p>
      </div>
      <Input2 />
    </div>
  );
}

function InputFieldBase1() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
      <InputWithLabel1 />
    </div>
  );
}

function Input3() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
      <InputFieldBase1 />
    </div>
  );
}

function ChevronDown3() {
  return (
    <div className="relative shrink-0 size-[20px]" data-name="chevron-down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
        <g id="chevron-down">
          <path d="M5 7.5L10 12.5L15 7.5" id="Icon" stroke="var(--stroke-0, #353535)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
        </g>
      </svg>
    </div>
  );
}

function Content2() {
  return (
    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
        <p className="leading-[24px]">England</p>
      </div>
      <ChevronDown3 />
    </div>
  );
}

function Input4() {
  return (
    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
      <div className="flex flex-row items-center overflow-clip relative size-full">
        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
          <Content2 />
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
    </div>
  );
}

function InputWithLabel2() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre">Country</p>
      </div>
      <Input4 />
    </div>
  );
}

function InputFieldBase2() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
      <InputWithLabel2 />
    </div>
  );
}

function Input5() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
      <InputFieldBase2 />
    </div>
  );
}

function Frame() {
  return (
    <div className="content-stretch flex gap-[16px] items-start relative shrink-0" data-name="Frame">
      <Input3 />
      <Input5 />
    </div>
  );
}

function ChevronDown5() {
  return (
    <div className="relative shrink-0 size-[20px]" data-name="chevron-down">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
        <g id="chevron-down">
          <path d="M5 7.5L10 12.5L15 7.5" id="Icon" stroke="var(--stroke-0, #353535)" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
        </g>
      </svg>
    </div>
  );
}

function Content3() {
  return (
    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
        <p className="leading-[24px]">State</p>
      </div>
      <ChevronDown5 />
    </div>
  );
}

function Input6() {
  return (
    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
      <div className="flex flex-row items-center overflow-clip relative size-full">
        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
          <Content3 />
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
    </div>
  );
}

function InputWithLabel3() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre">State</p>
      </div>
      <Input6 />
    </div>
  );
}

function InputFieldBase3() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
      <InputWithLabel3 />
    </div>
  );
}

function Input7() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
      <InputFieldBase3 />
    </div>
  );
}

function Content4() {
  return (
    <div className="basis-0 content-stretch flex gap-[8px] grow items-center min-h-px min-w-px relative shrink-0" data-name="Content">
      <div className="basis-0 font-['Hind:Regular',_sans-serif] grow leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#989692] text-[16px]">
        <p className="leading-[24px]">000000</p>
      </div>
    </div>
  );
}

function Input8() {
  return (
    <div className="h-[46px] relative rounded-[8px] shrink-0 w-full" data-name="Input">
      <div className="flex flex-row items-center overflow-clip relative size-full">
        <div className="box-border content-stretch flex gap-[8px] h-[46px] items-center px-[16px] py-[11px] relative w-full">
          <Content4 />
        </div>
      </div>
      <div aria-hidden="true" className="absolute border border-[#cacaca] border-solid inset-0 pointer-events-none rounded-[8px]" />
    </div>
  );
}

function InputWithLabel4() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Input with label">
      <div className="flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] not-italic relative shrink-0 text-[#0a0d13] text-[18px] text-nowrap">
        <p className="leading-[22px] whitespace-pre" dir="auto">
          Zip code
        </p>
      </div>
      <Input8 />
    </div>
  );
}

function InputFieldBase4() {
  return (
    <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="_Input field base">
      <InputWithLabel4 />
    </div>
  );
}

function Input9() {
  return (
    <div className="content-stretch flex flex-col items-start relative shrink-0 w-[269px]" data-name="Input">
      <InputFieldBase4 />
    </div>
  );
}

function Frame1() {
  return (
    <div className="content-stretch flex gap-[16px] items-start relative shrink-0" data-name="Frame">
      <Input7 />
      <Input9 />
    </div>
  );
}

function Content5() {
  return (
    <div className="content-stretch flex flex-col gap-[16px] items-start relative shrink-0" data-name="Content">
      <Input1 />
      <Frame />
      <Frame1 />
    </div>
  );
}

function Content6() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[32px] items-start left-[135px] opacity-60 top-[1133px]" data-name="Content">
      <Content5 />
    </div>
  );
}

function Pay() {
  return (
    <div className="bg-black box-border content-stretch flex gap-[8px] h-[60px] items-center justify-center opacity-[0.55] pl-[8px] pr-[12px] py-[12px] relative rounded-[38px] shrink-0 w-[476px]" 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">Pay $42.60</p>
      </div>
    </div>
  );
}

function Frame66() {
  return (
    <div className="absolute content-stretch flex flex-col gap-[23px] items-start left-[135px] top-[1513px]">
      <Pay />
      <div className="font-['Inter:Regular',_sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#acacac] text-[14px] w-[475px]">
        <p className="leading-[22px]">Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy.</p>
      </div>
    </div>
  );
}

function Group1000001952() {
  return (
    <div className="absolute contents left-[135px] top-[305px]">
      <Frame67 />
      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] left-[135px] not-italic text-[#0a0d13] text-[18px] text-nowrap top-[316px] translate-y-[-50%]">
        <ol className="list-decimal" start="1">
          <li className="ms-[27px]">
            <span className="leading-[22px]">Personal Information</span>
          </li>
        </ol>
      </div>
      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] left-[135px] not-italic opacity-60 text-[#0a0d13] text-[18px] text-nowrap top-[927px] translate-y-[-50%]">
        <ol className="list-decimal" start="2">
          <li className="ms-[27px]">
            <span className="leading-[22px]">Billing</span>
          </li>
        </ol>
      </div>
      <Frame85 />
      <Frame61 />
      <Frame62 />
      <Frame63 />
      <Frame64 />
      <div className="absolute flex flex-col font-['Inter:Medium',_sans-serif] font-medium justify-center leading-[0] left-[135px] not-italic opacity-60 text-[#0a0d13] text-[18px] text-nowrap top-[1093px] translate-y-[-50%]">
        <p className="leading-[22px] whitespace-pre">Or Enter manually</p>
      </div>
      <Content6 />
      <Frame66 />
    </div>
  );
}

function NestedTabHeadings() {
  return (
    <div className="relative shrink-0" data-name="nested tab headings">
      <div className="box-border content-stretch flex gap-[8px] items-center justify-center overflow-clip px-[28px] py-[16px] relative">
        <div className="capitalize flex flex-col font-['Montserrat:SemiBold',_sans-serif] font-semibold justify-center leading-[0] relative shrink-0 text-[14px] text-black text-nowrap">
          <p className="leading-[20px] whitespace-pre">For myself</p>
        </div>
      </div>
      <div aria-hidden="true" className="absolute border-[0px_0px_2px] border-black border-solid inset-0 pointer-events-none" />
    </div>
  );
}

function NestedTabHeadings1() {
  return (
    <div className="box-border content-stretch flex gap-[8px] items-center justify-center overflow-clip px-[28px] py-[16px] relative shrink-0" data-name="nested tab headings">
      <div className="capitalize flex flex-col font-['Montserrat:Medium',_sans-serif] font-medium justify-center leading-[0] relative shrink-0 text-[14px] text-black text-nowrap">
        <p className="leading-[20px] whitespace-pre">To gift Someone</p>
      </div>
    </div>
  );
}

function Frame1261155302() {
  return (
    <div className="absolute content-stretch flex gap-[8px] items-center left-[134px] top-[228px]">
      <NestedTabHeadings />
      <NestedTabHeadings1 />
    </div>
  );
}

export default function TravelLandingPage() {
  return (
    <div className="bg-[#f8f8f8] relative size-full" data-name="Travel Landing Page">
      <OrderSummary />
      <Footer />
      <div className="absolute capitalize font-['Inter:Semi_Bold',_sans-serif] font-semibold leading-[0] not-italic text-[#2d3134] text-[56px] text-nowrap top-[132px]" style={{ left: "calc(50% - 585px)" }}>
        <p className="leading-[66px] whitespace-pre">Checkout</p>
      </div>
      <Card8 />
      <Navigation />
      <Group1000001952 />
      <Frame1261155302 />
    </div>
  );
}