/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 14 2026 | 03:50:38 */
/* =========================================================
   SECOND CREEK TECHNOLOGIES
   JOB OPPORTUNITIES PAGE
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --careers-blue: #2563EB;
    --careers-blue-hover: #1D4ED8;

    --careers-navy: #020D20;
    --careers-card: #03142C;

    --careers-white: #FFFFFF;

    --careers-text: #C7D2E2;
    --careers-text-soft: #AAB8CC;

    --careers-border: rgba(255, 255, 255, 0.10);
    --careers-border-blue: rgba(37, 99, 235, 0.26);

    --careers-radius: 14px;

    --careers-shadow:
        0 16px 38px rgba(0, 0, 0, 0.16);
}


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

.careers-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 105px 40px 115px !important;

    background:
        radial-gradient(
            circle at 86% 12%,
            rgba(37, 99, 235, 0.09),
            transparent 34%
        ),
        var(--careers-navy);
}


/* subtle background glow */

.careers-section::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -150px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.07),
            transparent 68%
        );

    pointer-events: none;
}


/* =========================================================
   INNER WIDTH
   ========================================================= */

.careers-inner {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    max-width: 1200px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


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

.careers-header {
    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    max-width: 900px;

    margin-bottom: 54px !important;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.careers-eyebrow {
    position: relative;

    margin: 0 0 16px !important;
}


.careers-eyebrow::before {
    content: "";

    display: block;

    width: 38px;
    height: 2px;

    margin-bottom: 14px;

    border-radius: 999px;

    background: var(--careers-blue);
}


.careers-eyebrow .elementor-heading-title {
    color: var(--careers-blue) !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    letter-spacing: 0.14em !important;

    text-transform: uppercase !important;
}


/* =========================================================
   PAGE TITLE
   ========================================================= */

.careers-title {
    margin: 0 0 22px !important;
}


.careers-title .elementor-heading-title {
    color: var(--careers-white) !important;

    font-size: clamp(42px, 3.6vw, 56px) !important;
    font-weight: 700 !important;

    line-height: 1.07 !important;

    letter-spacing: -0.03em !important;
}


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

.careers-intro {
    margin: 0 !important;
}


.careers-intro,
.careers-intro p {
    color: var(--careers-text) !important;

    font-size: 18px !important;

    line-height: 1.72 !important;
}


.careers-intro p {
    margin: 0 !important;
}


/* =========================================================
   JOBS ROW
   ========================================================= */

.careers-jobs {
    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 28px !important;

    margin-bottom: 48px !important;
}


/* =========================================================
   INDIVIDUAL JOB CARD
   ========================================================= */

.career-card {
    position: relative;

    display: flex !important;

    flex: 1 1 0 !important;

    flex-direction: column !important;

    width: 0 !important;
    min-width: 0 !important;

    padding: 38px 38px 36px !important;

    border:
        1px solid var(--careers-border);

    border-radius:
        var(--careers-radius);

    background:
        linear-gradient(
            145deg,
            rgba(6, 24, 49, 0.96),
            rgba(3, 20, 44, 0.92)
        );

    box-shadow:
        var(--careers-shadow);

    overflow: hidden;

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


/* blue top accent */

.career-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 38px;

    width: 56px;
    height: 3px;

    border-radius:
        0 0 4px 4px;

    background:
        var(--careers-blue);
}


/* subtle glow */

.career-card::after {
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.07),
            transparent 68%
        );

    pointer-events: none;
}


.career-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--careers-border-blue);

    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.20);
}


/* keep contents over glow */

.career-card > * {
    position: relative;

    z-index: 2;
}


/* =========================================================
   JOB TITLE
   ========================================================= */

.career-card-title {
    margin: 0 0 18px !important;
}


.career-card-title .elementor-heading-title {
    color:
        var(--careers-white) !important;

    font-size:
        31px !important;

    font-weight:
        700 !important;

    line-height:
        1.13 !important;

    letter-spacing:
        -0.02em !important;
}


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

.career-card-text {
    flex-grow: 1;

    margin:
        0 0 28px !important;
}


.career-card-text,
.career-card-text p {
    color:
        var(--careers-text) !important;

    font-size:
        17px !important;

    line-height:
        1.7 !important;
}


.career-card-text p {
    margin:
        0 !important;
}


/* =========================================================
   JOB DESCRIPTION BUTTON
   ========================================================= */

.career-card-button {
    margin-top:
        auto !important;
}


.career-card-button .elementor-button {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        13px 22px !important;

    border:
        1px solid var(--careers-blue) !important;

    border-radius:
        8px !important;

    background:
        var(--careers-blue) !important;

    color:
        #FFFFFF !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.18);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.career-card-button .elementor-button:hover {
    transform:
        translateY(-2px);

    background:
        var(--careers-blue-hover) !important;

    border-color:
        var(--careers-blue-hover) !important;

    box-shadow:
        0 11px 25px rgba(37, 99, 235, 0.27);
}


/* =========================================================
   APPLY AREA
   ========================================================= */

.careers-apply-text {
    max-width:
        760px;

    margin:
        0 0 20px !important;
}


.careers-apply-text,
.careers-apply-text p {
    color:
        var(--careers-text) !important;

    font-size:
        17px !important;

    line-height:
        1.65 !important;
}


.careers-apply-text p {
    margin:
        0 !important;
}


/* =========================================================
   CONTACT BUTTON
   ========================================================= */

.careers-contact-button .elementor-button {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        13px 25px !important;

    border:
        1px solid rgba(255, 255, 255, 0.22) !important;

    border-radius:
        8px !important;

    background:
        rgba(255, 255, 255, 0.035) !important;

    color:
        var(--careers-white) !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.careers-contact-button .elementor-button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(37, 99, 235, 0.60) !important;

    background:
        rgba(37, 99, 235, 0.09) !important;
}


/* =========================================================
   TABLET
   Keep cards side-by-side
   ========================================================= */

@media screen and (max-width: 1024px) {

    .careers-section {
        padding:
            82px 32px 90px !important;
    }


    .careers-header {
        margin-bottom:
            44px !important;
    }


    .careers-title .elementor-heading-title {
        font-size:
            44px !important;
    }


    .careers-jobs {
        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        gap:
            20px !important;
    }


    .career-card {
        flex:
            1 1 0 !important;

        width:
            0 !important;

        padding:
            30px !important;
    }


    .career-card-title .elementor-heading-title {
        font-size:
            27px !important;
    }


    .career-card-text,
    .career-card-text p {
        font-size:
            16px !important;
    }
}


/* =========================================================
   MOBILE
   Stack cards
   ========================================================= */

@media screen and (max-width: 767px) {

    .careers-section {
        padding:
            64px 20px 72px !important;
    }


    /* ---------- Header ---------- */

    .careers-header {
        margin-bottom:
            36px !important;
    }


    .careers-eyebrow {
        margin-bottom:
            13px !important;
    }


    .careers-eyebrow::before {
        width:
            32px;

        margin-bottom:
            11px;
    }


    .careers-eyebrow .elementor-heading-title {
        font-size:
            12px !important;

        letter-spacing:
            0.12em !important;
    }


    .careers-title {
        margin-bottom:
            18px !important;
    }


    .careers-title .elementor-heading-title {
        font-size:
            35px !important;

        line-height:
            1.1 !important;
    }


    .careers-intro,
    .careers-intro p {
        font-size:
            17px !important;

        line-height:
            1.68 !important;
    }


    /* ---------- Jobs ---------- */

    .careers-jobs {
        flex-direction:
            column !important;

        flex-wrap:
            nowrap !important;

        gap:
            20px !important;

        margin-bottom:
            38px !important;
    }


    .career-card {
        width:
            100% !important;

        flex:
            0 0 auto !important;

        padding:
            28px 24px !important;

        border-radius:
            13px;
    }


    .career-card::before {
        left:
            24px;

        width:
            48px;
    }


    .career-card-title {
        margin-bottom:
            15px !important;
    }


    .career-card-title .elementor-heading-title {
        font-size:
            26px !important;
    }


    .career-card-text {
        margin-bottom:
            23px !important;
    }


    .career-card-text,
    .career-card-text p {
        font-size:
            16px !important;

        line-height:
            1.65 !important;
    }


    /* ---------- Buttons ---------- */

    .career-card-button,
    .careers-contact-button {
        width:
            100% !important;
    }


    .career-card-button .elementor-button,
    .careers-contact-button .elementor-button {
        width:
            100% !important;
    }


    .careers-apply-text,
    .careers-apply-text p {
        font-size:
            16px !important;
    }
}