style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* search-top */

.search-container {
    display: grid;
    align-content: center;
    height: 50px;
    background: #FFDED6;
}


.fa-magnifying-glass {
    margin: 0 10px;
}


span {
    margin: 0 10px;
    font-family: sans-serif;
    font-weight: 700;
}


.social-links {
    /* display: grid; */
    grid-column: 11/10;
    font-size: 22px;
    gap: 20px;
    display: flex;
    flex-direction: row;
}

.social-links a {
    color: #000;
}


/* header-links */


.header {
    display: grid;
    grid-auto-columns: auto;
    justify-content: space-around;
    /* background: red; */
    grid-template-columns: repeat(6, 1fr);
    /* margin: 0 10px; */
    position: sticky;
    top: 0;
    background: #fff;
    /* border-bottom: 2px solid #212121 ;*/
    z-index: 1;
    /* max-width: 100%; */
    /* gap: 50px; */
    padding: 65px 25px 25px 35px;
}


.header p {
    color: #000;
    font-size: 17px;
    cursor: pointer;
    position: relative;
    font-weight: 700;
}


.header p::after {
    content: "";
    position: absolute;
    height: 2px;
    left: 0px;
    width: 0;
    top: 25px;
    background: #000000;
    /* bottom: 475px; */
}

.header p:hover::after {
    transition: 0.5s ease-in-out;
    width: 75%;
}


/* page-header */

.page-header {
    /* background: red; */
    /* margin: 0 100px; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* grid-template-columns: repeat(3, 1fr); */
    grid-template-rows: repeat(2, 1fr);
    /* grid-column: 1 / -1; */
    margin-top: 40px;
    justify-items: center;
    align-items: center;
    padding-top: 10px;
    /* padding: 60px; */
}




.left {
    color: #212121;
}


.middle {
    font-size: 30px;
    color: #212121;
}


.right {
    font-weight: 700;
    cursor: pointer;
    color: #212121;
}

/* firstrow-images */


.image-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: 0 65px;
}

.image-container {
    display: grid;
    gap: 2px;
}


.image1 img {
    width: 300px;
    height: auto;
    object-fit: contain;
}


.image2 img {
    width: 300px;
    height: auto;
    object-fit: contain;
}

.image3 img {
    width: 300px;
    height: auto;
    object-fit: contain;
}

.image4 img {
    width: 300px;
    height: auto;
    object-fit: contain;
}

.image-container #image1 {
    /* background: rgb(255, 0, 0); */
    padding: 10px 10px 10px 10px;
    font-size: 20px;
    color: #fff;
    font-family: "Playwrite IN", cursive;
    text-align: center;
    background: #000;
    width: 300px;
    font-weight: 700;
}

.image-container #image2 {
    /* background: rgb(255, 0, 0); */
    padding: 10px 10px 10px 10px;
    font-size: 20px;
    font-family: "Playwrite IN", cursive;
    text-align: center;
    color: #fff;
    background: #000;
    width: 300px;
    font-weight: 700;
}

.image-container #image3 {
    /* background: rgb(255, 0, 0); */
    padding: 10px 10px 10px 10px;
    background: #000;
    color: #fff;
    font-size: 20px;
    font-family: "Playwrite IN", cursive;
    text-align: center;
    width: 300px;
    font-weight: 700;
}

.image-container #image4 {
    /* background: rgb(255, 0, 0); */
    padding: 10px 10px 10px 10px;
    color: #fff;
    font-size: 20px;
    width: 300px;
    background: #000;
    font-family: "Playwrite IN", cursive;
    text-align: center;
    font-weight: 700;
}




.page-content {
    /* display: grid; */
    /* grid-template-columns: repeat(4,1fr); */
    /* background: red; */
    /* justify-self: center; */
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    letter-spacing: 3px;
    color: #D56638;
    font-weight: 700;
}

/* box shadow-container */

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    /* grid-template-areas: "text image"; */
    max-width: 1200px;
    height: auto;
    gap: 20px;
    margin: 0 65px;
    /* grid-auto-flow: dense; */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


/* .text-section {
    display: flex;
    /* order: 1; */
    /* padding: 20px; */
    /* grid-column:  2 / span 1; */
    /* grid-area: text; */
    /* padding: 20px; */
    /* flex-direction: column; */
    /* justify-content: center; */
/* } */ 


.text-section {
    grid-column:  1 / span;
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.image-section {
    grid-column: 1 / span ;
}

.image-section img {
    width: 100%;
    height: 550px;
    /* grid-column:  2 / span 1; */
    object-fit: cover;
}

.text-section .first {
    /* background: red; */
    font-size: 20px;
    color: #212121;
    opacity: 0.8;
    align-self: center;
    letter-spacing: 5px;
    padding: 20px;
    /* text-align: center; */
    text-transform: uppercase;
    /* margin-bottom: 30px; */
    /* margin-left: 40px; */
}

.text-section h3 {
    /* background: red; */
    font-size: 45px;
    padding: 20px;
    color: #212121;
    margin-bottom: 20px;
    text-align: center;
}

.text-section p {
    font-size: 16px;
    text-align: center;
    letter-spacing: 12m;
    color: #793a3a;
    margin-bottom: 10px;
    line-height: 1.6;
}


.text-section .recipe {
    /* background: #000; */
    color: #ffffff;
    background: #000;
    width: 155px;
    font-size: 20px;
    cursor: pointer;
    justify-content: center;
    padding: 10px 20px;
    /* border: 1px solid #fff; */
    margin-left:0;
    margin-top: 20px;
}


/* recipe-navbar */


.recipe-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* grid-template-columns: 1fr 1fr; */
    grid-template-rows: repeat(1, 125px);
    /* width: 100%; */
    /* height: 100px; */
    background: #000000;
}



/* recipe-nav-images */

.image-nav {
    display: grid;
    grid-template-columns: repeat(7, 100px);
    margin: 0 10px;
    margin-top: 40px;
    /* float: right; */
}

.image-nav img {
    width: 50px;
    cursor: pointer;
    align-items: center;
}

.image-nav img:hover {
    transform: scale(1.3);
    transition: 0.3s ease-in-out;
}

/* recipe-bar */

.recipe-bar {
    display: grid;
    width: 500px;
    height: 0;
    /* background: red; */
    position: relative;
    top: 20px;
    left: 10px;
}

.recipe-bar input {
    width: 470px;
    padding: 20px;
    margin-top: 20px;
}


input::placeholder {
    color: #212121;
    opacity: 0.7;
    font-size: 15px;
}


.recipe-bar {
    position: relative;
    display: inline-block;
}

.recipe-bar input {
    padding-left: 30px;
    padding-right: 10px;
    width: 100%;
    box-sizing: border-box;
}

.recipe-bar i {
    position: absolute;
    left: 90%;
    top: 20%;
    cursor: pointer;
    font-size: 20px;
    transform: translateY(200%);
    color: #212121;
}

/* learn */

.learn #how {
    /* background: red; */
    /* display: grid; */
    font-size: 25px;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    color: #212121;
    margin: 0 20px;
}


#how {
    /* background: red; */
    height: 55px;
}


.learn::before {
    content: "";
    position: absolute;
    height: 2px;
    left: 20px;
    width: 0%;
    background: #FFD700;
    margin-top: 35px;
    cursor: pointer;
}

.learn:hover::before {
    width: 18%;
    transition: 0.3s ease-in-out;
}


/* round-images-recipes */

.round-image {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


.round-image #egg {
    /* display: grid; */
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}

#prepare {
    /* background: white; */
    font-size: 15px;
    text-align: center;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.round-image #egg:hover {
    opacity: 0.7;
    transition: 0.4s ease-in-out;
    cursor: pointer;
}


/* .bro{
    background: rgb(229, 73, 243);
} */
.round-image #broco {
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}

#prepare2 {
    /* background: white; */
    font-size: 15px;
    text-align: center;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.round-image #broco:hover {
    opacity: 0.7;
    /* transform: scale(3.2); */
    transition: 0.5s ease-in-out;
    cursor: pointer;
}


.round-image #chicken {
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}


#prepare3 {
    /* background: white; */
    font-size: 15px;
    text-align: center;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.round-image #chicken:hover {
    opacity: 0.7;
    transition: 0.4s ease-in-out;
    cursor: pointer;
}


.round-image #burger {
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}

#prepare4 {
    /* background: white; */
    font-size: 15px;
    text-align: center;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.round-image #burger:hover {
    opacity: 0.7;
    transition: 0.4s ease-in-out;
    cursor: pointer;
}



.round-image #salad {
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}

#prepare5 {
    /* background: white; */
    font-size: 15px;
    text-align: center;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.round-image #salad:hover {
    opacity: 0.7;
    transition: 0.4s ease-in-out;
    cursor: pointer;
}



.round-image #peanut {
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}

#prepare6 {
    /* background: white; */
    font-size: 15px;
    text-align: center;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.round-image #peanut:hover {
    opacity: 0.7;
    transition: 0.4s ease-in-out;
    cursor: pointer;
}


.round-image #pasta {
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}

#prepare7 {
    /* background: white; */
    font-size: 15px;
    text-align: right;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.round-image #pasta:hover {
    opacity: 0.7;
    transition: 0.4s ease-in-out;
    cursor: pointer;
}



.round-image #lime {
    width: 230px;
    margin-top: 20px;
    border-radius: 70%;
    transform: scaleX(90%);
    margin-left: 35px;
}

#prepare8 {
    /* background: white; */
    font-size: 15px;
    text-align: center;
    font-family: "Playwrite IN", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}


.round-image #lime:hover {
    opacity: 0.7;
    transition: 0.4s ease-in-out;
    cursor: pointer;
}

/* review-customers */

.reviews {
    display: grid;
    background-image: url(background-pictures/none.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* height: 650px; */
}


.review-title {
    text-transform: uppercase;
    /* background: red; */
    text-align: center;
    color: #fff;
    font-family: "poppins", cursive;
    position: relative;
    font-size: 40px;
    padding: 40px;
}

.review-title::before {
    content: "";
    height: 2px;
    position: absolute;
    width: 10%;
    top: 75%;
    left: 44%;
    background: #D56638;
}


.review {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-rows: repeat(1, 1fr); */
    gap: 30px;
    margin: 0 80px;
    /* background: red; */
}


.review p {
    /* background: red; */
    color: #fff;
    font-size: 23px;
    grid-auto-flow: dense;
    font-family: "Edu AU VIC WA NT Hand", cursive;
}

.review #reviewer1 {
    border-radius: 50%;
    width: 130px;
    margin-top: 55px;
}



.reviewer-1 #double {
    /* background: red; */
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.review #reviewer2 {
    border-radius: 50%;
    width: 130px;
    margin-top: 10px;
}

.review-2 #double {
    /* background: red; */
    width: 25px;
    height: 25px;
    object-fit: contain;
}


.review #reviewer3 {
    border-radius: 50%;
    width: 130px;
    margin-top: 10px;
}

.review-3 #double {
    /* background: red; */
    width: 25px;
    height: 25px;
    object-fit: contain;
}



.reviewer-name {
    /* background: red; */
    position: relative;
    bottom: 13%;
    font-weight: 700;
    color: #b2b2b2;
}


/* footer */

footer {
    background: #212121;
    /* backdrop-filter: blur(50px); */
    height: 140px;
}

.footer-nav ul {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    list-style: none;
    justify-content: center;
    gap: 40px;
    /* text-decoration: none; */
    /* justify-content: space-evenly; */
    position: relative;
    /* background: red; */
}

ul::before {
    content: "";
    position: absolute;
    height: 2px;
    left: 27%;
    top: 10px;
    width: 45%;
    background: #fff;
    font-weight: 700;
    margin-top: 50px;
}

.footer-nav li {
    color: #fff;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    top: 20px;
    /* transform: scale(1.1); */
}


.footer-copy {
    position: relative;
    top: 82px;
}

.footer-copy p {
    /* background: #8a7d7d; */
    text-align: center;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}