body{
    margin: 0;
    padding: 0;
}

/* HEADER SECTION  */

#head{
    display: flex;
    justify-content: center;
    margin-top: 4px;
}
#head a{
    text-decoration: none;
    font-weight: bold;
    margin-left: 35px;
    color: grey;
    padding: 5px;
}
#head a:nth-child(1):active{
    color: green;
    border-bottom: 2px solid green;
}
#head a:nth-child(2):active{
    color: skyblue;
    border-bottom: 2px solid skyblue; 
}
#head span{
    color: rgb(44, 221, 21);
}
#head #lgreen{
    color: rgb(18, 58, 20);
}

/* NAVBAR SECTION  */

nav{
    /* height: 65px; */
    margin-bottom: 10px;
    height: auto;
    position: sticky;
    top: 0px;
    left: 30px;
    background-color: rgb(255, 253, 247);
    padding: 10px 0px;
    z-index: 100;
    /* transition: all 5s ease-in-out;   */
}
nav >div{
    width: 96%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 3fr 6fr;
    /* justify-content: space-between; */
    align-items: center;
    
 /* background-color: royalblue; */
}
#nav-menu{
    display: flex;
    justify-content: space-between;
    
    /* background-color: whitesmoke; */
}

nav img{
    width: 110px;
}
nav a{
    text-decoration: none;
    padding: 15px;
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    color: black;
    padding-top: 10px;
    vertical-align: middle;
    font-size: 0.9em;
}
nav .right>a:nth-child(2){
    background-color: #096dea;
    color: white;
    padding: 9px 15px;
    font-size: 0.9em;
    
}
nav a:hover{
    color:#096dea ;
}
nav .right>a:nth-child(2):hover{
    /* position: relative; */
    bottom: 2px;
    left: 2px;
    box-shadow: 0px 0px 2px 2px #096dea;
}
.burger{
    position: absolute;
    top: 35px;
    cursor: pointer;
    display: none;
    right: 5%;
}
.line{
    width: 33px;
    background-color: black;
    height: 4px;
    margin: 5px 3px;
}

/* SECTION MAIN  */

#main{
    background-color: #fef9ea;
    z-index: -1;
    width: 100%;
    /* background-color: red; */
    margin-top: 20px;
   height: 700px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(1,1fr);
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    
}
#card1{
    padding:63px 63px 0px 63px;
    padding-top: 20px;
    width: 100%;
    /* height: 100%; */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    /* align-items: center; */
}
#card1 >div{
    margin-top: 0px;
}
#card1 h1{
    font-size: 4.2em;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    opacity: 0.8;
    /* margin-top: -60px; */
}
.small-head{
font-size: 1.5em;
font-weight: bold;
margin-top: 0px;
}
#card1 form{
    display: grid;
    grid-template-columns: 5fr 3fr 3fr;
    grid-gap: 20px;
}
#card1 form label{
    font-weight: bold;
    opacity: 0.8;
    
}
#card1 form input{
    width: 100%;
    margin-top: 5px;
    height: 70%;
    padding: 5px;
    border: none;
    border-bottom: 1px solid rgb(172, 163, 163);
}
#card1 #explore-meals{
    padding: 5px 0px;
    position: relative;
    top: 17px;
    height: 95%;
    font-size: 1.2em;
    color: white;
    background-color: #096dea;
}
#card1 button{
    padding: 8px 15px;
    position: relative;
    top: 17px;
    height: 35px;
    border: none;
    font-size: 1em;
    color: white;
    background-color: #096dea;
    display: none;

}
#card1 #explore-meals:hover{
    /* transition: all 6s ease-out; */
    position: relative;
    bottom: 2px;
    left: 2px;
    box-shadow: 0px 0px 2px 2px #096dea;
}
#card1 .bottom-para{
    margin-top: 54px;
    font-size: 0.86em;
    font-weight: 540;
}

#card2{
    background-image: url(https://media.istockphoto.com/photos/beautiful-afro-american-woman-eating-vegetable-salad-at-home-picture-id1276382999?b=1&k=20&m=1276382999&s=170667a&w=0&h=8yWCqkYk-cm1gD1MQTDnLJIy6WtzpDboWf1SaqD7O1Q=);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: auto;
    
}
#card2 >div{
    position: absolute;
    right: 20px;
    bottom: 170px;
    /* bottom: 467px; */
    margin-right: 20px;
    font-weight: bold;
    color:white;
    text-align: right;
}
#card2 >div >h2{
    margin-bottom: -14px;
}
#card2 >div >a{
    text-decoration: none;
    background-color: #096dea;
    color: white;
    padding: 10px;
}
#card2 >div >a:hover{
    position: relative;
    bottom: 2px;
    left: 2px;
    box-shadow: 0px 0px 1px 1px #096dea;
}


/* SECTION WORK  */

#work{
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background-color: rgb(255, 253, 247);
    padding: 30px 0px;
}
#work h1{
    font-size: 3em;
}
 #work #container{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
#work  p{
    font-size: 14px;
    line-height: 0.67em;
    font-weight: 550;
    color: #9c9898;
}

/* MENU SECTION  */
#menu{
    background-image: url(https://assets-global.website-files.com/5d03b4e130118314af624b20/5d94e04ff2b857688f7138b6_home_image2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 40px 0px;
    margin: 60px 0px;
    width: 100%;
    margin-left: 0px;
}
#menu> #card{
    width: 50%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    margin: 30px auto;
    text-align: left;
    padding: 10px 40px;
    font-family: 'Roboto', sans-serif;
}
#menu #card h1{
    font-size: 3.5em;
    margin-top: 30px;
    margin-bottom: -10px;
}
#menu #card p{
    font-size: 1.2em;
    line-height: 27px;
    color: #333;
    
}
#menu #card .small-card{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
    margin-top: 40px;
}
#menu #card .small-card img{
    width: 100%;
    border-radius: 20px;
}
#menu #card .small-card h2{
    font-size: 1.1em;
    color: rgb(48, 48, 48);
}
#menu #card .small-card p{
    font-size: 1em;
    color: #357471;
    line-height: 23px;
    margin-top: -8px;
}
#menu #card button{
    text-align: center;
    width: 100%;
    border: none;
    color: white;
    background-color: #096dea;
    font-size: 1.5em;
    padding: 10px;
    margin-bottom: 20px;
}
#menu #card button:hover{
    position: relative;
    bottom: 2px;
    left: 2px;
    box-shadow: 0px 0px 1px 1px #096dea;
}

/* PLAN SECTION  */
#plan{
    width: 100%;
    background-color:rgb(255, 253, 247) ;
    /* background-color: red; */
    margin-top: -60px;
}
#plan #container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
#plan #container h1{
    font-size: 2.37em;
    line-height: 5px;
}
#plan #container p{
    margin-top: 0px;
    font-size: 1.01em;
    line-height: 25px;
    font-family: 'Varela Round', sans-serif;
}
#plan #container p span{
    color:#357471 ;
}
#plan #container #card{
    display: grid;
    width: 95%;
    margin:40px auto;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 20px;
}
#plan #container #card img{
    width: 100%;
}
#plan #container #card h2{
    color:#357471 ;
    font-size: 2em;
}
#plan #container .light-teal{
    color: #357471;
    font-weight: bold;
    margin-top: -25px;
}

#plan #container button{
 font-size: 1.3em;
 font-weight: bold;
 color: white;
 background-color: #096dea;
 border: none;
 padding: 15px;
 margin-top: 10px;
}
#plan #container button:hover{
    position: relative;
    bottom: 2px;
    left: 2px;
    box-shadow: 0px 0px 1px 1px #096dea;
}


/* SECTION SAYING  */

#saying {
    width: 100%;
    background-color: rgb(255, 253, 247);
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 100px;
}
#saying .container{
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: 0.5fr 5fr 0.5fr;
    align-items: center;
    grid-gap: 20px;
}
#saying .container img{
    width: 50px;
    height: 50px;
    padding: 30px;
}
#saying .container #jscontainer{
    display: grid;
    width: 100%;
    margin: auto;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 60px;
}
#saying .container #jscontainer img{
    width: 50%;
    margin-bottom: 20px;
    padding: 0px;
}

#saying .container #jscontainer h2{
font-weight: 100;
font-family: 'Varela Round', sans-serif;

}
#saying .container #jscontainer p{
    font-family: 'Varela Round', sans-serif;
    line-height: 22px;
}
#saying .container #jscontainer .b-size{
    font-size: 1.3em;
    font-weight: 200;
}
/* SECTION DETAILS  */

#details{
    width: 100%;
    /* border: 2px solid black; */
    font-family: 'Roboto', sans-serif;
    
}
#details #container{
    width: 96%;
    margin: auto;
    display: flex;
}
#details #container >div:nth-child(1){
    background-color: rgb(255, 253, 247);
    width: 850px;
    margin-left: 40px;
    height: auto;
    margin-top: 260px;
    padding: 25px 40px;
    box-sizing: border-box;
}
#details #container >div:nth-child(1) h1{
    font-size: 3.4em;
    opacity: 0.83;
}
#details #container >div:nth-child(1) p{
    font-size: 1.2em;
    font-family: 'Roboto', sans-serif;
    margin-top: -25px;
    line-height: 30px;
}
#details #container >div:nth-child(1) button{
    padding: 15px;
    color: white;
    font-size: 1.2em;
    background-color: #096dea;
    border: none;
    font-family: 'Varela Round', sans-serif;
    /* font-weight: bold; */
}
#details #container >div:nth-child(1) button:hover{
    position: relative;
    bottom: 2px;
    left: 2px;
    box-shadow: 0px 0px 1px 1px #096dea;
}

#details #container >div:nth-child(2){
    /* content: ""; */
    background-image: url(https://media.istockphoto.com/photos/two-fresh-salad-bowls-picture-id919666108?b=1&k=20&m=919666108&s=170667a&w=0&h=7_YJbzzzL6mHDyiTZ-U34hQPZ4R_rHVHcCoLLaemye8=);
    position: absolute;
    right: 30px;
    height: 800px;
    width: 1200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}


/* START SECTION  */

#start{
    margin-top: 260px;
    font-family: 'Roboto', sans-serif;
}
#start #container{
    width: 90%;
    height: 300px;
    
}
#start #container  div:nth-child(1){
    background-image: url(https://media.istockphoto.com/photos/pasta-kraft-brown-paper-carton-box-take-away-photography-picture-id1329984385?b=1&k=20&m=1329984385&s=170667a&w=0&h=9bixMleflueBbU5A7pog-Wt0NL1FKCGaAtCrcXGDjfc=);
    position: absolute;
    left: 30px;
    height: 800px;
    width: 1020px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    /* height: 400px; */
    /* height: auto; */
}
#start #container  div:nth-child(2){
    background-color: rgb(255, 253, 247);
    width: 780px;
    position: absolute;
    right: 40px;
    margin-right: 40px;
    height: auto;
    margin-top: 95px;
    padding: 25px 40px;
    box-sizing: border-box;
}
#start #container  div:nth-child(2) h1{
    font-size: 3.4em;
    opacity: 0.83;
    margin-bottom: 15px;
}
#start #container  div:nth-child(2) form{
display: flex;
flex-wrap: wrap;
}
#start #container  div:nth-child(2) input{
    width: 650px;
    height: 45px;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid grey;
    padding: 5px 10px;
    font-size: 1.2em;
}

#start #container  div:nth-child(2) #get-started{
    background-color: #096dea;
    color: white;
    width: 500px;
    font-size: 1.2em;
}
#start #container  div:nth-child(2) #get-started:hover{
    position: relative;
    bottom: 2px;
    left: 2px;
    box-shadow: 0px 0px 1px 1px #096dea;
}
#start #container  div:nth-child(2) p{
    line-height: 10px;
    font-family: 'Varela Round', sans-serif;
}
#start #container  div:nth-child(2) a{
    color:#096dea ;
}

/* BOTTOM-BAR SECTION  */
#bottom-bar{
    margin-top: 200px;
    margin-top: 500px;
    background-color: rgba(238, 227, 227, 0.392);
    /* background-color: red; */
    border-bottom: 1px solid rgb(141, 136, 136);
}

#bottom-bar #container{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    width: 90%;
    margin: auto;
    height: auto;
    padding: 30px;
    grid-gap: 40px;
    justify-content: space-around;
   ;
    align-items: center;
}
#bottom-bar #container img{
    width: 100%;
    padding: 30px;
}

/* FOOTER SECTION  */

footer{
    padding: 50px;
    font-family: 'Varela Round', sans-serif;
}
footer a{
    text-decoration: none;
    color: #666;
    margin: 10px 0px;
    font-size: 0.9em;
}
footer img{
    width: 55%;
}
footer #container{
    width: 70%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 50px;
    margin: auto;
}
footer #container > div{
    display: flex;
    flex-direction: column;
}

footer #container > div > div{
    display: flex;
}
footer #container > div > div img{
    height: 20px;
    width: 20px;
    margin: 0px 5px;
    opacity: 0.7;
}
footer #container .top{
    font-size: 1.2em;
    /* font-weight: bold; */
}