@include('public_area.layouts.header_include')

@include('public_area.layouts.aside_include')


<section>
  <div class="food-delivery-head">
    <div class="food-delivery-back">
		<a href="javascript:history.back()">
			<i class="md-ripples uil uil-angle-left"></i>
		</a>
    </div>
    <div class="food-delivery mt-2">
      <h6>Phone Number</h6>
    </div>
    <div class="wish-list-food">
     
    </div>
    <div class="wish-list-Cart">
    </div>
  </div>
</section>

<section class="pt-5">
	<div class="container">
	   <div class="row">
		  <div class="col-md-12">
			<div class="row">
				<div class="col-md-12">
					<div class="professionl-card">
						<div class="circle"></div>
						<div class="heading-dv">
							<h2>How to change your Phone number?</h2>
						</div>
						 <div class="wrapper">
							<div class="carousel owl-carousel">
								<div class="card">
									<img src="/all_restaurants_assets/img/step1.png" alt="" class="img-fluid">
									<div class="content">
										<h4>Step 1</h4>
										<p>Log in to your <span class="text-dark font-weight-bold"> account</span> </p>
									</div>
								</div>
								<div class="card">
									<img src="/all_restaurants_assets/img/step2.png" alt="" class="img-fluid">
									<div class="content">
										<h4>Step 2</h4>
										<p>Go to <span class="text-dark font-weight-bold">My Profile</span> from the side menu</p>
									</div>
								</div>
								<div class="card">
									<img src="/all_restaurants_assets/img/step3.png" alt="" class="img-fluid">
									<div class="content">
										<h4>Step 3</h4>
										<p>Change your <span class="text-dark font-weight-bold"> email address</span></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		  </div>
	   </div>
	</div>
 </section>

 <section>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="step-content-read">
					<h6>Please follow the steps below to change your Phone number:</h6>
				</div>
			</div>
			<div class="col-md-12">
				<div class="step-more">
					<ol>
						<li>Logout your <span class="font-weight-bold">account.</span></li>
						<li>After logout you will redirect to the login page swipe to signup and <span class="font-weight-bold">Create Account</span></li>
						<li>Create your account change your  <span class="font-weight-bold">Phone Number.</span></li>
					</ol>
					<div class="help-content">
						<h6 class="font-weight-bold w-100 text-center">Was this helpful?</h6>
						<div class="help-btn-div">
							<a href="#" class="helpful-btn">Yes, I got my answer</a>
						</div>
						<div class="help-btn-div">
							<a href="#" class="helpful-btn">No, add more information</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>   
 </section>
@include('public_area.layouts.footer_include')

<script>
	$(".carousel").owlCarousel({
	  margin: 0,
	  loop: true,
	  autoplay: true,
	  autoplayTimeout: 2000,
	  autoplayHoverPause: true,
	  responsive: {
		0:{
		  items:1,
		  nav: false
		},
		600:{
		  items:1,
		  nav: false
		},
		1000:{
		  items:1,
		  nav: false
		}
	  }
	});
 </script>

<script>
	const popup = document.querySelector('.popup');
	const close = document.querySelector('.close');

	window.onload = function() 
	{
		setTimeout(function(){
			popup.style.display = "block";
		},2000)	
	}

	close.addEventListener('click',() => {
		popup.style.display = "none";
	})
</script>