/**
 * Brothers Home Inspection - Hero Section Branding
 * Update hero info box from red to brand green, keeping original shape
 */

/* ===========================
   TESTIMONIALS SECTION - White Background
   =========================== */

/* Section background to white */
.elementor-element-a1fd186 {
  background-color: var(--white) !important;
}

/* Testimonial cards background to white */
.elementor-element-a1fd186 .testimonial-box {
  background-color: var(--white) !important;
}

/* ===========================
   HERO INFO BOX (Professional Workers)
   Keep the decorative shape (Subtract-3.png) but change color from red to brand green
   =========================== */

/* Container with the green shape background */
.elementor-element-84536de:not(.elementor-motion-effects-element-type-background),
.elementor-element-84536de > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  /* Remove any color overlays or blend modes that were applied */
  background-color: transparent !important;
  background-blend-mode: normal !important;
  /* Let the green Subtract-3.png show through */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Ensure text remains readable */
.elementor-element-84536de .elementor-widget-container {
  filter: none !important;
  color: inherit !important;
}

/* ===========================
   HERO TEXT SECTION - Responsive Fix
   Fix text overlapping image on mobile
   =========================== */

/* Fix layout on mobile - stack content vertically */
@media (max-width: 767px) {
  /* Container that holds the image - make it full width on mobile */
  .elementor-element-223519c {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-bottom: 30px !important;
  }

  /* Container that holds the text and buttons */
  .elementor-element-1de676d {
    padding-right: 20px !important;
    padding-left: 20px !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Text widget */
  .elementor-element-a38e07c {
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  .elementor-element-a38e07c p {
    text-align: center !important;
  }

  /* Button container - center on mobile */
  .elementor-element-c2c5fef {
    justify-content: center !important;
  }

  /* Fix "Roof Planning" section being cut off on the right side on mobile */
  .elementor-element-aeb5c21 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Alternative if filter approach doesn't work well:
   Use background-blend-mode to combine the shape with our brand color */
/*
.elementor-element-84536de:not(.elementor-motion-effects-element-type-background),
.elementor-element-84536de > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--brand-green) !important;
  background-blend-mode: overlay !important;
}
*/

/* ===========================
   HERO INFO BOX - Fix h2 and p spacing
   Reduce padding/margin to allow more text width
   =========================== */

/* Fix h2 title - reduce right padding/margin */
.elementor-element-fcd4d67 > .elementor-widget-container {
  padding-right: 10px !important;
  margin-right: 10px !important;
}

/* Fix paragraph text - add right padding/margin to stay inside box */
.elementor-element-fe706d0 > .elementor-widget-container {
  padding-right: 30px !important;
  margin-right: 15px !important;
}