/* =========================
RESET DEFAULT BROWSER STYLES
========================= */


body {

    margin: 0; /* Removes default spacing */

    font-family: Georgia, serif; /* Serif matches your design */

}



/* =========================
WRAPPER
========================= */

#wrapper {

    width: 100%;

}



/* =========================
HEADER
========================= */

header {

    background-color: #A7C9A2; /* Sage green */

    padding: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Site Name */

header h1 {

    margin: 0;

    font-size: 55px;

    color: #555;

}



/* =========================
NAVIGATION BAR
========================= */

nav {

    background-color: #555;

    padding: 10px 20px;

}



/* Navigation Links */

nav a {

    color: #f1dada;

    text-decoration: none;

    font-size: 18px;

}



/* Dots between links */

nav span {

    color: #f1dada;

    margin: 0 8px;

}



/* Hover Effect */

nav a:hover {

    color: #A7C9A2;

}



/* =========================
PINK DIVIDER
========================= */

.divider {

    height: 40px;

    background-color: #f1dada;

}



/* =========================
HERO SECTION
========================= */

.hero {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background-color: #A7C9A2;

    padding: 80px;

}



/* Left text block */

.hero-text {

    max-width: 500px;

}



/* Page title */

.hero-text h2 {

    font-size: 40px;

    margin-bottom: 30px;

    color: #555;

}



/* Paragraph text */

.hero-text p {

    font-size: 30px;

    color: #555;

}



/* Logo container */

.hero-logo img {

    width: 350px;

}

.hero-gallery img {

    width: 300px;
    height: 400px;
}


/* =========================
FOOTER
========================= */

footer {

    background-color: #f1dada

    display: flex;

    justify-content: space-between;

    padding: 40px;

    font-size: 22px;

    color: #555;

}