/* --- about.css --- */

/* --- About Page Hero Specifics --- */
.page-hero.about-hero {
    background: linear-gradient(135deg, #EBF4FF 0%, #D6E9FF 100%);
}
.page-hero.about-hero h1 {
    color: var(--primary-blue);
}
.page-hero.about-hero .subhead {
    color: var(--medium-gray);
}
.page-hero.about-hero::before {
    background-image: url('https://via.placeholder.com/200/0A74DA/FFFFFF?text=TeamIcon'); /* Replace */
    top: 20%;
    left: 10%;
    transform: rotate(-15deg);
}
/* Shape divider fill is handled by common.css default if white background below */

/* --- About Intro Section --- */
.about-intro .content-columns { /* This is the flex container */
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
}
.about-intro .column:first-child { /* Text column */
    flex: 1.2;
    min-width: 300px;
}
.about-intro .column:last-child { /* Image column */
    flex: 0.8;
    min-width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-intro .column p { font-size: 1.05rem; }

/* Styles for dev_team.png (or its placeholder) if it has .section-image */
.about-intro .column:last-child .section-image {
    max-width: 480px; /* Desktop max width */
    width: 100%;      /* Responsive within its column */
    height: auto;
    margin-top: 0; /* Reset if align-items:center on parent is enough */
    /* Inherits border-radius, box-shadow from common.css .section-image */
}

/* --- Services Overview Section (About Page) --- */
.services-overview .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}
.service-card {
    background-color: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    text-align: center;
}
.service-icon { max-height: 60px; margin-bottom: 20px; border-radius: 8px; display: inline-block;}
.service-card h3 { color: var(--primary-blue); margin-bottom: 10px; }

/* --- Why Choose Us Section (About Page) --- */
.why-choose-us .feature-list { list-style: none; padding: 0; margin-top: 30px; }
.why-choose-us .feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background-color: var(--white);
    padding: 25px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 25px;
}
.feature-icon { flex-shrink: 0; width: 60px; height: 60px; object-fit: contain; border-radius: 8px; display: inline-block;}
.why-choose-us .feature-list h4 { margin-bottom: 0.3em; font-size: 1.25rem; color: var(--dark-gray); }
.why-choose-us .feature-list p { margin-bottom: 0; font-size: 0.98rem; }

/* --- Manufacturing Success Section (About Page) --- */
.manufacturing-success .section-intro {
    max-width: 800px;
    margin: 0 auto 40px auto;
    text-align: center;
    font-size: 1.05rem;
}
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}
.achievement-card {
    background-color: var(--white);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--accent-green);
}
.achievement-card img { max-height: 50px; margin-bottom: 15px; border-radius: 6px; display: inline-block;}
.achievement-card h4 { margin-bottom: 10px; font-size: 1.15rem; color: var(--dark-gray); }

.system-details {
    background-color: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
}
.system-details h3 { margin-bottom: 20px; color: var(--primary-blue); font-size: 1.5rem; }
.ordered-feature-list { list-style-position: outside; padding-left: 25px; margin-bottom: 30px; }
.ordered-feature-list li { margin-bottom: 15px; font-size: 1.05rem; line-height: 1.6; }
.ordered-feature-list li strong { color: var(--dark-gray); }
.key-benefits-list { list-style: none; padding: 0; }
.key-benefits-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 1.05rem; }
.benefit-icon { color: var(--accent-green); font-weight: bold; font-size: 1.2rem; line-height: 1.4; }
.target-audience-note {
    font-style: italic;
    color: var(--medium-gray);
    text-align: center;
    max-width: 750px;
    margin: 30px auto 0 auto;
    padding: 15px;
    background-color: var(--very-light-gray-bg);
    border-radius: 8px;
    border-left: 3px solid var(--primary-blue);
}
.manufacturing-success .cta-button {
    background-color: var(--primary-blue);
    color: var(--white);
}
.manufacturing-success .cta-button:hover {
    background-color: var(--primary-blue-darker);
}

/* --- Responsive Adjustments for About Page Specific Elements --- */
@media (max-width: 991px) {
    .page-hero.about-hero h1 { font-size: 2.6rem; }
}
@media (max-width: 767px) {
    .page-hero.about-hero h1 { font-size: 2.2rem; }
    .page-hero.about-hero .subhead { font-size: 1.05rem; }

    /* .about-intro .content-columns and .column stacking handled by common.css */

    .about-intro .column:last-child { /* Ensure image column parent behaves like block */
        display: block;
    }
    .about-intro .section-image { /* dev_team.png on mobile */
        width: 90%;
        max-width: 350px;
        height: auto;
        display: block;
        margin: 20px auto; /* Vertical spacing and centering */
    }

    .why-choose-us .feature-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .why-choose-us .feature-list li div { /* Text container */
        width: 100%;
    }
}