/* ============================================================
   ROOFLINE IMAGE + LOW INTEREST BANNER — MASTER CSS
   Goal:
   - RoofingBGContent.png shows full width, no margins
   - Text/buttons start from directly below the image (no gap)
   - White gradient boxes completely removed
   - NEW ROOF and $99/Month are YELLOW (#f2b705)
   - "See if you Qualify" and "from" text is DARK NAVY (#051f3d)
   ============================================================ */

/* 1. ROOFLINE IMAGE — full width, flush, no side margins */
img[src*="RoofingBGContent.png"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 2. KILL WHITE BOXES — the u-gradient u-group div on subpages */
.u-gradient.u-group,
.u-container-style.u-gradient.u-group,
div.u-gradient.u-group {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.u-gradient.u-group > .u-container-layout {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

/* 3. SUBPAGES — gradient div sits immediately after the image.
   Pull it up so it starts right at the bottom edge of the image
   (margin-top: 0 = flush under image, no gap, no overlap) */
img[src*="RoofingBGContent.png"] + .u-gradient.u-group,
img[src*="RoofingBGContent.png"] + .u-container-style.u-gradient.u-group {
  margin-top: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* 4. INDEX.HTML — h4 text is direct sibling after image */
img[src*="RoofingBGContent.png"] + .ge-low-interest-banner-text {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
  display: block !important;
}

/* 5. INDEX — also remove old nicepage negative margin on .u-section-3 .u-text-1 */
.u-section-3 .u-text-1.ge-low-interest-banner-text {
  margin-top: 0 !important;
}

/* 6. YELLOW TEXT — NEW ROOF and $99/Month */
.ge-low-interest-banner-text {
  color: #051f3d !important;
  -webkit-text-fill-color: #051f3d !important;
  text-shadow: none !important;
  background: transparent !important;
  line-height: 1.2 !important;
}
.ge-low-interest-banner-text * {
  background: transparent !important;
}
.ge-low-interest-banner-text br + span,
.ge-low-interest-banner-text span,
.ge-low-interest-banner-text .u-text-custom-color-1,
.ge-low-interest-banner-text span[style] {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
}

/* 7. Buttons stay visible, no z-index fights */
.u-section-3 .u-btn-1,
.u-section-3 .u-btn-2,
.u-gradient.u-group ~ .u-btn-1,
.u-gradient.u-group ~ .u-btn-2 {
  position: relative !important;
  z-index: 3 !important;
}

/* 8. u-section-2 image (separate from roofline) */
.u-section-2 .u-image-1 {
  width: 100% !important;
  height: auto !important;
  max-width: 700px !important;
  margin: 0 !important;
  display: block !important;
}

/* ============================================================
   BANNER ABOVE RESIDENTIAL/COMMERCIAL BUTTONS (index.html)
   Sits under the chevron image, above the 2 yellow boxes
   ============================================================ */
.ge-res-com-banner {
  display: block !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
  padding: 14px 10px 10px !important;
  background: transparent !important;
  width: 100% !important;
  color: #051f3d !important;
  -webkit-text-fill-color: #051f3d !important;
}
.ge-res-com-banner span,
.ge-res-com-banner .u-text-custom-color-1,
.ge-res-com-banner span[style] {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
}

/* ============================================================
   CENTERED TEXT — General Remodel pages
   ADU, Kitchen, Bathroom, Mold Remediation
   ============================================================ */
.ge-low-interest-centered {
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   INDEX — push RESIDENTIAL/COMMERCIAL buttons down 20px
   ============================================================ */
.ge-btn-push-down,
.u-section-3 .u-btn-1,
.u-section-3 .u-btn-2 {
  margin-top: 20px !important;
  position: relative !important;
  z-index: 3 !important;
}

/* ============================================================
   INDEX — ge-res-com-banner: no blue highlight box
   ============================================================ */
.ge-res-com-banner {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-text-fill-color: #051f3d;
  padding: 8px 0 !important;
  margin: 0 0 0 0 !important;
  display: block !important;
  text-align: center !important;
}
.ge-res-com-banner * {
  background: transparent !important;
}
.ge-res-com-banner span,
.ge-res-com-banner span[style],
.ge-res-com-banner .u-text-custom-color-1 {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
}

/* ============================================================
   INSURANCE CLAIM PAGE — qualify banner + h1
   ============================================================ */
.ge-ins-qualify-banner {
  display: block !important;
  text-align: center !important;
  font-size: 1.5rem !important;
  color: #051f3d !important;
  -webkit-text-fill-color: #051f3d !important;
  background: transparent !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}
.ge-ins-qualify-banner span,
.ge-ins-qualify-banner span[style],
.ge-ins-qualify-banner .u-text-custom-color-1 {
  color: #f2b705 !important;
  -webkit-text-fill-color: #f2b705 !important;
}

.ge-ins-main-h1 {
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 800 !important;
  color: #051f3d !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.2 !important;
}

/* ============================================================
   REMOVE WHITE BOX after banner slider — u-section-3
   ============================================================ */
.u-section-3 {
  background-color: transparent !important;
  background-image: none !important;
}
/* Also close any gap between section-2 (slider) and section-3 */
.u-section-2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.u-section-3 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   KILL u-white on u-section-3 — removes white box after banner
   ============================================================ */
.u-white.u-section-3,
.u-section-3.u-white {
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================================
   KILL WHITE BOX between banner (u-section-2) and content
   ============================================================ */

/* Extend section-2 bg fully — no bottom gap */
.u-section-2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Section-3: fully transparent, no top gap */  
.u-section-3 {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* The layout wrap inside section-3 was pushing down 57px — kill it */
.u-section-3 .u-layout-wrap-1 {
  margin-top: 0 !important;
}

/* nicepage white background on u-sheet inside section-3 */
.u-section-3 .u-sheet-1 {
  background: transparent !important;
  background-color: transparent !important;
}

/* The u-section-2 yellow/gold border at bottom — stretch it flush */
section.u-section-2.ge-shingle-bg-fix {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   FREE ROOF PROGRAM IMAGE — dropped down below qualify text
   ============================================================ */
.ge-free-roof-drop {
  display: block !important;
  width: 100% !important;
  margin-top: 32px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================
   INDEX — center qualify text under chevron image
   ============================================================ */
.u-section-3 .ge-low-interest-banner-text,
.u-container-layout-1 .ge-low-interest-banner-text {
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* ============================================================
   CENTER LOW-INTEREST BANNER on General Remodel pages
   (override the img-sibling left-align rule above)
   ADU, Kitchen, Bathroom, Mold Remediation
   ============================================================ */
img[src*="RoofingBGContent.png"] + .ge-low-interest-banner-text.ge-low-interest-centered {
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: 700px !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  box-sizing: border-box !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}