@extends('layouts.main')
@section('content')

<!--================Banner Area =================-->
<section class="">
    <!-- <div class="booking_table d_flex align-items-center">
        <div class="overlay bg-parallax" data-stellar-ratio="0.9" data-stellar-vertical-offset="0" data-background=""></div>
        <div class="container">
            <div class="banner_content text-center">
                <h6>Your local tour agency in Namibia</h6>
                <h2>Welcome to Namwel Tours & Safaris</h2>
                <p>A specialist in tailor-made trips in southern Africa for those who are fond of adventures. We offer tours throughout the Southern Africa. Amazing destinations with  a variety of safaris, landscape, cultures to see and places for you to experience the African history. We also offer Car Rental and Camping Equipment Rental Services.</p>
                <br>
                <a href="#recommended_trips" class="btn theme_btn button_hover">see our recommended trips</a>
            </div>
        </div>
    </div> -->

    <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
              <!-- <img class="img_slider center" src="/image/banner/banner-1.jpg" alt="First slide"> -->
                <img class="img_slider" src="/image/banner/banner-1-1.jpg" alt="First slide">
                <div class="carousel-caption">
                    <h1 class="title_caption wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="300ms">{{ __('home.welcome') }}</h1>
                    <h1 class="title_caption_2 wow fadeInUp animated" data-wow-duration="500ms" data-wow-delay="500ms" >{{ __('home.tours') }}</h1>
                    <p class="wow slideInRight animated" data-wow-duration="500ms" data-wow-delay="700ms" style="font-size: 20px;">{{__('home.specialty')}}</p>
                    <!-- <a href="#bottom" class="btn theme_btn button_hover">Let us take you on a journey</a> -->
                </div>
            </div>
            <div class="carousel-item">
                <img class="img_slider" src="/image/banner/banner-2.jpg" alt="Second slide">
                <div class="carousel-caption">
                    <h1 class="title_caption wow slideInLeft animated" data-wow-duration="500ms" data-wow-delay="200ms">{{ __('home.wild_kingdom') }}</h1>
                    <p class="title_desc wow fadeInRightBig animated" data-wow-duration="500ms" data-wow-delay="700ms">{{ __('home.etosha') }}</p>
                    <!-- <a href="#recommended_trips" class="btn theme_btn button_hover">see our recommended trips</a> -->
                </div>
            </div>
            <div class="carousel-item">
                <img class="img_slider" src="/image/banner/banner-3.jpg" alt="Third slide">
                <div class="carousel-caption">
                    <h1 class="title_caption wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="200ms">{{ __('home.water') }}</h1>
                    <p class="title_desc wow fadeInUp animated" data-wow-duration="500ms" data-wow-delay="700ms">{{ __('home.seven_wonders') }}</p>
                    <!-- <a href="#recommended_trips" class="btn theme_btn button_hover">see our recommended trips</a> -->
                </div>
            </div>
            <div class="carousel-item">
                <img class="img_slider" src="/image/banner/banner-4.jpg" alt="Fourth slide">
                <div class="carousel-caption">
                    <h1 class="title_caption wow slideInRight animated" data-wow-duration="500ms" data-wow-delay="200ms">{{ __('home.namib_desert') }}</h1>
                    <p class="title_desc wow slideInRight animated" data-wow-duration="500ms" data-wow-delay="700ms">{{ __('home.unique_beauty') }}</p>
                    <!-- <a href="#recommended_trips" class="btn theme_btn button_hover">see our recommended trips</a> -->
                </div>
            </div>
            <div class="carousel-item">
                <img class="img_slider" src="/image/banner/banner-5.jpg" alt="Five slide">
                <div class="carousel-caption wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="200ms">
                    <h1 class="title_caption wow fadeInUp animated" data-wow-duration="500ms" data-wow-delay="700ms">{{ __('home.southern_africa') }}</h1>
                    <p class="title_desc">{{ __('home.discoveries') }}</p>
                    <!-- <a href="#recommended_trips" class="btn theme_btn button_hover">see our recommended trips</a> -->
                </div>
            </div>

            <div class="carousel-item">
                <img class="img_slider" src="/image/banner/banner-6.jpg" alt="Sixth slide">
                <div class="carousel-caption">
                    <h1 class="title_caption wow slideInRight animated" data-wow-duration="500ms" data-wow-delay="200ms">{{ __('home.okavango_delta') }}</h1>
                    <p class="title_desc wow slideInDown animated" data-wow-duration="500ms" data-wow-delay="700ms">{{ __('home.swamps') }}</p>
                    <!-- <a href="#recommended_trips" class="btn theme_btn button_hover">see our recommended trips</a> -->
                </div>
            </div>

        </div>
        <a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">{{ __('home.previous') }}</span>
        </a>
        <a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">{{ __('home.next') }}</span>
        </a>
    </div>
</section> 
<!--================Banner Area =================-->

<!--================ Accomodation Area  =================-->
<section class="section_gap" id="bottom" style="background: url('/image/background.jpg') no-repeat fixed; background-size: cover; padding-top: 50px;">
    <div class="container white_background">
        <div class="text-center">            
            <h2 class="title_color" style="color: black;">{{ __('home.local_agency') }}</h2>
            <br>
            <div class="row">
                <div class="col-sm-4">
                    <div>
                        <img style="width: 100%;" src="/image/banner/banner-7.jpg" alt="Third slide">
                        <center><h3 style="color: black;">{{ __('home.destination') }}</h3></center>
                        <p class="text-justify" style="color: black;">{{ __('home.proposal') }}</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>
                        <img style="width: 100%;" src="/image/banner/banner-8.jpg" alt="Third slide">
                        <center><h3 style="color: black;">{{ __('home.mission') }}</h3></center>
                        <p class="text-justify" style="color: black;">{{ __('home.pride') }}</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>
                        <img style="width: 100%;" src="/image/banner/banner-9.jpg" alt="Third slide">
                        <center><h3 style="color: black;">{{ __('home.packages') }}</h3></center>
                        <p class="text-justify" style="color: black;">{{ __('home.rhythm') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <center><a href="/testimonials" class="btn theme_btn button_hover">{{ __('home.testimonials') }}</a></center>
    </div>
</section>
<!--================ Accomodation Area  =================-->
<section class="section_gap" id="" style="background-color: #49BF4C !important; padding-bottom: 20px;padding-top: 20px;">
    <div class="container">
        <img src="">
        <center><h1 style="color: white;">{{ __('home.tour_operator') }}</h1>
            <p style="color: white;">{{ __('home.experience') }}</p></center>
    </div>
</section>
<!--================ Accomodation Area  =================-->

<!--================ Accomodation Area  =================-->
<section class="section_gap" id="" style="padding-bottom: 20px;padding-top: 20px;">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 cheetah_style">
                <img class="cheetah" src="/image/banner/cheetah.png">
            </div>
            <div class="col-sm-6 social_media_style">
                <h3 style="color: black;">{{ __('home.reach_us') }}</h3>

                <a target="_blank" href="https://www.facebook.com/Namwel-Tours-and-Safaris-101747564657411/" class="sm-icon"><i class="fa fa-facebook-square"></i></a>

                <a target="_blank" href="#"class="sm-icon"><i class="fa fa-twitter"></i></a>

                <a target="_blank" href="https://www.instagram.com/namwel_tours_and_safaris/"class="sm-icon"><i class="fa fa-instagram"></i></a>  

                <a target="_blank" href="https://www.youtube.com/"class="sm-icon"><i class="fa fa-youtube"></i></a>  
            </div>
        </div>
    </div>
</section>
<!--================ Accomodation Area  =================-->
@endsection