/* ==========================================================
   PROP-KEYS
   OUR TEAM PAGE
   Bootstrap 5 + Custom CSS
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

:root {

    --pk-primary: #087df2;

    --pk-primary-dark: #071b57;

    --pk-text: #071b57;

    --pk-light-blue: #edf6ff;

    --pk-border: #e5edf7;

    --pk-white: #ffffff;

}


/* ==========================================================
   GLOBAL
========================================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100%;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--pk-text);

    background: #ffffff;

}


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

.pk-team-section {

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 75%,
            #fbfdff 100%
        );

    padding:
        30px
        30px
        35px;

}


/* ==========================================================
   MAIN CONTAINER
========================================================== */

.pk-team-container {

    width: 100%;

    max-width: 1328px;

    margin: 0 auto;

    padding-left: 0;

    padding-right: 0;

}


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

.pk-team-intro {

    display: grid;

    grid-template-columns:
        35%
        42%
        23%;

    align-items: start;

    min-height: 235px;

}


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

.pk-section-label {

    color: var(--pk-primary);

    font-size: 14px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 4px;

    margin-bottom: 14px;

}


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

.pk-intro-content {

    padding:
        0
        25px
        0
        24px;

}


.pk-intro-content h1 {

    margin: 0;

    color: var(--pk-primary-dark);

    font-size: 40px;

    line-height: .98;

    letter-spacing: -1.3px;

    font-weight: 900;

}


.pk-intro-content h1 span {

    color: var(--pk-primary);

}


.pk-intro-content p {

    margin:
        12px
        0
        9px;

    max-width: 410px;

    color: #263b63;

    font-size: 17px;

    line-height: 1.25;

    font-weight: 400;

}


/* ==========================================================
   OUR STORY BUTTON
========================================================== */

.pk-story-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-width: 170px;

    height: 44px;

    padding:
        0
        22px;

    color: #ffffff;

    background: var(--pk-primary);

    border-radius: 6px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

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

}


.pk-story-btn i {

    font-size: 16px;

}


.pk-story-btn:hover {

    color: #ffffff;

    background: #066bd0;

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(8, 125, 242, .22);

}


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

.pk-team-values {

    min-height: 195px;

    display: grid;

    grid-template-columns:
        1fr
        1px
        1fr
        1px
        1fr
        1px
        1fr;

    align-items: start;

    border-left:
        1px solid #a9c9ee;

    padding:
        20px
        20px
        0
        20px;

}


/* ==========================================================
   VALUE ITEM
========================================================== */

.pk-value-item {

    text-align: center;

    min-width: 0;

}


.pk-value-icon {

    width: 55px;

    height: 55px;

    margin:
        0
        auto
        12px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--pk-primary);

    font-size: 36px;

}


.pk-value-item h3 {

    margin: 0;

    color: var(--pk-text);

    font-size: 15px;

    line-height: 1.35;

    font-weight: 800;

}


/* ==========================================================
   VALUE DIVIDER
========================================================== */

.pk-value-divider {

    width: 1px;

    height: 168px;

    background: #edf2f8;

}


/* ==========================================================
   QUOTE
========================================================== */

.pk-team-quote {

    min-height: 218px;

    margin-left: 15px;

    padding:
        18px
        24px
        15px;

    border:
        1px solid #e5edf7;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 2px 9px rgba(25, 70, 120, .06);

}


.pk-quote-mark {

    color: var(--pk-primary);

    font-size: 36px;

    line-height: 1;

    margin-bottom: 5px;

}


.pk-team-quote p {

    margin: 0;

    color: #42577b;

    font-size: 16px;

    line-height: 1.5;

}


.pk-quote-author {

    margin-top: 22px;

    color: #31496f;

    font-size: 14px;

    font-weight: 600;

}


/* ==========================================================
   CORE TEAM HEADING
========================================================== */

.pk-core-heading {

    text-align: center;

    margin:
        5px
        0
        12px;

}


.pk-core-heading .pk-section-label {

    margin-bottom: 9px;

    font-size: 13px;

}


.pk-core-heading h2 {

    margin: 0;

    color: var(--pk-text);

    font-size: 32px;

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -.6px;

}


.pk-heading-line {

    width: 44px;

    height: 3px;

    margin:
        8px
        auto
        0;

    background: var(--pk-primary);

}


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

.pk-team-grid {

    margin:
        0
        0
        0;

    --bs-gutter-x: 14px;

    --bs-gutter-y: 14px;

}


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

.pk-team-card {

    width: 100%;

    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid #edf1f7;

    border-radius: 9px;

    box-shadow:
        0 2px 7px rgba(22, 59, 101, .07);

    text-align: center;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.pk-team-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 10px 24px rgba(20, 63, 110, .13);

}


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

.pk-member-image {

    width: 100%;

    aspect-ratio: 1 / .88;

    overflow: hidden;

    background: #edf2f7;

}


.pk-member-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

    transition:
        transform .35s ease;

}


.pk-team-card:hover
.pk-member-image img {

    transform: scale(1.025);

}


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

.pk-member-content {

    padding:
        10px
        9px
        12px;

}


.pk-member-content h3 {

    margin:
        0
        3px;

    color: var(--pk-text);

    font-size: 16px;

    line-height: 1.2;

    font-weight: 800;

}


.pk-member-role {

    min-height: 20px;

    color: var(--pk-primary);

    font-size: 14px;

    line-height: 1.3;

    font-weight: 600;

}


.pk-member-content p {

    min-height: 62px;

    margin:
        11px
        0
        8px;

    color: #405576;

    font-size: 14px;

    line-height: 1.35;

}


/* ==========================================================
   LINKEDIN
========================================================== */

.pk-linkedin {

    width: 27px;

    height: 27px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background: #087df2;

    border-radius: 5px;

    text-decoration: none;

    font-size: 16px;

    transition:
        transform .2s ease,
        background .2s ease;

}


.pk-linkedin:hover {

    color: #ffffff;

    background: #075fb9;

    transform: scale(1.08);

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width: 1400px) {

    .pk-team-container {

        max-width: 1330px;

    }


    .pk-intro-content h1 {

        font-size: 41px;

    }


    .pk-team-intro {

        grid-template-columns:
            35%
            42%
            23%;

    }

}


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

@media (max-width: 1199.98px) {

    .pk-team-section {

        padding:
            28px
            24px
            35px;

    }


    .pk-team-intro {

        grid-template-columns:
            38%
            62%;

    }


    .pk-intro-content {

        padding-left: 10px;

    }


    .pk-intro-content h1 {

        font-size: 36px;

    }


    .pk-intro-content p {

        font-size: 15px;

    }


    .pk-team-values {

        padding-left: 15px;

        padding-right: 10px;

    }


    .pk-team-quote {

        grid-column: 1 / -1;

        width: 50%;

        margin:
            15px
            auto
            0;

    }


    .pk-team-card {

        border-radius: 8px;

    }

}


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

@media (max-width: 991.98px) {

    .pk-team-intro {

        display: grid;

        grid-template-columns: 1fr;

    }


    .pk-intro-content {

        text-align: center;

        padding: 0 20px;

    }


    .pk-intro-content p {

        margin-left: auto;

        margin-right: auto;

    }


    .pk-team-values {

        margin-top: 25px;

        border-left: 0;

        border-top:
            1px solid #e5edf7;

        padding:
            20px
            10px
            0;

    }


    .pk-value-divider {

        height: 100px;

    }


    .pk-team-quote {

        width: 100%;

        max-width: 500px;

        margin:
            20px
            auto
            0;

    }


    .pk-core-heading {

        margin-top: 35px;

    }


    .pk-core-heading h2 {

        font-size: 29px;

    }


    .pk-member-content h3 {

        font-size: 16px;

    }

}


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

@media (max-width: 767.98px) {

    .pk-team-section {

        padding:
            30px
            15px
            35px;

    }


    .pk-team-container {

        width: 100%;

    }


    /* ----------------------------------------------
       INTRO
    ---------------------------------------------- */

    .pk-team-intro {

        display: flex;

        flex-direction: column;

    }


    .pk-intro-content {

        padding:
            0
            5px;

        text-align: center;

    }


    .pk-section-label {

        font-size: 12px;

        letter-spacing: 3px;

        margin-bottom: 12px;

    }


    .pk-intro-content h1 {

        font-size: clamp(30px, 8.5vw, 42px);

        line-height: 1.02;

        letter-spacing: -.8px;

    }


    .pk-intro-content p {

        max-width: 520px;

        margin:
            14px
            auto
            15px;

        font-size: 15px;

        line-height: 1.45;

    }


    .pk-story-btn {

        min-width: 155px;

        height: 42px;

        font-size: 14px;

    }


    /* ----------------------------------------------
       VALUES
    ---------------------------------------------- */

    .pk-team-values {

        width: 100%;

        margin-top: 28px;

        padding:
            20px
            0
            5px;

        display: grid;

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

        border-top:
            1px solid #e5edf7;

        overflow: hidden;

    }


    .pk-value-icon {

        width: 45px;

        height: 45px;

        margin-bottom: 7px;

        font-size: 29px;

    }


    .pk-value-item h3 {

        font-size: 11px;

        line-height: 1.3;

    }


    .pk-value-divider {

        display: none;

    }


    /* ----------------------------------------------
       QUOTE
    ---------------------------------------------- */

    .pk-team-quote {

        width: 100%;

        min-height: auto;

        margin:
            20px
            0
            0;

        padding:
            16px
            18px
            17px;

        text-align: left;

    }


    .pk-quote-mark {

        font-size: 29px;

    }


    .pk-team-quote p {

        font-size: 14px;

        line-height: 1.45;

    }


    .pk-quote-author {

        margin-top: 14px;

        font-size: 13px;

    }


    /* ----------------------------------------------
       CORE TEAM
    ---------------------------------------------- */

    .pk-core-heading {

        margin:
            38px
            0
            20px;

    }


    .pk-core-heading .pk-section-label {

        font-size: 11px;

        letter-spacing: 3px;

    }


    .pk-core-heading h2 {

        font-size: clamp(24px, 7vw, 32px);

        line-height: 1.15;

    }


    /* ----------------------------------------------
       TEAM CARDS
    ---------------------------------------------- */

    .pk-team-grid {

        --bs-gutter-x: 12px;

        --bs-gutter-y: 18px;

    }


    .pk-team-card {

        max-width: 430px;

        margin-left: auto;

        margin-right: auto;

    }


    .pk-member-image {

        aspect-ratio: 1 / .78;

    }


    .pk-member-content {

        padding:
            12px
            12px
            15px;

    }


    .pk-member-content h3 {

        font-size: 18px;

    }


    .pk-member-role {

        font-size: 14px;

    }


    .pk-member-content p {

        max-width: 330px;

        min-height: auto;

        margin:
            12px
            auto
            13px;

        font-size: 14px;

        line-height: 1.45;

    }


    .pk-linkedin {

        width: 30px;

        height: 30px;

        font-size: 17px;

    }

}


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

@media (max-width: 480px) {

    .pk-team-section {

        padding:
            25px
            12px
            30px;

    }


    .pk-intro-content h1 {

        font-size: 31px;

    }


    .pk-intro-content p {

        font-size: 14px;

    }


    .pk-team-values {

        padding-left: 0;

        padding-right: 0;

    }


    .pk-value-icon {

        font-size: 26px;

        width: 40px;

        height: 40px;

    }


    .pk-value-item h3 {

        font-size: 9.5px;

    }


    .pk-team-quote {

        border-radius: 9px;

    }


    .pk-core-heading h2 {

        font-size: 25px;

    }


    .pk-member-image {

        aspect-ratio: 1 / .76;

    }

}