/* public/css/about.css */

   :root {
            --background: #ffffff; --background-light: #f8f9fa; --foreground: #212529; --muted-foreground: #6c757d;
            --primary-blue: hsl(206, 90%, 54%); --primary-green: hsl(158, 77%, 52%); --card-border: #e9ecef;
            --card-bg: #ffffff; --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); --radius-lg: 16px;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: 'Inter', sans-serif; background: var(--background); color: var(--foreground); line-height: 1.6; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
        .text-gradient { background: linear-gradient(90deg, var(--primary-blue), var(--primary-green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

        /* Page Header */
        .page-header { background: var(--background-light); padding: 4rem 0; text-align: center; border-bottom: 1px solid var(--card-border); }
        .page-header h1 { font-size: 3rem; font-weight: 700; }
        .page-header p { font-size: 1.2rem; color: var(--muted-foreground); max-width: 700px; margin: 0.5rem auto 0; }
        
        /* Intro Section */
        .intro-section { padding: 5rem 0; }
        .intro-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
        .intro-layout img { width: 100%; border-radius: var(--radius-lg); }
        .intro-content h2 { font-size: 2.5rem; margin-bottom: 1.5rem; line-height: 1.2; }
        .intro-content p { color: var(--muted-foreground); margin-bottom: 1rem; font-size: 1.1rem; }

        /* Mission/Vision Section */
        .mission-vision-section { padding: 5rem 0; background: var(--background-light); }
        .mission-vision-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
        .mission-vision-card { text-align: center; }
        .mission-vision-card .icon { font-size: 3rem; color: var(--primary-blue); margin-bottom: 1rem; }
        .mission-vision-card h3 { font-size: 2rem; margin-bottom: 1rem; }
        .mission-vision-card p { font-size: 1.1rem; color: var(--muted-foreground); }

        /* Values Section */
        .values-section { padding: 5rem 0; }
        .values-section .section-header { text-align: center; margin-bottom: 3rem; }
        .values-section .section-header h2 { font-size: 2.5rem; }
        .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
        .value-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; }
        .value-card .icon { font-size: 2rem; color: var(--primary-blue); margin-bottom: 1rem; }
        .value-card h4 { font-size: 1.2rem; margin-bottom: 0.5rem; }
        .value-card p { color: var(--muted-foreground); font-size: 0.9rem; }

        /* CTA Section */
        .cta-section { background-image: linear-gradient(120deg, var(--primary-blue) 0%, var(--primary-green) 100%); color: white; padding: 4rem 0; text-align: center; }
        .cta-section h2 { font-size: 2.5rem; margin-bottom: 1rem; }
        .cta-section p { max-width: 600px; margin: 0 auto 2rem; opacity: 0.9; }
        .btn-light { background: white; color: var(--primary-blue); }}
}