/* General Styles */
body {
    background-color: #ECE8DF; /* Light earthy beige */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header.banner {
    background-color: #2e2d2d; /* Earthy Olive Green */
    padding: 40px;
    text-align: center;
    color: #ECE8DF; /* Light Beige */
}

header.banner h1 {
    font-size: 2.5rem;
    margin: 0;
}

nav {
    text-align: center;
    margin: 20px 0;
}

nav button {
    background-color: #483e38; /* Earthy Brown */
    border: none;
    color: #ECE8DF;
    padding: 10px 20px;
    margin: 5px;
    font-size: 1rem;
    cursor: pointer;
}

nav button a {
    text-decoration: none;
    color: #ECE8DF;
}

nav button:hover {
    background-color: #242a13;
}

main {
    padding: 20px;
}

.content {
    display: flex;
    justify-content: space-between;
}

.text-content {
    width: 50%;
}

.image-content img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

/* Responsive for Tablets */
@media (max-width: 768px) {
    header.banner {
        padding: 20px;
    }

    header.banner h1 {
        font-size: 2rem;
    }

    .content {
        flex-direction: column;
        align-items: center;
    }

    .text-content {
        width: 100%;
        text-align: center;
    }

    .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive for iPhone */
@media (max-width: 375px) {
    header.banner {
        display: none; /* Remove banner */
    }

    nav button {
        display: block;
        width: 100%;
        margin: 10px 0;
    }

    .products {
        grid-template-columns: 1fr;
    }

    .image-content img {
        max-width: 100%;
    }

    main {
        padding: 10px;
    }
}