/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 10 2026 | 10:31:47 */
/* =========================================================
   05 — SECOND CREEK HERO BACKGROUND IMAGES

   The hero artwork is controlled directly through CSS.

   Elementor settings that should remain cleared:
   Hero Outer → Style → Background
   Hero Outer → Style → Background Overlay
   ========================================================= */


/* =========================================================
   SHARED HERO BACKGROUND SETTINGS
   ========================================================= */

.sct-hero {
    background-color: #f8fbff !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}


/* =========================================================
   DESKTOP BACKGROUND
   1201PX AND WIDER

   The background remains full width because it already scales
   according to the viewport. It should not be reduced by 25%
   like the fixed-pixel typography and interface components.

   The 44% vertical position moves the illustration slightly
   above center while keeping the servers anchored right.
   ========================================================= */

@media screen and (min-width: 1201px) {

    .sct-hero {
        background-image:
            url("/wp-content/uploads/2026/08/SCT_HERO_DESKTOP-2090x1176-1.webp") !important;

        background-size: cover !important;
        background-position: right 44% !important;
    }
}


/* =========================================================
   TABLET BACKGROUND
   768PX THROUGH 1200PX

   Uses the separately composed portrait/tablet artwork.
   ========================================================= */

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

    .sct-hero {
        background-image:
            url("/wp-content/uploads/2026/08/SCT_HERO_TABLET.webp") !important;

        background-size: 115% auto !important;
        background-position: 0 -60px !important;
    }
}


/* =========================================================
   MOBILE BACKGROUND
   767PX AND NARROWER

   Uses the separately composed phone artwork.
   ========================================================= */

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

    .sct-hero {
        background-image:
			url("/wp-content/uploads/2026/08/SCT_HERO_PHONE.webp") !important;
        background-size: 125% auto !important;
        background-position: 15% -60px !important;
    }
}