/* menu.css */

.menu-container {
    justify-content: center; 
    margin-bottom: 50px; 
    /* width: 900px; */
}

.food-head {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.food-container {
    display: flex; 
    flex-direction: column; 
    text-align: center;
    width: 270px; 
    box-shadow: 0 0 .5rem 0 rgb(0, 0, 0, 50%);
}

.food-container:hover {
    box-shadow: 0 0 .5rem 0 rgb(0, 0, 0);
}

.detail-container {
    text-align: center;
}

.button {
    display: flex; 
    justify-content: space-evenly; 
    /* background-color: rgb(0, 120, 46);  */
    background-color: rgb(218, 26, 50);
    color: white; 
    border-radius: 10px; 
    width: 250px; 
    height: 35px; 
    margin: auto 10px 10px 10px; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
}

.button:hover {
    background-color: rgb(150, 26, 50);
    color: white;
}

/* IMAGE ZOOM IN */

.image-container {
    width: 250px; 
    overflow: hidden; 
    align-self: center; 
    border-radius: 10px; 
    margin: 10px;
    box-shadow: 0 0 .25rem 0 rgb(0, 0, 0);
}

.image-large-container {
    display: flex;
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 0 .25rem 0 rgb(0, 0, 0);
}

.img-small {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, transform-origin 0.3s ease;
}

.image-container:hover {
    position: relative;
}

.food-container:hover .img-small {
    transform-origin: 75% 0%;
    transform: scale(1.5);
}

@media (max-width: 1000px) {
    .menu-container {
        width: 900px;
    }
}