@keyframes moveLeft {
  0% {
    transform: translateX(0);
  }
50% {
     transform: translateX(200vw);
  }
  100% {
    transform: translateX(-200vw);
 }
}

:root{
  --bgcolor:#F7F8FA;
  --bgcolor-100:#FEFEFE;
  --bgcolor-200:#f4f5f6;
  --bgcolor-300:#efedef;
  --gary:#C7C7CF;
  --text-color:#2F1650;
  --white:#fff;

 /* --primary-purple:#9747FF;
  --purple-light200:#D7D5EB;
  --purple-light300:#C6C2E3;
  --purple-dark500:#6C60BC;
  --purple-dark400:#6B5EBA;
  --purple-dark300:#6D60BC;
  --purple-dark200:#887DC9;
  
  --deep-purple-100:#D81CCF;
  --deep-purple-200:#BC18B3;
  --deep-purple-300:#A01599;
  --deep-purple-400:#84117E;
  --deep-purple-500:#670D63;
  --deep-purple-600:#490946;
  --deep-purple-700:#2D052B;
  */
--purple-dark-bg400:#6B5EBA; 

  --light-purple-100:#9747FF;
  --light-purple-200:#863FE2;
  --light-purple-300:#7437C5;
  --light-purple-400:#632FA8;
  --light-purple-500:#52268A;
  --light-purple-600:#401E6D;
  --light-purple-700:#2F1650;

  --bright-light-purple-100:#C6C2E3;
  --bright-light-purple-200:#C1B6E6;
  --bright-light-purple-300:#BDA9E9;
  --bright-light-purple-400:#B89DEB;
  --bright-light-purple-500:#B391EE;
  --bright-light-purple-600:#AF84F1;
  --bright-light-purple-700:#AA78F4;


  --purple-mid-100:#A56CF7;
  --purple-mid-200:#A060F9;
  --purple-mid-300:#9C53FC;


  --light-purple-100:#9747FF;
  --light-purple-200:#863FE2;
  --light-purple-300:#7437C5;
  --light-purple-400:#632FA8;
  --light-purple-500:#52268A;
  --light-purple-600:#401E6D;
  --light-purple-700:#2F1650;

  --gray-light-purple-100:#B8ABC9;
  --gray-light-purple-200:#B3A3C9;
  --gray-light-purple-300:#AF9BC9;
  --gray-light-purple-400:#AA93C9;
  --gray-light-purple-500:#A58AC8;
  --gray-light-purple-600:#A182C8;
  --gray-light-purple-700:#9C7AC8;

  --gray-deep-purple-100:#BCA5D7;
  --gray-deep-purple-200:#A28EB9;
  --gray-deep-purple-300:#8A799D;
  --gray-deep-purple-400:#716381;
  --gray-deep-purple-500:#594E65;
  --gray-deep-purple-600:#403849;
  --gray-deep-purple-700:#27232D;

  --purple-text-deep:#421876;

  --yellow-100:#FFDD00;
  --yellow-200:#FFD600;
  --yellow-300:#FFCF00;
  --yellow-400:#FFC800;
  --yellow-500:#FFC100;
  --yellow-600:#FFBA00;
  --yellow-700:#FFB300;

  --red-100:#D91656;
  --red-200:#BC134B;
  --red-300:#A01040;
  --red-400:#840D35;
  --red-500:#670A29;
  --red-600:#49071D;
  --red-700:#2D0412;


  
  --yellow-dark:#D39700;

  --red-dark:#D25C41;
  --red-light:#EFBBAE;
  --blue-dark:#536BB7;
  --blue-light:#BFCDF9;
  --blue:#5036FE;
  --green-light:#DBF7D1;
  --green-dark:#80C069;
  --primary-font: "Fredoka", serif;
  --secondary-font:"Arimo", serif;

  /* sizees*/
--text-6px :  0.4rem;
--text-8px :  0.5rem;
--text-10px:	0.6rem;
--text-12px:	0.8rem;
--text-14px:	0.9rem;
--text-16px:	1rem;
--text-18px:	1.1rem;
--text-20px:	1.3rem;
--text-22px:  1.375rem;
--text-24px:	1.5rem;
--text-26px:	1.625rem;
--text-28px:	1.75rem;
--text-32px:	2rem;
--text-36px:	2.25rem;
--text-40px:	2.5rem;
--text-44px:	2.75rem;
--text-48px:	3rem;
--text-52px:	3.25rem;
--text-56px:	3.5rem;
--text-60px:	3.75rem;
--text-64px:	4rem;
--text-68px:	4.25rem;
--text-72px:	4.5rem;
--text-76px:	4.75rem;
--text-80px:	5rem;
/*margin size */
--text-area-margin:4.2vh 0 6.2vh 0;
}

body{
  font-family: var( --primary-font);
  font-size: 16px;
  color:var(--light-purple-700);
  margin: 1.6rem 2.2vw 0  2.2vw;

  display: grid;
  grid-template-columns: auto;
  grid-gap: 2rem;

  background-color: var(--bgcolor);
 /* border: 0.4px solid red;*/
overflow-x: hidden;
}
.layout_home{
  grid-template-areas:

  'header' 
  'hero' 
  'intro' 
  'package_card' 
  'CTA'
  'deal'
  'souce'
  'CTA2'
  'footer';
}
a{ 
  color: var(--text-color);
  text-decoration: none;
}
  a:hover{opacity: 0.8;}

  a.whatsapp_fixed{
   position: fixed;
    bottom: 12vh;
    left:4vw;
    z-index: 4;
     width: var(--text-48px); 
  height: auto;
  
  }
header{
  grid-area:header;
  margin: 2vh;
 }
header p.slogan {
  font-size: var(--text-18px);
  color: var(--light-purple-100);
  font-weight: 500;
  line-height:1.2;
}
header p.logo {
  font-size: var(--text-12px);
  color: var(--gray-deep-purple-600);
font-weight: 300;
font-family: var(--secondary-font);}
/*header bg img change accourding to the package was choosen bybthe user */
body.layout_menu header::before {
  background-image: var(--menu-header-image);
}

/*HERO AREA >>>> */
figure.hero{
  grid-area:hero;
  position: relative;
 /* border: 4px solid rgb(55, 121, 227);*/
  max-height: 62vh;
  height: 54vh;
    min-height: 50vh;
}
 .hero_chef_img{ 
  max-height: 54vh ;
height: 52vh;
min-height: 50vh;

position: absolute;
left:50%; 
transform:translateX(-50%);
z-index: -1;
}   
.hero svg{
  position: absolute;
left:50%; 
top:-4%;
transform:translateX(-50%);
z-index: -4;
}
.hero .gradient{
  background-image: linear-gradient(rgba(0, 0, 0, 0)20%, var(--bgcolor));
  max-height: 54vh;
    height: 52vh;
    min-height: 50vh;
}
/* hero plate line animtion */
 .platesLine {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  overflow: hidden;
  position: absolute;
  top: 1vh;
  left: 0;
  width: 100%;
   height: 12vh;
   background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 96%, var(--bgcolor)),
    linear-gradient(90deg, var(--bgcolor), rgba(0, 0, 0, 0) 4%);
}
.hero .platesLine span {
  white-space: nowrap;
  display: block;
  z-index: -3;
 animation:moveLeft 62s linear infinite ;
}
.hero .platesLine img{

  height: 12vh;
  max-height: 16vh;
  min-height: 8vh;
  padding: 0;
  margin: 0 0.4em;
}
/*hero test*/
figure.hero figcaption {
  text-align: center;
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.hero figcaption h2{
  font-size: var(--text-28px);
  font-weight: 500;
  letter-spacing: 0.002em;
  color:var(--purple-mid-300);
}
.hero figcaption h3{
  font-size: var(--text-24px);
  font-weight: 400;
  letter-spacing: 0.002em;
  color:var( --light-purple-600);
}
.hero figcaption h4{
  font-size: var(--text-20px);
  color:var( --purple-text-deep);
  line-height: 2;
  letter-spacing: 0.12vw;
}
.hero figcaption h5{
  font-size: var(--text-12px);
  color:var(--gray-deep-purple-600);
  line-height: 1.2;
  letter-spacing: 0.12vw;
  font-family: var(--secondary-font);
}
section.intro {
    grid-area: intro;
    position: relative;
    overflow: hidden; 
    margin-right: -18%;
    min-height: 362px; /*svg min size */
    padding: 2rem;
  }


  section.intro .ellipse-bg {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) scale(1.42);
    z-index:-1;
  }
  
  section.intro article {
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    z-index: 1;
    font-size: var(--text-20px);
    line-height: 1.4;
    max-width: 80%;
    position: absolute;
    top: 50%;
    right: 18%;
    color: var(--light-purple-600);
  
  }
  



/*PACKAGE CARD START*/
section.package_cards{
  grid-area:package_card;
  /*border: 4px solid rgb(217, 73, 195);*/
  }
.package_cards h3{
  font-size: var(--text-20px);
  color: var(--purple-text-deep);
  line-height: 1.2;}

  .package_cards p{
    font-family: var(--secondary-font);
    line-height: 2.8;
    font-size: var(--text-12px);
  }
.package_cards{
  width: 100%;
  height: fit-content;
  display: block;
  border-radius: var(--text-6px);
  }
a.package_card{
  margin: 2vh 0 4vh;
  display: block;
  border-bottom: 1px solid var(--purple-mid-300);
  border-right: 1px solid var(--purple-mid-300);
  border-radius:  var(--text-6px);}
  a.package_card:last-child{
    margin: 2vh 0 ;
  }
.pakage_img{height: 22vh;
  background-image: url(./src/zollim.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: block;
  border-radius: var(--text-6px) var(--text-6px) 0 0;
  }
  #grilman_img {
    background-image: url(./src/grilman_meal_page_header.jpg);
  }
    #tabun_img {
    background-image: url(./src/tabun.png);
  }
a.package_card .package_info{
  background-color: var(--bgcolor-100);
  padding: 1.4vh 1vh 2.2vh 1vh;
  border-radius: 0 0 var(--text-6px) var(--text-6px);
  }
  .package_info_top {
    display: flex;
   justify-content: space-between;
   align-items: baseline;
   flex-wrap: nowrap;
   flex-direction: row;}
.package_info_top h3{
  font-size: var(--text-24px);
  color: var(--light-purple-600);
  line-height: 2;
}
.package_info_top h5{
  font-size: var(--text-10px);
  color: var(--gray-deep-purple-400);
}
.package_info_top h5 b{
  font-size: var(--text-14px);
  color: var(--light-purple-200);
  font-weight: 500;
  margin-left: 0.8vw;
}
a.package_card aside {
    display: flex ;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;}
a.package_card aside h4{
  font-size: var(--text-14px);
  color: var(--gray-deep-purple-300);
  }
a.package_card aside h4 b{
  color: var(--light-purple-700);
    font-weight: 600;
  }
  a.package_card aside i{
    color: var(--purple-dark-bg400);
    background-color: var(--bgcolor-200);
    border-radius: 100%;
    padding: 0.8vh;
    width: var(--text-32px);
    height: var(--text-32px);
  }
    a.package_card aside i#pizza_icon{
    transform: rotate(90deg);
  }
   a.package_card aside i#meat_icon{
        transform: rotate(260deg);
  }


/*  PACKAGE CARD END*/

/*SOUCE AREA START*/
section.souce
{grid-area:souce;
  margin-top: 4rem;
 /*  border: 4px solid green; */

}
  section.souce h5 { 
/*width: 80%;*/
    font-size: var(--text-20px);
    line-height: 1.4;
    text-align: center;
    /*transform:translateX(-2rem);*/
  }
  section.souce h5 span{
    font-weight: 500;
    font-size: var(--text-32px);
  }
  section.souce .soucepic{
   position: relative;
  width: 18rem; 
  aspect-ratio: 1 / 1;
    margin: 4rem auto;
  }

  section.souce .soucepic img,
    section.souce .soucepic svg{
   position: absolute;
  top: 0;
  left: 58%;
  transform: translateX(-50%);
  max-width: 100%;
  height: auto;
  }
  section.souce .soucepic svg {
  z-index: 1;
}

section.souce .soucepic img {
  z-index: 2;
      left: 48%;
    top: 4%;
}

   section.souce p{
   font-size: var(--text-14px);
   font-family: var(--secondary-font);
   margin: 2vh 0 1.6vh;
   line-height: 1.6;
   }
   section.souce p small{
    font-size: var(--text-10px);
    }
.souce_cards_area{
   display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
    justify-items: center;
     }
  a.souce_card {
    width: 5rem;
    max-width: 4.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
margin-bottom: 2rem;
    justify-content: space-around;}

a.souce_card .souce_op_pic{
  position: relative;
} 

a.souce_card .souce_op_pic img{
  position: absolute;
  top: 0.4rem;
  left: 0.2rem;
}
a.souce_card h3{
  font-size: var(--text-12px);
  text-align: center;
  color: var(--light-purple-400);
}
a.souce_card p{
  font-size: var(--text-10px);
font-family: var(--secondary-font);    
margin: -0.02rem 0;
}
a.souce_card p small{
  font-size: var(--text-8px);

}
a.souce_card .souce_price{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-direction: row;
  width: inherit;
  padding: 0 1vw;
  margin: 0 0.8vw;
}
a.souce_card .souce_price h4{
    font-size: var(--text-10px);
    color: var(--light-purple-100);
  }  
 a.souce_card .souce_price p{
    font-size: var(--text-8px);
  } 
/*SOUCE AREA END*/

section.CTA{
  grid-area:CTA;
 /* border: 4px solid rgb(234, 234, 55);*/
  text-align: center;
  padding: var(--text-area-margin);
}
section.CTA h3{
  font-size:var(--text-32px);
  line-height: 1.2;
  color: var(--purple-mid-300);
  margin-bottom: 3.2vh;
}
section.CTA a{
  line-height: 1.2;
  color:var(--purple-text-deep);
}
section.CTA a .svg-container {
  height: 8vh;
}

/*DEAL AREA START*/
section.deal{
  grid-area:deal;
/*  border: 4px solid rgb(49, 246, 92); */
background-color: var(--purple-mid-300);
padding: 2.4rem 1rem;
  }

  section.deal h3{
  font-size: var(--text-22px);
    margin: 2vh 0;
    line-height: 1.4;
  color: var(--bgcolor);}
    section.deal p{
      line-height: 1.32;
      color: var(--bgcolor);
    font-family: var(--secondary-font);}
 section.deal a.deal_card {
    display: flex;
    flex-direction: column;
    align-items: center;
        margin: 2vh 0;
 } 
 section.deal .deal_card .deal_info{  
    font-weight: 500;
    box-sizing: border-box;
    border-radius: var(--text-6px);
    width: 72vw;
    text-align: center;
    background-color:  var(--bgcolor-100);
    color: var(--light-purple-100);
    padding: 1.2vh;
  }
 
  section.deal .deal_card .deal_info h3{
      font-size: var(--text-22px);
      margin: 0 0 0.2vh 0;
      color: var(--light-purple-400);
    }
  section.deal .deal_card .deal_info h4  {  
        font-size: var(--text-36px);
      }
  section.deal .deal_card .deal_info h4 b {    
    font-size: var(--text-12px);
    margin-right: 1vw;
    font-family: var(--secondary-font);
    letter-spacing: 0.12vw;
  }
  section.deal .deal_card .deal_info span
  {font-size: var(--text-10px);
  font-weight: 500;
  letter-spacing: 0.22vw;
      color: var(--light-purple-700);
  }
  section.deal .deal_card aside {
    display: flex ;
        width: 72vw;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.4vh;
        align-items: center;
  }
  section.deal .deal_card aside h5
  {    
  font-size: var(--text-10px);
color: var(--bgcolor);font-weight: 500;
letter-spacing: 0.02rem;}

 section.deal .deal_card .deal_info h5
    {
      font-size: var(--text-10px);
    }

section.CTA2{
        grid-area:CTA2;
       /* border: 4px solid rgb(234, 234, 55);*/
        text-align: center;
        padding: var(--text-area-margin);
      }
 
section.CTA2 h3{
  font-size: var(--text-24px);
        line-height: 1.4;
}
section.CTA2 a svg{
height: 5.2vh;
    margin: 1.2vh auto;
}      
footer{
  grid-area: footer;
  margin: 0;
  padding: 0;
    background-color: var(--purple-mid-300);
      width: 100vw; /* תופס את כל רוחב המסך */
  margin-left: calc(-1 * 2.2vw); /* מבטל את הריווח שנוצר מהmargin של body */
  margin-right: calc(-1 * 2.2vw);
  /*border: 1px solid green;*/
}

footer nav a svg {
  height: 5.2vh;
}

footer nav{

  padding: 4vh 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

}
 
footer nav a.info_chef{
  color: var(--bgcolor);
  text-align: center;
}


/*____________________________________________________*/
/*MAEL PAGE*/

body.layout_menu{
  grid-template-areas:
'header' 
'hero' 
'info' 
'option' 
'footer';
margin: 0 2.2vw 0;
}


body.layout_menu header {
  grid-area: header;
  position: relative;
  margin: 0;
  height: 48vh;
  overflow: visible;
  display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

body.layout_menu header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2.2vw; 
  width: 100vw; 
  height: 100%;
  background-image: url("./src/zollim_meal_page_header.jpg");
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
  z-index: -1;
}
 #menu_grilman header::before {
  background-image: url("./src/grilman_meal_page_header.jpg");
}
body.layout_menu header button{
  background-color: unset;
  border: none;
  text-decoration: none;
  display: inline-block;
  margin: 4vh 1vw;
  cursor: pointer;}
  body.layout_menu header a{
  font-size: var(--text-36px);
  color: var(--bgcolor-100);
  font-weight: 600;
  margin: 4vh 1vw;
}

/*meal page hero*/
body.layout_menu .hero{
  grid-area:hero;
}
body.layout_menu .hero h1{
  font-size: var(--text-28px);
    color: var(--light-purple-100);
    font-weight: 500;
    text-align: center;
    margin: 2.8vh 0 0 ;
    letter-spacing: 0.04em;
}
body.layout_menu .hero h2{
  color: var(--gray-deep-purple-500);
    font-size: var(--text-12px);
    font-weight: 200;
    font-family: var(--secondary-font);
    text-align: center;
    line-height: 2.8;
    margin:0 0 1.8vh
}
.include {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}
.include_option{
background-color: var(--light-purple-200);
  border-radius: var(--text-6px);
  width: fit-content;
  position: relative;
  font-size: var(--text-26px);
  padding: 1vh 4vw;
  color: var(--bgcolor-100);
  overflow: visible;
}
.include_option img{
max-width: 72%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.include_option h6{
color: var(--light-purple-400);
position: absolute;
bottom: -3.2vh;
font-size: var(--text-12px);
right: 0;
}
.price{
border: 1px solid var(--bright-light-purple-700);
  border-radius: var(--text-6px);
  width: fit-content;
  padding: 2vh 4vw;
  margin: 8vh auto 4vh;
  text-align: center;
}

body.layout_menu .hero .price h1{
  margin:  0 0 0.6vh 0;
}
body.layout_menu .hero .price h1 span{
  font-size: var(--text-14px);
}
body.layout_menu .hero .price h6{
  font-size: var(--text-12px);
  padding-top: 0.8vh;
  font-family: var(--secondary-font);
}
body.layout_menu .hero .price h6 span{
  color: var(--bright-light-purple-700);
  font-weight: 600;}

/*info section*/

  section.info{
    grid-area:info;
  }
  .info p {
    max-width: 88vw ;
    line-height: 1.4;
    font-size: var(--text-18px);
    margin-bottom: 0.8vh;
  }
  
  /*menu options */
  section.option{
    grid-area:option;
    margin: 4vh 0;
}
.option p{
  font-size: var(--text-14px);
  line-height: 1.2;
}
.option nav{
      display: flex;
      justify-content: space-evenly;
      align-items: baseline;
      flex-direction: row;
    }
.extra-info {
  display: none;
  font-size: var(--text-12px);
  margin:  0 0 2vh 0;
  color: var(--gray-deep-purple-500);
} 

.option nav a {
  color: var(--gray-deep-purple-400);
  text-align: center;
  box-sizing: border-box;
  width: -webkit-fill-available;
  margin: 2vh 0 4vh;
  padding: 0.6em 0 ;
  border-bottom: 0.008em solid var(--purple-mid-100);
  border-left: 0.008em solid var(--purple-mid-100);
}  
.option nav a:last-child{
  border-left:none;
}
.option nav a.selected{
  font-weight: 400;
  color:var(--bgcolor-100);
  background-color: var(--light-purple-100);
  border-bottom:none;
  border-left:none;
}
a.meal_card{
  display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;  border-radius: var(--text-6px);
  background-color: var(--bgcolor-100);
  padding: 2vh 4vw;
  width: 88vw;
  margin: 1.2vh auto;
}
a.meal_card img {
  max-width: 10vh;
}
a.meal_card .meal_title{
  margin: 0 4vw;}
a.meal_card .meal_title h4{
  font-size: var(--text-18px);
  color: var(--light-purple-400);
}
a.meal_card .meal_title h5{
  font-size: var(--text-12px);
  line-height: 1.6;
  color: var(--gray-light-purple-500);
  letter-spacing: 0.02em;
}
#show-all {
  display: none; 
  background-color: var(--bright-light-purple-400);
  border: none;
  font-weight: 600;
  padding: 0.4em 0.8em;
  font-size: var(--text-14px);
  color: var(--white);
  letter-spacing: 0.06em;
  margin: 4vh auto 2vh ;}


  body.layout_menu footer{
    grid-area:footer;
  /*  border: 4px solid rgb(97, 57, 7);*/
  }
   
  /*--------------------------------------------------*/
  /* meal page MEAL PAGE  */

  body.layout_meal {
    grid-template-areas:
'header' 
'meal' 
'meal_info' 
  }


  body.layout_meal  header {
    grid-area:header;
    margin: 2vh 1vh;
    display: flex;
    justify-content: flex-end;
  }
  body.layout_meal  header a {
    font-weight: 400;
    font-size: var(--text-20px);
    background-color: var(--bgcolor-100);
    width: fit-content;
    padding: 0.4em 0.6em;
    border-radius: 100%;
  }

  body.layout_meal figure{
    grid-area: meal;
    display: flex
    ;
        flex-direction: column;
        align-items: center;
  }
  body.layout_meal figure figcaption{
    margin-bottom: 2vh;
  }

  body.layout_meal figure figcaption h1 {
    font-size: var(--text-32px);
    color: var(--light-purple-600);
    text-align: center;
    line-height: 1.4;
  }
  body.layout_meal figure figcaption h6 {
    color: var(--gray-deep-purple-200);
    font-size: var(--text-18px);
    text-align: center;
  }
  body.layout_meal figure img{
    max-width:42vh;
  }

.meal_info{
  grid-area:meal_info;
  margin: var(--text-area-margin);
}
 h4.tag{
  color: var(--blue);
  border: 0.02vw solid var(--blue);
  width: fit-content;
  padding: 0.2vh 0.8vw;
  font-size: var(--text-10px);
  font-weight: 600;
  letter-spacing: 0.22vw;
  background-color: var(--blue-light);  
}
 h4.tag.tag-dairy {
  background-color: var(--blue-light);
  color: var(--blue-dark);
  border: 1px solid var(--blue-dark);
}
 h4.tag.tag-meat {
  background-color: var(--red-light);
  color: var( --red-dark);
    border: 1px solid var( --red-dark);
}
 h4.tag.tag-parve {
  background-color: var(--green-light);
  color: var(--green-dark);
      border: 1px solid  var(--green-dark);
}

.meal_info h5, .meal_info h3  {
  font-size: var(--text-12px);
  line-height: 1.8;
}
.meal_info p{
  max-width: 88vw ;
  line-height: 1.4;
  font-size: var(--text-18px);
  margin-bottom: 0.8vh;
}
body.layout_meal .meal_info .ingredients{
  display: flex;
  flex-wrap: wrap;
}

body.layout_meal .meal_info .ingredients .ingredient{    
    color: var(--bright-light-purple-600);
    border: 0.02vw solid var(--bright-light-purple-100);
    padding: 0.4em 0.6em;
    border-radius: var(--text-32px);
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1vh;
}
 body.layout_meal .meal_info .ingredients .ingredient h6{
  font-size: var(--text-12px);
  letter-spacing: 0.02vw;
  font-weight: 400;
  padding-right: 0.4em;  
    color: var(--light-purple-400)

}



.layout_home.intro {
  grid-area: intro;
  position: relative;
  overflow: hidden; 
  margin-block: -0.8rem; 
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.layout_home.intro.ellipse-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 150%; 
  height: 100%; 
  transform: translateX(20%);
  z-index: 0;
  pointer-events: none;
}

.layout_home.intro.ellipse-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.layout_home.intro.intro-content {
  position: relative;
  z-index: 1;
  padding-inline: 1rem;
  color: white;
  text-align: center;
}


.svg-container {
  max-width: 100%;
  overflow: hidden;
}








/*Responsive design (the site was design for mobile - here small are adjsment )*/

/*TABLET*/

@media screen and (min-width: 768px) {
body{
margin:2.2vw 2.2vw 0 2.2vw ; 
 grid-gap: 6rem;
}
/* ------ HOME PAGE -------*/
/*HEADER*/
header p.logo {
  font-size: var(--text-16px);
line-height: 1.6;
}
header p.slogan {
  font-size: var(--text-24px);
}

.hero figcaption h2 {
    font-size: var(--text-44px);
  line-height: 1.4;
}
.hero figcaption h3 {
    font-size: var(--text-32px);
  }
  .hero figcaption h4 {
    font-size: var(--text-24px);
    letter-spacing: 0.06vw;
}

/*HERO*/
figure.hero{
      max-height: 72vh;
    height: 68vh;
}
.hero_chef_img{
    max-height: 62vh;
    height: 58vh;
}
.hero .gradient{
      max-height: 62vh;
    height: 58vh;
}
.hero svg{
    transform: translateX(-50%) scale(1.4);
}
/*INTRO*/
section.intro {
 min-height: 465px;   
 margin-right: -6%;
}
section.intro .ellipse-bg{
  transform: translateY(-50%) scale(1.8);
}
section.intro article {
      right: 16%;
      font-size: var(--text-32px);
          line-height: 1.6;
}

/*PACKAGE*/
.package_cards h3 {
    font-size: var(--text-24px);
  }
.package_cards p {
    line-height: 2.8;
    font-size: var(--text-16px);
}
.pakage_img {
    height: 28vh;
  }
.package_cards h3 {
        font-size: var(--text-32px);
      }
.package_info_top h5 {
    font-size: var(--text-18px);
  }
a.package_card aside h4 {
    font-size: var(--text-18px);}


/*CTA*/
section.CTA h3 {
    font-size: var(--text-52px);
    line-height: 1.32;
  }

  /*DEAL*/
  section.deal h3 {
    font-size: var(--text-36px);
  }
  section.deal p {
    line-height: 1.52;
  font-size: var(--text-22px);
  }
  section.deal .deal_card .deal_info h3 {
    font-size: var(--text-26px);
  }
section.deal .deal_card .deal_info h4 {
    font-size: var(--text-52px);
    line-height: 1.42;
}
section.deal .deal_card .deal_info h4 b {
    font-size: var(--text-22px);
     margin-right: 0;
    }
section.deal .deal_card .deal_info span {
    font-size: var(--text-18px);
    line-height: 1.6;
    letter-spacing: 0.12vw;
  }
section.deal .deal_card aside h5 {
    font-size: var(--text-14px);
}

section.deal .deal_card aside h4{
  font-size: var(--text-14px);
}

/*SOUCE*/
section.souce h5 {
    font-size: var(--text-36px);
  }
  section.souce .soucepic {
    width: 24rem;
    margin: 4.8rem auto;
  }

  a.souce_card {
    width: 20vw;
    max-width: 22vw;
    margin: 2.8rem auto;
  }
  a.souce_card .souce_op_pic {
    margin: 0.42vh auto;
  }
 section.souce p {
    font-size: var(--text-24px);
    line-height: 1.42;
  }
  section.souce p small {
    font-size: var(--text-14px);
  } 
  a.souce_card h3 {
    font-size: var(--text-22px);
    line-height: 1.32;
    
  }
  a.souce_card p {
    font-size: var(--text-14px);
            line-height: 1.28;
  }
  a.souce_card .souce_price {
    padding: 0.6vh 1vw;
  }
a.souce_card .souce_price h4 {
    font-size: var(--text-12px);
}
  a.souce_card .souce_price p {
    font-size: var(--text-14px);
  }
/*CTA2*/
section.CTA2 h3{
  font-size: var(--text-44px);
        line-height: 1.4;
}
section.CTA2 a svg{
height: 8.2vh;
    margin: 2.4vh auto;
}      

/* ------- MENU PAGE ------ */
/*HEADER*/
body.layout_menu header a {
    font-size: var(--text-56px); 
   }

 /*HERO*/
body.layout_menu .hero h1 {
    font-size: var(--text-68px);
    margin: -2.8vh auto 2.4vh;
  }
body.layout_menu .hero h2 {
    font-size: var(--text-18px);
    line-height: 2.8;
    margin: 0 auto 2.4vh;
}
.include {
    margin-bottom: 8vh;
}
.include_option {
    font-size: var(--text-52px);
    padding: 1vh 2.2vw 1vh 6.2vw;
}
.include_option img {
     max-width: 100%; 
    margin-right: 1vw;
  }
.include_option h6 {
    font-size: var(--text-22px);
  }
  /*HERO*/
body.layout_menu .hero .price {
    padding: 2.4vh 4vw;
    margin: 8.6vh auto 0;
  }
body.layout_menu .hero .price h1 span {
    font-size: var(--text-18px);
    font-weight: 400;
    letter-spacing: 0.12rem;
  }
body.layout_menu .hero .price h6 {
    font-size: var(--text-16px);
    padding-top: 1.8vh;
  }

  /*OPTION*/
body.layout_menu .info p {
    line-height: 1.62;
    font-size: var(--text-28px);
}
body.layout_menu .option p {
    font-size: var(--text-18px);
    line-height: 1.62;
  }
  body.layout_menu .option nav {
    margin-top: 2.4vh;
  }
  body.layout_menu .option nav a {
    font-size: var(--text-22px);
  }

   body.layout_menu .option .extra-info {
    display: none;
    font-size: var(--text-16px);
    margin: 0 0 3.2vh 0;
  }

  a.meal_card {
    margin: 3.2vh auto;
  }
a.meal_card .meal_title h4 {
    font-size: var(--text-32px);
    line-height: 1.62;
  }
  a.meal_card .meal_title h5 {
    font-size: var(--text-18px);
    line-height: 1.6;
  }
  #show-all {
   font-size: var(--text-18px);
   letter-spacing: 0;
  }

 /*--------MEAL PAGE---------*/
 body.layout_meal {
  grid-gap: 4rem;
 }

 body.layout_meal header a {
      font-size: var(--text-28px);
  }
body.layout_meal figure img {
    max-width: 38vh;
  }   
  body.layout_meal figure figcaption h1 {
    font-size: var(--text-36px);
  }   
body.layout_meal figure figcaption h6 {
    font-size: var(--text-22px);
  }
 body.layout_meal .meal_info h4 {
  font-size: var(--text-14px);
 }
  body.layout_meal .meal_info h5, .meal_info h3 {
    font-size: var(--text-16px);
    line-height: 2.8;
  }
 body.layout_meal .meal_info p {
    font-size: var(--text-26px);
}
body.layout_meal .meal_info .ingredients .ingredient h6 {
    font-size: var(--text-22px);
  }
}




@media screen and (min-width: 1024px) {
/*--------HOMEPAGE-------- */
/*INTRO*/
section.intro {
 min-height: 668px;   
 margin-right: -6%;
}
section.intro .ellipse-bg{
  transform: translateY(-50%) scale(2.6);
}
section.intro article {
      right: 16%;
      font-size: var(--text-32px);
          line-height: 1.6;
}

/*PACKAGE*/
.package_cards{
display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: baseline;
    justify-items: stretch;
    justify-content: space-evenly;}
.package_cards h3,
.package_cards p {
 grid-column: 1 / -1;
 
}
a.package_card .package_info {
    padding: 1.4vh 2.4vh 2.2vh 2.4vh;
  }
/*CTA*/
section.CTA h3 {
    font-size: var(--text-52px);
    line-height: 1.32;
  }

  /*DEAL*/
  section.deal h3 {
        line-height: 1.28;
        margin-bottom: 4vh;
  }
  section.deal p {
  max-width: 68vw;
  }
  
  section.deal a.deal_card {
    margin: 6.2vh 0;
  }

section.deal .deal_card .deal_info {
    width: 62vw;
    padding: 2.4vh;
  }
  section.deal .deal_card aside {
    width: 62vw;
    padding: 1.2vh 0;
  }
/*--------MENU PAGE-------- */
    .include_option img {
        max-width: 72%;
      }

/*--------MEAL PAGE---------*/

}