* {
    box-sizing: border-box;
}
/* Start Body editing here */
html, body{
margin: 0 auto;
padding: 0 auto;
text-align: center;
background-repeat: no-repeat;
background-color: pink;
display: flex;
flex-direction: column;
width: 100%;
overflow-x: hidden;
min-height: 100vh;
background-image: url();
background-attachment: fixed;
}
header{
background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
}
#mh1{
    color: white;
    font-size: 30px;
    text-shadow: 2px 2px black;
    background-color: purple;
}
#cart-icon-container {
    color: white;
    font-size: 24px;
    background-color: #333;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid white;
}
#cart-count {
    background-color: purple;
    color: white;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 5px;
}
#cdheaderlogo{
    width: 75px;
    height: 75px;
    overflow-x: hidden;
    overflow-y: hidden;
}
#section1{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: none;
    border: 1px solid white;
    font-family: "Archivo Black", sans-serif;
    font-size: none;
    padding-top: 10px;
}
#s1header{
    color: white;
    font-size: 30px;
    text-shadow: 2px 2px black;
    background-color: purple;
}
.image-gallery{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
    width: 100%;
}
/* start food card editing here */
.food-img {
    width: calc(50% - 4px);          /* Forces the image to stretch across the card */
    height: 150px;        /* Fixes the exact height for every image */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-radius: 8px;
}
/* end food card editing here */
/* 1. Turn the menu section into a grid container */
#menu-section {
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 column for mobile phones */
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* 2. Adjust card sizing so they fit nicely in a grid */
.food-card {
    background-color: white;
    border: 2px solid black;
    border-radius: 12px;
    width: 100%; /* Fills its grid cell completely */
    max-width: none; /* Removes the old restriction so the grid controls it */
    padding: 20px;
    margin: 0; /* Grid 'gap' handles the spacing now */
    text-align: center;
}

/* 3. Media Query: When the screen is wider than a tablet (768px+), switch to a multi-column grid */
@media (min-width: 768px) {
    #menu-section {
        grid-template-columns: repeat(2, 1fr); /* 2 columns side-by-side on tablets/small laptops */
    }
}

/* 4. On very wide desktop screens, expand to 3 columns */
@media (min-width: 1024px) {
    #menu-section {
        grid-template-columns: repeat(3, 1fr); /* 3 columns side-by-side on large screens */
    }
}