body {
    display: flex;
    justify-content: center;
 }


.loader{
   width: 100%;
   height: 100%;    
   position: fixed;
   gap:10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #fff;
   animation: fadeOut 5s ease-in-out normal forwards;
}



.Oh,.My,.Food{
   font-family: Shrikhand;
   font-size: 3em;
}

.Oh{
   color: #9356DC;
   animation: slideDown ease-in-out 1s ;  
}

.My{
   color: #FF79DA;
   animation: slideDown 2s ; 
}

.Food{
   color:#99E2D0;
   animation: slideDown 3s;
}

@keyframes fadeOut{
   0%{
      opacity:1;
   }
   100%{
      visibility: hidden;
      opacity:0;
   }
}

@keyframes slideDown{   

    from{
      transform: translateY(-100px);
   }
   to{
         transform: translateY(0px);
      }

  
}
.main-conteneur{
   width: 100%;
}


                  /* header */


.logo{
   display: flex;
   justify-content: center;
   padding: 10px 0;
}

header img{
   width: 162px;
   height: 44px;
}

               /* sous-header */

.sous-header{
   display: flex;
   justify-content: center;
   flex-direction: row;
   align-items: center;
   padding: 0;
   gap:17px;
   background-color: #EAEAEA;
}

.sous-header p{
   font-weight: 300;
}


.phrase-menu h2{ 
   font-size: 24px;
   font-weight: 800;
 } 

.phrase-menu p{ 
   font-style: normal;
   font-size: 18px;
   color: #353535;
   margin-top:-10px;
   font-weight: 300;
} 

.phrase-menu{ 
   display: flex;
   flex-direction: column;
   text-align: center;
   background-color:#F6F6F6;
}
   

.button button{
   background: linear-gradient(#9356DC,#FF79DA );
   border-radius: 25px;
   color: white;
   padding: 15px;
   height: 50px;
   width: 180px;
   border: 1px #9356DC;   
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
}

.button :hover {
   opacity: 0.8;
   transform: scale(1.02);
}

.button{

   display: flex;
   justify-content:center;
   padding-bottom: 20px;
}

.button a{
   color: white;
   text-decoration: none;
   font-weight: 500;
   font-size: 13px; 
}

         /* Fonctionnement */

.symbol{
   border: 1px solid white;
   border-radius: 50%;
   background-color: #9356DC;
   padding: 3px 7px;
   margin-left: -40px;
   color: white;
}



button p{
   color: white;
}
 button a{
   color: black;
   text-decoration: none;
 }

 .fonctionnement , .Restaurants {
   padding: 20px 5%;
}

.fonctionnement_btns{
   display:flex;
   flex-direction: column;
   gap: 20px;
}


  




.fonctionnement button{
   height: 50px;
   border-radius: 20px;
   border: 1px white;
   box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
   display: flex; 
   gap:25px;
   align-items: center;
   padding-left: 30px;
}

button:hover i{
   color: #9356DC;
}

.fonctionnement_btns i{
   color:#7a7a7a;
}


                  /* Restaurants  */


.Restaurants{ 
   background-color:#F6F6F6;
   padding-bottom: 30px;
   padding-top: 30px;
   margin-top: 50px;
}

.restaurants-cards{
   display: flex;
   justify-content: center;
   flex-direction: column;
   padding-left: 10px;
   gap: 25px;
}

.icon{
   display: flex;
   justify-content:flex-end; 
   margin-top: -50px;
   margin-right: 20px;
   font-size:20px;
   
}

.icon2{
   display: flex;
   justify-content:flex-end; 
   margin-top: -20px;
   margin-right: 20px;
   font-size:20px; 
}
   
.icon2 :hover{
   background: linear-gradient(#9356DC,#FF79DA );
   font-weight: 700;
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
   transform: scale(1.1);
}

.rectangle-flex{
   display: flex;
   justify-content: flex-end;
   margin-right: 40px;
   align-items: flex-start;
   margin-top: -170px;
   margin-bottom: 130px;
}

.rectangle{
   
   border: 1px solid #99E2D0;
   width:60px;
   background-color:#99E2D0;
   color: #008766;
   padding:8px 8px 8px 8px; 
}

.card{
   height: 260px;
   border-radius: 15px;
   border: 1px solid #F6F6F6;
   background-color:#FFFFFF;
}

.card img{
   width: 100%;
   height: 190px;
   border-top-left-radius: 15px;
   border-top-right-radius:15px;
   object-fit: cover;
}

.card a{
   color: black;
   text-decoration: none;
}

.card-content{
   padding-left: 10px;
}

.card p{
   margin-top: -10px;
   font-weight: 100;
}

.card h3{
  margin-top: 5px;
}
/* Media Queries */

@media screen and (min-width: 768px) {
   .fonctionnement_btns{
      flex-direction: row;
      justify-content: space-between;
      gap:5%;
   }
   .fonctionnement_btns button {
      flex :1;
      white-space: nowrap;
   }
   

}

@media screen and (min-width: 1024px) {

   *{ color:black;}

   .fonctionnement > * , .Restaurants > *{
     max-width: 1440px;
     margin: 20px auto;
   }
   

   .restaurants-cards{
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
   }

   .restaurants-cards .card{
      width: 48%;
   }

   footer{
      display: flex;
      justify-content: flex-end;
   }
   
   footer{
      display: flex;
      gap: 40px;
   }

   footer img{
      order: 5;
      height: 20px;
      margin-right: 10px;
   }

}

@media (min-width :650px) and (max-width : 1024px){

   .fonctionnement_btns{
      flex-direction: column;
      gap:20px;
   }

   footer{
      display: flex;
      justify-content: flex-end;
   }
   
   footer{
      display: flex;
      gap: 30px;
   }

   footer img{
      order: 5;
      height: 20px;
      margin-right: 10px;
      object-fit: fill;
   }

}