body
{   background-color: #f6f5f2;
    box-sizing: border-box;
    

   
}

.header_index
{   position: relative;
    background:url("../image/background.jpg");
   
    background-position: center;
    min-height: 600px;
    width:100%;
    

   
}

.header_about
{   position: relative;
    background:url("../image/about.jpg");
   
    background-position: center;
    min-height: 400px;
    width:100%;
    

   
}

.header_recipe
{   position: relative;
    background:url("../image/recipe.jpg");
   
    background-position: center;
    min-height: 400px;
    width:100%;
    

   
}

.header_contact
{   position: relative;
    background:url("../image/background4.jpg");
   
    background-position: center;
    min-height: 400px;
    width:100%;
    

   
}

.header_privacy
{   position: relative;
    background:url("../image/background5.jpg");
   
    background-position: center;
    min-height: 400px;
    width:100%;
    

   
}

#header_nav 
{
    margin-right: 20%;
   
}
#header_nav  li
{
    padding-right:30px;
}
    
#header_nav  li a
{
    font-size: 20px;
}

.banner
{
text-align: right;
}

.banner_about
{
    
text-align: center;
}



.banner_about h2
{

font-size:60px;
font-weight: bolder;

}

.heading
{
   position: relative;
   background: rgb(255, 197, 71);
   width:400px;
   left:50%;
   transform: translateX(-50%);
   
}



#change
{
color:white;
font-size:60px;
font-weight: bolder;
}

.recipes

{  margin:80px 0 80px 0;
   padding-top:20px;
   padding-bottom:20px;
   padding-left:5%;
   padding-right: 3%;

}

.recipes h3

{
 color:#797777;
margin-bottom: 30px;
}

.recipes h5

{
 color:#803f3f;
 margin-bottom: 30px;
 font-size: 24px;
 white-space: nowrap; 
 width: 95%; 
  overflow: hidden;
  text-overflow: clip;


}
.recipes h5:hover

{
  white-space: normal;
  overflow: unset;
  


}

.popular img

{
  margin-top:50px;
 
 }

.recipe_card
{
    width:18rem;
    height:350px;
}
.recipe_card:hover 
  {
 
    min-height: 450px;
  }
  .card-text:hover
 {
 
 
  white-space: normal; 
  overflow: unset;
  min-height: 300px;


}


 .card-text
 {
 
  height:50px;
  width: 95%; 
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;


}

.card-tittle
 {
 
 

}



.about_text
{
margin-top:20px;
margin-bottom:100px;

 
}
.about_text h2
{
margin-top:20px;
margin-bottom:30px;
padding-left:40px;
font-size: 50px;
color:rgb(55, 55, 56);

 
}

.about_text p
{

 font-size:25px;
 padding-left: 40px;
 padding-right: 40px;
 text-align: justify;
 color: #646363;


 
}

.parallax
{


background: url("../image/background3.jpg"); 
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width:100%;

height:300px;
margin: 50px 0 100px 0;



}

.home_recipes
{
  text-align: center;

}

.special
{
position: relative;
min-height:300px;
width:1000px;
box-sizing: border-box;
left:50%;
right:50%;
transform: translateX(-50%);
background: white;
margin:50px;

}

 .special_text
{
  
 display: inline-block;
 width: 50%;
 padding:10px;

 }
 .special_text h2
 {
 padding-bottom: 30px;
 }
 
 
 .special_text p
 {
 font-size: 20px;
 }

 .contact
 {
  padding-top:40px;
  padding-bottom:40px;

  
 }

 .contact h3
 {
  text-align:center;
  margin-bottom:40px;
 }


 .contact p
 {
  text-align:justify;
  font-size: 20px;
 
 }



#icons

{
  text-align:center;
  font-size: 70px;
}

.more_recipe
{
 text-align: end;
 
}

.more_recipe button
{
 margin:20px;
 background: black;
 
}

.more_recipe button a 
{
 color:white;
 
}

.nutrition

{

background:#2e2e2e;
min-height: 300px;
width:100%;
color:white;
text-align: center;
font-size: 50px;

}

#first

{

color:#e9702a;
}

#second

{

  color:#2d835b;

}

#third

{

  color:#2ae9e0;

}


 .special_image
{ 
  display: inline-block;
  
  padding:10px;
}


.privacy_term
{ 
 
  margin:80px 0 80px 0;
}

.privacy_term h2
{ 
 
  margin:30px 0 20px 0;
}

.privacy_term h4
{ 
 
  margin:10px 0 10px 0;
}

.privacy_term h5
{ 
 
  margin:10px 0 10px 0;
}

.privacy_term p
{ 
  margin:10px 0 30px 0;
  text-align: justify;
  font-size:20px;
}

.privacy_term ul
{ 
 
  list-style-type: none;

}












.footer
{
    background: rgb(255, 254, 254);
    min-height:300px;
    width:100%;
    position: relative;
    margin:0;
    border-top: 16px solid rgb(226, 98, 98);
    border-top-right-radius: 100px;
    border-top-left-radius: 100px;
    color:rgb(0, 0, 0);
    padding: 5%;
}

.footer_col h2
{
    padding-bottom:10px;

}

.footer_col p
{
    padding-top:10px;
    padding-right: 20px;
    text-align:justify;
}

.footer_col p i
{
    
    padding-right: 5px;
    
}

.footer_col a
{
    
    padding-right: 20px;
    
}

.footer_col hr
{
    
   color:white;
    
}

.footer_col :hover
{
    
    color:rgb(223, 226, 19);
    
}

.footer_col a i
{
    
    font-size:23px;
    
}
.footer_col ul
{
    padding-top:10px;

    list-style-type: none;

}

.footer_col ul li a
{
    color:black;

}


/*
Slider
*/

@media (max-width: 300px) {
    .carosel-item {
      width: 100%;
    }
  }
  @media (min-width: 300px) {
    .carosel-item {
      width: 50%;
    }
    .special
    {
      width: 50%;
    }
  }
  @media (min-width: 500px) {
    .carosel-item {
      width: 33.333%;
    }
    .special
    {
      width: 33%;
    }
  }
  @media (min-width: 768px) {
    .carosel-item {
      width: 25%;
    }
    .special
    {
      width: 75%;
    }
  }
  .carosel {
    position: relative;
   padding:50px;
min-height:300px;
   
  }
  .carosel-inner {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
  }
  .carosel-item {
    display: inline-block;

    border-radius: 50%;
    width: 150px;
    height:150px;
  }

 


  .carosel-control {
    position: absolute;
    top: 40%;
    padding: 15px;
   
    transform: translateY(-50%);
    
   
    font-size: 30px;
    display: inline-block;
  }
  .carosel-control-left {
    left: 15px;
  }
  .carosel-control-right {
    right: 15px;
  }
  .carosel-control:active,
  .carosel-control:hover {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.8);
  }

  .feature
  {
     margin:80px 100px 80px 100px;
     /* text-align: center; */
  }



