<style>
    body {
        margin: auto 0;
        padding: auto 0;
        font-family: arial, sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
    }
    header {
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        text-align: center;
    }
    nav ul {
        list-style-type: none;
        padding: 0;
    }
    nav ul li {
        display: inline;
        margin: 0 15px;
    }
    nav ul li a {
        color: #fff;
        text-decoration: none;
        transition: text-decoration 0.3s;
    }
    nav ul li a:hover {
        text-decoration: underline;
    }
    #hero {
        background-image: url('Banner.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        padding: 100px;
        color: #fff; 
        text-align: left;
        height: 350px;
        text-align: left;
    }


    #hero h2{
        margin-top: 100px;
    }
    main {
        padding: 20px;
        text-align: center;
    }
    section {
        padding: 20px;
        text-align: center; 
    }

    
    #products {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
        gap: 20px; /* Space between items */}
    
    .product {
        border: 1px solid #ddd;
        padding: 15px;
        background-color: #fff;
        text-align: center; 
    }
    .product img {
        width: 150px; /* Set width */
        height: 250px; /* Set height */
        object-fit: cover; /* Cover to maintain aspect ratio */
    }

    #about{
        text-align: center;
        background-color: #333;
        color:bisque;
        }
    footer {
        text-align: center; 
        padding: 10px;
        background-color: #333;
        color: #fff;
        position: relative;
        bottom: 0;
        width: 100%;
    }
</style>