/* =========================================================
   SMCG TEAM PAGE
   PRIMARY COLOR: #0272e0
========================================================= */

.smcg-team-container{
    width:min(1200px, calc(100% - 40px));
    margin:0 auto;
}


/* =========================================================
   HERO
========================================================= */

.smcg-people-hero{
    position:relative;
    overflow:hidden;
    min-height:650px;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(2,114,224,.12),
            transparent 30%
        ),
        #f7fbff;

    border-bottom:1px solid #e4eef8;
}

.smcg-hero-grid{
    min-height:650px;

    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;
}

.smcg-hero-left{
    position:relative;
    z-index:3;
    padding:100px 0;
}

.smcg-mini-label{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:25px;

    color:#0272e0;

    font-size:11px;
    font-weight:800;
    letter-spacing:3px;
}

.smcg-mini-label span{
    width:38px;
    height:2px;
    background:#0272e0;
}

.smcg-hero-left h1{
    max-width:720px;

    margin:0;

    color:#102b44;

    font-size:clamp(48px,6vw,78px);
    line-height:1.03;

    font-weight:700;
    letter-spacing:-4px;
}

.smcg-hero-left h1 strong{
    color:#0272e0;
}

.smcg-hero-left p{
    max-width:620px;

    margin:28px 0 0;

    color:#63778a;

    font-size:17px;
    line-height:1.8;
}

.smcg-hero-bottom{
    display:flex;
    align-items:center;
    gap:15px;

    margin-top:42px;

    color:#50677b;

    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.smcg-scroll-line{
    width:55px;
    height:1px;
    background:#0272e0;
}


/* HERO RIGHT */

.smcg-hero-right{
    position:relative;
    height:100%;
    min-height:650px;
}

.smcg-hero-frame{
    position:absolute;

    width:440px;
    height:440px;

    top:50%;
    right:-20px;

    transform:translateY(-50%);

    border:1px solid rgba(2,114,224,.16);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(2,114,224,.10),
            rgba(255,255,255,.35) 50%,
            transparent 70%
        );
}

.smcg-hero-frame::before{
    content:"";

    position:absolute;

    inset:35px;

    border:1px dashed rgba(2,114,224,.22);

    border-radius:50%;
}

.smcg-hero-frame::after{
    content:"";

    position:absolute;

    width:190px;
    height:190px;

    top:125px;
    left:125px;

    border-radius:50%;

    background:#0272e0;

    opacity:.07;
}

.smcg-frame-number{
    position:absolute;

    top:80px;
    left:75px;

    color:#0272e0;

    font-size:76px;
    line-height:1;

    font-weight:800;

    opacity:.13;
}

.smcg-frame-text{
    position:absolute;

    right:60px;
    bottom:85px;

    color:#61778b;

    font-size:10px;
    line-height:1.6;

    letter-spacing:2px;
}

.smcg-frame-text b{
    color:#0272e0;
}

.smcg-frame-circle{
    position:absolute;

    width:130px;
    height:130px;

    top:155px;
    left:155px;

    border:2px solid #0272e0;

    border-radius:50%;
}

.smcg-frame-circle::before,
.smcg-frame-circle::after{
    content:"";

    position:absolute;

    background:#0272e0;
}

.smcg-frame-circle::before{
    width:2px;
    height:170px;

    left:63px;
    top:-22px;
}

.smcg-frame-circle::after{
    width:170px;
    height:2px;

    top:63px;
    left:-22px;
}

.smcg-frame-dot{
    position:absolute;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#0272e0;
}

.dot-one{
    top:44px;
    right:130px;
}

.dot-two{
    bottom:50px;
    left:90px;
}


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

.smcg-people-section{
    padding:25px 0;

    background:#fff;
}

.smcg-section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;

    margin-bottom:35px;
}

.smcg-label{
    display:block;

    margin-bottom:14px;

    color:#0272e0;

    font-size:10px;
    font-weight:800;

    letter-spacing:3px;
}

.smcg-section-heading h2{
    margin:0;

    color:#102b44;

    font-size:50px;
    line-height:1.1;

    letter-spacing:-2px;
}

.smcg-section-heading h2 span{
    color:#0272e0;
}

.smcg-section-heading > p{
    max-width:470px;

    margin:0;

    color:#687d8f;

    font-size:15px;
    line-height:1.8;
}


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

.smcg-people-grid{
    display:grid;

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

    gap:30px 25px;
}


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

.smcg-person-card{
    position:relative;

    display:grid;

    grid-template-columns:175px 1fr;

    min-height:340px;

    background:#fff;

    border:1px solid #e5edf5;

    box-shadow:
        0 15px 50px rgba(16,58,91,.06);

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

.smcg-person-card:hover{
    transform:translateY(-8px);

    border-color:#b9dafa;

    box-shadow:
        0 25px 70px rgba(2,114,224,.12);
}


/* NUMBER */

.smcg-card-number{
    position:absolute;

    top:17px;
    right:20px;

    color:#0272e0;

    font-size:11px;
    font-weight:800;

    opacity:.5;
}


/* =========================================================
   AVATAR
========================================================= */

.smcg-avatar-area{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    min-height:340px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #edf7ff,
            #ddecfa
        );
}

.smcg-avatar-ring{
    position:absolute;

    width:145px;
    height:145px;

    border-radius:50%;

    border:1px solid rgba(2,114,224,.25);

    box-shadow:
        0 0 0 15px rgba(2,114,224,.035),
        0 0 0 30px rgba(2,114,224,.025);
}


/* avatar base */

.smcg-avatar{
    position:relative;

    width:105px;
    height:125px;

    z-index:2;
}


/* HEAD */

.avatar-face{
    position:absolute;

    width:54px;
    height:64px;

    left:25px;
    top:15px;

    border-radius:
        48%
        48%
        45%
        45%;

    background:#d99b72;

    z-index:3;
}


/* NECK */

.avatar-neck{
    position:absolute;

    width:22px;
    height:25px;

    left:41px;
    top:70px;

    background:#c88660;

    z-index:2;
}


/* BODY */

.avatar-body{
    position:absolute;

    width:86px;
    height:65px;

    left:9px;
    top:78px;

    border-radius:45px 45px 10px 10px;

    background:#0272e0;

    z-index:1;
}


/* FEMALE BODY */

.smcg-avatar-female .avatar-body{
    background:#0272e0;

    border-radius:
        45px 45px
        12px 12px;
}


/* HAIR */

.avatar-hair{
    position:absolute;

    width:65px;
    height:72px;

    left:19px;
    top:6px;

    border-radius:
        48%
        48%
        38%
        38%;

    background:#3b2c28;

    z-index:4;
}

.smcg-avatar-female .avatar-hair{
    width:72px;
    height:80px;

    left:16px;
    top:2px;

    border-radius:
        50%
        50%
        42%
        42%;
}

.avatar-dark-hair .avatar-hair{
    background:#1e2025;
}


/* FEMALE COLLAR */

.avatar-collar{
    position:absolute;

    width:42px;
    height:25px;

    left:31px;
    top:82px;

    background:#fff;

    clip-path:
        polygon(
            0 0,
            50% 100%,
            100% 0
        );

    z-index:3;
}


/* MALE SHIRT */

.avatar-shirt{
    position:absolute;

    width:82px;
    height:63px;

    left:12px;
    top:79px;

    border-radius:40px 40px 8px 8px;

    background:#153d61;

    z-index:1;
}


/* TIE */

.avatar-tie{
    position:absolute;

    width:9px;
    height:49px;

    left:48px;
    top:83px;

    background:#0272e0;

    clip-path:
        polygon(
            0 0,
            100% 0,
            75% 100%,
            50% 85%,
            25% 100%
        );

    z-index:4;
}


/* BEARD */

.avatar-beard{
    position:absolute;

    width:42px;
    height:28px;

    left:31px;
    top:53px;

    border-radius:
        0 0 50% 50%;

    background:#47312a;

    z-index:5;
}

.smcg-avatar-male.avatar-beard .avatar-hair{
    background:#282323;
}


/* GLASSES */

.smcg-avatar .avatar-glasses{
    position:absolute;

    width:65px;
    height:22px;

    left:20px;
    top:35px;

    border-top:3px solid #25394b;

    z-index:8;
}

.avatar-glasses::before,
.avatar-glasses::after{
    content:"";

    position:absolute;

    width:20px;
    height:14px;

    top:-7px;

    border:2px solid #25394b;

    border-radius:5px;
}

.avatar-glasses::before{
    left:0;
}

.avatar-glasses::after{
    right:0;
}


/* INITIAL */

.smcg-avatar-initial{
    position:absolute;

    right:15px;
    bottom:20px;

    display:flex;

    width:38px;
    height:38px;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#fff;

    background:#0272e0;

    border:3px solid #fff;

    font-size:9px;
    font-weight:800;

    z-index:10;
}


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

.smcg-card-content{
    display:flex;

    flex-direction:column;

    padding:42px 28px 25px;
}

.smcg-person-role{
    display:block;

    max-width:280px;

    margin-bottom:8px;

    color:#0272e0;

    font-size:10px;
    line-height:1.45;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;
}

.smcg-card-content h3{
    margin:0 0 14px;

    color:#102b44;

    font-size:25px;
    line-height:1.2;

    letter-spacing:-.8px;
}

.smcg-card-content p{
    margin:0;

    color:#687c8e;

    font-size:13px;
    line-height:1.72;
}


/* =========================================================
   SKILLS
========================================================= */

.smcg-skills{
    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:18px;
}

.smcg-skills span{
    padding:6px 9px;

    color:#276495;

    background:#edf7ff;

    border:1px solid #dceefc;

    border-radius:30px;

    font-size:12px;
    font-weight:700;
}


/* =========================================================
   LINK
========================================================= */

.smcg-profile-link{
    display:flex;

    justify-content:space-between;
    align-items:center;

    margin-top:auto;
    padding-top:19px;

    color:#102b44 !important;

    border-top:1px solid #e7eef5;

    text-decoration:none !important;

    font-size:11px;
    font-weight:800;
}

.smcg-profile-link span{
    display:flex;

    width:30px;
    height:30px;

    align-items:center;
    justify-content:center;

    color:#0272e0;

    border:1px solid #cce5fa;

    border-radius:50%;

    transition:.3s;
}

.smcg-profile-link:hover{
    color:#0272e0 !important;
}

.smcg-profile-link:hover span{
    color:#fff;
    background:#0272e0;

    transform:rotate(45deg);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.smcg-team-bottom{
    padding:85px 0;

    background:#0272e0;

    position:relative;

    overflow:hidden;
}

.smcg-team-bottom::after{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-180px;
    top:-230px;

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

    border-radius:50%;

    box-shadow:
        0 0 0 45px rgba(255,255,255,.04),
        0 0 0 90px rgba(255,255,255,.025);
}

.smcg-bottom-inner{
    position:relative;
    z-index:2;

    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:40px;
}

.white-label{
    color:rgba(255,255,255,.75);
}

.smcg-bottom-inner h2{
    margin:0;

    color:#fff;

    font-size:42px;
    line-height:1.15;

    letter-spacing:-1.5px;
}

.smcg-bottom-inner h2 span{
    display:block;

    color:#dceeff;
}

.smcg-bottom-btn{
    display:inline-flex;

    align-items:center;
    gap:18px;

    flex-shrink:0;

    padding:16px 22px;

    color:#0272e0 !important;

    background:#fff;

    text-decoration:none !important;

    font-size:12px;
    font-weight:800;

    transition:.3s;
}

.smcg-bottom-btn b{
    font-size:20px;
}

.smcg-bottom-btn:hover{
    transform:translateY(-4px);

    background:#edf7ff;
}


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

@media(max-width:1050px){

    .smcg-hero-grid{
        grid-template-columns:1fr;
    }

    .smcg-hero-right{
        display:none;
    }

    .smcg-people-grid{
        grid-template-columns:1fr;
    }

    .smcg-person-card{
        grid-template-columns:220px 1fr;
    }

}


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

@media(max-width:650px){

    .smcg-team-container{
        width:calc(100% - 30px);
    }

    .smcg-people-hero{
        min-height:auto;
    }

    .smcg-hero-grid{
        min-height:auto;
    }

    .smcg-hero-left{
        padding:105px 0 80px;
    }

    .smcg-hero-left h1{
        font-size:45px;
        letter-spacing:-2px;
    }

    .smcg-hero-left p{
        font-size:14px;
    }

    .smcg-people-section{
        padding:75px 0;
    }

    .smcg-section-heading{
        display:block;

        margin-bottom:45px;
    }

    .smcg-section-heading h2{
        font-size:38px;
    }

    .smcg-section-heading > p{
        margin-top:20px;

        font-size:14px;
    }

    .smcg-people-grid{
        gap:30px;
    }

    .smcg-person-card{
        display:block;

        min-height:0;
    }

    .smcg-avatar-area{
        min-height:280px;
    }

    .smcg-card-content{
        min-height:330px;

        padding:28px 22px 23px;
    }

    .smcg-card-content h3{
        font-size:24px;
    }

    .smcg-team-bottom{
        padding:65px 0;
    }

    .smcg-bottom-inner{
        display:block;
    }

    .smcg-bottom-inner h2{
        font-size:34px;
    }

    .smcg-bottom-btn{
        margin-top:28px;
    }

}