/* General styles */
body {
    font-family: 'Amiri', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #228B22, #90EE90);
    color: white; /* Setting default text color to white for better contrast against the dark background */
}

/* Top image styling */
.top {
    width: 100%;
    overflow: hidden;
}

.item-1 {
    width: 100%;
    height: auto;
    max-height: 33vh;
    object-fit: cover;
}

/* Main content styling */
h1 {
    text-align: center;
    margin: 20px 0;
    color: white; /* Making sure the text is visible against the background */
}

#shop-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Product grid styling */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.product-item {
    text-align: center;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: white; /* Adding a white background for product items for better visibility */
    color: black; /* Setting text color to black for product items for better contrast against the white background */
}

.product-item img {
    max-width: 100%;
    height: auto;
}

/* Menu container and item styling */
#menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px 0;
}

.menu-item {
    padding: 10px 20px;
    background-color: #8A2BE2; /* Blue Violet */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    white-space: nowrap;
    flex: 1 1 calc(33.33% - 10px); /* Three buttons per row with some margin */
    max-width: calc(33.33% - 10px); /* Three buttons per row with some margin */
    text-align: center;
    font-size: 18px; /* Increased font size */
    font-family: 'Amiri', Arial, sans-serif;
}

.menu-item:hover {
    background-color: #6A1B9A; /* Darker shade of Blue Violet for hover effect */
}

/* Responsive design */
@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    #menu-container {
        justify-content: flex-start;
    }
    .menu-item {
        flex: 1 1 calc(50% - 10px); /* Two buttons per row on smaller screens */
        max-width: calc(50% - 10px);
    }
}