@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
	.step-box1,
	.step-box2 {
		background-color: #f1f1f1;
		padding: 20px;
	}

	.step-box1 {
		border-top-left-radius: 2rem;
		border-bottom-left-radius: 2rem;
		border-right: 3px solid #ffffff;
	}

	.step-box2 {
		border-top-right-radius: 2rem;
		border-bottom-right-radius: 2rem;
		border-left: 3px solid #ffffff;
	}

	.contact-form {
		max-width: unset !important;
	}

	ul li {
		list-style-type: none;
	}

	h3.text-center.mb-3 {
		border-bottom: 1px solid #cccccc;
		padding: 0 0 15px 0px;
	}

	.contact-form i.mdi {
		color: #053e8a;
	}

	h4.heading {
		font-weight: 700;
		font-size: 16px;
		margin-bottom: 8px;
		color: #264a9f;
		text-transform: uppercase;
	}

	@media (max-width:575px) {
		.row {
			margin-left: unset;
			margin-right: unset;
		}

		.step-box1 {
			margin-bottom: 15px;
			border-top-right-radius: 2rem;
			border-bottom-right-radius: 2rem;
		}

		.step-box2 {
			border-top-left-radius: 2rem;
			border-bottom-left-radius: 2rem;
		}

		h3.text-center.mb-3 {
			padding: 0 0 10px 0px;
		}
	}
</style>
<!-- Start Page Title Area -->
<div class="page-title-area">
	<div class="container">
		<div class="page-title-content">
			<h2>Grievance</h2>
			<ul>
				<li><a href="{{ route('home.page') }}">Home</a></li>
				<li class="active">Grievance Redressal Mechanism</li>
			</ul>
		</div>
	</div>

	<img src="{{ asset('rassets/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
	<img src="{{ asset('rassets/images/subscribe-shape-2.png') }}" alt="Image" class="shape shape-2" data-speed="0.04" data-revert="true">
</div>
<!-- End Page Title Area -->
<!-- Start Contact Area -->
<section class="grievance pt-70 pb-70">
	<div class="container">
		<div class="section-title">
			<h4 class="heading">Please Proceed for your Grievance as below detail</h4>
			<h6>Please mention your issue detail and correspondence with enclose necessary documents</h6>
		</div>
		<div class="contact-form">
			<div class="row">
				<div class="col-lg-6 col-sm-6 step-box1">
					<div class="form-group mb-0">
						<h3 class="text-center mb-3  ">Step-1</h3>
						<ul class="px-3">
							<li><a href="tel:+919824701070" class="call-us d-flex" target="_blank"><i class="mdi mdi-phone mr-2"></i>
									<p style="padding: 0 0 0 10px;">+91 7990038677</p>
								</a></li>
							<li class="d-flex"><i class="mdi mdi-clock-time-eight-outline mr-2"></i>
								<p style="padding: 0 0 0 10px;">11.00 am to 06.00 pm</p>
							</li>
							<li><a href="mailto:ccare@reachasuree.com" class="mail d-flex" target="_blank"><i class="mdi mdi-email-outline mr-2"></i>
									<p style="padding: 0 0 0 10px;">care@reachasuree.com</p>
								</a></li>
							<li class="d-flex"><i class="mdi mdi-typewriter mr-2"></i><a href="https://maps.google.com/maps?q=21.1595035%2C72.8135909&amp;z=17&amp;hl=en" target="_blank" style="padding: 0 0 0 10px;">Reach Assure 113 A GF UMa indurstries Society, Nr.Bhatar Char Rasta, Surat.</a></li>
						</ul>
					</div>
				</div>

				<div class="col-lg-6 col-sm-6 step-box2">
					<div class="form-group mb-0">
						<h3 class="text-center mb-3">Step-2</h3>
						<ul class="px-3">
							<li>If our response or resolution does not meet your expectations, you can escalate at</li>
							<li><a href="mailto:ankurvekaria@gmail.com" target="_blank" class="mail d-flex"><i class="mdi mdi-email-outline"></i>
									<p style="padding: 0 0 0 10px;">ankurvekaria@gmail.com</p>
								</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</section>
<script src="{{ asset('rassets/js/jquery.min.js') }}"></script>
<script src="{{ asset('rassets/js/bootstrap.bundle.min.js') }}"></script>
@endsection