@extends('website.layouts.app-ar')
@section('content')
<!--************************************* header *************************************-->
	<section class="inner_banner px-md-5 px-0">
		<div class="container-fluid">
    @include('website.layouts.appoinment_btn-ar')
			<div class="inner_banner_bg services_banner p-sm-5 p-3">
    @include('website.layouts.head_nav-ar')
				<nav data-aos="fade-up" class="w-100 float-start my-md-5 my-sm-4 my-0 justify-content-sm-start justify-content-center d-flex order-sm-1 order-2" style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
					<ol class="breadcrumb m-0">
						<li class="breadcrumb-item"><a class="trs" href="/{{ env('Arabic_url') }}">الصفحة الرئيسية</a></li>
						<li class="breadcrumb-item"><a class="trs" href="/{{ env('Arabic_url') }}/services">خدماتنا</a></li>
						<li class="breadcrumb-item active" aria-current="page">{{ $services->service_ar }}</li>
					</ol>
				</nav>
				<div data-aos="fade-up" class="w-100 row align-items-sm-center align-items-start order-sm-2 order-1">
					<h1 class="inner_title text-xl-center text-sm-start text-center">{{ $services->service_ar }} </h1>
				</div>
			</div>
		</div>
	</section>
	<section class="services px-md-5 px-0">
		<div class="container-fluid">
			<div class="row d-flex mb-5">
				<div data-aos="fade-up" class="col-xxl-6 col-xl-6 col-lg-6 col-md-5 col-sm-12 col-12 mb-md-0 mb-5">
					<img class="img-fluid d-block w-100 services_img" src="{{ asset('uploads/main_services/'.$services->service_image) }}" alt="services">
				</div>
				<div data-aos="fade-up" class="col-xxl-6 col-xl-6 col-lg-6 col-md-7 col-sm-12 col-12">
					<div class="row">
						<div class="col-12 mb-4"><h2 class="py-lg-5 p-2">{{ $services->service_ar }}</h2></div>
						<div class="col-12">
							<div class="w-100 float-start services_blue_bg">
								<div class="col-xl-11 col-12 py-5 px-4">
									<h3 class="mb-4">{{ $services->sub_heading_ar }}</h3>
									<p class="text-sm-start mb-4">{{ $services->serv_desc_ar }}</p>
									@if(count($service_feat)>0)
									<ul class="services_white_bg py-4 px-5">
										@foreach($service_feat as $feat)
										<li>
											@if($feat->service_section_title_ar!="")<b>{{ $feat->service_section_title_ar }}</b><br>@endif
											@if($feat->service_section_description_ar!=""){{ $feat->service_section_description_ar }}@endif
											@if($feat->features!="")
																						<ul class="services_white_bg py-4 px-5">
												@foreach($exp_featarr as $exp)
												<li>{{ $exp }}</li>
												@endforeach
											</ul>
											@endif
										</li>
										@endforeach	
									</ul>
									@endif
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row d-flex mb-5">
				<div data-aos="fade-up" class="col-12">
					<div class="row">
						<div class="col-12">
							<div class="w-100 float-start services_blue_bg">
								<div class="col-xl-11 col-12 py-5 px-4">
									<h3 class="mb-4">معايير <span>السلامة</span> لدينا</h3>
									<p class="text-sm-start mb-4"> 

										لدينا أعلى معايير مكافحة العدوى حيث نستخدم التصوير الشعاعي الرقمي الأشعة السينية الأكثر أمانًا. <br>
										
										يستخدم مركز بايونيرز للأسنان أعلى معايير التعقيم لأن سلامة المريض هي أولى أولوياتنا. يتم الحفاظ على أعلى معايير التعقيم والنظافة في عيادتنا. </p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

@endsection