/*=========================================================
    PROJECT : Hope & Harmony Spectrum Inc.
    FILE    : about.css
    PURPOSE : About Section
=========================================================*/

/*=========================================================
                    ABOUT SECTION
=========================================================*/

.about{

    background:var(--off-white);

}

.about-wrapper{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

.section-tag{

    display:inline-block;

    padding:10px 20px;

    background:rgba(39,93,169,.10);

    color:var(--primary-color);

    border-radius:50px;

    font-weight:600;

    margin-bottom:20px;

}

.about h2{

    margin-bottom:25px;

}

.about p{

    margin-bottom:30px;

}

.about-features{

    display:grid;

    gap:18px;

    margin-bottom:35px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    font-weight:600;

}

.feature-item i{

    color:var(--secondary-color);

    font-size:1.2rem;

}

.about-image{

    position:relative;

}

.about-image img{

    border-radius:30px;

    box-shadow:var(--shadow-lg);

}

.about-card{

    position:absolute;

    bottom:30px;

    left:-40px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(10px);

    padding:20px;

    display:flex;

    align-items:center;

    gap:18px;

    border-radius:18px;

    box-shadow:var(--shadow-md);

    max-width:300px;

}

.about-card i{

    color:var(--primary-color);

    font-size:2rem;

}

.about-card h4{

    margin-bottom:8px;

}

/*=========================================================
                1. OUR STORY
=========================================================*/

.our-story{

    padding:100px 0;

    background:var(--white);

}

.story-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.story-image img{

    width:100%;

    display:block;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.story-content .section-subtitle{

    display:inline-block;

    margin-bottom:15px;

    font-weight:600;

    color:var(--primary-color);

    text-transform:uppercase;

    letter-spacing:1px;

}

.story-content h2{

    margin-bottom:25px;

}

.story-content p{

    margin-bottom:20px;

    line-height:1.9;

    color:var(--text-color);

}

.story-highlights{

    list-style:none;

    margin-top:30px;

    padding:0;

}

.story-highlights li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-weight:500;

}

.story-highlights i{

    color:var(--primary-color);

    font-size:1rem;

}
/*=========================================================
                2. MISSION & VISION
=========================================================*/

.mission-vision{

    padding:100px 0;

    background:#f8fafc;

}

.section-heading{

    max-width:750px;

    margin:0 auto 70px;

    text-align:center;

}

.section-heading .section-subtitle{

    display:inline-block;

    margin-bottom:15px;

    color:var(--primary-color);

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

}

.section-heading h2{

    margin-bottom:20px;

}

.section-heading p{

    color:var(--text-color);

    line-height:1.8;

}

.mission-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.mission-card{

    background:var(--white);

    padding:45px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:var(--transition);

}

.mission-card:hover{

    transform:translateY(-8px);

}

.mission-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,102,204,.08);

    margin-bottom:25px;

}

.mission-icon i{

    font-size:1.8rem;

    color:var(--primary-color);

}

.mission-card h3{

    margin-bottom:20px;

}

.mission-card p{

    line-height:1.8;

    color:var(--text-color);

}

.story-features{

    margin-top:40px;

}

.story-features h3{

    margin-bottom:20px;

    font-size:1.3rem;

}
/*=========================================================
                2. OUR PURPOSE
=========================================================*/

.our-purpose{

    padding:100px 0;

    background:#f8fafc;

}

.purpose-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:60px;

}

.purpose-card{

    background:var(--white);

    padding:45px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:var(--transition);

}

.purpose-card:hover{

    transform:translateY(-8px);

}

.purpose-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(0,102,204,.08);

}

.purpose-icon i{

    font-size:1.8rem;

    color:var(--primary-color);

}

.purpose-card h3{

    margin-bottom:20px;

}

.purpose-card p{

    line-height:1.8;

    color:var(--text-color);

}
/*=========================================================
                3. OUR VALUES
=========================================================*/

.our-values{

    padding:100px 0;

    background:var(--white);

}

.values-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:60px;

}

.value-card{

    background:#ffffff;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:var(--transition);

}

.value-card:hover{

    transform:translateY(-8px);

}

.value-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(0,102,204,.08);

    display:flex;

    align-items:center;

    justify-content:center;

}

.value-icon i{

    font-size:2rem;

    color:var(--primary-color);

}

.value-card h3{

    margin-bottom:18px;

}

.value-card p{

    line-height:1.8;

    color:var(--text-color);

}
/*=========================================================
                4. WHO WE SUPPORT
=========================================================*/

.who-we-support{

    padding:100px 0;

    background:#f8fafc;

}

.support-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.support-image img{

    width:100%;

    border-radius:20px;

    display:block;

}

.support-list{

    margin-top:40px;

}

.support-item{

    display:flex;

    gap:20px;

    margin-bottom:30px;

    align-items:flex-start;

}

.support-item i{

    font-size:1.6rem;

    color:var(--primary-color);

    margin-top:5px;

}

.support-item h3{

    margin-bottom:8px;

}