@extends('themes.tameer.app')

@section('content')

	<div id="pagetitle" class="page-title bg-overlay">
	    <div class="container">
	        <div class="page-title-inner" style="opacity: 0.3375;">
	            <h1 class="page-title">{!!$page->title!!}</h1>
	            <ul class="ct-breadcrumb">
	                <li><a class="breadcrumb-entry" href="{{route('frontend.index')}}">{{__('Home')}}</a></li>
	                <li><span class="breadcrumb-entry">{{$page->title}}</span></li>
	            </ul>
	        </div>
	    </div>
	    <div class="page-title-social">
	        <a href="#" target="_blank"><i class="fa fa-facebook"></i></a><a href="#" target="_blank"><i class="fa fa-twitter"></i></a><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a>
	    </div>
	</div>


	<div id="content" class="site-content">
		<div class="content-inner">
			<div class="container content-container">
				<div class="row content-row">
					<div id="primary" class="content-area content-full-width col-12">
						<main id="main" class="site-main">
							<article id="post-8" class="post-8 page type-page status-publish hentry">
								<div class="entry-content clearfix">



									<div class="vc_row wpb_row vc_row-fluid bg-image-ps-inherit">
									    <div class="wpb_column vc_column_container vc_col-sm-12">
									        <div class="vc_column-inner vc_custom_1552904057619">
									            <div class="wpb_wrapper">
									                
									                <div class="vc_empty_space" style="height: 39px;"><span class="vc_empty_space_inner"></span></div>
									                <div class="vc_row wpb_row vc_inner vc_row-fluid">

														@foreach($services ?? [] as $service)
									                    <div class="wpb_column vc_column_container vc_col-sm-6 vc_col-lg-3 vc_col-md-3 wpb_animate_when_almost_visible wpb_fadeInUp fadeInUp" style="animation-delay: 400ms;">
									                        <div class="vc_column-inner vc_custom_1552924764056">
									                            <div class="wpb_wrapper">
									                                <div class="ct-fancybox-layout1 col-same-height" style="height: 324px;">
									                                    <div class="ct-fancybox-inner">
									                                        <div class="ct-fancybox-icon">
									                                            <img
									                                                class="icon-main"
									                                                src="/storage/images/original/{{$service->image}}"
									                                                alt="{{$service->description}}"
									                                            />
									                                        </div>

									                                        <div class="ct-fancybox-content">
									                                            <h3 class="ct-fancybox-title" style="">
									                                               {{$service->title}}
									                                            </h3>
									                                            <div class="ct-fancybox-desc" style="">
																					{{$service->description}}
									                                            </div>
									                                        </div>
									                                        <a class="ct-fancybox-more" href="{{$service->url}}" target="_self"></a>
									                                    </div>
									                                </div>
									                            </div>
									                        </div>
									                    </div>
														@endforeach
									                </div>
									            </div>
									        </div>
									    </div>
									</div>



									<div class="vc_row-full-width vc_clearfix"></div>
								</div>
								<!-- .entry-content -->
							</article>
							<!-- #post-8 -->
						</main>
						<!-- #main -->
					</div>
					<!-- #primary -->
				</div>
			</div>
		</div>
		<!-- #content inner -->
	</div>
	<!-- #content -->

@endsection



@section('scripts')

@endsection

@section('styles')
	<style media="screen">
.owl-carousel .owl-item img{
    max-width: max-content;
    max-height: max-content;
}
.ct-fancybox-holder{
	height: auto !important;
}
.ct-fancybox-layout2.active .ct-fancybox-holder, .ct-fancybox-layout2:hover .ct-fancybox-holder {
    padding-bottom: 20px;
}
.ct-fancybox-layout2 .ct-fancybox-holder, .ct-fancybox-layout2:hover .ct-fancybox-holder {
    padding-bottom: 20px;
}
.vc_column-inner.vc_custom_1552904057619 {
    padding: 110px 0;
}

.wpb_column.vc_column_container.vc_col-sm-6.vc_col-lg-3.vc_col-md-3.wpb_animate_when_almost_visible.wpb_fadeInUp.fadeInUp.wpb_start_animation.animated {
    margin-bottom: 50px;
}
	</style>

@endsection