{% 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;
       
        }
       
        
      }
   
     	
        	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, .flip-card-back {
      /*position: absolute;*/
      /*width: 100%;*/
      /*height: 100%;*/
      /*-webkit-backface-visibility: hidden;*/
      /*backface-visibility: hidden;*/
      
      
        position: absolute;
  width: 100%;
  height: 100%;
   /*display: flex;*/
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  -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;
        }
       

        
        
        #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;
        }
        
        .titlePourQuoi{
        text-align: start !important;
        
        }
        
        
        .flip-card-front, .flip-card-back {
          /*position: absolute;*/
          /*width: 100%;*/
          /*height: 100%;*/
          /*-webkit-backface-visibility: hidden;*/
          /*backface-visibility: hidden;*/
          
          
            position: absolute;
      width: 100%;
      height: 100%;
        display: grid;
      justify-content: center; /* Center horizontally */
      align-items: center; /* Center vertically */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    
    .flip-card-front {
        display: table !important;
    }
     .flip-card-back {
        display: grid !important;
    }
    
      .flip-card {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 600px  !important;
      }
      
       .flip-card-front {
                padding-top : 40% !important;
            }
            
            
            .flip-card-front {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
            }
    }
    
    
    
        .flip-card-front, .flip-card-back {
            position: absolute;
              width: 100%;
              height: 100%;
              justify-content: center; /* Center horizontally */
              align-items: center; /* Center vertically */
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
            }
            
            .flip-card-front {
                display: table !important;
                padding-top : 25px;
            }
             .flip-card-back {
                display: grid !important;
            }
            
            .divReuninonWeb{
               /*background-image:url({{asset('uploads/front-images/pictureSalleReunionFinal2.png')}});*/
                background-image:url({{asset('uploads/front-images/picSalleReunion22.png')}});
               

               background-repeat: no-repeat;
               background-size: 100% 100%;
               height:405px;
               
            }
    
</style>


                        
                        
                        
 
    <div class="row divDesktop">
  <div class="col-sm-4" style="background-image:url({{asset('uploads/front-images/pictureBureaux2.png')}});background-repeat: no-repeat;background-size: 100% 100%;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 divReuninonWeb" >
  	
					    	<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" style="background-image:url({{asset('uploads/front-images/picFreework2Final.png')}});background-repeat: no-repeat;background-size: 100% 100%;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 class="col-sm-4" style="background-image:url({{asset('uploads/front-images/picFreework2.png')}});background-repeat: no-repeat;background-size: 100% 100%;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"  id="divImagesHeaderMobile" style="padding: 0px;">
                    
                    
                      <div class="d-flex align-items-center justify-content-center" style="background-image:url({{asset('uploads/front-images/picBureax2Mobile.png')}});height:215px;background-size: 100% 100%;">
                          
                         

                       
                         <a href="{{path('reservationbureaux')}}" class="btn btn-formulaire"  
                     style="
                            background: #FCD46B;
                            color: white;
                            font-weight: 500;
                            border-radius: 0px;
                            text-transform: uppercase;
                            font-size: 13px;
                            padding-left: 26px;
                            padding-right: 26px;
                            position: relative;
                            bottom: -70px;">
                         RÉSERVER
                         </a>
                    </div>
                   
                    
                    
                    
                       <div class="d-flex align-items-center justify-content-center"  style="background-image:url({{asset('uploads/front-images/pictureSalleReunino2Mobile.png')}});height:215px;background-size: 100% 100%;">
                      {#picFree2Mobile.png#}
                      {#pictureSalleReunino2Mobile.png#}


                           <a href="{{path('reservationsallereuninon')}}"  class="btn btn-formulaire"  style="
                            background: #FCD46B;
                            color: white;
                            font-weight: 500;
                            border-radius: 0px;
                            text-transform: uppercase;
                            font-size: 13px;
                            padding-left: 26px;
                            padding-right: 26px;
                            position: relative;
                            bottom: -70px;">RÉSERVER</a>
                    </div>
                   
                    
                    
                       <div class="d-flex align-items-center justify-content-center"  style="background-image:url({{asset('uploads/front-images/picFree2Mobile.png')}});height:215px;background-size: 100% 100%;">
                     
                         <a href="{{path('reservationfreework')}}"   class="btn btn-formulaire" style="
                            background: #FCD46B;
                            color: white;
                            font-weight: 500;
                            border-radius: 0px;
                            text-transform: uppercase;
                            font-size: 13px;
                            padding-left: 26px;
                            padding-right: 26px;
                            position: relative;
                           bottom: -70px;">RÉSERVER</a>
                    </div>
                 
                  
                </div>
                
            </div>
        </div>
  </div>
  
  
  
  
    <div class="container" style="margin-top:93px;max-width: 1250px;">
        <div class="row">
                	     <div class="col-lg-12" style="display: flex;background: #fbf9ed;padding: 30px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);">
            			
            				<div class="col-lg-12" style="text-align: justify;">
            					<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;font-display: swap;">
            							
                                                                {{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": 1700 }' style="margin-top: 5%;">
        {% 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;">{{contentPageHome.secondTitleSection|raw()}}  </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="">
                        {#<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="">
                         {#<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="">
                         {#<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="">
                          {#<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="">
                          {#<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="">
                      {#<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="">
                        {#<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="">
                         {#<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="">
                          {#<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="">
                      {#<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="">
                        {#<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="">
                         {#<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="row text-center d-flex justify-content-center" style="padding-top: 30px;">
							<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("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_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")}}" 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("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 class="col-sm-12 text-center mt-2 cardsMobile">
					<span class="divider-text mb-5"></span>
						<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 class="col-sm-12 text-center mt-2 cardsMobile">
				<span class="divider-text mb-5"></span>
				<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 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"  style="text-align: justify;"> 
                    	    
                    	    		        <h1 style="font-size: 34px;color: black;margin-bottom:22px;" class="titlePourQuoi"> {{contentPageHome.thirdTitleSection}} </h1>
                    	 
                            				{{contentPageHome.thirdTextSection|raw()}} 
                            			
                    	    		 </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" style="text-align: justify;"> 
                        	    		    	<p class="mt-3" style="">
                                		
                                			{{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 %}