/* Typography */
.cormorant-bold {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.cormorant-regular {
    font-family: "Cormorant", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.font-size-20 {
    font-size: 20px;
}

.title-font {
    font-size: 74px;
    text-transform: capitalize;
}

/* Logo styling */
#gf-logo {
    width: 300px;
    position: absolute;
    top: 86px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* Remove default margin/padding */
html, body {
    margin: 0;
    padding: 0;
    background-color: #E3DCC1 !important;
}

/* ABOVE THE FOLD: Map Background Section */
/* Fixed height so that only the above‑fold area is used */
.gf-page-container {
    position: relative;
    width: 100%;
    height: 116vh; /* Fixed height, adjust as needed */
    overflow: hidden;
}

.gf-page-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../1927-ms-flood-small_justriver.png') no-repeat center top;
    background-size: cover;
    z-index: 1;
    opacity: 0.42;
}

.gf-page-container-4{
    position: relative;
    width: 100%;
    height: 80vh; /* Fixed height, adjust as needed */
    overflow: hidden;
}

.gf-page-container-4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../fisk01.jpg') no-repeat center top;
    background-size: cover;
    z-index: 1;
    opacity: 0.22;
}

#river-picture{
    width: 68%;
}

.below-fold-secondary-header{
    font-size: 34px;
}

/* Content inside the map container */
/*.gf-page-container .content {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    z-index: 2;*/
/*}*/

.gf-page-container .content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px; /* Adjust this value for how much of an edge you want blurred */
    background: linear-gradient(to bottom, transparent, #E3DCC1); /* Use your page background color */
    filter: blur(20px); /* Adjust the blur radius as desired */
    pointer-events: none;
    z-index: 3;
}


.overlay-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    top: 28%;  /* Keeps the section below the logo */
    left: 5%;
    z-index: 2;
    color: #000;
    padding: 1em 1.5em;
    border-radius: 5px;
}

/* Each direct child div takes up 50% of the width and wraps when needed */
.overlay-content > div {
    flex: 1 1 50%;
    box-sizing: border-box;
    padding: 0.5em;
}


/* BELOW THE FOLD SECTION: New content area (not over the map) */
.below-fold-section {
    padding: 2em 5%;
    background-color: #E3DCC1;  /* Or choose another background color */
}

/* Below-fold overlay content behaves like regular content */
.overlay-content-below-fold-1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #000;
    padding: 1em 1.5em;
    border-radius: 5px;
    flex-wrap: wrap;
}

/* Below-fold overlay content behaves like regular content */
.overlay-content-below-fold-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #000;
    padding: 1em 1.5em;
    border-radius: 5px;
    flex-wrap: wrap;
}

.below-fold-title-text{
    font-size: 46px;
}

/* Additional styling */
.main-callout-text {
    width: 48%;
}
.main-callout-text-3{
    width:100%;
    z-index: 3;
}

.artist-call-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    background-color: #FFF6E7;
    padding: 10px;
    border-radius: 14px;
}

.get-involved-block{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
}

.above-fold-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.above-fold-right-2{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 5%
}

.above-fold-right-1{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.cta-button {
    background: #126FA1;
    border: 1px solid #979797;
    border-radius: 8px;
    font-size: 28px;
    color: #FFF6E7;
    letter-spacing: 0;
    margin-top: 20px;
    padding: 10px;
    cursor: pointer;
}

.eligibility-block {
    background: #FFD117;
    border-radius: 8px;
    font-size: 18px;
    color: #000;
    letter-spacing: 0;
    padding: 9px;
}

/* Optional media query for smaller screens */
@media (max-width: 600px) {
    .overlay-content {
        top: 12%;  /* Keeps the section below the logo */
        margin-top:20px;
        left:0%;
    }
    #gf-logo {
        width: 200px;
    }
    .main-callout-text {
        width: 100%;
    }
    .title-font{
        font-size: 43px;
    }
    .gf-page-container{
        height: 190vh;
    }
    #river-picture{
        margin-top: 30px;
        width: 100%;
    }
    .overlay-content-below-fold-1{
        flex-direction: column-reverse;
    }
}


/* Site Footer Styling */
.site-footer {
    background-color: #e3dcc1;
    padding: 2em 5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    border-top: 1px solid #ada992;
    margin-top: 2em;
}

/* Footer Links */
.footer-links {
    flex: 1 1 45%;
    box-sizing: border-box;
    margin-bottom: 1em;
}

.footer-links p {
    margin: 0.5em 0;
}

.footer-links a {
    color: #156e7b;
    text-decoration: none;
}

/* Newsletter Section */
.footer-newsletter {
    flex: 1 1 45%;
    box-sizing: border-box;
    margin-bottom: 1em;
}

.footer-newsletter h2 {
    font-size: 24px;
    margin-bottom: 0.5em;
}

.newsletter-form {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 0.75em;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 0.5em;
}

.newsletter-form .cta-button {
    background: #156e7b;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    color: #FFF6E7;
    padding: 0.75em 1em;
    cursor: pointer;
    margin-top: 0px;
    width: 300px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .site-footer {
        flex-direction: column;
        align-items: center;
    }
    .footer-links,
    .footer-newsletter {
        flex: 1 1 100%;
        text-align: center;
    }
    .newsletter-form {
        flex-direction: column;
    }
    .newsletter-form input[type="email"] {
        margin: 0 0 1em 0;
    }
    .get-involved-block{
        flex-direction: column;
    }
    .artist-call-block{
        width: 97%;
    }
}
.section {
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 8px;
    color: #000;
    /* width: 20%; */
    margin: 6px;
    /* height: 350px; */
    min-height: 432px;
}

/* Different background colors for each section */
.arts-music {
    background-color: #F2F2F2; /* Light Gray */
}

.archival-exploration {
    background-color: #E8EAF6; /* Light Blue */
}

.educational-programming {
    background-color: #FFF3E0; /* Light Orange */
}

.community-storytelling {
    background-color: #E0F7FA; /* Light Cyan */
}

.memorialization-tourism {
    background-color: #F1F8E9; /* Light Green */
}

.photo-caption{
    font-size: 13px;
    font-style: italic;
}

.bullet-points ul {
    list-style-type: disc;  /* Standard bullet points */
    padding-left: 1.5em;      /* Indent the list */
    margin: 0;
}

.bullet-points li {
    margin-bottom: 0.5em;  /* Spacing between items */
    color: #333;
}

/* Timeline container */
.timeline {
    position: relative;
    padding-left: 40px; /* Space for the marker and line */
    margin: 20px 0;
}

/* Vertical line */
.timeline::before {
    content: "";
    position: absolute;
    left: 20px; /* Centers the line with the markers */
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ccc;
}

/* Timeline item */
.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

/* Timeline marker (circle) */
.timeline-marker {
    position: absolute;
    left: -1px;
    top: -3px;
    width: 18px;
    height: 18px;
    background: #126FA1;
    border: 2px solid #FFF;
    border-radius: 50%;
}

/* Timeline content */
.timeline-content {
    background: #FFF;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.timeline-content h3 {
    margin-top: 0;
    font-size: 20px;
}

.timeline-date {
    display: block;
    font-size: 18px;
    color: #666;
    margin-bottom: 8px;
}

.timeline-content p {
    margin: 0;
    line-height: 1.5;
}

#lthp-logo{
    width: 200px;
}

.font-color-black{
    color:black !important;
}
a {
    color: #156e7b
}

.margin-top-70px{
    margin-top: 70px;
}