@extends('layouts.master')

@section('aboutactive', 'current-menu-item')

@section('content')



       



<section class="slider">

    <!-- CSS STYLE-->

    <link rel="stylesheet" type="text/css" href="{{asset('template/css/style.css')}}" media="screen" />



    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->

    <script type="text/javascript" src="{{asset('template/rs-plugin/js/jquery.themepunch.plugins.min.js')}}"></script>

    <script type="text/javascript" src="{{asset('template/rs-plugin/js/jquery.themepunch.revolution.min.js')}}"></script>



    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->

    <link rel="stylesheet" type="text/css" href="{{asset('template/rs-plugin/css/settings.css')}}" media="screen" />



    <div class="tp-banner-fullscreen-container" >

        <div class="tp-banner" >

            <ul>

                <!-- SLIDE  -->

                <li data-transition="fade" data-slotamount="9" data-masterspeed="1000" >

                    <!-- MAIN IMAGE -->

                    <img src="{{asset('template/assets/img/page-title/about.jpg')}}"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">



                </li>

                

            </ul>

        </div>

    </div>



        <script type="text/javascript">

                jQuery(document).ready(function() {

                       jQuery('.tp-banner').revolution(

                        {

                            delay:9000,

                            startwidth:1502,

                            startheight:550,

                            hideThumbs:10,

                        });

                });

            </script>

</section>



<!-- Main Content -->

<div id="main-content" class="site-main clearfix">

    <div id="content-wrap" class="bg-color" >

        <div class="bg-color-overlay"></div>





        <section class="container about-us-and-letter-products-" style="padding: 20px">

            <div class="themesflat-spacer clearfix" data-desktop="124" data-mobile="124" data-smobile="60"></div>

            <div class="container-fluid">

                <div class="row">

                    <!-- <img src="template/assets/img/about-us/bg.png" alt="Image" class="bg-about-us"> -->

                    <!-- <div class="col-md-6">

                        <img src="template/assets/img/about-us/img-about-us-3.png" alt="Image" class="img-about-us-left">

                    </div> -->

                    <style type="text/css">

                        .player {

                            background: #2a2a2a;

                            box-sizing: border-box;

                            border-radius: 5px;

                            height: 70px;

                            -moz-box-sizing: border-box;

                            float: left;

                            font-family: Arial, sans-serif;

                            position: absolute;

                            padding: 0;

                            bottom: 20px;

                            z-index: 2;

                            opacity: 1;

                            box-shadow: 0 0 10px rgba(0,0,0,0.3);

                            -webkit-transition: opacity 0.3s ease-in;

                            transition: opacity 0.3s ease-in;

                            -moz-user-select: none;

                            -webkit-user-select: none;

                            user-select: none;

                        }



                        .video {

                            position: relative;

                            margin: 0px auto;

                        }



                        .video:hover .player {

                            opacity: 1;

                        }



                        .player .progress {

                            width: 60%;

                            height: 20px;

                            border-radius: 5px;

                            background: #676767;

                            box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);

                            float: left;

                            cursor: pointer;

                            margin: 24px 0 0 0;

                            padding: 0;

                            position: relative;

                            font-variant: normal;

                        }



                        .player .progress-bar {

                            background: #33b5d5;

                            box-shadow: inset -30px 0px 69px -20px #89f6f5;

                            border-radius: 5px;

                            height: 100%;

                            position: relative;

                            z-index: 999;

                            width: 0;

                        }



                        .player .button-holder {

                            position: relative;

                            left: 10px;

                        }



                        .player .progress-button {

                            background: #fff;

                            box-shadow: 0 0 20px rgba(0,0,0,0.3);

                            border-radius: 30px;

                            width: 20px;

                            height: 20px;

                            position: absolute;

                            left: -20px;

                            text-decoration: overline;

                        }





                        .player [class^="buffered"] {

                            background: rgba(255,255,255,0.1);

                            position: absolute;

                            top: 0;

                            left: 30px;

                            height: 100%;

                            border-radius: 5px;

                            z-index: 1;

                        }



                        .player .play-pause {

                            display: inline-block;

                            font-size: 3em;

                            float: left;

                            text-shadow: 0 0 0 #fff;

                            color: rgba(255,255,255,0.8);

                            width: 10%;

                            padding: 17px 0 0 3%;

                            cursor: pointer;

                            font-variant: small-caps;

                        }



                        .player .play, .player .pause-button {

                            -webkit-transition: all 0.2s ease-out;

                        }



                        .player .play .pause-button, .player .pause .play-button {

                            display: none;

                        }



                        .player .pause-button {

                            padding: 5px 2px;

                            box-sizing: border-box;

                            -moz-box-sizing: border-box;

                            height: 34px;

                        }



                        .player .pause-button span {

                            background: #fff;

                            width: 8px;

                            height: 24px;

                            float: left;

                            display: block;

                        }



                        .player .pause-button span:first-of-type {

                            margin: 0 4px 0 0;

                        }



                        .player .time {

                            color: #fff;

                            font-weight: bold;

                            font-size: 1.2em;

                            position: absolute;

                            right: 0;

                            top: 24px;

                        }



                        .player .stime, .ttime {

                            color: #444;

                        }

                        .player .play:hover {

                            text-shadow: 0 0 5px #fff;

                        }



                        .player .play:active, .pause-button:active span {

                            text-shadow: 0 0 7px #fff;

                        }





                        .player .pause-button:hover span {

                            box-shadow: 0 0 5px #fff;

                        } .player .pause-button:active span {

                            box-shadow: 0 0 7px #fff;

                        }





                        .player .volume {

                            position: relative;

                            float: left;

                            width: 8%;

                            margin: 0 0 0 4%;

                            height: 100%;

                        }



                        .player .volume-icon {

                            padding: 1.5%;

                            height: 100%;

                            cursor: pointer;

                            box-sizing: border-box;

                            -moz-box-sizing: border-box;

                            -webkit-transition: all 0.15s linear;

                        }



                        .player .volume-icon-hover {

                            background-color: #4f4f4f;

                        }



                        .player .volume-holder {

                            height: 100px;

                            width: 100%;

                            background: black;

                            position: absolute;

                            display: none;

                            background: #4f4f4f;

                            left: 0;

                            border-radius: 5px 5px 0 0;

                            top: -100px;

                        }



                        .player .volume-bar-holder {

                            background: #333;

                            width: 20px;

                            box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);

                            margin: 15px auto;

                            height: 80px;

                            border-radius: 5px;

                            position: relative;

                            cursor: pointer;

                        }



                        .player .volume-button {

                            background: #fff;

                            box-shadow: 0 0 20px rgba(0,0,0,0.3);

                            border-radius: 30px;

                            width: 20px;

                            height: 20px;

                        }



                        .player .volume-button-holder {

                            position: relative;

                            top: -10px; 

                        }



                        .player .volume-bar {

                            background: #33b5d5;

                            box-shadow: inset -30px 0px 69px -20px #89f6f5;

                            border-radius: 5px;

                            width: 100%;

                            height: 100%;

                            position: absolute;

                            bottom: 0;

                        }



                        .player .fullscreen {

                            width: 12%;

                            cursor: pointer;

                            float: left;

                            height: 100%;

                        }



                        .player .fullscreen a {

                            width: 25px;

                            height: 20px;

                            border-radius: 3px;

                            background: #fff;

                            display: block;

                            position: relative;

                            top: 23px;

                            margin: 0px auto;

                        }



                        .player .volume-icon span {

                            width: 20%;

                            height: 13%;

                            background-color: #fff;

                            display: block;

                            position: relative;

                            z-index: 1;

                            font-weight: bold;

                            top: 40%;

                            color: #fff;

                            left: 22%;

                        }



                        .player .volume-icon span:before,

                        .player .volume-icon span:after {

                            content: '';

                            position: absolute;

                        }

                        .player .volume-icon span:before {

                            width: 0;

                            height: 0;

                            border: 1em solid transparent;

                            border-left: none;

                            border-right-color: #fff;

                            z-index: 2;

                            top: -2px;

                            left: 10%;

                            margin-top: -40%;

                        }

                        .player .volume-icon span:after {

                            width: 2%;

                            height: 2%;

                            border: 1px solid #fff;

                            left: 190%;

                            border-width: 0px 0px 0 0; 

                            top: 5px;

                            border-radius: 0 50px 0 0;

                            -webkit-transform: rotate(45deg);

                            -moz-transform: rotate(45deg);

                            -ms-transform: rotate(45deg);

                            -o-transform: rotate(45deg);

                             transform: rotate(45deg);

                             font-variant: small-caps;

                         }



                        .player .v-change-11 span:after { border-width: 10px 10px 0 0; top: 0; }

                        .player .v-change-10 span:after { border-width: 9px 9px 0 0; top: 1px; }

                        .player .v-change-9 span:after { border-width: 8px 8px 0 0; top: 1px; }

                        .player .v-change-8 span:after { border-width: 7px 7px 0 0; top: 2px; }

                        .player .v-change-7 span:after { border-width: 6px 6px 0 0; top: 2px; }

                        .player .v-change-6 span:after { border-width: 5px 5px 0 0; top: 3px; }

                        .player .v-change-5 span:after { border-width: 4px 4px 0 0; top: 3px; }

                        .player .v-change-4 span:after { border-width: 3px 3px 0 0; top: 4px; }

                        .player .v-change-3 span:after { border-width: 2px 2px 0 0; top: 4px; }

                        .player .v-change-2 span:after { border-width: 1px 1px 0 0; top: 5px; }

                        .player .v-change-1 span:after { border-width: 0px 0px 0 0; top: 5px; }



                        .player .v-change-1 span:after {

                            content: '+';

                            -webkit-transform: rotate(45deg);

                            font-size: 20px;

                            top: -6px;

                            left: 25px;

                        }



                        .vidimg {

                          position: relative;

                          -webkit-border-radius: 30px;

                          -moz-border-radius: 30px;

                          -ms-border-radius: 30px;

                          border-radius: 30px;

                          overflow: hidden; }

                          .vidimg .play-vid {

                            position: absolute;

                            left: 50%;

                            top: 50%;

                            -webkit-transform: translate(-50%, -50%);

                            -ms-transform: translate(-50%, -50%);

                            transform: translate(-50%, -50%);

                            width: 72px !important;

                            height: 72px !important;

                            background-color: #2E8ECE;

                            -webkit-border-radius: 50%;

                            -moz-border-radius: 50%;

                            -ms-border-radius: 50%;

                            border-radius: 50%;

                            display: table-cell;

                            padding-top: 13px;

                            padding-left: 7px;

                            text-align: center;

                            vertical-align: middle;

                            line-height: 3.5; }

                            .vidimg .play-vid a {

                              color: #ffffff; }

                            .vidimg .play-vid:hover {

                              background-color: #212635; }

                    </style>

                    <div class="container">
                        <div class="vidimg col-md-6" style="float: left !important;">

                            <div class="play-vid" style="float: left !important;">

                                <a class="popup-youtube"  href="https://www.youtube.com/watch?v=2Qd4E1fMYds"><span class="fa fa-play fa-2x playvid"></span></a>

                            </div>

                            <img src="template/assets/img/about-us/about2.jpg" alt="" class="img-responsive">
                            

                        </div>
                        <p style="font-size: 16px; text-align: justify;">
                            Dans la région des savanes, bon nombre de familles essentiellement paysannes éprouvent des difficultés dans le financement de la scolarité de leurs enfants. 
                            <br>
                            L’ONG IT-VILLAGE pour qui l’éducation est un levier de développement a donc pensé à une ou plusieurs activité(s) génératrice(s) de revenu dans l’optique d’aider les paysans afin qu’ils soient aptes à soutenir financièrement le cursus scolaire de leurs enfants.
                            La région des savanes est une zone hautement mellifère. IT VILLAGE a décidé de faire
                            davantage de cette ressource naturelle existante sur place un levier de développement
                            en passant par la restructuration de cette filière apicole.
                            Ceci en s’appuyant sur les ressources humaines locales (les paysans apiculteurs) et les
                            ressources techniques et financières apportées par la DAZ.
                        </p>
                        
                    </div>
                        
                     

                        
                        
                    
                        


                        {{--
                        <div class="col-md-6" style="padding-top: 20px !important">

                            <img src="template/assets/img/about-us/about.jpg" alt="Image" style="float: left !important; padding-right: 20px !important;">

                        </div>

                        

                        <div class="col-md-6" style="padding-top: 20px !important">

                            <h2 class="heading"><a href="javascript:void(0)">H<span class="color-span-2">istorique</span></a> </h2>

                            <p style="text-align: justify !important;"> 

                                

                                <span style="text-align: justify !important;">Face à la précarité financière des paysans ayant des enfants à charge , IT-Village a pensé à une ou plusieurs activité(s) génératrice(s) de revenu pouvant remplacer le bradage des récoltes. L’apiculture, une activité qui se fait à temps partiel a été choisie. Le projet ‘’Miel des Savanes’’ initié en 2009 vient donc en appui aux paysans sur le plan matériel et organisationnel. L'ONG IT VILLAGE rachète ce miel auprès des apiculteurs à un prix avantageux. Ces derniers ont ainsi assez de ressources pour assurer la scolarisation de leurs enfants. L’organisation travaille avec environ 2000 apiculteurs mobilisés en groupements dans les zones de Mango, Barkoissi, Borgou et Papri . </span> <br> 


                            </p>

                            
                            

                        </div>
                        --}}

                    

                </div>

            </div>

        </section>



        <section class="work ">

            <div class="themesflat-spacer clearfix" data-desktop="110" data-mobile="110" data-smobile="60"></div>

            <!-- <div class="themesflat-headings style-1 wow fadeInUp ">

                <div class="heading">Qui sommes nous</div>

                <h5 class="sub-heading">Le miel des savanes est un projet de l'ONG IT village basé à Dapaong au nord du Togo en collaboration avec  DAZ e.v. en Allemagne. Le miel des savanes est certifié par le célèbre Institut allemand de l'apiculture de Celle. <br>

                Nos cinq variétés de miel proviennent du nectar des fleurs de la savane profonde.

                L'apiculture y est pratiquée depuis des générations avec beaucoup de passion comme activité de subsistance par des paysans vivant dans l'extrême pauvreté.</h5>

            </div>   --> 

            <div class="container">

                <div class="row" style="justify-content: center;">

                    <div class="col-md-6">

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/1.png" alt="Image">

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/2.png" alt="Image">

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/3.png" alt="Image">

                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="box-work text-center wow fadeInDown">

                            <img src="template/assets/img/4.png" alt="Image">

                        </div>

                    </div>

                    



                    

                </div>

            </div>

        </section>









    </div><!-- /#content-wrap -->

</div><!-- /#main-content -->



@endsection