*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
/* Mobile Design */
header{
    background-color: rgb(247,235,218);
    /* background-image: url("/assets/bg_img_hero.svg"),
    url("/assets/bg_img_hero.svg");
    background-repeat: no-repeat, no-repeat;
    background-size: 420px, 420px;
    background-position: top right, bottom left;
    padding-bottom: 300px; */
}
.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
}
.navbar > img{
    width: 48px;
}
.navbar .nav-links{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* .navbar .nav-links li{
    display: inline-block;
} */
.navbar .nav-links li a{
    text-decoration: none;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
}
.navbar .nav-3{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.navbar .input-section .fa-solid{
    position:absolute;
    padding: 4px;
}
.navbar .input-section .input-field{
    max-width: 96px;
    border: 1px solid tomato;
    border-radius: 10px;
    padding: 5px 10px 5px 24px;
    font-size: 10px;
}
/* input::placeholder{
    text-align: center;
    padding-left: 16px;
} */

.hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}
.hero .hero-text{
    text-align: center;
    padding-bottom: 20px;
}
.hero .hero-text h1{
    font-size: 36px;
    font-weight: bold;
}
.hero .hero-text p{
    font-size: 20px;
    font-weight: light;
    padding-bottom: 16px;
}
.hero .hero-text .hero-btn{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.hero .hero-text .hero-btn .order-btn{
    border: 1px solid rgb(47,33,6);
    border-radius: 12px;
    background-color: rgb(47,33,6);
    padding: 10px 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
}
.hero .hero-text .hero-btn .menu-btn{
    border: 1px solid rgb(47,33,6);
    border-radius: 12px;
    /* background-color: rgb(47,33,6); */
    padding: 10px 20px;
    color: rgb(255,145,43);
    font-size: 16px;
    font-weight: 700;
}
.hero .hero-text .hero-btn .order-btn img{
    border: 1px solid rgb(255,145,43);
    border-radius: 100%;
    padding: 5px;
    background-color: rgb(255,145,43);
}
.hero .hero-img{
    width: 50%;
    /* height: auto; */
    border: 1px solid tomato;
    border-radius: 100%;
    /* padding: 10px; */
    background-color: rgb(47,33,5);
    position: relative;
}
.hero .hero-img .hero-main-img{
    width: 100%;
    padding: 6px;
}
.hero .hero-img p{
    width: fit-content;
    border: 2px solid rgb(164,158,145);
    border-radius: 24px;
    padding: 2px 10px;
    text-align: center;
    background-color: rgb(255,255,255);
    position: absolute;
    z-index: 1;
}
.hero .hero-img .stat-one{
    top: 80px;
    right: -36px;
}
.hero .hero-img .stat-two{
    top: 10px;
    left: -20px;
}
.hero .hero-img .stat-three{
    bottom: 40px;
    left: -20px;
}
.popular{
    width: 100%;
    padding: 40px 0px;
}
.popular > h1{
    text-align: center;
    padding-bottom: 20px;
}
.popular > img{
    display: none;
}
.popular .popular-cards{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 20px;
}
.popular .popular-cards .popular-card{
    position: relative;
    width: fit-content;
    border: 1px solid rgb(164,158,145);
    border-radius: 8px;
    padding: 20px 16px;
    background-color: rgb(255,255,255);
}
.popular .popular-cards .popular-card  .card-image > img{
    width: 270px;
}
.popular .popular-cards .popular-card .card-star{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: fit-content;
    border: 4px solid rgb(164,158,145);
    border-radius: 20px;
    padding: 2px 10px;
    text-align: center;
    background-color: rgb(255,255,255);
    position: absolute;
    top: 28px;
    left: 24px;
    z-index: 1;
}
.popular .popular-cards .popular-card .card-text{
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 10px;
}
.popular .popular-cards .popular-card .card-text .card-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0;
}
.popular .popular-cards .popular-card .card-text .card-btn button{
    border: 1px solid rgb(255,145,43);
    border-radius: 4px;
    padding: 4px 10px;
    text-align: center;
}
.popular .popular-cards .popular-card .card-text img{
    border-radius: 100%;
    padding: 4px;
    background-color: rgb(255,145,43);
}
.how-to{
    text-align: center;
    padding: 30px 0;
}
.how-to > h1{
    padding-bottom: 20px;
}
.how-to .delivery-cards{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 20px;
    text-align: center;
}
.how-to .delivery-cards .delivery-card h4{
    padding: 10px 0;
}




/* Tablet Design */
@media screen and (min-width: 768px){
    header{
        background-color: rgb(247,235,218);
        background-image: url("/assets/bg_img_hero.svg"),
        url("/assets/bg_img_hero.svg");
        background-repeat: no-repeat, no-repeat;
        background-size: 360px, 340px;
        background-position: top right, bottom left;
        padding-bottom: 260px;
    }
    .navbar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32px 24px;
    }
    .navbar > img{
        width: 120px;
    }
    .navbar .nav-links{
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }


    .navbar .nav-links li a{
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
    }
    .navbar .nav-3{
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 40px;
    }

    .navbar .input-section .fa-solid{
        position:absolute;
        padding: 14px;
    }

    .navbar .input-section .input-field{
        max-width: 160px;
        border: 1px solid tomato;
        border-radius: 10px;
        padding: 10px 20px 10px 36px;
        font-size: 18px;
        font-weight: 400;
    }
    /* input::placeholder{
        padding-left: 20px;
    } */

    .hero{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 20px;
        padding-right: 48px;
    }
    .hero .hero-text{
        width: 50%;
        text-align: start;
    }
    .hero .hero-text h1{
        font-size: 44px;
        font-weight: bold;
        padding: 20px 0;
    }
    .hero .hero-text p{
        font-size: 20px;
        font-weight: light;
        padding-bottom: 16px;
    }
    .hero .hero-text .hero-btn{
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 20px;
    }
    .hero .hero-text .hero-btn .order-btn{
        border: 1px solid rgb(47,33,6);
        border-radius: 12px;
        background-color: rgb(47,33,6);
        padding: 10px 20px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 16px;
        font-weight: 700;
    }
    .hero .hero-text .hero-btn .menu-btn{
        border: 1px solid rgb(47,33,6);
        border-radius: 12px;
        padding: 10px 20px;
        color: rgb(255,145,43);
        font-size: 16px;
        font-weight: 700;
    }
    .hero .hero-img{
        width: 50%;
        border: 1px solid tomato;
        border-radius: 100%;
        padding: 10px;
        padding-left: 30px;
        background-color: rgb(47,33,5);
        position: relative;
    }
    .hero .hero-img .hero-main-img{
        width: 100%;
    }
    .hero .hero-img p{
        width: fit-content;
        border: 4px solid rgb(164,158,145);
        border-radius: 24px;
        padding: 10px 32px;
        text-align: center;
        background-color: rgb(255,255,255);
        position: absolute;
        z-index: 1;
    }
    .hero .hero-img .stat-one{
        top: 150px;
        right: -40px;
    }
    .hero .hero-img .stat-two{
        top: 20px;
        left: 10px;
    }
    .hero .hero-img .stat-three{
        bottom: 80px;
        left: -10px;
    }
    .popular{
        width: 100%;
        position: absolute;
    }
    .popular > h1{
        position: absolute;
        top: -200px;
        padding-left: 40px;
    }
    .popular > img{
        display: block;
        width: 100%;
        padding: 0 40px;
        position: relative;
        z-index: 1;
        top: -100px;
    }
    .popular .popular-cards{
        width: 100%;
        padding: 0 60px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        position: relative;
        top: -400px;
        z-index: 2;
    }
    .popular .popular-cards .popular-card{
        position: relative;
        width: fit-content;
        border: 1px solid rgb(164,158,145);
        border-radius: 8px;
        padding: 20px 16px;
        background-color: rgb(255,255,255);
    }
    .popular .popular-cards .popular-card  .card-image > img{
        width: 180px;
    }
    .popular .popular-cards .popular-card .card-star{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: fit-content;
        border: 4px solid rgb(164,158,145);
        border-radius: 20px;
        padding: 2px 10px;
        text-align: center;
        background-color: rgb(255,255,255);
        position: absolute;
        top: 28px;
        left: 24px;
        z-index: 1;
    }
    .popular .popular-cards .popular-card .card-text{
        display: flex;
        align-items: start;
        justify-content: space-between;
        padding: 10px;
    }
    .popular .popular-cards .popular-card .card-text .card-btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 0;
    }
    .popular .popular-cards .popular-card .card-text .card-btn button{
        border: 1px solid rgb(255,145,43);
        border-radius: 4px;
        padding: 4px 10px;
        text-align: center;
    }
    .popular .popular-cards .popular-card .card-text img{
        border-radius: 100%;
        padding: 4px;
        background-color: rgb(255,145,43);
    }
    .how-to{
        padding: 260px 20px 0;
    }
    .how-to .delivery-cards{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        text-align: center;
    }
    .how-to .delivery-cards .delivery-card h4{
        padding: 10px 0;
    }
}



/* Desktop Design */
@media screen and (min-width: 1200px){
    header{
        /* height: 500px; */
        background-color: rgb(247,235,218);
        background-image: url("/assets/bg_img_hero.svg"),
        url("/assets/bg_img_hero.svg");
        background-repeat: no-repeat, no-repeat;
        background-size: 420px, 420px;
        background-position: top right, bottom left;
        padding-bottom: 300px;
    }
    .navbar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32px 135px;
    }

    .navbar .nav-links{
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }

    .navbar .nav-links li{

    }

    .navbar .nav-links li a{
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
    }
    .navbar .nav-3{
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 30px;
    }

    .navbar .input-section .fa-solid{
        position:absolute;
        /* margin: 8px; */
        padding: 10px;
    }

    .navbar .input-section .input-field{
        border: 1px solid tomato;
        border-radius: 10px;
        padding: 5px 12px 5px 28px;
        font-size: 20px;
        font-weight: 400;
    }

    /* input::placeholder{
        text-align: center;
        padding-left: 20px;
    } */

    .hero{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 100px;
        margin: 0 135px;
    }

    .hero .hero-text{
        width: 50%;
        text-align: start;
    }
    .hero .hero-text h1{
        font-size: 44px;
        font-weight: bold;
        padding: 20px 0;
    }
    .hero .hero-text p{
        font-size: 24px;
        font-weight: light;
        padding-bottom: 16px;
    }

    .hero .hero-text .hero-btn{
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 20px;
        font-size: 16px;
        font-weight: 700;
    }
    .hero .hero-text .hero-btn .order-btn{
        border: 1px solid rgb(47,33,6);
        border-radius: 12px;
        background-color: rgb(47,33,6);
        padding: 10px 20px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 16px;
        font-weight: 700;
    }
    .hero .hero-text .hero-btn .menu-btn{
        border: 1px solid rgb(47,33,6);
        border-radius: 12px;
        /* background-color: rgb(47,33,6); */
        padding: 10px 20px;
        color: rgb(255,145,43);
        font-size: 16px;
        font-weight: 700;
    }
    .hero .hero-text .hero-btn .order-btn img{
        border: 1px solid rgb(255,145,43);
        border-radius: 100%;
        padding: 5px;
        background-color: rgb(255,145,43);
    }
    .hero .hero-img{
        width: 50%;
        /* height: auto; */
        border: 1px solid tomato;
        border-radius: 100%;
        padding: 10px;
        background-color: rgb(47,33,5);
        position: relative;
    }

    .hero .hero-img .hero-main-img{
        width: 100%;
        padding: 20px;
    }

    .hero .hero-img p{
        width: fit-content;
        border: 4px solid rgb(164,158,145);
        border-radius: 24px;
        padding: 10px 44px;
        text-align: center;
        background-color: rgb(255,255,255);
        position: absolute;
        z-index: 1;
        font-size: 16px;
        font-weight: lighter;
    }

    .hero .hero-img .stat-one{
        top: 150px;
        right: -76px;
    }
    .hero .hero-img .stat-two{
        top: 10px;
        left: -16px;
    }
    .hero .hero-img .stat-three{
        /* position: absolute; */
        bottom: 70px;
        left: -24px;
        /* z-index: 1; */
    }

    .popular{
        width: 100%;
        position: absolute;
    }
    .popular > h1{
        position: absolute;
        top: -250px;
        padding-left: 120px;
    }
    .popular > img{
        display: block;
        width: 100%;
        padding: 0 80px;
        position: relative;
        z-index: 1;
        top: -120px;
    }

    .popular .popular-cards{
        width: 100%;
        padding: 0 150px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        position: relative;
        top: -520px;
        z-index: 2;
    }

    .popular .popular-cards .popular-card{
        position: relative;
        width: fit-content;
        border: 1px solid rgb(164,158,145);
        border-radius: 8px;
        padding: 20px 16px;
        background-color: rgb(255,255,255);
    }

    .popular .popular-cards .popular-card  .card-image > img{
        width: 270px;
    }

    .popular .popular-cards .popular-card .card-star{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: fit-content;
        border: 4px solid rgb(164,158,145);
        border-radius: 20px;
        padding: 2px 10px;
        text-align: center;
        background-color: rgb(255,255,255);
        position: absolute;
        top: 28px;
        left: 24px;
        z-index: 1;
    }

    .popular .popular-cards .popular-card .card-text{
        display: flex;
        align-items: start;
        justify-content: space-between;
        padding: 10px;
    }
    .popular .popular-cards .popular-card .card-text .card-btn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 0;
    }
    .popular .popular-cards .popular-card .card-text .card-btn button{
        border: 1px solid rgb(255,145,43);
        border-radius: 4px;
        padding: 4px 10px;
        text-align: center;
    }

    .popular .popular-cards .popular-card .card-text img{
        border-radius: 100%;
        padding: 4px;
        background-color: rgb(255,145,43);
    }

    .how-to{
        padding: 320px 135px 0;
    }

    .how-to .delivery-cards{
        flex-direction: row;
        align-items: center;
        justify-content: space-;
        gap: 200px;
        text-align: center;
    }

    .how-to .delivery-cards .delivery-card h4{
        padding: 10px 0;
    }
}