/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 01 2026 | 23:54:47 */
/* =========================================================
   SECOND CREEK TECHNOLOGIES
   CONTACT PAGE
   ========================================================= */


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

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

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

    --contact-white: #FFFFFF;

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

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

    --contact-radius: 14px;

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


/* =========================================================
   01 - MAIN CONTACT SECTION
   ========================================================= */

.contact-main-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        110px 40px 120px !important;

    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(37, 99, 235, 0.09),
            transparent 34%
        ),
        var(--contact-navy);
}


/* subtle background glow */

.contact-main-section::before {
    content: "";

    position: absolute;

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

    width: 560px;
    height: 560px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* =========================================================
   CONTACT MAIN INNER
   ========================================================= */

.contact-main-inner {
    position: relative;

    z-index: 2;

    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important;

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

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

    gap: 80px !important;
}


/* =========================================================
   LEFT COLUMN - CONTACT INFO
   ========================================================= */

.contact-info {
    display: flex !important;

    flex: 0 1 42% !important;
    flex-direction: column !important;

    min-width: 0 !important;

    padding:
        24px 0 !important;
}


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

.contact-eyebrow {
    position: relative;

    margin:
        0 0 17px !important;
}


/* blue line */

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

    display: block;

    width: 38px;
    height: 2px;

    margin-bottom: 14px;

    border-radius: 99px;

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


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

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0.14em !important;

    text-transform:
        uppercase !important;
}


/* =========================================================
   CONTACT TITLE
   ========================================================= */

.contact-title {
    margin:
        0 0 25px !important;
}


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

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

    font-weight:
        700 !important;

    line-height:
        1.09 !important;

    letter-spacing:
        -0.025em !important;
}


/* =========================================================
   CONTACT INTRO TEXT
   ========================================================= */

.contact-intro-text {
    margin:
        0 0 42px !important;
}


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

    font-size:
        18px !important;

    line-height:
        1.72 !important;
}


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


/* =========================================================
   CONTACT DETAILS CONTAINER
   ========================================================= */

.contact-details {
    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    gap: 14px !important;
}


/* =========================================================
   INDIVIDUAL CONTACT DETAIL
   Phone / Email / Service Area
   ========================================================= */

.contact-detail {
    width: 100%;

    margin: 0 !important;

    padding:
        18px 20px !important;

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

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.025);

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


.contact-detail:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(37, 99, 235, 0.38);

    background:
        rgba(37, 99, 235, 0.045);
}


/* =========================================================
   ELEMENTOR ICON BOX WRAPPER
   ========================================================= */

.contact-detail .elementor-icon-box-wrapper {
    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 16px !important;

    text-align: left !important;
}


/* =========================================================
   CONTACT DETAIL ICON
   ========================================================= */

.contact-detail .elementor-icon-box-icon {
    flex:
        0 0 auto;

    margin:
        0 !important;
}


.contact-detail .elementor-icon {
    display: flex !important;

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

    width: 46px;
    height: 46px;

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

    border-radius:
        10px;

    background:
        rgba(37, 99, 235, 0.10);

    color:
        var(--contact-blue) !important;
}


.contact-detail .elementor-icon svg {
    width:
        19px !important;

    height:
        19px !important;

    fill:
        currentColor !important;
}


/* =========================================================
   CONTACT DETAIL CONTENT
   ========================================================= */

.contact-detail .elementor-icon-box-content {
    min-width:
        0;
}


/* title */

.contact-detail .elementor-icon-box-title {
    margin:
        0 0 4px !important;

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

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;
}


.contact-detail .elementor-icon-box-title a {
    color:
        inherit !important;
}


/* description */

.contact-detail .elementor-icon-box-description {
    margin:
        0 !important;

    color:
        var(--contact-text-soft) !important;

    font-size:
        15px !important;

    line-height:
        1.5 !important;
}


.contact-detail .elementor-icon-box-description a {
    color:
        var(--contact-text-soft) !important;

    text-decoration:
        none !important;

    transition:
        color 0.2s ease;
}


.contact-detail .elementor-icon-box-description a:hover {
    color:
        var(--contact-white) !important;
}


/* =========================================================
   PHONE / EMAIL / SERVICE AREA
   Unique classes retained for future targeting
   ========================================================= */

.contact-phone {
}

.contact-email {
}

.contact-service-area {
}


/* =========================================================
   RIGHT COLUMN - FORM CONTAINER
   ========================================================= */

.contact-form-container {
    position: relative;

    display: flex !important;

    flex:
        0 1 58% !important;

    flex-direction:
        column !important;

    min-width:
        0 !important;

    padding:
        48px 48px 50px !important;

    border:
        1px solid var(--contact-border-blue);

    border-radius:
        17px;

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

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

    overflow:
        hidden;
}


/* blue glow inside panel */

.contact-form-container::before {
    content: "";

    position: absolute;

    top: -125px;
    right: -105px;

    width: 330px;
    height: 330px;

    border-radius: 50%;

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

    pointer-events:
        none;
}


/* keep Elementor content above glow */

.contact-form-container > * {
    position:
        relative;

    z-index:
        2;
}


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

.contact-form-eyebrow {
    position: relative;

    margin:
        0 0 14px !important;
}


.contact-form-eyebrow::before {
    content: "";

    display: block;

    width: 36px;
    height: 2px;

    margin-bottom:
        13px;

    border-radius:
        99px;

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


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

    font-size:
        13px !important;

    font-weight:
        700 !important;

    line-height:
        1.3 !important;

    letter-spacing:
        0.14em !important;

    text-transform:
        uppercase !important;
}


/* =========================================================
   FORM TITLE
   ========================================================= */

.contact-form-title {
    margin:
        0 0 34px !important;
}


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

    font-size:
        38px !important;

    font-weight:
        700 !important;

    line-height:
        1.12 !important;

    letter-spacing:
        -0.025em !important;
}


/* =========================================================
   ELEMENTOR SHORTCODE WIDGET
   ========================================================= */

.contact-form,
.contact-form .elementor-widget-container,
.contact-form .wpcf7,
.contact-form .wpcf7-form {
    width:
        100% !important;
}


/* =========================================================
   CONTACT FORM 7 MAIN WRAPPER
   ========================================================= */

.sct-contact-form {
    display: flex;

    flex-direction: column;

    width: 100%;

    gap: 22px;
}


/* =========================================================
   CF7 TWO-COLUMN ROWS
   ========================================================= */

.sct-form-row {
    display: flex;

    width: 100%;

    gap: 18px;
}


.sct-form-half {
    flex:
        1 1 0;

    min-width:
        0;
}


/* =========================================================
   CF7 FIELD
   ========================================================= */

.sct-form-field {
    width:
        100%;
}


/* =========================================================
   FIELD LABELS
   ========================================================= */

.sct-form-field label {
    display:
        block;

    width:
        100%;

    color:
        rgba(255, 255, 255, 0.88);

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.4;
}


/* required asterisk */

.sct-form-field label > span:not(.wpcf7-form-control-wrap) {
    color:
        var(--contact-blue);
}


/* =========================================================
   CF7 CONTROL WRAPPER
   ========================================================= */

.sct-form-field .wpcf7-form-control-wrap {
    display:
        block;

    width:
        100%;

    margin-top:
        8px;
}


/* =========================================================
   INPUTS
   ========================================================= */

.sct-contact-form input[type="text"],
.sct-contact-form input[type="email"],
.sct-contact-form input[type="tel"],
.sct-contact-form textarea {
    display:
        block;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        14px 16px !important;

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

    border-radius:
        9px !important;

    outline:
        none !important;

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

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

    font-family:
        inherit !important;

    font-size:
        16px !important;

    font-weight:
        400 !important;

    line-height:
        1.45 !important;

    box-shadow:
        none !important;

    box-sizing:
        border-box !important;

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


/* =========================================================
   SINGLE LINE INPUT HEIGHT
   ========================================================= */

.sct-contact-form input[type="text"],
.sct-contact-form input[type="email"],
.sct-contact-form input[type="tel"] {
    min-height:
        52px;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.sct-contact-form textarea {
    min-height:
        165px;

    resize:
        vertical;
}


/* =========================================================
   FIELD HOVER
   ========================================================= */

.sct-contact-form input[type="text"]:hover,
.sct-contact-form input[type="email"]:hover,
.sct-contact-form input[type="tel"]:hover,
.sct-contact-form textarea:hover {
    border-color:
        rgba(37, 99, 235, 0.42) !important;

    background:
        rgba(255, 255, 255, 0.055) !important;
}


/* =========================================================
   FIELD FOCUS
   ========================================================= */

.sct-contact-form input[type="text"]:focus,
.sct-contact-form input[type="email"]:focus,
.sct-contact-form input[type="tel"]:focus,
.sct-contact-form textarea:focus {
    border-color:
        var(--contact-blue) !important;

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

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.11) !important;
}


/* =========================================================
   BROWSER AUTOFILL
   ========================================================= */

.sct-contact-form input:-webkit-autofill,
.sct-contact-form input:-webkit-autofill:hover,
.sct-contact-form input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        #FFFFFF !important;

    -webkit-box-shadow:
        0 0 0 1000px #07172E inset !important;

    transition:
        background-color 9999s ease-out;
}


/* =========================================================
   TURNSTILE
   ========================================================= */

.sct-form-turnstile {
    width:
        100%;

    margin-top:
        2px;
}


.sct-form-turnstile .cf-turnstile {
    width:
        100%;
}


/* =========================================================
   SUBMIT WRAPPER
   ========================================================= */

.sct-form-submit {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    margin-top:
        2px;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.sct-form-submit input[type="submit"] {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        180px;

    min-height:
        52px;

    margin:
        0 !important;

    padding:
        14px 28px !important;

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

    border-radius:
        8px !important;

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

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

    font-family:
        inherit !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    cursor:
        pointer;

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

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


.sct-form-submit input[type="submit"]:hover {
    transform:
        translateY(-2px);

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

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

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


.sct-form-submit input[type="submit"]:active {
    transform:
        translateY(0);
}


.sct-form-submit input[type="submit"]:disabled {
    opacity:
        0.65;

    cursor:
        not-allowed;

    transform:
        none !important;
}


/* =========================================================
   CF7 SPINNER
   ========================================================= */

.contact-form .wpcf7-spinner {
    margin:
        0 0 0 14px !important;

    background-color:
        rgba(255, 255, 255, 0.22) !important;
}


/* =========================================================
   FIELD VALIDATION
   ========================================================= */

.contact-form .wpcf7-not-valid {
    border-color:
        rgba(239, 68, 68, 0.82) !important;
}


.contact-form .wpcf7-not-valid:focus {
    border-color:
        #EF4444 !important;

    box-shadow:
        0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}


.contact-form .wpcf7-not-valid-tip {
    display:
        block;

    margin-top:
        6px;

    color:
        #FCA5A5 !important;

    font-size:
        13px !important;

    line-height:
        1.4 !important;
}


/* =========================================================
   RESPONSE OUTPUT
   ========================================================= */

.contact-form .wpcf7-response-output {
    margin:
        24px 0 0 !important;

    padding:
        14px 16px !important;

    border-radius:
        8px !important;

    font-size:
        14px !important;

    line-height:
        1.55 !important;
}


/* successful */

.contact-form form.sent .wpcf7-response-output {
    border:
        1px solid rgba(34, 197, 94, 0.45) !important;

    background:
        rgba(34, 197, 94, 0.08) !important;

    color:
        #BBF7D0 !important;
}


/* failed / invalid / spam */

.contact-form form.invalid .wpcf7-response-output,
.contact-form form.unaccepted .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output,
.contact-form form.spam .wpcf7-response-output {
    border:
        1px solid rgba(239, 68, 68, 0.45) !important;

    background:
        rgba(239, 68, 68, 0.07) !important;

    color:
        #FECACA !important;
}


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

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

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


    /* stack left + form */

    .contact-main-inner {
        flex-direction:
            column !important;

        align-items:
            stretch !important;

        gap:
            58px !important;
    }


    .contact-info,
    .contact-form-container {
        width:
            100% !important;

        max-width:
            100% !important;

        flex:
            0 0 auto !important;
    }


    .contact-info {
        padding:
            0 !important;
    }


    .contact-title .elementor-heading-title {
        font-size:
            42px !important;
    }


    /*
     Contact details become a 3-column row on tablet.
    */

    .contact-details {
        display:
            grid !important;

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

        gap:
            14px !important;
    }
	
	
    /*
     The Google Map is the 4th item in the .contact-details grid
     above (3 columns). It would otherwise land alone in column 1
     of a second row, leaving two empty grid cells beside it.
     Force it to span the full row so it lines up with the
     Phone/Email/Address cards above.
    */

    .contact-details > .elementor-widget-google_maps {
        grid-column:
            1 / -1 !important;

        width:
            100% !important;
    }


    .contact-detail {
        height:
            100%;

        padding:
            18px !important;
    }


    .contact-detail:hover {
        transform:
            translateY(-3px);
    }


    .contact-detail .elementor-icon-box-wrapper {
        align-items:
            flex-start !important;
    }


    .contact-form-container {
        padding:
            42px !important;
    }


    .contact-form-title .elementor-heading-title {
        font-size:
            36px !important;
    }
}


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

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

    .contact-details {
        grid-template-columns:
            1fr !important;
    }


    .contact-detail .elementor-icon-box-wrapper {
        align-items:
            center !important;
    }
}


/* =========================================================
   FORM ROWS STACK
   ========================================================= */

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

    .sct-form-row {
        flex-direction:
            column;

        gap:
            20px;
    }


    .sct-form-half {
        width:
            100%;
    }
}


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

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

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


    .contact-main-inner {
        gap:
            46px !important;
    }


    /* ---------- Left side ---------- */

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


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

        margin-bottom:
            11px;
    }


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

        letter-spacing:
            0.12em !important;
    }


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


    .contact-title .elementor-heading-title {
        font-size:
            34px !important;

        line-height:
            1.1 !important;
    }


    .contact-intro-text {
        margin-bottom:
            32px !important;
    }


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

        line-height:
            1.7 !important;
    }


    .contact-detail {
        padding:
            16px !important;
    }


    .contact-detail .elementor-icon {
        width:
            42px;

        height:
            42px;
    }


    /* ---------- Form panel ---------- */

    .contact-form-container {
        padding:
            30px 22px 32px !important;

        border-radius:
            14px;
    }


    .contact-form-eyebrow {
        margin-bottom:
            12px !important;
    }


    .contact-form-eyebrow::before {
        width:
            32px;

        margin-bottom:
            11px;
    }


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

        letter-spacing:
            0.12em !important;
    }


    .contact-form-title {
        margin-bottom:
            27px !important;
    }


    .contact-form-title .elementor-heading-title {
        font-size:
            31px !important;

        line-height:
            1.12 !important;
    }


    .sct-contact-form {
        gap:
            20px;
    }


    .sct-contact-form input[type="text"],
    .sct-contact-form input[type="email"],
    .sct-contact-form input[type="tel"],
    .sct-contact-form textarea {
        font-size:
            16px !important;
    }


    .sct-contact-form textarea {
        min-height:
            145px;
    }


    .sct-form-submit input[type="submit"] {
        width:
            100% !important;
    }


    .contact-form .wpcf7-spinner {
        position:
            absolute;

        right:
            14px;
    }
}