body {
    margin: 0 auto;
    max-width: 800px; /* Adjust based on your preference */
    padding: 0 20px; /* Adds some space on the left and right */
    background-color: #f0f0f0; /* Light gray background */
    flex-direction: column;
    align-items: center; /* Centers content */
    font-family: 'Poppins', sans-serif; /* Set Poppins as the default font */
}

header {
    display: flex;
    justify-content: space-between; /* This aligns children elements (logo and nav) to opposite ends */
    align-items: center; /* This centers the children vertically */
    padding: 20px; /* Adds some space around the contents */
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 60px; /* Adjust height as needed */
    margin-right: 20px; /* Adjust spacing between logo and business name */
}

.business-name {
    font-size: 50px; /* Adjust font size as needed */
    font-weight: bold; /* Adjust based on your preference */
    font-family: 'Poppins', sans-serif; /* Ensures Poppins is used */
}

.header-image {
    width: 100%; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures the image takes up the full width of its container */
    margin: 20px auto; /* Centers the image and adds some space above and below */
}

.front-image {
    width: 100%; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures the image takes up the full width of its container */
    margin: 20px auto; /* Centers the image and adds some space above and below */
}

.founder-photo {
    transform: scale(0.8); /* Scales the image to 80% of its current size */
    display: block;
    margin: 0 auto; /* Center the image if it's not already */
}


main {
    max-width: 800px;
    text-align: center; /* Centers the text in the main content */
    font-family: 'Poppins', sans-serif; /* Ensures Poppins is used */
}

footer {
    text-align: center; /* Centers footer content */
    padding: 20px 0; /* Adds some padding above and below the footer content */
    font-family: 'Poppins', sans-serif; /* Ensures Poppins is used */
    font-size: 0.8em;

}


nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Removes default margin */
    display: flex; /* This will align your nav items in a row instead of a column */
}

nav ul li {
    margin: 0 10px; /* Adjusts spacing between nav items */
}

nav ul li a {
    text-decoration: none;
    color: #25847b;
}


/* Ensures the container takes the full width */
.contact-container {
    width: 100%;
    max-width: 600px; /* Adjusts for optimal reading width and aligns with your page's design */
    margin: 0 auto; /* Centers the container */
}

#contact-form {
    display: flex;
    flex-direction: column; /* Stacks the form elements vertically */
}

.form-group {
    margin-bottom: 20px; /* Adds space between each form group */
}

.form-group label {
    display: block; /* Ensures the label takes up its own line */
    margin-bottom: 5px; /* Space between the label and the input/textarea */
}

.form-group input,
.form-group textarea {
    display: block; /* Ensures each element takes up its own line */
    width: 100%; /* Makes input and textarea fill the container width */
    padding: 8px; /* Adds some padding inside the inputs and textarea for better readability */
    box-sizing: border-box; /* Ensures padding doesn't add to the overall width */
}

.form-group textarea {
    height: 150px; /* Increases the height of the textarea */
}

.de-finetti-title {
    color: #25847b; /* Sets the font color for <h1> with the specific class */
}