/*==========================================================
Section : About
Version : 2.0
Author  : Erwin Echon
==========================================================*/
.mbi-about {
    padding: 120px 0;
    background: var(--mbi-background);
}

.mbi-about-overview {
    margin-top: 70px;
}

.mbi-about-block {
    margin-top: 100px;
}

/*==========================================================
ABOUT SUBSECTION HEADER
==========================================================*/

.mbi-about-block{

    margin-top:7rem;

}

.mbi-subsection-header{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;

}

.mbi-subsection-header h3{

    margin:1rem 0 1.25rem;

    font-size:clamp(2rem,3vw,2.8rem);

    font-weight:800;

    line-height:1.2;

    color:var(--mbi-primary);

}

.mbi-subsection-header h3 span{

    display:block;

    color:var(--mbi-secondary);

}

.mbi-subsection-header p{

    margin:0;

    color:var(--mbi-body);

    line-height:1.8;

}

/*==========================================================
COMPANY STORY
==========================================================*/

.mbi-about-story{

    margin-top:5rem;

}

.mbi-about-story-image{

    position:relative;

    overflow:hidden;

    margin:0;

    border-radius:var(--mbi-radius-xl);

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

}

.mbi-about-story-image img{

    display:block;

    width:100%;

    transition:transform .45s ease;

}

.mbi-about-story-image:hover img{

    transform:scale(1.03);

}

/*----------------------------------------------------------
Content
----------------------------------------------------------*/

.mbi-about-story-content h3{

    margin:1.5rem 0;

    font-size:clamp(2rem,3vw,2.8rem);

    font-weight:800;

    line-height:1.2;

    color:var(--mbi-primary);

}

.mbi-about-story-content h3 span{

    display:block;

    color:var(--mbi-secondary);

}

.mbi-about-story-content p{

    margin-bottom:1.5rem;

    color:var(--mbi-body);

    line-height:1.9;

}

/*----------------------------------------------------------
Highlights
----------------------------------------------------------*/

.mbi-about-highlights{

    margin-top:2.5rem;

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.mbi-about-highlight{

    display:flex;

    align-items:flex-start;

    gap:1.25rem;

}

.mbi-about-highlight .mbi-icon-box{

    flex-shrink:0;

}

.mbi-about-highlight h4{

    margin-bottom:.35rem;

    font-size:1.1rem;

    font-weight:700;

    color:var(--mbi-primary);

}

.mbi-about-highlight p{

    margin:0;

    color:var(--mbi-body);

    line-height:1.7;

}

/*==========================================================
OUR PURPOSE
==========================================================*/

.mbi-about-block{

    margin-top:7rem;

}

.mbi-subsection-header{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;

}

.mbi-subsection-header h3{

    margin:1rem 0 1.25rem;

    font-size:clamp(2rem,3vw,2.8rem);

    font-weight:800;

    line-height:1.2;

    color:var(--mbi-primary);

}

.mbi-subsection-header h3 span{

    display:block;

    color:var(--mbi-secondary);

}

.mbi-subsection-header p{

    margin:0;

    color:var(--mbi-body);

    line-height:1.8;

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

.mbi-value-card{

    height:100%;

    padding:3rem;

    text-align:center;

}

.mbi-value-card .mbi-icon-box{

    margin:0 auto 2rem;

}

.mbi-value-card h3{

    margin-bottom:1.25rem;

    font-size:1.5rem;

    font-weight:700;

    color:var(--mbi-primary);

}

.mbi-value-card p{

    margin:0;

    color:var(--mbi-body);

    line-height:1.8;

}

/*==========================================================
LEADERSHIP TEAM
==========================================================*/

.mbi-team-card{

    height:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(0,45,172,.08);

    border-radius:var(--mbi-radius-xl);

    box-shadow:var(--mbi-shadow-sm);

    transition:var(--mbi-transition);

}

.mbi-team-card:hover{

    transform:translateY(-8px);

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

}

.mbi-team-photo{

    margin:0;

    overflow:hidden;

    aspect-ratio:4/5;

    background:
        linear-gradient(
            180deg,
            #f7fbff,
            #eef7f6);

}

.mbi-team-photo img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 15%;

    transition:transform .45s ease;

}

.mbi-team-card:hover .mbi-team-photo img{

    transform:scale(1.04);

}

/*==========================================================
CONTENT
==========================================================*/

.mbi-team-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:2rem;

    text-align:center;

}

.mbi-team-content h4{

    margin-bottom:.5rem;

    font-size:1.45rem;

    font-weight:700;

    color:var(--mbi-primary);

}

.mbi-team-title{

    display:block;

    margin-bottom:.35rem;

    font-weight:600;

    color:var(--mbi-secondary);

    line-height:1.5;

}

.mbi-team-role{

    display:block;

    margin-bottom:1.5rem;

    color:var(--mbi-body);

    font-style:italic;

}

.mbi-team-content p{

    flex-grow:1;

    margin-bottom:2rem;

    color:var(--mbi-body);

    line-height:1.8;

}

/*==========================================================
SOCIAL
==========================================================*/

.mbi-team-social{

    width:50px;

    height:50px;

    margin:0 auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,45,172,.08);

    color:var(--mbi-primary);

    transition:var(--mbi-transition);

}

.mbi-team-social:hover{

    background:var(--mbi-primary);

    color:#fff;

    transform:translateY(-2px);

}