* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

/***** Load in fonts ******/
/* @font-face {
    font-family:"heading font";
    src: url(../fonts/ARRGothic1-Heavy.woff);
}

@font-face {
    font-family:"content font";
    src: url(../fonts/ARRGothic1-Light.woff);
}

@font-face {
    font-family:"content font2";
    src: url(../fonts/ARGothic1-Light.woff);
} */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,200&family=Poppins:ital,wght@0,400;1,600&display=swap');

/***** General Settings *****/
body {
    font-size: 25px;
    overflow: hidden;
    position:fixed;
    font-family: 'Poppins', sans-serif;
}

main {
    position: absolute;
    width: 320px;
    height: 568px;
}

section {
    position: absolute;
    width: 320px;
    height: 568px;
    background: rgb(245,245,245);
    /* display:none; */
}

/***** Header & Footer *****/
header {
    padding: 0;
    position: absolute;
}

.top-container {
    position: relative;
    width: 320px;
    height: 45px;
    top:0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* box-shadow: 2px 2px 0.6 #000; */
    border-radius: 0 0 10px 10px ;
    z-index: 1000;
}

#top1{
    background-color:#d55b5b;
}

.hamburger {
    margin: 15px;
    z-index: 1000;
    animation: hamburger2close 1s ease-in-out 0.2s 3;
}

footer {
    position: absolute;
    overflow: hidden;
    width: 320px;
    height:110px;
    bottom: 0;
    font-size: 14px;
    color:#fff;
}

#footer1 {
    position: absolute;
    bottom: 0;
    display: grid;
    justify-items: center;
    grid-template-columns: 15px 1fr 2fr 15px;
    grid-template-rows: 30px 1fr 20px;
}

.homeIcon {
    width:85px;
    height:85px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #eee;
    display: flex;
    justify-content: center;
    grid-area: 1 / 2 / 3 /2;
    z-index: 100;
}

.menuIcon, .reservIcon {
    width: 49px;
    height:49px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: #fff;
    text-align: center;
    margin-top:7px;
}

#footer1 > .colourArea {
    width:320px;
    background:#d55b5b;
    grid-area: 2 / 1 / -1 / -1;
    display: grid;
    place-items: center;
    grid-template-columns:15px 1fr 1fr 1fr 15px;
    grid-template-rows: 1fr 20px;
    grid-row-gap: 2px;
    grid-template-areas:". homeBtn menuBtn reservbBtn ."
                        ". home menu-text reservation-text .";
}

.menuIcon {
    grid-area: menuBtn;
}

.reservIcon {
    grid-area:reservbBtn;
}

#hometext {
    grid-area: home;
}

#menutext {
    grid-area: menu-text;
}

#reservtext {
    grid-area: reservation-text;
}

/***************** Menu ****************/
#menu {
    font-family: 'Barlow Condensed', sans-serif;
    font-size:22px;
    background:#bc5446;
    color: #fff;
    text-align: center;
    display: grid;
    place-items: center;
    align-content: space-around;
    grid-template-columns: 60px 1fr 15px;
    grid-template-rows: 100px 100px 1fr 200px;
    grid-template-areas: ". menu-top ."
                        ". menu-middle1 ."
                        ". menu-middle2 ."
                        ". menu-bottom .";
}

#menu span {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    /* font-style: italic; */
    align-self:center;
}

#menu header {
    width:100%;
    height: 100%;
    grid-area: 1 / 2 / 2 / -1;
    border-bottom: #e3e3e3 2px dotted;
    /* background-color: #78221c; */
    display: grid;
}

#backToLanding {
    grid-area: 2 / 2 / 3 / -1;
    width:100%;
    height: 100%;
    display: grid;
    border-bottom: #e3e3e3 2px dotted;
    cursor: pointer;
}

#about {
    grid-area: 3 / 2 / 5 / -1;
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; 
}

#about p {
    margin:-40px;
    cursor: pointer;
}

#menu-footer {
    height:20px;
    background: #7c3535;
}

#foe-logo-white {
    width: 25%;
    height: auto;
}

/***************** Splash 1 *****************/
#splash1 {
    background-image: url(../images/splash_bg.png);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

#foe-logo {
    width: 45%;
    height: auto;
    margin-bottom: 15%;
}

#heart {
    position:absolute;
    width: 10%;;
    height:auto;
    bottom: 50.1%;
    margin-left: 49px;
}

/***************** Splash 2 *****************/
#splash2 {
    background-image: url(../images/landing_bg.png);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader {
    position: absolute;
    width:100px;
    height:100px;
    animation-name: spin;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/***************** Landing Screen *****************/
#landing {
    background-image: url(../images/landing_bg.png);
    background-size: cover;
    color: #fff;
    display: flex;
}

#landing > header {
    font-style: italic;
    font-size: 25px;
    text-align: center;
    margin-top: 150px;
    line-height: 30px;
}

.btn-background {
    width:320px;
    height:320px;
    border-radius:20px 20px 0 0;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
}

.tnc {
    padding:15px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size:12px;
    color:#000;
    text-align: center;
    line-height: 17px;
}


.tnc span {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/***************** This is botton CSS animations *****************/
.btn {
    width:260px;
    height: 50px;
    border: 0px;
    border-radius: 10px;
    font-size: 17px; 
    padding:5px 20px;
    margin: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-out;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
}

.arrow {
    display:flex;
    transition: all 0.3s ease-out;
}

#btn1 {
    background-color: #d55b5b;
    box-shadow: 3px 3px #7c3535;
}


#btn1:active {
    background-color: #bc5050;
    box-shadow: 0 1px #7c3535;
    transform:translateY(4px);
    outline: none;
}

#btn2 {
    background-color:#d5ae45;
    box-shadow: 3px 3px #836b2b;
}

#btn2:active {
    background-color: #bf9c3e;
    box-shadow: 0 1px #836b2b;
    transform:translateY(4px);
    outline: none;
}

#btn3 {
    background-color: #bac764;
    box-shadow: 3px 3px #697038;
}

#btn3:active {
    background-color: #a4af58;
    box-shadow: 0 1px #697038;
    transform:translateY(4px);
    outline: none;
}

/***************** Restaurant 1 & 2 & 3 Set ups  *****************/
#rest1, #rest2, #rest3 {
    width: 320px;
    height: 587px;
    position: absolute;
    overflow:hidden;
}


/***************** This is the Home section *****************/
.home {
    width:320px;
    height:587px;
    top:30px;
    font-size: 20px;
    display:flex;
    flex-flow: row wrap;
    overflow: scroll;
}

#hero1 {
    width: 320px;
    height:150px;
    background-image: url(../images/hearth-home-bg.png);
    background-size: 100%;
}

/***************** This is the Rest Name & Review Stars setup *****************/
.restName {
    width: 320px;
    min-height: 70px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom:1px solid #e3e3e3 ;
}

.restName span{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 23px;
    color: #000;
    line-height: 35px;
}

.restName p {
    font-size: 14px;
    line-height: 16px;
    color: #706f6f;
}

.stars {
    min-width:20%;
    height: auto;
}

/***************** This is the Waiting Time Area setup *****************/
.time {
    width: 320px;
    min-height: 70px;
    padding:10px 15px;
    display: flex;
    justify-content: space-between;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    border-bottom:1px solid #e3e3e3 ;
}

.waitTime, .prepTime, .online {
    font-size: 12px;
    padding: 4px;
    margin: 5px 0;
    line-height: 25px;
    color:#3e3e3e;
    border: 1.3px dotted #939393;
    border-radius: 5px 5px;
}

.time span {
    font-family: 'Barlow Condensed', sans-serif;
    color: #000;
    font-size: 23px;
}

/***************** This is the  Description & Map setup *****************/
.description {
    padding: 10px 15px;
    font-size: 12px;
    line-height: 20px;
    color:#706f6f;
}

.description span {
    font-size:18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    color:#000;
}

.map p {
    font-size:18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    color:#000;
    padding:10px 15px;
} 

/*****************  This is  Specials section *****************/
.specials {
    width:320px;
    height:550px;
    top:30px;
    font-size: 15px;
    overflow: scroll;
    display: grid;
    grid-row-gap: 15px;
    grid-template-columns: 320px;
    grid-template-rows: 120px 1fr 220px 10px 1fr 1fr;
    grid-template-areas: "header"
                        "popular"
                        "p-items"
                        "."
                        "recommendations"
                        "rec-items";
}

/* Here is to locate children elements into specials gird.  */
.specials > header {
    height:120px;
    padding:55px 15px 30px 15px;
    line-height: 20px;
    border-bottom: 1px solid #e3e3e3 ;
    grid-area: header;
    display: grid;
    align-items: center;
    align-content: center;
}


.specials > header p {
    color: #706f6f;
    margin-top:10px;
    font-size: 12px;
}
.specials > header h1 {
    font-size: 18px;
}

.h2-1 {
    grid-area:popular;
    padding-left:15px;
}

.popular {
    grid-area: p-items;
    padding-left:15px;
    padding-right:15px;
}

.h2-2 {
    grid-area:recommendations;
    padding-left:15px;
}

.recommendation {
    grid-area: rec-items;
    padding-left:15px;
    padding-right:15px;
}

/* here is the styling of specials elements */

.specials h1, .specials h2{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 18px;
}

.specials img {
    max-width: 200px;
    height:auto ;
}

/* The children elements' grid setups */
.itemSection1 {
    overflow: auto;
    display: grid;
    grid-template-rows: 235px;
    grid-template-columns: 200px 200px 200px;
    grid-gap: 10px 15px;
}

.itemSection2 {
    overflow: auto;
    display: grid;
    grid-template-rows: 400px 50px;
    grid-template-columns: 200px 200px 200px;
    grid-gap: 10px 15px;
}

.popular-item {
    width: 200px;
    height: 230px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.recommend-item {
    width: 200px;
    height:380px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.popular-text, .recom-text {
    padding: 10px;
}

.popular-text span, .recom-text span {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
}

/***************** This is the Reservation Section *****************/
.reservation {
    width:320px;
    height:510px;
    background-image: url(../images/hearth-home-bg.png);
    background-size: cover;
    background-position: top center;
    overflow-x: hidden;
}

.sectionContainer {
    width:320px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    color:#fff;
    line-height:30px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.greeting {
    display: flex; 
    flex-flow:wrap row;
    justify-content: center;
    align-content: center;
    text-align: center;
    margin-top:55px;
    margin-bottom: 20px;
    font-size:15px;
    padding-right: 0.7rem;
    font-size: 14px;
}

.greeting h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.greeting p {
    font-size: 14px;
}

form {
    text-align: left;
    margin-right:50px;
    margin-left:50px;
}

form span {
    color: #ff1100;
    font-size: 1.5rem;
}

label {
    display: block;
}

input, select, textarea {
    width: 225px;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-size: 15px;
    background: #fff;
    outline: none;
}

.submitBtn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* font-style: italic; */
    font-size: 1rem;
    color: #fff;
    width:225px;
    padding: 10px;
    border-radius: 5px;
    margin-top:20px;
    margin-bottom: 50px;
    cursor: pointer;
}

#submit1{
    border: 2px solid #7c3535;
    background-color: #d55b5b;
}


/***************** This is the Comfirmation Section *****************/
.comfirmation {
    width:320px;
    height:587px;
    top:0;
    background-image: url(../images/hearth-home-bg.png);
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}

.overlay {
    width:320px;
    height: 587px;
    top:0;
    background-color: rgba(0, 0, 0, 0.6);
}

.thankyou {
    padding:200px 15px 200px 15px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* font-style: italic; */
    line-height: 35px;
    color: #fff;
}

.thankyou h1 {
    margin-bottom: 20px;
}

.thankyou h2 {
    font-size: 20px;
}

.thankyou p {
    font-size:16px;
}

/********************* This is the Restaurant 2 ************************/
#top2 {
    background-color:#d5ae45;   
}

#hero2 {
    width: 320px;
    height:150px;
    background-image: url(../images/crispy-home-bg.png);
    background-size: 100%;
    background-position: center;
}

/* footer */
#footer2 {
    position: absolute;
    bottom: 0;
    display: grid;
    justify-items: center;
    grid-template-columns: 15px 1fr 2fr 15px;
    grid-template-rows: 30px 1fr 20px;
}

#footer2 > .colourArea {
    width:320px;
    background:#d5ae45;
    grid-area: 2 / 1 / 4 / -1;
    display: grid;
    place-items: center;
    grid-template-columns:15px 1fr 1fr 1fr 15px;
    grid-template-rows: 1fr 20px;
    grid-row-gap: 2px;
    grid-template-areas:". homeBtn menuBtn reservbBtn ."
                        ". home menu-text reservation-text .";
}

#reservation2, #comfirmation2 {
    background-image: url(../images/crispy-home-bg2.png);
}

#submit2{
    border: 2px solid #836b2b;
    background-color: #bf9c3e;
}


/********************* This is the Restaurant 3 ************************/
#top3 {
    background-color:#c7d56b;
}

#hero3 {
    width: 320px;
    height:150px;
    background-image: url(../images/fiveVines-home-bg.png);
    background-size: 100%;
    background-position: center;
}

/* footer */
#footer3 {
    position: absolute;
    bottom: 0;
    display: grid;
    justify-items: center;
    grid-template-columns: 15px 1fr 2fr 15px;
    grid-template-rows: 30px 1fr 20px;
}


#footer3 > .colourArea {
    width:320px;
    background:#c7d56b;
    grid-area: 2/ 1 / 5 / -1;
    display: grid;
    place-items: center;
    grid-template-columns:15px 1fr 1fr 1fr 15px;
    grid-template-rows: 1fr 20px;
    grid-row-gap: 2px;
    grid-template-areas:". homeBtn menuBtn reservbBtn ."
                        ". home menu-text reservation-text .";
}

#reservation3, #comfirmation3 {
    background-image: url(../images/fiveVines-home-bg2.png);
}

#submit3{
    border: 2px solid #697038;
    background-color: #c7d56b;
}