html
{
    font-family: 'Inter', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-size:10px;
    scroll-behavior: smooth;
}

body
{
    font-size: 1.6em;
}

.hero-container
{
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 100px;
}

.logo
{
    height: 100px;
}

.navigation
{
    display: flex;
    flex-direction:row;
    justify-content: space-between; 
    padding: 0 20px;
    background: #141416;
}


.s1
{
    background:url('img/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    color: #FFF;
}

.orange { color: #f26122;}
.green { color: #179C05;}

h1{ font-size: 3em; font-weight: bolder; margin:10px 0;}
h2 { font-size: 2em; font-weight: bold; margin:10px 0}
h2 { font-size: 1.6em; font-weight: bold; margin:10px 0}
p { font-size: 1.4em;}

.btn {
    background-image: linear-gradient(to right, #f26122 0%, #f19a22 51%, #f26122 100%);
    padding: 10px 50px;
    border-radius: 50px;
}

a.btn {
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    margin: 30px 0;
    
}

footer {
    background: #179C05;;
    color: #FFF;
    text-align: center;
    padding: 30px;
   

}

.ptop50 { padding-top: 50px;}

.main-container {
    width: 80%;
    margin: auto;
   margin-top: 50px;
   margin-bottom: 50px;
}

.ing1 li{
    list-style-type: disc;
    margin-left: 20px;
    line-height: 30px;
}

ul.ing1{
    padding: 10px 0;
}

.s2 {
    background: #179C05;
    padding: 70px;
    color: #FFF;
}

.ing2 li{
    list-style-type: decimal;
    margin-left: 20px;
    line-height: 30px;
}

.rec1{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.beige-bckground {
    background: #E6E0CA;
    padding: 30px;
}

.servings {
    padding: 20px 0;
}

.s2-img {
    width:200px;
    border-radius: 50%;
    position: absolute;
    margin-top: -200px;
    margin-left: -150px
}

.s4-img {
    width:200px;
    border-radius: 50%;
    position: absolute;
    margin-top: -250px;
    right: 50px
}


.s3 {
    padding: 100px;
    background: url('img/background-2.jpg') no-repeat right top fixed;
    background-size: contain
}


.s4 {
    background: #000;
    color: #FFF;
    padding: 50px;
}