@import url('https://fonts.googleapis.com/css2?family=Playwrite+IT+Moderna:wght@100..400&family=Playwrite+MX:wght@100..400&family=Playwrite+ZA:wght@100..400&display=swap');
/* General Container and Text Styles */
.container {
    padding: 20px 0;
    min-height: 100vh;
    margin-top: 6%;
    width: 100%;
}

.container h1 {
    font-size: 4rem;
    font-weight: 1000;
    text-align: center; /* Center the heading */
}

.who-we-are-section {
    margin-top: 30px;
    margin-bottom: 30px;  
}

.who-we-are-text {
    padding: 20px;
    margin: 0 auto; /* Center the text block */
    max-width: 800px; /* Optional: limit the width for better readability */
}

.who-we-are-text p{
        text-align: justify;     
        text-indent: 20px;
}

.who-we-are-text em {
    font-weight: bold;
    font-family: "Playwrite IT Moderna", cursive;
    font-size: 20px;
}

/* Mission, Vision, and Goals Sections */
.mission-vision {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the flex items */
    text-align: center; /* Center text */
}

.mission-icon, .vision-icon, .goal-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 98px; /* Adjust icon size */
    height: 180px; /* Set height to center vertically */
    margin-bottom: 20px;
    border-radius: 5px;
}

.mission-icon {
    border-right: 3px solid #D8E9A8;
    background: linear-gradient(to left, #D8E9A8, transparent);
}

.vision-icon {
    border-left: 3px solid #D8E9A8;
    background: linear-gradient(to right, #D8E9A8, transparent);
}

.goal-icon {
    border-right: 3px solid #D8E9A8;
    background: linear-gradient(to left, #D8E9A8, transparent);
}

.mission-text, .vision-text, .goal-text {
    padding: 20px;
    border-radius: 8px;
    height: 100%;
    position: relative;
    z-index: 1;
    text-align: justify; /* Justify text */
    max-width: 800px; /* Optional: limit the width for better readability */
    margin: 0 auto; /* Center the text block */
}

.mission-text p, .vision-text p, .goal-text p {
    text-align: justify;
    text-indent: 20px;
    font-size: 1.5rem;
}

/* Secondary Goals Section */
.secondary-goals-section {
    margin-top: 30px;
    text-align: center; /* Center text */
}

.secondary-goals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.secondary-goal {
    display: flex;
    align-items: center;
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 15px;
    margin: 10px;
    width: calc(50% - 20px); /* Two items per row */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.secondary-goal i {
    font-size: 2rem;
    margin-right: 15px;
    color: #365e32;
}

.secondary-goal p {
    margin: 0;
    text-align: justify;
    font-size: 1.5rem;
}

/* Responsive CSS for Smaller Screens */
@media (max-width: 768px) {
    .who-we-are-section {
        text-align: justify;       
        width: 100%;
    }

    .who-we-are-text p{
        padding-left: 25px;
    }
    .who-we-are-text h2{
        text-align: center;
        padding-left: 30px;
    }
    .who-we-are-text em{
        text-align: center;
        padding-left: 40px;
    }

    .who-we-are-section img {
        justify-content: center;
        padding-left: 34px;
    }

    .mission-vision, .secondary-goals-section {
        text-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-left: 20px;
    }

    .mission-icon, .vision-icon, .goal-icon, .secondary-goals-icon {
        margin: 0 auto 10px;
        width: 100%;
        max-width: none;
    }

    .mission-text, .vision-text, .goal-text, .secondary-goals-text {
        width: 100%;
        max-width: none;
    }

     .mission-text h3, .vision-text h3, .goal-text h3{
        text-align: center;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .container h1 {
        font-size: 2rem;
        margin-top: 30px;
    }

    .mission-icon, .vision-icon, .goal-icon, .secondary-goals-icon {
        margin-bottom: 0;
    }

    .mission-text, .vision-text, .goal-text, .secondary-goals-text {
        margin-top: 10px;
    }

    .secondary-goal {
        width: calc(100% - 20px); /* One item per row */
        flex-direction: column;
        text-align: center;
    }

    .secondary-goal i {
        margin: 0 0 10px 0; /* Margin adjustment for center alignment */
    }

    .mission-vision {
        flex-direction: column-reverse; /* Arrange icons above text */
    }

    .mission-icon, .vision-icon, .goal-icon {
        margin-bottom: 10px; /* Ensure icons stay above text */
    }
}