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

{% block body %}

<link rel="shortcut icon" href="{{asset("themes/coworking/images/logo-black.png")}}" />
<link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

 <style>
 
 a:hover { 
  text-decoration: none; 
}


.cardsMobile {
       display: none;
}
.cardsDesktop {
       display: block;
}
 
	        .img-container{
            padding-top:12px;
        }
        .img-bureaux{
            object-fit:cover;
            width:100%;
            height:100%;
        }
    

        select:required:invalid {
           color: #666;
           background-color:rgba(232, 232, 234, 1);
        }
        option[value=""][disabled] {
            display: none;
        }
        option {
            color: #000;
            
        }
        .image-for-brx{
            z-index:0; 
            margin-left:-50px; 
        }
        .text-for-brx{
            z-index:1; 
            padding:27px 30px 30px 40px; 
            margin-left:70px; 
            background-color:white; 
            filter:drop-shadow(0 12px 33px rgba(0, 0, 0, 0.05));
        }

        .card-brx{
            padding: 18px 5px 18px 5px;
        }
    
        @media(max-width:991px){
            .text-for-brx{
                margin-left:0; 
            }
            .image-for-brx{
                margin:auto;
            }
        }
        @media only screen and (max-width: 1200px) {
            .img-container{
                height:70vh;
                width:100%;
                padding:0;
            }
            
          
        }
        
        button.btn.btn-formulaire {
            background: #FCD46B;
            color: white;
            font-weight: 500;
            border-radius: 0px;
            text-transform: uppercase;
            font-size: 13px;
            padding-left: 20px;
            padding-right: 25px;
        }
        
        button.btn.btn-formulaire:hover{
             background: #ffffff40;
        }
        button.btn.btn-date {
            background: #ffffff40;
            border: 1px solid white;
            color: white;
            font-weight: 500;
            border-radius: 0px;
            text-transform: uppercase;
            font-size: 13px;
           
        }
        
          button.btn.btn-date:hover{
            background: #ffd86e;
        }

       
       
          .divMobile{
            display:none;
        }
        
            .container.mobile-version{
                display: none;
            }
        
            @media (max-width:767px) {
                
                .container.laptop-version {
                    display: none;
                }
                .container.mobile-version{
                    display: block !important;
                }
                html, body {
                  overflow-x: hidden  !important;
                }
                body {
                  position: relative !important;
                }
             .bureaux-desc{
                display:flex;
                justify-content: center; 
             }
             .btn-res{
                margin-top: 10px;
             }
            
             
                .image-section{
            display:inline;
            }
             .image-for-brx{
                margin:auto;
            }
            .text-for-brx{
                margin-left:0; 
            }
            
            .w-75 {
                width:100% !important;
            }
            
        .divDesktop{
            display:none;
        } 
        .divMobile{
            display:block;
        }
        
        .cardsMobile {
       display: block;
        }
        
         .cardsDesktop {
       display: none;
        }
        
        .flip-card-inner {
   
            width: 170px;
            height: 170px;
        }
        
        button.btn.btn-formulaire {
            background: #FCD46B;
            color: white;
            font-weight: 500;
            border-radius: 0px;
            text-transform: uppercase;
            font-size: 13px;
            padding-left: 20px;
            padding-right: 25px;
            position: relative;
            top: -55px;
        }
      
      .w-50{
          width:80% !important;
      }
      iframe{
          width:100% !important;
         
      }
      
      .p-5 {
          padding: 0rem!important;
      }
      .gmap_canvas{
        width: 322px !important;
        }
        
        	#formForMobile {
        	    width:100% !important;
        	}
        	
        	
        	  .flip-card-inner {
   
            width: 170px !important;
            height: 270px!important;
        }
        
        .flip-card {
        width: 170px !important;
        height: 250px;
       
        }
       .flip-card-front {
           padding-top: 25%;
           
       }
        
      }
   
     	
        	textarea::placeholder , input.w-100::placeholder {
              color: #62626285 !important;
            }   
    


.textPatchword{
  /**/
  font-family: "Montserrat", Sans-serif;
}
/* Grid System: Settings */
.grid-settings {
  position: fixed; 
  width: 200px;
  top: 80px;
  right: 20px; 
  z-index: 9999; 
}

/* Grid System: Grids */
.grid-system {
  text-align: center;
  position: fixed;
  right: 0;
  left: 0; 
  margin-right: auto;
  margin-left: auto;
  height: 100vh;
  z-index: 1;
  visibility: visible;
}
.grid-system div[class^="col-"] {
    border-left: 1px dotted rgba(0, 0, 0, 0.2);
    height: 100vh;
}
.grid-system div[class^="col-"]:last-child {
    border-right: 1px dotted rgba(0, 0, 0, 0.2);
}
.grid-system .col-div {
    background-color: rgba(0, 0, 0, 0.025);
    border: none !important; 
    padding-top: 15px; 
    color: rgba(0, 0, 0, 0.3);
}

/* Grid System: Light Theme */
.grid-system.light .col-div { 
  background-color: rgba(255, 255, 255, 0.025); 
  color: rgba(255, 255, 255, 0.3);
}
.grid-system.light div[class^="col-"], 
.grid-system.light div[class^="col-"]:last-child { 
  border-color: rgba(255, 255, 255, 0.2);
}

/* FOR DEMO PURPOSES ONLY: */
.bg-dark h1, .bg-dark h2 {
  color: #fff;
}
.bg-dark p {
  color: rgba(255, 255, 255, .5);
}
.grid-settings .card-body p {
  color: #212529;;
}
    
 main{
 /* background: #F6F4FE;*/
      /*background: linear-gradient(#F6F4FE, #908f91);*/
      /*background: linear-gradient(90deg, rgb(227 227 227) 0%, rgba(120,90,157,1) 53%, rgb(77 45 105) 100%);*/
     
 background-image: url(/public/images/fond.png);
 background-size: cover;*/
    background-repeat: no-repeat;
}
 main{
 /* background: #F6F4FE;*/
  padding-top: 1.5%;
   padding-bottom: 2%;
  
}


.fa-linkedin{
  color: #1565C0;
  font-size: 30px;
 /* float:right; */
}
.btn-light{
    background: white;
    border-radius: 54px;
    padding: 15px 30px;
    width: 200px;
    font-weight: 500;
}

#divBg {    
   
     background-position: right 5% bottom 50%;
  /*background-image: url(/public/images/bgBackground.png);*/
      background-size: cover;
     /* position: absolute;*/
      top: 0px;
      right: 0px;
      bottom: 0px;
     
}





.Img{
 width:600px;
 height:200px;
}
.logo{
   width: 30%;
}


 .btn-light{
   position: relative;
    top: 100%;
}
@media only screen and (max-width: 600px) {
  .btn-light{
    background: white;
    border-radius: 54px;
    padding: 15px 1px;
    width: 150px;
    font-weight: 500;
}
.Img{
    width:100%;
}
.logo{
    width:40%;
}
.btn-light{
   position: relative;
    top:0;
}
 
}

 @import url('https://fonts.cdnfonts.com/css/montserrat');
 @import url('https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/demo/css/montserrat-bold.ttf'); 
 
 p,button{  font-family: 'Montserrat', sans-serif;
}
 
h1{  
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

 
/* css For whatsap**/

.wrapperX {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: auto;
  max-width: 800px;
}



.titlePourQuoi:after {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    background: #c6c9ce;
    margin: 0;
    margin-top: 15px;
    border-radius: 3px;
    
}

.bloc-text-a-propos-right {
  position: relative;
  right: 30px;
  height: 185px;
}

      
       #brochure{
           padding-left: 7px!important;
       }
       
       i.fa-regular.fa-map
       {
       padding-left: 15px!important;
       }

    .flip-card {
      background-color: transparent;
      width: 300px;
      height: 300px;
      perspective: 1000px;
    }
    
    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 75%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
    
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    
    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .flip-card-front {
      background-color: rgba(255, 255, 255, 1);
      color: black;
    }
    
    .flip-card-back {
      background-color: #ffffff;
      color: white;
      transform: rotateY(180deg);
    }
    
    #hideHeaderInPageHome{
        display:none !important;
    }
    
    
    
/***/
/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body { font-family: sans-serif; }

.gallery {
  background: #EEE;
}

.gallery-cell {
  width: 350px;
  height: 200px;
  margin-right: 10px;
  /*background: #8C8;*/
  /*counter-increment: gallery-cell;*/
}

/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  /*content: counter(gallery-cell);*/
  line-height: 200px;
  font-size: 80px;
  color: white;
}



.flickity-enabled.is-draggable .flickity-viewport {

    height: 270PX !important;
}
.flickity-page-dots{
    display:none;
}
.fw-light p {
   margin: 0px 0 0 0;
}

#HotelAppart{
    text-decoration: none !important;
}

    .mapouter{position:relative;height:400px;width:430px}
    .gmap_canvas{overflow:hidden;height:400px;width:430px}
    .gmap_canvas iframe{position:relative;z-index:2}
    .gmap_canvas a{top:0;z-index:0}
    
    
    #mapArea {
      pointer-events: none; /* Initially disable pointer events on the map area */
    }
    
    
    @media only screen and (max-width: 600px) {
        
         #kitty-drop li ul li {
            line-height: 30px !important;
            padding-left: 10px !important;
        }
        #btniconMobile {
            display: inline-block !important;
        }

        
        
        #kitty-drop{
            padding: 0px !important;
        }
        #kitty-drop li{
            padding: 0px 0px !important;
            white-space: nowrap !important;
        }
        #kitty-drop li {
        margin-right: -60px !important;
        
        }
        #kitty-drop li ul li {
                    line-height: 30px !important;
            padding-left: 10px !important;
        }
    }
</style>

{#<div style=" box-shadow:0 0 12px 6px rgba(0, 0, 0, 0.06); height:fit-content;" >#}
     
{#                          <div class="text-center p-2 text-white" style="#}
{#                                          background-color:rgba(255, 216, 110, 1);#}
{#                                          background-image:linear-gradient(to left,rgba(175, 119, 34, 1),rgba(255, 216, 110, 0.6), rgba(255, 216, 110, 0.6));">#}
{#                                            <div class="fw-light" style="font-family: 'Archivo', sans-serif; font-size:14px;">#}
{#                                               {{contentPageHome.banner|raw()}} #}
                                               
{#                                            </div>#}
{#                            </div> #}
                            
{#                            <div class="wrapper">#}
{#                                <div class="head-wrapper">#}
{#                                    <ul class="my-auto info col-md-4 col-sm-4 list-unstyled align-items-center text-dark" style="font-size: 15px; font-weight:300; font-family:'Archivo', sans-serif;">#}
{#                                        <li style="display: inline-flex;">#}
{#                                            <a href="https://www.facebook.com/profile.php?id=61551253435716&mibextid=LQQJ4d" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-facebook"></i></a> #}
{#                                            <a href="https://instagram.com/coworkandlive?igshid=MzRlODBiNWFlZA" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-instagram"></i></a>#}
{#                                            <a href="https://www.linkedin.com/company/cowork-live" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-linkedin"></i></a>#}
{#                                        </li>#}
                                           
{#                                    </ul>#}
{#                                    <div class="col-sm-8 hidden-col">#}
{#                                    </div>#}
{#                                    <div class="logo col-sm-8 col-md-auto mb-2 justify-content-center mb-md-0" style="display: inline-flex;">#}
{#                                        <a href="{{path("front_home")}}">#}
{#                                               <img class="img-fluid w-100" src="{{asset("themes/coworking/front/images/logoCowork.png")}}"  alt="logoCowork">#}
{#                                        </a>#}
                                        
{#                                         <ul id="kitty-drop">#}
{#                                            <li>A propos#}
{#                                                <ul>#}
{#                                                  <li>Présentation</li>#}
{#                                                  <li>Presse</li>#}
{#                                                </ul>#}
{#                                            </li>#}
{#                                        </ul>#}
                                         
{#                                    </div>#}

{#                                    <div class="nav-link col-sm-4 align-self-start_ text-end">#}
                                        
{#                                               <!-- <a href="{{path("login_register")}}" class="text-dark my-auto" style="text-decoration:none; font-size: 13px; font-family:'Libre Franklin', sans-serif; letter-spacing:2px;"> #}
{#                                                    Mon compte#}
{#                                                </a>-->#}
                                                
                                                {#<button type="button"   class="btn btn-outline-warning" style="border-radius: 28px;width=48%;"><i href="{{path("login_register")}}" class="text-mute" style="text-decoration: none;color:black;">Mon compte<i class="fa-solid fa-user" style="margin-left: 5%;"></i></button>#}
{#                                                <button type="submit" class="btn btn-outline-warning"id="btniconDisktop" style="border-radius: 28px;height: 42px;width: 51%;"><a href="#" style="text-decoration: none;color:black;">Mon compte<i class="fa-solid fa-user" style="margin-left: 5%;"></i></a></button>#}
{#                                                <a id="btniconMobile" href="#"style="text-decoration: none;color:black;"><i class="fa-solid fa-user" style="margin-left: 5%;font-size:30px;;margin-top:25%;"></i></a>#}
                                            
                                            
                                            
{#                                    </div>#}
{#                                </div>#}
{#                            </div>#}
                          
                      
{#                        </div>#}
                        
                        
                        
                        
                        <div style=" box-shadow:0 0 12px 6px rgba(0, 0, 0, 0.06); height:fit-content;">
     
                          {#<div class="text-center p-2 text-white" style="#}
                          {#                background-color:rgba(255, 216, 110, 1);#}
                          {#                background-image:linear-gradient(to left,rgba(175, 119, 34, 1),rgba(255, 216, 110, 0.6), rgba(255, 216, 110, 0.6));">#}
                          {#                  <div class="fw-light" style="font-family: 'Archivo', sans-serif; font-size:14px;">#}
                          {#                    {{contentPageHome.banner|raw()}}  #}
                          {#                  </div>#}
                          {#  </div> #}
                            
                            <div class="wrapper">
                                <div class="head-wrapper">
                                    <ul class="my-auto info col-md-4 col-sm-4 list-unstyled align-items-center text-dark" style="font-size: 15px; font-weight:300; font-family:'Archivo', sans-serif;">
                                        <li style="display: inline-flex;">
                                            <a href="https://www.facebook.com/profile.php?id=61551253435716&mibextid=LQQJ4d" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-facebook"></i></a> 
                                            <a href="https://instagram.com/coworkandlive?igshid=MzRlODBiNWFlZA" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-instagram"></i></a>
                                            <a href="https://www.linkedin.com/company/cowork-live" target="_blank" style="margin-right: 4px;background: #dfb150;border-radius: 50%;height: 30px;width: 30px;display: flex;justify-content: center;align-items: center;color:white"> <i class="fa-brands fa-linkedin"></i></a>
                                        </li>
                                           
                                    </ul>
                                    <div class="col-sm-8 hidden-col">
                                    </div>
                                    <div class="logo col-sm-8 col-md-auto mb-2 justify-content-center mb-md-0" style="display: inline-flex;">
                                      
                                        <a href="{{path("front_home")}}">
                                               <img class="img-fluid w-100" src="{{asset("themes/coworking/front/images/logoCowork.png")}}" >
                                        </a>    
                                        {#   <div class="btn-group">#}
                                        {#  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">#}
                                        {#    A propos#}
                                        {#  </button>#}
                                        {#  <div class="dropdown-menu">#}
                                        {#    <a class="dropdown-item" href="#">Présentation </a>#}
                                        {#        <div class="dropdown-divider"></div>#}
                                        {#    <a class="dropdown-item" href="#">Presse </a>#}
                                        {#</div>#}
                                        {#</div>#}
                                        {#<ul id="kitty-drop" style="z-index: 9999999;">#}
                                        {#    <li>A propos#}
                                        {#        <ul>#}
                                        {#          <li>Présentation</li>#}
                                        {#          <li>Presse</li>#}
                                        {#        </ul>#}
                                        {#    </li>#}
                                        {#</ul>#}
                                    </div>

                                    <div class="nav-link col-sm-4 align-self-start__ text-end">
                                        
                                               <!-- <a href="{{path("login_register")}}" class="text-dark my-auto" style="text-decoration:none; font-size: 13px; font-family:'Libre Franklin', sans-serif; letter-spacing:2px;"> 
                                                    Mon compte
                                                </a>-->
                                                
                                                {#<button type="button"   class="btn btn-outline-warning" style="border-radius: 28px;width=48%;"><i href="{{path("login_register")}}" class="text-mute" style="text-decoration: none;color:black;">Mon compte<i class="fa-solid fa-user" style="margin-left: 5%;"></i></button>#}
                                                <button type="button" class="btn btn-outline-warning"id="btniconDisktop" style="border-radius: 28px;height: 42px;width: 51%;"><a href="#" style="text-decoration: none;color:black;">Mon compte<i class="fa-solid fa-user" style="margin-left: 5%;"></i></a></button>
                                                <a id="btniconMobile" href="#"style="text-decoration: none;color:black;"><i class="fa-solid fa-user" style="margin-left: 5%;font-size:30px;;margin-top:25%;"></i></a>
                                            
                                            
                                            
                                    </div>
                                </div>
                            </div>
                          
                      
                        </div>
 
 <div class="row divDesktop">
  <div class="col-sm-4 mb-3 mb-sm-0" style="position: relative;background-image:url({{asset('themes/coworking/front/images/pictureBureaux.png')}});background-repeat: no-repeat;background-size: 100% 100%;position: relative;height: 405px;">
  
					    	<a href="{{path('reservationbureaux')}}" style="position: absolute;bottom: 20px;left: 40%;">
        						<button class="btn btn-formulaire">
        						{{"RÉSERVER"|trans({},"front")}}	
        						</button>
						</a>
				
  </div>
 <div class="col-sm-4 mb-3 mb-sm-0" style="position: relative;background-image:url({{asset('themes/coworking/front/images/picture_SalleReunion.png')}});background-repeat: no-repeat;background-size: 100% 100%;position: relative;height:  405px;">
  	
					    	<a href="{{path('reservationsallereuninon')}}" style="position: absolute;bottom: 20px;left: 40%;">
        						<button class="btn btn-formulaire" >
        						{{"RÉSERVER"|trans({},"front")}}
        						</button>
						</a>
				
  </div>
  <div class="col-sm-4 mb-3 mb-sm-0" style="position: relative;background-image:url({{asset('uploads/front-images/BackgroudFreework.png')}});background-repeat: no-repeat;background-size: 100% 100%;position: relative;height:  405px;">
  
					    	<a href="{{path('reservationfreework')}}" style="position: absolute;bottom: 20px;left: 40%;">
        						<button class="btn btn-formulaire">
        						{{"RÉSERVER"|trans({},"front")}}
        						</button>
						</a>
				
  </div>
</div>
	 

	
		<div class="divMobile">
	        <div>
                <div class="col-md-12" style="background-image:url({{asset('uploads/front-images/bgHeaderMobile.png')}});">
                    
                    
                    
                    <div class="d-flex align-items-center justify-content-center">
                        <img src="{{asset('uploads/front-images/bgBureauxMobile.png')}}"   alt="bgBureauxMobile" style="width:100%;margin-top:5%;">
                    </div>
                    <div class="d-flex align-items-center justify-content-center">
                     <a href="{{path('reservationbureaux')}}"><button class="btn btn-formulaire">RÉSERVER</button></a>
                    </div>
                    
                    
                    
                       <div class="d-flex align-items-center justify-content-center">
                        <img src="uploads/front-images/bgSalleReunionMobile.png"    alt="bgSalleReunionMobile" style="width:100%;">
                    </div>
                    <div class="d-flex align-items-center justify-content-center">
                     <a href="{{path('reservationsallereuninon')}}"><button class="btn btn-formulaire">RÉSERVER</button></a>
                    </div>
                    
                    
                       <div class="d-flex align-items-center justify-content-center">
                        <img src="{{asset('uploads/front-images/bdFreeworkMobile.png')}}"  alt="bdFreeworkMobile"   style="width:100%;">
                    </div>
                    <div class="d-flex align-items-center justify-content-center">
                     <a href="{{path('reservationfreework')}}"><button class="btn btn-formulaire">RÉSERVER</button></a>
                    </div>
                  
                </div>
                
            </div>
        </div>
  </div>
  
  
  
  
    <div class="container" style="margin-top:93px; ">
                    <div class="row">
                	     <div class="col-lg-12" style="display: flex;background: #fbf9ed;padding: 30px;">
            			
            				<div class="col-lg-12">
            					<div>
            					 <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titlePourQuoi">{{contentPageHome.firstTitleSection}} </h1>
            					
            						<div>
            							<i>
            								<p class="font-italic p-3" style="font-size:13px;">
            							                        {#Opter pour Cowork&Live c’est choisir avant tout une solution complète pour tout nouvel entrepreneur. <br>#}
                                           {# 					En effet, tous les ingrédients indispensables pour les premières phases de croissance d’une nouvelle entité sont réunies.<br>#}
                                           {# 					La force d’un réseau d’acteurs divers permettront aux uns et autres de se compléter mutuellement, l’un détient le financement, #}
                                           {# 					le second détient l’idée,les autres se proposant d’être les partenaires comptables, juridiques, ou réseau de fournisseurs ou clients, #}
                                           {# 					le tout formant ainsi une réelle synergie. De plus, ces ingrédients clés sont présents dans un environnement adapté au travail,#}
                                           {# 					c’est à dire qu’on y trouve des places de travail adaptées à divers besoins et répondant tout aussi bien aux budgets#}
                                           {# 					les plus faibles mais également aux besoins spécifiques exigeants grâce à des offres multiples et flexibles.<br>#}
                                           {# 					Il est ainsi possible de travailler en espace ouvert, isolé, ou en réunion. Il est même possible d’organiser des expositions de produits ou services.<br>#}
                                           {# 					Et puisque l’efficacité au travail devient encore plus forte lorsque on y ajoute plusieurs annexes allant du Fitness au salon de bien être en passant par le restaurant, #}
                                           {# 					l’expérience de travailler, se réunir, et collaborer au Cowork&Live devient complète. Tout se fait au même endroit de votre arrivée le matin à votre départ le soir,#}
                                           {# 					ou même un départ le lendemain puisque vous pouvez passez la nuit au Melliber Appart Hôtel.<br>#}
                                           {#                     Nous vous invitons à parcourir notre site web pour en savoir davantage.	#}
                                                                
                                                     {#{{contentPageHome.firstTextSection|raw()}}      #}
                                                     
                                                      {#{{contentPageHome.firstTextSection|raw()|trans({},"front")}}   #}
                                                                {{contentPageHome.firstTextSection|raw()}}     
                                                                </p>
            							</i>
            						</div>
            					</div>
    </div>
		
                        	    		 
                </div>
			        </div>
		        </div>
  
  
  
<!-- Flickity HTML init -->
<div class="gallery js-flickity" data-flickity-options='{ "wrapAround": true,"autoPlay": 800 }'>
    {% for gallery in contentPageHome.gallerieHomes %}
          <div class="gallery-cell">
              	<img src="uploads/coworking/detail/{{gallery.path}}" width="100%" alt="" />
          </div>
  
	{% endfor %}
</div>


  
		<div class="container-fluid" style="margin-top:93px; ">
	    	{#<div style="height:2px; width:30px; background-color: rgba(0, 0, 143, 1); margin-left: auto; margin-right: auto;"></div>#}
	    	<div class="text-center" style="padding-top: 20px;">
					<h1 style="font-size: 34px;color: black;margin-bottom:22px;">Nos atouts</h1>
				</div>
	  
			

			</div>


	
    <div class="container-fluid pb-3 cardsDesktop">
		<div class="row gy-3 gx-0 m-auto">
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("uploads/front-images/24_72.png")}}" alt="24_72" >
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					     {{contentPageHome.textCard1}}  
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                        {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="uploads/front-images/24_72.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					    {{contentPageHome.textFlipCard1|raw()}}
					</p>
                    </div>
                  </div>
                </div>
			</div>
			
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" src="{{asset("themes/coworking/front/images/icon_LOCALISATION.png")}}" style="width: 40%!important;" alt="icon_LOCALISATION">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					     {{contentPageHome.textCard2}}


    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                         {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_LOCALISATION.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					  
                            {{contentPageHome.textFlipCard2|raw()}}
					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" src="{{asset("themes/coworking/front/images/icon_NAPROOM.png")}}" style="width: 40%!important;"  alt="icon_NAPROOM">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					 
                                {{contentPageHome.textCard3}}

    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                         {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_NAPROOM.png">#}
                        
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					         {{contentPageHome.textFlipCard3|raw()}}
					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("uploads/front-images/PARKING2.png")}}" alt="PARKING2">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {{contentPageHome.textCard4}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                          {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="uploads/front-images/PARKING2.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					     {{contentPageHome.textFlipCard4|raw()}}

					</p>
                    </div>
                  </div>
                </div>
			</div>
		</div>

	</div>
	<div class="container-fluid pb-3 cardsDesktop">
		<div class="row gy-3 gx-0 m-auto">
		  <div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("uploads/front-images/FITNESS.png")}}" alt="icon_FITNESS">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {{contentPageHome.textCard5}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                          {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="uploads/front-images/FITNESS.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   {#Bornes d’arcade mises à disposition et salle de fitness et de musculation accessibles 24h/24#}
					   
					   
					   {{contentPageHome.textFlipCard5|raw()}}
					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3"  style="width: 40%!important;" src="{{asset("themes/coworking/front/images/icon_RESTAURATION.png")}}" alt="icon_RESTAURATION">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {{contentPageHome.textCard6}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                      {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_RESTAURATION.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {#Petit déjeuner, snacking, cuisine internationale et room service disponibles 24h/24 et 7j/7#}
    					   
    					   {{contentPageHome.textFlipCard6|raw()}}
    					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("themes/coworking/front/images/icon_STAND.png")}}" alt="icon_STAND">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					  {{contentPageHome.textCard7}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                        {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_STAND.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   {#Organisation d’événements de type vernissages, expositions mais également de salons liés a des thématiques professionnelles. #}
					   
					   	   {#{{contentPageHome.textCard7}}#}
					   	   
					   	   {{contentPageHome.textFlipCard7|raw()}}
					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner">
                     
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("uploads/front-images/17.png")}}"   alt="17">   
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {{contentPageHome.textCard8}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                         {#<img class="img-fluid w-25 pt-3"style="width: 40%!important;"  src="uploads/front-images/17.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					    {#Espace accessible à l’intérieur de l’hôtel, institut de beauté et accès au spa avec hammam&massage. #}
					    
					    {#{{contentPageHome.textFCard8}}#}
					    
					    {{contentPageHome.textFlipCard8|raw()}}

					</p>
                    </div>
                  </div>
                </div>
			</div>
			<!--<div class="w-100 d-none d-block "></div>-->
			
		</div>

	</div>
	<div class="container-fluid pb-3 cardsDesktop">
		<div class="row gy-3 gx-0 m-auto">
		  <div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("uploads/front-images/kitchenette5.png")}}" alt="kitchenette5">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {{contentPageHome.textCard9}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                          {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="uploads/front-images/FITNESS.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   {#Bornes d’arcade mises à disposition et salle de fitness et de musculation accessibles 24h/24#}
					   
					   
					   {{contentPageHome.textFlip9|raw()}}
					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3"  style="width: 40%!important;" src="{{asset("uploads/front-images/networking3.png")}}"  alt="networking3">
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {{contentPageHome.textCard10}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 5%;">
                      {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_RESTAURATION.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {#Petit déjeuner, snacking, cuisine internationale et room service disponibles 24h/24 et 7j/7#}
    					   
    					   {{contentPageHome.textFlip10|raw()}}
    					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("uploads/front-images/services5etoiles.png")}}"  alt="services5etoiles" >
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					  {{contentPageHome.textCard11}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 10%;">
                        {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_STAND.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   
					   	   
					   	   {{contentPageHome.textFlip11|raw()}}
					</p>
                    </div>
                  </div>
                </div>
			</div>
			<div class="col-12 col-sm-6 col-md-3 text-center ">
			    <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner">
                     
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("uploads/front-images/prixAttractifs2.png")}}"  alt="prixAttractifs2"  >
                        <p class="" style="font-weight:500; font-size:15px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {{contentPageHome.textCard12}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back" style="position: relative;padding-top: 28%;">
                         {#<img class="img-fluid w-25 pt-3"style="width: 40%!important;"  src="uploads/front-images/17.png">#}
                     	<p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					    
					    
					    {{contentPageHome.textFlip12|raw()}}

					</p>
                    </div>
                  </div>
                </div>
			</div>
			<!--<div class="w-100 d-none d-block "></div>-->
			
		</div>

	</div>

 <div class="cardsMobile" style="background-color:rgba(178, 78, 69, 0.04)">
	<div class="col-sm-12 text-center mt-5 cardsMobile">
				
					<span class="divider-text mb-5"></span>
					<div class="" style=" padding-top: 30px;">
						<div class="row text-center d-flex justify-content-center">
							<div class="col-6">
								  <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("themes/coworking/front/images/icon_NAPROOM.png")}}uploads/front-images/24_72.png" alt="24_72" >
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {#Accessible 24h/24 7j/7 #}
    					    
    					     {{contentPageHome.textCard1}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                        {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="uploads/front-images/24_72.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					    {#Espace sécurisé, accessible par badge, tous les services sont accessibles. #}
					     {{contentPageHome.textFlipCard1|raw()}}
					</p>
                    </div>
                  </div>
                </div>
							</div>
							<div class="col-6">
							     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;"src="{{asset("themes/coworking/front/images/icon_NAPROOM.png")}}themes/coworking/front/images/icon_LOCALISATION.png" alt="icon_LOCALISATION" >
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {#Emplacement unique à Casablanca  #}
    					    {{contentPageHome.textCard2}}


    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                         {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_LOCALISATION.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					  
                            {#À 2 pas de la mosquée Hassan 2 , en face de la foire d’exposition de Casablanca, proche du centre ville et du centre d’affaire de la Marina.#}
                             {{contentPageHome.textFlipCard2|raw()}}
					</p>
                    </div>
                  </div>
                </div>
							</div>
								<div class="col-6">
								   <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("themes/coworking/front/images/icon_NAPROOM.png")}}themes/coworking/front/images/icon_NAPROOM.png" alt="icon_NAPROOM" >
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					 
                                {#Nap room  #}
                                {{contentPageHome.textCard3}}

    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                         {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="themes/coworking/front/images/icon_NAPROOM.png">#}
                        
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					         {#Chambres de l’hôtel accessible individuellement pendant la journée pour se reposer#}
					         
					          {{contentPageHome.textFlipCard3|raw()}}
					</p>
                    </div>
                  </div>
                </div>
								   </div> 
								    	<div class="col-6">
								    	     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" style="width: 40%!important;" src="{{asset("themes/coworking/front/images/icon_NAPROOM.png")}}uploads/front-images/PARKING2.png" alt="PARKING2" >
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {#L’accès au parking privé #}
    					    {{contentPageHome.textCard4}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                          {#<img class="img-fluid w-25 pt-3" style="width: 40%!important;"  src="uploads/front-images/PARKING2.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					     {#Deux emplacements de parking disponibles, un privé au sous-sol  et l’autre situé à l’extérieur en face de l’hôtel melliber.#}
					      {{contentPageHome.textFlipCard4|raw()}}

					</p>
                    </div>
                  </div>
                </div>
								    </div>	    
						
						
						</div>
																																																																																									</div>
																																																																																									</div>
		<div class="col-sm-12 text-center mt-2 cardsMobile">
					
					<span class="divider-text mb-5"></span>
					<div class="" style="">
						<div class="row text-center d-flex justify-content-center">
							<div class="col-6">
								 <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" src="{{asset("uploads/front-images/FITNESS.png")}}" style="width: 40%!important;" alt="icon_FITNESS">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {#Gaming & Fitness #}
    					   {{contentPageHome.textCard5}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                          {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="uploads/front-images/FITNESS.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   {#Bornes d’arcade mises à disposition et salle de fitness et de musculation accessibles 24h/24#}
					   
					   {{contentPageHome.textFlipCard5|raw()}}

					</p>
                    </div>
                  </div>
                </div>
							</div>
							<div class="col-6">
							     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" src="{{asset("themes/coworking/front/images/icon_RESTAURATION.png")}}" style="width: 40%!important;" alt="icon_RESTAURATION">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {#Restauration    #}
    					   {{contentPageHome.textCard6}}
    					</p> 
                    </div>
                   
                    <div class="flip-card-back">
                      {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_RESTAURATION.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {#Petit déjeuner, snacking, cuisine internationale et room service disponibles 24h/24 et 7j/7#}
    					   
    					   {{contentPageHome.textFlipCard6|raw()}}
    					</p>
                    </div>
                  </div>
                </div>
							</div>
							<div class="col-6">
							     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" src="{{asset("themes/coworking/front/images/icon_STAND.png")}}" style="width: 40%!important;" alt="icon_STAND">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					  {#Stands & pop up stores    #}
    					  {{contentPageHome.textCard7}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                        {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_STAND.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   {#Organisation d’événements de type vernissages, expositions mais également de salons liés a des thématiques professionnelles. #}
                        {{contentPageHome.textFlipCard7|raw()}}

					</p>
                    </div>
                  </div>
                </div>
							 </div> 
					    	<div class="col-6">
					    	     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner">
                     
                    <div class="flip-card-front"  >
                         <img class="img-fluid w-25 pt-3" src="{{asset("uploads/front-images/17.png")}}" style="width: 40%!important;" alt="17">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					    {#Centre de beauté et bien être.   #}
    					    {{contentPageHome.textCard8}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                         {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="uploads/front-images/17.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					    {#Espace accessible à l’intérieur de l’hôtel, institut de beauté et accès au spa avec hammam&massage.#}
					    {{contentPageHome.textFlipCard8|raw()}}
					</p>
                    </div>
                  </div>
                </div>
					        </div>	    
						
						
						</div>
				</div>
			</div>
				<div class="col-sm-12 text-center mt-2 cardsMobile">
					
					<span class="divider-text mb-5"></span>
					<div class="" style="">
						<div class="row text-center d-flex justify-content-center">
							<div class="col-6">
								 <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" src="{{asset("uploads/front-images/kitchenette5.png")}}" style="width: 40%!important;" alt="kitchenette5">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					   {#Gaming & Fitness #}
    					   {{contentPageHome.textCard9}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                          {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="uploads/front-images/FITNESS.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   {#Bornes d’arcade mises à disposition et salle de fitness et de musculation accessibles 24h/24#}
					   
					 {{contentPageHome.textFlip9|raw()}}

					</p>
                    </div>
                  </div>
                </div>
							</div>
							<div class="col-6">
							     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                    <div class="flip-card-front" >
                         <img class="img-fluid w-25 pt-3" src="{{asset("uploads/front-images/networking3.png")}}" style="width: 40%!important;" alt="networking3">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					  {{contentPageHome.textCard10}}
    					</p> 
                    </div>
                   
                    <div class="flip-card-back">
                      {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_RESTAURATION.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:11px; line-height:18px; color:rgba(94, 116, 136, 1);">
    					   {#Petit déjeuner, snacking, cuisine internationale et room service disponibles 24h/24 et 7j/7#}
    					   
    					 {{contentPageHome.textFlip10}}
    					</p>
                    </div>
                  </div>
                </div>
							</div>
							<div class="col-6">
							     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner" >
                      
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" src="{{asset("uploads/front-images/services5etoiles.png")}}" style="width: 40%!important;" alt="services">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    				 {{contentPageHome.textCard11}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                        {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="themes/coworking/front/images/icon_STAND.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					   {#Organisation d’événements de type vernissages, expositions mais également de salons liés a des thématiques professionnelles. #}
                      {{contentPageHome.textFlip11|raw()}}

					</p>
                    </div>
                  </div>
                </div>
							 </div> 
					    	<div class="col-6">
					    	     <div class="flip-card" tabIndex="0">
                  <div class="flip-card-inner">
                     
                    <div class="flip-card-front">
                         <img class="img-fluid w-25 pt-3" src="{{asset("uploads/front-images/prixAttractifs2.png")}}" style="width: 40%!important;"  alt="prixAttractifs2">
                        <p class="" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
    					     {{contentPageHome.textCard12}}
    					</p>
                    </div>
                   
                    <div class="flip-card-back">
                         {#<img class="img-fluid w-25 pt-3"  style="width: 40%!important;"  src="uploads/front-images/17.png">#}
                     	<p class="mt-3" style="font-weight:500; font-size:12px; line-height:25px; color:rgba(94, 116, 136, 1);">
					    {#Espace accessible à l’intérieur de l’hôtel, institut de beauté et accès au spa avec hammam&massage.#}
					  {{contentPageHome.textFlip12|raw()}}
					</p>
                    </div>
                  </div>
                </div>
					        </div>	    
						
						
						</div>
				</div>
			</div>
																																																																																									
</div>

				</div>
</div>

	 

	<div class="container-fluid p-5" style="margin-top:0px;  background-color:rgba(249, 249, 249, 1);">
		 	<div class="row align-items-center g-0 gap-3">


			<div class="container-fluid" style="margin-top:93px; background-color: rgba(249, 249, 249, 1); ">

			

				<div class="text-center" style="padding-top: 40px;">

				 	<h1  style=" color: black; margin-bottom:22px;">Découvrez notre univers</h1>
					{#<div style="height:3px; width:30px; margin-top:22px; background-color: rgba(0, 0, 143, 1); margin-left: auto; margin-right: auto;"></div>#}
					<div class="m-auto w-50">
			    	{#<p style="width:80%; margin:auto;padding-bottom:10%;font-family: 'Archivo', sans-serif; line-height:27px; font-weight:400;font-size: 14px; color: rgba(17, 17, 17, 0.8);"> Découvrez notre espace de co-working en 3D	</p>#}
						
							 
					</div>
					<div class="mt-5 w-100">
					 {#<iframe width="560" height="315" src="https://www.youtube.com/embed/GeKD5d88QjM?si=Vi9zBFTXmrPXAHzx" style="width:80%; height:350px;" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>#}
				<iframe width="560" height="315" src=" {{contentPageHome.linkYoutube}}" style="width:80%; height:400px;" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
				
						  		</div>
				</div>

			</div>
		</div>

    </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="titlePourQuoi"> {{contentPageHome.thirdTitleSection}} </h1>
                    	 
                    	    		  
                    	    		    	<p class="mt-3" style="text-align: justify;">
                            			
                            				{{contentPageHome.thirdTextSection|raw()}} 
                            				
                            				</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">
                        	 <a href="https://www.melliber-apparthotel.com" id="HotelAppart" target="_blank" style="color: #a5a5a5;">
                	     <div class="col-lg-12 ">
                        	    	
                        	    		 
                        	    		<div class="col-lg-5 col-sm-12">
                        	    		 <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titlePourQuoi"> {{contentPageHome.thirdTitleSection}}  </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="">
                                				{#Par sa situation idéale à Casablanca, en bordure de l’océan. Le Melliber Appart Hotel vous offre toutes les commodités pour un agréable séjour.#}
                                    {#            Nous partageons avec vous, notre savoir faire, notre passion, et notre engagement afin de vous assurer une haute qualité de service.#}
                                    {#            Melliber Appart Hotel avec ses 85 Studios et Suites, est un subtil mélange entre une architecture classique néocoloniale et une  modernité urbanistique de la nouvelle ville de Casablanca.#}
                                    {#            En bordure des palmiers de l’avenue Moulay Youssef, la situation géographique fait de Melliber Appart Hotel un lieu tout à fait exceptionnel. Situé à deux pas du parc des expositions et à 100 mètres de la Grande Mosquée Hassan II,  l’une des plus belles et plus grandes mosquées du monde, qui donne à la ville une vraie dimension spirituelle et un cachet unique.#}
                                    {#            Le Melliber appart Hotel est situé tout près des plus importants quartiers d'affaires de Casablanca avec sa proximité au gigantesque centre d'affaires Marina et sa proximité au « Maarif »  quartier par excellence du shopping.#}
                                    {#            Morocco Mall, le plus grand centre commercial d’Afrique et Anfa Place shopping center sont à proximité sur la corniche.#}
                                    {#            Casablanca et toute son histoire est à vos pieds, de l’ancienne Médina au quartier Art Déco, en passant par la nouvelle Marina, vous irez à la découverte d'une ville riche en authenticité et diversité architecturale. La température y est agréable tout au long de l’année.#}
                                			
                                			{{contentPageHome.thirdTextSection|raw()}} 
                                			
                                				</p>
                        	    		 </div> 
                        	    		  
                </div>
                             </a>
			        </div>
		        </div>

		<div class="container-fluid" style="margin-top:93px;" id="contactezNous">
			<div class="col-md-12" style=" background-color: rgba(240, 240, 240, 1);">
				<div class="text-center" style="padding-top:70px;">
					<h1 class="h2" style=" color: black;margin-bottom:22px;">{{"Contactez-nous"|trans({},"front")}}</h1>
					{#<div style="height:3px; width:30px; margin-top:22px; background-color: rgba(0, 0, 143, 1); margin-left: auto; margin-right: auto;"></div>#}
					<div class="m-auto w-50">
					
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<form id="formForMobile" class="m-auto mt-4 p-3" style="width:64%;" action="{{path('sendEmailFromPageContact')}}" method="POST">
							<div class="row gy-3 gx-5">
							     <div class="col-md-12">
							        {% for label, messages in app.flashes %}
                                        {% for message in messages %}
                                            <div class="alert alert-{{ label }} alert-dismissible fade show text-center" role="alert" style="font-size: 13px;">
                                                {{ message }}
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                        {% endfor %}
                                    {% endfor %}
                                </div>
								<div class="col-md-6">
									<input class="w-100" type="text"  name="fullName"    {% set searchString = '/en' %} {% if searchString in app.request.uri %} placeholder="Full name" {% else %} placeholder="Nom complet" {% endif %} style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
    border: 2px solid #ffffff !important;" required>
								</div>
								<div class="col-md-6">
									<input class="w-100" type="text" name="phone"     {% set searchString = '/en' %} {% if searchString in app.request.uri %} placeholder="Phone" {% else %} placeholder="Téléphone" {% endif %} style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
    border: 2px solid #ffffff !important;">
								</div>
								<div class="col-md-12">
									<input class="w-100" type="email" name="email"   placeholder="email@example.com" style="height:42px; border: none; outline: none; padding-inline: 9px;    background: #ffffff;
    border: 2px solid #ffffff !important;" required>
								</div>
							</div>
							<div class="mt-4">
								<textarea placeholder="Message" name="message" class="form-control w-100 border-0 rounded-0" id="textAreaExample" rows="6" required></textarea>
							</div>
							<div class="row py-3">
								<div class="col-12">
									<input class="float-end" type="submit"   {% set searchString = '/en' %} {% if searchString in app.request.uri %} value="Send"  {% else %} value="envoyer" {% endif %}style="border: none; background-color: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 1); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-family:'PT Sans', sans-serif; height: 45px; width: 180px;">
								</div>
							</div>
						
						</form>
					</div>
					<div class="col-sm-6" id="divMaps" > 
				    
					
						<div class="mapouter" >
						    <div class="gmap_canvas">
						    	    <iframe id="mapArea" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13292.106768506852!2d-7.633346!3d33.6046119!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xda7d30e93c2d56f%3A0xcc3100e8f00d75d2!2sCOWORK%26LIVE!5e0!3m2!1sen!2sma!4v1698228599408!5m2!1sen!2sma" frameborder="0" scrolling="no" style="width: 430px; height: 400px;">
        						    </iframe>
    						  
						    </div>
					    </div>
					           
					</div>
				</div>
				

			</div>
			
			
		</div>
		
	
{% endblock %}

{% block javascripts %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<script>

  $(document).ready(function () {

   $('#divMaps').on('click', function() {
   
        var url = "https://www.google.com/maps/place/COWORK%26LIVE+-+Coworking+Bureaux+et+Salles+de+r%C3%A9union+%C3%A0+Casablanca/@33.605184,-7.633389,15z/data=!4m6!3m5!1s0xda7d30e93c2d56f:0xcc3100e8f00d75d2!8m2!3d33.6046119!4d-7.633346!16s%2Fg%2F11vc96lcvt?hl=en&entry=ttu";
        var newTab = window.open();
        newTab.location.href = url;
        
    });
 
  
  });

</script>
{% endblock %}