/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', 'Lato', sans-serif;
    color: #777777;
    background-color: #FFFFFF;
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: 'Montserrat', sans-serif;
    color: #303046;
}

.container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header */
header {
    background-color: #fff;
    /* White header based on observation, or dark? Re-checking screenshot usually header is white with logo, but footer is dark. 
                               Wait, my analysis said "secondary_background_color": "#303046" (header/footer). 
                               Let's stick to the dark purple/blue from the analysis for the top strip if it existed, or just white if it was the nav bar.
                               Looking at the screenshot provided earlier, the header bar seems white with a logo, and maybe a top strip. 
                               Actually, let's look at the screenshot again... ah, cannot see it now. 
                               But the analysis said: "background_color": "#FFFFFF" (main content), "#303046" (header/footer). 
                               So I will make the header dark. */
    background-color: #FFFFFF;
    padding: 15px 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1;
    color: rgb(147, 192, 31);
    /* Signature Green */
    text-transform: uppercase;
    font-size: 24px;
    background-color: #FFFFFF;
}

.logo-main {
    color: #FFFFFF;
}

.logo-sub {
    color: rgb(147, 192, 31);
    /* Signature Green */
    font-size: 14px;
    letter-spacing: 2px;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    /* Max height to keep it looking like a banner */
    max-height: 600px;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    /* Slight overlay to make text pop if needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-text-content h1 {
    color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 3em;
    margin: 0;
}

/* Content Block */
.content-block {
    padding: 60px 0;
    text-align: center;
}

.announcement-text {
    max-width: 800px;
    margin: 0 auto;
}

.announcement-text h2 {
    color: rgb(147, 192, 31);
    /* Signature Green */
    font-size: 2.5em;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.announcement-text p {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #555;
}

/* Add a pink accent line or element to incorporate the signature pink */
.announcement-text::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #E81E89;
    /* Signature Pink */
    margin: 40px auto 0;
}

/* Footer */
footer {
    background-color: #303046;
    color: #FFFFFF;
    padding: 30px 0;
    text-align: center;
    margin-top: 40px;
}

footer p {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.8;
}