@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

:root {
    --black: #130f40;
    --white: #e9e9e9;
    --spice: #b86900;
    --grey: #2a3c40;
    --light-color: #c4d2d5;
    --box-shadow: 0 .5rem 1rem rgba(42, 143, 179, 0.683);
    --border: .2rem solid var(--black);
    --outline: .1rem solid var(--black);
    --outline-hover: .2rem solid var(--black);

}

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Poppins';
}

header {
    background-image: url(../images/bg-1.jpg);
    height: 135vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

header .navbar a {
    color: var(--light-color);
    font-size: 29px;
    font-weight: 600;
    text-transform: uppercase;
}

header .header-card {
    background-color: var(--white);
    opacity: .8;
    width: 50%;
    margin: 0 auto;
    margin-top: 15%;
    padding: 7rem;
    text-align: center;
}

.header-card h1 {
    font-size: 61px;
    font-family: cursive;
    font-weight: 600;
    color: var(--black);
}

.header-card p {
    font-size: 66px;
    color: var(--spice);
    font-weight: 500;
}

/* HOME SECTION */

#home #spoon {
    background: var(--grey);
    padding: 3rem;
}

#home .home-text {
    color: var(--white);
    padding: 5rem 2rem;
}

#home .home-text h3 {
    font-size: 29px;
    margin-bottom: 3rem;
}

#home .home-text p {
    font-size: 19px;
}

#home #about {
    background: var(--light-color);
    color: var(--grey);
    padding: 5rem 3rem;
}

#home #about .about-card {
    margin: 0 1rem;
}

#home #about .about-card i {
    font-size: 33px;
    margin: 23px 0;
}

#home #about .about-card h4 {
    font-size: 19px;
    font-weight: 600;
}

/* WELCOME SECTION */
#welcome {
    background-image: url(../images/bg-2.jpg);
    height: 175vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x: hidden;
    padding: 4rem 9rem;

}

#welcome .welcome-card {
    display: grid;
    grid-template-columns: auto auto auto auto;
    background-color: var(--white);
}

.welcome-card-inner {
    text-align: center;
}

.welcome-card-inner h6 {
    margin-top: 25%;
    font-size: 23px;
    font-weight: 600;
    text-transform: uppercase;
}

.welcome-card-inner img{
    object-fit: cover;
    width: 100%;
}

.cuisine{
    text-align: center;
    background-color: var(--light-color);
    padding: 4rem 1rem;
}

.cuisine h2{
    font-size: 27px;
    font-weight: 600;
    margin: 1rem 0;
}

.cuisine p{
    padding: 0 21rem;
    font-size: 17px;
    margin: 1rem 0;
}

.cuisine .circle i{
    font-size: 31px;
    margin: 1rem 0;
}

.cuisine .circle .list{
    display: flex;
    gap: 2rem;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}

.cuisine .circle  ul li{
    list-style: none;
}


.cuisine .circle ul li a{
    font-size: 21px;
    color: var(--black);
    text-decoration: none;
    margin: 0 auto;
}

/* MENU SECTION */
#menu {
    background-image: url(../images/bg-3.jpg);
    height: 175vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 4rem 9rem;

}

#menu .menu-card{
    display: inline-flex;
    align-items: center;
    background: var(--light-color);
    padding: 5rem;
    gap: 1rem;
}

#menu .menu-card i{
    padding: 1rem;
    background-color: var(--white);
    border-radius: 100%;
    font-size: 44px;
}

#menu .menu-card h5{
    text-transform: uppercase;
}

#footer{
    background-color: var(--grey);
    color: var(--white);
    padding: 2rem .5rem;
}

footer{

    display: flex;
    align-items: center;
    justify-content: space-around;
}

footer ul{
    list-style: none;
    display: flex;
    margin: auto 0;
}


#footer footer ul li a i{
    font-size: 25px;
    color: var(--white);
}