File: /home/aliazzsr/html.vqode.com/travelcation-updated/tour-detail.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-white">
<div class="bg-secondry relative px-4 py-3 text-white font-normal text-md text-center">Your important information goes here</div>
<!-- ====== Hero Section Start -->
<div
id="home"
class="relative pt-[120px] md:pt-[130px] lg:pt-[160px] h-100 tour-height"
>
<!-- ====== Navbar Section Start -->
<div
class="ud-header absolute left-0 top-0 z-40 flex w-full items-center bg-transparent"
>
<div class="container">
<div class="relative -mx-4 flex items-center justify-between">
<div class="max-w-full px-4">
<a href="index.html" class="navbar-logo block w-full py-5">
<img
src="assets/images/logo/logo.svg"
alt="logo"
class="header-logo w-full"
/>
</a>
</div>
<div class="flex w-full items-center justify-between px-4 relative z-40">
<div>
<button
id="navbarToggler"
class="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden"
>
<span
class="relative my-[6px] block h-[2px] w-[30px] bg-primary-pink"
></span>
<span
class="relative my-[6px] block h-[2px] w-[30px] bg-primary-pink"
></span>
<span
class="relative my-[6px] block h-[2px] w-[30px] bg-primary-pink"
></span>
</button>
<nav
id="navbarCollapse"
class="absolute right-4 z-40 top-full hidden w-full max-w-[250px] rounded-lg bg-transparent py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full nav-mobile-holder lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6"
>
<ul class="blcok lg:flex">
<li class="group relative px-4">
<a
href="index.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-grey-200 lg:group-hover:opacity-70"
>
Home
</a>
</li>
<li class="group relative px-4">
<a
href="events.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Events
</a>
</li>
<li class="group relative px-4">
<a
href="experiences.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Experiences
</a>
</li>
<li class="group relative px-4">
<a
href="combos.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Combos
</a>
</li>
<li class="group relative px-4">
<a
href="kids-corner.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70 "
>
Kids Corner
</a>
</li>
<li class="group relative px-4">
<a
href="blog.html"
class="text-sm flex color-black py-2 text-base font-normal text-white dark:text-white lg:mr-0 lg:inline-flex lg:px-0 lg:py-6 lg:text-gray-7 lg:group-hover:opacity-70"
>
Blogs
</a>
</li>
<li class="group relative px-4 py-2 buttons-show">
<a
href="#">
<button type="button" class="rounded-lg bg-primary-pink w-full px-5 py-2 text-base font-medium text-white mr-3 duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark">Sign In</button>
</a>
</li>
<li class="group relative px-4 py-2 buttons-show">
<a
href="#">
<button type="button" class="rounded-lg bg-pulp-orange w-full px-5 py-2 text-base font-medium text-white mr-3 duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark">Sign Up</button>
</a>
</li>
</ul>
</nav>
</div>
<div>
<a class="absolute right-0 top-0 sm-show " href="#"><img class="profile-icon" src="assets/images/inner/mobile-profile.svg"></a>
</div>
<div>
<a class="absolute right-0 top-0 sm-show" href="#"><img class="mobile-search" src="assets/images/home/nav-search.svg"></a>
</div>
<div class="flex items-center justify-end pr-16 lg:pr-0 sm-none">
<div class="flex items-center">
<form class="mr-3">
<div class="relative">
<input type="search" id="default-search" class="block nav-search p-4 py-3 ps-10 text-sm text-gray-900 rounded-lg shadow-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for" required />
<a class="absolute right-0 top-0 nav-search-icon" href="#"><img src="assets/images/home/nav-search.svg"></a>
</div>
</form>
<a
href="#"
class="signUpBtn mr-3 md-none rounded-lg bg-primary px-5 py-2 text-base font-medium text-white duration-300 ease-in-out hover:bg-opacity-100 hover:text-primary-pink"
>
Sign In
</a>
<a
href="#"
class="rounded-lg md-none bg-pulp-orange px-5 py-2 text-base font-medium text-white mr-3 duration-300 ease-in-out hover:bg-opacity-100 hover:text-dark"
>
Sign Up
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====== Navbar Section End -->
<img class="absolute top-0 h-100 w-full tour-banner" src="assets/images/tour/tour-detail-banner.png">
<div class="w-full absolute flex justify-between top50 px-5 sm-none z-40">
<a href="#"><img src="assets/images/home/banner-pre.svg"></a>
<a href="#"><img src="assets/images/home/banner-next.svg"></a>
</div>
</div>
<!-- ====== Hero Section End -->
<!-- ====== Tour Intro Section Start -->
<section
id="popular"
class="overflow-hidden dark:bg-dark-2 py-12 relative"
>
<div class="container mx-auto">
<div class="-mx-4 flex px-5 flex-wrap items-center relative">
<div class="w-full px-4 md:w-1/1 lg:w-8/12">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="px-4 py-2 relative z-10">
<div class="flex flex-wrap items-center ipad-mt">
<h2 class="text-secondry font-semibold text-4xl mr-3">Hot Air Balloon Dubai</h2>
<div class="tag-blue px-3 py-2 rounded-full w-max-content flex items-center">
<span class="text-white text-sm">Best Seller</span>
<img class="ml-2" src="assets/images/home/best-seller.svg">
</div>
</div>
<div class="flex flex-wrap items-center">
<div class="flex items-center mr-5">
<a href="#"><img class="mt-5 mr-3" src="assets/images/tour/star.svg"></a>
<span class="text-secondry text-sm mt-5">4.5/5.0</span>
</div>
<div class="flex items-center">
<a href="#"><img class="mt-5 mr-3" src="assets/images/tour/reviews.svg"></a>
<span class="text-light text-sm mt-5 text-underline">132 reviews</span>
</div>
</div>
<div class="flex sm-flex justify-between">
<div class="mt-8 border-r sm-border pr-15">
<div class="tour-icon">
<img class="mb-3" src="assets/images/tour/tour-icon1.svg">
</div>
<h6 class="text-secondry text-xs font-medium mb-2">Operating Hours</h6>
<p class="text-light text-xs mb-2 font-normal">
Ferrari World: 11:00 AM to 08:00 PM Daily
</p>
</div>
<div class="mt-8 border-r sm-border pr-15">
<div class="tour-icon">
<img class="mb-3" src="assets/images/tour/tour-icon2.svg">
</div>
<h6 class="text-secondry text-xs font-medium mb-2">Instant Confirmation</h6>
<p class="text-light text-xs mb-2 font-normal">
Instant confirmation will be provided
</p>
</div>
<div class="mt-8 border-r sm-border pr-15">
<div class="tour-icon">
<img class="mb-3" src="assets/images/tour/tour-icon3.svg">
</div>
<h6 class="text-secondry text-xs font-medium mb-2">Voucher Accepted</h6>
<p class="text-light text-xs mb-2 font-normal">
Use your phone or print your voucher
</p>
</div>
<div class="mt-8 border-r sm-border pr-15">
<div class="tour-icon">
<img class="mb-3" src="assets/images/tour/tour-icon4.svg">
</div>
<h6 class="text-secondry text-xs font-medium mb-2">Cancellation</h6>
<p class="text-light text-xs mb-2 font-normal">
Cancelation 48 hours Prior
</p>
</div>
<div class="mt-8 pr-15">
<div class="tour-icon">
<img class="mb-3" src="assets/images/tour/tour-icon5.svg">
</div>
<h6 class="text-secondry text-xs font-medium mb-2">Transfer Available</h6>
<p class="text-light text-xs mb-2 font-normal">
Transfer options will be provided
</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-4/12">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="bg-light-pink relative shadow-primary rounded-xl px-5 py-5">
<h3 class="text-secondry font-semibold text-2xl relative z-40">Hot Air Balloon Dhabi Per Person Price</h3>
<div class="flex justify-between items-center relative z-40">
<div class="mt-8">
<h6 class="text-light font-normal text-xs mb-2">Tour duration</h6>
<h4 class="text-secondry font-bold text-3xl">3 <span class="text-sm font-medium">hours</span></h4>
</div>
<div class="mt-8">
<h6 class="text-primary-pink font-normal text-xs mb-2">Starting from</h6>
<h4 class="text-primary-pink font-bold text-3xl"><span class="text-sm font-medium">AED</span> 799.00</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto relative z-40">
<div class="-mx-4 flex px-5 flex-wrap items-center relative">
<div class="w-full px-4 md:w-1/1 lg:w-1/1">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<h2 class="text-pulp-orange mt-8 font-semibold text-3xl">Hot Air Balloon Dubai Price & Offers</h2>
<div class="bg-white border rounded-xxl shadow-lg px-6 py-5 mt-5">
<h3 class="text-secondry font-semibold text-1xl">Ticket Type</h3>
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-2 md:w-1/1 lg:w-1/3">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="bg-light-pink shadow-xs flex justify-between items-center rounded-xxl px-4 py-3 border mt-5">
<div class="w-full mr-5">
<h4 class="text-secondry font-medium text-md mb-2">Adult:</h4>
<div class="relative">
<a href="#"><img class="absolute plus-icon" src="assets/images/tour/minus.svg"></a>
<input type="text" id="first_name" class="bg-white px-6 py-2 text-center text-primary text-md rounded-xl border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0" required="">
<a href="#"><img class="absolute plus-icon top-0 right-0" src="assets/images/tour/plus.svg"></a>
</div>
</div>
<div class="text-right">
<span class="text-light font-normal text-xs line-through">AED 1499.00</span>
<h6 class="text-primary-pink font-medium text-xs">Per Person AED </h6>
<h5 class="text-primary-pink font-semibold text-2xl">799.00</h5>
<h6 class="text-green font-normal text-xs">Save 500.00</h6>
</div>
</div>
</div>
</div>
<div class="w-full px-2 md:w-1/1 lg:w-1/3">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="bg-light-pink shadow-xs flex justify-between items-center rounded-xxl px-4 py-3 border mt-5">
<div class="w-full mr-5">
<h4 class="text-secondry font-medium text-md mb-2">Child:</h4>
<div class="relative">
<a href="#"><img class="absolute plus-icon" src="assets/images/tour/minus.svg"></a>
<input type="text" id="first_name" class="bg-white px-6 py-2 text-center text-primary text-md rounded-xl border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0" required="">
<a href="#"><img class="absolute plus-icon top-0 right-0" src="assets/images/tour/plus.svg"></a>
</div>
</div>
<div class="text-right">
<span class="text-light font-normal text-xs line-through">AED 899.00</span>
<h6 class="text-primary-pink font-medium text-xs">Per Person AED </h6>
<h5 class="text-primary-pink font-semibold text-2xl">499.00</h5>
<h6 class="text-green font-normal text-xs">Save 300.00</h6>
</div>
</div>
</div>
</div>
<div class="w-full px-2 md:w-1/1 lg:w-1/3">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="bg-light-pink shadow-xs flex justify-between items-center rounded-xxl px-4 py-3 border mt-5">
<div class="w-full mr-5">
<h4 class="text-secondry font-medium text-md mb-2">Infant:</h4>
<div class="relative">
<a href="#"><img class="absolute plus-icon" src="assets/images/tour/minus.svg"></a>
<input type="text" id="first_name" class="bg-white px-6 py-2 text-center text-primary text-md rounded-xl border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="0" required="">
<a href="#"><img class="absolute plus-icon top-0 right-0" src="assets/images/tour/plus.svg"></a>
</div>
</div>
<div class="text-right">
<span class="text-light font-normal text-xs line-through">AED 699.00</span>
<h6 class="text-primary-pink font-medium text-xs">Per Person AED </h6>
<h5 class="text-primary-pink font-semibold text-2xl">399.00</h5>
<h6 class="text-green font-normal text-xs">Save 200.00</h6>
</div>
</div>
</div>
</div>
<div class="w-full px-2 md:w-1/1 lg:w-4/12">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="w-full mt-5">
<div class="relative">
<input type="text" id="first_name" class="bg-white shadow-xs px-5 py-5 text-left text-secondry text-sm rounded-xl border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="DD/MM/YYYY" required="" value="DD/MM/YYYY">
<a href="#"><img class="absolute tour-calendar top-0 right-0" src="assets/images/tour/calendar.svg"></a>
</div>
</div>
</div>
</div>
<div class="w-full px-2 md:w-1/1 lg:w-8/12">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="w-full mt-5 bg-white flex justify-between border sm-flex shadow-xs rounded-xl">
<div class="bg-primary-pink w-full px-10 py-5 rounded-xl text-white font-medium text-md text-center">No Transfer</div>
<div class="bg-white px-10 w-full py-5 rounded-xl text-secondry font-medium text-md text-center">Sharing Transfer</div>
<div class="bg-white px-10 w-full py-5 rounded-xl text-secondry font-medium text-md text-center">Private Transfer</div>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/1 lg:w-12/12 air-none">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="relative overflow-x-auto mt-8">
<table class="w-full rounded-xxl text-md font-normal text-left text-secondry dark:text-gray-400">
<thead class="text-md bg-light-pink py-5 font-normal rounded-xxl text-gray-700 text-left dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-5 text-left font-normal">
Tour Option
</th>
<th scope="col" class="px-6 py-5 font-normal text-left">
Transfer Option
</th>
<th scope="col" class="px-6 py-5 font-normal text-left">
Time Slot
</th>
<th scope="col" class="px-6 py-5 font-normal text-left">
Total Amount
</th>
</tr>
</thead>
<tbody>
<tr class="odd:bg-white odd:dark:bg-gray-900 bg-primary-pink text even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 border-gray-200">
<th scope="row" class="px-6 py-5 font-semibold text-white whitespace-nowrap dark:text-white">
Magical Morning Balloon flights<br>(Without Breakfast)<br>
<a href="tour-option-popup.html"><button type="button" class="text-white text-sm font-medium text-underline">View More Detail</button></a>
</th>
<td class="px-6 py-5 text-white">
Without Transfer
</td>
<td class="px-6 py-5 text-white">
<div class="relative">
<input type="text" id="first_name" class="bg-white px-5 py-5 text-left text-secondry text-sm rounded-full border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="00.00" required="" value="">
<a href="#"><img class="absolute tour-calendar top-0 right-0" src="assets/images/tour/tour-clock.svg"></a>
</div>
</td>
<td class="px-6 py-5 text-white">
<span>AED</span><br>
<span class="text-2xl text-white font-semibold">799.00</span>
</td>
</tr>
<tr class="odd:bg-white odd:dark:bg-gray-900 text even:bg-gray-50 even:dark:bg-gray-800 dark:border-gray-700 border-gray-200">
<th scope="row" class="px-6 py-5 font-semibold text-secondry whitespace-nowrap dark:text-white">
Magical Morning Balloon flights<br>(With Breakfast)<br>
<a href="tour-option-popup.html"><button type="button" class="text-primary-pink text-sm font-medium text-underline">View More Detail</button></a>
</th>
<td class="px-6 py-5 text-secondry">
Sharing Transfer
</td>
<td class="px-6 py-5 text-secondry">
<div class="relative">
<input type="text" id="first_name" class="bg-white px-5 py-5 text-left text-secondry text-sm rounded-full border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="00.00" required="" value="">
<a href="#"><img class="absolute tour-calendar top-0 right-0" src="assets/images/tour/tour-clock.svg"></a>
</div>
</td>
<td class="px-6 py-5 text-secondry">
<span>AED</span><br>
<span class="text-2xl text-primary-pink font-semibold">00.00</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ====== Tour options mobile view Section Start -->
<div class="w-full md:w-1/1 lg:w-12/12 large-none">
<div class="bg-primary-pink rounded-xxl px-5 py-5 mt-8">
<div>
<span class="text-white text-sm font-medium">Tour Option</span>
<h6 class="text-lg text-white font-semibold">Magical Morning Balloon flights (Without Breakfast)</h6>
<button type="button" class="text-white text-sm font-medium text-underline">View More Detail</button>
</div>
<div class="mt-5">
<span class="text-white text-sm font-medium">Transfer Option</span>
<h6 class="text-lg text-white font-semibold">Without Transfer</h6>
</div>
<div class="mt-5">
<span class="text-white text-sm font-medium">Time Slot</span>
<div class="relative">
<input type="text" id="first_name" class="bg-white px-5 mt-5 py-5 text-left text-secondry text-sm rounded-full border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="00.00" required="" value="00.00">
<a href="#"><img class="absolute tour-calendar top-0 right-0" src="assets/images/tour/tour-clock.svg"></a>
</div>
</div>
<div class="mt-5">
<span class="text-white text-sm font-medium">Total Amount</span>
<h6 class="text-2xl text-white font-semibold"><span class="text-sm">AED</span>799.00</h6>
</div>
</div>
<div class="bg-white border rounded-xxl px-5 py-5 mt-8">
<div>
<span class="text-light text-sm font-medium">Tour Option</span>
<h6 class="text-lg text-secondry font-semibold">Magical Morning Balloon flights (Without Breakfast)</h6>
<button type="button" class="text-secondry text-sm font-medium text-underline">View More Detail</button>
</div>
<div class="mt-5">
<span class="text-light text-sm font-medium">Transfer Option</span>
<h6 class="text-lg text-secondry font-semibold">Without Transfer</h6>
</div>
<div class="mt-5">
<span class="text-light text-sm font-medium">Time Slot</span>
<div class="relative">
<input type="text" id="first_name" class="bg-white px-5 mt-5 py-5 text-left text-secondry text-sm rounded-full border focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="00.00" required="" value="00.00">
<a href="#"><img class="absolute tour-calendar top-0 right-0" src="assets/images/tour/tour-clock.svg"></a>
</div>
</div>
<div class="mt-5">
<span class="text-light text-sm font-medium">Total Amount</span>
<h6 class="text-2xl text-primary-pink font-semibold"><span class="text-sm">AED</span>00.00</h6>
</div>
</div>
</div>
<!-- ====== Tour options mobile view Section End -->
<!-- ====== Add Ons options Web view Section Start -->
<div class="w-full md:w-1/1 lg:w-12/12 sm-none">
<div class="wow fadeInUp group relative" data-wow-delay=".1s">
<h2 class="text-secondry mt-8 font-semibold text-3xl">Add Ons</h2>
<div class="-mx-4 px-5 flex flex-wrap relative">
<div class="w-full px-6 md:w-1/1 lg:w-1/3">
<div class="bg-white shadow-xs border rounded-xxl py-5 mt-8">
<div class="px-5">
<h3 class="text-light font-normal text-2xl mb-2 text-option">01</h3>
<h4 class="text-secondry font-semibold text-lg title-height">General Admission</h4>
<div class="flex justify-between items-center">
<div class="mt-5">
<span class="text-sm text-light font-normal line-through">AED40</span>
<h5 class="text-primary-pink font-bold text-3xl"><span class="text-sm">AED</span>30</h5>
</div>
<div class="mt-5 bg-primary-pink px-5 py-2 text-center rounded-xl">
<span class="text-xs text-white font-normal">Save up to</span>
<h6 class="text-2xl text-white font-semibold">10<span class="text-sm font-normal">%</span></h6>
</div>
</div>
</div>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">See old & new Dubai from 150m high</p>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">Entry to Dubai Frame</p>
<div class="bg-light w-full h-1"></div>
<div class="px-6 py-2">
<button type="button" class="bg-primary-pink shadow-price w-full px-6 py-5 text-white text-center rounded-full font-semibold">Select Add on</button>
</div>
</div>
</div>
<div class="w-full px-6 md:w-1/1 lg:w-1/3">
<div class="bg-white shadow-xs border rounded-xxl py-5 mt-8">
<div class="px-5">
<h3 class="text-light font-normal text-2xl mb-2 text-option">02</h3>
<h4 class="text-secondry font-semibold text-lg title-height">General Admission + Tour Guide </h4>
<div class="flex justify-between items-center">
<div class="mt-5">
<span class="text-sm text-light font-normal line-through">AED60</span>
<h5 class="text-primary-pink font-bold text-3xl"><span class="text-sm">AED</span>40</h5>
</div>
<div class="mt-5 bg-primary-pink px-5 py-2 text-center rounded-xl">
<span class="text-xs text-white font-normal">Save up to</span>
<h6 class="text-2xl text-white font-semibold">12<span class="text-sm font-normal">%</span></h6>
</div>
</div>
</div>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">See old & new Dubai from 150m high</p>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">Entry to Dubai Frame</p>
<div class="bg-light w-full h-1"></div>
<div class="px-6 py-2">
<button type="button" class="bg-primary-pink shadow-price w-full px-6 py-5 text-white text-center rounded-full font-semibold">Select Add on</button>
</div>
</div>
</div>
<div class="w-full px-6 md:w-1/1 lg:w-1/3">
<div class="bg-white shadow-xs border rounded-xxl py-5 mt-8">
<div class="px-5">
<h3 class="text-light font-normal text-2xl mb-2 text-option">03</h3>
<h4 class="text-secondry font-semibold text-lg title-height">Headout Exclusive General Admission + Meal Voucher</h4>
<div class="flex justify-between items-center">
<div class="mt-5">
<span class="text-sm text-light font-normal line-through">AED100</span>
<h5 class="text-primary-pink font-bold text-3xl"><span class="text-sm">AED</span>80</h5>
</div>
<div class="mt-5 bg-primary-pink px-5 py-2 text-center rounded-xl">
<span class="text-xs text-white font-normal">Save up to</span>
<h6 class="text-2xl text-white font-semibold">20<span class="text-sm font-normal">%</span></h6>
</div>
</div>
</div>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">See old & new Dubai from 150m high</p>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">Entry to Dubai Frame</p>
<div class="bg-light w-full h-1"></div>
<div class="px-6 py-2">
<button type="button" class="bg-primary-pink shadow-price w-full px-6 py-5 text-white text-center rounded-full font-semibold">Select Add on</button>
</div>
</div>
</div>
</div>
<div class="w-full left-0 right-0 absolute top50">
<a href="#"><img class="absolute left-0 top50 ml-35" src="assets/images/home/dark-left-arrow.svg"></a>
<a href="#"><img class="absolute right-0 top50 mr-35" src="assets/images/home/dark-right-arrow.svg"></a>
</div>
</div>
</div>
</div>
<!-- ====== Add Ons options Web view Section End -->
<!-- ====== Add Ons options Mobile view Section Start -->
<div class="w-full md:w-1/1 lg:w-12/12 web-none">
<div class="wow fadeInUp group relative" data-wow-delay=".1s">
<h2 class="text-secondry mt-8 font-semibold text-3xl">Add Ons</h2>
<div class="flex relative">
<div class="px-2">
<div class="bg-white add-ons-card shadow-xs border rounded-xxl py-5 mt-8">
<div class="px-5">
<h3 class="text-light font-normal text-2xl mb-2 text-option">01</h3>
<h4 class="text-secondry font-semibold text-lg title-height">General Admission</h4>
<div class="">
<div class="mt-5">
<span class="text-sm text-light font-normal line-through">AED40</span>
<h5 class="text-primary-pink font-bold text-3xl"><span class="text-sm">AED</span>30</h5>
</div>
<div class="mt-5 bg-primary-pink px-5 py-2 text-center rounded-xl">
<span class="text-xs text-white font-normal">Save up to</span>
<h6 class="text-2xl text-white font-semibold">10<span class="text-sm font-normal">%</span></h6>
</div>
</div>
</div>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">See old & new Dubai from 150m high</p>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">Entry to Dubai Frame</p>
<div class="bg-light w-full h-1"></div>
<div class="px-6 py-2">
<button type="button" class="bg-primary-pink shadow-price w-full px-6 py-5 text-white text-center rounded-full font-semibold">Select Add on</button>
</div>
</div>
</div>
<div class="px-2">
<div class="bg-white add-ons-card shadow-xs border rounded-xxl py-5 mt-8">
<div class="px-5">
<h3 class="text-light font-normal text-2xl mb-2 text-option">01</h3>
<h4 class="text-secondry font-semibold text-lg title-height">General Admission</h4>
<div class="">
<div class="mt-5">
<span class="text-sm text-light font-normal line-through">AED40</span>
<h5 class="text-primary-pink font-bold text-3xl"><span class="text-sm">AED</span>30</h5>
</div>
<div class="mt-5 bg-primary-pink px-5 py-2 text-center rounded-xl">
<span class="text-xs text-white font-normal">Save up to</span>
<h6 class="text-2xl text-white font-semibold">10<span class="text-sm font-normal">%</span></h6>
</div>
</div>
</div>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">See old & new Dubai from 150m high</p>
<div class="bg-light w-full h-1"></div>
<p class="px-6 text-sm text-secondry font-normal flex items-center"><img src="assets/images/tour/tick.svg" class="mr-3">Entry to Dubai Frame</p>
<div class="bg-light w-full h-1"></div>
<div class="px-6 py-2">
<button type="button" class="bg-primary-pink shadow-price w-full px-6 py-5 text-white text-center rounded-full font-semibold">Select Add on</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====== Add Ons options Mobile view Section End -->
<div class="w-full md:w-1/1 lg:w-12/12">
<div class="wow fadeInUp group relative" data-wow-delay=".1s">
<h2 class="text-secondry mt-12 font-semibold text-2xl mb-3">The Hot Air Balloon Dubai Overview</h2>
<p class="text-secondry font-normal text-md tour-description">Take a break from the city’s usual sights and mundane activities with this hot air balloon Dubai package. From the hotel transfers and all safety briefings to a one-hour hot air balloon ride, every element of this tour is immaculately taken care of to ensure you a hassle-free experience. Whether you want to celebrate special occasions or simply wish to try an exotic activity, it promises an unforgettable aerial adventure in Dubai.</p>
<p class="text-secondry font-normal text-md tour-description mb-3">You will arrive at the launch site before dawn and then head to the Majlis area to be welcomed with dates, gahwa, tea, and coffee. Watch a safety video and also listen to the instructions from our expert crew. After this, you will be taken to the launch site, where you can join the team for the...</p>
<button type="button" class="text-primary-pink font-semibold text-underline text-md">Show More</button>
<div class="bg-light w-full h-1 mt-tour"></div>
<h2 class="text-secondry font-semibold text-2xl">Product Category and theme</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/1 lg:w-1/2">
<h3 class="text-secondry font-semibold text-1xl mt-5">Air transport</h3>
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/tick.svg" class="mr-3">Hot air balloon</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<h3 class="text-secondry font-semibold text-1xl mt-5">Food & drink</h3>
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/tick.svg" class="mr-3">Tea</p>
</div>
</div>
<div class="bg-light w-full h-1 mt-tour"></div>
<h2 class="text-secondry font-semibold text-2xl">Accessibility</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/tick.svg" class="mr-3">Wheelchair accessible</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/tick.svg" class="mr-3">Infants must sit on laps</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/tick.svg" class="mr-3">Stroller accessible</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/tick.svg" class="mr-3">Infants seats available</p>
</div>
</div>
<div class="bg-light w-full h-1 mt-tour"></div>
<h2 class="text-secondry font-semibold text-2xl">Health Restrictions</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/close.svg" class="mr-3">Not recommended for travelers with back problem</p>
</div>
<div class="w-full md:w-1/1 lg:w-1/2">
<p class="text-sm text-secondry font-normal flex items-center mt-5"><img src="assets/images/tour/close.svg" class="mr-3">Not recommended for pregnant travelers</p>
</div>
</div>
<div class="bg-light w-full h-1 mt-tour"></div>
<h2 class="text-secondry font-semibold text-2xl">Physical Difficulty Level</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/1 lg:w-1/1">
<h4 class="text-lg text-secondry font-semibold flex items-center mt-5 mb-2"><img src="assets/images/tour/mode.svg" class="mr-3">Moderate</h4>
<p class="text-sm text-secondry font-normal px-8 flex items-center">Travelers should have a moderate physical fitness level</p>
</div>
</div>
<div class="bg-light w-full h-1 mt-tour"></div>
<h2 class="text-secondry font-semibold text-2xl mb-2">Pickup Locations & Meeting Points</h2>
<p class="text-sm text-secondry font-normal flex items-center">Exact location information is provided after a booking is confirmed.</p>
<img src="assets/images/tour/map.svg" class="w-full mt-8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<img class="absolute top-0" src="assets/images/tour/tour-art.svg">
<img class="absolute right-0 top-0" src="assets/images/tour/circle-shadow.svg">
</section>
<!-- ====== Tour Intro Section End -->
<!-- ====== Ratings & reviews Section Start -->
<section
id="themePark"
class="overflow-hidden dark:bg-dark-2 py-5 relative"
>
<div class="container mx-auto relative z-10">
<div class="-mx-4 flex px-5 flex-wrap items-center relative">
<div class="w-full px-4 md:w-1/1 lg:w-12/12">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="flex justify-between items-center flex-wrap">
<div class="mb-5">
<h2 class="text-secondry font-semibold text-2xl mb-2">Ratings & reviews</h2>
<div class="flex items-center mt-5">
<a href="#"><img class="mr-3" src="assets/images/tour/rating.svg"></a>
<h6 class="text-sm font-medium text-secondry">5.0 <span class="text-light">(22 bookings)</span></h6>
</div>
</div>
<button type="button" class="text-primary-pink review font-medium tet-md rounded-xl px-10 py-3">See all reviews</button>
</div>
<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 mt-8 mb-3">
<img class="mr-5" src="assets/images/tour/profile1.svg">
<div>
<h6 class="text-lg text-secondry font-semibold">Cameron</h6>
<p class="text-sm text-secondry font-normal">04/01/2025</p>
</div>
</div>
<div class="flex items-center">
<img class="mr-3" src="assets/images/tour/review-rating.svg">
<h6 class="text-sm text-primary-pink font-medium">5.0/5.0</h6>
</div>
<p class="text-sm text-secondry font-normal mt-5">Best crew we ever had! They literally took care of us to the 9’s. If you’re looking for a nice tour and a good guider and crew this is the service to book! So friendly and helpful with everything.</p>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center mt-8 mb-3">
<img class="mr-5" src="assets/images/tour/profile2.svg">
<div>
<h6 class="text-lg text-secondry font-semibold">Cameron</h6>
<p class="text-sm text-secondry font-normal">28/12/2024</p>
</div>
</div>
<div class="flex items-center">
<img class="mr-3" src="assets/images/tour/review-rating.svg">
<h6 class="text-sm text-primary-pink font-medium">5.0/5.0</h6>
</div>
<p class="text-sm text-secondry font-normal mt-5">Best crew we ever had! They literally took care of us to the 9’s. If you’re looking for a nice tour and a good guider and crew this is the service to book! So friendly and helpful with everything.</p>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center mt-8 mb-3">
<img class="mr-5" src="assets/images/tour/profile3.svg">
<div>
<h6 class="text-lg text-secondry font-semibold">Cameron</h6>
<p class="text-sm text-secondry font-normal">27/12/2024</p>
</div>
</div>
<div class="flex items-center">
<img class="mr-3" src="assets/images/tour/review-rating.svg">
<h6 class="text-sm text-primary-pink font-medium">5.0/5.0</h6>
</div>
<p class="text-sm text-secondry font-normal mt-5">Best crew we ever had! They literally took care of us to the 9’s. If you’re looking for a nice tour and a good guider and crew this is the service to book! So friendly and helpful with everything.</p>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center mt-8 mb-3">
<img class="mr-5" src="assets/images/tour/profile3.svg">
<div>
<h6 class="text-lg text-secondry font-semibold">Cameron</h6>
<p class="text-sm text-secondry font-normal">24/12/2024</p>
</div>
</div>
<div class="flex items-center">
<img class="mr-3" src="assets/images/tour/review-rating.svg">
<h6 class="text-sm text-primary-pink font-medium">5.0/5.0</h6>
</div>
<p class="text-sm text-secondry font-normal mt-5">Best crew we ever had! They literally took care of us to the 9’s. If you’re looking for a nice tour and a good guider and crew this is the service to book! So friendly and helpful with everything.</p>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center mt-8 mb-3">
<img class="mr-5" src="assets/images/tour/profile4.svg">
<div>
<h6 class="text-lg text-secondry font-semibold">Cameron</h6>
<p class="text-sm text-secondry font-normal">11/11/2024</p>
</div>
</div>
<div class="flex items-center">
<img class="mr-3" src="assets/images/tour/review-rating.svg">
<h6 class="text-sm text-primary-pink font-medium">5.0/5.0</h6>
</div>
<p class="text-sm text-secondry font-normal mt-5">Best crew we ever had! They literally took care of us to the 9’s. If you’re looking for a nice tour and a good guider and crew this is the service to book! So friendly and helpful with everything.</p>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/3">
<div class="flex items-center mt-8 mb-3">
<img class="mr-5" src="assets/images/tour/profile5.svg">
<div>
<h6 class="text-lg text-secondry font-semibold">Cameron</h6>
<p class="text-sm text-secondry font-normal">02/11/2024</p>
</div>
</div>
<div class="flex items-center">
<img class="mr-3" src="assets/images/tour/review-rating.svg">
<h6 class="text-sm text-primary-pink font-medium">5.0/5.0</h6>
</div>
<p class="text-sm text-secondry font-normal mt-5">Best crew we ever had! They literally took care of us to the 9’s. If you’re looking for a nice tour and a good guider and crew this is the service to book! So friendly and helpful with everything.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Ratings & reviews Section End -->
<!-- ====== Our Newsletter Section Start -->
<section
id="popular"
class="overflow-hidden dark:bg-dark-2 py-12"
>
<div class="container mx-auto">
<div class="-mx-4 flex px-5 flex-wrap items-center relative">
<div class="w-full px-4 md:w-1/1 lg:w-1/1">
<div class="wow fadeInUp group" data-wow-delay=".1s">
<div class="bg-light py-2 rounded-xl">
<div class="w-full px-6 py-5">
<div class="-mx-4 flex px-5 flex-wrap">
<div class="w-full px-4 md:w-1/1 lg:w-1/2">
<div class="mx-auto text-left">
<span class="mb-2 block text-sm font-semibold text-primary-pink uppercase">
Join
</span>
<h2 class="mb-3 text-3xl banner-sm volkhov font-bold leading-[1.2] text-secondry dark:text-white sm:text-4xl md:text-[40px] Nunito">
Our Newsletter
</h2>
<p class="text-sm font-normal text-secondry mb-5">Will send you weekly updates for your better tour packages.</p>
</div>
</div>
<div class="w-full px-4 md:w-1/1 lg:w-1/2 flex items-center">
<form class="w-full">
<div class="relative">
<input type="search" id="default-search" class="block w-full p-4 py-5 mb-5 ps-10 text-sm text-gray-900 rounded-xl shadow-md bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Your email address" required />
<button type="submit" class="text-white absolute subscribe right-0 top-0 end-2.5 bottom-2.5 bg-secondry hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-6 py-5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Our Newsletter Section End -->
<!-- ====== Footer Section Start -->
<footer
class="wow fadeInUp relative z-10 bg-primary pt-20 mt-8 lg:pt-[100px] smpt-0"
data-wow-delay=".15s"
>
<!-- ====== Web Section Start -->
<div class="container relative pt-20 z-40 sm-none">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-4/12 xl:w-4/12">
<div class="mb-10 w-full">
<a
href="javascript:void(0)"
class="mb-6 inline-block max-w-[160px]"
>
<img
src="assets/images/logo/logo.svg"
alt="logo"
class="max-w-full"
/>
</a>
<p class="mb-8 text-sm text-base text-secondry">
Travel helps companies manage payments easily. Travel helps companies manage payments easily. Travel helps companies manage payments easily.
</p>
<div class="flex items-center">
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon1.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon2.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon3.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon4.svg"></a>
</div>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-10 w-full">
<h4 class="mb-9 text-lg font-semibold text-secondry">Useful Links</h4>
<ul>
<li>
<a
href="index.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Home
</a>
</li>
<li>
<a
href="events.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Events
</a>
</li>
<li>
<a
href="experiences.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Experiences
</a>
</li>
<li>
<a
href="combos.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Combos
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-10 w-full">
<h4 class="mb-9 text-lg font-semibold text-secondry">Other</h4>
<ul>
<li>
<a
href="kids-corner.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Kids Corner
</a>
</li>
<li>
<a
href="blog.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Blogs
</a>
</li>
<li>
<a
href="contact-us.html"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/2 md:w-1/2 lg:w-2/12 xl:w-2/12">
<div class="mb-10 w-full">
<h4 class="mb-9 text-lg font-semibold text-secondry">Supplier</h4>
<ul>
<li>
<a
href="javascript:void(0)"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Sign In
</a>
</li>
<li>
<a
href="javascript:void(0)"
class="mb-3 inline-block text-base text-secondry hover:text-primary-pink"
>
Sign Up
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ====== Web Section End -->
<!-- ====== Mobile Section Start -->
<div class="container relative z-40 web-none">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 sm:w-1/1 md:w-1/2 lg:w-4/12 xl:w-4/12">
<div class="mb-4 w-full">
<a
href="javascript:void(0)"
class="mb-0 inline-block max-w-[160px]"
>
<img
src="assets/images/logo/logo.svg"
alt="logo"
class="max-w-full"
/>
</a>
<p class="mb-5 text-sm text-base text-secondry">
Travel helps companies manage payments easily. Travel helps companies manage payments easily. Travel helps companies manage payments easily.
</p>
<div class="flex items-center">
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon1.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon2.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon3.svg"></a>
<a class="mr-5" href="#"><img src="assets/images/home/footer-icon4.svg"></a>
</div>
</div>
</div>
</div>
<div class="-mx-4 flex">
<div class="w-full px-4 sm:w-1/3 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-2 w-full">
<h4 class="mb-2 text-sm font-semibold text-secondry">Useful Links</h4>
<ul>
<li>
<a
href="index.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Home
</a>
</li>
<li>
<a
href="events.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Events
</a>
</li>
<li>
<a
href="experiences.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Experiences
</a>
</li>
<li>
<a
href="combos.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Combos
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/3 md:w-1/2 lg:w-3/12 xl:w-3/12">
<div class="mb-2 w-full">
<h4 class="mb-2 text-sm font-semibold text-secondry">Other</h4>
<ul>
<li>
<a
href="kids-corner.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Kids Corner
</a>
</li>
<li>
<a
href="blog.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Blogs
</a>
</li>
<li>
<a
href="contact-us.html"
class="mb-1 text-xs inline-block text-base text-secondry hover:text-primary-pink"
>
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="w-full px-4 sm:w-1/3 md:w-1/2 lg:w-2/12 xl:w-2/12">
<div class="mb-2 w-full">
<h4 class="mb-2 text-sm font-semibold text-secondry">Supplier</h4>
<ul>
<li>
<a
href="javascript:void(0)"
class="mb-1 inline-block text-xs text-base text-secondry hover:text-primary-pink"
>
Sign In
</a>
</li>
<li>
<a
href="javascript:void(0)"
class="mb-1 inline-block text-xs text-base text-secondry hover:text-primary-pink"
>
Sign Up
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ====== Mobile Section End -->
<img class="absolute footer-art right-0 top-0 sm-none md-none" src="assets/images/home/footer-art.png">
<div
class="mt-5 border-t border-[#E5E5EA] border-opacity-40 py-8"
>
<div class="container">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4 md:w-1/2 lg:w-1/2">
<div class="my-1">
<p class="text-base text-secondry">
Copyright @ Travel Dubai 2025. All Rights Reserved.
</a>
</p>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/2">
<div class="flex justify-end sm-js-end">
<a class="mr-5" href="#"><span class="text-secondry tetx-sm font-normal text-underline">Terms & Conditions</span></a>
<a href="#"><span class="text-secondry tetx-sm font-normal text-underline">Privacy Policy</span></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- ====== Footer Section End -->
<!-- ====== Price Button Start -->
<a
href="#"
class="back-to-top fixed bottom-8 ml-2 right-8 z-[999] hidden items-center justify-center"
>
<button type="button" class="px-8 py-3 bg-primary-pink flex items-center justify-between rounded-full text-white text-lg font-medium">Total: AED 799.00 <img class="arrow-ml" src="assets/images/tour/amount-arrow.svg"></button>
</a>
<!-- ====== Price Button End -->
<!-- ====== All Scripts -->
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/main.js"></script>
<script>
// ==== for menu scroll
const pageLink = document.querySelectorAll(".ud-menu-scroll");
pageLink.forEach((elem) => {
elem.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(elem.getAttribute("href")).scrollIntoView({
behavior: "smooth",
offsetTop: 1 - 60,
});
});
});
// section menu active
function onScroll(event) {
const sections = document.querySelectorAll(".ud-menu-scroll");
const scrollPos =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
for (let i = 0; i < sections.length; i++) {
const currLink = sections[i];
const val = currLink.getAttribute("href");
const refElement = document.querySelector(val);
const scrollTopMinus = scrollPos + 73;
if (
refElement.offsetTop <= scrollTopMinus &&
refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
) {
document
.querySelector(".ud-menu-scroll")
.classList.remove("active");
currLink.classList.add("active");
} else {
currLink.classList.remove("active");
}
}
}
window.document.addEventListener("scroll", onScroll);
// Testimonial
const testimonialSwiper = new Swiper(".testimonial-carousel", {
slidesPerView: 1,
spaceBetween: 30,
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 30,
},
1024: {
slidesPerView: 3,
spaceBetween: 30,
},
1280: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
</script>
</body>
</html>