@extends('frontend.layouts.app')
@section('page_content')
<link rel='stylesheet' href="{{asset('frontend/vendor/circle-slider/style.css')}}">
<section class="page_banner">
    <div class="about_banner">
        <div class="image">
            <img src="{{asset($about->banner_image ?? 'frontend/images/aboutus_banner.png')}}">
        </div>
        <div class="about_banner_desc">
            <h2>About us</h2>
            <div class="btm">
                <a href="#intro" class="scroll-down"></a>
            </div>
        </div>
    </div>
</section>
<div class="inner_page_with_banner">
    <section class="breadcrumb_sec container">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('index')}}">Home</a></li>
            <li class="breadcrumb-item active">About us</li>
        </ol>
    </section>
    <section class="main_content">
        <div class="about_intro pt-3 pb-5" id="intro">
            <div class="container pb-lg-3">
                <div class="row justify-content-center">
                    <div class="col-lg-7 text-center">
                        <h2 class="">{{LangTranslate::translate($about->title ?? '',$about->ar_title ?? '')}}</h2>
                        <p class="">
                            {!! LangTranslate::translate($about->description ?? '',$about->ar_description ?? '') !!}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="about_mision gray_bg">
            <div class="container">
                <div class="row d-flex align-items-center">
                    <div class="col-md-6 py-md-5 pr-lg-5">
                        <h2>{{LangTranslate::translate($about->our_mission_title ?? '',$about->ar_our_mission_title ?? '')}}</h2>
                        <p>{!! LangTranslate::translate($about->our_mission_description ?? '',$about->ar_our_mission_description ?? '') !!}</p>
                    </div>
                    <div class="col-md-6">
                        <div class="image">
                            @if(file_exists($about->our_mission_image))
                            <img src="{{asset($about->our_mission_image)}}" alt="our mission" class="w-100">
                            @else
                            <img src="{{asset('frontend/images/about_mission.png')}}" alt="our mission" class="w-100">
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="about_values">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <h2>{{LangTranslate::translate($about->core_value_title ?? '',$about->ar_core_value_title ?? '')}}</h2>
                        <p>{!! LangTranslate::translate($about->core_value_description ?? '',$about->ar_core_value_description ?? '') !!}</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 mb-5">
                        <section class="about_core_slider mb-5">
                            <div class="circle--slider">
                                <div class="rotate--circle">
                                    <ul class="circle--rotate" id="circle--rotate">
                                        <li class="block about_red_bg">
                                            <div class="icon">
                                                <i class="{{ $about->quality_image ?? 'fa fa-rocket' }}"></i>
                                                <span>{{ LangTranslate::translate($about->quality_title ?? '',$about->ar_quality_title ?? '') ?? 'Quality' }}</span>
                                            </div>
                                        </li>
                                        <li class="block about_gold_bg">
                                            <div class="icon">
                                                <i class="{{ $about->integrity_image ?? 'fa fa-rocket' }}"></i>
                                                <span>{{ LangTranslate::translate($about->integrity_title ?? '',$about->ar_integrity_title ?? '') ?? 'Integrity' }}</span>
                                            </div>
                                        </li>
                                        <li class="block about_green_bg">
                                            <div class="icon">
                                                <i class="{{ $about->innovation_image ?? 'fa fa-rocket' }}"></i>
                                                <span>{{ LangTranslate::translate($about->innovation_title ?? '',$about->ar_innovation_title ?? '') ?? 'Innovation' }}</span>
                                            </div>
                                        </li>
                                        <li class="block about_blue_bg">
                                            <div class="icon">
                                                <i class="{{ $about->se_image ?? 'fa fa-rocket' }}"></i>
                                                <span>{{ LangTranslate::translate($about->se_title ?? '',$about->ar_se_title ?? '') ?? 'Service Excellence' }}</span>
                                            </div>
                                        </li>
                                        <li class="block about_pink_bg">
                                            <div class="icon">
                                                <i class="{{ $about->cs_image ?? 'fa fa-rocket' }}"></i>
                                                <span>{{ LangTranslate::translate($about->cs_title ?? '',$about->ar_cs_title ?? '') ?? 'Customer Satisfaction' }}</span>
                                            </div>
                                        </li>

                                    </ul>
                                    <div class="animate-wrapper">

                                        <div class="animate">
                                            <div class="animate-img">
                                                <div class="animate-img__in big_about_red_bg">
                                                    <div class="animate-more">
                                                        <div class="animate-title">
                                                            <h4>{{ LangTranslate::translate($about->quality_title ?? '',$about->ar_quality_title ?? '') ?? 'Quality' }}</h4>
                                                        </div>
                                                        <div class="animate-desc">
                                                            <p>{!! LangTranslate::translate($about->quality_description ?? '',$about->ar_quality_description ?? '') ?? 'No Description Found!' !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="animate">
                                            <div class="animate-img">
                                                <div class="animate-img__in big_about_gold_bg">
                                                    <div class="animate-more">
                                                        <div class="animate-title">
                                                            <h4>{{ LangTranslate::translate($about->integrity_title ?? '',$about->ar_integrity_title ?? '') ?? 'Integrity' }}</h4>
                                                        </div>
                                                        <div class="animate-desc">
                                                            <p>{!! LangTranslate::translate($about->integrity_description ?? '',$about->ar_integrity_description ?? '') ?? 'No Description Found!' !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="animate">
                                            <div class="animate-img">
                                                <div class="animate-img__in big_about_green_bg">
                                                    <div class="animate-more">
                                                        <div class="animate-title">
                                                            <h4>{{ LangTranslate::translate($about->innovation_title ?? '',$about->ar_innovation_title ?? '') ?? 'Innovation' }}</h4>
                                                        </div>
                                                        <div class="animate-desc">
                                                            <p>{!! LangTranslate::translate($about->innovation_description ?? '',$about->ar_innovation_description ?? '') ?? 'No Description Found!' !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="animate">
                                            <div class="animate-img">
                                                <div class="animate-img__in big_about_blue_bg">
                                                    <div class="animate-more">
                                                        <div class="animate-title">
                                                            <h4>{{ LangTranslate::translate($about->se_title ?? '',$about->ar_se_title ?? '') ?? 'Service Excellence' }}</h4>
                                                        </div>
                                                        <div class="animate-desc">
                                                            <p>{!! LangTranslate::translate($about->se_description ?? '',$about->ar_se_description ?? '') ?? 'No Description Found!' !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="animate">
                                            <div class="animate-img">
                                                <div class="animate-img__in big_about_pink_bg">
                                                    <div class="animate-more">
                                                        <div class="animate-title">
                                                            <h4>{{ LangTranslate::translate($about->cs_title ?? '',$about->ar_cs_title ?? '') ?? 'Customer Satisfaction' }}</h4>
                                                        </div>
                                                        <div class="animate-desc">
                                                            <p>{!! LangTranslate::translate($about->cs_description ?? '',$about->ar_cs_description ?? '') ?? 'No Description Found!' !!}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="arrow_controls">
                                        <div class="prev"><span><i class="icon-left-arrow"></i></span></div>
                                        <div class="next"><span><i class="icon-right-arrow"></i></span></div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>

    </section>
</div> 
@endsection
@section('page_script')
    <script src="{{asset('frontend/vendor/circle-slider/script.js')}}"></script>
    <script>
        $(window).scroll(function () {
            var scroll = $(window).scrollTop();
            if (scroll >= 120) {
                $(".desktop_menu").addClass("desktop_menu_fixed");
            } else {
                $(".desktop_menu").removeClass("desktop_menu_fixed");
            }
        });
    </script>
@endsection