main{
    padding: 5vw 4.688vw;
}

.container{
    display: flex;
    background-color: white;
    padding: 5vw;
    border-radius: 0.521vw;
    border: 1px solid #cfcfcf;
    gap: 8vw;
    justify-content: center;
}

.image{
    height: 20vw;
    width: 20vw;
}

.image img{
    object-fit: fill;
    height: 100%;
    width: auto;
}

.content{
    display: flex;
    flex-direction: column;
    gap: 3vw;
    width: 40vw;
}

.text{
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.nutrition{
    background-color: #FFB349;
    justify-content: center;
    padding: 2vw 2vw;
    border-radius: 0.521vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.nutrition-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2vw;
}

.nutrition-grid div{
    background-color: #efefef;
    padding: 2vw 3vw;
    border-radius: 0.52vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
}

.nutrition-grid span{
    font-size: 1vw;
    font-weight: lighter;
}

.nutrition p{
    font-size: 0.9vw;
}

.nutrition h1{
    font-size: 1.667vw;
}
.qty{
    display: flex;
    height: 2vw;
}
.qty input{
    border: 1px solid #cfcfcf;
    border-left: none;
    border-right: none;
    width: 3vw;
    font-size: 0.9vw;
    text-align: center;
}

.qty button{
    width: 2vw;
    font-size: 0.9vw;
}

.qty button:hover{
    background-color: #cfcfcf;
}

#plus{
    border: 1px solid #cfcfcf;
    border-top-left-radius: 0.521vw;
    border-bottom-left-radius: 0.521vw;
    color: #bb1414;
    font-weight: bold;
}

#minus{
    border: 1px solid #cfcfcf;
    border-top-right-radius: 0.521vw;
    border-bottom-right-radius: 0.521vw;
    color: #bb1414;
    font-weight: bold;
}

.jumlah{
    display: flex;
    gap: 2vw;
    align-items: center;
}

.order{
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.buttons{
    display: flex;
    gap: 1vw;
}

.pesan{
    background-color: #bb1414;
    border-radius: 0.52vw;
    font-size: 1vw;
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 1vw 1.2vw;
    border: 2px solid #bb1414;
}

.cart{
    background-color: #ffb0b0;
    border: 2px solid #bb1414;
    text-decoration: none;
    font-size: 1vw;
    font-weight: bold;
    color: #bb1414;
    border-radius: 0.521vw;
    padding: 1vw 1.2vw;
}

.pesan:hover{
    background-color: #8f0f0f;
    border: 2px solid #8f0f0f;
}

.cart:hover{
    background-color: #8f0f0f;
    color: white;
    border: 2px solid #8f0f0f;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}