/* GENERAL PAGE STYLING */

* {

    box-sizing: border-box;

}

body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    background-color: #f8f5f3;

    color: #3f3835;

    line-height: 1.6;

}

/* HEADER */

header {

    background-color: #cda9a1;

    color: white;

    text-align: center;

    padding: 30px 20px;

}

header h1 {

    margin: 0;

    font-size: 40px;

}

header p {

    margin: 5px 0 0;

    letter-spacing: 2px;

}

/* NAVIGATION */

nav {

    background-color: white;

    text-align: center;

    padding: 18px;

    border-bottom: 1px solid #ddd;

}

nav a {

    color: #654d48;

    text-decoration: none;

    font-weight: bold;

    margin: 0 22px;

}

nav a:hover {

    color: #c18d82;

}

/* HERO IMAGE */

.hero {

    min-height: 500px;

    background-image:

        linear-gradient(

            rgba(0, 0, 0, 0.25),

            rgba(0, 0, 0, 0.25)

        ),

        url("images/hero.jpg");

    background-size: cover;

    background-position: center;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

}

.hero-content {

    padding: 30px;

}

.hero h2 {

    font-size: 48px;

    margin-bottom: 10px;

    color: white;

    text-shadow: 2px 2px 5px #333333;

}
.hero p {

    font-size: 20px;

}

/* MAIN CONTENT */

main {

    width: 85%;

    max-width: 1100px;

    margin: 50px auto;

}

h2 {

    color: #9d6f66;

}

.welcome {

    text-align: center;

    max-width: 750px;

    margin: 0 auto 50px;

}

.center {

    text-align: center;

}

/* BUTTONS */

.button {

    display: inline-block;

    background-color: #9d6f66;

    color: white;

    text-decoration: none;

    padding: 14px 25px;

    margin-top: 15px;

}

.button:hover {

    background-color: #76534c;

}

.small-button {

    display: inline-block;

    background-color: #9d6f66;

    color: white;

    text-decoration: none;

    padding: 9px 17px;

}

.small-button:hover {

    background-color: #76534c;

}

/* PAGE HEADINGS */

.page-heading {

    text-align: center;

    margin-bottom: 45px;

}

.page-heading h2 {

    font-size: 38px;

    margin-bottom: 5px;

}

/* ABOUT PAGE */

.about-content {

    background-color: white;

    padding: 40px;

}

/* PRODUCTS */

.product-grid {

    display: flex;

    gap: 25px;

}

.product {

    flex: 1;

    background-color: white;

    padding: 20px;

    text-align: center;

}

.product img {

    width: 100%;

    height: 300px;

    object-fit: cover;

}

.product h3 {

    color: #76534c;

}

.price {

    font-size: 20px;

    font-weight: bold;

    color: #9d6f66;

}

/* CONTACT PAGE */

.contact-container {

    display: flex;

    gap: 50px;

}

.contact-info {

    flex: 1;

}

form {

    flex: 1;

    background-color: white;

    padding: 30px;

}

label {

    display: block;

    font-weight: bold;

    margin-top: 15px;

}

input[type="text"],

input[type="email"],

textarea {

    width: 100%;

    padding: 12px;

    margin-top: 6px;

    border: 1px solid #ccc;

}

input[type="submit"] {

    background-color: #9d6f66;

    color: white;

    border: none;

    padding: 12px 25px;

    margin-top: 20px;

    cursor: pointer;

}

input[type="submit"]:hover {

    background-color: #76534c;

}

/* FOOTER */

footer {

    background-color: #5e4843;

    color: white;

    text-align: center;

    padding: 20px;

}

/* MOBILE */

@media screen and (max-width: 750px) {

    nav a {

        display: block;

        margin: 10px;

    }

    .product-grid {

        display: block;

    }

    .product {

        margin-bottom: 25px;

    }

    .contact-container {

        display: block;

    }

    form {

        margin-top: 30px;

    }

    .hero h2 {

        font-size: 36px;

    }

}