{% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}


{% block stylesheets %}
{{ parent() }}
 <link rel="stylesheet" href="{{ asset('themes/coworking/css/reservation.css') }}" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" integrity="sha512-rd0qOHVMOcez6pLWPVFIv7EfSdGKLt+eafXh4RO/12Fgr41hDQxfGvoi1Vy55QIVcQEujUE1LQrATCLl2Fs+ag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

     <!-- Bootstrap -->
   
   <style>

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  margin-top:10px;
  margin-bottom:10px;
  background-color:#FFF;
}

.card:hover {
  box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card > .card-inner {
  padding:10px;
}
.card .header h2, h3 {
  margin-bottom: 0px;
  margin-top:0px;
}
.card .header {
  margin-bottom:5px;
}
.card img{
  width:100%;
}
.titleQuiSommeNous:after {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    background: #c6c9ce;
    margin: 0;
    margin-top: 15px;
    border-radius: 3px;
    
}
    .container.mobile-version{
        display: none;
    }
    
    
    




    @media (max-width:767px) {

        .container.laptop-version {
            display: none;
        }
        .container.mobile-version{
            display: block !important;
        }
        .titleQuiSommeNous {
        font-size: 28px!important;
        }
        .titleActiviteForMobile{
           font-size: 13px !important;
        }
        .textActiviteForMobile{
            font-size: 10px !important;
            line-height: 12px !important;
        }
        .seconRowFromMobile{
               margin-top: 0rem!important;
        }
         .mgForMobile{
               margin-top: 0rem!important;
        }
        .card-img {
            padding-top: 15px !important;
        }
         
         
        
    }
    
    
    /**/
    

.testim {
		width: 100%;
		/*position: absolute;*/
		top: 50%;
		-webkit-transform: translatey(-50%);
		-moz-transform: translatey(-50%);
		-ms-transform: translatey(-50%);
		-o-transform: translatey(-50%);
		transform: translatey(-50%);
}

.testim .wrap {
    position: relative;
    width: 100%;
    max-width: 1020px;
    padding: 40px 20px;
    margin: auto;
}

.testim .arrow {
    display: block;
    position: absolute;
    color: #333;
    cursor: pointer;
    font-size: 2em;
    top: 50%;
    -webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
    -webkit-transition: all .3s ease-in-out;    
    -ms-transition: all .3s ease-in-out;    
    -moz-transition: all .3s ease-in-out;    
    -o-transition: all .3s ease-in-out;    
    transition: all .3s ease-in-out;
    padding: 5px;
    z-index: 22222222;
}

.testim .arrow:before {
		cursor: pointer;
}

.testim .arrow:hover {
    color: rgb(223,177,80);
}
    

.testim .arrow.left {
    left: 70px;
}

.testim .arrow.right {
    right: 70px;
}

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 60px;
    left: 0;
    display: block;
    z-index: 3333;
		height: 12px;
}

.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid black;
    margin: 0 10px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;    
    -ms-transition: all .5s ease-in-out;    
    -moz-transition: all .5s ease-in-out;    
    -o-transition: all .5s ease-in-out;    
    transition: all .5s ease-in-out;
		position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: rgb(223,177,80);
    border-color: rgb(223,177,80);
}

.testim .dots .dot.active {
    -webkit-animation: testim-scale .5s ease-in-out forwards;   
    -moz-animation: testim-scale .5s ease-in-out forwards;   
    -ms-animation: testim-scale .5s ease-in-out forwards;   
    -o-animation: testim-scale .5s ease-in-out forwards;   
    animation: testim-scale .5s ease-in-out forwards;   
}
    
.testim .cont {
    position: relative;
		overflow: hidden;
}

.testim .cont > div {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 70px 0;
    opacity: 0;
}

.testim .cont > div.inactive {
    opacity: 1;
}
    

.testim .cont > div.active {
    position: relative;
    opacity: 1;
}
    

.testim .cont div .img img {
    display: block;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 50%;
}

.testim .cont div h2 {
    color: #DFB150;
    font-size: 1em;
    margin: 15px 0;
}

.testim .cont div p {
    font-size: 1.15em;
    color: #333;
    width: 70%;
    margin: auto;
}

.testim .cont div.active .img img {
    -webkit-animation: testim-show .5s ease-in-out forwards;            
    -moz-animation: testim-show .5s ease-in-out forwards;            
    -ms-animation: testim-show .5s ease-in-out forwards;            
    -o-animation: testim-show .5s ease-in-out forwards;            
    animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
    -webkit-animation: testim-content-in .4s ease-in-out forwards;    
    -moz-animation: testim-content-in .4s ease-in-out forwards;    
    -ms-animation: testim-content-in .4s ease-in-out forwards;    
    -o-animation: testim-content-in .4s ease-in-out forwards;    
    animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;    
    -moz-animation: testim-content-in .5s ease-in-out forwards;    
    -ms-animation: testim-content-in .5s ease-in-out forwards;    
    -o-animation: testim-content-in .5s ease-in-out forwards;    
    animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
    -webkit-animation: testim-hide .5s ease-in-out forwards;            
    -moz-animation: testim-hide .5s ease-in-out forwards;            
    -ms-animation: testim-hide .5s ease-in-out forwards;            
    -o-animation: testim-hide .5s ease-in-out forwards;            
    animation: testim-hide .5s ease-in-out forwards;            
}

.testim .cont div.inactive h2 {
    -webkit-animation: testim-content-out .4s ease-in-out forwards;        
    -moz-animation: testim-content-out .4s ease-in-out forwards;        
    -ms-animation: testim-content-out .4s ease-in-out forwards;        
    -o-animation: testim-content-out .4s ease-in-out forwards;        
    animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;    
    -moz-animation: testim-content-out .5s ease-in-out forwards;    
    -ms-animation: testim-content-out .5s ease-in-out forwards;    
    -o-animation: testim-content-out .5s ease-in-out forwards;    
    animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -webkit-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -webkit-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-moz-keyframes testim-scale {
    0% {
        -moz-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -moz-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -moz-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-ms-keyframes testim-scale {
    0% {
        -ms-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -ms-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -ms-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -ms-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-o-keyframes testim-scale {
    0% {
        -o-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -o-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -o-box-shadow: 0px 0px 10px 5px #ea830e;        
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        -o-box-shadow: 0px 0px 0px 0px #ea830e;        
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@keyframes testim-scale {
    0% {
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        box-shadow: 0px 0px 10px 5px #ea830e;        
    }

    100% {
        box-shadow: 0px 0px 0px 0px #ea830e;        
    }
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -moz-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -ms-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -o-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);        
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -moz-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -ms-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
    }
}

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
}

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        transform: scale(1);       
    }
}

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        transform: scale(0);
    }
}

@media all and (max-width: 300px) {
	body {
		font-size: 14px;
	}
}

@media all and (max-width: 500px) {
	.testim .arrow {
		font-size: 1.5em;
	}
	
	.testim .cont div p {
		line-height: 25px;
	}

}



/***/
.card-img{
    height: 100px;
}   

h6.card-title.p-2 {
    color: #685017;
}

a {
    color: #A69D8D;
}
a:hover{
    color: #A69D8D;

}
</style>
  
{% endblock  %}
{% block body %}
 

 
 

 
  {#<img src="{{asset('uploads/front-images/bannier-apropos.png')}}" style="width: 100%;" class="img-efluid imageForDesktop" />#}


<div class="imageForDesktop text-center" style="
        background-image: url(/uploads/front-images/bannier-apropos.png);
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
        height: 350px;"
    >
			<h1 class="" style="color:white;padding-top:10%;text-transform: initial;font-size: 45px;font-weight: 700;">À propos de nous</h1>
			<small style="color:white;">
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    			sed dLorem ipsum dolor sit amet,<br> consectetur adipiscing elit,
    			sed dooLorem ipsum dolor sit amet
			</small>
</div>
											
    <div class="container laptop-version" style="margin-top:93px; ">
                    <div class="row">
                        	 <a href="https://www.melliber-apparthotel.com" id="HotelAppart" target="_blank" style="color: #a5a5a5;">
                    	        <div class="col-lg-12 " style="display: flex;">
                    	    		 <div class="col-lg-7 col-sm-12"> 
                    	    
                    	    		        <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titleQuiSommeNous"> Qui sommes nous ? </h1>
                    	 
                    	    		  
                    	    		    	<p class="mt-3" style="text-align: justify;">
                            			
                            			  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed dLorem ipsum dolor sit amet,
                                                    consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, 
                                                    consectetur adipiscing elit, sed dLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet,
                                                    consectetur adipiscing elit, sed dLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit, 
                                                    sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit
                                                    , sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dLorem ipsum dolor sit amet.
                            				
                            				</p>
                    	    		 </div> 
                    	    		 <div class="col-lg-5 col-sm-12">
                    	    		
                    	    		       <img src="/themes/coworking/front/images/picture_Meliber.png" style="width: 100%;" alt="picture_Meliber"> 
                    	    		 
                    	    		    
                    	    		 </div> 
                                </div>
                                </a>
			        </div>
		        </div>
		        
	<div class="container mobile-version" style="margin-top:93px; ">
                    <div class="row">
                	     <div class="col-lg-12 ">
                        	    	
                        	    		 
                        	    		<div class="col-lg-5 col-sm-12">
                        	    		 <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titleQuiSommeNous"> Qui sommes nous ?   </h1>

                        	    		    <img src="/themes/coworking/front/images/picture_Meliber.png" style="width: 100%;" alt="picture_Meliber"> 
                        	    		 </div> 
                        	    		 <div class="col-lg-7 col-sm-12"> 
                        	    		    	<p class="mt-3" style="">
                                			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed dLorem ipsum dolor sit amet,
                                                    consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, 
                                                    consectetur adipiscing elit, sed dLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet,
                                                    consectetur adipiscing elit, sed dLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit, 
                                                    sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit
                                                    , sed dLorem ipsum dolor sit amet, consectetur adipiscing elit, sed dooLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit,
                                                    sed dLorem ipsum dolor sit amet.
                                				</p>
                        	    		 </div> 
                        	    		  
                </div>
			        </div>
		        </div>
  <div class="container mt-5">
  
                <div class="col-lg-12 text-center mt-5">
                     <h1 style="font-size: 34px;color: black;" class="Presse">  Les activités du groupe   </h1>
                     <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit</small>
                 </div>
  </div>
    <article style="background-image: url(/uploads/front-images/activiteGroupe.png);height: 650px;background-repeat: no-repeat;">
        <div class="container" style="padding-top: 10%;">
            <div class="row">
                 

                            <div class="col-lg-6 col-sm-12" style="display:flex;">
					<div class="col-lg-3  img-produit" style="">
					    <a href="https://www.futuris-logistics.com" target="_blank">
						    <img src="/uploads/front-images/4.png" class="card-img" alt="Image" >
						</a>
					</div>
					<div class="col-lg-9">
					    <a href="https://www.futuris-logistics.com" target="_blank">
							<h6 class="card-title p-2 titleActiviteForMobile" style="font-weight: bold;">Futuris Logistics</h6>
							<p class="card-text p-2 textActiviteForMobile" style="font-size:14px;margin: 0px 0 0 0;text-align: justify;line-height: 20px;">
							    Location d’entrepôts et de bureaux de diverses tailles en pleine zone industrielle Ain Sebaa à Casablanca.
							</p>
						</a>
					</div>	
        		</div>
                <div class="col-lg-6 col-sm-12 mgForMobile" style="display:flex; margin-top: 5%;">
				
					<div class="col-lg-9">
					     <a href="https://www.melliber-apparthotel.com" target="_blank">
							<h6 class="card-title p-2 titleActiviteForMobile" style="font-weight: bold;text-align: right;">Melliber Appart & Hotel </h6>
							<p class="card-text p-2 textActiviteForMobile" style="font-size:14px;margin: 0px 0 0 0;text-align: right;line-height: 20px;">
							    Location d’entrepôts et de bureaux de diverses tailles en pleine zone industrielle Ain Sebaa à Casablanca.
							</p>
						</a>
					</div>
						<div class="col-lg-3  img-produit"  style="display: flex;">
						 <a href="https://www.melliber-apparthotel.com" target="_blank">
						    <img src="/uploads/front-images/2.png" class="card-img" alt="Image" >
						</a>
					</div>
        		</div>
            </div>
            
             <div class="row mt-5 seconRowFromMobile">
                <div class="col-lg-6 col-sm-12" style="display:flex;">
					<div class="col-lg-3  img-produit" style="">
					    <a href="https://www.wazohotel.com" target="_blank">
						    <img src="/uploads/front-images/1.png" class="card-img" alt="Image" >
						</a>
					</div>
					<div class="col-lg-9">
					     <a href="https://www.wazohotel.com" target="_blank">
							<h6 class="card-title p-2 titleActiviteForMobile" style="font-weight: bold;">Wazo Hôtel & Apparts</h6>
							<p class="card-text p-2 textActiviteForMobile" style="font-size:14px;margin: 0px 0 0 0;text-align: justify;line-height: 20px;">
							    Location d’entrepôts et de bureaux de diverses tailles en pleine zone industrielle Ain Sebaa à Casablanca.
							</p>
						</a>
					</div>	
        		</div>
                <div class="col-lg-6 col-sm-12 mgForMobile" style="display:flex; margin-top: 5%;">
    			
    				    
    					<div class="col-lg-9">
    					    	<a href="https://www.association-oumkeltoum.com" target="_blank">
        							<h6 class="card-title p-2 titleActiviteForMobile" style="font-weight: bold;text-align: right;">Fondation Oum Keltoum</h6>
        							<p class="card-text p-2 textActiviteForMobile" style="font-size:14px;margin: 0px 0 0 0;text-align: right;line-height: 20px;">
        							    La fondation Oum Keltoum est un organisme à but non lucratif reconnu d’utilité publique et fondé en 2007. 
        							    Son objectif est de permettre à la population de Sidi Moumen d’avoir accès aux piliers fondamentaux des besoins de l’Humain tels que la santé, 
        							    l’éducation, la culture ou encore son intégration en assurant sa propre sécurité financière.
        							</p>
    							</a>
    					</div>
    					<div class="col-lg-3  img-produit"  style="display: flex;">
    					    <a href="https://www.association-oumkeltoum.com" target="_blank">
    					        <img src="/uploads/front-images/3.png" class="card-img" alt="Image" >
    					    </a>
    				    </div>
        		</div>
            </div>
        </div>
    </article>
  
  
    <div class="container d-none">
     <div class="row">       
     
     <div class="col-lg-12 text-center mt-5 mb-3">
         <h1 style="font-size: 34px;color: black;" class="Presse">  Presse   </h1>
         <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit</small>
     </div>
        <div class="col-sm-4">
          <div class="card">
            <div class="image">
              <img src="http://loremflickr.com/320/150?random=4" />
            </div>
            <div class="card-inner">
              <div class="header">
               
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum  2024 </strong>
                <br>
                <small>
                    Lorem ipsum dolorLorem ipsum dolorLorem ipsum  2024 lorem Lorem ipsum dolor
                    Lorem ipsum dolorLorem ipsumLorem ipsum dolorLorem ipsum dolorLorem ipsum  
                    2024 lorem Lorem ipsum dolorLorem ipsum dolorLorem ipsumrem Lorem ipsum d
                </small>
            </div>
            <div class="content">
              <a href="#">Lire la suite </a>
            </div>
              </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card">
            <div class="image">
              <img src="http://loremflickr.com/320/150?random=1" />
            </div>
            <div class="card-inner">
              <div class="header">
               
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum  2024 </strong>
                <br>
                <small>
                    Lorem ipsum dolorLorem ipsum dolorLorem ipsum  2024 lorem Lorem ipsum dolor
                    Lorem ipsum dolorLorem ipsumLorem ipsum dolorLorem ipsum dolorLorem ipsum  
                    2024 lorem Lorem ipsum dolorLorem ipsum dolorLorem ipsumrem Lorem ipsum d
                </small>
            </div>
            <div class="content">
              <a href="#">Lire la suite </a>
            </div>
              </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card">
            <div class="image">
              <img src="http://loremflickr.com/320/150?random=3" />
            </div>
            <div class="card-inner">
              <div class="header">
               
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum  2024 </strong>
                <br>
                <small>
                    Lorem ipsum dolorLorem ipsum dolorLorem ipsum  2024 lorem Lorem ipsum dolor
                    Lorem ipsum dolorLorem ipsumLorem ipsum dolorLorem ipsum dolorLorem ipsum  
                    2024 lorem Lorem ipsum dolorLorem ipsum dolorLorem ipsumrem Lorem ipsum d
                </small>
            </div>
            <div class="content">
              <a href="#">Lire la suite </a>
            </div>
              </div>
          </div>
        </div>
           <div class="col-sm-4">
          <div class="card">
            <div class="image">
              <img src="http://loremflickr.com/320/150?random=6" />
            </div>
            <div class="card-inner">
              <div class="header">
               
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum  2024 </strong>
                <br>
                <small>
                    Lorem ipsum dolorLorem ipsum dolorLorem ipsum  2024 lorem Lorem ipsum dolor
                    Lorem ipsum dolorLorem ipsumLorem ipsum dolorLorem ipsum dolorLorem ipsum  
                    2024 lorem Lorem ipsum dolorLorem ipsum dolorLorem ipsumrem Lorem ipsum d
                </small>
            </div>
            <div class="content">
              <a href="#">Lire la suite </a>
            </div>
              </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card">
            <div class="image">
              <img src="http://loremflickr.com/320/150?random=5" />
            </div>
            <div class="card-inner">
              <div class="header">
               
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum  2024 </strong>
                <br>
                <small>
                    Lorem ipsum dolorLorem ipsum dolorLorem ipsum  2024 lorem Lorem ipsum dolor
                    Lorem ipsum dolorLorem ipsumLorem ipsum dolorLorem ipsum dolorLorem ipsum  
                    2024 lorem Lorem ipsum dolorLorem ipsum dolorLorem ipsumrem Lorem ipsum d
                </small>
            </div>
            <div class="content">
              <a href="#">Lire la suite </a>
            </div>
              </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card">
            <div class="image">
              <img src="http://loremflickr.com/320/150?random=7" />
            </div>
            <div class="card-inner">
              <div class="header">
               
                <strong>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum  2024 </strong>
                <br>
                <small>
                    Lorem ipsum dolorLorem ipsum dolorLorem ipsum  2024 lorem Lorem ipsum dolor
                    Lorem ipsum dolorLorem ipsumLorem ipsum dolorLorem ipsum dolorLorem ipsum  
                    2024 lorem Lorem ipsum dolorLorem ipsum dolorLorem ipsumrem Lorem ipsum d
                </small>
            </div>
            <div class="content">
              <a href="#">Lire la suite </a>
            </div>
              </div>
          </div>
        </div>
 </div>
 </div>
 <article  style="background-image: url(/uploads/front-images/bgTemoinage.png);background-repeat: no-repeat;
">
     

      <div class="container text-center mt-5" style="padding-top: 5%;">
          <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="temoignages">Témoignages </h1> 
          <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit</small>
      </div>
 
        <div class="containerW">
        <section id="testim" class="testim" style="margin-top: 15%;">
             <div class="testim-cover">
                <div class="wrap">
    
                    <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
                    <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
                    <ul id="testim-dots" class="dots">
                        <li class="dot active"></li><!--
                        --><li class="dot"></li><!--
                        --><li class="dot"></li><!--
                        --><li class="dot"></li><!--
                        --><li class="dot"></li>
                    </ul>
                    <div id="testim-content" class="cont">
                        
                        <div class="active">
                            <div class="img"><img src="https://in.bmscdn.com/iedb/artist/images/website/poster/large/kartik-aaryan-1045198-08-12-2017-06-34-11.jpg" alt=""></div>
                            <h2>Lorem P. Ipsum</h2>
                            <p>
                                Notre volonté est d’être le meilleur allié du Boulanger Pâtissier au Maroc et en Afrique.
                                Un partenaire de premier rang pour accompagner votre réussite.<br>
                                <strong>Lorem ipsum</strong><br>
                                <small>Lorem ipsum</small>
                            </p>   
                            
                        </div>
    
                        <div>
                            <div class="img"><img src="https://timesofindia.indiatimes.com/thumb/msid-75752690,width-800,height-600,resizemode-4/75752690.jpg" alt=""></div>
                            <h2>Mr. Lorem Ipsum</h2>
                          
                            <p>
                                Notre volonté est d’être le meilleur allié du Boulanger Pâtissier au Maroc et en Afrique.
                                Un partenaire de premier rang pour accompagner votre réussite.<br>
                                <strong>Lorem ipsum</strong><br>
                                <small>Lorem ipsum</small>
                            </p> 
                            </div>
    
                        <div>
                            <div class="img"><img src="https://p16.muscdn.com/img/musically-maliva-obj/1627333501517830~c5_720x720.jpeg" alt=""></div>
                            <h2>Lorem Ipsum</h2>
                            
                            <p>
                                Notre volonté est d’être le meilleur allié du Boulanger Pâtissier au Maroc et en Afrique.
                                Un partenaire de premier rang pour accompagner votre réussite.<br>
                                <strong>Lorem ipsum</strong><br>
                                <small>Lorem ipsum</small>
                            </p> 
                            
                             </div>
    
                        <div>
                            <div class="img"><img src="https://p16-sg-default.akamaized.net/aweme/1080x1080/tiktok-obj/1666413671597057.jpeg" alt=""></div>
                            <h2>Lorem De Ipsum</h2>
                            
                            <p>
                                Notre volonté est d’être le meilleur allié du Boulanger Pâtissier au Maroc et en Afrique.
                                Un partenaire de premier rang pour accompagner votre réussite.<br>
                                <strong>Lorem ipsum</strong><br>
                                <small>Lorem ipsum</small>
                            </p> 
                            
                             </div>
    
                        <div>
                            <div class="img"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSKLJe1Lrz2N3ufVSwQokSJ79jGBbIptXuVnsdxMmNUlE14ohwp&usqp=CAU" alt=""></div>
                            <h2>Ms. Lorem R. Ipsum</h2>
                          
                          <p>
                                Notre volonté est d’être le meilleur allié du Boulanger Pâtissier au Maroc et en Afrique.
                                Un partenaire de premier rang pour accompagner votre réussite.<br>
                                <strong>Lorem ipsum</strong><br>
                                <small>Lorem ipsum</small>
                            </p> 
                           </div>
    
                    </div>
    
                </div>
             </div>
        </section>
    </div>
  </article>
 <br><br>
       
{% endblock %}






{% block javascripts %}
  <!-- MAIN CONTENT -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
  

// vars
'use strict'
var	testim = document.getElementById("testim"),
		testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
    testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
    testimLeftArrow = document.getElementById("left-arrow"),
    testimRightArrow = document.getElementById("right-arrow"),
    testimSpeed = 4500,
    currentSlide = 0,
    currentActive = 0,
    testimTimer,
		touchStartPos,
		touchEndPos,
		touchPosDiff,
		ignoreTouch = 30;
;

window.onload = function() {

    // Testim Script
    function playSlide(slide) {
        for (var k = 0; k < testimDots.length; k++) {
            testimContent[k].classList.remove("active");
            testimContent[k].classList.remove("inactive");
            testimDots[k].classList.remove("active");
        }

        if (slide < 0) {
            slide = currentSlide = testimContent.length-1;
        }

        if (slide > testimContent.length - 1) {
            slide = currentSlide = 0;
        }

        if (currentActive != currentSlide) {
            testimContent[currentActive].classList.add("inactive");            
        }
        testimContent[slide].classList.add("active");
        testimDots[slide].classList.add("active");

        currentActive = currentSlide;
    
        clearTimeout(testimTimer);
        testimTimer = setTimeout(function() {
            playSlide(currentSlide += 1);
        }, testimSpeed)
    }

    testimLeftArrow.addEventListener("click", function() {
        playSlide(currentSlide -= 1);
    })

    testimRightArrow.addEventListener("click", function() {
        playSlide(currentSlide += 1);
    })    

    for (var l = 0; l < testimDots.length; l++) {
        testimDots[l].addEventListener("click", function() {
            playSlide(currentSlide = testimDots.indexOf(this));
        })
    }

    playSlide(currentSlide);

    // keyboard shortcuts
    document.addEventListener("keyup", function(e) {
        switch (e.keyCode) {
            case 37:
                testimLeftArrow.click();
                break;
                
            case 39:
                testimRightArrow.click();
                break;

            case 39:
                testimRightArrow.click();
                break;

            default:
                break;
        }
    })
		
		testim.addEventListener("touchstart", function(e) {
				touchStartPos = e.changedTouches[0].clientX;
		})
	
		testim.addEventListener("touchend", function(e) {
				touchEndPos = e.changedTouches[0].clientX;
			
				touchPosDiff = touchStartPos - touchEndPos;
			
				console.log(touchPosDiff);
				console.log(touchStartPos);	
				console.log(touchEndPos);	

			
				if (touchPosDiff > 0 + ignoreTouch) {
						testimLeftArrow.click();
				} else if (touchPosDiff < 0 - ignoreTouch) {
						testimRightArrow.click();
				} else {
					return;
				}
			
		})
}

  </script>
{% endblock %}