*{
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}
header nav{
    display: flex;
    justify-content: space-around;
    height: 10vh;
    background-color: #FFFFFF;
    align-items: center;
}
header nav .logo{
    display: flex;
    align-items: center;
    gap: 12px;
}
header nav .logo img{
    height: 40px;
}
header nav .location{
    display: flex;
    align-items: center;
    gap: 12px;
}
header nav .location img{
    height: 20px;
}
header nav .user-opt{
    display: flex;
    align-items: center;
    gap: 15px;
}
header nav .user-opt .search{
    display: flex;
    align-items: center;
    gap: 10px;
}
header nav .user-opt .search img{
    height: 20px;
}
header nav .user-opt .user{
    display: flex;
    align-items: center;
    gap: 15px;
    color: #FFB800;
    box-shadow: 5px 4px 8px 2px #FFAE004A;
}
header nav .user-opt .user{
    height: 50px;
    width: 7em;
    border-radius: 10px;
    padding-left: 30px;
}
header .hero-page{
    height: 80vh;
    background-image: url(/Images/Group\ 1\ 1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: content-box;
    display: flex;
    justify-content: space-between;
}
header .hero-page .delivery-dts{
    padding-left: 73px;
    padding-top: 90px;
}
header .hero-page .delivery-dts .starving h1{
    color: #FFFFFF;
    padding-bottom: 7px;
    font-weight: 700;
    font-size: 9vb;
}
header .hero-page .delivery-dts .location-dts{
    /* border: 1px solid red; */
    border-radius: 12px;
    background-color: #FFFFFF;
    height: 15rem;
    margin-top: 40px;
}
header .hero-page .delivery-dts .location-dts .delivery-mtd{
    display: flex;
    gap: 15px;
    border-bottom: 1px solid black;
    height: 7.5rem;
    align-items: center;
    padding-inline: 30px;
}
header .hero-page .delivery-dts .location-dts .delivery-mtd .bike{
    display: flex;
    gap: 10px;
    background-color: #F172281A;
    /* border: 1px solid red; */
    border-radius: 8px;
    height: 60px;
    width: 120px;
    align-items: center;
    padding-left: 20px;
}
header .hero-page .delivery-dts .location-dts .delivery-mtd .bike img{
    height: 20px;
}
header .hero-page .delivery-dts .location-dts .delivery-mtd .bike h5{
    color: #F17228;
}
header .hero-page .delivery-dts .location-dts .delivery-mtd .pick-up{
    display: flex;
    gap: 10px;
    align-items: center;
    height: 60px;
    width: 120px;
    padding-left: 20px;
}
header .hero-page .delivery-dts .location-dts .delivery-mtd .pick-up img{
    height: 20px;
}
header .hero-page .delivery-dts .location-dts .delivery-mtd .pick-up h5{
    color: #757575;
}
header .hero-page .delivery-dts .location-dts .location-inp{
    display: flex;
    gap: 20px;
    padding-inline: 30px;
    padding-top: 20px;
}
header .hero-page .delivery-dts .location-dts .location-inp .location-txt .input{
    position: relative;
}
header .hero-page .delivery-dts .location-dts .location-inp .location-txt .input input{
    background-color: #F5F5F5;
    border: none;
    border-radius: 10px;
    height: 50px;
    width: 400px;
    padding-left: 40px;
}
header .hero-page .delivery-dts .location-dts .location-inp .location-txt img{
    height: 25px;
    position: absolute;
    top: 30.3rem;
    left: 115px;
}
header .hero-page .delivery-dts .location-dts .location-inp .button img{
    height: 30px;
    position: absolute;
    top: 31rem;
    border: 1px solid black;
    background-color: black;
}
header .hero-page .delivery-dts .location-dts .location-inp .button button{
    height: 50px;
    width: 9rem;
    border-radius: 5px;
    background-color: #FF7A7A;
    color: white;
    border: none;
    position: relative;
}
header .hero-page .food-img img{
    padding-top: 65px;
}
section{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60vh;
    /* padding-inline: 73px; */
}
section .frt-food .salmon img{
    border: 1px solid red;
    border-radius: 10px;
    border: none;
    position: relative;
}
section .frt-food .salmon .discount1{
    display: flex;
    color: white;
    border: 2px solid black;
    box-sizing: border-box;
    background-color: #FFB30E;
    width: 90px;
    border-top-right-radius: 20px;
    border: none;
    padding-left: 10px;
    position: absolute;
    top: 57.9rem;
}
section .frt-food .salmon .discount1 h2{
    font-size: 5vb;
}
section .frt-food .salmon .discount1 .pct span{
    display: block;
}
section .frt-food .greys-vage{
    margin-top: 10px;
}
section .frt-food .remaining{
    border: 1px solid black;
    border-radius: 5px;
    border: none;
    background-color: #F1722833;
    height: 30px;
    width: 200px;
    color: #F17228;
    padding-top: 10px;
    margin-top: 10px;
    text-align: center;
}
.sect{
    height: 60vh;
    background-color: #FFCE6738;
}
.sect span{
    display: block;
}
.sect .how-it-work{
    color: #F17228;
   text-align: center;
   padding-top: 40px;
}
.sect .work{
    display: flex;
    justify-content: space-around; 
    padding-top: 30px;
}
.sect .work img{
    padding-left: 30px;
}
.sect .work h3{
    text-align: center;
}
.sect .work p{
    font-weight: 200;
    padding-top: 10px;
    text-align: center;
}
.popular-items h1{
    text-align: center;
    padding-top: 30px;
}
.popular-items .po-item{
    padding-top: 70px;
    display: flex;
    justify-content: space-between;
}
.popular-items .po-item .bake1 .pick{
    display: flex;
    gap: 5px;
    color: #FFB30E;
}
.popular-items .po-item .bake1 button{
    height: 50px;
    width: 220px;
    border-radius: 7px;
    background-color: #F17228;
    color: #FFFFFF;
    border: none;
}
.popular-items .po-item .p-arrow{
    padding-top: 80px;
}
main{
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    position: relative;
    padding-top: 40px;
}
main .foodworld .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 3.5rem;
    padding-left: 25px;
}
main .foodworld .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .foodworld .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .foodworld .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .foodworld .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .foodworld .open{
    color: #F17228;
    background-color: #F1722833;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
main .pizzahub .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 3.5rem;
    padding-left: 25px;
}
main .pizzahub .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .pizzahub .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .pizzahub .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .pizzahub .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .pizzahub .open{
    color: #F17228;
    background-color: #F1722833;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
main .donuthut1 .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 3.5rem;
    padding-left: 25px;
}
main .donuthut1 .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .donuthut1 .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .donuthut1 .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .donuthut1 .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .donuthut1 .open{
    color: #79B93C;
    background-color: #79B93C33;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
main .donuthut2 .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 3.5rem;
    padding-left: 25px;
}
main .donuthut2 .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .donuthut2 .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .donuthut2 .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .donuthut2 .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .donuthut2 .open{
    color: #79B93C;
    background-color: #79B93C33;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
main .ruby .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 33.2rem;
    padding-left: 25px;
}
main .ruby .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .ruby .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .ruby .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .ruby .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .ruby .open{
    color: #79B93C;
    background-color: #79B93C33;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
main .kuakata .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 33.2rem;
    padding-left: 25px;
}
main .kuakata .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .kuakata .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .kuakata .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .kuakata .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .kuakata .open{
    color: #79B93C;
    background-color: #79B93C33;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
main .red .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 33.2rem;
    padding-left: 25px;
}
main .red .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .red .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .red .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .red .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .red .open{
    color: #79B93C;
    background-color: #79B93C33;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
main .taco .dscnt{
    display: flex;
    gap: 20px;
    position: absolute;
    top: 33.2rem;
    padding-left: 25px;
}
main .taco .dscnt .pick-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #F17228;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 110px;
}
main .taco .dscnt .time-sale{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background-color: #FFB30E;
    color: white;
    border: 1px solid black;
    border: none;
    border-radius: 5px;
    height: 30px;
    width: 90px;
}
main .taco .foodworld-logo{
    display: flex;
    gap: 30px;
    padding-top: 20px;
}
main .taco .foodworld-logo .foodworld-rating .foodworld-star{
    display: flex;
    gap: 15px;
    align-items: center;
    color: #FFB30E;
}
main .taco .open{
    color: #79B93C;
    background-color: #79B93C33;
    text-align: center;
    padding-top: 5px;
    border: 1px solid black;
    height: 30px;
    width: 220px;
    border-radius: 10px;
    border: none;
    margin-block: 20px;
}
.another-main{
    padding-top: 50px;
    padding-left: 43rem;
}
.another-main button{
    background-color: #FFBA26;
    color: white;
    height: 50px;
    width: 120px;
    border-radius: 10px;
    border: none;
}
aside{
    height: 50vh;
    background-color: #FEFAF1;
    margin-top: 40px;
}
aside .search-food{
    padding-top: 40px;
    display: flex;
    justify-content: space-between;
    padding-inline: 60px;
}
aside .search-food .nexts{
    display: flex;
}
aside .search-food .nexts h4{
    color: #FFB30E;
    padding-top: 20px;
}
aside .food-select{
    display: flex;
    justify-content: space-between;
    padding-inline: 70px;
}
aside .food-select img{
    height: 150px;
}
aside .food-select h6{
    text-align: center;
    padding-top: 20px;
}
.installation{
    height: 30vh;
    background-color: #FEEFD0;
    padding-top: 60px;
}
.installation .promotion{
    display: flex;
    justify-content: center;
    gap: 50px;
    border: 1px solid black;
    width: fit-content;
    background-color: white;
    border-radius: 10px;
    align-items: center;
    border: none;
    margin-left: 250px;
    padding-left: 30px;
}
.installation .promotion span{
    display: block;
}
.installation .promotion h2{
    color: #FB3C00;
}
.installation .promotion .tag{
    display: flex;
    gap: 20px;
    align-items: center;
    border-right: 1px solid #CFCFCF;
    padding-right: 30px;
}
.installation .promotion .location-tag{
    display: flex;
    gap: 40px;
    align-items: center;
    border-right: 1px solid #CFCFCF;
    padding-right: 30px;
}
.installation .promotion .clock-tag{
    display: flex;
    gap: 40px;
    align-items: center;
    padding-right: 30px;
    padding-block: 50px;
}
.phony{
    /* display: flex;
    justify-content: space-around; */
    height: 80vh;
    background-image: url(/Images/App\ Download.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: #FEEFD0; */
    /* padding-top: 70px; */
}
/* .phony .to-delete .main{
    position: relative;
}
.phony .to-delete .other{
    position: absolute;
    top: 235rem;
}
.phony .install{
    align-items: center;
}
.phony .install h1{
    color: #FFB800;
    padding-bottom: 10px;
    padding-left: 40px;
}
.phony .install p{
    color: #827E7E;
    padding-left: 40px;
    padding-bottom: 20px;
}
.phony .install span{
    display: block;
}
.phony .install .stores{
    display: flex;
} */
.foodie{
    padding-inline: 80px;
    padding-top: 70px;
}
.foodie .sandwich-food{
    display: flex;
    width: 100%;
    box-shadow: 5px 4px 8px 2px #7C7C7C47;
    border-radius: 20px;
}
.foodie .sandwich-food:hover{
    position: relative;
    bottom: 5px;
}
.foodie .fried-chicken:hover{
    position: relative;
    bottom: 5px;
}
.foodie .spicy-pizza:hover{
    position: relative;
    bottom: 5px;
}
.foodie .sandwich-food .image{
    width: 75%;
    background-image: url(/Images/crispy-sandwich.png);
    background-position: center;
    background-repeat: no-repeat;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.foodie .sandwich-food .crispy span{
    display: block;
}
.foodie .sandwich-food .crispy .crip{
    color: #FFB800;
}
.foodie .sandwich-food .crispy{
    width: 45%;
    padding-top: 70px;
    padding-left: 90px;
}
.foodie .sandwich-food .crispy p{
    padding-top: 30px;
}
.foodie .sandwich-food .crispy button{
    margin-top: 130px;
    height: 40px;
    width: 300px;
    background-color: #FF8A00;
    color: white;
    border-radius: 10px;
    border: none;
    margin-bottom: 60px;
}
.foodie .fried-chicken{
    display: flex;
    width: 100%;
    margin-top: 70px;
    box-shadow: 5px 4px 8px 2px #7C7C7C47;
    border-radius: 20px;
}
.foodie .fried-chicken .image{
    width: 75%;
    background-image: url(/Images/fried-chicken.png);
    background-position: center;
    background-repeat: no-repeat;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.foodie .fried-chicken .chicken span{
    display: block;
}
.foodie .fried-chicken .chicken{
    width: 45%;
    padding-top: 70px;
    padding-left: 50px;
}
.foodie .fried-chicken .chicken p{
    padding-top: 30px;
}
.foodie .fried-chicken .chicken button{
    margin-top: 130px;
    height: 40px;
    width: 300px;
    background-color: #FF8A00;
    color: white;
    border-radius: 10px;
    border: none;
    margin-bottom: 60px;
}
.foodie .spicy-pizza{
    display: flex;
    width: 100%;
    margin-block: 70px;
    box-shadow: 5px 4px 8px 2px #7C7C7C47;
    border-radius: 20px;
}
.foodie .spicy-pizza .image{
    width: 75%;
    background-image: url(/Images/spicy-pizza.png);
    background-position: center;
    background-repeat: no-repeat;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.foodie .spicy-pizza .spicy span{
    display: block;
}
.foodie .spicy-pizza .spicy .crip{
    color: #FFB800;
}
.foodie .spicy-pizza .spicy{
    width: 45%;
    padding-top: 70px;
    padding-left: 90px;
}
.foodie .spicy-pizza .spicy p{
    padding-top: 30px;
}
.foodie .spicy-pizza .spicy button{
    margin-top: 130px;
    height: 40px;
    width: 300px;
    background-color: #FF8A00;
    color: white;
    border-radius: 10px;
    border: none;
    margin-bottom: 60px;
}
.last-side{
    height: 40vh;
    background-image: url(/Images/last-side.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
}
.last-side span{
    display: block;
}
.last-side .words{
    text-align: center;
    color: white;
    padding-top: 50px;
}
.last-side button{
    height: 40px;
    width: 200px;
    background-color: #F17228;
    color: white;
    border-radius: 10px;
    border: none;
    margin-left: 40rem;
    margin-top: 50px;
}
footer{
    height: 100vh;
    background-color: #212121;
}
footer .city .top-city{
    padding-top: 50px;
    border-bottom: 2px solid #424242;
    padding-inline: 70px;
    color: white;
}
footer .city .top-city .cities{
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
    padding-bottom: 80px;
}
footer .sub-foot{
    display: flex;
    justify-content: space-between;
    padding-inline: 70px;
    padding-top: 50px;
    border-bottom: 2px solid #424242;
    padding-bottom: 60px;
}
footer .sub-foot a{
    text-decoration: none;
    color: white;
}
footer .sub-foot .knw-company{
    display: flex;
    gap: 60px;
}
footer .sub-foot .knw-company h1{
    padding-bottom: 30px;
}
footer .sub-foot .knw-company p{
    padding-bottom: 5px;
}
footer .sub-foot .social .social-hnd{
    display: flex;
    gap: 10px;
    padding-top: 20px;
}
footer .sub-foot .social h3{
    color: #F5F5F5;
}
footer .sub-foot .social p{
    color: white;
    padding-block: 30px;
}
footer .sub-foot .message{
    display: flex;
    gap: 30px;
}
footer .sub-foot .message input{
    height: 40px;
    width: 250px;
    padding-left: 50px;
    position: relative;
}
footer .sub-foot .message img{
    position: absolute;
    top: 420rem;
}
footer .sub-foot .message button{
    background-color: #FFB800;
    color: white;
    border-radius: 10px;
    height: 45px;
    width: 100px;
    border: none;
}
footer .foot-last{
    display: flex;
    justify-content: space-between;
    padding-inline: 70px;
    align-items: center;
    padding-top: 10px;
}
footer .foot-last .reserve{
    display: flex;
    gap: 10px;
    color: #F5F5F5;
    align-items: center;
}
footer .foot-last .maker{
    display: flex;
    gap: 10px;
    color: white;
    align-items: center;
}
button{
    cursor: pointer;
}