* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #17211b;
}


/* HEADER */

header {
    height: 125px;

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

    padding: 0 45px;

    background: white;
}


/* LOGO */

.logo-area img {
    width: 370px;
    max-height: 105px;
    object-fit: contain;
}


/* NAVIGATION */

nav {
    display: flex;
    align-items: center;
    gap: 42px;
}

nav a {
    text-decoration: none;

    color: #111;

    font-size: 15px;

    padding: 18px 5px;

    white-space: nowrap;
}

nav a:hover {
    color: #31583a;
}

nav a.active {
    color: #21482d;
    border-bottom: 2px solid #31583a;
}


/* HERO */

.hero {
    min-height: 500px;

    background-image:
        linear-gradient(
            90deg,
            rgba(24, 27, 20, 0.78) 0%,
            rgba(24, 27, 20, 0.48) 35%,
            rgba(24, 27, 20, 0.05) 70%
        ),
        url("images/heropic.png");

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

    display: flex;
    align-items: center;

    padding: 60px 50px;
}


/* HERO TEXT */

.hero-content {
    width: 610px;
    color: white;
}

.hero-content h1 {
    font-family: Georgia, serif;

    font-size: 66px;
    line-height: 1.05;

    margin-bottom: 20px;

    font-weight: normal;
}

.hero-content p {
    font-size: 22px;
    line-height: 1.45;

    margin-bottom: 30px;
}


/* BUTTON */

.hero-button {
    display: inline-block;

    background: #52764f;

    color: white;

    text-decoration: none;

    padding: 19px 38px;

    border-radius: 6px;

    font-weight: bold;

    letter-spacing: 1px;
}

.hero-button:hover {
    background: #35583a;
}
/* QUICK LINKS */

.quick-links {
    display: flex;
    justify-content: center;

    background: #f7f7f5;

    padding: 30px 40px;
}


/* EACH BOX */

.quick-card {
    width: 20%;

    text-align: center;

    padding: 0 35px;

    border-right: 1px solid #d4d4d4;
}

.quick-card:last-child {
    border-right: none;
}


/* ROUND ICON */

.icon-circle {
    width: 115px;
    height: 115px;

    margin: 0 auto 20px;

    border-radius: 50%;

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

    font-size: 48px;

    color: white;
}

.icon-circle.green {
    background: #31583a;
}

.icon-circle.gold {
    background: #bda072;
}


/* TITLES */

.quick-card h3 {
    font-size: 18px;

    margin-bottom: 10px;

    line-height: 1.25;
}


/* DESCRIPTION */

.quick-card p {
    font-size: 16px;

    line-height: 1.35;

    min-height: 88px;
}


/* LEARN MORE */

.quick-card a {
    color: #254a31;

    text-decoration: none;

    font-weight: bold;

    font-size: 16px;
}

.quick-card a:hover {
    text-decoration: underline;
}
/* IMPACT BANNER */

.impact-banner {
    background: #2f5b3d;
    color: white;

    text-align: center;

    padding: 26px 20px 30px;
}

.impact-banner h2 {
    font-family: Georgia, serif;

    font-size: 36px;
    font-weight: normal;

    margin-bottom: 12px;
}

.impact-banner p {
    font-size: 15px;

    letter-spacing: 4px;
}
/* ==========================================
   ABOUT OUR MISSION PAGE
========================================== */


/* ABOUT HERO */

.about-hero {
    min-height: 330px;

    background-image:
        linear-gradient(
            90deg,
            rgba(20, 28, 24, 0.88) 0%,
            rgba(20, 28, 24, 0.55) 42%,
            rgba(20, 28, 24, 0.08) 72%
        ),
        url("images/abouthero.png");

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

    display: flex;
    align-items: center;

    padding: 55px 65px;
}


.about-hero-content {
    max-width: 650px;
    color: white;
}


.about-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 62px;
    line-height: 1;

    margin-bottom: 20px;
}


.about-hero-content h2 {
    font-family: Georgia, serif;

    font-size: 27px;
    font-weight: normal;
    font-style: italic;

    margin-bottom: 30px;
}


.about-hero-content p {
    max-width: 570px;

    font-size: 15px;
    font-weight: bold;

    line-height: 1.8;
    letter-spacing: 2.5px;
}



/* WHY WE EXIST */

.why-exist {
    display: flex;
    align-items: center;

    gap: 55px;

    padding: 50px 65px;

    background: white;
}


.why-exist-text {
    width: 50%;
}


.why-exist-text h2 {
    font-family: Georgia, serif;

    color: #31583a;

    font-size: 39px;

    margin-bottom: 22px;
}


.why-exist-text p {
    color: #333;

    font-size: 17px;
    line-height: 1.6;

    margin-bottom: 20px;
}


.why-exist-image {
    width: 50%;
}


.why-exist-image img {
    display: block;

    width: 100%;
    height: 315px;

    object-fit: cover;
}



/* WHO WE WANT TO HELP */

.who-help {
    background: #f7f6f3;

    text-align: center;

    padding: 35px 55px 50px;
}


.who-help > h2 {
    font-family: Georgia, serif;

    color: #31583a;

    font-size: 38px;

    margin-bottom: 35px;
}


.who-help-grid {
    display: grid;

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

    gap: 35px;
}


.who-help-card {
    padding: 10px 20px;
}


.who-help-icon {
    font-size: 57px;

    margin-bottom: 15px;
}


.green-icon {
    color: #52764f;
}


.gold-icon {
    color: #bd8f68;
}


.blue-icon {
    color: #83aeb5;
}


.who-help-card h3 {
    color: #234c35;

    font-size: 18px;
    line-height: 1.3;

    margin-bottom: 13px;
}


.who-help-card p {
    color: #444;

    font-size: 16px;
    line-height: 1.45;
}



/* OUR COMMITMENT */

.our-commitment {
    display: flex;

    background: white;
}


.commitment-photo,
.commitment-copy {
    width: 50%;
}


.commitment-photo img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 350px;

    object-fit: cover;
}


.commitment-copy {
    padding: 48px 65px;
}


.commitment-copy h2 {
    font-family: Georgia, serif;

    color: #31583a;

    font-size: 35px;

    margin-bottom: 20px;
}


.commitment-copy p {
    color: #333;

    font-size: 17px;
    line-height: 1.6;

    margin-bottom: 15px;
}


.about-quote {
    margin-top: 28px;

    padding-top: 22px;

    border-top: 1px solid #cccccc;

    font-family: Georgia, serif;

    font-style: italic;

    font-size: 23px;

    text-align: center;

    color: #31583a;
}



/* TABLET */

@media (max-width: 900px) {

    .why-exist,
    .our-commitment {
        flex-direction: column;
    }


    .why-exist-text,
    .why-exist-image,
    .commitment-photo,
    .commitment-copy {
        width: 100%;
    }


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

}



/* MOBILE */

@media (max-width: 600px) {

    .about-hero {
        padding: 45px 25px;
    }


    .about-hero-content h1 {
        font-size: 44px;
    }


    .why-exist {
        padding: 40px 25px;
    }


    .who-help {
        padding: 35px 25px;
    }


    .who-help-grid {
        grid-template-columns: 1fr;
    }


    .commitment-copy {
        padding: 40px 25px;
    }

}
/* ==========================================
   EVENTS PAGE
========================================== */


/* EVENTS HERO */

.events-hero {
    min-height: 360px;

    background-image:
        linear-gradient(
            90deg,
            rgba(15, 24, 18, 0.78) 0%,
            rgba(15, 24, 18, 0.52) 38%,
            rgba(15, 24, 18, 0.05) 72%
        ),
        url("images/eventshero.png");

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

    display: flex;
    align-items: center;

    padding: 60px 70px;
}


.events-hero-content {
    color: white;
}


.events-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 58px;

    font-weight: normal;
    font-style: italic;

    margin-bottom: 20px;
}


.events-hero-content p {
    font-family: Georgia, serif;

    font-size: 29px;

    line-height: 1.2;
}



/* UPCOMING EVENTS */

.upcoming-events {
    background: #ffffff;

    padding: 30px 25px 45px;
}


.events-heading {
    text-align: center;

    margin-bottom: 25px;
}


.events-heading h2 {
    font-family: Georgia, serif;

    color: #173d25;

    font-size: 38px;

    margin-bottom: 7px;
}


.heading-line {
    width: 80px;
    height: 2px;

    background: #a56c45;

    margin: 0 auto 12px;
}


.events-heading p {
    font-family: Georgia, serif;

    color: #444;

    font-size: 17px;
}



/* EVENT CARDS */

.events-grid {
    display: grid;

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

    gap: 18px;

    max-width: 1500px;

    margin: 0 auto;
}


.event-card {
    background: white;

    border: 1px solid #ddd;

    border-radius: 3px;

    overflow: hidden;
}


.event-card > img {
    width: 100%;
    height: 220px;

    object-fit: cover;

    display: block;
}


.event-info {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 13px 14px 16px;
}



/* DATE BOX */

.event-date {
    min-width: 62px;

    background: #555b3c;

    color: white;

    text-align: center;

    padding: 8px 5px;

    border-radius: 4px;
}


.event-date span {
    display: block;

    font-family: Georgia, serif;

    font-size: 15px;

    letter-spacing: 1px;
}


.event-date strong {
    display: block;

    font-family: Georgia, serif;

    font-size: 28px;

    font-weight: normal;
}



/* EVENT TEXT */

.event-details {
    flex: 1;
}


.event-details h3 {
    font-family: Georgia, serif;

    font-size: 18px;

    color: #111;

    margin-bottom: 7px;

    line-height: 1.15;
}


.event-details p {
    font-family: Georgia, serif;

    font-size: 14px;

    color: #333;

    line-height: 1.3;

    min-height: 75px;
}



/* EVENT BUTTON */

.event-button {
    display: block;

    background: #82491f;

    color: white;

    text-decoration: none;

    text-align: center;

    font-size: 12px;

    letter-spacing: 1.5px;

    padding: 10px 12px;

    margin-top: 10px;

    border-radius: 4px;
}


.event-button:hover {
    background: #613516;
}



/* FULL CALENDAR */

.calendar-button-area {
    text-align: center;

    margin-top: 18px;
}


.calendar-button {
    display: inline-block;

    background: #284d34;

    color: white;

    text-decoration: none;

    padding: 14px 50px;

    border-radius: 4px;

    font-size: 13px;

    letter-spacing: 2px;
}


.calendar-button:hover {
    background: #173822;
}



/* COMMUNITY MESSAGE */

.events-message {
    max-width: 1500px;

    margin: 0 auto 10px;

    display: grid;

    grid-template-columns: 38% 47% 15%;

    min-height: 220px;

    background: #f4f1e9;

    overflow: hidden;

    border-radius: 4px;
}


.events-message-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.events-message-text {
    padding: 25px 35px;
}


.events-message-text h2 {
    font-family: Georgia, serif;

    color: #254d31;

    font-size: 27px;

    line-height: 1.25;

    margin-bottom: 15px;
}


.events-message-text p {
    font-family: Georgia, serif;

    color: #444;

    font-size: 15px;

    line-height: 1.45;
}


.small-line {
    width: 45px;
    height: 2px;

    background: #a56c45;

    margin-top: 18px;
}



/* SIDE MESSAGE */

.events-message-side {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.leaf-symbol {
    font-size: 46px;

    margin-bottom: 10px;
}


.events-message-side p {
    font-size: 12px;

    letter-spacing: 1px;

    color: #2f4133;
}



/* BOTTOM GREEN BAR */

.events-bottom-banner {
    background: #23492f;

    color: white;

    text-align: center;

    padding: 20px;
}


.events-bottom-banner p {
    font-size: 13px;

    letter-spacing: 4px;
}



/* TABLET */

@media (max-width: 1000px) {

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


    .events-message {
        grid-template-columns: 1fr 1fr;
    }


    .events-message-side {
        display: none;
    }

}



/* MOBILE */

@media (max-width: 650px) {

    .events-hero {
        padding: 45px 25px;

        min-height: 300px;
    }


    .events-hero-content h1 {
        font-size: 42px;
    }


    .events-hero-content p {
        font-size: 22px;
    }


    .events-grid {
        grid-template-columns: 1fr;
    }


    .events-message {
        display: block;

        margin: 0 20px 10px;
    }


    .events-message-image {
        height: 230px;
    }


    .events-message-text {
        padding: 30px 25px;
    }

}
/* ==========================================
   CALENDAR PAGE
========================================== */


/* HERO */

.calendar-hero {
    min-height: 300px;

    background-image:
        linear-gradient(
            90deg,
            rgba(18, 29, 21, 0.85) 0%,
            rgba(18, 29, 21, 0.50) 45%,
            rgba(18, 29, 21, 0.05) 75%
        ),
        url("images/calendarhero.png");

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

    display: flex;
    align-items: center;

    padding: 55px 55px;
}


.calendar-hero-content {
    color: white;
}


.calendar-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 60px;
    font-weight: normal;

    margin-bottom: 15px;
}


.calendar-hero-content p {
    font-family: Georgia, serif;

    font-size: 27px;

    line-height: 1.3;
}



/* MAIN CALENDAR AREA */

.calendar-page {
    display: grid;

    grid-template-columns: 2.2fr 1fr;

    gap: 25px;

    padding: 25px 30px;

    background: #fff;
}



/* MONTH CONTROLS */

.calendar-controls {
    display: flex;

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

    margin-bottom: 15px;
}


.calendar-controls h2 {
    font-family: Georgia, serif;

    color: #183d27;

    font-size: 37px;

    font-weight: normal;
}


.month-button {
    background: #285238;

    color: white;

    border: none;

    border-radius: 4px;

    padding: 12px 25px;

    font-size: 14px;

    cursor: pointer;
}


.month-button:hover {
    background: #183c27;
}


/* MONTH SWITCHING */

.calendar-month-view {
    display: none;
}

.calendar-month-view.active-month {
    display: block;
}


/* CALENDAR GRID */

.month-calendar {
    display: grid;

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

    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
/* CALENDAR GRID */

.month-calendar {
    display: grid;

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

    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}


.calendar-day-name {
    background: #31583a;

    color: white;

    text-align: center;

    padding: 13px 5px;

    font-size: 16px;

    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}


.calendar-date {
    min-height: 125px;

    padding: 10px;

    font-family: Georgia, serif;

    font-size: 17px;

    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    background: white;
}


.calendar-date.faded {
    color: #aaa;

    background: #f7f7f7;
}



/* EVENTS INSIDE CALENDAR */

.calendar-event {
    margin-top: 10px;

    padding: 8px;

    border-radius: 4px;

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.25;
}


.calendar-event strong {
    display: block;

    margin-top: 4px;
}


.calendar-event span {
    display: block;

    margin-top: 3px;
}


.green-event {
    background: #e2ece4;

    color: #263d2b;
}


.gold-event {
    background: #f2e7d5;

    color: #4d3a25;
}



/* SIDEBAR */

.calendar-sidebar {
    background: #f8f6f1;

    padding: 18px;

    border-radius: 4px;
}


.calendar-sidebar > h2 {
    font-family: Georgia, serif;

    color: #234b30;

    font-size: 32px;

    font-weight: normal;
}


.sidebar-line {
    width: 70px;
    height: 2px;

    background: #9b623d;

    margin: 10px 0 10px;
}



/* SIDEBAR EVENT */

.sidebar-event {
    display: grid;

    grid-template-columns: 55px 95px 1fr;

    gap: 10px;

    align-items: start;

    padding: 14px 0;

    border-bottom: 1px solid #ddd;
}


.sidebar-date {
    background: #596044;

    color: white;

    text-align: center;

    padding: 7px 3px;

    border-radius: 3px;
}


.sidebar-date span {
    display: block;

    font-family: Georgia, serif;

    font-size: 13px;
}


.sidebar-date strong {
    display: block;

    font-family: Georgia, serif;

    font-size: 24px;

    font-weight: normal;
}


.gold-date {
    background: #ad8354;
}


.sidebar-event img {
    width: 95px;
    height: 90px;

    object-fit: cover;

    border-radius: 3px;
}


.sidebar-event-info h3 {
    font-family: Georgia, serif;

    font-size: 16px;

    margin-bottom: 5px;
}


.sidebar-event-info p {
    font-family: Georgia, serif;

    font-size: 13px;

    line-height: 1.35;

    color: #444;
}



/* SEE ALL EVENTS */

.see-all-events {
    display: block;

    margin-top: 18px;

    background: #285238;

    color: white;

    text-align: center;

    text-decoration: none;

    padding: 15px;

    border-radius: 4px;

    letter-spacing: 2px;

    font-size: 13px;
}


.see-all-events:hover {
    background: #183c27;
}



/* BOTTOM */

.calendar-bottom {
    background: #2c5437;

    color: white;

    text-align: center;

    padding: 30px 20px;
}


.calendar-bottom h2 {
    font-family: Georgia, serif;

    font-size: 31px;

    font-weight: normal;

    margin-bottom: 13px;
}


.calendar-bottom p {
    font-size: 13px;

    letter-spacing: 4px;
}



/* TABLET */

@media (max-width: 1000px) {

    .calendar-page {
        grid-template-columns: 1fr;
    }


    .calendar-date {
        min-height: 110px;
    }

}



/* MOBILE */

@media (max-width: 700px) {

    .calendar-hero {
        padding: 40px 25px;
    }


    .calendar-hero-content h1 {
        font-size: 42px;
    }


    .calendar-page {
        padding: 20px 10px;
    }


    .calendar-controls h2 {
        font-size: 25px;
    }


    .month-button {
        padding: 10px;
    }


    .month-calendar {
        overflow-x: auto;
    }


    .calendar-day-name {
        font-size: 12px;
    }


    .calendar-date {
        min-height: 90px;

        padding: 5px;

        font-size: 13px;
    }


    .calendar-event {
        padding: 4px;

        font-size: 9px;
    }


    .sidebar-event {
        grid-template-columns: 55px 85px 1fr;
    }


    .sidebar-event img {
        width: 85px;
    }

}
/* ==========================================
   PROGRAMS PAGE
========================================== */


/* PROGRAMS HERO */

.programs-hero {
    min-height: 320px;

    background-image:
        linear-gradient(
            90deg,
            rgba(25, 25, 20, 0.72) 0%,
            rgba(25, 25, 20, 0.40) 45%,
            rgba(25, 25, 20, 0.05) 75%
        ),
        url("images/programs-hero.jpg");

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

    display: flex;
    align-items: center;

    padding: 60px 50px;
}


.programs-hero-content {
    color: white;
}


.programs-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 64px;
    font-weight: normal;

    margin-bottom: 15px;
}


.programs-hero-content p {
    font-size: 21px;

    line-height: 1.35;
}



/* PROGRAMS SECTION */

.programs-section {
    background: #ffffff;

    padding: 25px 35px;
}


.programs-grid {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

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

    gap: 15px;
}



/* PROGRAM CARD */

.program-card {
    position: relative;

    background: #faf9f5;

    text-align: center;

    overflow: hidden;
}


.program-image {
    height: 260px;
}


.program-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}



/* ROUND ICON */

.program-icon {
    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: #52764f;

    color: white;

    border: 3px solid white;

    display: flex;

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

    font-size: 32px;

    margin: -35px auto 10px;

    position: relative;

    z-index: 2;
}



/* PROGRAM TEXT */

.program-content {
    padding: 5px 30px 28px;
}


.program-content h2 {
    font-family: Georgia, serif;

    color: #234c35;

    font-size: 28px;

    line-height: 1.05;

    margin-bottom: 15px;
}


.program-content p {
    font-size: 16px;

    color: #444;

    line-height: 1.5;

    min-height: 100px;
}


.program-link {
    display: inline-block;

    margin-top: 20px;

    color: #1d3828;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1.5px;

    text-decoration: none;
}


.program-link:hover {
    color: #52764f;
}



/* PROGRAM MESSAGE SECTION */

.programs-message {
    background: #f5f1e7;

    display: grid;

    grid-template-columns: 40% 60%;

    align-items: center;

    padding: 35px 70px;

    gap: 45px;
}


.programs-message-left {
    border-right: 1px solid #bdb9ae;

    padding-right: 40px;

    text-align: center;
}


.programs-message-left h2 {
    font-family: Georgia, serif;

    font-size: 34px;

    font-weight: normal;
    font-style: italic;

    color: #173d25;

    line-height: 1.25;
}


.programs-message-right {
    text-align: center;
}


.programs-message-right p {
    max-width: 700px;

    margin: 0 auto 20px;

    font-size: 17px;

    line-height: 1.5;

    color: #333;
}



/* GET INVOLVED BUTTON */

.programs-involved-button {
    display: inline-block;

    background: #214a3d;

    color: white;

    text-decoration: none;

    padding: 14px 55px;

    border-radius: 30px;

    font-size: 13px;

    letter-spacing: 2px;
}


.programs-involved-button:hover {
    background: #16352b;
}



/* BOTTOM BANNER */

.programs-bottom-banner {
    background: #17463e;

    color: white;

    text-align: center;

    padding: 22px;
}


.programs-bottom-banner p {
    font-size: 12px;

    letter-spacing: 5px;
}



/* TABLET */

@media (max-width: 900px) {

    .programs-grid {
        grid-template-columns: 1fr;
    }


    .program-card {
        max-width: 600px;

        margin: 0 auto;
    }


    .programs-message {
        grid-template-columns: 1fr;

        padding: 35px 30px;
    }


    .programs-message-left {
        border-right: none;

        border-bottom: 1px solid #bdb9ae;

        padding-right: 0;

        padding-bottom: 30px;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .programs-hero {
        min-height: 280px;

        padding: 45px 25px;
    }


    .programs-hero-content h1 {
        font-size: 46px;
    }


    .programs-hero-content p {
        font-size: 18px;
    }


    .programs-section {
        padding: 20px;
    }


    .program-image {
        height: 220px;
    }


    .program-content {
        padding: 5px 20px 25px;
    }


    .programs-message-left h2 {
        font-size: 28px;
    }

}
/* BACK TO PROGRAMS BUTTON */

.back-programs-button {
    display: inline-block;

    background: #284d34;
    color: white;

    text-decoration: none;

    padding: 14px 40px;

    border-radius: 4px;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;
}


.back-programs-button:hover {
    background: #173822;
}
/* ==========================================
   FOOD & BASIC NEEDS PAGE
========================================== */


/* FOOD HERO */

.food-hero {
    min-height: 340px;

    background-image:
        linear-gradient(
            90deg,
            rgba(18, 32, 24, 0.80) 0%,
            rgba(18, 32, 24, 0.55) 40%,
            rgba(18, 32, 24, 0.08) 72%
        ),
        url("images/food-hero.jpg");

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

    display: flex;
    align-items: center;

    padding: 55px 50px;
}


.food-hero-content {
    color: white;
}


.food-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 62px;
    font-weight: normal;

    line-height: 1.05;

    margin-bottom: 20px;
}


.food-hero-content p {
    font-family: Georgia, serif;

    font-size: 28px;

    line-height: 1.25;
}



/* OUR COMMITMENT */

.food-commitment {
    display: flex;

    gap: 55px;

    align-items: center;

    padding: 35px 50px;

    background: white;
}


.food-commitment-text {
    width: 45%;
}


.food-commitment-text h2 {
    font-family: Georgia, serif;

    color: #245037;

    font-size: 38px;

    margin-bottom: 10px;
}


.food-heading-line {
    width: 100px;
    height: 3px;

    background: #a56c45;

    margin-bottom: 20px;
}


.food-commitment-text p {
    font-family: Georgia, serif;

    color: #252525;

    font-size: 18px;

    line-height: 1.4;

    margin-bottom: 15px;
}


.food-commitment-image {
    width: 55%;
}


.food-commitment-image img {
    width: 100%;

    height: 330px;

    object-fit: cover;

    display: block;
}



/* FOOD SERVICES */

.food-services {
    display: grid;

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

    background: #faf8f1;

    padding: 20px 40px 30px;
}


.food-service-card {
    text-align: center;

    padding: 0 30px;

    border-right: 1px solid #d8d3c8;
}


.food-service-card:last-child {
    border-right: none;
}


.food-service-icon {
    width: 78px;
    height: 78px;

    border-radius: 50%;

    background: #31583a;

    color: white;

    margin: 0 auto 12px;

    display: flex;

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

    font-size: 34px;
}


.food-service-card h3 {
    font-family: Georgia, serif;

    color: #234c35;

    font-size: 22px;

    margin-bottom: 10px;
}


.food-service-card p {
    font-family: Georgia, serif;

    color: #333;

    font-size: 16px;

    line-height: 1.4;
}



/* FOOD MESSAGE */

.food-message {
    display: grid;

    grid-template-columns: 40% 60%;

    align-items: center;

    background: #1f5a39;

    color: white;

    padding: 35px 70px;
}


.food-message-left {
    padding-right: 45px;

    border-right: 1px solid rgba(255,255,255,0.6);

    text-align: center;
}


.food-message-left h2 {
    font-family: Georgia, serif;

    font-size: 36px;

    font-weight: normal;
    font-style: italic;

    line-height: 1.25;
}


.food-message-right {
    text-align: center;

    padding-left: 45px;
}


.food-message-right p {
    font-family: Georgia, serif;

    max-width: 650px;

    margin: 0 auto 20px;

    font-size: 19px;

    line-height: 1.4;
}



/* BACK TO PROGRAMS BUTTON */

.back-programs-button {
    display: inline-block;

    background: white;

    color: #214637;

    text-decoration: none;

    padding: 14px 38px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;
}


.back-programs-button:hover {
    background: #eeeae0;
}



/* FOOD ACTION BUTTONS */

.food-action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}


/* DONATE */

.food-donate-button {
    display: inline-block;
    background: #a55f2a;
    color: white;
    text-decoration: none;
    padding: 14px 38px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.food-donate-button:hover {
    background: #84491f;
}


/* VOLUNTEER */

.food-volunteer-button {
    display: inline-block;
    background: white;
    color: #214637;
    text-decoration: none;
    padding: 14px 38px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.food-volunteer-button:hover {
    background: #eeeae0;
    color: #214637;
}



/* BOTTOM BANNER */

.food-bottom-banner {
    background: #f6f4ed;

    text-align: center;

    padding: 20px;
}


.food-bottom-banner p {
    color: #244b36;

    font-size: 12px;

    letter-spacing: 4px;
}

.food-bottom-banner p {
    color: #244b36;

    font-size: 12px;

    letter-spacing: 4px;
}



/* TABLET */

@media (max-width: 900px) {

    .food-commitment {
        flex-direction: column;
    }


    .food-commitment-text,
    .food-commitment-image {
        width: 100%;
    }


    .food-services {
        grid-template-columns: repeat(2, 1fr);

        gap: 30px;
    }


    .food-service-card {
        border-right: none;
    }


    .food-message {
        grid-template-columns: 1fr;
    }


    .food-message-left {
        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,0.6);

        padding-right: 0;

        padding-bottom: 30px;
    }


    .food-message-right {
        padding-left: 0;

        padding-top: 30px;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .food-hero {
        min-height: 290px;

        padding: 45px 25px;
    }


    .food-hero-content h1 {
        font-size: 45px;
    }


    .food-hero-content p {
        font-size: 22px;
    }


    .food-commitment {
        padding: 35px 25px;
    }


    .food-services {
        grid-template-columns: 1fr;

        padding: 30px 25px;
    }


    .food-service-card {
        padding: 20px 0;
    }


    .food-message {
        padding: 35px 25px;
    }


    .food-message-left h2 {
        font-size: 30px;
    }

}
/* ==========================================
   COMMUNITY EMPOWERMENT PAGE
========================================== */


/* COMMUNITY HERO */

.community-hero {
    min-height: 340px;

    background-image:
        linear-gradient(
            90deg,
            rgba(17, 30, 23, 0.82) 0%,
            rgba(17, 30, 23, 0.54) 40%,
            rgba(17, 30, 23, 0.08) 72%
        ),
        url("images/community-hero.jpg");

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

    display: flex;
    align-items: center;

    padding: 55px 65px;
}


.community-hero-content {
    color: white;
}


.community-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 62px;
    font-weight: normal;

    line-height: 1;

    margin-bottom: 20px;
}


.community-hero-content p {
    font-family: Georgia, serif;

    font-size: 27px;

    line-height: 1.25;
}



/* INTRO SECTION */

.community-intro {
    display: flex;

    align-items: center;

    gap: 55px;

    padding: 35px 65px;

    background: white;
}


.community-intro-text {
    width: 45%;
}


.community-intro-text h2 {
    font-family: Georgia, serif;

    color: #173d2a;

    font-size: 36px;

    line-height: 1.15;

    margin-bottom: 15px;
}


.community-heading-line {
    width: 80px;
    height: 3px;

    background: #aa6c3c;

    margin-bottom: 20px;
}


.community-intro-text p {
    font-family: Georgia, serif;

    color: #333;

    font-size: 18px;

    line-height: 1.45;

    margin-bottom: 14px;
}


.community-intro-image {
    width: 55%;
}


.community-intro-image img {
    width: 100%;

    height: 300px;

    object-fit: cover;

    display: block;
}



/* WHAT WE DO */

.community-services {
    background: #faf8f2;

    text-align: center;

    padding: 25px 45px 35px;
}


.community-services > h2 {
    font-family: Georgia, serif;

    color: #173d2a;

    font-size: 36px;

    margin-bottom: 7px;
}


.community-title-line {
    width: 65px;
    height: 2px;

    background: #aa6c3c;

    margin: 0 auto 20px;
}


.community-services-grid {
    display: grid;

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

    max-width: 1300px;

    margin: 0 auto;
}


.community-service-card {
    padding: 0 30px;

    border-right: 1px solid #d4d0c5;
}


.community-service-card:last-child {
    border-right: none;
}


.community-service-icon {
    width: 78px;
    height: 78px;

    margin: 0 auto 15px;

    border-radius: 50%;

    display: flex;

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

    color: white;

    font-size: 34px;
}


.green-community-icon {
    background: #3f6f3b;
}


.gold-community-icon {
    background: #bc8548;
}


.community-service-card h3 {
    font-family: Georgia, serif;

    color: #234c35;

    font-size: 21px;

    margin-bottom: 12px;
}


.community-service-card p {
    color: #333;

    font-size: 16px;

    line-height: 1.45;
}



/* MESSAGE SECTION */

.community-message {
    background: #17503d;
    color: white;
    text-align: center;
    padding: 30px 25px 40px;
    height: auto;
    overflow: visible;
}

.community-message h2 {
    font-family: Georgia, serif;
    font-size: 30px;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 12px;
}

.community-message-line {
    width: 65px;
    height: 2px;
    background: #c48b52;
    margin: 0 auto 20px;
}


/* COMMUNITY ACTION BUTTONS */

.community-action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.community-action-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 13px 38px;
    border-radius: 28px;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
    line-height: 1;
}


/* BACK TO PROGRAMS */

.community-back-button {
    background: #8b4e22;
}

.community-back-button:hover {
    background: #6e3b19;
}


/* DONATE */

.community-donate-button {
    background: #a55f2a;
}

.community-donate-button:hover {
    background: #84491f;
}


/* VOLUNTEER */

.community-volunteer-button {
    background: #31583a;
}

.community-volunteer-button:hover {
    background: #21402a;
}


/* BOTTOM BANNER */
.community-bottom-banner {
    ...
}

.community-bottom-banner p {
    font-size: 12px;

    letter-spacing: 4px;
}


.community-bottom-message {
    text-align: right;
}



/* TABLET */

@media (max-width: 900px) {

    .community-intro {
        flex-direction: column;
    }


    .community-intro-text,
    .community-intro-image {
        width: 100%;
    }


    .community-services-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px;
    }


    .community-service-card {
        border-right: none;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .community-hero {
        min-height: 290px;

        padding: 45px 25px;
    }


    .community-hero-content h1 {
        font-size: 44px;
    }


    .community-hero-content p {
        font-size: 21px;
    }


    .community-intro {
        padding: 35px 25px;
    }


    .community-intro-text h2 {
        font-size: 31px;
    }


    .community-services {
        padding: 30px 25px;
    }


    .community-services-grid {
        grid-template-columns: 1fr;
    }


    .community-service-card {
        padding: 20px 0;
    }


    .community-bottom-banner {
        flex-direction: column;

        padding: 25px;

        text-align: center;
    }


    .community-bottom-message {
        text-align: center;
    }

}
/* ==========================================
   SUPPORT SERVICES PAGE
========================================== */


/* SUPPORT HERO */

.support-hero {
    min-height: 320px;

    background-image:
        linear-gradient(
            90deg,
            rgba(19, 55, 40, 0.92) 0%,
            rgba(19, 55, 40, 0.68) 42%,
            rgba(19, 55, 40, 0.08) 74%
        ),
        url("images/support-hero.jpg");

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

    display: flex;
    align-items: center;

    padding: 50px 55px;
}


.support-hero-content {
    color: white;
}


.support-small-title {
    font-size: 16px;

    letter-spacing: 2px;

    margin-bottom: 20px;
}


.support-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 62px;

    font-weight: normal;

    margin-bottom: 15px;
}


.support-subtitle {
    font-family: Georgia, serif;

    font-size: 25px;
}



/* HOW WE HELP */

.support-help {
    display: grid;

    grid-template-columns: 43% 57%;

    gap: 35px;

    padding: 35px 55px;

    background: white;
}


.support-help-text h2,
.support-includes h2,
.support-commitment-text h2 {
    font-family: Georgia, serif;

    color: #185038;

    font-size: 36px;

    margin-bottom: 10px;
}


.support-line {
    width: 65px;
    height: 2px;

    background: #31583a;

    margin-bottom: 20px;
}


.support-help-text p {
    font-family: Georgia, serif;

    color: #333;

    font-size: 18px;

    line-height: 1.45;

    margin-bottom: 18px;
}



/* ==========================================
   SUPPORT - OUR SUPPORT INCLUDES
   MATCH COMMUNITY "WHAT WE DO" STYLE
========================================== */

.support-includes {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}


/* HEADING */

.support-includes h2 {
    font-family: Georgia, serif;
    font-size: 36px;
    color: #214b36;
    margin: 0 0 15px;
}


/* LINE UNDER HEADING */

.support-includes h2::after {
    content: "";
    display: block;
    width: 65px;
    height: 3px;
    background: #a77b42;
    margin: 15px auto 35px;
}


/* FOUR ITEMS ACROSS */

.support-includes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 100%;
}


/* INDIVIDUAL ITEM */

.support-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 25px 20px;
}


/* ICON */

.support-item-icon {
    margin: 0 auto 18px;
}


/* TEXT */

.support-item-text {
    text-align: center;
}

.support-item-text h3 {
    margin: 0 0 10px;
}

.support-item-text p {
    margin: 0 auto;
    line-height: 1.6;
}


/* TABLET */

@media (max-width: 900px) {

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

}


/* MOBILE */

@media (max-width: 600px) {

    .support-includes-grid {
        grid-template-columns: 1fr;
    }

}

.support-item-icon {
    width: 68px;
    height: 68px;

    min-width: 68px;

    border-radius: 50%;

    display: flex;

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

    color: white;

    font-size: 30px;
}


.green-support-icon {
    background: #31583a;
}


.gold-support-icon {
    background: #c18b4d;
}


.support-item-text h3 {
    font-family: Georgia, serif;

    color: #22533b;

    font-size: 20px;

    line-height: 1.1;

    margin-bottom: 5px;
}


.support-item-text p {
    font-family: Georgia, serif;

    color: #333;

    font-size: 15px;

    line-height: 1.35;
}



/* COMMITMENT */

.support-commitment {
    display: grid;

    grid-template-columns: 50% 50%;

    background: white;
}


.support-commitment-image img {
    width: 100%;
    height: 100%;

    min-height: 330px;

    object-fit: cover;

    display: block;
}


.support-commitment-text {
    padding: 35px 45px;
}


.support-commitment-text p {
    font-family: Georgia, serif;

    color: #333;

    font-size: 17px;

    line-height: 1.45;

    margin-bottom: 12px;
}


.support-quote {
    margin-top: 20px;

    padding-top: 18px;

    border-top: 1px solid #bdbdbd;

    text-align: center;

    font-family: Georgia, serif;

    font-style: italic;

    color: #22533b;

    font-size: 24px;

    line-height: 1.35;
}



/* BACK TO PROGRAMS */

.support-back-section {
    display: grid;

    grid-template-columns: 40% 60%;

    align-items: center;

    background: #eef4eb;

    padding: 25px 60px;
}


.support-back-left {
    border-right: 1px solid #879b8d;

    text-align: center;

    padding-right: 30px;
}


.support-back-left h2 {
    font-family: Georgia, serif;

    font-style: italic;

    font-weight: normal;

    font-size: 32px;

    color: #214c36;

    line-height: 1.2;
}


.support-back-right {
    text-align: center;
    padding-left: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.support-back-right p {
    width: 100%;
    text-align: center;

    font-family: Georgia, serif;
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
}

.program-action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.support-back-button {
    display: inline-block;

    background: #14533f;

    color: white;

    text-decoration: none;

    padding: 14px 45px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;
}


.support-back-button:hover {
    background: #0f3d2e;
}



/* BOTTOM BANNER */

.support-bottom-banner {
    background: #14533f;

    color: white;

    text-align: center;

    padding: 20px;
}


.support-bottom-banner p {
    font-size: 12px;

    letter-spacing: 4px;
}



/* TABLET */

@media (max-width: 900px) {

    .support-help {
        grid-template-columns: 1fr;
    }


    .support-commitment {
        grid-template-columns: 1fr;
    }


    .support-back-section {
        grid-template-columns: 1fr;
    }


    .support-back-left {
        border-right: none;

        border-bottom: 1px solid #879b8d;

        padding-right: 0;

        padding-bottom: 25px;
    }


    .support-back-right {
        padding-left: 0;

        padding-top: 25px;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .support-hero {
        min-height: 280px;

        padding: 40px 25px;
    }


    .support-hero-content h1 {
        font-size: 44px;
    }


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


    .support-help {
        padding: 30px 25px;
    }


    .support-includes-grid {
        grid-template-columns: 1fr;
    }


    .support-commitment-text {
        padding: 30px 25px;
    }


    .support-back-section {
        padding: 30px 25px;
    }

}
/* ==========================================
   GET INVOLVED PAGE
========================================== */


/* HERO */

/* ==========================================
   GET INVOLVED PAGE
========================================== */


/* ONE LARGE BACKGROUND FOR HERO + CARDS */

.involved-background-section {
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.78) 30%,
            rgba(255,255,255,0.10) 68%
        ),
        url("images/involved-hero.jpg");

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

    padding-bottom: 45px;
}


/* HERO */

.involved-hero {
    min-height: 450px;

    display: flex;
    align-items: center;

    padding: 55px 40px 100px;

    background: transparent;
}


.involved-hero-content {
    max-width: 580px;

    color: #12342d;
}


.involved-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 78px;
    line-height: 0.95;

    margin-bottom: 10px;
}


.involved-hero-content h2 {
    font-family: Georgia, serif;

    font-size: 38px;

    margin-bottom: 20px;
}


.involved-hero-content p {
    font-size: 20px;
    line-height: 1.5;

    color: #333;

    max-width: 550px;
}


/* OPTIONS SECTION */

.involved-options {
    background: transparent;

    padding: 0 35px 25px;

    margin-top: -90px;
}


/* FOUR CARDS IN ONE ROW */

.involved-grid {
    display: grid;

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

    gap: 18px;

    max-width: 1250px;

    margin: 0 auto;
}


/* CARD */

.involved-card {
    background: #fffdf8;

    text-align: center;

    padding: 18px 20px 20px;

    border-radius: 10px;

    min-height: 340px;

    display: flex;

    flex-direction: column;

    align-items: center;
}


.involved-icon {
    width: 90px;
    height: 90px;

    border-radius: 50%;

    display: flex;

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

    color: white;

    font-size: 40px;

    margin-bottom: 12px;
}


.green-involved {
    background: #4f683b;
}


.blue-involved {
    background: #2e6b9b;
}


.brown-involved {
    background: #79461f;
}


.gold-involved {
    background: #c89412;
}


.involved-card h2 {
    font-family: Georgia, serif;

    font-size: 26px;

    color: #111;

    margin-bottom: 12px;
}


.involved-card p {
    font-size: 16px;

    line-height: 1.45;

    color: #333;

    min-height: 105px;
}


/* BUTTONS */

.involved-button {
    display: block;

    width: 100%;

    margin-top: auto;

    padding: 13px 12px;

    color: white;

    text-decoration: none;

    border-radius: 5px;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1.5px;
}


.green-button {
    background: #2e633d;
}


.blue-button {
    background: #236a9d;
}


.brown-button {
    background: #77431f;
}


.gold-button {
    background: #c39208;
}


.involved-button:hover {
    opacity: 0.88;
}


/* BOTTOM MESSAGE */

.involved-message {
    display: grid;

    grid-template-columns: 50% 50%;

    align-items: center;

    background: #164b3c;

    color: white;

    padding: 35px 70px;
}


.involved-message-left {
    text-align: center;
}


.involved-message-left h2 {
    font-family: Georgia, serif;

    font-size: 34px;

    font-style: italic;

    font-weight: normal;
}


.involved-message-right {
    padding-left: 40px;
}


.involved-message-right p {
    font-size: 17px;

    line-height: 1.5;
}


/* TABLET */

@media (max-width: 1050px) {

    .involved-grid {
        grid-template-columns: repeat(2, 1fr);

        margin-top: 20px;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .involved-hero {
        min-height: 390px;

        padding: 40px 25px;
    }


    .involved-hero-content h1 {
        font-size: 52px;
    }


    .involved-hero-content h2 {
        font-size: 29px;
    }


    .involved-hero-content p {
        font-size: 17px;
    }


    .involved-grid {
        grid-template-columns: 1fr;
    }


    .involved-message {
        grid-template-columns: 1fr;

        padding: 30px 25px;

        gap: 20px;
    }


    .involved-message-right {
        padding-left: 0;

        text-align: center;
    }

}


/* ==========================================
   SPONSORS & PARTNERS
========================================== */

.partners-logo-grid {
    max-width: 1200px;
    margin: 0 auto 40px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* PARTNER PHOTO BOX */

.partners-logo-grid .partner-logo-card {
    width: 100%;
    height: 180px;

    border: 1px solid #e0ddd4;
    border-radius: 8px;

    overflow: hidden;

    padding: 0 !important;
    margin: 0;

    background: white;
}


/* FORCE PARTNER IMAGE TO FILL ENTIRE BOX */

.partners-logo-grid .partner-logo-card img {
    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* PARTNER CTA */

.partner-callout {
    max-width: 1050px;

    margin: 0 auto;

    background: #eef3ea;

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

    gap: 35px;

    padding: 30px 40px;

    border-radius: 10px;
}


.partner-callout-text {
    max-width: 680px;
}


.partner-callout-text h2 {
    font-family: Georgia, serif;

    color: #214a36;

    font-size: 30px;

    margin-bottom: 8px;
}


.partner-callout-text p {
    color: #333;

    font-size: 16px;

    line-height: 1.5;
}


.partner-contact-button {
    display: inline-block;

    background: #285d3e;

    color: white;

    text-decoration: none;

    padding: 15px 32px;

    border-radius: 5px;

    white-space: nowrap;

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
}


.partner-contact-button:hover {
    background: #1c452d;
}


/* PARTNERS TABLET */

@media (max-width: 900px) {

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

    .partner-callout {
        flex-direction: column;
        text-align: center;
    }

}


/* PARTNERS MOBILE */

@media (max-width: 600px) {

    .partners-section {
        padding: 40px 25px;
    }

    .partners-logo-grid {
        grid-template-columns: 1fr;
    }

    .partner-contact-button {
        width: 100%;
        text-align: center;
    }

}


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


/* CONTACT HERO */

.contact-hero {
    min-height: 290px;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 0%,
            rgba(255,255,255,0.05) 55%,
            rgba(16,42,30,0.40) 100%
        ),
        url("images/contact-hero.jpg");

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


.contact-hero-overlay {
    min-height: 290px;

    display: flex;

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

    padding: 35px 70px;
}


.contact-hero-text {
    color: white;

    text-align: center;

    max-width: 450px;
}


.contact-hero-text h2 {
    font-family: Georgia, serif;

    font-size: 38px;

    font-weight: normal;
    font-style: italic;

    line-height: 1.15;

    margin-bottom: 25px;
}


.contact-hero-text p {
    font-size: 14px;

    letter-spacing: 3px;
}



/* MAIN CONTACT AREA */

.contact-section {
    display: grid;

    grid-template-columns: 65% 35%;

    gap: 65px;

    max-width: 1350px;

    margin: 0 auto;

    padding: 25px 50px 45px;

    background: white;
}



/* LEFT SIDE */

.contact-small-title {
    color: #28533e;

    font-size: 15px;

    letter-spacing: 6px;

    margin-bottom: 5px;
}


.contact-left h1 {
    font-family: Georgia, serif;

    color: #12352b;

    font-size: 58px;

    margin-bottom: 5px;
}


.contact-intro {
    color: #333;

    font-size: 17px;

    line-height: 1.45;

    margin-bottom: 25px;

    max-width: 850px;
}



/* FORM */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.contact-name-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;

    border: 1px solid #bbb;

    border-radius: 4px;

    background: white;

    padding: 13px 14px;

    font-family: Arial, sans-serif;

    font-size: 15px;

    color: #333;
}


.contact-form input,
.contact-form select {
    height: 46px;
}


.contact-form textarea {
    min-height: 110px;

    resize: vertical;
}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid #52764f;

    border-color: #52764f;
}



/* SEND BUTTON */

.contact-submit {
    width: 210px;

    background: #31583f;

    color: white;

    border: none;

    border-radius: 5px;

    padding: 15px 25px;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;
}


.contact-submit:hover {
    background: #21452f;
}



/* RIGHT SIDE */

.contact-right {
    padding-top: 40px;
}


.contact-info-item {
    display: flex;

    align-items: flex-start;

    gap: 22px;

    margin-bottom: 28px;
}


.contact-info-icon {
    width: 55px;
    height: 55px;

    min-width: 55px;

    border-radius: 50%;

    background: #365943;

    color: white;

    display: flex;

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

    font-size: 24px;
}


.contact-info-item h3 {
    color: #111;

    font-size: 17px;

    margin-bottom: 6px;
}


.contact-info-item p {
    color: #333;

    font-size: 15px;

    line-height: 1.45;
}



/* SOCIAL LINKS */

.contact-socials {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.contact-socials a {
    color: #183e30;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;
}


.contact-socials a:hover {
    text-decoration: underline;
}



/* SIDE MESSAGE */

.contact-side-message {
    border-top: 1px solid #999;

    margin-top: 30px;

    padding-top: 25px;

    text-align: center;
}


.contact-side-message h2 {
    font-family: Georgia, serif;

    font-style: italic;
    font-weight: normal;

    color: #173f31;

    font-size: 27px;

    margin-bottom: 12px;
}


.contact-side-message p {
    color: #284d3d;

    font-size: 11px;

    letter-spacing: 3px;
}



/* TABLET */

@media (max-width: 900px) {

    .contact-section {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .contact-right {
        padding-top: 0;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .contact-hero,
    .contact-hero-overlay {
        min-height: 250px;
    }


    .contact-hero-overlay {
        justify-content: center;

        padding: 30px 25px;
    }


    .contact-hero-text h2 {
        font-size: 31px;
    }


    .contact-section {
        padding: 30px 25px;
    }


    .contact-left h1 {
        font-size: 44px;
    }


    .contact-name-row {
        grid-template-columns: 1fr;
    }


    .contact-submit {
        width: 100%;
    }

}
/* ==========================================
   CALENDAR LAYOUT FIX
========================================== */

.calendar-page {
    display: grid;

    grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);

    gap: 25px;

    align-items: start;

    padding: 25px 30px;
}


.calendar-main {
    min-width: 0;
}


.calendar-sidebar {
    min-width: 0;
}
/* ==========================================
   OCTOBER 4 - FAMILY FAIR MOVIE NIGHT
========================================== */


/* HERO */

.oct4-hero {
    min-height: 340px;

    background-image:
        linear-gradient(
            90deg,
            rgba(15, 30, 22, 0.82) 0%,
            rgba(15, 30, 22, 0.54) 40%,
            rgba(15, 30, 22, 0.08) 72%
        ),
        url("images/oct4-hero.jpg");

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

    display: flex;
    align-items: center;

    padding: 55px 50px;
}


.oct4-hero-content {
    color: white;
}


.oct4-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 64px;
    font-weight: normal;

    line-height: 1;

    margin-bottom: 20px;
}


.oct4-hero-content p {
    font-family: Georgia, serif;

    font-size: 27px;

    line-height: 1.25;
}



/* COMMITMENT */

.oct4-commitment {
    display: flex;

    align-items: center;

    gap: 55px;

    padding: 35px 50px;

    background: white;
}


.oct4-commitment-text {
    width: 45%;
}


.oct4-commitment-text h2 {
    font-family: Georgia, serif;

    color: #225239;

    font-size: 38px;

    margin-bottom: 10px;
}


.oct4-line {
    width: 100px;
    height: 3px;

    background: #a96c3a;

    margin-bottom: 20px;
}


.oct4-commitment-text p {
    font-family: Georgia, serif;

    font-size: 18px;

    color: #333;

    line-height: 1.45;

    margin-bottom: 15px;
}


.oct4-commitment-image {
    width: 55%;
}


.oct4-commitment-image img {
    width: 100%;

    height: 320px;

    object-fit: cover;

    display: block;
}



/* FEATURES */

.oct4-features {
    display: grid;

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

    background: #faf8f1;

    padding: 20px 40px 30px;
}


.oct4-feature {
    text-align: center;

    padding: 0 30px;

    border-right: 1px solid #d8d3c8;
}


.oct4-feature:last-child {
    border-right: none;
}


.oct4-icon {
    width: 78px;
    height: 78px;

    border-radius: 50%;

    background: #31583a;

    color: white;

    margin: 0 auto 12px;

    display: flex;

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

    font-size: 34px;
}


.oct4-feature h3 {
    font-family: Georgia, serif;

    color: #234c35;

    font-size: 22px;

    margin-bottom: 10px;
}


.oct4-feature p {
    font-family: Georgia, serif;

    color: #333;

    font-size: 16px;

    line-height: 1.4;
}



/* MESSAGE */

.oct4-message {
    display: grid;

    grid-template-columns: 40% 60%;

    align-items: center;

    background: #1f5a39;

    color: white;

    padding: 35px 70px;
}


.oct4-message-left {
    padding-right: 45px;

    border-right: 1px solid rgba(255,255,255,0.6);

    text-align: center;
}


.oct4-message-left h2 {
    font-family: Georgia, serif;

    font-size: 36px;

    font-weight: normal;
    font-style: italic;

    line-height: 1.25;
}


.oct4-message-right {
    text-align: center;

    padding-left: 45px;
}


.oct4-message-right p {
    font-family: Georgia, serif;

    max-width: 650px;

    margin: 0 auto 20px;

    font-size: 19px;

    line-height: 1.4;
}



/* BACK TO EVENTS BUTTON */

.oct4-back-button {
    display: inline-block;

    background: white;

    color: #214637;

    text-decoration: none;

    padding: 14px 38px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;
}


.oct4-back-button:hover {
    background: #eeeae0;
}



/* BOTTOM */

.oct4-bottom {
    background: #f6f4ed;

    text-align: center;

    padding: 20px;
}


.oct4-bottom p {
    color: #244b36;

    font-size: 12px;

    letter-spacing: 4px;
}



/* TABLET */

@media (max-width: 900px) {

    .oct4-commitment {
        flex-direction: column;
    }


    .oct4-commitment-text,
    .oct4-commitment-image {
        width: 100%;
    }


    .oct4-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 30px;
    }


    .oct4-feature {
        border-right: none;
    }


    .oct4-message {
        grid-template-columns: 1fr;
    }


    .oct4-message-left {
        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,0.6);

        padding-right: 0;

        padding-bottom: 30px;
    }


    .oct4-message-right {
        padding-left: 0;

        padding-top: 30px;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .oct4-hero {
        min-height: 290px;

        padding: 45px 25px;
    }


    .oct4-hero-content h1 {
        font-size: 45px;
    }


    .oct4-hero-content p {
        font-size: 22px;
    }


    .oct4-commitment {
        padding: 35px 25px;
    }


    .oct4-features {
        grid-template-columns: 1fr;

        padding: 30px 25px;
    }


    .oct4-feature {
        padding: 20px 0;
    }


    .oct4-message {
        padding: 35px 25px;
    }

}
/* ==========================================
   OCTOBER 24 - FALL COMMUNITY CARE DRIVE
========================================== */


/* HERO */

.oct24-hero {
    min-height: 340px;

    background-image:
        linear-gradient(
            90deg,
            rgba(15, 40, 29, 0.88) 0%,
            rgba(15, 40, 29, 0.55) 42%,
            rgba(15, 40, 29, 0.05) 72%
        ),
        url("images/oct24-hero.jpg");

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

    display: flex;
    align-items: center;

    padding: 45px 50px;
}


.oct24-hero-content {
    color: white;
}


.oct24-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 58px;
    font-weight: normal;

    line-height: 0.95;

    margin-bottom: 18px;
}


.oct24-hero-content p {
    font-family: Georgia, serif;

    font-size: 25px;

    line-height: 1.25;
}



/* OUR COMMITMENT */

.oct24-commitment {
    display: flex;

    align-items: center;

    gap: 55px;

    padding: 35px 50px;

    background: white;
}


.oct24-commitment-text {
    width: 45%;
}


.oct24-commitment-text h2 {
    font-family: Georgia, serif;

    color: #225239;

    font-size: 38px;

    margin-bottom: 10px;
}


.oct24-line {
    width: 100px;
    height: 3px;

    background: #a96c3a;

    margin-bottom: 20px;
}


.oct24-commitment-text p {
    font-family: Georgia, serif;

    font-size: 18px;

    color: #333;

    line-height: 1.45;

    margin-bottom: 15px;
}


.oct24-commitment-image {
    width: 55%;
}


.oct24-commitment-image img {
    width: 100%;

    height: 320px;

    object-fit: cover;

    display: block;
}



/* FOUR FEATURE BOXES */

.oct24-features {
    display: grid;

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

    background: #faf8f1;

    padding: 20px 40px 30px;
}


.oct24-feature {
    text-align: center;

    padding: 0 30px;

    border-right: 1px solid #d8d3c8;
}


.oct24-feature:last-child {
    border-right: none;
}


.oct24-icon {
    width: 78px;
    height: 78px;

    border-radius: 50%;

    background: #31583a;

    color: white;

    margin: 0 auto 12px;

    display: flex;

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

    font-size: 34px;
}


.oct24-feature h3 {
    font-family: Georgia, serif;

    color: #234c35;

    font-size: 22px;

    margin-bottom: 10px;
}


.oct24-feature p {
    font-family: Georgia, serif;

    color: #333;

    font-size: 16px;

    line-height: 1.4;
}



/* GREEN BOTTOM MESSAGE */

.oct24-message {
    display: grid;

    grid-template-columns: 40% 60%;

    align-items: center;

    background: #1f5a39;

    color: white;

    padding: 35px 70px;
}


.oct24-message-left {
    padding-right: 45px;

    border-right: 1px solid rgba(255,255,255,0.6);

    text-align: center;
}


.oct24-message-left h2 {
    font-family: Georgia, serif;

    font-size: 36px;

    font-weight: normal;
    font-style: italic;

    line-height: 1.25;
}


.oct24-message-right {
    text-align: center;

    padding-left: 45px;
}


.oct24-message-right p {
    font-family: Georgia, serif;

    max-width: 650px;

    margin: 0 auto 20px;

    font-size: 19px;

    line-height: 1.4;
}



/* BACK TO EVENTS BUTTON */

.oct24-back-button {
    display: inline-block;

    background: white;

    color: #214637;

    text-decoration: none;

    padding: 14px 38px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;
}


.oct24-back-button:hover {
    background: #eeeae0;
}



/* BOTTOM BANNER */

.oct24-bottom {
    background: #f6f4ed;

    text-align: center;

    padding: 20px;
}


.oct24-bottom p {
    color: #244b36;

    font-size: 12px;

    letter-spacing: 4px;
}



/* TABLET */

@media (max-width: 900px) {

    .oct24-commitment {
        flex-direction: column;
    }


    .oct24-commitment-text,
    .oct24-commitment-image {
        width: 100%;
    }


    .oct24-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 30px;
    }


    .oct24-feature {
        border-right: none;
    }


    .oct24-message {
        grid-template-columns: 1fr;
    }


    .oct24-message-left {
        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,0.6);

        padding-right: 0;

        padding-bottom: 30px;
    }


    .oct24-message-right {
        padding-left: 0;

        padding-top: 30px;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .oct24-hero {
        min-height: 290px;

        padding: 40px 25px;
    }


    .oct24-hero-content h1 {
        font-size: 44px;
    }


    .oct24-hero-content p {
        font-size: 21px;
    }


    .oct24-commitment {
        padding: 35px 25px;
    }


    .oct24-features {
        grid-template-columns: 1fr;

        padding: 30px 25px;
    }


    .oct24-feature {
        padding: 20px 0;
    }


    .oct24-message {
        padding: 35px 25px;
    }

}
/* ==========================================
   SPONSORS & PARTNERS
========================================== */

.partners-section {
    background: #ffffff;

    padding: 55px 45px;
}


.partners-heading {
    text-align: center;

    max-width: 800px;

    margin: 0 auto 35px;
}


.partners-small-title {
    color: #52764f;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: bold;

    margin-bottom: 8px;
}


.partners-heading h2 {
    font-family: Georgia, serif;

    color: #173d2d;

    font-size: 40px;

    margin-bottom: 12px;
}


.partners-heading > p:last-child {
    color: #444;

    font-size: 17px;

    line-height: 1.5;
}



/* LOGO GRID */

.partners-logo-grid {
    max-width: 1200px;

    margin: 0 auto 40px;

    display: grid;

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

    gap: 22px;
}


.partner-logo-card {
    min-height: 150px;

    background: #faf9f5;

    border: 1px solid #e0ddd4;

    display: flex;

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

    padding: 25px;

    border-radius: 8px;
}


.partner-logo-card img {
    width: 100%;

    max-width: 190px;

    max-height: 90px;

    object-fit: contain;
}



/* PARTNER CTA */

.partner-callout {
    max-width: 1050px;

    margin: 0 auto;

    background: #eef3ea;

    display: flex;

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

    gap: 35px;

    padding: 30px 40px;

    border-radius: 10px;
}


.partner-callout-text {
    max-width: 680px;
}


.partner-callout-text h2 {
    font-family: Georgia, serif;

    color: #214a36;

    font-size: 30px;

    margin-bottom: 8px;
}


.partner-callout-text p {
    color: #333;

    font-size: 16px;

    line-height: 1.5;
}


.partner-contact-button {
    display: inline-block;

    background: #285d3e;

    color: white;

    text-decoration: none;

    padding: 15px 32px;

    border-radius: 5px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1.5px;
}


.partner-contact-button:hover {
    background: #1c452d;
}



/* TABLET */

@media (max-width: 900px) {

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


    .partner-callout {
        flex-direction: column;

        text-align: center;
    }

}



/* MOBILE */

@media (max-width: 600px) {

    .partners-section {
        padding: 40px 25px;
    }


    .partners-logo-grid {
        grid-template-columns: 1fr;
    }


    .partner-contact-button {
        width: 100%;

        text-align: center;
    }

}
/* ==========================================
   DONATION CATEGORY PAGE
========================================== */

.donate-hero {
    min-height: 300px;

    background-image:
        linear-gradient(
            90deg,
            rgba(20, 48, 34, 0.88) 0%,
            rgba(20, 48, 34, 0.52) 45%,
            rgba(20, 48, 34, 0.05) 75%
        ),
        url("images/donate-hero.jpg");

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

    display: flex;
    align-items: center;

    padding: 50px 60px;
}


.donate-hero-content {
    color: white;
    max-width: 650px;
}


.donate-hero-content h1 {
    font-family: Georgia, serif;

    font-size: 58px;

    margin-bottom: 15px;
}


.donate-hero-content p {
    font-size: 21px;

    line-height: 1.4;
}


/* DONATION SECTION */

.donation-categories {
    background: #f8f7f3;

    padding: 50px 35px;
}


.donation-heading {
    max-width: 800px;

    margin: 0 auto 40px;

    text-align: center;
}


.donation-small-title {
    color: #52764f;

    font-size: 13px;

    letter-spacing: 4px;

    font-weight: bold;

    margin-bottom: 8px;
}


.donation-heading h2 {
    font-family: Georgia, serif;

    color: #173d2d;

    font-size: 39px;

    margin-bottom: 12px;
}


.donation-heading > p:last-child {
    font-size: 17px;

    color: #444;

    line-height: 1.5;
}


/* CARDS */

.donation-grid {
    max-width: 1150px;

    margin: 0 auto;

    display: grid;

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

    gap: 28px;
}


.donation-card {
    background: white;

    border-radius: 9px;

    overflow: hidden;

    border: 1px solid #dedbd2;
}


.donation-card img {
    width: 100%;

    height: 270px;

    object-fit: cover;

    display: block;
}


.donation-card-content {
    padding: 28px;

    text-align: center;
}


.donation-card-content h2 {
    font-family: Georgia, serif;

    color: #214b36;

    font-size: 27px;

    margin-bottom: 15px;
}


.donation-card-content p {
    color: #444;

    font-size: 16px;

    line-height: 1.55;

    min-height: 125px;
}


/* DONATE BUTTON */

.donate-category-button {
    display: inline-block;

    background: #285d3e;

    color: white;

    text-decoration: none;

    padding: 14px 45px;

    border-radius: 5px;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1.5px;

    margin-top: 15px;
}


.donate-category-button:hover {
    background: #1c452d;
}


/* BOTTOM */

.donate-bottom-message {
    background: #174b39;

    color: white;

    text-align: center;

    padding: 35px 25px;
}


.donate-bottom-message h2 {
    font-family: Georgia, serif;

    font-size: 30px;

    margin-bottom: 8px;
}


.donate-bottom-message p {
    font-size: 16px;
}


/* MOBILE */

@media (max-width: 750px) {

    .donation-grid {
        grid-template-columns: 1fr;
    }


    .donate-hero {
        padding: 40px 25px;
    }


    .donate-hero-content h1 {
        font-size: 44px;
    }

}
/* ==========================================
   DONATION PAYMENT PAGE
========================================== */

.donation-payment-section {
    background: #f6f4ee;

    min-height: 650px;

    padding: 60px 25px;
}


.donation-payment-box {
    background: white;

    max-width: 650px;

    margin: 0 auto;

    padding: 45px;

    border-radius: 10px;

    border: 1px solid #dedbd3;
}


.donation-payment-box > h1 {
    font-family: Georgia, serif;

    color: #173d2d;

    font-size: 38px;

    text-align: center;

    margin-bottom: 30px;
}


.selected-donation-box {
    background: #eef3ea;

    padding: 20px;

    text-align: center;

    margin-bottom: 30px;

    border-radius: 7px;
}


.selected-donation-box p {
    font-size: 14px;

    margin-bottom: 5px;
}


.selected-donation-box h2 {
    font-family: Georgia, serif;

    color: #28583d;

    font-size: 24px;
}


/* FORM */

.donation-payment-form {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.donation-payment-form label {
    font-weight: bold;

    color: #244332;

    margin-top: 8px;
}


.donation-payment-form input {
    width: 100%;

    padding: 14px;

    border: 1px solid #bbb;

    border-radius: 5px;

    font-size: 16px;
}


/* MONEY */

.amount-input {
    position: relative;
}


.amount-input span {
    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: #31583a;
}


.amount-input input {
    padding-left: 35px;
}


/* PAYMENT BUTTON */

.complete-donation-button {
    margin-top: 20px;

    background: #285d3e;

    color: white;

    border: none;

    padding: 16px;

    border-radius: 5px;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 1.5px;

    cursor: pointer;
}


.complete-donation-button:hover {
    background: #1c452d;
}


.back-donation-categories {
    display: block;

    text-align: center;

    margin-top: 25px;

    color: #31583a;

    text-decoration: none;

    font-weight: bold;
}
/* OCT 4 ACTION BUTTONS */

.oct4-action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}


/* VOLUNTEER BUTTON */

.oct4-volunteer-button {
    display: inline-block;
    background: #c28a4c;
    color: white;
    text-decoration: none;
    padding: 14px 38px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.oct4-volunteer-button:hover {
    background: #9e6a36;
}


/* DONATE BUTTON */

.oct4-donate-button {
    display: inline-block;
    background: #a55f2a;
    color: white;
    text-decoration: none;
    padding: 14px 38px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.oct4-donate-button:hover {
    background: #84491f;
}


/* OCT 24 EVENT BUTTONS */

.event-bottom-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}


.volunteer-event-button {
    display: inline-block;

    background: #a55f2a;
    color: white;

    padding: 15px 45px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.5px;

    text-align: center;
}


.volunteer-event-button:hover {
    background: #84491f;
}
/* OCT 24 DONATE BUTTON */

.donate-event-button {
    display: inline-block;

    background: white;
    color: #285d3e;

    padding: 15px 45px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1.5px;

    text-align: center;
}

.donate-event-button:hover {
    background: #f1f1ed;
    color: #1c452d;
}/* ==========================================
   CONTACT SOCIAL MEDIA SECTION
========================================== */

.social-community-section {
    background: #f7f6f1;
    padding: 60px 50px;
}


.social-community-heading {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}


.social-community-heading h2 {
    font-family: Georgia, serif;
    color: #173d2d;
    font-size: 40px;
    margin: 8px 0 12px;
}


.social-community-heading > p {
    font-size: 17px;
    line-height: 1.6;
    color: #444;
}


/* MAIN ACCOUNT LINKS */

.social-account-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 25px;
}


.social-account-links a {
    background: #285d3e;
    color: white;

    text-decoration: none;

    padding: 12px 30px;

    border-radius: 5px;

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}


.social-account-links a:hover {
    background: #1c452d;
}


/* EACH SOCIAL NETWORK */

.social-feature {
    max-width: 1100px;
    margin: 0 auto 55px;
}


.social-feature-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: 1px solid #ccc;

    padding-bottom: 12px;
    margin-bottom: 22px;
}


.social-feature-title h2 {
    font-family: Georgia, serif;
    color: #173d2d;
    font-size: 30px;
}


.social-feature-title a {
    color: #285d3e;

    text-decoration: none;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}


/* YOUTUBE VIDEOS */

.youtube-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}


.youtube-video iframe {
    width: 100%;
    height: 310px;

    border: none;

    border-radius: 7px;
}


/* FACEBOOK + INSTAGRAM */

.social-post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}


.social-post-card {
    display: block;

    background: white;

    border: 1px solid #ddd;

    border-radius: 8px;

    padding: 8px;

    overflow: hidden;
}


.social-post-card img {
    width: 100%;
    height: 400px;

    object-fit: cover;

    display: block;

    border-radius: 5px;
}


.social-post-card:hover {
    transform: translateY(-3px);
}


/* MOBILE */

@media (max-width: 700px) {

    .social-community-section {
        padding: 45px 20px;
    }


    .youtube-grid,
    .social-post-grid {
        grid-template-columns: 1fr;
    }


    .social-feature-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }


    .youtube-video iframe {
        height: 230px;
    }


    .social-post-card img {
        height: auto;
    }

}
/* ==========================================
   TIKTOK VIDEOS
========================================== */

.tiktok-grid {
    display: grid;

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

    gap: 25px;

    max-width: 800px;

    margin: 0 auto;
}


.tiktok-video {
    display: flex;

    justify-content: center;

    background: white;

    border: 1px solid #ddd;

    border-radius: 8px;

    padding: 10px;
}


.tiktok-video iframe {
    width: 100%;

    max-width: 360px;

    height: 620px;

    border: none;

    border-radius: 6px;
}


/* MOBILE */

@media (max-width: 700px) {

    .tiktok-grid {
        grid-template-columns: 1fr;
    }


    .tiktok-video iframe {
        height: 600px;
    }

}
/* SUPPORT PAGE BUTTON ROW */

.program-action-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}


/* DONATE - SEPARATE BUTTON */

.support-donate-button {
    display: inline-block;
    background: #a55f2a;
    color: white;
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.support-donate-button:hover {
    background: #84491f;
}


/* VOLUNTEER - SEPARATE BUTTON */

.support-volunteer-button {
    display: inline-block;
    background: #285d3e;
    color: white;
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.support-volunteer-button:hover {
    background: #1c452d;
}
/* ==========================================
   DESKTOP-STYLE MOBILE LAYOUT
   KEEP ROWS / STOP GIANT STACKING
========================================== */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* =========================
       HEADER
    ========================= */

    header {
        height: auto !important;
        flex-direction: column !important;
        padding: 8px 8px 10px !important;
    }

    .logo-area img {
        width: 190px !important;
        max-width: 70% !important;
        height: auto !important;
        max-height: none !important;
    }

    nav {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2px 8px !important;
    }

    nav a {
        font-size: 9px !important;
        padding: 5px 2px !important;
        white-space: normal !important;
    }


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

    .hero {
        min-height: 240px !important;
        padding: 22px 18px !important;

        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    .hero-content {
        width: 55% !important;
    }

    .hero-content h1 {
        font-size: 29px !important;
        line-height: 1 !important;
    }

    .hero-content p {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .hero-button {
        padding: 9px 16px !important;
        font-size: 9px !important;
    }


    /* =========================
       HOME QUICK LINKS
       3 ACROSS INSTEAD OF STACK
    ========================= */

    .quick-links {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 15px 10px !important;
    }

    .quick-card {
        width: 100% !important;
        padding: 10px 5px !important;
        border: none !important;
    }

    .icon-circle {
        width: 48px !important;
        height: 48px !important;
        font-size: 22px !important;
        margin: 0 auto 8px !important;
    }

    .quick-card h3 {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    .quick-card p {
        font-size: 10px !important;
        line-height: 1.25 !important;
        min-height: 0 !important;
    }

    .quick-card a {
        font-size: 10px !important;
    }


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

    .about-hero {
        min-height: 230px !important;
        padding: 25px 18px !important;

        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    .about-hero-content {
        max-width: 55% !important;
    }

    .about-hero-content h1 {
        font-size: 30px !important;
    }

    .about-hero-content h2 {
        font-size: 17px !important;
    }

    .about-hero-content p {
        font-size: 9px !important;
        letter-spacing: 1px !important;
        line-height: 1.45 !important;
    }


    /* =========================
       ABOUT - KEEP TEXT + PHOTO SIDE BY SIDE
    ========================= */

    .why-exist {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 20px 15px !important;
    }

    .why-exist-text {
        width: 50% !important;
    }

    .why-exist-image {
        width: 50% !important;
    }

    .why-exist-text h2 {
        font-size: 23px !important;
    }

    .why-exist-text p {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .why-exist-image img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }


    /* =========================
       WHO WE HELP
       4 ACROSS LIKE DESKTOP
    ========================= */

    .who-help {
        padding: 20px 10px !important;
    }

    .who-help > h2 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }

    .who-help-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px !important;
    }

    .who-help-card {
        padding: 5px !important;
    }

    .who-help-icon {
        font-size: 28px !important;
        margin-bottom: 6px !important;
    }

    .who-help-card h3 {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .who-help-card p {
        font-size: 8px !important;
        line-height: 1.25 !important;
    }


    /* =========================
       OUR COMMITMENT
       PHOTO + TEXT SIDE BY SIDE
    ========================= */

    .our-commitment {
        flex-direction: row !important;
        align-items: stretch !important;
    }

    .commitment-photo,
    .commitment-copy {
        width: 50% !important;
    }

    .commitment-photo img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }

    .commitment-copy {
        padding: 18px 14px !important;
    }

    .commitment-copy h2 {
        font-size: 21px !important;
    }

    .commitment-copy p {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }


    /* =========================
       GET INVOLVED HERO
    ========================= */

    .involved-background-section {
        background-size: 100% auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    .involved-hero {
        min-height: 230px !important;
        padding: 22px 18px 35px !important;
    }

    .involved-hero-content {
        max-width: 52% !important;
    }

    .involved-hero-content h1 {
        font-size: 29px !important;
        line-height: 1 !important;
    }

    .involved-hero-content h2 {
        font-size: 17px !important;
    }

    .involved-hero-content p {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }


    /* =========================
       GET INVOLVED CARDS
       3 ACROSS
    ========================= */

    .involved-options {
        margin-top: -20px !important;
        padding: 0 10px 15px !important;
    }

    .involved-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7px !important;
        margin-top: 0 !important;
    }

    .involved-card {
        min-height: 0 !important;
        padding: 10px 7px !important;
        border-radius: 6px !important;
    }

    .involved-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 19px !important;
        margin-bottom: 6px !important;
    }

    .involved-card h2 {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    .involved-card p {
        font-size: 9px !important;
        line-height: 1.2 !important;
        min-height: 0 !important;
    }

    .involved-button {
        font-size: 7px !important;
        padding: 7px 4px !important;
        letter-spacing: .5px !important;
        margin-top: 8px !important;
    }


    /* =========================
       PARTNERS
       3 ACROSS LIKE DESKTOP
    ========================= */

    .partners-section {
        padding: 20px 10px !important;
    }

    .partners-logo-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .partners-logo-grid .partner-logo-card {
        height: 90px !important;
        padding: 5px !important;
    }

    .partners-logo-grid .partner-logo-card img {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;
    }


    /* =========================
       PROGRAMS
       3 CARDS ACROSS
    ========================= */

    .programs-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 7px !important;
    }

    .program-card {
        max-width: none !important;
        margin: 0 !important;
    }

    .program-image {
        height: 100px !important;
    }

    .program-image img {
        object-fit: contain !important;
        background: white !important;
    }

    .program-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        margin-top: -20px !important;
    }

    .program-content {
        padding: 3px 7px 12px !important;
    }

    .program-content h2 {
        font-size: 13px !important;
    }

    .program-content p {
        font-size: 9px !important;
        line-height: 1.25 !important;
        min-height: 0 !important;
    }

    .program-link {
        font-size: 8px !important;
    }


    /* =========================
       FOOD / COMMUNITY CONTENT
       KEEP SIDE BY SIDE
    ========================= */

    .food-commitment,
    .community-intro {
        flex-direction: row !important;
        gap: 12px !important;
        padding: 20px 15px !important;
    }

    .food-commitment-text,
    .food-commitment-image,
    .community-intro-text,
    .community-intro-image {
        width: 50% !important;
    }

    .food-commitment-image img,
    .community-intro-image img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }


    /* =========================
       SERVICE CARDS - 4 ACROSS
    ========================= */

    .food-services,
    .community-services-grid,
    .support-includes-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px !important;
    }

    .food-service-card,
    .community-service-card,
    .support-item {
        padding: 8px 4px !important;
    }

    .food-service-icon,
    .community-service-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 19px !important;
    }

    .food-service-card h3,
    .community-service-card h3,
    .support-item h3 {
        font-size: 10px !important;
    }

    .food-service-card p,
    .community-service-card p,
    .support-item p {
        font-size: 8px !important;
        line-height: 1.25 !important;
    }


    /* =========================
       ALL REGULAR PHOTOS
       NEVER CROP
    ========================= */

    .food-commitment-image img,
    .community-intro-image img,
    .support-commitment-image img,
    .oct4-commitment-image img,
    .oct24-commitment-image img,
    .why-exist-image img,
    .commitment-photo img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: contain !important;
    }

}