@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">{{__('destinations.title')}}</h2>
            <ol class="breadcrumb">
                <li><a href="">{{__('destinations.zambia.country')}}</a></li>

            </ol>
        </div>
    </div>
</section>
<!--================Breadcrumb Area =================-->

<!--================ About History Area  =================-->
<section class="about_history_area section_gap" style="background: url('/image/destinations/zambia/destinations-zambia-background.jpg') no-repeat fixed; background-size: cover; padding-top: 50px; color: black;">
    <div class="container white_background">
        <div class="row mb-4">
            <div class="col-md-6 d_flex align-items-center">
                <div class="" style="text-align: justify;">
                    <h2 class="title title_color">{{__('destinations.zambia.country')}}</h2>
                    <h4>{{__('destinations.zambia.gen_info_title')}}</h4>
                    <p>
                        {{__('destinations.zambia.gen_info_text_1')}}
                        <br><br>
                        {{__('destinations.zambia.gen_info_text_2')}}
                        <br><br>
                        {{__('destinations.zambia.gen_info_text_3')}}
                    </p>
                </div>                
            </div>
            <div class="col-md-6">
                <img class="img-fluid" src="/image/destinations/zambia/1-map-of-zambia.png" alt="img">
                <br><br>
                <!--<img class="img-fluid" src="/image/destinations/zambia/1.jpg" alt="img">-->
                <img class="img-fluid mb-4" src="/image/destinations/zambia/town.jpg" alt="img">
                <img class="img-fluid" src="/image/destinations/zambia/field.png" 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;">
                    <h2>{{__('destinations.zambia.attr_title')}}</h2>
                    <p>{{__('destinations.zambia.attr_text')}}</p>
                    <!-- <a href="#meet_our_team" class="button_hover theme_btn_two">Meet Our Team</a> -->
                </div>                
            </div>
            <div class="col-md-6">
                <img class="img-fluid" src="/image/destinations/zambia/tourists.jpg" 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;">
                    <h2>{{__('destinations.zambia.water_title')}}</h2>
                    <p>{{__('destinations.zambia.water_text')}}</p>
                    <!-- <a href="#meet_our_team" class="button_hover theme_btn_two">Meet Our Team</a> -->
                </div>                
            </div>
            <div class="col-md-6">
                <img class="img-fluid" src="/image/destinations/zambia/3.jpg" 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;">
                    <h2>{{__('destinations.zambia.lower_title')}}</h2>
                    <p>{{__('destinations.zambia.lower_text')}}</p>
                    <!-- <a href="#meet_our_team" class="button_hover theme_btn_two">Meet Our Team</a> -->
                </div>                
            </div>
            <div class="col-md-6">
                <img class="img-fluid" src="/image/destinations/zambia/4.jpg" alt="img">
            </div>
        </div>


    </div>
</section>
<!--================ About History Area  =================-->
@endsection