/* ============================================================
   ABOUT PAGE
============================================================ */

.about-page {
    display: flex;
    flex-direction: column;

    min-height: 100vh;

    background:
        linear-gradient(
            to bottom,
            rgba(245, 235, 215, 0.58),
            rgba(230, 210, 185, 0.45)
        ),
        url('../img/heaven-clouds.webp');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #3e3126;
}


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

.about-hero {
    position: relative;

    flex: 1;

    min-height: 100vh;

    padding-top: 120px;
    padding-right: 24px;
    padding-bottom: 120px;
    padding-left: 24px;

    text-align: center;
}


/* ============================================================
   CONTENT
============================================================ */

.about-content {
    position: relative;
    z-index: 2;

    max-width: 760px;
    margin: 0 auto;

    padding: 42px 48px;

    background: rgba(255, 248, 235, 0.24);

    border: 1px solid rgba(255,255,255,0.22);

    backdrop-filter: blur(4px);

    border-radius: 24px;
}


/* ============================================================
   HEADING
============================================================ */

.about-content h1 {
    font-size: clamp(2rem, 3vw, 3.2rem);

    margin-bottom: 20px;

    font-weight: 600;
    letter-spacing: 0.5px;

    color: #3d2d20;

    text-shadow:
        0 2px 10px rgba(255,255,255,0.35),
        0 2px 8px rgba(0,0,0,0.10);
}

/* ============================================================
   PARAGRAPH
============================================================ */

.about-content p {
    font-size: 1.15rem;
    line-height: 1.9;

    color: #3a2a1d;

    text-shadow:
        0 2px 10px rgba(255,255,255,0.20);
}

/* ============================================================
   STORY CONTENT
============================================================ */

.about-story {
    text-align: left;
}


.about-story p {
    margin-bottom: 26px;
}


.about-blessing {
    text-align: center;

    font-size: 1.3rem;
    font-weight: 600;

    margin-top: 50px;
}

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

footer {
    margin-top: auto;
}