/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 13 2026 | 00:04:15 */
/* =========================================================
   SECOND CREEK TECHNOLOGIES
   HOMEPAGE INDUSTRIES SECTION
   ========================================================= */


/* =========================================================
   01 — INDUSTRIES SECTION
   Clean dark visual reset after the light Process section.
   A subtle top edge softens the transition without a gradient.
   ========================================================= */

.industries-section {
    --industries-bg: #020d20;
    --industries-bg-mid: #03152d;
    --industries-bg-light: #061d3d;

    --industries-card: #061a36;
    --industries-card-deep: #041428;

    --industries-blue: #1677f2;
    --industries-blue-bright: #2b8cff;

    --industries-white: #ffffff;
    --industries-text: rgba(255, 255, 255, 0.82);
    --industries-text-soft: rgba(255, 255, 255, 0.68);

    --industries-border: rgba(43, 140, 255, 0.23);
    --industries-border-hover: rgba(43, 140, 255, 0.52);

    position: relative;
    isolation: isolate;

    width: 100% !important;

    margin: 0 !important;

    padding: 75px 24px 105px !important;

    overflow: hidden;

    box-sizing: border-box;

    border-top:
        1px solid rgba(43, 140, 255, 0.18);

    box-shadow:
        inset 0 14px 28px rgba(43, 140, 255, 0.035);

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(22, 119, 242, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(43, 140, 255, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            var(--industries-bg-light) 0%,
            var(--industries-bg-mid) 30%,
            var(--industries-bg) 100%
        );
}

/* =========================================================
   02 — SUBTLE TECH BACKGROUND
   Very faint grid and edge detail for depth.
   ========================================================= */

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

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.42;

    background-image:
        linear-gradient(
            rgba(59, 139, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(59, 139, 255, 0.035) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            transparent 28%,
            transparent 72%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            transparent 28%,
            transparent 72%,
            #000 100%
        );
}


/* Additional soft center glow */

.industries-section::after {
    content: "";

    position: absolute;

    z-index: 0;

    top: -140px;
    left: 50%;

    width: 900px;
    height: 420px;

    translate: -50% 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(22, 119, 242, 0.09) 0%,
            rgba(22, 119, 242, 0.025) 42%,
            transparent 72%
        );
}


/* =========================================================
   03 — INDUSTRIES INNER
   Main centered section width.
   ========================================================= */

.industries-inner {
    position: relative;
    z-index: 2;

    display: flex !important;
    flex-direction: column !important;

    width: min(100%, 1320px) !important;
    max-width: 1320px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    gap: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   04 — INDUSTRIES HEADING WRAPPER
   Centers the complete heading group above the card grid.
   ========================================================= */

.industries-heading-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    text-align: center !important;
}


/* =========================================================
   05 — INDUSTRIES EYEBROW
   Small blue uppercase section label.
   Forces classic Elementor Heading styling to match the site.
   ========================================================= */

.industries-eyebrow {
    width: auto !important;

    margin: 0 auto 14px !important;
    padding: 0 !important;

    text-align: center !important;
}

.industries-eyebrow,
.industries-eyebrow .elementor-widget-container,
.industries-eyebrow .elementor-heading-title,
.industries-eyebrow * {
    color: var(--industries-blue-bright) !important;

    font-family: "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 1.7px !important;
    text-transform: uppercase !important;
    text-align: center !important;
}


/* =========================================================
   06 — MAIN INDUSTRIES HEADING
   Large centered headline with blue second line.
   ========================================================= */

.industries-heading {
    width: 100% !important;
    max-width: 900px !important;

    margin: 0 auto 20px !important;
    padding: 0 !important;

    text-align: center !important;
}

.industries-heading .elementor-heading-title,
.industries-heading h2 {
    margin: 0 !important;
    padding: 0 !important;

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

    font-family: "Cormorant Garamond", serif !important;
    font-size: clamp(50px, 3.7vw, 64px) !important;
    font-weight: 500 !important;
    line-height: 1.02 !important;

    letter-spacing: -0.035em !important;
    text-align: center !important;
}

.industries-heading .elementor-heading-title span,
.industries-heading h2 span {
    color: var(--industries-blue-bright) !important;
}

/* =========================================================
   07 — INDUSTRIES INTRO
   Centered supporting copy below the main heading.
   ========================================================= */

.industries-intro {
    width: 100% !important;
    max-width: 720px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
}

.industries-intro .elementor-widget-container {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

.industries-intro p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--industries-text) !important;

    font-family: "Inter", sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;

    text-align: center !important;
}

/* =========================================================
   08 — INDUSTRIES GRID
   Desktop: 3 columns × 2 rows.
   Wider centered layout gives each industry card more presence.
   ========================================================= */

.industries-grid {
    display: grid !important;

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

    align-items: stretch !important;

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

    margin:
        52px auto 0 !important;

    padding: 0 !important;

    gap: 20px !important;
}


/* =========================================================
   09 — INDUSTRY CARD
   Informational card with restrained premium depth.
   ========================================================= */

.industry-card {
    position: relative;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100%;

    margin: 0 !important;

    padding:
        34px 30px 32px !important;

    gap: 0 !important;

    overflow: hidden;

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

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(43, 140, 255, 0.075),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            var(--industries-card) 0%,
            var(--industries-card-deep) 100%
        );

    box-shadow:
        0 10px 28px rgba(0, 5, 16, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.018);

    box-sizing: border-box;

    text-align: center;

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


/* =========================================================
   10 — CARD HOVER
   Subtle visual response without implying a required link.
   ========================================================= */

.industry-card:hover {
    translate: 0 -4px;

    border-color:
        var(--industries-border-hover);

    box-shadow:
        0 14px 34px rgba(0, 5, 16, 0.24),
        0 0 34px rgba(22, 119, 242, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* Small blue highlight at top */

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

    position: absolute;

    top: 0;
    left: 50%;

    width: 58px;
    height: 2px;

    translate: -50% 0;

    border-radius:
        0 0 999px 999px;

    background:
        var(--industries-blue-bright);

    opacity: 0;

    transition:
        width 0.28s ease,
        opacity 0.28s ease;
}

.industry-card:hover::before {
    width: 92px;
    opacity: 0.9;
}


/* =========================================================
   11 — INDUSTRY SVG ICON
   Prevent Elementor from applying fill/background colors
   to uploaded outline SVGs.
   ========================================================= */

.industry-card-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto;

    width: 66px !important;
    height: 66px !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    border:
        1px solid rgba(62, 151, 255, 0.65);

    border-radius: 50%;

    background: transparent !important;

    box-shadow:
        0 0 20px rgba(43, 140, 255, 0.06);

    box-sizing: border-box;
}


/* Elementor SVG widget wrappers */

.industry-card-icon,
.industry-card-icon > *,
.industry-card-icon .elementor-widget-container {
    background: transparent !important;
}


/* Actual SVG */

.industry-card-icon svg {
    display: block !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;

    background: transparent !important;

    fill: none !important;
}


/* Force all SVG shapes to remain unfilled */

.industry-card-icon svg path,
.industry-card-icon svg rect,
.industry-card-icon svg circle,
.industry-card-icon svg ellipse,
.industry-card-icon svg polygon,
.industry-card-icon svg polyline {
    fill: none !important;
}


/* Keep the original blue line work */

.industry-card-icon svg path,
.industry-card-icon svg rect,
.industry-card-icon svg circle,
.industry-card-icon svg ellipse,
.industry-card-icon svg polygon,
.industry-card-icon svg polyline,
.industry-card-icon svg line {
    stroke: #2e86ff !important;
}


/* Slight hover emphasis */

.industry-card:hover .industry-card-icon {
    border-color:
        rgba(62, 151, 255, 0.92);

    background:
        transparent !important;

    box-shadow:
        0 0 24px rgba(43, 140, 255, 0.13);
}
/* =========================================================
   12 — INDUSTRY CARD TITLE
   Supports Elementor's newer Heading atom.
   ========================================================= */

.industry-card-title {
    width: 100% !important;

    margin: 0 0 12px !important;
    padding: 0 !important;

    text-align: center !important;
}

.industry-card-title,
.industry-card-title * {
    color:
        var(--industries-white) !important;

    font-family:
        "Inter", sans-serif !important;

    font-size:
        21px !important;

    font-weight:
        700 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -0.02em !important;

    text-align:
        center !important;
}

.industry-card-title * {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   13 — INDUSTRY DESCRIPTION
   ========================================================= */

.industry-card-text {
    width: 100% !important;
    max-width: 330px;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
}

.industry-card-text .elementor-widget-container,
.industry-card-text p {
    margin: 0 !important;
    padding: 0 !important;
}

.industry-card-text p {
    color:
        var(--industries-text) !important;

    font-family:
        "Inter", sans-serif;

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.58;

    text-align:
        center !important;
}

/* =========================================================
   14 — TABLET
   768PX — 1200PX
   Two cards per row.
   ========================================================= */

@media (min-width: 768px) and (max-width: 1200px) {

    .industries-section {
        padding:
            75px 28px 92px !important;
    }

    .industries-heading {
        max-width:
            820px !important;
    }

    .industries-heading .elementor-heading-title {
        font-size:
            clamp(44px, 5.5vw, 56px);
    }

    .industries-intro {
        max-width:
            680px !important;
    }

    .industries-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        margin:
            44px 0 0 !important;

        gap:
            18px !important;
    }

    .industry-card {
        padding:
            32px 26px 30px !important;
    }

    .industry-card-title,
    .industry-card-title * {
        font-size:
            21px !important;
    }

    .industry-card-text p {
        font-size:
            14.5px;
    }

}


/* =========================================================
   15 — MOBILE
   767PX AND BELOW
   One card per row.
   ========================================================= */

@media (max-width: 767px) {

    .industries-section {
        padding:
            75px 15px 80px !important;
    }

    .industries-eyebrow {
        margin-bottom:
            11px !important;
    }

    .industries-heading {
        max-width:
            560px !important;

        margin-bottom:
            15px !important;
    }

    .industries-heading .elementor-heading-title {
        font-size:
            clamp(38px, 10vw, 46px);

        line-height:
            1.04;
    }

    .industries-intro {
        max-width:
            560px !important;
    }

    .industries-intro p {
        font-size:
            15.5px;

        line-height:
            1.58;
    }

    .industries-grid {
        grid-template-columns:
            1fr !important;

        margin:
            36px 0 0 !important;

        gap:
            15px !important;
    }

    .industry-card {
        padding:
            30px 22px 28px !important;

        border-radius:
            13px;
    }

    .industry-card-icon {
        width:
            62px !important;

        height:
            62px !important;

        margin-bottom:
            18px !important;
    }

    .industry-card-icon svg,
    .industry-card-icon img {
        width:
            34px !important;

        height:
            34px !important;
    }

    .industry-card-title,
    .industry-card-title * {
        font-size:
            20px !important;
    }

    .industry-card-text {
        max-width:
            390px;
    }

    .industry-card-text p {
        font-size:
            14.5px;
    }

}


/* =========================================================
   16 — SMALL MOBILE
   480PX AND BELOW
   ========================================================= */

@media (max-width: 480px) {

    .industries-section {
        padding:
            75px 15px 74px !important;
    }

    .industries-heading .elementor-heading-title {
        font-size:
            38px;
    }

    .industries-intro p {
        font-size:
            15px;
    }

    .industry-card {
        padding:
            28px 19px 27px !important;
    }

    .industry-card-icon {
        width:
            60px !important;

        height:
            60px !important;
    }

    .industry-card-icon svg,
    .industry-card-icon img {
        width:
            33px !important;

        height:
            33px !important;
    }

}


/* =========================================================
   17 — REDUCED MOTION
   Accessibility preference.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .industry-card,
    .industry-card::before,
    .industry-card-icon {
        transition:
            none !important;
    }

    .industry-card:hover {
        translate:
            0;
    }

}