/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 12 2026 | 23:55:39 */
/* =========================================================
   SECOND CREEK TECHNOLOGIES
   HOMEPAGE SERVICES SECTION
   ========================================================= */

/* =========================================================
   01 — SERVICES SECTION
   Light premium transition after the dark Why section.
   Extra top breathing room separates it from the Why section.
   ========================================================= */

.services-section {
    --services-bg: #f7faff;
    --services-bg-deep: #f1f6fc;

    --services-heading: #111638;
    --services-copy: #526176;

    --services-navy: #06172f;
    --services-navy-mid: #081d3b;
    --services-navy-deep: #031123;

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

    --services-white: #ffffff;
    --services-card-copy: rgba(255, 255, 255, 0.82);

    --services-card-border: rgba(43, 140, 255, 0.20);

    position: relative;
    isolation: isolate;

    width: 100% !important;

    margin: 0 !important;

    padding: 100px 24px 55px !important;

    overflow: hidden;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 8% 17%,
            rgba(22, 119, 242, 0.075),
            transparent 25%
        ),
        radial-gradient(
            circle at 91% 68%,
            rgba(22, 119, 242, 0.055),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fcfdff 0%,
            var(--services-bg) 46%,
            var(--services-bg-deep) 100%
        );
}


/* =========================================================
   02 — SUBTLE TECH BACKGROUND
   Keeps the light section from feeling flat or plain.
   ========================================================= */

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

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.48;

    background-image:
        linear-gradient(
            rgba(22, 119, 242, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(22, 119, 242, 0.025) 1px,
            transparent 1px
        );

    background-size: 52px 52px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            #000 14%,
            #000 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            #000 14%,
            #000 88%,
            transparent 100%
        );
}


/* =========================================================
   03 — SERVICES INNER
   Main centered content width.
   ========================================================= */

.services-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 — SECTION HEADING WRAPPER
   Heading group remains centered; grid controls the space below.
   ========================================================= */

.services-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;
}

/* =========================================================
   05 — SERVICES EYEBROW
   Classic Heading widget using DIV tag.
   ========================================================= */

.services-eyebrow {
    width: auto !important;

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

.services-eyebrow .elementor-heading-title {
    margin: 0 !important;

    color: var(--services-blue);

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

    letter-spacing: 1.6px;
    text-transform: uppercase;
}


/* =========================================================
   06 — MAIN SERVICES HEADING
   Classic Heading widget.
   Second line is wrapped in SPAN and appears blue.
   ========================================================= */

.services-heading {
    width: 100% !important;
    max-width: 920px !important;

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

.services-heading .elementor-heading-title {
    margin: 0 !important;

    color: var(--services-heading);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(48px, 4vw, 64px);
    font-weight: 500;
    line-height: 1.03;

    letter-spacing: -0.035em;
}

.services-heading .elementor-heading-title span {
    color: var(--services-blue);
}


/* =========================================================
   07 — SERVICES INTRODUCTION
   ========================================================= */

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

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

.services-intro .elementor-widget-container,
.services-intro p {
    margin: 0 !important;
    padding: 0 !important;
}

.services-intro p {
    color: var(--services-copy);

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


/* =========================================================
   08 — SERVICES GRID
   Desktop: 4 columns × 2 rows.
   Spacing above grid separates cards from section introduction.
   ========================================================= */

.services-grid {
    display: grid !important;

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

    align-items: stretch !important;

    width: 100% !important;

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

    gap: 20px !important;
}


/* =========================================================
   09 — SERVICE CARD
   Entire card is intended to act as the link.
   ========================================================= */
.service-card {
    position: relative;

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

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

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

    gap: 0 !important;

    overflow: hidden;

    border:
        1px solid var(--services-card-border);

    border-radius: 14px;

    background:
        var(--services-navy);

    box-shadow:
        0 8px 22px rgba(12, 38, 74, 0.07),
        0 22px 48px rgba(12, 38, 74, 0.09);

    cursor: pointer;

    box-sizing: border-box;

    transform: translateY(0);

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


/* Premium card hover */

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-6px);

    border-color:
        rgba(43, 140, 255, 0.52);

    box-shadow:
        0 12px 28px rgba(11, 39, 78, 0.11),
        0 28px 58px rgba(13, 46, 90, 0.14);
}


/* =========================================================
   10 — CARD IMAGE WRAPPER
   Maintains consistent 16:9 image presentation.
   ========================================================= */

.service-card-image-wrap {
    position: relative;

    display: block !important;

    flex: 0 0 auto;

    width: 100% !important;

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

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        var(--services-navy-deep);
}


/* Subtle transition between image and dark card body */

.service-card-image-wrap::after {
    content: "";

    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(3, 17, 35, 0.30) 100%
        );
}


/* =========================================================
   11 — ELEMENTOR SERVICE IMAGE
   Actual image remains editable directly in Elementor.
   ========================================================= */

.service-card-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

.service-card-image .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;

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

    overflow: hidden;
}

.service-card-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    object-fit: cover;
    object-position: center;

    transition:
        scale 0.48s ease,
        filter 0.38s ease;
}


/* Restrained image zoom on hover */

.service-card:hover .service-card-image img,
.service-card:focus-within .service-card-image img {
    scale: 1.035;

    filter:
        saturate(1.04)
        contrast(1.025);
}


/* =========================================================
   12 — CARD BODY
   Dark lower portion stretches to keep cards aligned.
   ========================================================= */

.service-card-body {
    position: relative;

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

    flex: 1 1 auto;

    width: 100% !important;

    margin: 0 !important;

    padding:
        39px 22px 22px !important;

    gap: 0 !important;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            var(--services-navy-mid) 0%,
            var(--services-navy) 48%,
            var(--services-navy-deep) 100%
        );
}


/* Very subtle blue depth behind card content */

.service-card-body::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(43, 140, 255, 0.11),
            transparent 36%
        );
}


/* Keep actual card content above background decoration */

.service-card-body > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   13 — SERVICE ICON BADGE
   Overlaps the image/body seam.
   ========================================================= */

.service-card-icon {
    position: absolute !important;

    top: 0;
    left: 22px;

    translate: 0 -50%;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    height: 52px !important;

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

    border:
        1px solid rgba(102, 180, 255, 0.72);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #1c88ff 0%,
            #0869e9 52%,
            #0755bd 100%
        );

    box-shadow:
        0 0 0 5px rgba(5, 28, 58, 0.90),
        0 8px 20px rgba(3, 75, 175, 0.30);

    overflow: hidden;
}


/* Icon inner wrapper */

.service-card-icon .elementor-widget-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

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


/* SVG / PNG icon sizing */

.service-card-icon img,
.service-card-icon svg {
    display: block;

    width: 27px !important;
    height: 27px !important;

    margin: 0 !important;

    object-fit: contain;
}

/* =========================================================
   14 — SERVICE CARD TITLE
   Supports both classic Elementor headings and new Heading atoms.
   Bright white and left aligned for maximum readability.
   ========================================================= */

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

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

    text-align: left !important;
}

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

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

    letter-spacing: -0.02em !important;

    text-align: left !important;
}

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


/* =========================================================
   15 — SERVICE CARD DESCRIPTION
   Larger and brighter for easier scanning and readability.
   ========================================================= */

.service-card-text {
    width: 100% !important;

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

    text-align: left !important;
}

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

.service-card-text p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--services-card-copy) !important;

    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.58;

    text-align: left !important;
}


/* =========================================================
   16 — LEARN MORE
   Visual label only; outer card handles navigation.
   Guaranteed separation from description while remaining
   aligned along the bottom of equal-height cards.
   ========================================================= */

.service-card-link {
    width: auto !important;

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

    color: var(--services-blue-bright);

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

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    text-align: left !important;
}

.service-card-link-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: inherit;
}

.service-card-link-arrow {
    display: inline-block;

    transition:
        translate 0.22s ease;
}

.service-card:hover .service-card-link-arrow,
.service-card:focus-within .service-card-link-arrow {
    translate: 5px 0;
}


/* =========================================================
   17 — SUBTLE CARD HOVER ACCENT
   Small blue line appears along the bottom edge.
   ========================================================= */

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

    position: absolute;

    z-index: 5;

    left: 22px;
    bottom: 0;

    width: 42px;
    height: 2px;

    border-radius:
        999px 999px 0 0;

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

    opacity: 0;

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

.service-card:hover::after,
.service-card:focus-within::after {
    width: 74px;
    opacity: 1;
}


/* =========================================================
   18 — TABLET
   768PX — 1200PX
   Two cards per row with tablet-specific spacing and typography.
   ========================================================= */

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

    .services-section {
        padding:
            100px 28px 94px !important;
    }

    .services-heading-wrap {
        margin-bottom:
            0 !important;
    }

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

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

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

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

        margin:
            40px 0 0 !important;

        gap:
            18px !important;
    }

    .service-card-body {
        padding:
            40px 24px 24px !important;
    }

    /* Supports the new Elementor Heading atom */
    .service-card-title,
    .service-card-title * {
        font-size:
            20px !important;
    }

    .service-card-text p {
        font-size:
            15px;
    }

}

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

@media (max-width: 767px) {

    .services-section {
        padding:
        80px 15px 78px !important;
		 margin-top: -80px !important;
    }

    .services-heading-wrap {
        margin-bottom:
            0 !important;
    }

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

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

        margin-bottom:
            15px !important;
    }

    .services-heading .elementor-heading-title {
        font-size:
            clamp(36px, 10vw, 44px);

        line-height:
            1.05;
    }

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

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

        line-height:
            1.58;
    }

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

        gap:
            16px !important;
    }

    .service-card {
        border-radius:
            13px;
    }

    .service-card-body {
        padding:
            39px 21px 21px !important;
    }

    .service-card-icon {
        left:
            21px;

        width:
            50px !important;

        height:
            50px !important;
    }

    .service-card-icon img,
    .service-card-icon svg {
        width:
            26px !important;

        height:
            26px !important;
    }

    .service-card-title {
        margin-bottom:
            9px !important;
    }

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

    .service-card-text {
        margin-bottom:
            17px !important;
    }

    .service-card-text p {
        font-size:
            15px;
    }

}


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

@media (max-width: 480px) {

    .services-section {
        padding:
           80px 15px 72px !important;
    }

    .services-heading .elementor-heading-title {
        font-size:
            36px;
    }

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

    .service-card-body {
        padding:
            38px 19px 20px !important;
    }

    .service-card-icon {
        left:
            19px;
    }

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

    .service-card-text p {
        font-size:
            15px;
    }

}


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

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

    .service-card,
    .service-card-image img,
    .service-card-link-arrow,
    .service-card::after {
        transition:
            none !important;
    }

    .service-card:hover,
    .service-card:focus-within {
        translate:
            0;
    }

    .service-card:hover .service-card-image img,
    .service-card:focus-within .service-card-image img {
        scale:
            1;
    }

}