<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Truelysell</title>

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.svg">

    <!-- Aos -->
	<link rel="stylesheet" href="assets/css/animate.css">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">

	<!-- Tabler Icon CSS -->
	<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.css">

	<!-- Datepicker CSS -->
	<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css">

	<!-- select CSS -->
	<link rel="stylesheet" href="assets/plugins/select2/css/select2.min.css">

	<!-- Fontawesome Icon CSS -->
	<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
	<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
	<link rel="stylesheet" href="assets/css/feather.css">

	<!-- Style CSS -->
	<link rel="stylesheet" href="assets/css/style.css">

</head>
<body>

	<!-- Header -->
	<header class="header header-one">
		<div class="container">
			<nav class="navbar navbar-expand-lg header-nav">
				<div class="navbar-header">
					<a id="mobile_btn" href="javascript:void(0);">
						<span class="bar-icon">
							<span></span>
							<span></span>
							<span></span>
						</span>
					</a>
					<a href="index.html" class="navbar-brand logo">
						<img src="assets/img/logo.svg" class="img-fluid" alt="Logo">
					</a>
					<a href="index.html" class="navbar-brand logo-small">
						<img src="assets/img/logo-small.svg" class="img-fluid" alt="Logo">
					</a>
				</div>
				<div class="main-menu-wrapper">
					<div class="menu-header">
						<a href="index.html" class="menu-logo">
							<img src="assets/img/logo.svg" class="img-fluid" alt="Logo">
						</a>
						<a id="menu_close" class="menu-close" href="javascript:void(0);"> <i class="fas fa-times"></i></a>
					</div>
					<ul class="main-nav">
						<li class="has-submenu megamenu ">
							<a href="javascript:void(0);">Home <i class="fas fa-chevron-down"></i></a>
							<ul class="submenu mega-submenu">
								<li>
									<div class="megamenu-wrapper">
										<div class="row">
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index.html"><img src="assets/img/home-01.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index.html">Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo ">
													<div class="demo-img">
														<a href="index-2.html"><img src="assets/img/home-02.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-2.html">Electrical Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-3.html"><img src="assets/img/home-3.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-3.html">Cleaning Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-4.html"><img src="assets/img/home-04.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-4.html">Saloon Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-5.html"><img src="assets/img/home-05.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-5.html">Catering Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-6.html"><img src="assets/img/home-06.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-6.html">Car Wash Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-7.html"><img src="assets/img/home-09.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-7.html">House Problem Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-8.html"><img src="assets/img/home-08.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-8.html">Pet Grooming Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-9.html"><img src="assets/img/home-10.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-9.html">Mechanic Home</a>
													</div>
												</div>
											</div>
											<div class="col-lg-2">
												<div class="single-demo">
													<div class="demo-img">
														<a href="index-10.html"><img src="assets/img/home-07.jpg" class="img-fluid" alt="img"></a>
													</div>
													<div class="demo-info">
														<a href="index-10.html">Cleaning Home</a>
													</div>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</li>
						<li class="has-submenu active">
							<a href="javascript:void(0);">Services <i class="fas fa-chevron-down"></i></a>
							<ul class="submenu">
								<li><a href="services-grid.html">Service Grid</a></li>
							<li><a href="services-list.html">Service List</a></li>
								<li class="has-submenu">
									<a href="javascript:void(0);">Service Details</a>
									<ul class="submenu">
										<li><a href="service-details.html">Service Details 1</a></li>
										<li><a href="service-details2.html">Service Details 2</a></li>
									</ul>
								</li>
								<li class="active"><a href="service-request.html">Service Request</a></li>
								<li><a href="search.html">Search</a></li>
								<li class="has-submenu">
									<a href="javascript:void(0);">Providers</a>
									<ul class="submenu">
										<li><a href="providers.html">Providers List</a></li>
										<li><a href="provider-details.html">Providers Details</a></li>
									</ul>
								</li>
								<li class="has-submenu">
								<a href="javascript:void(0);">Categories</a>
								<ul class="submenu">
									<li><a href="categories.html">Categories 1</a></li>
									<li><a href="categories-2.html">Categories 2</a></li>
								</ul>
							</li>
							<li><a href="create-service.html">Create Service</a></li>
							</ul>
						</li>
						<li class="has-submenu">
							<a href="javascript:void(0);">Customers <i class="fas fa-chevron-down"></i></a>
							<ul class="submenu">
								<li><a href="user-dashboard.html">Dashboard</a></li>
								<li><a href="user-booking-list.html">Booking</a></li>
								<li><a href="favourites.html">Favorites</a></li>
								<li><a href="customer-wallet.html">Wallet</a></li>
								<li><a href="customer-reviews.html">Reviews</a></li>
								<li><a href="user-chat.html">Chat</a></li>
								<li><a href="account-settings.html">Settings</a></li>
							</ul>
						</li>
						<li class="has-submenu">
							<a href="javascript:void(0);">Providers <i class="fas fa-chevron-down"></i></a>
							<ul class="submenu">
								<li><a href="provider-dashboard.html">Dashboard</a></li>
								<li><a href="provider-services.html">My Services</a></li>
								<li><a href="provider-booking.html">Booking</a></li>
								<li><a href="provider-payout.html">Payout</a></li>
								<li class="has-submenu">
									<a href="javascript:void(0);">Settings</a>
									<ul class="submenu">
										<li><a href="provider-appointment-settings.html">Appointment
												Settings</a></li>
										<li><a href="provider-accounts-settings.html">Account Settings</a></li>
										<li><a href="provider-social-profile.html">Social Profiles</a></li>
										<li><a href="provider-security-settings.html">Security</a></li>
										<li><a href="provider-plan.html">Plan & Billings</a></li>
										<li><a href="provider-notifcations.html">Notifications</a></li>
										<li><a href="provider-connected-apps.html">Connected Apps</a></li>
									</ul>
								</li>
								<li><a href="provider-holiday.html">Holidays & Leave</a></li>
								<li><a href="provider-coupons.html">Coupons</a></li>
								<li><a href="provider-offers.html">Offers</a></li>
								<li><a href="provider-reviews.html">Reviews</a></li>
								<li><a href="provider-earnings.html">Earnings</a></li>
								<li><a href="provider-chat.html">Chat</a></li>
							</ul>
						</li>
						<li class="nav-item has-submenu">
							<a class="nav-link" href="javascript:void(0);">Pages<i class="fas fa-chevron-down"></i></a>
							<ul class="submenu">
								<li><a href="about-us.html">About</a></li>
								<li class="has-submenu">
									<a href="blog-grid.html">Blog</a>
									<ul class="submenu">
										<li><a href="blog-grid.html">Blog Grid</a></li>
										<li><a href="blogs.html">Blog List</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li><a href="contact-us.html">Contact Us</a></li>
								<li><a href="how-it-works.html">How It Works</a></li>
								<li class="has-submenu">
									<a href="javascript:void(0);">Error Page</a>
									<ul class="submenu">
										<li><a href="error-404.html">404 Error</a></li>
										<li><a href="error-500.html">500 Error</a></li>
									</ul>
								</li>
								<li class="has-submenu">
									<a href="javascript:void(0);">Authentication</a>
									<ul class="submenu">
										<li><a href="login.html">Login</a></li>
										<li><a href="register.html">Customer Signup</a></li>
										<li><a href="provider-register.html">Provider Signup</a></li>
										<li><a href="reset-password.html">Reset Password</a></li>
										<li><a href="otp-phone.html">Phone OTP</a></li>
										<li><a href="otp-email.html">Email OTP</a></li>
										<li><a href="free-trail.html">Free Trial</a></li>
									</ul>
								</li>
								<li class="has-submenu">
									<a href="javascript:void(0);">Booking</a>
									<ul class="submenu">
										<li><a href="booking.html">Booking 1</a></li>
										<li><a href="user-booking.html">Booking 2</a></li>
										<li><a href="booking-payment.html">Booking Checkout</a></li>
										<li><a href="booking-success.html">Booking Success</a></li>
										<li><a href="booking-details.html">Booking Details</a></li>
									</ul>
								</li>
								<li><a href="categories.html">Categories</a></li>
								<li><a href="pricing.html">Pricing Plan</a></li>
								<li><a href="faq.html">FAQ</a></li>
								<li><a href="maintenance.html">Maintenance</a></li>
								<li><a href="coming-soon.html">Coming Soon</a></li>
								<li><a href="privacy-policy.html">Privacy Policy</a></li>
								<li><a href="terms-condition.html">Terms & Conditions</a></li>
								<li><a href="session-expired.html">Session Expired</a></li>
								<li><a href="installer.html">Installer</a></li>
							</ul>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="admin/index.html">Admin</a>
						</li>
					</ul>
				</div>
				<ul class="nav header-navbar-rht">
					<li class="nav-item">
						<a class="nav-link header-reg" href="register.html">Register</a>
					</li>
					<li class="nav-item">
						<a class="nav-link header-login" href="login.html"><i class="fa-regular fa-circle-user me-2"></i>Login</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
	<!-- /Header -->

    <!-- Breadcrumb -->
	<div class="breadcrumb-bar text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12 col-12">
					<h2 class="breadcrumb-title mb-2">Book a Service</h2>
					<nav aria-label="breadcrumb">
						<ol class="breadcrumb justify-content-center mb-0">
							<li class="breadcrumb-item"><a href="index.html"><i class="ti ti-home-2"></i></a></li>
                            <li class="breadcrumb-item">Service</li>
							<li class="breadcrumb-item active" aria-current="page">Book a Service</li>
						</ol>
					</nav>
				</div>
			</div>
			<div class="breadcrumb-bg">
				<img src="assets/img/bg/breadcrumb-bg-01.png" class="breadcrumb-bg-1" alt="Img">
				<img src="assets/img/bg/breadcrumb-bg-02.png" class="breadcrumb-bg-2" alt="Img">
			</div>
		</div>
	</div>
	<!-- /Breadcrumb -->

    <!-- Page Wrapper -->
     <div class="page-wrapper">
        <div class="content">
            <div class="container">
				<div class="fieldset-wizard request-wizard">
					<div class="row">
						<div class="col-xl-3 col-lg-4 theiaStickySidebar">
							<div class="card shadow-none bg-light-500 booking-sidebar request-sidebar mb-4 mb-lg-0">
								<div class="card-body">
									<div class="service-info bg-white d-flex align-items-center mb-3">
										<span class="avatar avatar-xl me-2 flex-shrink-0">
											<img src="assets/img/service-request.jpg" class="border-0" alt="img">
										</span>
										<div>
											<h5 class="mb-1">Removals</h5>
											<p class="fs-14">35 Providers Available</p>
										</div>
									</div>
									<div class="booking-wizard p-0">
										<h6 class="mb-3 fw-semibold">Steps</h6>
										<ul class="wizard-progress" id="bokingwizard">
											<li class="active pb-4">
												<span>Basic Information</span>
											</li>
											<li class="pb-4">
												<span>Booking Schedule</span>															
											</li>
											<li class="pb-4">
												<span>Collection Address Details</span>															
											</li>
											<li class="pb-4">
												<span>Delivery Address Details</span>															
											</li>
											<li class="pb-4">
												<span>Additional Items</span>															
											</li>
											<li class="pb-4">
												<span>Review Order</span>	
											</li>
											<li>
												<span>Checkout</span>																
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xl-9 col-lg-8">
							<fieldset id="first-field">
								<div class="card flex-fill mb-0">
									<div class="card-body">
										<h5 class="mb-3">Personal Details</h5>
										<form action="service-request.html">
											<div>
												<h6 class="mb-3 fs-16 fw-medium">Basic Information</h6>
												<div class="form-check mb-4">
													<input class="form-check-input" type="checkbox" value="" id="remember_me">
													<label class="form-check-label" for="remember_me">
														Is the Name and Contact details the same as on your Profile?
													</label>
												</div>
												<div class="row">
													<div class="col-md-6">
														<div class="mb-4">
															<div class="form-floating">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">First Name <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-6">
														<div class="mb-4">
															<div class="form-floating">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">Last Name <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-6">
														<div class="mb-4">
															<div class="form-floating">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">Email Address <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-6">
														<div class="mb-4">
															<div class="form-floating">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">Phone Number <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="mb-4 border-top pt-4">
															<div class="position-relative">
																<label class="fs-12 select-floating-label">Floor Level <span class="text-danger">*</span></label>
																<select class="select">
																	<option>0-2 Hrs</option>
																	<option>2-3 Hrs</option>
																	<option>3-4 Hrs</option>
																</select>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="form-check mb-4">
															<input class="form-check-input" type="checkbox" value="" id="cost_check">
															<label class="form-check-label" for="cost_check">
																Do you live in the CC Zone? (Costs $15 extra)
															</label>
														</div>
													</div>
												</div>
											</div>
											<div class="text-end">
												<button type="button" class="btn btn-linear-primary next_btn">Next Step</button>
											</div>
										</form>
									</div>
								</div>
							</fieldset>
							<fieldset>
								<div class="card flex-fill mb-0">
									<div class="card-body">
										<h5 class="mb-3">Booking Schedule</h5>
										<form action="service-request.html">
											<div>
												<div class="row">
													<div class="col-md-12">
														<div class="mb-4">
															<div class="form-floating  input-icon position-relative	">
																<input type="email" class="form-control datetimepicker" placeholder="">
																<label class="fs-14">Select Date and Time <span class="text-danger">*</span></label>
																<span class="input-icon-addon"><i class="ti ti-calendar"></i></span>
															</div>
														</div>
													</div>
												</div>
												<div class="mb-3">
													<h6 class="fs-16 fw-medium mb-3">Number of People in Luton Vans</h6>
													<div class="custom-increment">
														<label class="d-block mb-2">Number of People in Luton Vans</label>
														<div class="d-flex align-items-center">
															<button type="button" class="quantity-plus btn quantity-btn" data-type="plus" data-field="">
																<span><i class="fas fa-plus"></i></span>
															</button>
															<input type="text" id="quantity" class="input-number" value="1">
															<button type="button" class="quantity-minus btn quantity-btn" data-type="minus" data-field="">
																<span><i class="fas fa-minus"></i></span>
															</button>
														</div>
													</div>
												</div>
												<div class="form-check mb-4">
													<input class="form-check-input" type="checkbox" value="" id="check_2">
													<label class="form-check-label" for="check_2">
														Same Number of People in All Vans
													</label>
												</div>
												<div class="mb-4">
													<h6 class="fs-16 mb-3 fw-semibold">Number of People in All Vans</h6>
													<p class="mb-2">Number of People in All Vans</p>
													<div class="d-flex align-items-center flex-wrap row-gap-3">
														<div class="form-check me-3">
															<input class="form-check-input" type="radio" name="timing" id="hour-radio-1" checked="">
															<label class="form-check-label" for="hour-radio-1">
																2 (£70 Per Hour)
															</label>
														</div>
														<div class="form-check">
															<input class="form-check-input" type="radio" name="timing" id="hour-radio-2">
															<label class="form-check-label" for="hour-radio-2">
																3 (£90 Per Hour)
															</label>
														</div>
													</div>
												</div>
											</div>
											<div class="d-flex justify-content-end align-items-center">
												<a href="javascript:void(0);" class="btn btn-light d-inline-flex align-items-center prev_btn me-2">Back</a>
												<button type="button" class="btn btn-linear-primary next_btn">Next Step</button>
											</div>
										</form>
									</div>
								</div>
							</fieldset>
							<fieldset>
								<div class="card flex-fill mb-0">
									<div class="card-body">
										<h5 class="mb-3">Collection Address Details</h5>
										<form action="service-request.html">
											<div>
												<div class="row">
													<div class="col-md-12">
														<div class="mb-4">
															<div class="form-floating  input-icon position-relative	">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">Address <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="mb-4">
															<div class="form-floating  input-icon position-relative	">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">Postal Code <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="d-flex align-items-center flex-wrap row-gap-3 mb-3">
															<div class="form-check me-3">
																<input class="form-check-input" type="radio" name="property" id="property-radio-1" checked="">
																<label class="form-check-label" for="property-radio-1">
																	House
																</label>
															</div>
															<div class="form-check me-3">
																<input class="form-check-input" type="radio" name="property" id="property-radio-2">
																<label class="form-check-label" for="property-radio-2">
																	Flat
																</label>
															</div>
															<div class="form-check">
																<input class="form-check-input" type="radio" name="property" id="property-radio-3">
																<label class="form-check-label" for="property-radio-3">
																	Business Premise
																</label>
															</div>
														</div>
													</div>
												</div>
												<div class="mb-3">
													<div class="custom-increment">
														<label class="d-block mb-2">Number of Bedrooms</label>
														<div class="d-flex align-items-center">
															<button type="button" class="quantity-plus btn quantity-btn" data-type="plus" data-field="">
																<span><i class="fas fa-plus"></i></span>
															</button>
															<input type="text" id="increment-count" class="input-number" value="1">
															<button type="button" class="quantity-minus btn quantity-btn" data-type="minus" data-field="">
																<span><i class="fas fa-minus"></i></span>
															</button>
														</div>
													</div>
												</div>
												<div class="mb-4">
													<div class="position-relative">
														<label class="fs-12 select-floating-label">Floor Level <span class="text-danger">*</span></label>
														<select class="select">
															<option>1st Floor</option>
															<option>2nd Floor</option>
															<option>3rd Floor</option>
														</select>
													</div>
												</div>
												<div class="form-check mb-4">
													<input class="form-check-input" type="checkbox" value="" id="check_3">
													<label class="form-check-label" for="check_3">
														There is a lift/elevator at the address
													</label>
												</div>
											</div>
											<div class="d-flex justify-content-end align-items-center">
												<a href="javascript:void(0);" class="btn btn-light d-inline-flex align-items-center prev_btn me-2">Back</a>
												<button type="button" class="btn btn-linear-primary next_btn">Next Step</button>
											</div>
										</form>
									</div>
								</div>
							</fieldset>
							<fieldset>
								<div class="card flex-fill mb-0">
									<div class="card-body">
										<h5 class="mb-3">Delivery Address Details</h5>
										<form action="service-request.html">
											<div>
												<div class="row">
													<div class="col-md-12">
														<div class="mb-4">
															<div class="form-floating  input-icon position-relative	">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">Address <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="mb-4">
															<div class="form-floating  input-icon position-relative	">
																<input type="email" class="form-control" placeholder="">
																<label class="fs-14">Postal Code <span class="text-danger">*</span></label>
															</div>
														</div>
													</div>
													<div class="col-md-12">
														<div class="d-flex align-items-center flex-wrap row-gap-3 mb-3">
															<div class="form-check me-3">
																<input class="form-check-input" type="radio" name="property" id="property-radio-4" checked="">
																<label class="form-check-label" for="property-radio-4">
																	House
																</label>
															</div>
															<div class="form-check me-3">
																<input class="form-check-input" type="radio" name="property" id="property-radio-5">
																<label class="form-check-label" for="property-radio-5">
																	Flat
																</label>
															</div>
															<div class="form-check">
																<input class="form-check-input" type="radio" name="property" id="property-radio-6">
																<label class="form-check-label" for="property-radio-6">
																	Business Premise
																</label>
															</div>
														</div>
													</div>
												</div>
												<div class="mb-3">
													<div class="custom-increment">
														<label class="d-block mb-2">Number of Bedrooms</label>
														<div class="d-flex align-items-center mb-3">
															<button type="button" class="quantity-plus btn quantity-btn" data-type="plus" data-field="">
																<span><i class="fas fa-plus"></i></span>
															</button>
															<input type="text" id="increment-count2" class="input-number" value="1">
															<button type="button" class="quantity-minus btn quantity-btn" data-type="minus" data-field="">
																<span><i class="fas fa-minus"></i></span>
															</button>
														</div>
													</div>
												</div>
												<div class="mb-4">
													<div class="position-relative">
														<label class="fs-12 select-floating-label">Floor Level <span class="text-danger">*</span></label>
														<select class="select">
															<option>1st Floor</option>
															<option>2nd Floor</option>
															<option>3rd Floor</option>
														</select>
													</div>
												</div>
												<div class="form-check mb-4">
													<input class="form-check-input" type="checkbox" value="" id="check_4">
													<label class="form-check-label" for="check_4">
														There is a lift/elevator at the address
													</label>
												</div>
											</div>
											<div class="d-flex justify-content-end align-items-center">
												<a href="javascript:void(0);" class="btn btn-light d-inline-flex align-items-center prev_btn me-2">Back</a>
												<button type="button" class="btn btn-linear-primary next_btn">Next Step</button>
											</div>
										</form>
									</div>
								</div>
							</fieldset>
							<fieldset>
								<div class="card flex-fill mb-0">
									<div class="card-body">
										<h5 class="mb-3">Additional Items</h5>
										<form action="service-request.html">
											<div class="mb-3">
												<label class="form-label d-block">Please add Pictures or Videos</label>									
												<div class="d-flex align-items-center justify-content-center upload-field flex-column">
													<span class="d-block text-center mb-2"><img src="assets/img/icons/icon-upload.svg" alt=""></span>
													<p class="fs-14 text-center mb-2">Drag and drop your files here to upload <span class="d-block mt-2">Or</span></p>
													<div class="file-upload btn btn-linear-primary h-auto mb-2">
														Browse Files
														<input type="file" accept="video/image">
													</div>
													<p class="text-center fs-14">Only .jpg .png file types allowed and file <br>size must be less than 100 MB</p>
												</div>
											</div>
											<div class="mb-3">
												<label class="form-label">Additional Notes/Special Requirements</label>
												<textarea rows="3" class="form-control"></textarea>
											</div>
											<div class="d-flex justify-content-end align-items-center">
												<a href="javascript:void(0);" class="btn btn-light d-inline-flex align-items-center prev_btn me-2">Back</a>
												<button type="button" class="btn btn-linear-primary next_btn">Next Step</button>
											</div>
										</form>
									</div>
								</div>
							</fieldset>
							<fieldset>
								<div class="flex-fill">
									<div class="review-order">
										<h6 class="fs-16 fw-medium border-bottom mb-3 pb-3">Order Details</h6>
										<div class="d-flex align-items-center justify-content-md-between flex-wrap gap-3">
											<div class="rounded bg-white p-2 text-center review-item">
												<h6 class="fw-medium fs-16 mb-1">Booking Charges</h6>
												<span>£ 42.00</span>
											</div>
											<div class="rounded bg-white p-2 text-center review-item">
												<h6 class="fw-medium fs-16 mb-1">CC Zone</h6>
												<span>£ 0.00</span>
											</div>
											<div class="rounded bg-white p-2 text-center review-item">
												<h6 class="fw-medium fs-16 mb-1">Subtotal</h6>
												<span>£ 280.00</span>
											</div>
											<div class="rounded bg-white p-2 text-center review-item">
												<h6 class="fw-medium fs-16 mb-1">V.A.T</h6>
												<span>£ 0.00</span>
											</div>
											<div class="rounded bg-white p-2 text-center review-item">
												<h6 class="fw-medium fs-16 mb-1">Total Payment</h6>
												<span>£ 322.00</span>
											</div>
										</div>
									</div>
									<div class="card mb-0">
										<div class="card-body">
											<h5 class="mb-3">Review Order</h5>
											<div class="border-bottom mb-3">
												<h6 class="fs-16 fw-medium mb-3">Personal Details</h6>
												<div class="row">
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">First Name</h6>
																<span>Name</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Phone</h6>
																<span>Phone</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Last Name</h6>
																<span>Name</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Booking Estimate</h6>
																<span>2</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Email</h6>
																<span>Email</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">CC Zone</h6>
																<span>CC Zone</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="border-bottom mb-3">
												<h6 class="fs-16 fw-medium mb-3">Booking Schedule</h6>
												<div class="row">
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Luton Van</h6>
																<span>2, 2</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Number of Luton Vans</h6>
																<span>2</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Booking Date/Time</h6>
																<span>26 September 2024</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="border-bottom mb-3">
												<h6 class="fs-16 fw-medium mb-3">Collection Address Details</h6>
												<div class="row">
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Address</h6>
																<span>Address</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Floor Level</h6>
																<span>1</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Phone</h6>
																<span>Phone</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Email</h6>
																<span>Email</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Is there a Lift</h6>
																<span>Yes</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Property Type</h6>
																<span>House</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">First Name</h6>
																<span>Name</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Number of Bedrooms</h6>
																<span>5</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="border-bottom mb-3">
												<h6 class="fs-16 fw-medium mb-3">Delivery Address Details</h6>
												<div class="row">
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Address</h6>
																<span>Address</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Floor Level</h6>
																<span>1</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Phone</h6>
																<span>Phone</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Email</h6>
																<span>Email</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Is there a Lift</h6>
																<span>Yes</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Property Type</h6>
																<span>House</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">First Name</h6>
																<span>Name</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Number of Bedrooms</h6>
																<span>5</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="border-bottom mb-3">
												<h6 class="fs-16 fw-medium mb-3">Additional Details</h6>
												<div class="row">
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Already have items</h6>
																<span>Nil</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Does the car start?</h6>
																<span>Nil</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Largest Items</h6>
																<span>Nil</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Special Notes</h6>
																<span>Notes</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Already bought items</h6>
																<span>No</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Hair Done?</h6>
																<span>Nil</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Items need mounting?</h6>
																<span>Nil</span>
															</div>
														</div>
													</div>
													<div class="col-md-4 col-sm-6">
														<div class="mb-3">
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Does the car run and drive?</h6>
																<span>Nil</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Do you need furniture assembly?</h6>
																<span>Nil</span>
															</div>
															<div class="mb-2">
																<h6 class="fs-14 fw-medium mb-1">Number of Items that need Assembling</h6>
																<span>1</span>
															</div>
														</div>
													</div>
												</div>
											</div>
											<div class="d-flex justify-content-end align-items-center">
												<a href="javascript:void(0);" class="btn btn-light d-inline-flex align-items-center prev_btn me-2">Back</a>
												<a href="login.html" class="btn btn-linear-primary">Checkout</a>
											</div>
										</div>
									</div>
								</div>
							</fieldset>
						</div>
					</div>
				</div>
            </div>
        </div>
     </div>
    <!-- /Page Wrapper -->

    <!-- Footer -->
	<footer>
		<div class="footer-top">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-xl-2">
						<div class="footer-widget">
							<h5 class="mb-4">Product</h5>
							<ul class="footer-menu">
								<li>
									<a href="javascript:void(0);">Features</a>
								</li>
								<li>
									<a href="javascript:void(0);">Pricing</a>
								</li>
								<li>
									<a href="javascript:void(0);">Case studies</a>
								</li>
								<li>
									<a href="javascript:void(0);">Reviews</a>
								</li>
								<li>
									<a href="javascript:void(0);">Updates</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-md-6 col-xl-2">
						<div class="footer-widget">
							<h5 class="mb-4">Support</h5>
							<ul class="footer-menu">
								<li>
									<a href="javascript:void(0);">Getting started</a>
								</li>
								<li>
									<a href="javascript:void(0);">Help center</a>
								</li>
								<li>
									<a href="javascript:void(0);">Server status</a>
								</li>
								<li>
									<a href="javascript:void(0);">Report a bug</a>
								</li>
								<li>
									<a href="javascript:void(0);">Chat support</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-md-6 col-xl-2">
						<div class="footer-widget">
							<h5 class="mb-4">For Provider</h5>
							<ul class="footer-menu">
								<li>
									<a href="about-us.html">About</a>
								</li>
								<li>
									<a href="contact-us.html">Contact us</a>
								</li>
								<li>
									<a href="javascript:void(0);">Careers</a>
								</li>
								<li>
									<a href="faq.html">Faq’s</a>
								</li>
								<li>
									<a href="blogs.html">Blog</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-md-6 col-xl-2">
						<div class="footer-widget">
							<h5 class="mb-4">Support</h5>
							<ul class="footer-menu">
								<li>
									<a href="javascript:void(0);">Getting started</a>
								</li>
								<li>
									<a href="javascript:void(0);">Help center</a>
								</li>
								<li>
									<a href="javascript:void(0);">Other Products</a>
								</li>
								<li>
									<a href="javascript:void(0);">Report a bug</a>
								</li>
								<li>
									<a href="javascript:void(0);">Chat support</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-md-6 col-xl-4">
						<div class="footer-widget">
							<div class="card bg-light-200 border-0 mb-3">
								<div class="card-body">
									<h5 class="mb-3">SignUp For Subscription</h5>
									<div class="mb-3">
										<input type="text" class="form-control" placeholder="Enter Email Address">
									</div>
									<button type="submit" class="btn btn-linear-primary btn-lg w-100">Subscribe</button>
								</div>
							</div>
							<div class="d-flex align-items-center flex-wrap">
								<h6 class="fs-14 me-2">Download Our App</h6>
								<img src="assets/img/icons/app-store.svg" class="me-2" alt="img">
								<img src="assets/img/icons/goolge-play.svg" class="me-2" alt="img">
							</div>
						</div>
					</div>
				</div>
				<div class="d-flex align-items-center justify-content-between flex-wrap mt-3">					
					<ul class="social-icon mb-3">
						<li>
							<a href="javascript:void(0);"><img src="assets/img/icons/fb.svg" class="img" alt="icon"></a>
						</li>
						<li>
							<a href="javascript:void(0);"><img src="assets/img/icons/instagram.svg" class="img" alt="icon"></a>
						</li>
						<li>
							<a href="javascript:void(0);"><img src="assets/img/icons/twitter.svg" class="img" alt="icon"></a>
						</li>
						<li>
							<a href="javascript:void(0);"><img src="assets/img/icons/whatsapp.svg" class="img" alt="icon"></a>
						</li>
						<li>
							<a href="javascript:void(0);"><img src="assets/img/icons/youtube.svg" class="img" alt="icon"></a>
						</li>
						<li>
							<a href="javascript:void(0);"><img src="assets/img/icons/linkedin.svg" class="img" alt="icon"></a>
						</li>
					</ul>
					<div class="d-flex align-items-center">
						<div class="dropdown me-3 mb-3">
							<a href="javascript:void(0);" class="dropdown-toggle bg-light-300 fw-medium" data-bs-toggle="dropdown">
								<img src="assets/img/flags/us.png" class="flag me-2" alt="Flag">English
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/flags/us.png" class="flag me-2" alt="Flag">English</a></li>
								<li><a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/flags/jp.png" class="flag me-2" alt="Flag">Japanese</a></li>
								<li><a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/flags/cn.png" class="flag me-2" alt="Flag">Chinese</a></li>
							</ul>
						</div>
						<div class="dropdown mb-3">
							<a href="javascript:void(0);" class="dropdown-toggle bg-light-300 fw-medium" data-bs-toggle="dropdown">
								USD
							</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="javascript:void(0);">USD</a></li>
								<li><a class="dropdown-item" href="javascript:void(0);">EURO</a></li>
								<li><a class="dropdown-item" href="javascript:void(0);">YEN</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Footer Bottom -->
		<div class="footer-bottom">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="d-flex align-items-center justify-content-between flex-wrap">
							<p class="mb-2">Copyright &copy; 2024 - All Rights Reserved Truelysell</p>
							<ul class="menu-links mb-2">
								<li>
									<a href="javascript:void(0);"> Terms and Conditions</a>
								</li>
								<li>
									<a href="javascript:void(0);">Privacy Policy</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /Footer Bottom -->
			
	</footer>
	<!-- /Footer -->

	<!-- Delete Account -->
	<div class="modal fade custom-modal" id="del-account">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header d-flex align-items-center justify-content-between border-bottom">
                    <h5 class="modal-title">Delete Account</h5>
                    <a href="javascript:void(0);" data-bs-dismiss="modal" aria-label="Close"><i class="ti ti-circle-x-filled fs-20"></i></a>
                </div>
				<form action="user-dashboard.html">
					<div class="modal-body">
						<p class="mb-3">Are you sure you want to delete This Account? To delete your account, Type your password.</p>
						<div class="mb-0">
							<label class="form-label">Password</label>
							<div class="pass-group">
								<input type="password" class="form-control pass-input" placeholder="*************">
								<span class="toggle-password feather-eye-off"></span>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<a href="javascript:void(0);" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
						<button type="submit" class="btn btn-dark">Delete Account</button>
					</div>	
				</form>
            </div>
        </div>
    </div>
	<!-- /Cancel Appointment -->

    <!-- Jquery JS -->
	<script src="assets/js/jquery-3.7.1.min.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>

	<!-- Bootstrap JS -->
	<script src="assets/js/bootstrap.bundle.min.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>

	<!-- Wow JS -->
	<script src="assets/js/wow.min.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>

	<!-- select JS -->
	<script src="assets/plugins/select2/js/select2.min.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>

	<!-- Sticky Sidebar JS -->
	<script src="assets/plugins/theia-sticky-sidebar/ResizeSensor.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>
	<script src="assets/plugins/theia-sticky-sidebar/theia-sticky-sidebar.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>

	<!-- Datepicker Core JS -->
	<script src="assets/plugins/moment/moment.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>
    <script src="assets/js/bootstrap-datetimepicker.min.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>

	<!-- counterup JS -->
	<script src="assets/plugins/countup/jquery.counterup.min.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>
    <script src="assets/plugins/countup/jquery.waypoints.min.js" type="d2ddc2cf9df866298224b399-text/javascript"> </script>
	
	<!-- Script JS -->
	<script src="assets/js/script.js" type="d2ddc2cf9df866298224b399-text/javascript"></script>
<script src="../../cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="d2ddc2cf9df866298224b399-|49" defer=""></script></body>
</html>