.about-section {
    background: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 64px;
    align-items: start;
}

.about-content {
    width: 100%;
}

.about-badge {
    margin-bottom: 20px;
}

.about-title {
    font-size: 2rem;
    margin-bottom: 16px;
}

.about-description {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--ink-light);
    line-height: 1.8;
    margin-bottom: 20px;
}

/* ==========================
   Sidebar
========================== */

.about-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ==========================
   Organization Card
========================== */

.about-info-card {
    background: linear-gradient(135deg,
            var(--crimson-deep),
            var(--crimson));
    border-radius: var(--radius-xl);
    padding: 28px;
    text-align: center;
    color: var(--white);
}

.about-logo {
    font-size: 3.5rem;
    margin-bottom: 12px;
}

.about-org-title {
    color: var(--white);
    margin-bottom: 8px;
}

.about-org-nepali {
    font-size: 1.1rem;
    opacity: .8;
}

.about-ornament {
    margin: 16px 0;
    color: rgba(255, 255, 255, .3);
}

.about-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: .95rem;
    opacity: .85;
    margin: 0;
}

/* ==========================
   Quick Facts Card
========================== */

.quick-facts {
    background: var(--gray-50);
    border: 1.5px solid var(--gray-100);
    border-radius: var(--radius-xl);
    padding: 24px;
}

.quick-facts-title {
    margin-bottom: 16px;
    font-size: .95rem;
}

.facts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fact-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .88rem;
}

.fact-item:not(:first-child) {
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
}

.fact-label {
    color: var(--gray-500);
}

.fact-value {
    font-weight: 600;
}

.fact-value.highlight {
    color: var(--crimson);
}

/*==============================
    CORE VALUES
==============================*/

.values-section{
    background:#fafafa;
}

.values-timeline{

    position:relative;
    max-width:1100px;
    margin:70px auto 0;

}

.values-timeline::before{

    content:'';
    position:absolute;

    top:0;
    bottom:0;
    left:50%;

    width:4px;

    background:linear-gradient(
        to bottom,
        var(--crimson),
        var(--gold)
    );

    transform:translateX(-50%);
    border-radius:20px;

}

/* item */

.value-item{

    width:50%;
    position:relative;
    margin-bottom:60px;

}

.value-item.left{

    padding-right:70px;
    text-align:right;

}

.value-item.right{

    margin-left:50%;
    padding-left:70px;

}

/* dot */

.value-item::before{

    content:'';

    position:absolute;

    top:5px;

    width:18px;
    height:18px;

    background:var(--gold);

    border:4px solid var(--crimson);

    border-radius:50%;

    z-index:10;

}

.value-item.left::before{

    right:-11px;

}

.value-item.right::before{

    left:-11px;

}

/* content */

.value-content{

    background:white;

    padding:15px;

    border-radius:18px;

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

    transition:.35s;

}

.value-content:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.1);

}

.value-content h3{

    color:var(--crimson-deep);
    margin-bottom:1px;

}

.value-content p{

    line-height:1.8;
    color:var(--ink-light);

}

/*==============================
    MOBILE
==============================*/

@media(max-width:900px){

.values-timeline::before{

    left:20px;

}

.value-item{

    width:100%;
    padding-left:60px !important;
    padding-right:0 !important;

    margin-left:0;
    text-align:left;

}

.value-item::before{

    left:11px !important;
    right:auto;

}

}

/*==========================
    KARYAKARTAS
==========================*/

.karyakarta-section{
    background:var(--gray-50);
}

.karyakarta-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;

}

.karyakarta-card{

    background:#fff;
    border-radius:20px;
    padding:40px 35px;
    text-align:center;

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

    border-top:5px solid var(--crimson);

    transition:.35s ease;

}

.karyakarta-card:hover{

    transform:translateY(-10px);

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

}

.karyakarta-card h3{

    margin-bottom:10px;

    color:var(--crimson-deep);

}

.karyakarta-subtitle{

    display:inline-block;

    background:rgba(165,28,48,.08);

    color:var(--crimson);

    font-size:.85rem;

    font-weight:600;

    padding:7px 16px;

    border-radius:50px;

    margin-bottom:22px;

}

.karyakarta-card p{

    color:var(--ink-light);

    line-height:1.8;

    font-size:.96rem;

}

@media(max-width:992px){

.karyakarta-grid{

    grid-template-columns:1fr;

}

.karyakarta-card{

    padding:35px 30px;

}

}

/* ==========================
   Responsive
========================== */

@media (max-width: 991px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {

    .about-title {
        font-size: 1.7rem;
    }

    .about-logo {
        font-size: 3rem;
    }

    .fact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 576px) {

    .about-section {
        padding: 60px 0;
    }

    .about-info-card,
    .quick-facts {
        padding: 20px;
    }

    .about-description {
        font-size: 1rem;
    }

    .about-logo {
        font-size: 2.5rem;
    }
}