/* about.css */

/* Section Styling */
#about {
    display: flex;
    flex-direction: column;
    gap: 4em; /* Add space between the sections */
    margin-top: 4em;
    margin-bottom: 4em;
}

/* Section Row Styling */
.section-row {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.43); /* Slightly transparent background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.section-row.mission {
    width: calc(100% - 6em); /* Adjust the width to account for the padding */
    flex-direction: row; /* Ensure text is on the left and image on the right */
    border-radius: 0 6rem 6rem 0; /* Border-radius adjustment */
}

.section-row.vision.even {
    display: flex;
    justify-content: flex-end; /* Align all content to the right */
    align-items: center; /* Center content vertically */
    flex-direction: row-reverse; /* Ensure the image is on the left and text on the right */
    padding-left: 0; /* Ensure the section connects to the right edge */
    padding-right: 0; /* Ensure the row spans the full width */
    width: calc(100% - 6em); /* Adjust the width to account for the padding */
    margin-left: auto; /* Push the content to the right */
    border-radius: 6rem 0 0 6rem; /* Add border-radius to the bottom right corner only */
}

/* Section Row Styling */
.section-row.values {
    min-height: max-content;
    max-height: max-content;
    display: flex;
    flex-direction: column; /* Stack header and flexbox vertically */
    align-items: center; /* Center content horizontally */
    width: calc(100% - 6em); /* Adjust the width to account for padding */
    border-radius: 0 6rem 6rem 0; /* Border-radius adjustment */
    padding: 0 1em 2em 1em; /* Padding on top and bottom */
}

/* Section Image Styling */
.section-image {
    flex: 1;
    max-height: 100%;
    margin: 20px;
}

.section-image img {
    width: 100%;
    border-radius: 6rem;
}

/* Section Text Styling */
.section-text {
    flex: 1;
    max-width: 45%;
    margin: 20px;
}

/* Bubble Styling */
.bubble {
    width: 80%; /* Adjust the width of the bubble */
    background: linear-gradient(90deg, #101010, #031B1B, #0E9294); /* Gradient background */
    padding: 20px; /* Padding inside the bubble */
    border-radius: 25px; /* Rounded corners for the bubble */
    margin: 2rem 0; /* Add space below the bubble */
}

#about h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5em; /* Adjust font size as needed */
    color: #C9FEFF; /* Light teal color for heading */
    text-align: left; /* Left align the heading */
    margin: 0; /* Remove default margin */
}

/* h4 Styling */
#about h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5em; /* Same font size as h2 */
    color: #C9FEFF; /* Same light teal color as h2 */
    text-align: center; /* Center align the h4 text */
    margin: 0; /* Remove default margin */
}

/* Paragraph Styling */
#about p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em; /* Adjust font size as needed */
    color: #C9FEFF; /* Light teal color for paragraph text */
    line-height: 1.6; /* Line height for better readability */
    margin: 0 auto 20px auto; /* Center align the text block and add margin at the bottom */
}

/* Move Values Header to Top and Make it Dynamically Wider */
.values-header {
    width: 100%; /* Take the full width of the section */
    text-align: center; /* Center align the text */
    margin-bottom: 2em; /* Add some space below the header */
    display: flex;
    justify-content: center; /* Center the bubble within the header */
}

/* Values Flexbox Styling */
.values-flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between the items */
    justify-content: center; /* Center the items */
    align-items: stretch; /* Ensure all cards stretch to the same height */
}

/* Value Cards Styling */
.value-card {
    border: 2px solid #0E9294; /* Base blue border */
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(14, 146, 148, 0.6); /* Subtle base shadow */
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(30% - 40px);
    box-sizing: border-box;
    min-height: 350px;
}

.value-card:hover {
    transform: translateY(-10px);
    border: 2px solid #E5F6F7;
    box-shadow: 
        10px 10px 4px rgba(229, 246, 247, 0.9),
        15px 15px 8px rgba(171, 230, 231, 0.9),
        20px 20px 15px rgba(92, 205, 207, 0.9),
        25px 25px 25px rgba(14, 146, 148, 0.9),
        30px 30px 40px rgba(14, 146, 148, 0.7);
}

.value-card i {
    font-size: 2em;
    color: #0E9294;
    margin-top: 20px; /* Same margin-top as h3 */
}

.values-flexbox h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    color: #0E9294;
    margin-top: 20px; /* Consistent margin-top for both icon and heading */
    margin-bottom: 10px; /* Space below heading */
}

.values-flexbox p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    color: #031B1B;
    line-height: 1.6;
    letter-spacing: normal; /* Ensure normal letter spacing */
    margin: 10px 0 0 0; /* Adjust top margin if necessary */
}

/* Responsive Design */
@media (max-width: 1024px) {
    .value-card {
        width: calc(50% - 20px); /* Two items per row on medium screens */
    }
}

@media (max-width: 768px) {
    .section-row,
    .section-row.even {
        flex-direction: column;
        text-align: center;
    }
    .section-image {
        max-width: 100%;
        margin: 0; /* Reset margin for mobile */
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
    .section-text {
        max-width: 100%;
        margin: 0; /* Reset margin for mobile */
    }
    .values-flexbox {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 4em;
    }
    .value-card {
        width: 100%; /* One item per row on small screens */
    }
}

@media (max-width: 720px) {
    .section-row,
    .section-row.mission,
    .section-row.vision.even,
    .section-row.values {
        flex-direction: column;
        text-align: center;
        width: 100%;
        padding: 2em 0;
        border-radius: 0;
    }

    .section-text,
    .section-image {
        max-width: 90%;
        margin: 1em auto;
    }

    .section-text {
        order: 1;
    }

    .section-image {
        order: 2;
    }

    .section-image img {
        border-radius: 3rem;
    }

    .values-flexbox {
        flex-direction: column;
    }

    .value-card {
        width: 90%;
        margin: 1em auto;
    }

    #about h2,
    #about h4 {
        font-size: 2em;
        text-align: center;
    }

    .bubble {
        width: 90%;
    }
}