/* ==========================================================
   PROP-KEYS
   WORK CULTURE / CAREER SECTION

   Bootstrap 5
   Responsive Desktop + Tablet + Mobile
========================================================== */


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

:root {

    --pk-blue: #087df2;

    --pk-blue-light: #edf7ff;

    --pk-dark-blue: #062e68;

    --pk-heading: #071b57;

    --pk-text: #263b63;

    --pk-white: #ffffff;

    --pk-border: #dcecfb;

}


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

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

}


body {

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

    background: #ffffff;

    color: var(--pk-heading);

}


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

.pk-culture-section {

    width: 100%;

    padding:
        12px
        0;

    background: #ffffff;
}


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

.pk-culture-container {

    width: 100%;

    max-width: 1396px;

    margin: 0 auto;

    padding:
        0
        12px;
}


/* ==========================================================
   MAIN 3 COLUMN LAYOUT
========================================================== */

.pk-culture-layout {

    width: 100%;

    min-height: 430px;

    display: grid;

    grid-template-columns:
        27%
        47%
        26%;

    gap: 8px;

    align-items: stretch;
}


/* ==========================================================
   LEFT PANEL
========================================================== */

.pk-culture-content {

    min-width: 0;

    padding:
        20px
        30px
        20px
        34px;

    background:
        linear-gradient(
            110deg,
            #f0f9ff 0%,
            #ffffff 100%
        );

    border-radius:
        12px
        0
        0
        12px;

}


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

.pk-section-label {

    margin-bottom: 13px;

    color:
        #126bb7;

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 3px;
}


/* ==========================================================
   LEFT HEADING
========================================================== */

.pk-culture-content h1 {

    margin: 0;

    color:
        var(--pk-heading);

    font-size:
        clamp(29px, 2.65vw, 38px);

    line-height: .98;

    letter-spacing: -.8px;

    font-weight: 900;
}


.pk-culture-content h1 span {

    color:
        var(--pk-blue);

}


/* ==========================================================
   DESCRIPTION
========================================================== */

.pk-culture-description {

    margin:
        14px
        0
        12px;

    max-width:
        365px;

    color:
        var(--pk-text);

    font-size:
        15px;

    line-height:
        1.3;

    font-weight:
        400;
}


/* ==========================================================
   FEATURES
========================================================== */

.pk-culture-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


/* ==========================================================
   FEATURE
========================================================== */

.pk-culture-feature {

    min-height:
        39px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--pk-heading);

    font-size:
        15px;

    line-height:
        1.2;

    font-weight:
        600;
}


/* ==========================================================
   FEATURE ICON
========================================================== */

.pk-feature-icon {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #ffffff;

    color:
        var(--pk-blue);

    font-size:
        18px;

    box-shadow:
        0 2px 8px
        rgba(24, 94, 163, .10);
}


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

.pk-culture-image {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        #eaf3fb;
}


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

.pk-culture-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center center;

    transition:
        transform .5s ease;
}


/* Subtle premium hover */

.pk-culture-image:hover img {

    transform:
        scale(1.015);
}


/* ==========================================================
   RIGHT CTA
========================================================== */

.pk-culture-cta {

    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #073c78 0%,
            #03265b 100%
        );

    border-radius:
        12px;

    color:
        #ffffff;
}


/* ==========================================================
   CTA INNER
========================================================== */

.pk-cta-inner {

    position:
        relative;

    z-index:
        3;

    padding:
        27px
        34px
        30px;
}


/* ==========================================================
   CTA LABEL
========================================================== */

.pk-cta-label {

    color:
        #ffffff;

    font-size:
        12px;

    line-height:
        1.55;

    font-weight:
        800;

    letter-spacing:
        4px;
}


/* ==========================================================
   CTA HEADING
========================================================== */

.pk-culture-cta h2 {

    margin:
        14px
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(31px, 2.65vw, 39px);

    line-height:
        .98;

    letter-spacing:
        -.7px;

    font-weight:
        900;
}


.pk-culture-cta h2 span {

    color:
        #09aaf5;
}


/* ==========================================================
   CTA LINE
========================================================== */

.pk-cta-line {

    width:
        38px;

    height:
        2px;

    margin:
        19px
        0
        16px;

    background:
        #ffffff;
}


/* ==========================================================
   CTA DESCRIPTION
========================================================== */

.pk-culture-cta p {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        16px;

    line-height:
        1.4;

    font-weight:
        400;
}


/* ==========================================================
   CAREER BUTTON
========================================================== */

.pk-career-button {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    min-height:
        43px;

    margin-top:
        17px;

    padding:
        8px
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        var(--pk-heading);

    background:
        #ffffff;

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

    border-radius:
        6px;

    text-decoration:
        none;

    font-size:
        13px;

    line-height:
        1.2;

    font-weight:
        700;

    transition:
        all .25s ease;
}


.pk-career-button i {

    color:
        var(--pk-blue);

    font-size:
        14px;

}


.pk-career-button:hover {

    color:
        var(--pk-heading);

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 15px
        rgba(0,0,0,.18);
}


/* ==========================================================
   SKYLINE
========================================================== */

.pk-skyline {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -6px;

    height:
        100px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    overflow:
        hidden;

    color:
        rgba(104, 178, 238, .42);

    z-index:
        1;
}


.pk-skyline i {

    font-size:
        125px;

    line-height:
        .65;

    transform:
        scaleX(1.8);

    opacity:
        .45;
}


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

@media (min-width: 1400px) {

    .pk-culture-layout {

        grid-template-columns:
            27%
            47%
            26%;

    }


    .pk-culture-content {

        padding-left:
            34px;

        padding-right:
            25px;
    }

}


/* ==========================================================
   SMALL DESKTOP / LAPTOP
========================================================== */

@media (max-width: 1199.98px) {

    .pk-culture-layout {

        grid-template-columns:
            29%
            44%
            27%;

        min-height:
            420px;
    }


    .pk-culture-content {

        padding:
            20px
            22px
            20px
            24px;
    }


    .pk-culture-content h1 {

        font-size:
            31px;
    }


    .pk-culture-description {

        font-size:
            14px;
    }


    .pk-culture-feature {

        font-size:
            14px;
    }


    .pk-cta-inner {

        padding:
            25px
            25px;
    }


    .pk-culture-cta h2 {

        font-size:
            32px;
    }


    .pk-culture-cta p {

        font-size:
            14px;
    }


    .pk-career-button {

        font-size:
            12px;
    }

}


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

@media (max-width: 991.98px) {

    .pk-culture-layout {

        grid-template-columns:
            1fr
            1fr;

        grid-template-rows:
            auto
            auto;

        min-height:
            auto;

        gap:
            10px;
    }


    /* LEFT */

    .pk-culture-content {

        min-height:
            390px;

        border-radius:
            12px;
    }


    /* CENTER IMAGE */

    .pk-culture-image {

        min-height:
            390px;

        border-radius:
            12px;
    }


    /* RIGHT */

    .pk-culture-cta {

        grid-column:
            1 / -1;

        min-height:
            310px;

        border-radius:
            12px;
    }


    .pk-cta-inner {

        max-width:
            500px;

    }

}


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

@media (max-width: 767.98px) {

    .pk-culture-section {

        padding:
            10px
            0
            20px;
    }


    .pk-culture-container {

        padding:
            0
            10px;
    }


    .pk-culture-layout {

        display:
            flex;

        flex-direction:
            column;

        gap:
            10px;
    }


    /* ======================================================
       LEFT PANEL
    ====================================================== */

    .pk-culture-content {

        width:
            100%;

        min-height:
            auto;

        padding:
            28px
            22px
            25px;

        border-radius:
            12px;

        text-align:
            left;
    }


    .pk-section-label {

        font-size:
            12px;

        letter-spacing:
            3px;

        margin-bottom:
            12px;
    }


    .pk-culture-content h1 {

        font-size:
            clamp(29px, 8.3vw, 40px);

        line-height:
            1.02;

        letter-spacing:
            -.7px;
    }


    .pk-culture-description {

        max-width:
            100%;

        margin:
            14px
            0
            17px;

        font-size:
            15px;

        line-height:
            1.4;
    }


    .pk-culture-features {

        gap:
            5px;
    }


    .pk-culture-feature {

        min-height:
            41px;

        gap:
            11px;

        font-size:
            14px;
    }


    .pk-feature-icon {

        width:
            38px;

        height:
            38px;

        flex-basis:
            38px;

        font-size:
            17px;
    }


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

    .pk-culture-image {

        width:
            100%;

        min-height:
            0;

        aspect-ratio:
            16 / 11;

        border-radius:
            12px;
    }


    .pk-culture-image img {

        object-position:
            center center;
    }


    /* ======================================================
       RIGHT CTA
    ====================================================== */

    .pk-culture-cta {

        width:
            100%;

        min-height:
            390px;

        border-radius:
            12px;
    }


    .pk-cta-inner {

        padding:
            30px
            25px
            80px;
    }


    .pk-cta-label {

        font-size:
            11px;

        letter-spacing:
            3.5px;
    }


    .pk-culture-cta h2 {

        margin-top:
            13px;

        font-size:
            clamp(32px, 9vw, 43px);

        line-height:
            .98;
    }


    .pk-cta-line {

        margin:
            18px
            0
            15px;
    }


    .pk-culture-cta p {

        font-size:
            15px;

        line-height:
            1.45;
    }


    .pk-career-button {

        width:
            100%;

        min-height:
            46px;

        margin-top:
            18px;

        font-size:
            13px;
    }


    /* ======================================================
       SKYLINE
    ====================================================== */

    .pk-skyline {

        height:
            82px;

        bottom:
            0;
    }


    .pk-skyline i {

        font-size:
            105px;

        transform:
            scaleX(1.7);
    }

}


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

@media (max-width: 480px) {

    .pk-culture-container {

        padding:
            0
            8px;
    }


    .pk-culture-content {

        padding:
            25px
            18px
            23px;
    }


    .pk-culture-content h1 {

        font-size:
            30px;
    }


    .pk-culture-description {

        font-size:
            14px;

        line-height:
            1.4;
    }


    .pk-culture-feature {

        font-size:
            13px;
    }


    .pk-feature-icon {

        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;

        font-size:
            16px;
    }


    .pk-culture-image {

        aspect-ratio:
            4 / 3;
    }


    .pk-culture-cta {

        min-height:
            380px;
    }


    .pk-cta-inner {

        padding:
            28px
            20px
            80px;
    }


    .pk-culture-cta h2 {

        font-size:
            34px;
    }


    .pk-culture-cta p {

        font-size:
            14px;
    }


    .pk-career-button {

        font-size:
            12px;
    }

}