/* About Us page (vanilla CSS) */
:root {
    --max-w:80rem;
    --gap:2.5rem;
    --gray-600:#4b5563;
    --gray-900:#111827;
    --white:#fff;
    --shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
    --teal-600:#0d9488
}

.body-about {
    background:#fff;
    color:var(--gray-900)
}

.container {
    max-width:var(--max-w);
    margin:0 auto;
    padding:1.5rem
}

.about-hero {
    width:100%;
    height:60vh;
    background-position:center;
    background-repeat:no-repeat;
    background-size:100%;
    display:flex;
    align-items:center;
    justify-content:center
}

.about-hero-inner {
    background:rgba(0,0,0,.4);
    padding:2.5rem;
    border-radius:1rem;
    text-align:center;
    color:#fff
}

.about-hero-inner h1 {
    font-size:3rem;
    font-weight:800
}

.about-hero-inner p {
    margin-top:.75rem;
    font-size:1.125rem
}

.section-hero {
    background:#f3f4f6;
    padding:1.5rem 0
}

.section-hero .hero-content{
    display:flex;
    flex-direction:column-reverse;
    gap:2rem;align-items:center
}

@media(min-width:1024px) {.section-hero .hero-content {
    flex-direction:row-reverse;
    justify-content:space-between
}}

.section-hero img {
    max-width:24rem;
    border-radius:.75rem;
    box-shadow:var(--shadow)
}

.section-hero h1 {
    font-size:3rem;
    font-weight:800
}

.section-hero p {
    margin-top:1rem;
    font-size:1.125rem;
    line-height:1.7;
    color:var(--gray-600)
}

.section-hero a{
    display:inline-block;
    margin-top:.75rem;
    background:var(--teal-600);
    color:#fff;
    padding:.5rem 1rem;
    border-radius:.5rem;
    text-decoration:none
}

.section-purpose {
    background:#f3f4f6;
    padding:2rem 0
}

.section-purpose .hero-content {
    display:flex;
    flex-direction:column;
    gap:2rem;
    align-items:center
}

@media(min-width:1024px) {.section-purpose .hero-content {
    flex-direction:row;
    justify-content:space-between
}}

.section-purpose img {
    max-width:24rem;
    border-radius:.75rem;
    box-shadow:var(--shadow)
}

.section-purpose h1 {
    font-size:3rem;
    font-weight:800
}

.section-purpose p {
    margin-top:1rem;
    font-size:1.125rem;
    line-height:1.7;
    color:var(--gray-600)
}

.section-purpose a {
    display:inline-block;
    margin-top:.75rem;
    background:var(--teal-600);
    color:#fff;
    padding:.5rem 1rem;
    border-radius:.5rem;
    text-decoration:none
}

.section-mv {
    padding:4rem 0;
    text-align:center
}

.section-mv h2 {
    font-size:1.875rem;
    font-weight:800;
    margin-bottom:2.5rem
}

.section-mv .mv-wrap {
    display:flex;
    flex-direction:column;
    gap:2.5rem;
    max-width:64rem;
    margin:0 auto;
    justify-content:center
}

@media(min-width:768px) {.section-mv .mv-wrap {
    flex-direction:row
}}

.mv-card {
    background:#f3f4f6;
    box-shadow:var(--shadow);
    padding:1.5rem;
    border-radius:.75rem;
    text-align:left
}

.mv-card h3 {
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:.75rem
}

.mv-card p {
    color:var(--gray-600)
}

.section-team {
    padding:4rem 0;
    background:#f3f4f6
}

.section-team h2 {
    text-align:center;
    font-size:1.875rem;
    font-weight:800;
    margin-bottom:3rem
}

.team-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2.5rem
}

.team-card {
    width:20rem;
    background:#fff;
    box-shadow:var(--shadow);
    border-radius:.75rem;
    overflow:hidden;
    text-align:center
}

.team-card figure {
    padding:2.5rem 2.5rem 0
}

.team-card img {
    border-radius:9999px
}

.team-card .card-body {
    padding:1rem 1.5rem
}

.team-card .card-title {
    font-weight:700
}

.team-card p {
    color:var(--gray-600)
}