@extends('frontend.layouts.main')
@section('main-container')

@section('title','about-us')
    
<!-- ========== MAIN CONTENT ========== -->
<div class="rt-breadcump rt-breadcump-height">
    <div class="rt-page-bg rtbgprefix-cover"
        style="background-image: url({{ asset('assets/frontend/images/backgrounds/bredcump.png') }})"></div>
    <!-- /.rt-page-bg -->
    <div class="container">
        <div class="row rt-breadcump-height">
            <div class="col-12">
                <div class="breadcrumbs-content">
                    <h3>About Us</h3>
                    <div class="breadcrumbs">
                        <span class="divider"><i class="icofont-home"></i></span>
                        <a href="#" title="Home">Home</a>
                        <span class="divider"><i class="icofont-simple-right"></i></span>
                        <a href="#" title="Home">pages</a>
                        <span class="divider"><i class="icofont-simple-right"></i></span>
                        About Us

                    </div><!-- /.breadcrumbs -->
                </div><!-- /.breadcrumbs-content -->
            </div><!-- /.col-12 -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</div><!-- /.rt-bredcump -->

<section class="about-area">
    <div class="rt-design-elmnts rtbgprefix-contain"
        style="background-image: url({{ asset('storage/images/pages/' . $about->image) }})">

    </div><!-- /.rt-design-elmnts -->
    <div class="container">
        <div class="row">
            <div class="col-xl-9 offset-xl-3">
                <div class="rt-section-title-wrapper">
                    <h2 class="rt-section-title">
                        <span>Our Short Story</span>
                        {{ $about->title }}
                    </h2><!-- /.rt-section-title -->

                    {!! $about->content !!}

                </div><!-- /.rt-section-title-wrapper -->
                <div class="section-title-spacer"></div><!-- /.section-title-spacer -->
                <div class="row">
                    <div class="col-lg-3 col-md-4 mx-auto col-sm-6 text-center">
                        <div class="counter-box-2 wow fadeInUp">
                            <div class="counter-thumb">
                                <img src="{{ asset('assets/frontend/images/counter-icons/counter_iocn_4.png') }}"
                                    alt="counter image" draggable="false">
                            </div><!-- /.counter-thumb -->
                            <h5><span class="counter">10</span></h5>
                            <h6>Years Experience</h6>
                        </div><!-- /.counter-box-2 -->
                    </div><!-- /.col-lg-3 -->
                    <div class="col-lg-3 col-md-4 mx-auto col-sm-6 text-center">
                        <div class="counter-box-2 wow fadeInUp" data-wow-duration="1.5s">
                            <div class="counter-thumb">
                                <img src="{{ asset('assets/frontend/images/counter-icons/counter_iocn_5.png') }}"
                                    alt="counter image" draggable="false">
                            </div><!-- /.counter-thumb -->
                            <h5><span class="counter">120</span></h5>
                            <h6>Worldwide Coverage</h6>
                        </div><!-- /.counter-box-2 -->
                    </div><!-- /.col-lg-3 -->
                    <div class="col-lg-3 col-md-4 mx-auto col-sm-6 text-center">
                        <div class="counter-box-2 wow fadeInUp" data-wow-duration="2s">
                            <div class="counter-thumb">
                                <img src="{{ asset('assets/frontend/images/counter-icons/counter_iocn_6.png') }}"
                                    alt="counter image" draggable="false">
                            </div><!-- /.counter-thumb -->
                            <h5><span class="counter">550</span></h5>
                            <h6>Tour Operators</h6>
                        </div><!-- /.counter-box-2 -->
                    </div><!-- /.col-lg-3 -->
                    <div class="col-lg-3 col-md-4 mx-auto col-sm-6 text-center">
                        <div class="counter-box-2 wow fadeInUp" data-wow-duration="2.5s">
                            <div class="counter-thumb">
                                <img src="{{ asset('assets/frontend/images/counter-icons/counter_iocn_7.png') }}"
                                    alt="counter image" draggable="false">
                            </div><!-- /.counter-thumb -->
                            <h5><span class="counter">2,500</span></h5>
                            <h6>Cities available</h6>
                        </div><!-- /.counter-box-2 -->
                    </div><!-- /.col-lg-3 -->
                </div><!-- /.row -->
            </div><!-- /.col-lg-9 -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</section>


<!--

    ========= book area start ============
 -->
<div class="spacer-top"></div><!-- /.spacer-top -->
<section class="book-area">
    <div class="rt-design-elmnts rtbgprefix-contain" style="background-image: url(assets/images/all-img/abt_vec_1.png)">

    </div><!-- /.rt-design-elmnts -->
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="rt-section-title-wrapper">
                    <h2 class="rt-section-title">
                        <span>How We're Different</span>
                        Why Book With Us?
                    </h2><!-- /.rt-section-title -->
                    <p>
                        OTA's (Online Travel Agents) have dominated the market for over 10 years giving consumers
                        headaches for years by
                        attaching hidden fees, giving you a false sense of savings where there really is none due to the
                        OTA agreements that are
                        in place to make sure these companies can never compete against each other, and the use of
                        predictive analytics to boost
                        rates on your vacation based on how many times you search for a specific flight or click on a
                        link.
                    </p>
                </div><!-- /.rt-section-title-wrapper -->
                <div class="section-title-spacer"></div><!-- /.section-title-spacer -->
                <div class="rt-single-icon-box wow fade-in-bottom">
                    <div class="icon-thumb">
                        <img src="assets/images/icons-image/box-icon-1.png" alt="box-icon" draggable="false">
                    </div><!-- /.icon-thumb -->
                    <div class="iconbox-content">
                        <h5>+350,000 Hotels</h5>
                        <p>Pick from a wide array of an ever-growing list of hotels in popular
                            destinations (Over 14 million hotel rooms).</p>
                    </div><!-- /.iconbox-content -->
                </div><!-- /.rt-single-icon-box wow fade-in-bottom -->
                <div class="rt-single-icon-box wow fade-in-bottom" data-wow-duration="1.5s">
                    <div class="icon-thumb">
                        <img src="assets/images/icons-image/box-icon-2.png" alt="box-icon" draggable="false">
                    </div><!-- /.icon-thumb -->
                    <div class="iconbox-content">
                        <h5>World Wide Tour Operators</h5>
                        <p>The six continents are open for the adventures of a lifetime. Go
                            anywhere, any place, anytime..</p>
                    </div><!-- /.iconbox-content -->
                </div><!-- /.rt-single-icon-box wow fade-in-bottom -->
                <div class="rt-single-icon-box wow fade-in-bottom" data-wow-duration="2s">
                    <div class="icon-thumb">
                        <img src="assets/images/icons-image/box-icon-3.png" alt="box-icon" draggable="false">
                    </div><!-- /.icon-thumb -->
                    <div class="iconbox-content">
                        <h5>Access to 9,300 Private Resorts</h5>
                        <p>Giving you access to the world's most luxurious members only resorts.Go anywhere, any place,
                            anytime.</p>
                    </div><!-- /.iconbox-content -->
                </div><!-- /.rt-single-icon-box wow fade-in-bottom -->
                <div class="rt-single-icon-box wow fade-in-bottom" data-wow-duration="2.5s">
                    <div class="icon-thumb">
                        <img src="assets/images/icons-image/box-icon-4.png" alt="box-icon" draggable="false">
                    </div><!-- /.icon-thumb -->
                    <div class="iconbox-content">
                        <h5>All major Cruise Lines</h5>
                        <p>Glide through the waters of the five oceans, river cruises
                            and luxury cruises.</p>
                    </div><!-- /.iconbox-content -->
                </div><!-- /.rt-single-icon-box wow fade-in-bottom -->
            </div><!-- /.col-lg-9 -->
        </div><!-- /.row -->
    </div><!-- /.container -->
</section>


<!--
    ============= Cta area start==========
 -->
<div class="spacer-bottom"></div><!-- /.spacer-bottom -->
<section class="rt-cta-area">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div
                    class="cta-box-2 d-flex flex-column align-items-center justify-content-center bg-gradient-primary">
                    <div class="row">
                        <div class="col-lg-7 mx-auto">
                            <div class="rt-section-title-wrapper text-white text-center">
                                <h2 class="rt-section-title">
                                    <span>Save Time, Save Money</span>
                                    Let’s Get Started
                                </h2><!-- /.rt-section-title -->
                                <p>We have the knowledge, experience, and expertise to take care of all your travel
                                    needs.
                                    Sign up and we'll send the best deals to you </p>
                                <div class="section-title-spacer"></div><!-- /.section-title-spacer -->
                                <a href="#" class="rt-btn rt-light pill rt-xl rt-Bshadow-1 text-uppercase">Sign
                                    UP</a>
                            </div><!-- /.rt-section-title-wrapper- -->
                        </div><!-- /.col-lg-7 -->
                    </div><!-- /.row -->
                </div><!-- /.inner-content -->
            </div><!-- /.col-12 -->
        </div><!-- /.row -->
    </div><!-- /.container -->


</section>


<!--
    ============= Testimonilas area start==========
 -->
<div class="spacer-top"></div><!-- /.spacer-top -->
<section class="testimonials-area" data-scrollax-parent="true">
    <div class="rt-shape-emenetns-1" style="background-image: url(assets/images/shape-elements/shape-4.png)"
        data-scrollax="properties: { translateY: '-140px' }"></div><!-- /.rt-shape-emenetns-1 -->
    <div class="container">
        <div class="row">
            <div class="col-xl-9 mx-auto text-center">
                <div class="rt-section-title-wrapper">
                    <h2 class="rt-section-title">
                        <span>testimonials</span>
                        What Our Customers Say
                    </h2><!-- /.rt-section-title -->
                    <p>
                        We have many happy customers that have booked holidays with us.Some Impresions from our
                        Customers! Please read some of the lovely things our Customers say about us.
                    </p>
                </div><!-- /.rt-section-title-wrapper -->
            </div><!-- /.col-lg-9 -->
        </div><!-- /.row -->
        <div class="section-title-spacer"></div><!-- /.section-title-spacer -->
        <div class="row">
            <div class="col-lg-12 mx-auto">
                <div class="testimoninal-active-1">

                    @foreach (getTestimonials() as $testimonialKey=>$testimonial)
                            
                    <div class="singleTbox-1 text-center {{ $testimonialKey==0 ? 'active' : 'inactive' }} position-{{ $testimonialKey+1 }}" data-position="position-{{ $testimonialKey+1 }}">
                        <div class="testi-thumb">
                            <div class="inner-bg"
                                style="background-image: url({{ asset('storage/images/testimonials/'.$testimonial->image) }})">
                            </div><!-- /.inner-bg -->
                            <span class="social-badge"><i class="fab fa-linkedin-in    "></i></span>
                        </div>
                        <!-- /.testi-thumb -->
                        <div class="autor-bio">
                            <h5>{{ $testimonial->name }} </h5>
                            <p>{{ $testimonial->created_at->format('d M Y') }}</p>
                            <span class="rating">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </span>
                        </div><!-- /.autor-bio -->
                        <div class="inner-content">
                            <p>
                               {{ $testimonial->text }}
                            </p>
                        </div><!-- /.inner-content -->
                    </div>

                    @endforeach

                </div><!-- /.testimoninal-active-1 -->
            </div><!-- /.col-lg-7 -->
        </div><!-- /.row -->
        <div class="rt-divider style-one rt-margin-top"></div><!-- /.divider -->
    </div><!-- /.containe -->
</section>



<!--
    ============= Brands area start==========
 -->

<div class="spacer-top"></div><!-- /.spacer-top -->
<section class="brands-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 mx-auto text-center">
                <div class="rt-section-title-wrapper">
                    <h2 class="rt-section-title">
                        <span>Take a Look at Our</span>
                        Trusted Partners
                    </h2><!-- /.rt-section-title -->
                    <p>
                        We are committed to being the best partner.Emigrar believes in being your trusted partner and
                        earning that trust through
                        confidence and performance in service and support.
                    </p>
                </div><!-- /.rt-section-title-wrapper -->
            </div><!-- /.col-lg-9 -->
        </div><!-- /.row -->
        <div class="section-title-spacer"></div><!-- /.section-title-spacer -->
        <div class="row">
            <div class="col-lg-9 mx-auto">
                <ul class="rt-border-brands">
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block">
                            <img src="assets/images/brands/brands-1.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block" data-wow-duration="1s">
                            <img src="assets/images/brands/brands-2.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block" data-wow-duration="1.5s">
                            <img src="assets/images/brands/brands-3.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block" data-wow-duration="2s">
                            <img src="assets/images/brands/brands-4.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block" data-wow-duration="2.5s">
                            <img src="assets/images/brands/brands-4.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block" data-wow-duration="3s">
                            <img src="assets/images/brands/brands-3.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block" data-wow-duration="3.5s">
                            <img src="assets/images/brands/brands-2.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                    <li class="single-border-brands">
                        <a href="#" class="wow flipInX d-block" data-wow-duration="4s">
                            <img src="assets/images/brands/brands-1.png" alt="brands image" draggable="false">
                        </a>
                    </li><!-- /.single-border-brands -->
                </ul><!-- /.rt-border-brands -->
            </div><!-- /.col-lg-7 -->
        </div><!-- /.row -->
    </div><!-- /.containe -->
</section>
<!-- ========== END MAIN CONTENT ========== -->
@endsection