.smaller-div {
    background:rgba(0,0,0,.1);
    width:100%;
}

    .smaller-div .quote {
        max-width: 1200px;
        margin: 0 auto;
        font-size: 20px;
        font-weight: lighter;
        color: var(--accent-color-2);
        padding: 80px 0;
    }

.smaller-div .quote-attribute {
    display:block;
    text-align:right;
    font-size:20px;
    font-weight:bold;
    margin-right: 40px;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
}

body {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    color: #333;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a3b5d;
}

p {
    margin-bottom: 1.5rem;
}

.section-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    z-index:2;
}

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

/* Section Styles */
section {
    width: 100vw;
    min-height: calc(100vh - 100px);
   /* padding: 5rem 0;*/
    display: flex;
    align-items: center;
    padding: 5rem 0;
    box-sizing:border-box;
}




/* Hero Section */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/hoke_and_students.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white !important;
    min-height: calc(100vh - 120px);
    height: calc(100vh - 180px) !important;
}

.hero .content {
    z-index:2;
}

.hero h1, .hero h2 {
    color:white;
}

/*    .hero h1 {
        font-size: 3.5rem;
        margin-bottom: 1.5rem;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

    .hero h2 {
        font-size: 1.8rem;
        font-weight: 400;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        font-family: var(--secondarytext);
    }
*/
/* Mission Section */
.mission {
    background-color: #f9f9f9;
}

.mission-statement {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1a3b5d;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.4;
}

/* Biblical Quote Section */
.quote {
    background-color: var(--accent-color-2);
    background-image: url(/image/banner-4-new.png);
    background-position: center;
    background-size: cover;
    color: white;
    text-align: center;
    min-height: 25vh !important;
    background-attachment: fixed;
    padding: 80px 0;
}

    .quote h2 {
        color: white;
        font-size: 2.5rem;
        margin:0;
    }

    .quote p {
        font-size: 1.8rem;
        line-height:1.5em !important;
        font-style: italic;
        max-width: 800px;
        margin: 0 auto 1em;
    }

    .quote span {
        font-size: 1.2rem;
        color: #e1c16e;
    }

    .quote .cover {
        background-color:var(--accent-color-2);
        opacity:.9;
    }

/* History Section */
.history {
    background-color: white;

 position:relative;
}

.history .feature-list {
}

.image-grid {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    column-gap:10px;
    row-gap:10px;
    flex-wrap:wrap;
    padding:12px;
    min-height:auto;
    max-width:1200px;
    margin:0 auto;
    box-sizing:border-box;
}

.image-grid .image-square {
    width: calc(50% - 20px);
    aspect-ratio:3/2;
    position:relative;
    border-radius:8px;
}

.image-square img {
    width: 100%;
    border-radius:8px;
}

/* Leadership Section */
.leadership {
    background-color: white;
}

.leadership .section-inner {
    max-width:960px;
}

.leaders-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.leader {
    text-align: center;
    width: 220px;
}

.leader-icon {
    font-size: 3rem;
    color: #1a3b5d;
    margin-bottom: 1rem;
}

.faculty-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    list-style: none;
    padding: 0;

}

    .faculty-list li {
        background: #e3e3e3;
        padding: 12px;
        border-radius: 5px;
        text-align: center;
        position: relative;
    }

    .faculty-list .profile-pic {
        width: 75%;
        aspect-ratio:1/1;
        border-radius: 50%;
        background-color: #ccc;
        margin: 0 auto 10px;
        background-size: cover;
        background-position:center;
        background-repeat:no-repeat;
    }

    .faculty-list li h5 {
        font-size:20px;
        margin:0;
    }

    .faculty-list li p {
        font-size:16px;
        margin: 0;
        font-weight:lighter;
    }
/*linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),*/
/* Distinctives Section */
.distinctives {
    background-image: url('/image/playing-piano-crowd.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color:white;
}

.distinctives h2, .distinctives h3, .distinctives i {
    color:white;
}




.distinctives .cover {
    background:var(--accent-color-2);
    opacity:.8;
}


.feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.feature {
    display: flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    max-width: 500px !important;
    margin-bottom: 1.5rem;
    column-gap:20px;

}

.feature-icon {
    font-size: 4rem;
    color: #1a3b5d;
    margin-right: 1rem;
    min-width: 80px;
}

/* Spiritual Life Section */
.spiritual-life {
    background-color: #f9f9f9;
}

/* Call to Action Section */
.cta {
    /*background-color: var(--accent-color-2);*/
    background-image: url(/image/aerial-building.jpg);
    background-position: center center;
    background-size: cover;
    color: white;
    text-align: center;
    min-height: 50vh;
    background-attachment:fixed;
}

    .cta .cover {
        background:var(--accent-color-2);
        opacity:.9;
   }

.cta-inner {
    width: 100%;
    max-width:700px;
}

.cta h2 {
    color: white;
    font-size: 2.5rem;
}
.cta .section-inner {
    display:flex;
    flex-direction:column;
}
.cta .btn {
    max-width:300px !important;
    margin:0 auto;
}
.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    padding: 1rem 2rem;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

    .btn:hover {
        background-color: white;
        transform: translateY(-3px);
    }

    .inner {

    }



        .large-image img {
            width: 100%;
        }
        .school-elders {
            text-align:center;
            font-size:18px;
            margin: 40px 0;
        }

        .school-elders span {
            font-weight:lighter !important;
            margin-right:8px;
        }
        #principal-container {
            width: 600px;
            max-width: 90vw;
            margin: 0 auto;
            text-align:center;
        }
        #principal-container h3 {
            margin-top:20px;
            margin-bottom:0 !important;
        }
        #principal-container p {
            font-size:14px;
            line-height:14px;
            margin:0 !important;
            opacity:.6;
        }

        .leadership .grade-image-container {
            margin: 0 auto;
        }

/* Responsive Styles */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero h2 {
        font-size: 1.4rem;
    }

    .mission-statement {
        font-size: 1.5rem;
    }

    .quote h2 {
        font-size: 2rem;
    }

    .quote p {
        font-size: 1.4rem;
    }

    .section-inner {
        padding: 0 1.5rem;
    }

    .image-grid {
        flex-direction:column;
        box-sizing:border-box;
        padding:0 !important;
    }
     .image-square {
        width: 100% !important;
        box-sizing:border-box;
        padding:8px;
    }
     .image-square img {
         width: 100% !important;
         box-sizing:border-box;
     }
}

.flex-features {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    box-sizing:border-box;
}

.flex-features .feature {
    width: 80%;
    padding: 20px;
    box-sizing:border-box;
    row-gap:20px;
    column-gap:20px;
    max-width:100vw;
    text-align:center;
    margin:0 auto;
}

.flex-features .feature .feature-icon {
    display:block;
}

.flex-features .grade-image-container {

}


.volunteer-section {
    margin: 0 auto;
    margin-top: 80px;
    padding: 40px;
    text-align: center;
    background:rgba(100,100,120,.1);
    border-radius:12px;
}

.volunteer-inner {
    margin: 0 auto;
}

.volunteer-inner h2 {
    font-size:32px;
}

.volunteer-inner p {
    font-size:24px;
    line-height:32px;
}