@include('frontEnd.includes.layout')
@if(@Helper::currentLanguage()->code == "ar" && @Helper::currentLanguage()->direction == "rtl")
<style>
    .p-4{
        text-align: right;
    font-size: 17px;
    }
    .h3_style{
        font-size:17px
    }
</style>
@else

@endif
         <div role="main" class="main">
                @if(@Helper::currentLanguage()->code == "ar" && @Helper::currentLanguage()->direction == "rtl")
                <section class="page-header page-header-modern custom-page-header bg-color-quaternary" style="transform: scaleX(-1);">
                @else
                <section class="page-header page-header-modern custom-page-header bg-color-quaternary" >
                @endif
					<div class="container">
						<div class="row">
						 @if(@Helper::currentLanguage()->code == "ar" && @Helper::currentLanguage()->direction == "rtl")
                     	<div class="col-md-8 order-2 order-md-1 align-self-center p-static" style="transform: scaleX(-1);
    text-align: right;">
                                    @else
                                  	<div class="col-md-8 order-2 order-md-1 align-self-center p-static" style="">
                                    @endif
								<h1 class="font-weight-bold text-9 text-color-secondary appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="100">{{__('frontend.history')}}</h1>
							</div>
							<div class="col-md-4 order-1 order-md-2 align-self-center">
								<ul class="breadcrumb d-block text-md-end appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="300">
										 @if(@Helper::currentLanguage()->code == "ar" && @Helper::currentLanguage()->direction == "rtl")
                                     <li style="direction: rtl; transform: scaleX(-1);">
                                    @else
                                     <li style="">
                                    @endif
									
									<a href="#">{{__('frontend.home')}}</a></li>
									@if(@Helper::currentLanguage()->code == "ar" && @Helper::currentLanguage()->direction == "rtl")
                                   	<li style="direction: rtl; transform: scaleX(-1);" class="active">
                                    @else
                                  	<li  class="active">
                                    @endif
                                    {{__('frontend.history')}}</li>
								</ul>
							</div>
						</div>
					</div>
				</section>
<div class="row">
						<div class="col-md-8 mx-md-auto text-center">

							<h2 class="text-color-dark font-weight-normal text-7 mb-0 pt-2"> <strong class="font-weight-extra-bold">{{__('frontend.history')}}</strong></h2>
							<p></p>

							<section class="timeline" id="timeline">
								<div class="timeline-body">
									<div class="timeline-date">
										<h3 style="font-size:17px" class="text-primary font-weight-bold">1987</h3>
									</div>

									<article class="timeline-box left text-start appear-animation animated fadeIn appear-animation-visible" data-appear-animation="fadeIn" data-appear-animation-delay="200" style="animation-delay: 200ms;">
										<div class="timeline-box-arrow"></div>
										<div class="p-4">
											<img alt="" class="img-fluid" src="https://www.okler.net/previews/porto/9.9.0/img/history/history-3.jpg">
										<br>
											<h3 style=" margin-top: 20px;" class="mb-0 text-3"><blod>{{ __('frontend.1987')}}</blod></h3>
										</div>
									</article>

									<div class="timeline-date">
										<h3 style="font-size:17px" class="text-primary font-weight-bold h3_style">1990</h3>
									</div>

									<article class="timeline-box right text-start appear-animation animated fadeIn appear-animation-visible" data-appear-animation="fadeIn" data-appear-animation-delay="400" style="animation-delay: 400ms;">
										<div class="timeline-box-arrow"></div>
										<div class="p-4">
											<img alt="" class="img-fluid" src="https://www.okler.net/previews/porto/9.9.0/img/history/history-2.jpg">
											<br>
											<h3 style=" margin-top: 20px;" class="mb-0 text-3"><blod>{{ __('frontend.1990')}}</blod></h3>
										</div>
									</article>

									<div class="timeline-date">
										<h3 style="font-size:17px" class="text-primary font-weight-bold">1999</h3>
									</div>

									<article class="timeline-box left text-start appear-animation animated fadeIn appear-animation-visible" data-appear-animation="fadeIn" data-appear-animation-delay="600" style="animation-delay: 600ms;">
										<div class="timeline-box-arrow"></div>
										<div class="p-4">
											<img alt="" class="img-fluid" src="https://www.okler.net/previews/porto/9.9.0/img/history/history-1.jpg">
										<br>
											<h3 style=" margin-top: 20px;" class="mb-0 text-3"><blod>{{ __('frontend.1999')}}</blod></h3>
										</div>
									</article>
									
										<div class="timeline-date">
										<h3 style="font-size:17px"  class="text-primary font-weight-bold">2013</h3>
									</div>

									<article class="timeline-box right text-start appear-animation animated fadeIn appear-animation-visible" data-appear-animation="fadeIn" data-appear-animation-delay="600" style="animation-delay: 600ms;">
										<div class="timeline-box-arrow"></div>
										<div class="p-4">
											<img alt="" class="img-fluid" src="https://www.okler.net/previews/porto/9.9.0/img/history/history-1.jpg">
										<br>
											<h3 style=" margin-top: 20px;" class="mb-0 text-3"><blod>{{ __('frontend.2013')}}</blod></h3>
										</div>
									</article>
									
								</div>
							</section>

						</div>
					</div>
		@if(@Helper::currentLanguage()->code == "ar" && @Helper::currentLanguage()->direction == "rtl")
                    	<section class="are-you-looking-for bg-color-secondary" style="direction:rtl">
                                    @else
                                 	<section class="are-you-looking-for bg-color-secondary" style="">
                                    @endif
					<div class="container">
						<div class="row justify-content-between">
							<div class="col-xl-5">
								<p class="text-uppercase font-weight-semibold mb-1 text-color-light appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="100"><span class="line-pre-title bg-color-primary appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200"></span>{{__('frontend.contact2')}}</p>
								<h2 class="text-color-light font-weight-bold text-capitalize mb-1 letter-spacing-08 font-size-32 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">{{__('frontend.contact1')}}</h2>
								<p class="font-weight-semibold text-color-light mb-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300">{{__('frontend.contact3')}}</p>
							</div>
							<div class="col-xl-6 d-flex align-items-start align-items-sm-center justify-content-start justify-content-xl-end mt-4 mt-xl-0 flex-column flex-sm-row">
								<span class="are-you-looking-for-phone py-2 d-flex align-items-center text-color-light font-weight-semibold text-uppercase text-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="500">
									<!--tel> <span>
										<img width="18" height="25" src="img/demos/business-consulting-2/icons/phone.svg" alt="Phone">
									</span>
									<a class="text-color-light text-decoration-none" href="tel:+966 92000 8773">+966 92000 8773</a> 
								</span></tel-->
								<a href="/contact" class="btn btn-primary custom-btn text-center text-uppercase text-decoration-none border-0 py-0 px-5 font-weight-semibold appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600">{{__('frontend.contactus')}}</a>
							</div>
						</div>
					</div>
					</section>
					
@include('frontEnd.includes.footer_new')
</div>

		<!-- Vendor -->
			@if(url()->current() == $url.'/blog' )
			<script>
		  //  document.getElementById("News").style.color="#e8465f";
		</script>
		@else
			<script>
		    //document.getElementById("الأخبار").style.color="#e8465f";
		</script>
		@endif
		<script src="assets/vendor/plugins/js/plugins.min.js"></script>

		<!-- Theme Base, Components and Settings -->
		<script src="assets/js/theme.js"></script>

		<!-- Current Page Vendor and Views -->
		<script src="assets/js/views/view.contact.js"></script>

		<!-- Demo -->
		<script src="js/demos/demo-business-consulting-2.js"></script>

		<!-- Theme Custom -->
		<script src="assets/js/custom.js"></script>

		<!-- Theme Initialization Files -->
		<script src="assets/js/theme.init.js"></script>
 <a class="scroll-to-top hidden-mobile visible" href="#header" aria-label="Scroll To Top"><i class="fas fa-chevron-up"></i></a>
	</body>
</html>