/* === General Helper Classes (Define if not already present) === */

.top-spacer {
    margin-top: 40px; /* Add space above sections */
    padding-top: 40px; /* Add padding within sections */
    padding-bottom: 40px;
}

.light-bg {
    background-color: #f7f9fc; /* A slightly different light background */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.section-content {
    max-width: 800px; /* Consistent max-width for centered content */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Add padding for small screens */
    padding-right: 15px;
}

.section-content-wide {
    max-width: 1100px; /* Wider container for layouts like flex side-by-side */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* === About Page Specific Styles (.about-page) === */

.about-page h2 {
    font-size: 2em; /* Consistent heading size */
    color: navy;
    margin-bottom: 20px;
    text-align: center; /* Center section titles */
}

.about-page h2 i {
    margin-right: 10px;
    color: rgb(255, 42, 77); /* Use accent color for icons in headings */
}

.about-page p {
    line-height: 1.7;
    color: #555;
    font-size: 1.05em; /* Slightly larger paragraph text */
    margin-bottom: 15px;
}

/* --- Mission & Vision Section --- */

.mission-vision .flex-wrapper {
    align-items: flex-start; /* Align items to the top */
    gap: 30px; /* Space between mission and vision */
}

.mission-vision .content-block {
    flex: 1 1 400px; /* Allow items to grow/shrink, base width 400px */
    padding: 25px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.mission-vision .content-block h2 {
    text-align: left; /* Left-align headings within the blocks */
    margin-top: 0;
}

/* --- Values Section --- */

.our-values .section-content p { /* Intro paragraph */
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.1em;
}

.values-grid {
    /* Uses .grid-wrapper defined elsewhere */
    /* Adjust grid properties if needed */
    gap: 25px;
}

.value-item {
    background-color: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.value-item .icon-large {
    font-size: 2.8em; /* Make icons prominent */
    color: rgb(255, 42, 77); /* Accent color */
    margin-bottom: 15px;
    display: block; /* Ensure it takes block space */
}

.value-item h4 {
    font-size: 1.3em;
    color: navy;
    margin-top: 0;
    margin-bottom: 10px;
}

.value-item p {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 0; /* Remove bottom margin if desired */
}


/* --- Team Section --- */
.our-team .section-content p { /* Intro paragraph */
     text-align: center;
     margin-bottom: 30px;
}

.team-grid {
    /* Uses .grid-wrapper and .program */
    gap: 30px;
}

.team-member {
    /* Styles inherited from .program */
    /* Add specific overrides if needed */
    text-align: center;
}

.team-member img {
    border-radius: 50%; /* Make team images circular */
    width: 150px; /* Fixed size */
    height: 150px;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    border: 4px solid #eee;
}

.team-member h4 {
    /* Styles inherited from .program h4 */
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1.25em;
}

.team-member figcaption { /* Role/Title */
    /* Styles inherited from .program figcaption */
    color: rgb(255, 42, 77);
    font-weight: 500;
    font-size: 1em;
    margin-bottom: 10px;
}

.team-member .member-bio {
    font-size: 0.9em;
    color: #777;
    margin-top: 10px;
    text-align: center; /* Explicitly center bio */
    padding: 0 10px; /* Add some horizontal padding */
}

/* --- History Section --- */

.history .section-content p {
    text-align: center; /* Center history text */
    max-width: 750px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
}

/* === Responsive Adjustments for About Page === */

@media (max-width: 767px) {
    .about-page h2 {
        font-size: 1.8em;
    }

     .mission-vision .content-block {
        padding: 20px;
    }

    .value-item .icon-large {
        font-size: 2.5em;
    }
    .value-item h4 {
        font-size: 1.2em;
    }

    .team-member img {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
     .about-page h2 {
        font-size: 1.6em;
    }
    .about-page p {
        font-size: 1em;
    }

     .value-item {
        padding: 20px 15px;
    }
     .value-item .icon-large {
        font-size: 2.2em;
    }
     .value-item h4 {
        font-size: 1.1em;
    }

     .team-member img {
        width: 100px;
        height: 100px;
    }
     .team-member h4 {
        font-size: 1.15em;
     }
}