/* css reset */
* {
    margin: 0px;
    padding: 0px;
}

/*css variables  */

/* navigation bar */
#navbar {
    display: flex;
    align-items: center;
    font-family: sans-serif;
}
#logo {
    margin: 16px 18px;
    height: 58px;
}
#logo img {
    height: 58px;
    border-radius: 42px;
}
#navbar::before {
    content: "";
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.6;
}
/* navigation list styling */
#navbar {
    position: absolute;
}

ul {
    display: flex;
}

#navbar ul li {
    color: white;
    list-style: none;
    font-size: 1.3rem;
}

#navbar ul li a {
    color: white;
    display: block;
    padding: 2px 34px;
    border-radius: 20px;
    text-decoration: none;
}
#navbar ul li a:hover {
    color: black;
    background-color: white;
}

/* home section */
#home {
    display: flex;
    flex-direction: column;
    height: 456px;
    padding: 3px 200px;
    justify-content: center;
    align-items: center;
}
#home::before {
    content: "";
    background: url("../food.jpg") no-repeat center center/cover;
    position: absolute;
    height: 490px;
    width: 100%;
    z-index: -1;
    opacity: 0.98;
}
.h1-primary {
    font-size: 2.8rem;
    padding: 20px;
    font-family: sans-serif;
}
.h2-secondary {
    font-size: 2.8rem;
    padding: 20px; 
}
/* services section */
.center {
    text-align: center;
}
#services {
    margin: 34px;
    display: flex;
    height: 282px;
    
}
#services .box {
    border: 2px solid #988989;
    height: 208px;
    padding: 34px;
    margin: 3px 6px;
    border-radius: 20px;
    background-color: #ffdcdc;
    ;
}
#services .box img {
   
    margin: auto;
    display: block;
    height: 150px;

}
#home h1 {
    color: rgb(248, 248, 248);
    text-align: center;
    font-family: serif;
}
#home p {
    color: rgb(248, 248, 248);
    text-align: center;
    font-size: 1.6rem;
}
.btn {
    padding: 6px 20px;
    border: 2px solid white;
    background-color: brown;
    color: white;
    margin: 17px;
    font-size: 1.5rem;
    border-radius: 10px;
    cursor: pointer;
}
/* clients */

#client{
    display: flex;
    justify-content: center;
     align-items:center;
}
#client img{
    height: 124px;

}
.client-item{
    padding: 34px;
}
/* contact section */
#contact{
    position: relative;

}
#contact{
    display: flex;
    align-items: center;
    padding-bottom: 34px;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
#contact-box input,
#contact-box textarea{
    width: 100%;
    padding: 0.5rem;
    font-family: serif;


}
#contact::before{
    content: "";
    background: url("../contact.png") no-repeat center center/cover;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.44;

}
footer{
    background-color: #000000;
    color: rgb(255, 255, 255);
    padding: 9px 20px;
}