/*==================================================
ABOUT PAGE
SECTION 7 - THE TEAM BEHIND THE IMPACT
Executive Blue Premium Theme

File : about-team.css
Part 1 - Layout Foundation
==================================================*/



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

.team-section{

    position:relative;

    padding:50px 0;

    background:#f8fbff;

    overflow:hidden;

}


.team-section .container{

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:0 auto;

    padding:0 30px;

}

/* Space between Leadership and Core Team */

.core-team{

    margin-top:50px;

}

.core-team .section-heading{

    margin-bottom:70px;

}

/*==================================================
BACKGROUND EFFECTS
==================================================*/

.team-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-320px;

    right:-320px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(14,73,124,.05),

    transparent 72%);

}


.team-section::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    bottom:-220px;

    left:-220px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(219,46,40,.05),

    transparent 72%);

}



/*==================================================
HEADER
==================================================*/

.team-header{

    max-width:980px;

    margin:0 auto 52px;

    text-align:center;

}


.team-header .section-label{

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-bottom:24px;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.85rem;

    font-weight:700;

    color:var(--primary-blue);

}


.team-header .section-label::before,
.team-header .section-label::after{

    content:"";

    width:70px;

    height:2px;

    background:var(--primary-blue);

    opacity:.30;

}


.team-header h2{

    margin:0;

    font-size:3.3rem;

    line-height:1.15;

    color:var(--primary-blue);

}


.team-header p{

    max-width:900px;

    margin:18px auto 0;

    font-size:1.08rem;

    line-height:1.7;

    color:#5d6d82;

}



/*==================================================
CATEGORY
==================================================*/

.team-category{

    margin-top:72px;

}


.team-category:first-of-type{

    margin-top:0;

}


/* Increase spacing between Leadership, Core Team and Extended Team */

.team-category + .team-category{

    margin-top:80px;

}


/*==================================================
CATEGORY DIVIDER
==================================================*/

.category-divider{

    display:flex;

    align-items:center;

    gap:24px;

    margin-bottom:24px;

}


.category-icon{

    width:72px;

    height:72px;

    flex-shrink:0;

}


.category-title{

    flex:1;

}


.category-label{

    display:block;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.80rem;

    font-weight:700;

    color:var(--primary-blue);

}


.category-title h3{

    margin:0;

    font-size:2rem;

    color:var(--primary-blue);

}



/*==================================================
CATEGORY INTRO
==================================================*/

.category-intro{

    max-width:950px;

    margin:0 0 45px;

    font-size:1.05rem;

    line-height:1.9;

    color:#5d6d82;

}



/*==================================================
LEADERSHIP GRID
==================================================*/

.leadership-grid{

    display:grid;

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

    gap:24px;

}



/*==================================================
CORE GRID
==================================================*/

.core-team-grid{

    display:grid;

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

    gap:42px;

    align-items:start;

}

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

.leader-card{

    background:#ffffff;

    border:1px solid #dfe8f4;

    border-radius:24px;

    padding:24px;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 18px 45px rgba(14,73,124,.08);

}

.leader-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary-blue),
        #1f73c9);

}


/* PHOTO */

.leader-photo{

    position:relative;

    width:190px;

    flex-shrink:0;

}

.leader-glow{

    position:absolute;

    inset:-12px;

    border-radius:24px;

    background:
    radial-gradient(circle,
    rgba(30,115,190,.18),
    transparent 72%);

    z-index:0;

}

.leader-photo img{

    position:relative;

    z-index:2;

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

    border-radius:18px;

    border:4px solid #ffffff;

    box-shadow:
        0 14px 34px rgba(14,73,124,.16);

}


/* CONTENT */

.leader-content{

    flex:1;

    min-width:0;

}

.leader-role{

    display:inline-block;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:40px;

    background:#edf5fc;

    color:var(--primary-blue);

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.leader-content h4{

    margin:0 0 18px;

    font-size:2rem;

    color:var(--primary-blue);

}

.leader-content p{

    margin:0 0 18px;

    line-height:1.9;

    color:#5d6d82;

}


/* FOCUS */

.leader-focus{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:22px;

}

.leader-focus span{

    padding:10px 16px;

    border-radius:30px;

    background:#f8fbff;

    border:1px solid #dce8f5;

    color:var(--primary-blue);

    font-size:.84rem;

    font-weight:600;

}

.leader-top{

    display:grid;

    grid-template-columns:190px 1fr;

    gap:20px;

    align-items:start;

}


.leader-bottom{

    margin-top:18px;

    padding-top:18px;

    border-top:1px solid #edf4fa;

}


.leader-bottom p{

    margin-bottom:14px;

}


/* RESPONSIVE */

@media(max-width:992px){

    .leader-card{

        flex-direction:column;

    }

    .leader-photo{

        width:220px;

        margin:0 auto;

    }

    .leader-content{

        text-align:center;

    }

    .leader-focus{

        justify-content:center;

    }

}

/*==================================================
EXTENDED TEAM
==================================================*/

.extended-team{

    display:grid;

    grid-template-columns:

        430px
        minmax(0,1fr);

    gap:28px;

    align-items:start;

}



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

.extended-team-content{

    min-width:0;

}



/*==================================================
MEMBERS GRID
==================================================*/

.members-grid{

    display:grid;

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

    gap:18px;

}



/*==================================================
CLOSING PANEL
==================================================*/

.team-closing{

    margin-top:52px;

}



/*==================================================
TABLET
==================================================*/

@media(max-width:1200px){

    .extended-team{

        grid-template-columns:

            360px
            minmax(0,1fr);

        gap:24px;

    }

    .members-grid{

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

    }

}



/*==================================================
SMALL TABLET
==================================================*/

@media(max-width:992px){

    .leadership-grid{

        grid-template-columns:1fr;

    }

    .core-team-grid{

        grid-template-columns:1fr;

    }

    .extended-team{

        grid-template-columns:1fr;

    }

    .members-grid{

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

    }

}



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

@media(max-width:768px){

    .team-section{

        padding:64px 0;

    }

    .team-header{

        margin-bottom:34px;

    }

    .team-header h2{

        font-size:2.4rem;

    }

    .team-header p{

        font-size:1rem;

        line-height:1.8;

    }

    .team-header .section-label::before,
    .team-header .section-label::after{

        width:40px;

    }

    .category-divider{

        gap:18px;

    }

    .category-title h3{

        font-size:1.6rem;

    }

    .category-icon{

        width:60px;

        height:60px;

    }

    .members-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
ENE CORE TEAM
Executive Blue Premium
Conflict-Free Version
==================================================*/


/*==================================
GRID
==================================*/

.ene-core-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    align-items:start;
    margin-top:24px;

}


/*==================================
CARD
==================================*/

.ene-core-card{

    background:#ffffff;

    border:1px solid #dde8f4;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 16px 45px rgba(14,73,124,.08);

    display:flex;

    flex-direction:column;

    height:100%;

    position:relative;

}


.ene-core-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        var(--primary-blue),
        #2a78d1
    );

}


/*==================================
TOP
==================================*/

.ene-core-top{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:20px;

    align-items:start;

    padding:24px;

}


/*==================================
PHOTO
==================================*/

.ene-core-photo{

    width:180px;

}


.ene-core-photo img{

    width:100%;

    display:block;

    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:18px;

    border:4px solid #fff;

    box-shadow:
    0 12px 28px rgba(14,73,124,.18);

}


/*==================================
INTRO
==================================*/

.ene-core-intro{

    display:flex;

    flex-direction:column;

}


.ene-member-role{

    display:inline-flex;

    width:max-content;

    padding:8px 18px;

    margin-bottom:18px;

    border-radius:40px;

    background:#edf5fc;

    color:var(--primary-blue);

    font-size:.76rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.ene-core-intro h3{

    margin:0 0 18px;

    color:var(--primary-blue);

    font-size:2rem;

    line-height:1.2;

}


.ene-core-intro p{

    margin:0;

    color:#5d6d82;

    font-size:1rem;

    line-height:1.9;

}


/*==================================
BODY
==================================*/

.ene-core-body{

    padding:22px 24px 24px;

    border-top:1px solid #edf4fa;

}


.ene-core-body p{

    margin:0 0 14px;

    color:#5d6d82;

    font-size:1rem;

    line-height:1.7;

    text-align:justify;

}


.ene-core-body p:last-of-type{

    margin-bottom:18px;

}


/*==================================
FOCUS TITLE
==================================*/

.ene-focus-heading{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    color:var(--primary-blue);

    font-size:.90rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.ene-focus-heading::after{

    content:"";

    flex:1;

    height:2px;

    background:#dbe8f4;

}


/*==================================
FOCUS GRID
==================================*/

.ene-focus-grid{

    display:grid;

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

    gap:14px;

}


.ene-focus-grid span{

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:50px;

    padding:12px;

    border-radius:14px;

    background:#f8fbff;

    border:1px solid #dce8f5;

    color:var(--primary-blue);

    font-size:.86rem;

    font-weight:600;

    line-height:1.4;

}


/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

    .ene-core-grid{

        gap:30px;

    }

}


@media(max-width:992px){

    .ene-core-grid{

        grid-template-columns:1fr;

    }

    .ene-focus-grid{

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

    }

}


@media(max-width:768px){

    .ene-core-top{

        grid-template-columns:1fr;

        text-align:center;

        justify-items:center;

    }

    .ene-core-photo{

        width:180px;

    }

    .ene-member-role{

        margin:0 auto 18px;

    }

    .ene-core-intro h3{

        font-size:1.8rem;

    }

    .ene-core-body{

        padding:28px;

    }

    .ene-core-body p{

        text-align:left;

    }

    .ene-focus-heading{

        justify-content:center;

    }

    .ene-focus-heading::after{

        display:none;

    }

    .ene-focus-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
ABOUT PAGE
SECTION 7
Part 3
Extended Team
==================================================*/


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

.extended-team-content p{

    margin:0 0 14px;

    color:#5d6d82;

    line-height:1.7;

    font-size:1.05rem;

}


.extended-team-content p:last-of-type{

    margin-bottom:18px;

}



/*==================================================
CAPABILITY CHIPS
==================================================*/

.team-capabilities{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.team-capabilities span{

    padding:11px 18px;

    border-radius:40px;

    background:#edf5fc;

    border:1px solid #dce8f5;

    color:var(--primary-blue);

    font-weight:600;

    font-size:.90rem;

    transition:.35s;

}


.team-capabilities span:hover{

    background:var(--primary-blue);

    color:#ffffff;

    transform:translateY(-3px);

}



/*==================================================
MEMBER CARD
==================================================*/

.member-card{

    position:relative;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(226,235,245,.9);

    border-radius:22px;

    padding:20px 18px;

    text-align:center;

    overflow:hidden;

    transition:.40s;

}


.member-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 24px 55px rgba(15,42,85,.14);

}



/*==================================================
TOP ACCENT
==================================================*/

.member-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        #0E497C,

        #1E73BE);

}



/*==================================================
PHOTO
==================================================*/

.member-photo{

    position:relative;

    width:150px;

    margin:0 auto 14px;

}



/*==================================================
GLOW
==================================================*/

.member-glow{

    position:absolute;

    width:160px;

    height:160px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(14,73,124,.18),

    rgba(14,73,124,.08),

    transparent 72%);

    transition:.40s;

    z-index:1;

}


.member-card:hover .member-glow{

    transform:translate(-50%,-50%) scale(1.15);

}



/*==================================================
IMAGE
==================================================*/

.member-photo img{

    position:relative;

    z-index:2;

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    object-position:center top;

    display:block;

    border-radius:18px;

    border:4px solid #ffffff;

    box-shadow:

        0 14px 35px rgba(15,42,85,.16);

    transition:.40s;

}


.member-card:hover img{

    transform:scale(1.06);

}



/*==================================================
NAME
==================================================*/

.member-card h4{

    margin:0 0 6px;

    font-size:1.15rem;

    color:var(--primary-blue);

    line-height:1.35;

}



/*==================================================
DESIGNATION
==================================================*/

.member-card span{

    display:block;

    color:#5d6d82;

    line-height:1.5;

    font-size:.94rem;

}



/*==================================================
BACKGROUND GLOW
==================================================*/

.member-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    right:-90px;

    bottom:-90px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(14,73,124,.05),

    transparent 72%);

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .member-photo{

        width:135px;

    }

}


@media(max-width:992px){

    .extended-team-content{

        text-align:center;

    }

    .team-capabilities{

        justify-content:center;

    }

}


@media(max-width:768px){

    .member-card{

        padding:18px 16px;

    }

    .member-photo{

        width:140px;

    }

    .member-card h4{

        font-size:1.05rem;

    }

}

/*==================================================
ABOUT PAGE
SECTION 7
Part 4
Closing Banner & Final Polish
==================================================*/


/*==================================================
CLOSING PANEL
==================================================*/

.team-closing{

    position:relative;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:28px;

    align-items:center;

    margin-top:52px;

    padding:34px 38px;

    background:linear-gradient(
        135deg,
        #0E497C,
        #195B95);

    border-radius:30px;

    overflow:hidden;

    box-shadow:

        0 30px 80px rgba(15,42,85,.22);

}



/*==================================================
BACKGROUND EFFECT
==================================================*/

.team-closing::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.10),

    transparent 72%);

}


.team-closing::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.08),

    transparent 72%);

}



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

.team-closing-content{

    position:relative;

    z-index:2;

}


.closing-label{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:40px;

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

    color:#ffffff;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.team-closing-content h3{

    margin:0 0 12px;

    color:#ffffff;

    font-size:2rem;

    line-height:1.2;

}


.team-closing-content p{

    margin:0;

    max-width:760px;

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

    line-height:1.9;

    font-size:1.05rem;

}



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

.team-values{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:18px;

}


.value-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    border-radius:18px;

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

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(8px);

    transition:.35s;

}


.value-item:hover{

    transform:translateY(-4px);

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

}


.value-icon{

    width:48px;

    height:48px;

    border-radius:14px;

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

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}


.value-item span{

    color:#ffffff;

    font-weight:600;

}



/*==================================================
GLOBAL CARD HOVER
==================================================*/

.leader-card,
.core-card,
.member-card{

    cursor:pointer;

}


.leader-card:hover,
.core-card:hover,
.member-card:hover{

    border-color:#d2e2f4;

}



/*==================================================
IMAGE SHADOW ENHANCEMENT
==================================================*/

.leader-photo img,
.core-photo img,
.member-photo img{

    transition:

        transform .45s,

        box-shadow .45s;

}


.leader-card:hover img,
.core-card:hover img,
.member-card:hover img{

    box-shadow:

        0 28px 60px rgba(15,42,85,.22);

}



/*==================================================
FOCUS CHIPS
==================================================*/

.leader-focus span,
.core-focus span,
.team-capabilities span{

    user-select:none;

}



/*==================================================
SMOOTH TRANSITIONS
==================================================*/

.leader-card,
.core-card,
.member-card,
.value-item,
.team-capabilities span,
.leader-focus span,
.core-focus span{

    transition:all .35s ease;

}



/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .team-closing{

        grid-template-columns:1fr;

        gap:40px;

    }

}


@media(max-width:768px){

    .team-closing{

        padding:24px 20px;

    }

    .team-closing-content h3{

        font-size:2rem;

    }

    .team-values{

        grid-template-columns:1fr;

    }

}