p{
    font-family: "Vidaloka", serif;
    font-weight: 500;
    font-size: 25px;
    color: #504E76;
}
.section1 p{
    font-size: 25px;
}
.contact strong{
    text-align: center;
    font-family: "Vidaloka", serif;
    color: #262272;
    padding: 25px;
    font-size: 18px;
}
h1{
    font-family:"Playfair Display", serif;
    text-decoration: none;
    font-weight: 900;
    font-size: 65px;
    color: #081f5c;
}
h2{
    color:#364C84;
    font-family:"Playfair Display", serif;
    font-size: 30px;
    font-weight: 600;
    text-align: left;
}
body{
    background-color:#fcfaf8 ;
}
.container{
    display: grid;
    grid-template-areas:
        "header header header header"
        "picture picture  section1 section1  "
        "objectives objectives functions  functions "
        "about about quote quote  "
        "footer footer footer footer";
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: .15fr .5fr .56fr  .2fr  .25fr;
        grid-gap:15px;
        margin: 10px;
}
.picture{
    
    grid-area:picture;
    margin-left: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    

}
.picture img{ 
    padding: 40px;  
    max-width: 120%;
    height: auto; 
    border-radius: 15px;
        
    box-shadow: none;

}
header{
    grid-area: header;
    display:block;
    background-color: #edf1f6;
    margin:20px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 10%;
    
    border-radius: 25px;

}
/* nav css starts here */
#navArea li a{
    font-family: 'Courier New', Courier, monospace;
    font-weight: 200;
    font-size: 16px;
    color: #0f0f3d;
    text-decoration: none;
}

.navBar{
    list-style: none;
    display:flex;
    gap:20px
}
.navBar li{
    display: inline;
    padding: 0 20px;
    color:#081f5c;
}
.navBar li a{
    transition: all 0.3s ease 0s;
}
.navBar li a:hover{
    color: rgb(5, 19, 37) !important;
    font-weight: 900;
    font-size: 20px !important;
}

.logo{
    cursor: pointer;
    margin-right: auto;
}
img.logo{
    border-radius: 15px;
}
/* nav css ends here */

/*section1 css starts here*/
.section1{
    grid-area: section1;
    margin: 20px;
    text-align: center;
    display:block;
    padding: 55px 10%; 
}


/*section1 css ends here*/

/*button css*/
.btn{
    padding: 15px 40px;
    margin: 10px auto;
    border:none;
    outline: none;
    color:rgb(81, 81, 127);
    cursor: pointer;
    display: inline-block;
    border-radius: 45px;
    background-color: #94d9ee;
    text-decoration: none;
    font-family: "Elsie Swash Caps", cursive;
    font-size: 20px;
    font-weight: 200;
    text-align:center;
    text-decoration: none;
    transition: all 0.3s ease 0s;
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.2) !important;

    
}
.btn:hover{
    background-color: rgb(81, 81, 127);
    text-emphasis:bold;
    box-shadow: 5px 5px 15px rgba(246, 0, 74, 0.2) !important;

}
/*button css ends here*/
/*objectives css starts here*/
.objectives{
    grid-area: objectives;
    margin: 10px;
    padding: 25px;
    border-radius: 15px;
    text-decoration: none;
   /* background-color: #eff4fb;*/
    box-shadow: 10px 10px 20px 5px rgba(107, 173, 234, 0.2) !important;

    
}
.objectives p , ul {
    font-size: 25px;
        font-family: "Vidaloka", serif;
    font-weight: 400;
    color: #504E76;

}
.objectives ul{
    padding: 25px;
    list-style: none;
    display: flex;
    display: list-item;
    gap: 20px;
}
/*objectives css ends here*/
/*cusine-types css starts here*/
.functions{
    grid-area: functions;
    margin: 10px;
    padding: 25px;
    border-radius: 15px;
    text-decoration: none; 
     
    
}
.functions ul li a:hover{
    color: white;
    font-weight: bolder;
    box-shadow: 10px 10px 20px 5px rgba(239, 237, 150, 0.2) !important;

}
/*css card */
.recipeCard{
    width:250px;
    background-color: #ffffff;
    color: #fcfcfc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:  0 4px 8px rgba(0, 0, 0, 0.3);
}

.cardcontainer{
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    justify-content: center;
}

.cardImage{
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding-top:20px;
    
    background-color: black;
    
}
.cardBody{
    padding: 10px;
    background-color: #edf1f6;
    display: inline-block;
    margin-top:30px ;
}
.cardTitle{
    font-size: larger;
    font-weight: bold;
    margin-bottom: 10px;
    color: #081f5c;
    text-align: center;
}
.cardText{
    font-size: 14px;
    margin-bottom: 15px;
    color: #0a0a0a;
}
.cardButton{
    display: inline-block;
    
    background-color: #ffeef1;
    color: rgb(6, 4, 4);
    text-decoration: none;
    border-radius: 15px;
    font-size: 18px;
    text-align: center;
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.2) !important;
    
    font-family: "Elsie Swash Caps", cursive;


    padding: 15px 20px;

    margin: 20px 20px;
    border:none;
    outline: none;
    cursor: pointer;
    font-weight: 200;
    transition: all 0.3s ease 0s;

   
}
.cardButton:hover{
    background-color: #0f0f3d;
    color: white;
    
}
.cardImage img{
    width: 100%;
    height: auto;
    display: block;
     object-fit: fill;

}

/*cusine-types css ends here*/
/*about css starts here*/
.about{
    grid-area: about;
    margin: 30px;
    padding: 25px;
    border-radius: 15px;
    text-decoration: none;
    /*display: inline-block;
    width:500px;*/
    text-align: center;
    box-shadow: 10px 10px 20px 5px rgba(239, 237, 150, 0.2) !important;


    
}
.about p{
    font-size: 25px; 


} 
/*about css ends here*/
 
/*quote css starts here */

.quote{
    grid-area: quote;
    border-radius: 15px;
    
    padding-top: 25px;
    margin: 20px;
    
}
.quote-container{
    display: flex;
    gap:5px;  
    flex-direction: column;
    align-items: start;
    
 }
blockquote{
    flex-direction: column;
    flex-wrap: wrap;
    display: inline-block;
    max-width: 100%;
    height:50%;
    border-radius: 15px;
    padding: 50px;
    color: white; 
    background-color: rgb(253, 253, 253);
 
    box-shadow: 0px 0px 15px rgba(17, 1, 3, 0.6) !important;

}
blockquote p{ 
    font-weight: 600;
    font-size: 25px;
}
/*quote css ends here */

    /*footer css starts here */
footer{
    grid-area: footer;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    border-radius: 15px;
    margin-left: 20px;
    margin-right: 20px;
    background-color: #d5e3f4;
    border-radius: 20px; 
}
/*footer css ends here */
/*responsivness code*/




/*size 992px*/

@media screen and (max-width:992px){


    .container{
        display:grid;
        grid-template-areas: "header header header "
                            "picture picture picture"
                            " section1  section1 section1"
                            "objectives objectives functions"
                            "about quote quote"
                            "footer footer footer";
        gap:20px;
        padding:30px;
        margin: 5px;
    }
    
    

    h1{
        font-size:1.90rem;
    }
    h2{
        font-size: 1.65rem;
    }
    h3{
        font-size: 1.45rem;
    }
    li {
        font-size: 1.25rem;
    }
    p{
        font-size: 1.35rem;
    }

   
    
    }


    
/*size 768px*/


@media screen and (max-width:768px){

.container{
    display:grid;
    grid-template-areas: "header header   "
                            "picture  picture"
                              "section1  section1"
                            "objectives  objectives"
                            "functions functions"
                            "about   about"
                            "quote quote"
                            "footer   footer";
    gap:50px;
    padding:15px;
    margin: 20px;
}
header {
    margin: 15px;
    flex-direction: column;
    padding: 10px;
}



.navBar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.navBar li {
    padding: 5px 0;
}

h1{
    font-size:1.95rem;

}
h2{
    font-size: 1.25rem;
}
h3{
    font-size: 1.15rem;
}
li {
    font-size: 1.15rem;
}
p{
    font-size: 1.45rem;
}

.quote-container{
    padding: 10px;
    margin: 0;
}
blockquote p{
    font-size: .95rem;
}
}    




/*size 576px*/


@media screen and (max-width:576px) {
    .container{
        display:grid;
        grid-template-areas: "header  "
                            "picture  "
                            "section1   "
                            "objectives "
                            " functions"
                            "about"
                            "quote "
                            "footer ";
        gap:30px;
        padding:25px;
        margin: 25px;
    }

    h1{
        font-size:1.95rem;
    }
    h2{
        font-size: 1.25rem;
    }
    h3{
        font-size: 1.15rem;
    }
    p, li {
        font-size: 1.15rem;
    }
    
    header {
        margin: 15px;
        flex-direction: column;
        padding: 10px;
    }
    
    .quote-container{
        padding: 10px;
        margin: 0;
    }
    blockquote p{
        font-size: .95rem;
    }
    
    .navBar {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 15px;
    }
    
    .navBar li {
        padding: 5px 0;
    }
}