@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
*{
    margin: 0;
    padding: 0;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  ;
}

/*===== GOOGLE FONTS =====*/
/*===== VARIABLES CSS =====*/
:root{
    --container-width: 90%;
    --container-bg-height: 80vh;
    --container-height: 70vh;

    /*========== Colors ==========*/
    --first-color: yellow;
    --first-color-alt: #2ECC71;
    --title-color: #393939;
    --text-color: #dde;
    --text-color-light: #ddd;
    --href-color: #fff;
    --body-color: #FBFEFD;
    --container-color: #FFFFFF;
    --first-color-span: yellow; 
   
    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --biggest-font-size: 4rem;
    --font-titel: 8rem;
    --h2-font-size: 2.5rem;
    --h3-font-size: 1.5;
    --p-font-size: 1.5rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;


  
    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
  
    /*========== Margenes And padding  ==========*/
    --mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;

    --container-mr: 5%;

    --pad-1: 2rem;

    --border-radius: 10px;


    /*========== Colmun gap and row-gap  ==========*/
    --cg-1: 4rem;
    --cg-2: 1rem;
    --cg-3: 0.5rem;
    --cg-4: 2rem;
    --cg-5: 2.5rem;
    --cg-6: 3rem;
    
  
    /*========== z index and transition ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-fixed-fixed: 1000;
    --o-transition: 0.5s;
  }

   /*===================Section 1 page cuisine=============*/
  #section-page-cuisine{
      background-image: url('./images-cuisine/caroline-attwood-bpPTlXWTOvg-unsplash-770x513.jpg');
  }
     /*===================Section 1 page cuisine=============*/

   /*===================Section 2 page cuisine=============*/

  #container-type-food{
      justify-content: center;
      display: flex;
      padding: 50px 0;
      flex-wrap: wrap;
      gap: 2rem;
  }



  /*.titel__page h1{
      font-size: 3rem;
      padding: 10px;
      background-color: var(--title-color);
      position: relative;
  }

  

  .titel__page h1 span{
      color: var(--first-color);
      border-bottom: 2px solid yellow;
  }*/
  .saled{
      position: absolute;
      bottom: 5%;
      left: 10%;
      width: 200px;
      height: 200px;
  }

   .pot{
    position: absolute;
    top: 5%;
    right: 10%;
    width: 200px;
    height: 200px;
}
  .type__food{
      border-radius: var(--border-radius);
      overflow: hidden;
      width: 300px;
      box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.5);
      position: relative;
      height: 400px;
      transition: var(--o-transition);

  }

  .type__food::before{
      content: '';
      position: absolute;
      width: 100%;
      background: linear-gradient(to top, yellow, transparent);
      height: 0%;
      z-index: 2;
      bottom: 0;
      transition: var(--o-transition);
  }

  .type__food:hover:before{
      height: 100%;
  }

  .type__food:hover{
      transform: translateY(-15px);
  }

  .type__food h1{
      position: absolute;
      bottom: 5%;
      z-index: 3;
      left: 5%;
      color: yellow;
      transition: var(--o-transition);

  }

  .type__food:hover.type__food h1{
       color: var(--title-color);
  }

  .type__food img{
      position: absolute;
      width: 100%;
      z-index: 1;
      height: 100%;
  }
    /*===================Section 2 page cuisine=============*/

    /*===================Section 3 page cuisine=============*/
   #section-foods-cuisine{
       background-color: var(--title-color);
   }
  #container-foods-cuisine{
      padding: 50px 0;
  }

  .ver__foods{
      width: 100%;
      text-align: center;
    }
    .ver__foods h1{
        color: var(--first-color);
        font-size: 5rem;
    }
    .ver__foods h1 span{
        color: white;
    }

    .ver__foods p{
        color:white;
        font-size: 1.5rem;
    }

    .foods__cuisine{
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        right: 0;
        justify-content: center;
        margin-top: 50px;
    }

    .box{
        width: 300px;
        text-align: center;
        padding: 10px 0;
        position: relative;
        background-color: white;
        overflow: hidden;
        height: 400px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        border-radius: var(--border-radius);}

    .content a{
        width: 120px;
        margin:0 auto;
        margin-top: 20px;
        color: var(--title-color);
        border-radius: 5px;
        border: 1px solid ;
    }

    .content{
        position: absolute;
        bottom: 3%;
        width: 200px;
        width: 100%;
        text-align: center;
    }

    .content a::before{
        content: 'add to carte';
        color: white;
        background-color: var(--title-color);
    }

    .content .price{
        color: var(--first-color);
        font-size: 1.5rem;
        
    }

    .content .price span{
        color: var(--title-color);
        font-size: 1rem;
    }

    .content .stars i{
        color: var(--first-color);
    }

    .box .icons{
        display: grid;
        gap: 1rem;
        z-index: 2;
        position: absolute;
        top: 5%;
        left: -20%;
        transition: var(--o-transition);
    
    
    }
    
    .box:hover.box .icons{
        left: 5%;
        
    }
    
    .box img{
        width: 200px;
        transition: var(--o-transition);
        margin: 20px 0;
        z-index: 1;
    }
    
    .box:hover.box img{
        transform: scale(1.2);
    }
    
    .box .icons a{
        padding: 5px;
        border-radius: 5px;
        border: 1px solid var(--title-color);
        color: var(--first-color);
        transition: var(--o-transition);
    
    }
    
    .box .icons a:hover{
        color: var(--body-color);
        background-color: var(--title-color);
        
    
    }
    /*===================Section 3 page cuisine=============*/
    #section-service-cuisine{
        padding: 100px 0;
        background-image:  url(./images-cuisine/caroline-attwood-bpPTlXWTOvg-unsplash-770x513.jpg);
        background-attachment:fixed;
    }

    #section-service-cuisine::before{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: linear-gradient(to  bottom, var(--title-color), transparent);
        content: '';
    }
    
   .services__cuisine{
       width: 100%;
       display: flex;
       justify-content: space-between;
   }

   .service__cuisine{
       width: 30%;
       text-align: center;
       display: flex;
       flex-direction: column;
       padding: 10px 0;
       align-items: center;
       backdrop-filter: blur(15px);
       cursor: pointer;
       transition: var(--o-transition);
   }

   .service__cuisine:hover{
       box-shadow: 2px 2px 15px var(--first-color);
       transform: translateY(-15px);
   }

   

   .image__service{
       width: 200px;
       height: 150px;
       position: relative;
      
   }

   .image__service img{
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
   }

   .service__cuisine h1{
       color: var(--first-color);
       margin: 20px 0;
   }

   .service__cuisine p{
      padding:  0 20px;
      color: white;
      

   }


   #section-order-meals .container{
       position: relative;
   }


   #section-order-meals{
    padding: 20px 0 50px 0;
    background-image: url(./images-cuisine/dan-gold-4_jhDO54BYg-unsplash-300x200.jpg);
    position: relative;
}

#section-order-meals .protien{
    color: var(--first-color);
    font-size: 10rem;
    position: absolute;
    opacity: 0.5;
    z-index: 3;
    transform: rotate(90deg);
}
 .order__meals{
       display: flex;
       justify-content: space-between;
       width: 100%;
       flex-wrap: wrap;
       position: relative;
   }
   .menu__meals{
       gap: 2rem;
       background-color: var(--title-color);
       width: 30%;
       padding: 10px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       box-shadow: rgba(0, 0, 0, 0.35) 2px 5px 15px;
       
       
   }

   .meal{
    display: flex;
    gap: 1rem;
    align-items: center;
    position: relative;
}

.meal .meal__price{
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);

}

   .menu__meals .image__menu{
       width: 60px;
       height: 60px;
       border-radius: 50%;
       position: relative;
       
   }

   .image__menu:hover.image__menu img{
       transform: scale(1.2);
   }

   .menu__meals h2{
       font-size: 1.5rem;
       color: var(--first-color);
   }

   .menu__meals p{
       color: white;
       font-size: 12px;
   }

   .menu__meals .image__menu img{
       position: absolute;
       width: 100%;
       height: 100%;
       border-radius: 50%;
       top: 0;
       left: 0;
       transition: var(--o-transition);

   }


   
  
   .order__meals .order{
       /*background-color: white;*/
       align-self: center;
       width: 35%;
       z-index: 2;
       box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
       padding: 50px 0;
       backdrop-filter: blur(15px);
       background-color: var(--title-color);
   }
   
   .inputfield{
    width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
    position: relative;
    
  }

  .inputfield span{ 
    font-size: 1rem;
    transition: all 0.3s ease;
    position: absolute;
    top: 0;
    padding: 10px;
    pointer-events: none;
    color: white;
 }

 .inputfield input,
 .inputfield textarea{
  width: 100%;
   outline: none;
   font-size: 1rem;
   padding: 10px 10px;
   transition: all 0.3s ease;
   background-color: transparent;
   border: none;
   border-bottom: 1px solid var(--first-color);
   resize: none;
   color: white;
 }

 
.inputfield input:focus~ span,
.inputfield input:valid~ span{
transform: translateY(-15px);
font-size: 0.9rem;
padding: 0;
}

.inputfield textarea:focus~ span,
.inputfield textarea:valid~ span{
transform: translateY(-25px);
font-size:0.9rem ;
}

.order{
    height: max-content;
}
.order form .btn{
    margin:  0 auto;

}

.order form .btn::before{
    content: 'order';
    color: var(--title-color);
    font-size: 1.2rem;
}
    /*==================Media===============================*/
    @media (max-width: 1150px){
           .meal{
               flex-direction: column;
               align-items: flex-start;
               gap: 0.5rem;
           }
           .order{
               width: 35%;
           }
    }
    @media (max-width: 950px){
        .services__cuisine {
            flex-direction: column;
            gap: 1rem;
            align-items: center;
            margin: 0 auto;
        }
        
        .image__order {
            width: 100%;
            position: relative;
        }
        .from__order{
            width: 100%;
        }
        .meals{
            justify-content: center;
        }
        .button__order {
            width: 100%;
            justify-content: center;
            text-align: center;
            display: f;
            display: flex;
            margin-top: 20px;
        }
        .menu__meals{
            width: 100%;
        }
        .meal{
            flex-direction: row;
            align-items: center;
            gap:1rem;
        }

        .order__meals .order{
            width: 100%;
        }

        .service__cuisine {
            width: 100%;
            
        }
    }