:root {
    --efr-green-dark: #132618;
    --efr-green: #244c2f;
    --efr-green-mid: #3f6f43;
    --efr-green-light: #6f9b5a;
    --efr-moss: #8fae66;
    --efr-gold: #c79a4b;
    --efr-cream: #f4eddc;
    --efr-earth: #8a5a35;
    --efr-bark: #5a3a27;
    --efr-muted: #67725f;
    --efr-card: #fffaf0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--efr-cream);
    color: #233024;
}

.bg-forest {
    background: linear-gradient(135deg, var(--efr-green-dark), var(--efr-green));
}

.bg-earth {
    background: #eadfca;
}

.bg-cream {
    background: var(--efr-cream);
}

.text-gold {
    color: var(--efr-gold);
}

.text-forest {
    color: var(--efr-green-dark);
}

.navbar-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin-right: .5rem;
}

.btn-gold {
    background: var(--efr-gold);
    border-color: var(--efr-gold);
    color: #1f261f;
    font-weight: 700;
}

.btn-gold:hover {
    background: #b48736;
    border-color: #b48736;
    color: #1f261f;
}

.btn-outline-cream {
    border-color: var(--efr-cream);
    color: var(--efr-cream);
    font-weight: 700;
}

.btn-outline-cream:hover {
    background: var(--efr-cream);
    color: var(--efr-green-dark);
}

/*
    Static pond background.
    background-attachment: fixed gives the still/parallax-style background on desktop.
    The media query below disables it on mobile because iOS/Safari can handle fixed backgrounds poorly.
*/
.hero {
    min-height: 66vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(12, 28, 16, .68), rgba(12, 28, 16, .74)),
        url("/img/pond-aerial-view.jpg") center center / cover no-repeat fixed;
}

.pond-bg-section {
    background:
        linear-gradient(rgba(19, 38, 24, .84), rgba(19, 38, 24, .88)),
        url("/img/pond-aerial-view.jpg") center center / cover no-repeat fixed;
    color: #fff;
}

@media (max-width: 991.98px) {
    .hero,
    .pond-bg-section {
        background-attachment: scroll;
    }
}

.section-padding {
    padding: 5rem 0;
}

.card {
    background: var(--efr-card);
    border: 0;
    box-shadow: 0 10px 30px rgba(34, 45, 32, .08);
}

.reward-card {
    height: 100%;
    border-top: 5px solid var(--efr-gold);
}

.pill {
    display: inline-block;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: rgba(199, 154, 75, .18);
    color: var(--efr-green-dark);
    font-weight: 700;
    font-size: .9rem;
}

.pill-light {
    display: inline-block;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: rgba(244, 237, 220, .16);
    color: var(--efr-cream);
    font-weight: 700;
    font-size: .9rem;
}

.stat-box {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 1rem;
    padding: 1.25rem;
    backdrop-filter: blur(2px);
}

.site-map-img {
    border-radius: 1rem;
    box-shadow: 0 18px 45px rgba(31, 38, 31, .22);
    background: #000;
}

.logo-mark {
    max-width: 180px;
    height: auto;
}

.footer-link {
    color: var(--efr-cream);
    text-decoration: none;
}

.footer-link:hover {
    color: var(--efr-gold);
}