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

header {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url("../images/foodnav.jpg");
    height: 800px;
    background-size: cover;
    text-align: center;
}

.logo {
    color: white;
    font-family: 'yestertear', cursive;
    font-size: 40px;
}

nav {
    display: flex;
    justify-content: space-between;
    padding: 30px 40px;
}

.nav-menu {
    list-style: none;
    color: white;
}

.nav-menu li {
    display: inline-block;
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
}

.nav-menu li a {
    text-decoration: none;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    transition: color 0.3s ease-in-out;
}

.nav-menu li a:hover {
    color: #f2ac32;
}

.header-title-1 {
    color: #f2ac32;
    font-size: 44px;
    font-family: 'Rochester', cursive;
    margin-top: 170px;
    margin-bottom: 15px;
}

.header-title-2 {
    font-family: 'Oswald', sans-serif;
    color: white;
    font-size: 55px;
    letter-spacing: 6px;
    margin-bottom: 30px;
}

.header-cta-button {
    color: #fff;
    background-color: #f2ac32;
    padding: 10px 20px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.header-cta-button:hover {
    background-color: #a37423;
}

.search {
    margin-left: 20px;
    margin-right: 20px;
}

.my-bag {
    font-size: 26px;
}

/**************** START Discover Section ***************/

.discover-section {
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    padding: 100px;
}

.food-border {
    border: 2px solid #f2ac32;
    position: relative;
}
.food-overlay {
    padding: 100px 10px 0 10px;
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: white;
    width: 100%;
    height: 100%;
    box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
    -webkit-box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
    -moz-box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
}

.food-item {
    height: 400px;
    width: 270px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}

.food-item p {
    color: rgb(99, 99, 99);
    font-size: 16px;
    margin-bottom: 20px;
}

.food-item a {
    font-size: 16px;
    text-decoration: none;
    color: #f2ac32;
    font-family: 'Oswald', sans-serif;
}

.food-1 {
    background-image: url(../images/hamburger.jpg);
    background-size: cover;
    margin-top: -30px;
    box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
    -webkit-box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
    -moz-box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
}

.food-2 {
    background-image: url(../images/sliced\ hamburger.jpg);
    background-size: cover;
    box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
    -webkit-box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
    -moz-box-shadow: 4px 2px 22px -2px rgba(0, 0, 0, 0.64);
}

.discover-h1 {
    font-family: 'Rochester', cursive;
    color: #f2ac32;
    margin-bottom: 15px;
}

.discover-h2 {
    font-family: 'Oswald', sans-serif;
    color: black;
    font-size: 30px;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/**************** END Discover Section ***************/

/**************** START Specialities Section ***************/

.specialities-section {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/bg\ food.jpg);
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}

.specialities-h1{
    font-family: 'Rochester', cursive;
    color: #f2ac32;
    margin-bottom: 15px;
    font-size: 40px;
}

.specialities-h2{
    font-family: 'Oswald', sans-serif;
    color: white;
    font-size: 50px;
    letter-spacing: 2px;
    margin-bottom: 100px;
}

.specialities-middle {
    text-align: center;
    position: relative;
}

.specialities-row {
    display: flex;
    justify-content: center;
}

.specialities-image1,
.specialities-image2,
.specialities-image3 {
    position: relative;
    width: 100%;
    height: 250px;
    margin-bottom: 30px;
    cursor: pointer;
}

.specialities-col {
    width: 350px;
    margin-right: 20px;
    margin-left: 20px;
}

.specialities-image1 {
    background-image: url(../images/soup.jpg);
    background-size: cover;
}

.specialities-image1:hover .specialities-overlay,
.specialities-image2:hover .specialities-overlay,
.specialities-image3:hover .specialities-overlay {
    opacity: 1;
}

.specialities-image2 {
    background-image: url(../images/lunch.jpg);
    background-size: cover;
}

.specialities-image3 {
    background-image: url(../images/dinner.jpg);
    background-size: cover;
}

.specialities-h3 {
    font-size: 26px;
    font-family: 'Oswald', sans-serif;
    color: white;
    letter-spacing: 2px;
    margin-bottom: 80px;
}

.specialities-overlay {
    opacity: 0;
    position: absolute;
    background-color: rgba(242, 172, 50, 0.7);
    width: 100%;
    height: 100%;
    padding: 10px;
    transition: all 0.4s ease-in-out;
}

.specialities-overlay-border {
    width: 90%;
    border: 2px solid white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    font-size: 25px;
}

.specialities-middle:before {
    content: '';
    position: absolute;
    border-top: 100px solid #f0f0f0;
    border-right: 100vw solid transparent;
    top: -100px;
    left: 0;
}

.specialities-middle:after {
    content: '';
    position: absolute;
    border-bottom: 100px solid #f0f0f0;
    border-left: 100vw solid transparent;
    bottom: -100px;
    right: 0;
}

/**************** END Specialities Section ***************/

/**************** START Special Menu Section ***************/

.special-menu-section {
    text-align: center;
    background-color: #f0f0f0;
    padding: 50px;
}

.special-menu-container {
    width: 70%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
}

.special-menu-h1 {
    font-family: 'Rochester', cursive;
    color: #f2ac32;
    margin-bottom: 15px;
    font-size: 40px;
}

.special-menu-h2 {
    color: black;
    margin-bottom: 50px;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    letter-spacing: 2px;
}

.special-menu-h3 {
    width: 100%;
    font-family: 'Rochester', cursive;
    font-size: 22px;
    letter-spacing: 2px;
}

.seperator,
.seperator-orange {
    display: inline-block;
    width: 40px;
    border-bottom: 2px solid white;
    margin: 15px auto;
}

.special-menu-h4 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 3px;
    width: 100%;
}

.special-menu-p {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    padding: 30px 20px;
    width: 100%;
}

.special-menu-col {
    width: 50%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.col-large {
    width: 50%;
    height: 450px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
}

.col-large-1,
.col-large-3 {
    background-color: #f2ac32;
    color: white;
    justify-content: center;
}

.fa-ice-cream,
.fa-utensils {
    width: 100%;
    font-size: 50px;
    margin-bottom: 10px;
}

.col-large-2 {
    background-image: url(../images/ice\ cream.jpg);
    background-size: cover;
    background-position: center;
}

.col-large-4 {
    background-image: url(../images/doner.jpg);
    background-size: cover;
}

.fa-burger {
    color: #f2ac32;
    font-size: 50px;
    width: 100%;
    margin-bottom: 10px;
}

.col-small {
    width: 50%;
    height: 225px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: center;
}
 
.col-small-1 {
    background-color: #fff;
}

.col-small-2 {
    background-image: url(../images/burgerlunch.jpg);
    background-size: cover;
    background-position: center;
}

.col-small-3 {
    background-image: url(../images/pizza.jpg);
    background-size: cover;
    background-position: center;
}

.col-small-4 {
    background-image: url(../images/chicken.jpg);
    background-size: cover;
    background-position: center;
}

.col-small-5 {
    background-image: url(../images/seafood.jpg);
    background-size: cover;
    background-position: center;
}

.col-small-h3 {
    font-family: 'Rochester', cursive;
    font-size: 22px;
    letter-spacing: 2px;
    width: 100%;
    color: #f2ac32;
}

.col-small-h4,
.col-small-h5 {
    width: 100%;
    color: black;
    letter-spacing: 3px;
    font-family: 'Oswald', sans-serif;
}

.col-small-h5 {
    color: #f2ac32;
    margin-top: 10px;
}

.seperator-orange {
    border-bottom: 2px solid #f2ac32;
}

/**************** END Special Menu Section ***************/

/**************** START Our Menu Section ***************/

.our-menu-section {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/piza.jpg);
    background-size: cover;
    text-align: center;
    padding: 140px 50px;
}

.our-menu-h1 {
    font-family: 'Rochester', cursive;
    color: #f2ac32;
    margin-bottom: 15px;
    font-size: 40px;
}

.our-menu-h2 {
    color: #fff;
    margin-bottom: 50px;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    letter-spacing: 2px;
}

.food-container {
    color: #fff;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 25px;
}

.our-menu-row {
    display: flex;
    justify-content: center;
}

.our-menu-col {
    width: 380px;
    margin: 30px;
}

.food-title {
    display: inline-block;
    text-transform: uppercase;
    font-size: 24px;
}

.food-price {
    font-size: 22px;
    color: #f2ac32;
    font-family: 'Oswald', sans-serif;
}

.food-ingredients {
    font-weight: 400;
    font-size: 16px;
}

.our-menu-button {
    border: 1px solid white;
    text-decoration: none;
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 10px 40px;
    transition: all 0.3s ease-in-out;
}

.our-menu-button:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    padding: 10px 25px;
}

/**************** END Our Menu Section ***************/

/**************** START Booking Table Section ***************/

.booking-table-section {
    padding: 100px;
    text-align: center;
    background-color: #f0f0f0;
}

.booking-table-h1 {
    font-family: 'Rochester', cursive;
    color: #f2ac32;
    margin-bottom: 15px;
    font-size: 40px;
}

.booking-table-h2 {
    color: #000;
    margin-bottom: 50px;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    letter-spacing: 2px;
}

.booking-table-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.booking-div {
    background-color: #fff;
    margin: 30px 15px;
    font-family: 'Oswald', sans-serif;
}

.booking-icon {
    padding: 15px 20px;
    display: inline-block;
    border-right: 1px solid #f0f0f0;
}

.booking-date {
    padding-right: 20px;
    padding-left: 20px;
}

.booking-cta {
    background-color: #f2ac32;
    color: #fff;
    text-decoration: none;
    padding: 15px 50px;
}

/**************** END Booking Table Section ***************/

/**************** START Foote Section ***************/

footer {
    padding: 60px 0px;
    padding-bottom: 0px;
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../images/footer.jpg);
    background-size: cover;
    background-position: center;
    color: #f0f0f0;
}

.footer-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-col {
    margin: 30px 60px;
}

.footer-title {
    font-family: 'Oswald', sans-serif;
    color: #f2ac32;
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px;
}

.footer-text {
    font-family: 'Oswald', sans-serif;
    margin-bottom: 10px;
    font-size: 15px;
}

.footer-email {
    padding: 10px 22px;
    width: 230px;
    height: 45px;
    margin-bottom: 15px;
}

.footer-subscribe {
    display: inline-block;
    width: 230px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    background-color: #f2ac32;
    height: 45px;
    text-align: center;
    line-height: 45px;
}



.copyright {
    padding: 40px;
    color: #f0f0f0;
    font-size: 14px;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    border-top: 1px solid #f0f0f06c;
}

.copyright-name {
    color: #f2ac32;
}