style.css

@import url('https://fonts.googleapis.com/css2?family=Archivo&family=Calistoga&family=Montserrat&family=Nunito+Sans&family=Poppins&display=swap');
@import url(Media_queries.css);

body, html{
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    user-select: none;
}

*{
    box-sizing: border-box;
}

:root{
    --Nav_font: "Poppins", sans-serif;
    --Heading_font: "Archivo", sans-serif;
    --Paragraph_font: 'Montserrat', sans-serif;

    --color: #f64b3c;
}

/* Common Sections
******************/
.Best-burger, .Big-burger{

    width: 100%;
    height: auto;

    display: flex;
    justify-content: space-between;
    justify-content: center;

    padding: 10% 0%;
}

/* Common Button
****************/
.Burger-content button, .Landing-page-content button, .deals button{
    width: 200px;
    
    font-family: var(--Paragraph_font);
    font-size: 115%;
    font-weight: bold;

    border: 1px solid transparent;
    border-radius: 30px;

    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 0;
    margin-top: 10px;
    
}

/* Common Headings
******************/
.Our-chef>h1, .Stats-heading h1, .Popular-packages h1{ 
    font-family: var(--Heading_font);   
    font-size: 300%;

    letter-spacing: 2px;
}

.Our-chef>p, .Statistics p{
    font-family:var(--Paragraph_font) ;
    font-weight: 1000;
    font-size: 110%;
    text-align: center;
    line-height: 170%;
    padding-top: 2%;
}
/* Styling Landing Page
***********************/

.Landing-page{
    width: 100%;
    height: auto;

    background: url(Resources/Landing\ Page\ Background.png) no-repeat scroll center;
    background-size: cover;

    display: flex;
    flex-direction: column;
}

/* Navigation bar */
.Navigaiton{

    width: 100%;
    height: auto;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;

    padding: 3% 5%;
}

.Logo{
    max-width: 70px;
    height: auto;
}

.Nav-links{
    font-family: var(--Nav_font);
    font-size: 110%;
    font-weight: 1000;
    text-transform: uppercase;

    width: 50%;
    padding: 0%;
    

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}

.Nav-links > li{

    box-sizing: border-box;
    text-align: center;
    margin-left: 2%;

    display: inline-block;
    flex: 1 1 12px;
}

.Nav-links > li:hover{
    cursor: pointer;
    text-decoration: 2px underline white;
    text-underline-offset: 5px;
}

/* Landing Page Content */
.Landing-page-content{
    color: white;
    width: 100%;

    padding: 0 0 0 5%;

    display: flex;
    justify-content: start;
    flex-flow: column;
}

.Landing-page-content h1{
    font-family: var(--Heading_font);
    font-size: 450%;
    margin-bottom: 0;
    width: 100%;
}

.Landing-page-content p{
    font-family: var(--Paragraph_font);
    font-size: 115%;
    width: 40% ;
    line-height: 170%;
    overflow: hidden;
}

.Landing-page-content button{
    color: white;
    background-color: var(--color) ;

    margin-bottom: 5%;
}


/* Our Chef Section
***********************/
.Our-chef{
    background: url(Resources/Our\ Chefs\ Backgrounds.png) repeat-y scroll center;
    background-size: 100%;

    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;

    padding: 5% 0%;
}

/* Headings */

.Our-chef h1, .Our-chef p{
    margin: 0 auto;
    color: var(--color);
}

/* Designations */
.Chefs{
    display: flex;
    flex-flow: row wrap;

    justify-content: space-evenly;
    align-items: center;

}

.Chef-1, .Chef-2, .Chef-3 {
    margin: 5% 2.575%;
}

.Chefs div img{
    display: block;
    max-width: 80%;
    margin: auto;
    clip-path: circle(50% at 50% 50%);
}

.Chef-details h1, .Chef-details p{
    text-align: center;
}

.Chef-details h1{
    font-family: var(--Heading_font);
    font-size: 200%;

    margin-top: 5%;
    max-width: 100%;
    text-transform: uppercase;
}

.Chef-details p{
    font-family: var(--Paragraph_font);
    margin-top: 5%;
    font-size: 110%;
    font-weight: 700;
    max-width: 100%;
}


/* Best Burger Section
***********************/

.Best-burger{
    background: var(--color);
    flex-flow: row wrap;
}

.Burger-image{
    width: 30vw;
    padding: 2%;
}

.Burger-content{
    width: 50vw;
    padding: 2% 7%;
    color: white;
    justify-content: flex-start;
    align-items: center;
}

.Burger-content h1{
    font-family: var(--Heading_font);
    font-size: 350%;
    margin-bottom: 1%;
}

.Burger-content p{
    font-family: var(--Paragraph_font);
    font-weight: 550;
    font-size: 130%;
}

.Burger-content button{
    color: var(--color);
    background-color: white ;
}

.Burger-image img{
    max-width: 100%;
    height: auto;
    clip-path: circle(50% at 50% 50%);
}

/*Big Burger Section 
********************/
.Big-burger{
    background: url(Resources/Our\ Chefs\ Backgrounds.png) repeat-y scroll center;
    background-size: cover;

    flex-flow: row-reverse wrap;
}

.Big h1, .Big p{
    padding: 0%;
    color: var(--color);
}

.Big button{
    color: white;
    background-color: var(--color);
}

/* Statistics Section
 ********************/
.Statistics{
    width: 100%;
    height: auto;

    color: white;
    background-color: var(--color);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 5%;
}

.Stats-heading{
    display: flex;
    flex-flow: column nowrap;

    align-items: center;
}

.Stats-heading h1 {
    width: auto;
    text-align: center;

    margin: 5%;
    margin-bottom: 0;
}

.Stats-heading p{
    width: 50%;
}

.Stats-Content{
    display: flex;
    flex-flow: row wrap;

    justify-content: space-evenly;
    align-items: center;

    margin: 5%;
    width: 100%;
}

.Stats-Content>div{

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    border: 2px solid white;
    border-radius: 50%;

    width: 200px;
    height: 200px;

    margin: 3.895%;
}

.Stats-Content h1{

    width: 80%;
    font-family: var(--Heading_font);
    font-size: 350%;
    text-align: center;
    
    margin-bottom: 0;
}

.Stats-Content p{
    width: 80%;
    font-family: var(--Paragraph_font);
    font-size: 120%;
    font-weight: bold;

    text-transform: uppercase;
}

/* Popular Section
******************/
.Popular-packages{
    width: 100%;
    height: auto;

    background: url(Resources/Our\ Chefs\ Backgrounds.png) repeat-y scroll center;
    background-size: cover;

    display: flex;
    flex-flow: column wrap;
    align-items: center;

}

.deals{
    display: flex;
    flex-flow: row wrap;

    width: 100%;
    justify-content: space-evenly;
}

.deal{
    background: white ;
    border-radius: 2%;

    display: flex;
    flex-flow: column wrap;
    justify-content: center;

    width: 250px;
    height: 350px;

    padding: 0 15px;
    margin: 5% 2.3% 10% 2.3% ;
}

.Popular-packages h1{
    width: 100%;
    text-align: center;
    color: var(--color);
}

.deal h2, .deal h3, .deal p{
    color: var(--color);
    text-align: center;
}

.deal h2, .deal h3{
    
    font-size: 130%;
    font-family: var(--Heading_font);
    text-transform: uppercase;
}

.deal h3{
    font-size: 120%;
    text-transform: none;
}

.deal p{
    font-size: 100%;
    font-weight: bold;
    font-family: var(--Paragraph_font);

    margin-top: 0;
}

.deal img{
    display: inline-block;
    width: 70px;
    margin: 0 auto;
}

.deals button{
    display: inline-block;
    margin: 0 auto;

    background: var(--color);
    color: white;

    font-size: 100%;
    height: auto;
    width: 180px;
}


/* Quote Section
****************/
.Quote{
    background: linear-gradient(rgba(246, 75, 60, 0.98), rgba(246, 75, 60, 0.98)),url(Resources/Quote\ background.png) no-repeat scroll center;
    background-size:cover;
    background-blend-mode: screen;

    display: flex;
    flex-direction: column;
    padding: 16% 19%;
}

.Quote q{

    color: white;

    font-family: var(--Heading_font);
    font-size: 25px;
    font-weight: 700;

    text-align: center;
    letter-spacing: 1px;
    line-height: 170%;

}

.Quote cite{
    color: white;

    font-family: 'Calistoga', serif;
    font-size: 250%;
    font-style: normal;

    text-align: center;
    letter-spacing: 1px;
    margin-top: 5%;
}

/* Don't miss Section
*********************/
.Dont-miss{

    background: url(Resources/Our\ Chefs\ Backgrounds.png) scroll center;
    background-size: cover;

    display: flex;
    flex-flow: column wrap;

    justify-content: center;
    align-items: center;

    padding: 15% 19%;
}

.Dont-miss h1{
    color: var(--color);
    font-family: var(--Heading_font);
    font-size: 370%;
    font-weight: bold;

    letter-spacing: 2px;
    text-align: center;
}

.Dont-miss p{
    color: var(--color);
    font-family: "Nunito", sans-serif;
    font-size: 150%;
    text-align: center;

    margin-top: 0;
    margin-bottom: 4%;

}


.Text-field{

    width: 60%;
    display: flex;

    flex-flow: row nowrap;
    min-width: 270px;
}

.Text-field input{
    height: 40px;
    width: 70%;

    border: none;
    border-bottom-left-radius: 20px ;
    border-top-left-radius: 20px;

    margin: 0;
    padding: 0 5%;
    
}

.Text-field input::placeholder{
    color: lightgrey;
    font-family: "Nunito", sans-serif;
    font-size: 15px;

    text-align: center;
}

.Text-field button{
    display: inline-block;
    height: 40px;
    width: 30%;

    background-color: var(--color);
    color: white;
    font-family: 'Nunito', sans-serif;
    font-variant: normal;
    font-size: 100%;
    text-transform: uppercase;
    
    padding: 0 10px;
    border: none;
    outline: none;
    margin: 0;

    border-bottom-right-radius: 20px ;
    border-top-right-radius: 20px;
}

/* Footer Section
*****************/
.Footer{

    background: #222222;
    color: white;
    width: 100%;
    height:  auto;

    display: flex;
    flex-flow: row nowrap;

    justify-content: center;
    padding: 5%;

    padding-top: 13%;
    padding-bottom: 13%;

}

.Footer ul, .Links ul{
    list-style: none;
}

.Links ul{
    
    margin-right: 5%;
    padding: 0;

    margin-top: 0;
}

.Others{
    margin-right: 0;
}

.Web-identity{
    width: 40%;
    flex-basis: 350px;
    display: flex;
    flex-flow: column nowrap;

    justify-content: flex-start;
}

.Web-identity h1{
    font-family: var(--Heading_font);
    font-size: 200%;
    font-weight: 600;

    letter-spacing: 2px;
    margin-bottom: 0;
}


.Web-identity p{
    font-family: "Nuitin", sans-serif;
    font-size: 110%;
    
    line-height: 130%;
}

.Web-identity ul{
    display: flex;
    flex-flow: row nowrap;
    margin-top: 0;
    padding-left: 0;

    font-size: 25px;
    color: white;
}

.Web-identity ul li{
    margin-right: 15px;
}

.Links{
    width: 60%;
    display: flex;
    flex-flow: row nowrap;

    justify-content: center;
    margin: 0 5%;
}

.Links h2{
    font-family: var(--Heading_font);
    font-size: 130%;

    letter-spacing: 1px;
}

.Links li{
    margin-top: 5%;
    font-family: "Nunitin", sans-serif;
    font-size: 110%;
}


@media screen and (max-width: 956px)  {
    .Landing-page-content p{
        width: 50%;
    }

    .Landing-page-content h1{
        font-size: 350%;
    }
}

@media screen and (max-width: 780px) {
    .Landing-page-content {
        justify-content: center;
        align-items: center;
    }

    .Landing-page-content p{
        width: 70%;
        text-align: center;
    }

    .Landing-page-content h1{
        font-size: 350%;
        text-align: center;
    }
}

@media screen and (max-width: 870px){
    .Text-field button{
        width: 100px;
    }
}

@media screen and (min-width: 530px) and (max-width: 760px) {
    .Nav-links{
        width: 80%; 
    } 
}

@media screen and (max-width: 650px) {
    .Dont-miss{
        padding: 15% 7%;
    }
}

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

    .Burger-image{
        width: 45vw;
        padding: 2%;
    }

    .Burger-content {
        padding: 0%;
    }
}

@media screen and (max-width: 530px) {
    .Our-chef>h1, .Stats-heading h1, .Popular-packages h1{
        font-size: 35px;
    }

    .Dont-miss h1{
        font-size: 30px;   
        font-weight: bold;
    }

    .Dont-miss p{
        font-size: 14px;
    }

    .Quote{
        padding: 16% 7%;
    }

    .Quote q{
        font-size: 20px;
        font-weight: bold;
    }

    .Quote cite{
        font-size: 200%;
    }
}

@media screen and (max-width: 550px){
    .Chef-1, .Chef-2, .Chef-3 {
        margin: 5% 5%;
    }

    .Stats-Content div{
        margin: 5%;
    }

    .Stats-heading p, .Stats-heading h1{
        width: 100%;
    }

    .Footer{
        flex-wrap: wrap;
        justify-content: start;
    }

    .Web-identity{
        width: 80%;
    }

    .Links{
        width: 100%;
        justify-content: start;
        margin-left: 0;

        justify-content: space-around;
    }
}

@media  (max-width: 530px) and (min-width: 300px) {
    .Navigaiton{
        flex-direction: column;
        padding: 0%;
        padding-top: 3%;
    }

    .Nav-links{
        width: 100%; 
        font-size: 12px;
        margin-top: 5%;
    }
}

@media screen and (max-width: 720px) and (min-width: 300px){
    .Best-burger, .Big-burger{
        flex-flow: column nowrap;
        align-items: center;
    }

    .Burger-content{
        width: 70%;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .Burger-conten h1{
        margin-top: 0%;
    }
}