File: /home/aliazzsr/html.vqode.com/travelcation-updated/tour-option-popup.html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Travelcation
</title>
<link
rel="shortcut icon"
href="assets/images/favicon.png"
type="image/x-icon"
/>
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/tailwind.css" />
<!-- ==== Poppins Font ==== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- ==== Volkhov Font ==== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- ==== WOW JS ==== -->
<script src="assets/js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body class="bg-primary-pink">
<div class="container">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-10 md:w-1/1 lg:w-1/1">
<div class="bg-white tour-modal mt-12 mb-10 mx-auto px-10 py-8 relative">
<a href="#"><img class="absolute right-0 top-0 mr-3 mt-5" src="assets/images/tour/modal-close.svg"></a>
<h1 class="text-secondry font-bold text-3xl mb-2">Magical Morning Balloon flights</h1>
<p class="text-secondry text-md font-normal">Please provide the hotel name or port name at the time of making a booking.</p>
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<h2 class="text-secondry font-bold text-lg mt-5">Pick Up Option</h2>
<div class="flex items-center">
<div class="mr-3">
<img src="assets/images/tour/modal-icon1.svg">
</div>
<div>
<h3 class="text-secondry font-semibold text-md">Pickup Available</h3>
<p class="text-light text-xs">We pickup all travelers</p>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<h2 class="text-secondry font-bold text-lg mt-5">Voucher Confirmation</h2>
<div class="flex items-center">
<div class="mr-3">
<img src="assets/images/tour/modal-icon2.svg">
</div>
<div>
<h3 class="text-secondry font-semibold text-md">Mobile Voucher</h3>
<p class="text-light text-xs">Use your phone or Print your Voucher</p>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<h2 class="text-secondry font-bold text-lg mt-5">Booking Confirmation</h2>
<div class="flex items-center">
<div class="mr-3">
<img src="assets/images/tour/modal-icon3.svg">
</div>
<div>
<h3 class="text-secondry font-semibold text-md">Instant Confirmation</h3>
<p class="text-light text-xs">Instant Tour Confirmation will be Provided</p>
</div>
</div>
</div>
</div>
<h2 class="text-secondry font-bold text-lg mt-8">Timings & Duration</h2>
<div class="bg-light px-5 rounded-xxl">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center">
<div class="mb-5">
<h3 class="text-secondry font-semibold text-md mb-2 mt-5">Transfer Type</h3>
<p class="text-light text-sm">Sharing Transfers</p>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center">
<div class="mb-5">
<h3 class="text-secondry font-semibold text-md mb-2 mt-5">Pickup Timings</h3>
<p class="text-light text-sm">Pick will be done from 04:00 am to 04:30 am</p>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center">
<div class="mb-5">
<h3 class="text-secondry font-semibold text-md mb-2 mt-5">Duration Approx</h3>
<p class="text-light text-sm">03 hours</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="text-secondry font-bold text-lg mt-5 mb-3">Cancellation Policy</h2>
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/tick.svg" class="mr-3">All Cancellations made 48 hours prior to the Tour departure time NO charges will be applicable</p>
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/tick.svg" class="mr-3">If Cancellation made within 48 hours to your Tour departure time 100% charges will be applicable</p>
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/tick.svg" class="mr-3">If eligible for Refund your Amount will be returned back to your Account within 7 working days.</p>
<h2 class="text-secondry font-bold text-lg mt-5 mb-3">What’s Included</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/tick.svg" class="mr-3">All taxes, fees and handling charges</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/tick.svg" class="mr-3">Hotel pickup and drop-off</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/tick.svg" class="mr-3">Air-conditioned transport</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/tick.svg" class="mr-3">Sharing transpiration</p>
</div>
</div>
<h2 class="text-secondry font-bold text-lg mt-5 mb-3">What’s Excluded</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/close.svg" class="mr-3">Breakfast</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-md text-secondry font-normal flex items-center mb-5"><img src="assets/images/tour/close.svg" class="mr-3">Private transport</p>
</div>
</div>
<h2 class="text-secondry font-bold text-lg mt-5 mb-3">Pricing</h2>
<div class="bg-white border shadow-xs px-5 rounded-xxl">
<div class="flex justify-between flex-wrap items-center">
<div class="mt-5 sm-border border-r mb-5 pr-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Adult</h3>
<span class="text-primary-pink font-normal text-xs mb-2 mt-5">AED</span>
<h4 class="text-secondry text-3xl font-semibold">799.00</h4>
</div>
<div class="mt-5 sm-border border-r mb-5 pr-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Child</h3>
<span class="text-primary-pink font-normal text-xs mb-2 mt-5">AED</span>
<h4 class="text-secondry text-3xl font-semibold">699.00</h4>
</div>
<div class="mt-5 sm-border border-r mb-5 pr-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Infant</h3>
<span class="text-primary-pink font-normal text-xs mb-2 mt-5">AED</span>
<h4 class="text-secondry text-3xl font-semibold">499.00</h4>
</div>
<div class="mt-5 sm-border border-r mb-5 pr-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Determination</h3>
<span class="text-primary-pink font-normal text-xs mb-2 mt-5">AED</span>
<h4 class="text-secondry text-3xl font-semibold">399.00</h4>
</div>
<div class="mt-5 mb-5 pr-5">
<h3 class="text-secondry font-semibold text-sm mb-2">Student</h3>
<span class="text-primary-pink font-normal text-xs mb-2 mt-5">AED</span>
<h4 class="text-secondry text-3xl font-semibold">299.00</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>