<style>
    /* Add your CSS styles here */
    body {
        font-family: Arial, sans-serif; /* This is a simple and clean font */
        margin: 0;
        padding: 0;
        background-color: #f4f4f4; /* Light gray background for some contrast */
    }
    header {
        background: #fff;
        padding: 10px 20px; /* Add space around the header */
        text-align: center;
    }
    nav {
        display: flex;
        justify-content: center;
        gap: 20px; /* Add space between navigation items */
    }
    nav a {
        text-decoration: none;
        color: #333; /* Dark text for better readability */
        font-weight: bold;
    }
    .container {
        max-width: 1200px;
        margin: 20px auto; /* Center the container */
        padding: 0 20px;
    }
    .hero {
        background: #ddd; /* Light background for the hero section */
        padding: 20px;
        text-align: center;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
        gap: 20px; /* Space between grid items */
        background: #eee; /* Gray background for the grid */
        padding: 20px;
    }
    .footer {
        background: #fff;
        padding: 10px 20px;
        text-align: center;
    }
    /* ... additional styles here ... */
	
	/* Add this inside the <style> tag in the <head> section */
.grid-item {
    background: #ccc; /* Grey background */
    padding: 20px;
    border-radius: 5px; /* Optional: rounds the corners */
}

.grid-item h2 {
    color: #333; /* Dark grey color for the text */
    margin-bottom: 15px; /* Space below the title */
}

.grid-item img {
    width: 100%; /* Makes the image responsive */
    height: auto;
    margin-bottom: 15px; /* Space below the image */
}

.grid-item p {
    color: #333; /* Dark grey color for the text */
}

	
</style>