/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 14 2026 | 02:09:42 */
/* =========================================================
   SECOND CREEK TECHNOLOGIES
   GET SUPPORT PAGE
   ========================================================= */


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

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

    --support-navy: #020D20;
    --support-navy-alt: #03142C;
    --support-panel: #061831;

    --support-white: #FFFFFF;

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

    --support-border: rgba(255, 255, 255, 0.10);
    --support-border-blue: rgba(37, 99, 235, 0.24);

    --support-radius: 16px;

    --support-shadow:
        0 18px 48px rgba(0, 0, 0, 0.20),
        0 4px 14px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   SHARED WIDTH
   ========================================================= */

.support-intro-inner,
.support-instructions-inner {
    width: 100% !important;
    max-width: 1200px !important;

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


/* =========================================================
   01 - SUPPORT INTRO SECTION
   ========================================================= */

.support-intro-section {
    position: relative;

    overflow: hidden;

    padding:
        100px 40px 105px !important;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(37, 99, 235, 0.10),
            transparent 35%
        ),
        var(--support-navy);
}


/* subtle background glow */

.support-intro-section::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -120px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   SUPPORT INTRO INNER
   ========================================================= */

.support-intro-inner {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
}


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

.support-eyebrow {
    position: relative;

    margin:
        0 0 17px !important;
}


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

    display: block;

    width: 38px;
    height: 2px;

    margin-bottom: 14px;

    border-radius: 999px;

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


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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0.14em !important;

    text-transform:
        uppercase !important;
}


/* =========================================================
   SUPPORT TITLE
   ========================================================= */

.support-title {
    max-width:
        900px;

    margin:
        0 0 24px !important;
}


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

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

    font-weight:
        700 !important;

    line-height:
        1.07 !important;

    letter-spacing:
        -0.03em !important;
}


/* =========================================================
   SUPPORT INTRO TEXT
   ========================================================= */

.support-intro-text {
    max-width:
        850px;

    margin:
        0 0 34px !important;
}


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

    font-size:
        18px !important;

    line-height:
        1.75 !important;
}


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


/* =========================================================
   SUPPORT BUTTON AREA
   ========================================================= */

.support-actions {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 14px !important;

    width: auto !important;
}


/* =========================================================
   SHARED BUTTON BASICS
   ========================================================= */

.support-actions .elementor-button {
    display: inline-flex !important;

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

    min-height:
        52px;

    padding:
        14px 26px !important;

    border-radius:
        8px !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    text-decoration:
        none !important;

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


/* =========================================================
   START REMOTE SUPPORT BUTTON
   ========================================================= */

.support-remote-button .elementor-button {
    border:
        1px solid var(--support-blue) !important;

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

    color:
        #FFFFFF !important;

    box-shadow:
        0 8px 22px rgba(37, 99, 235, 0.22);
}


.support-remote-button .elementor-button:hover {
    transform:
        translateY(-2px);

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

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

    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.30);
}


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

.support-contact-button .elementor-button {
    border:
        1px solid rgba(255, 255, 255, 0.22) !important;

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

    color:
        var(--support-white) !important;
}


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

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

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


/* =========================================================
   02 - REMOTE INSTRUCTIONS SECTION
   ========================================================= */

.support-instructions-section {
    position: relative;

    overflow: hidden;

    padding:
        110px 40px 125px !important;

    background:
        var(--support-navy-alt);
}


/* =========================================================
   INSTRUCTIONS INNER
   ========================================================= */

.support-instructions-inner {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex-direction: column !important;

    gap: 34px !important;
}


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

.support-instructions-header {
    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    max-width:
        820px;

    margin-bottom:
        22px !important;
}


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

.support-instructions-eyebrow {
    position: relative;

    margin:
        0 0 15px !important;
}


.support-instructions-eyebrow::before {
    content: "";

    display: block;

    width: 38px;
    height: 2px;

    margin-bottom:
        14px;

    border-radius:
        999px;

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


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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0.14em !important;

    text-transform:
        uppercase !important;
}


/* =========================================================
   INSTRUCTIONS TITLE
   ========================================================= */

.support-instructions-title {
    margin:
        0 0 20px !important;
}


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

    font-size:
        clamp(38px, 3.2vw, 50px) !important;

    font-weight:
        700 !important;

    line-height:
        1.09 !important;

    letter-spacing:
        -0.025em !important;
}


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

.support-instructions-intro {
    margin:
        0 !important;
}


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

    font-size:
        18px !important;

    line-height:
        1.7 !important;
}


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


/* =========================================================
   INDIVIDUAL SUPPORT STEPS
   ========================================================= */

.support-step {
    position: relative;

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    width: 100% !important;

    gap: 68px !important;

    padding:
        48px !important;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(6, 24, 49, 0.92),
            rgba(3, 18, 39, 0.78)
        );

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.12);

    overflow:
        hidden;
}


/* subtle variation between steps */

.support-step-02,
.support-step-04 {
    background:
        linear-gradient(
            145deg,
            rgba(4, 20, 43, 0.96),
            rgba(6, 25, 52, 0.84)
        );
}


/* blue glow */

.support-step::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -140px;
    right: -120px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* alternate the glow */

.support-step-02::before,
.support-step-04::before {
    right:
        auto;

    left:
        -120px;
}


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

.support-step-content {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex: 0 1 45% !important;

    flex-direction: column !important;

    min-width: 0 !important;
}


/* =========================================================
   STEP NUMBER
   ========================================================= */

.support-step-number {
    margin:
        0 0 14px !important;
}


.support-step-number .elementor-heading-title {
    color:
        var(--support-blue) !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        0.12em !important;
}


/* =========================================================
   STEP TITLE
   ========================================================= */

.support-step-title {
    margin:
        0 0 18px !important;
}


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

    font-size:
        32px !important;

    font-weight:
        700 !important;

    line-height:
        1.12 !important;

    letter-spacing:
        -0.02em !important;
}


/* =========================================================
   STEP TEXT
   ========================================================= */

.support-step-text {
    margin:
        0 !important;
}


.support-step-text,
.support-step-text p {
    color:
        var(--support-text) !important;

    font-size:
        17px !important;

    line-height:
        1.72 !important;
}


.support-step-text p {
    margin:
        0 !important;
}


.support-step-text strong {
    color:
        var(--support-white) !important;

    font-weight:
        700 !important;
}


/* =========================================================
   STEP IMAGE CONTAINER
   ========================================================= */

.support-step-image-container,
.support-step-images {
    position: relative;

    z-index: 2;

    flex:
        0 1 55% !important;

    min-width:
        0 !important;
}


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

.support-step-image {
    position: relative;

    width:
        100% !important;

    margin:
        0 !important;
}


.support-step-image .elementor-widget-container {
    width:
        100% !important;

    padding:
        12px !important;

    border:
        1px solid rgba(37, 99, 235, 0.18);

    border-radius:
        12px;

    background:
        #FFFFFF;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.18);

    overflow:
        hidden;
}


.support-step-image img {
    display:
        block;

    width:
        100% !important;

    max-width:
        100% !important;

    height:
        auto !important;

    max-height:
        430px;

    margin:
        0 auto;

    object-fit:
        contain;

    object-position:
        center;

    border-radius:
        6px;
}


/* =========================================================
   STEP 03 - TWO SCREENSHOTS
   ========================================================= */

.support-step-images {
    display:
        grid !important;

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

    align-items:
        start;

    gap:
        16px !important;
}


.support-step-images .support-step-image img {
    max-height:
        330px;
}


/* =========================================================
   SMALL BLUE ACCENT ON CARDS
   ========================================================= */

.support-step::after {
    content: "";

    position: absolute;

    top: 0;
    left: 48px;

    width: 60px;
    height: 3px;

    border-radius:
        0 0 4px 4px;

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


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

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

    .support-intro-section {
        padding:
            82px 32px 88px !important;
    }


    .support-instructions-section {
        padding:
            88px 32px 100px !important;
    }


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


    .support-instructions-title .elementor-heading-title {
        font-size:
            40px !important;
    }


    /*
     Stack every support step.
     Since you reversed the child order in Elementor,
     we override ordering so instructions always appear first.
    */

    .support-step {
        flex-direction:
            column !important;

        align-items:
            stretch !important;

        gap:
            38px !important;

        padding:
            38px !important;
    }


    .support-step-content,
    .support-step-image-container,
    .support-step-images {
        width:
            100% !important;

        max-width:
            100% !important;

        flex:
            0 0 auto !important;
    }


    .support-step-content {
        order:
            1;
    }


    .support-step-image-container,
    .support-step-images {
        order:
            2;
    }


    .support-step-image img {
        max-height:
            500px;
    }


    .support-step-images {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


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

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

    .support-step-images {
        grid-template-columns:
            1fr;
    }


    .support-step-images .support-step-image img {
        max-height:
            440px;
    }
}


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

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

    .support-intro-section {
        padding:
            64px 20px 68px !important;
    }


    .support-instructions-section {
        padding:
            70px 20px 78px !important;
    }


    /* ---------- Intro ---------- */

    .support-eyebrow,
    .support-instructions-eyebrow {
        margin-bottom:
            13px !important;
    }


    .support-eyebrow::before,
    .support-instructions-eyebrow::before {
        width:
            32px;

        margin-bottom:
            11px;
    }


    .support-eyebrow .elementor-heading-title,
    .support-instructions-eyebrow .elementor-heading-title {
        font-size:
            12px !important;

        letter-spacing:
            0.12em !important;
    }


    .support-title {
        margin-bottom:
            20px !important;
    }


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

        line-height:
            1.1 !important;
    }


    .support-intro-text {
        margin-bottom:
            28px !important;
    }


    .support-intro-text,
    .support-intro-text p,
    .support-instructions-intro,
    .support-instructions-intro p {
        font-size:
            17px !important;

        line-height:
            1.68 !important;
    }


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

    .support-actions {
        flex-direction:
            column !important;

        align-items:
            stretch !important;

        width:
            100% !important;

        gap:
            12px !important;
    }


    .support-contact-button,
    .support-remote-button {
        width:
            100% !important;
    }


    .support-actions .elementor-button {
        width:
            100% !important;
    }


    /* ---------- Instructions ---------- */

    .support-instructions-header {
        margin-bottom:
            12px !important;
    }


    .support-instructions-title {
        margin-bottom:
            17px !important;
    }


    .support-instructions-title .elementor-heading-title {
        font-size:
            33px !important;

        line-height:
            1.12 !important;
    }


    /* ---------- Steps ---------- */

    .support-instructions-inner {
        gap:
            24px !important;
    }


    .support-step {
        gap:
            28px !important;

        padding:
            28px 22px 24px !important;

        border-radius:
            14px;
    }


    .support-step::after {
        left:
            22px;

        width:
            46px;
    }


    .support-step-number {
        margin-bottom:
            11px !important;
    }


    .support-step-number .elementor-heading-title {
        font-size:
            13px !important;
    }


    .support-step-title {
        margin-bottom:
            15px !important;
    }


    .support-step-title .elementor-heading-title {
        font-size:
            27px !important;

        line-height:
            1.13 !important;
    }


    .support-step-text,
    .support-step-text p {
        font-size:
            16px !important;

        line-height:
            1.68 !important;
    }


    /* ---------- Screenshots ---------- */

    .support-step-image .elementor-widget-container {
        padding:
            8px !important;

        border-radius:
            10px;
    }


    .support-step-image img,
    .support-step-images .support-step-image img {
        max-height:
            none;
    }
}