/*==================================================
About Section
==================================================*/

.bilin-about{

    padding:120px 0;

    background:#ffffff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    display:flex;

    justify-content:center;

}

.about-card{

    width:380px;

    background:#ffffff;

    border-radius:30px;

    padding:45px;

    text-align:center;

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

    transition:.35s;

}

.about-card:hover{

    transform:translateY(-8px);

}

.about-icon{

    font-size:60px;

    margin-bottom:20px;

}

.about-card h3{

    margin-bottom:18px;

    font-size:30px;

    color:#0F8FB5;

}

.about-card p{

    line-height:2;

    color:#666;

}

.section-badge{

    display:inline-block;

    background:#E6F7FC;

    color:#0F8FB5;

    padding:10px 22px;

    border-radius:30px;

    margin-bottom:25px;

    font-weight:700;

}

.about-content h2{

    font-size:46px;

    line-height:1.6;

    margin-bottom:25px;

}

.about-content>p{

    line-height:2.2;

    color:#555;

    margin-bottom:40px;

}

.about-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.feature{

    display:flex;

    align-items:center;

    gap:12px;

    background:#F8FBFC;

    border-radius:15px;

    padding:18px;

}

.feature span{

    color:#0F8FB5;

    font-size:20px;

    font-weight:bold;

}

.feature p{

    margin:0;

    font-weight:600;

}

@media(max-width:991px){

    .about-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .about-features{

        grid-template-columns:1fr;

    }

}


/*==================================================
About Page
==================================================*/

.bilin-about-page{

    background:#ffffff;

    color:#16324f;

    overflow:hidden;

}


/*--------------------------------------------------
Shared
--------------------------------------------------*/

.bilin-about-page .container{

    width:min(1180px, calc(100% - 40px));

    margin:0 auto;

}

.about-page-section{

    padding:100px 0;

}

.about-eyebrow{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:30px;

    background:#FFF1E8;

    color:#F05A28;

    font-size:14px;

    font-weight:800;

    line-height:1.8;

}

.about-section-heading{

    max-width:820px;

    margin:0 auto 60px;

    text-align:center;

}

.about-section-heading h2{

    margin:0 0 20px;

    color:#16324f;

    font-size:42px;

    line-height:1.6;

}

.about-section-heading p{

    margin:0;

    color:#5f6872;

    font-size:17px;

    line-height:2.2;

    text-align:justify;

}

.about-content-narrow{

    max-width:850px;

    margin:0 auto;

}

.about-content-narrow h2{

    margin:0 0 25px;

    color:#16324f;

    font-size:42px;

    line-height:1.6;

}

.about-content-narrow p{

    margin:0 0 22px;

    color:#555f68;

    font-size:17px;

    line-height:2.25;

    text-align:justify;

}

.about-content-narrow p:last-child{

    margin-bottom:0;

}

.about-content-narrow strong{

    color:#16324f;

}


/*--------------------------------------------------
Hero
--------------------------------------------------*/

.about-page-hero{

    position:relative;

    padding:120px 0 115px;

    background:
        linear-gradient(
            135deg,
            #fff8f1 0%,
            #ffffff 55%,
            #f7fcfd 100%
        );

    border-bottom:1px solid #f0e5dc;

}

.about-page-hero::before{

    content:"";

    position:absolute;

    top:-120px;

    left:-120px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:rgba(240,90,40,.07);

    pointer-events:none;

}

.about-page-hero::after{

    content:"";

    position:absolute;

    right:-140px;

    bottom:-160px;

    width:400px;

    height:400px;

    border-radius:50%;

    background:rgba(15,143,181,.045);

    pointer-events:none;

}

.about-page-hero-content{

    position:relative;

    z-index:1;

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.about-page-hero h1{

    margin:0 0 25px;

    color:#16324f;

    font-size:52px;

    font-weight:800;

    line-height:1.65;

}

.about-page-hero p{

    max-width:820px;

    margin:0 auto;

    color:#59636c;

    font-size:18px;

    line-height:2.3;

    text-align:justify;

}


/*--------------------------------------------------
Introduction
--------------------------------------------------*/

.about-introduction{

    background:#ffffff;

}

.about-introduction .about-content-narrow{

    text-align:right;

}


/*--------------------------------------------------
History Timeline
--------------------------------------------------*/

.about-history{

    background:#FFF8F1;

}

.about-timeline{

    position:relative;

    max-width:950px;

    margin:0 auto;

    padding:10px 0;

}

.about-timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    right:120px;

    width:2px;

    background:#F1D8C8;

}

.about-timeline-item{

    position:relative;

    display:grid;

    grid-template-columns:180px 1fr;

    gap:45px;

    align-items:start;

    margin-bottom:55px;

}

.about-timeline-item:last-child{

    margin-bottom:0;

}

.about-timeline-year{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:62px;

    padding:10px 18px;

    background:#ffffff;

    border:2px solid #F05A28;

    border-radius:16px;

    color:#F05A28;

    font-size:23px;

    font-weight:800;

    box-shadow:0 8px 25px rgba(240,90,40,.09);

}

.about-timeline-content{

    padding:4px 0 0;

}

.about-timeline-content h3{

    margin:0 0 15px;

    color:#16324f;

    font-size:26px;

    line-height:1.6;

}

.about-timeline-content p{

    margin:0 0 16px;

    color:#59636c;

    font-size:16px;

    line-height:2.2;

    text-align:justify;

}

.about-timeline-content p:last-child{

    margin-bottom:0;

}

.about-timeline-content strong{

    color:#16324f;

}


/*--------------------------------------------------
Culture
--------------------------------------------------*/

.about-culture{

    background:#ffffff;

}

.about-two-column{

    display:grid;

    grid-template-columns:minmax(0, 1.35fr) minmax(320px, .65fr);

    gap:80px;

    align-items:center;

}

.about-two-column-content h2{

    margin:0 0 25px;

    color:#16324f;

    font-size:42px;

    line-height:1.6;

}

.about-two-column-content p{

    margin:0 0 20px;

    color:#59636c;

    font-size:17px;

    line-height:2.25;

    text-align:justify;

}

.about-two-column-content p:last-child{

    margin-bottom:0;

}

.about-two-column-content strong{

    color:#16324f;

}

.about-culture-card{

    padding:40px 35px;

    background:#FFF8F1;

    border:1px solid #F3DED0;

    border-radius:28px;

    box-shadow:0 18px 45px rgba(22,50,79,.07);

}

.about-culture-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:90px;

    height:90px;

    margin:0 auto 30px;

    background:#F05A28;

    border-radius:24px;

    color:#ffffff;

    font-size:22px;

    font-weight:800;

}

.about-culture-items{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;

}

.about-culture-items span{

    display:block;

    padding:13px 10px;

    background:#ffffff;

    border:1px solid #F3E7DE;

    border-radius:12px;

    color:#16324f;

    font-size:14px;

    font-weight:700;

    line-height:1.8;

    text-align:center;

}


/*--------------------------------------------------
Activities
--------------------------------------------------*/

.about-activities{

    background:#F8F4EF;

}

.about-activity-grid{

    display:grid;

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

    gap:24px;

}

.about-activity-card{

    position:relative;

    padding:35px 30px 32px;

    background:#FFF8F1;

    border:1px solid #F0DCCE;

    border-radius:22px;

    box-shadow:0 12px 35px rgba(22,50,79,.055);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.about-activity-card:hover{

    transform:translateY(-6px);

    border-color:#F05A28;

    box-shadow:0 18px 45px rgba(240,90,40,.12);

}

.about-activity-number{

    margin-bottom:20px;

    color:#F05A28;

    font-size:15px;

    font-weight:800;

    letter-spacing:.04em;

}

.about-activity-card h3{

    margin:0 0 14px;

    color:#16324f;

    font-size:23px;

    line-height:1.7;

}

.about-activity-card p{

    margin:0;

    color:#626b73;

    font-size:15px;

    line-height:2.15;

    text-align:justify;

}


/*--------------------------------------------------
Mission
--------------------------------------------------*/

.about-mission{

    background:#ffffff;

}

.about-mission-box{

    max-width:920px;

    margin:0 auto;

    padding:65px 75px;

    background:
        linear-gradient(
            135deg,
            #FFF8F1 0%,
            #ffffff 100%
        );

    border:1px solid #F1DED2;

    border-radius:30px;

    text-align:center;

    box-shadow:0 18px 50px rgba(22,50,79,.06);

}

.about-mission-box h2{

    margin:0 0 25px;

    color:#16324f;

    font-size:40px;

    line-height:1.6;

}

.about-mission-box p{

    margin:0 auto 20px;

    max-width:780px;

    color:#59636c;

    font-size:17px;

    line-height:2.3;

    text-align:justify;

}

.about-mission-box p:last-child{

    margin-bottom:0;

}

.about-mission-box strong{

    color:#16324f;

}


/*--------------------------------------------------
People
--------------------------------------------------*/

.about-people{

    background:#F8F4EF;

}

.about-people-grid{

    display:grid;

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

    gap:30px;

    max-width:1000px;

    margin:0 auto;

}

.about-person-card{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:28px;

    align-items:center;

    padding:30px;

    background:#FFF8F1;

    border:1px solid #F0DCCE;

    border-radius:24px;

    box-shadow:0 12px 35px rgba(22,50,79,.055);

}

.about-person-photo{

    width:180px;

    height:220px;

    overflow:hidden;

    border-radius:20px;

}

.about-person-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            145deg,
            #FFF1E8,
            #FFF8F1
        );

    border:1px solid #F1D8C8;

}

.about-person-placeholder span{

    color:#F05A28;

    font-size:24px;

    font-weight:800;

}

.about-person-role{

    display:block;

    margin-bottom:10px;

    color:#F05A28;

    font-size:13px;

    font-weight:800;

    line-height:1.8;

}

.about-person-content h3{

    margin:0 0 15px;

    color:#16324f;

    font-size:24px;

    line-height:1.6;

}

.about-person-content p{

    margin:0;

    color:#626b73;

    font-size:15px;

    line-height:2.15;

    text-align:justify;

}

.about-person-content strong{

    color:#16324f;

}


/*--------------------------------------------------
Future
--------------------------------------------------*/

.about-future{

    background:#ffffff;

}


/*--------------------------------------------------
Final CTA
--------------------------------------------------*/

.about-final-cta{

    padding:95px 0;

    background:
        linear-gradient(
            135deg,
            #16324f 0%,
            #124966 100%
        );

}

.about-final-cta-content{

    max-width:800px;

    margin:0 auto;

    text-align:center;

}

.about-final-cta .about-eyebrow{

    background:rgba(240,90,40,.18);

    color:#FFB08F;

}

.about-final-cta h2{

    margin:0 0 20px;

    color:#ffffff;

    font-size:40px;

    line-height:1.6;

}

.about-final-cta p{

    max-width:700px;

    margin:0 auto 30px;

    color:rgba(255,255,255,.82);

    font-size:17px;

    line-height:2.2;

    text-align:justify;

}

.about-final-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    padding:14px 28px;

    background:#F05A28;

    border-radius:14px;

    color:#ffffff;

    font-size:16px;

    font-weight:800;

    line-height:1.8;

    text-decoration:none;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.about-final-cta-button:hover{

    background:#E45535;

    color:#ffffff;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(240,90,40,.25);

}


/*==================================================
About Page Responsive
==================================================*/

@media(max-width:1100px){

    .about-page-hero h1{

        font-size:46px;

    }

    .about-two-column{

        gap:50px;

    }

    .about-activity-grid{

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

    }

    .about-person-card{

        grid-template-columns:150px 1fr;

    }

    .about-person-photo{

        width:150px;

        height:190px;

    }

}


@media(max-width:991px){

    .about-page-section{

        padding:80px 0;

    }

    .about-page-hero{

        padding:95px 0;

    }

    .about-page-hero h1{

        font-size:40px;

    }

    .about-page-hero p{

        font-size:17px;

    }

    .about-section-heading h2,
    .about-content-narrow h2,
    .about-two-column-content h2{

        font-size:36px;

    }

    .about-two-column{

        grid-template-columns:1fr;

    }

    .about-culture-card{

        max-width:600px;

        width:100%;

        margin:0 auto;

        box-sizing:border-box;

    }

    .about-timeline::before{

        right:90px;

    }

    .about-timeline-item{

        grid-template-columns:140px 1fr;

        gap:35px;

    }

    .about-people-grid{

        grid-template-columns:1fr;

        max-width:760px;

    }

    .about-mission-box{

        padding:50px 45px;

    }

}


@media(max-width:700px){

    .bilin-about-page .container{

        width:min(100% - 28px, 1180px);

    }

    .about-page-section{

        padding:65px 0;

    }

    .about-page-hero{

        padding:75px 0 80px;

    }

    .about-page-hero h1{

        font-size:32px;

        line-height:1.7;

    }

    .about-page-hero p{

        font-size:16px;

        line-height:2.15;

    }

    .about-eyebrow{

        font-size:13px;

    }

    .about-section-heading{

        margin-bottom:40px;

    }

    .about-section-heading h2,
    .about-content-narrow h2,
    .about-two-column-content h2{

        font-size:30px;

        line-height:1.7;

    }

    .about-content-narrow p,
    .about-two-column-content p{

        font-size:16px;

        line-height:2.15;

    }

    .about-timeline{

        padding-right:0;

    }

    .about-timeline::before{

        right:22px;

    }

    .about-timeline-item{

        display:block;

        padding-right:60px;

        margin-bottom:45px;

    }

    .about-timeline-year{

        display:inline-flex;

        min-height:auto;

        margin-bottom:18px;

        padding:7px 15px;

        border-radius:12px;

        font-size:18px;

    }

    .about-timeline-content h3{

        font-size:22px;

    }

    .about-timeline-content p{

        font-size:15px;

        line-height:2.15;

    }

    .about-culture-card{

        padding:30px 22px;

    }

    .about-culture-items{

        grid-template-columns:1fr;

    }

    .about-activity-grid{

        grid-template-columns:1fr;

    }

    .about-activity-card{

        padding:28px 24px;

    }

    .about-mission-box{

        padding:40px 25px;

        border-radius:22px;

    }

    .about-mission-box h2{

        font-size:30px;

    }

    .about-mission-box p{

        font-size:16px;

        line-height:2.15;

    }

    .about-person-card{

        grid-template-columns:1fr;

        gap:22px;

        padding:24px;

    }

    .about-person-photo{

        width:100%;

        height:260px;

    }

    .about-person-content h3{

        font-size:22px;

    }

    .about-final-cta{

        padding:70px 0;

    }

    .about-final-cta h2{

        font-size:30px;

    }

    .about-final-cta p{

        font-size:16px;

    }

}


@media(max-width:420px){

    .about-page-hero h1{

        font-size:28px;

    }

    .about-section-heading h2,
    .about-content-narrow h2,
    .about-two-column-content h2{

        font-size:27px;

    }

    .about-timeline::before{

        right:18px;

    }

    .about-timeline-item{

        padding-right:48px;

    }

    .about-timeline-year{

        font-size:16px;

    }

    .about-person-photo{

        height:230px;

    }

}