/* About Page Styles */

.about-hero-section {
    position: relative;
    padding: 60px 80px;
    max-width: 1440px;
    margin: 80px auto 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start; /* Align content to the left */
    /* Removed text-align: center; as it's handled by children */
}

.about-hero-section .background-ellipse {
    position: absolute;
    width: 794px;
    height: 770px;
    background-color: #F9FFC7; /* fill_T4Q3FQ from Figma */
    filter: blur(345.02886962890625px); /* effect_WX84R8 from Figma */
    opacity: 1;
    border-radius: 50%;
    top: 72px;
    left: 945px;
    z-index: -1;
}

.about-hero-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 800px; /* Adjust based on Figma */
    margin-bottom: 50px;
    text-align: left; /* Align text to the left */
}

.about-hero-content h1 {
    font-size: 72px; /* style_J41WKN from Figma */
    font-weight: 600;
    line-height: 1.25em;
    letter-spacing: -2%;
    color: #181B18; /* fill_EVGKXG from Figma */
    margin: 0;
}

.about-hero-content p {
    font-size: 30px; /* style_X8425O from Figma */
    font-weight: 400;
    line-height: 1.2666666666666666em;
    color: #2E332E; /* fill_MLLIU4 from Figma */
    margin: 0;
}

/* Media Queries for about-hero-section */
@media (max-width: 1280px) {
    .about-hero-section {
        padding: 40px;
        margin-top: 50px;
        align-items: center; /* Center content horizontally for smaller screens */
    }

    .about-hero-content {
        max-width: 100%;
        text-align: center; /* Center text for smaller screens */
    }

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

    .about-hero-content p {
        font-size: 24px;
    }

    .about-hero-section .background-ellipse {
        width: 500px;
        height: 485px;
        top: 50px;
        right: 40%;
        left: 0;
    }
}

@media (max-width: 768px) {
    .about-hero-section {
        padding: 20px;
        margin-top: 30px;
    }

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

    .about-hero-content p {
        font-size: 20px;
    }

    .about-hero-section .background-ellipse {
        width: 250px; /* Smaller width for mobile */
        height: 240px; /* Smaller height for mobile */
        top: 30px; /* Adjusted top position */
        right: 30%; /* Adjusted left position */
        left: 0;
    }
}

@media (max-width: 480px) {
    .about-hero-section {
        padding: 15px;
        margin-top: 20px;
    }

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

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

    .about-hero-section .background-ellipse {
        width: 250px; /* Even smaller width for very small mobile */
        height: 250px; /* Even smaller height for very small mobile */
        top: 20px; /* Adjusted top position */
        right: 50%; /* Adjusted left position as per user instruction */
        left: 0;
        background-color: #f7e543; /* Also apply yellower shade here */
    }
}


/* What We Stand For Section */
.what-we-stand-for-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px;
    margin-top: 80px;
    gap: 40px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.what-we-stand-for-section h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2222222222222223em;
    letter-spacing: -2%;
    color: #181B18;
    margin: 0;
    text-align: center;
}

.feature-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px solid #E2E5E2;
    border-radius: 20px;
    box-shadow: 0px 2px 2px -1px rgba(10, 13, 18, 0.04), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 12px 16px -4px rgba(10, 13, 18, 0.08);
    width: calc(33.333% - 13.333px); /* Three cards per row with gap */
    box-sizing: border-box;
    text-align: center;
}

.feature-card .icon-container-small {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card .icon-container-small img {
    width: 100%;
    height: 100%;
}

.feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5555555555555556em;
    color: #2E332E;
    margin: 0;
}

.feature-card p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #3F473E;
    margin: 0;
}

/* Media Queries for what-we-stand-for-section */
@media (max-width: 1280px) {
    .what-we-stand-for-section {
        padding: 40px;
        margin-top: 50px;
        gap: 30px;
    }

    .feature-card {
        width: calc(50% - 10px); /* Two cards per row with gap */
    }
}

@media (max-width: 768px) {
    .what-we-stand-for-section {
        padding: 20px;
        margin-top: 30px;
        gap: 20px;
    }

    .what-we-stand-for-section h2 {
        font-size: 30px;
    }

    .feature-card {
        width: 100%; /* One card per row */
    }
}

@media (max-width: 480px) {
    .what-we-stand-for-section {
        padding: 15px;
        margin-top: 20px;
        gap: 15px;
    }

    .what-we-stand-for-section h2 {
        font-size: 24px;
    }

    .feature-card h3,
    .feature-card p {
        font-size: 16px;
    }
}


/* Team Section */
.cacotec-team-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px;
    /* margin-top: 80px; */ /* Removed margin-top as per user instruction */
    margin-bottom: 80px;
    gap: 40px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.cacotec-team-section h2 {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2222222222222223em;
    letter-spacing: -2%;
    color: #181B18;
    margin: 0;
    text-align: center;
}

.team-members-container {
    display: grid;
    grid-template-columns: repeat(4, 305px); /* Fixed 4-column layout with 305px width per column */
    justify-content: center;
    gap: 20px; /* Adjusted gap to fit within 1280px max-width */
    width: 100%;
    /* Removed max-width here, as it's now on the parent section */
}

.team-member-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    gap: 10px;
    border-radius: 20px;
    box-sizing: border-box;
    /* text-align: removed as align-items: flex-start handles alignment for block children */
    /* max-width removed to allow grid to manage width */
}

.team-member-placeholder-photo {
    width: 305px;
    height: 305px;
    background-color: #D2F427;
    border-radius: 20px;
    object-fit: cover;
    margin-bottom: 10px;
}

.team-member-card h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3333333333333333em;
    color: #181B18;
    margin: 0;
}

.team-member-card p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #3F473E;
    margin: 0;
    text-align: left; /* Ensure text is left-aligned within the card */
    width: 305px; /* Set width for description */
}

/* Media Queries for cacotec-team-section */
@media (max-width: 1280px) {
    .cacotec-team-section {
        padding: 40px;
        margin-top: 50px;
        gap: 30px;
        max-width: 100%; /* Allow section to be full width on smaller screens */
    }
    .team-members-container {
        grid-template-columns: repeat(2, minmax(280px, 1fr)); /* 2-column flexible layout */
        gap: 30px;
    }
    .team-member-card {
        align-items: center;
    }
    .team-member-card p {
        text-align: center;
        width: auto;
    }
    .team-member-placeholder-photo {
        width: 100%; /* Make images responsive within their columns */
        height: auto; /* Allow height to adjust proportionally */
    }
}

@media (max-width: 768px) {
    .cacotec-team-section {
        padding: 20px;
        margin-top: 30px;
        gap: 20px;
    }

    .cacotec-team-section h2 {
        font-size: 30px;
    }

    .team-members-container {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }
    .team-member-card {
        align-items: center;
    }
    .team-member-card p {
        font-size: 14px;
        width: auto;
    }
    .team-member-placeholder-photo {
        width: 100%; /* Make images responsive within their columns */
        height: auto; /* Allow height to adjust proportionally */
    }
}

@media (max-width: 480px) {
    .cacotec-team-section {
        padding: 15px;
        margin-top: 20px;
        gap: 15px;
    }

    .cacotec-team-section h2 {
        font-size: 24px;
    }

    .team-members-container {
        grid-template-columns: 1fr; /* Still single column */
        gap: 15px;
    }

    .team-member-card h3 {
        font-size: 20px;
    }

    .team-member-card p {
        font-size: 14px;
    }
    .team-member-placeholder-photo {
        width: 100%; /* Make images responsive within their columns */
        height: auto; /* Allow height to adjust proportionally */
    }
}

.mission-vision-values-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px;
    /* margin-top: 80px; */ /* Removed margin-top as per user instruction */
    gap: 40px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.mvv-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.mvv-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 0;
    flex: 1 1 240px; /* Allows items to grow, shrink, and sets a base width of 240px */
    box-sizing: border-box;
    border-top: 1px solid #E2E5E2;
    text-align: left;
}

.mvv-card h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5555555555555556em;
    color: #2E332E;
    margin: 0;
}

.mvv-card p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #3F473E;
    margin: 0;
}

/* Media Queries for mission-vision-values-section */
@media (max-width: 1280px) {
    .mission-vision-values-section {
        padding: 40px;
        margin-top: 50px;
        gap: 30px;
    }

    .mvv-card {
        width: calc(50% - 10px); /* Two cards per row with gap */
    }
}

@media (max-width: 768px) {
    .mission-vision-values-section {
        padding: 20px;
        margin-top: 30px;
        gap: 20px;
    }

    .mvv-card {
        width: 100%; /* One card per row */
    }
}

@media (max-width: 480px) {
    .mission-vision-values-section {
        padding: 15px;
        margin-top: 20px;
        gap: 15px;
    }

    .mvv-card h3,
    .mvv-card p {
        font-size: 16px;
    }
}