/* ================================================================
   HOME PAGE
   ================================================================ */

.home-page {
    margin: 0;
    min-height: 100vh;
    color: var(--white);
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(242, 241, 206, 0.22) 0%,
            rgba(242, 241, 206, 0.08) 20%,
            transparent 48%
        ),
        var(--page-teal);

    line-height: 1.6;
}


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

.home-hero {
    position: relative;
    min-height: 620px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    text-align: center;

    background-image:
        url("../images/church.jpg");

    background-size: cover;
    background-position: center;
}


.home-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(20, 45, 44, 0.35),
            rgba(20, 45, 44, 0.78)
        );
}


.home-hero::after {
    content: "";

    position: absolute;

    top: -220px;
    left: 50%;

    transform: translateX(-50%);

    width: 900px;
    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(242, 241, 206, 0.22) 0%,
            rgba(242, 241, 206, 0.08) 35%,
            transparent 70%
        );

    pointer-events: none;
}


.home-hero-content {
    position: relative;
    z-index: 2;

    width: min(
        950px,
        calc(100% - 40px)
    );

    padding: 80px 20px;
}


.home-eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    padding: 9px 20px;

    border:
        1px solid
        rgba(22, 140, 146, 0.8);

    border-radius: 30px;

    background:
        rgba(39, 80, 79, 0.72);

    color:
        #64cece;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.22em;
}


.home-hero h1 {
    margin: 0 auto;

    max-width: 900px;

    color: var(--white);

    font-size:
        clamp(2.7rem, 7vw, 5.5rem);

    line-height: 1.05;

    text-shadow:
        0 5px 25px
        rgba(0, 0, 0, 0.45);
}


.home-hero-subtitle {
    max-width: 700px;

    margin:
        25px auto 35px;

    color:
        var(--soft-white);

    font-size:
        clamp(1rem, 2vw, 1.2rem);
}


/* ================================================================
   BUTTONS
   ================================================================ */

.home-hero-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}


.home-button {
    display: inline-block;

    padding:
        13px 27px;

    border-radius: 4px;

    text-decoration: none;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}


.home-button:hover {
    transform: translateY(-2px);
}


.home-button-primary {
    background:
        var(--gold);

    color:
        #203c3b;

    border:
        1px solid
        var(--gold);
}


.home-button-primary:hover {
    background:
        var(--gold-light);

    color:
        #203c3b;
}


.home-button-secondary {
    background:
        rgba(45, 86, 85, 0.7);

    color:
        var(--white);

    border:
        1px solid
        rgba(232, 210, 122, 0.8);
}


.home-button-secondary:hover {
    background:
        rgba(70, 110, 108, 0.9);
}


/* ================================================================
   SECTION HEADINGS
   ================================================================ */

.home-section-heading {
    text-align: center;

    max-width: 750px;

    margin:
        0 auto 50px;
}


.home-small-title {
    display: block;

    margin-bottom: 10px;

    color:
        #63caca;

    font-size:
        0.72rem;

    font-weight: 700;

    letter-spacing:
        0.22em;
}


.home-section-heading h2 {
    margin: 0;

    color:
        var(--white);

    font-size:
        clamp(2rem, 4vw, 3rem);
}


.home-heading-line {
    width: 55px;
    height: 2px;

    margin:
        15px auto;

    background:
        var(--gold);
}


.home-section-heading p {
    margin-top: 15px;

    color:
        var(--soft-white);
}


/* ================================================================
   WELCOME
   ================================================================ */

.home-welcome {
    width: min(
        1100px,
        calc(100% - 40px)
    );

    margin:
        0 auto;

    padding:
        100px 0;
}


.home-welcome-content {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 60px;

    align-items: center;
}


.home-welcome-image {
    overflow: hidden;

    border:
        1px solid
        var(--border-teal);

    border-radius: 18px;

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.22);
}


.home-welcome-image img {
    display: block;

    width: 100%;

    height: 420px;

    object-fit: cover;
}


.home-welcome-text {
    padding: 10px;
}


.home-welcome-text h3 {
    margin:
        8px 0 18px;

    color:
        var(--white);

    font-size:
        clamp(1.8rem, 4vw, 2.7rem);
}


.home-welcome-text p {
    margin:
        0 0 17px;

    color:
        var(--soft-white);
}


.home-text-link {
    display: inline-block;

    margin-top: 10px;

    color:
        var(--gold-light);

    font-weight: 700;

    text-decoration: none;
}


.home-text-link span {
    margin-left: 8px;
}


/* ================================================================
   SERVICES
   ================================================================ */

.home-services {
    padding:
        100px 30px;

    background:
        rgba(25, 70, 69, 0.28);

    border-top:
        1px solid
        rgba(73, 178, 180, 0.18);

    border-bottom:
        1px solid
        rgba(73, 178, 180, 0.18);
}


.home-service-grid {
    width: min(
        1200px,
        100%
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
}


.home-service-card {
    position: relative;

    padding:
        35px 25px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            var(--card-teal),
            var(--card-teal-dark)
        );

    border:
        1px solid
        var(--border-teal);

    border-radius:
        16px;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.15);
}


.home-service-icon {
    width: 42px;
    height: 42px;

    margin:
        0 auto 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(212, 175, 55, 0.7);

    border-radius: 50%;

    color:
        var(--gold-light);

    background:
        rgba(212, 175, 55, 0.08);
}


.home-service-card h3 {
    margin:
        0 0 10px;

    color:
        var(--white);

    font-size:
        1.25rem;
}


.home-service-time {
    color:
        #60cccc;

    font-weight: 700;

    margin-bottom: 15px;
}


.home-service-card p {
    margin: 0;

    color:
        var(--muted);

    font-size:
        0.92rem;
}


/* ================================================================
   LIVE STREAM
   ================================================================ */

.home-live {
    width: min(
        1100px,
        calc(100% - 40px)
    );

    margin:
        0 auto;

    padding:
        110px 0;

    text-align: center;
}


.home-live-content {
    padding:
        70px 30px;

    border:
        1px solid
        var(--border-teal);

    border-radius:
        22px;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(242, 241, 206, 0.13),
            transparent 45%
        ),
        rgba(35, 81, 80, 0.65);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.18);
}


.home-live h2 {
    margin:
        5px auto 15px;

    max-width: 750px;

    color:
        var(--white);

    font-size:
        clamp(2rem, 4vw, 3rem);
}


.home-live p {
    max-width: 650px;

    margin:
        0 auto 30px;

    color:
        var(--soft-white);
}


/* ================================================================
   SPECIAL MEETINGS
   ================================================================ */

.home-special {
    position: relative;

    padding:
        110px 30px;

    text-align: center;

    background:
        linear-gradient(
            rgba(28, 61, 60, 0.86),
            rgba(28, 61, 60, 0.94)
        ),
        url("../images/church.jpg");

    background-size: cover;

    background-position: center;
}


.home-special-content {
    width: min(
        750px,
        100%
    );

    margin: 0 auto;
}


.home-special h2 {
    margin:
        5px 0;

    color:
        var(--white);

    font-size:
        clamp(2rem, 4vw, 3rem);
}


.home-special p {
    margin:
        20px auto 30px;

    color:
        var(--soft-white);
}


/* ================================================================
   CONTACT
   ================================================================ */

.home-contact {
    padding: 100px 30px;

    text-align: center;

    background:
        linear-gradient(
            rgba(45, 86, 85, 0.35),
            rgba(45, 86, 85, 0.35)
        ),
        url("../media/background.png");

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


.home-contact-content {
    width: min(
        700px,
        100%
    );

    margin: 0 auto;
}


.home-contact h2 {
    margin:
        5px 0 15px;

    color:
        var(--white);

    font-size:
        clamp(2rem, 4vw, 3rem);
}


.home-contact p {
    margin:
        0 auto 30px;

    color:
        var(--soft-white);
}


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

.home-footer {
    padding:
        30px 20px;

    text-align: center;

    background:
        var(--dark-footer);

    border-top:
        1px solid
        rgba(73, 178, 180, 0.35);
}


.home-footer p {
    margin: 0;

    color:
        var(--muted);

    font-size:
        0.85rem;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 900px) {

    .home-welcome-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .home-welcome-image img {
        height: 350px;
    }


    .home-service-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    .home-hero {
        min-height: 540px;
    }


    .home-hero-content {
        padding:
            60px 10px;
    }


    .home-welcome,
    .home-live {
        width:
            calc(100% - 30px);
    }


    .home-services,
    .home-special,
    .home-contact {
        padding-left: 15px;
        padding-right: 15px;
    }


    .home-service-grid {
        grid-template-columns: 1fr;
    }


    .home-welcome-image img {
        height: 280px;
    }


    .home-button {
        width: 100%;
        max-width: 280px;
        box-sizing: border-box;
    }

}