@extends('layouts.main')
@section('content')
<!--================Breadcrumb Area =================-->
<section class="breadcrumb_area">
    <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background=""></div>
    <div class="container">
        <div class="page-cover text-center">
            <h2 class="page-cover-tittle">{{ __('about-us.about_us') }}</h2>
            <ol class="breadcrumb">
                <li><a href="index.html">{{ __('about-us.home') }}</a></li>
                <li class="active">{{ __('about-us.about') }}</li>
            </ol>
        </div>
    </div>
</section>
<!--================Breadcrumb Area =================-->

<!--================ About History Area  =================-->
<section class="about_history_area section_gap" style="background: url('/image/background-about.jpg') no-repeat fixed; background-size: cover; padding-top: 50px;">
    <div class="container" style="background-color: white; padding: 30px; opacity: 0.99; max-width: 80%;">
        <div class="row mb-4">
            <div class="col-md-6 d_flex align-items-center">
                <div class=" ">
                    <h2 class="title title_color">{{ __('about-us.about_us') }}</h2>
                    <p style="text-align: justify; color: black; color: black;">{{ __('about-us.local_agency') }}</p>
                </div>
            </div>
            <div class="col-md-6">
                <video width="100%" controls poster="/image/logo/namwel-logo-black.png">
                    <source src="/video/namwel_tours.mp4" type="video/mp4">
                    {{ __('about-us.video') }}
                </video>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-6 d_flex align-items-center">
                <div class="" style="text-align: justify; color: black;">
                    <h2 class="title title_color">{{ __('about-us.our_history') }}</h2>
                    <p>{{ __('about-us.history') }}</p>
                </div>
            </div>
            <div class="col-md-6">
                <img class="img-fluid" src="/image/history.jpg" width="100%" alt="img">
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-6 d_flex align-items-center">
                <div class="" style="text-align: justify; color: black;">
                    <h2 class="title title_color">{{ __('about-us.vision') }}</h2>
                    <p>{{ __('about-us.knowledge') }}</p>
                </div>
            </div>
            <div class="col-md-6">
                <img class="img-fluid" src="/image/our-vision.jpg" width="100%" alt="img">
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="" style="color: black;">
                    <h2 class="title title_color">{{ __('about-us.meet_team') }}</h2>
                    <p class="text-justify">{{ __('about-us.team') }}</p>
                    <div class="row"> 
                        <div class="col-lg-3 col-xs-6">
                            <div class="accomodation_item text-center">
                                <div class="hotel_img">
                                    <img src="image/team/1.jpg" alt="">
                                </div>
                                <a><h4 class="sec_h4">Fernando</h4></a>
                                <h4><small>{{ __('about-us.md') }}</small></h4>
                            </div>
                        </div>
                        <div class="col-lg-3 col-xs-6">
                            <div class="accomodation_item text-center">
                                <div class="hotel_img">
                                    <img src="image/team/2.jpg" alt="">
                                </div>
                                <a><h4 class="sec_h4">Michael</h4></a>
                                <h4><small>{{ __('about-us.tour_consultant_fr') }}</small></h4>
                            </div>
                        </div>
                        <div class="col-lg-3 col-xs-6">
                            <div class="accomodation_item text-center">
                                <div class="hotel_img">
                                    <img src="image/team/3.jpg" alt="">
                                </div>
                                <a><h4 class="sec_h4">Shiwa</h4></a>
                                <h4><small>{{ __('about-us.tour_consultant_en_fr') }}</small></h4>
                            </div>
                        </div>
                        <div class="col-lg-3 col-xs-6">
                            <div class="accomodation_item text-center">
                                <div class="hotel_img">
                                    <img src="image/team/4-2.jpg" alt="">
                                </div>
                                <a><h4 class="sec_h4">Josephina</h4></a>
                                <h4><small>{{ __('about-us.tour_consultant_en') }}</small></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>
<!--================ About History Area  =================-->
@endsection