/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Aug 22 2026 | 04:16:22 */ /* ========================================================= 08 — SECOND CREEK HERO MOBILE Required Elementor structure: Hero Copy ├── Original Hero Title ├── Original Hero Description ├── Original Hero Actions ├── Mobile Content Panel — sct-hero-mobile-panel │ ├── Duplicated Hero Title │ ├── Duplicated Hero Description │ └── Duplicated Hero Actions └── Trust Section The original widgets remain visible on desktop/tablet. The duplicated panel appears only on mobile. The dedicated phone artwork remains controlled through: 05 — Second Creek Hero Background Images. ========================================================= */ @media screen and (max-width: 767px) { /* ===================================================== MOBILE HERO HEIGHT Uses the available viewport below the mobile header. The global site variable is preferred. If it does not exist, the hero uses a 90px fallback header height. ===================================================== */ /* ===================================================== MOBILE TRANSPARENT HEADER / HERO OVERLAP ===================================================== */ body.home .sct-site-header { position: relative !important; z-index: 9999 !important; background: transparent !important; } body.home .sct-hero { margin-top: calc(0px - var(--mobile-header-height, 90px)) !important; position: relative !important; /* Important: don't trap the buttons in a low stacking context */ z-index: auto !important; } .sct-hero .sct-hero-mobile-panel { position: relative !important; z-index: 20 !important; } .sct-hero .sct-hero-mobile-panel .sct-hero-actions { position: relative !important; z-index: 50 !important; } .sct-hero { --sct-mobile-header-height: var(--mobile-header-height, 90px); width: 100% !important; height: auto !important; min-height: min(calc(100svh + 33px), calc(222.104vw - 60px)) !important; max-height: none !important; overflow: hidden !important; } /* ===================================================== MOBILE HERO INNER ===================================================== */ .sct-hero .sct-hero-inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: min(calc(100svh + 33px), calc(222.104vw - 60px)) !important; max-height: none !important; margin: 0 !important; padding: 45px 20px 26px !important; box-sizing: border-box !important; } /* ===================================================== MOBILE HERO COPY ===================================================== */ .sct-hero .sct-hero-copy { position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex: none !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; justify-content: flex-start !important; width: 100% !important; inline-size: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ===================================================== MOBILE / DESKTOP CONTENT VISIBILITY Hides only the original widgets that are direct children of Hero Copy. The duplicated mobile widgets stay visible. ===================================================== */ .sct-hero .sct-hero-copy > .sct-hero-title, .sct-hero .sct-hero-copy > .sct-hero-description, .sct-hero .sct-hero-copy > .sct-hero-actions { display: none !important; } /* ===================================================== MOBILE CONTENT PANEL ===================================================== */ .sct-hero .sct-hero-mobile-panel { display: flex !important; flex: none !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: auto !important; flex-direction: column !important; align-items: stretch !important; align-self: flex-start !important; justify-content: flex-start !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; block-size: auto !important; min-height: 0 !important; min-block-size: 0 !important; max-height: none !important; max-block-size: none !important; gap: 0 !important; /* * Preserves the established mobile text placement. * Adjust only this value when moving the entire mobile * heading, description, and button group together. */ margin: clamp(56px, 8svh, 86px) 0 0 !important; padding: 0 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; overflow: visible !important; } /* ===================================================== MOBILE HEADING ===================================================== */ .sct-hero .sct-hero-mobile-panel .sct-hero-title { position: static !important; display: block !important; flex: 0 0 auto !important; align-self: stretch !important; width: 100% !important; inline-size: 100% !important; max-width: none !important; max-inline-size: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: var(--sct-navy) !important; font-size: clamp(38px, 9.7vw, 44px) !important; font-weight: 500 !important; line-height: 1.06 !important; letter-spacing: -0.03em !important; text-align: left !important; text-wrap: normal !important; white-space: normal !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; transform: none !important; } .sct-hero .sct-hero-mobile-panel .sct-hero-title h1, .sct-hero .sct-hero-mobile-panel .sct-hero-title h2, .sct-hero .sct-hero-mobile-panel .sct-hero-title h3, .sct-hero .sct-hero-mobile-panel .sct-hero-title .elementor-heading-title { display: block !important; width: 100% !important; inline-size: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-align: left !important; white-space: normal !important; overflow: visible !important; overflow-wrap: normal !important; word-break: normal !important; } /* ===================================================== MOBILE DESCRIPTION ===================================================== */ .sct-hero .sct-hero-mobile-panel .sct-hero-description { display: block !important; flex: 0 0 auto !important; align-self: stretch !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 22px 0 0 !important; padding: 0 !important; color: var(--sct-copy) !important; font-size: 17px !important; line-height: 1.58 !important; text-align: left !important; } .sct-hero .sct-hero-mobile-panel .sct-hero-description p { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* ===================================================== MOBILE BUTTON ROW ===================================================== */ .sct-hero .sct-hero-mobile-panel .sct-hero-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; gap: 14px !important; margin: 42px 0 0 !important; padding: 0 !important; } /* ===================================================== MOBILE BUTTON WIDGET WRAPPERS ===================================================== */ .sct-hero .sct-hero-mobile-panel .sct-hero-btn-primary, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-secondary { display: block !important; flex: none !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ===================================================== ACTUAL MOBILE BUTTON ELEMENTS Restores a mobile-appropriate 15px font after the desktop button calibration reduced the shared size. ===================================================== */ .sct-hero .sct-hero-mobile-panel .sct-hero-btn-primary > a, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-primary > button, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-primary .elementor-button, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-primary .e-n-button, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-secondary > a, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-secondary > button, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-secondary .elementor-button, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-secondary .e-n-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; inline-size: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 56px !important; margin: 0 !important; padding: 0 18px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; box-sizing: border-box !important; } /* Keep button wording and arrows centered */ .sct-hero .sct-hero-mobile-panel .sct-hero-btn-primary span, .sct-hero .sct-hero-mobile-panel .sct-hero-btn-secondary span { width: auto !important; max-width: 100% !important; white-space: nowrap !important; } /* ===================================================== MOBILE TRUST BAR The desktop/tablet trust bar remains hidden on phones. ===================================================== */ .sct-hero .sct-hero-trust { display: none !important; } /* * No Elementor background-overlay positioning belongs in * this block. Mobile artwork is controlled in snippet 05. */ }