.elementor-498 .elementor-element.elementor-element-950db43{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-498 .elementor-element.elementor-element-459a41d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS *//* =========================================
   Neighborly Hauling — About Page CSS (FULL BLOCK)
   Scope: ONLY elements inside <section class="nh-about">…</section>
   Goal:
   - Book Now + Phone = red square-ish boxes w/ shadow, reverse on hover
   - Product pills = red pills w/ white text, reverse on hover
   - “Neighborly Difference” = SIMPLE BULLET LIST (no box/pills)
   - FAQ expander stays BLUE (not red), spacing consistent
   Fix:
   - CTA buttons were tall because <br> tags exist inside the <a> tags
========================================= */

.nh-about {
  width: 100%;
}

/* =========================
   CTA ROW LAYOUT
========================= */
.nh-about .nh-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 16px 0 6px;
}

/* Remove paragraph spacing inside CTA row (Elementor Text Editor often wraps links in <p>) */
.nh-about .nh-cta-row p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Your HTML has <br> inside the CTA <a> tags — that makes the buttons tall.
   Hide those line breaks so the button height is normal. */
.nh-about .nh-cta-row a.nh-btn-primary br,
.nh-about .nh-cta-row a.nh-btn-phone br {
  display: none !important;
}

/* =========================
   BOOK NOW + PHONE (square-ish boxes)
   Fixes: elongated pill + stretched anchor issues from theme/Elementor
========================= */
.nh-about .nh-cta-row a.nh-btn-primary,
.nh-about .nh-cta-row a.nh-btn-phone {
  /* hard overrides for Elementor/theme anchor defaults */
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;

  border-radius: 10px !important; /* box, not pill */
  padding: 14px 18px !important;
  min-height: 48px !important;
  line-height: 1.2 !important;
  white-space: nowrap;

  font-weight: 800;
  background: #b31942;
  color: #ffffff !important;
  border: 2px solid #b31942;

  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  text-decoration: none !important;

  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: background .2s ease, color .2s ease, transform .08s ease;
}

.nh-about .nh-cta-row a.nh-btn-primary:hover,
.nh-about .nh-cta-row a.nh-btn-phone:hover {
  background: #ffffff;
  color: #b31942 !important;
}

.nh-about .nh-cta-row a.nh-btn-primary:active,
.nh-about .nh-cta-row a.nh-btn-phone:active {
  transform: translateY(1px);
}

/* =========================
   “NEIGHBORLY DIFFERENCE” — SIMPLE BULLET LIST
   Current markup:
   <div class="nh-value-pills">
     <ul>
       <li class="nh-pill">...</li>
     </ul>
   </div>
   We remove the pill/box styles and restore a clean list.
========================= */
.nh-about .nh-value-pills {
  /* stop flex/pill layout from earlier versions */
  display: block !important;
  margin-top: 10px;
}

/* Make the UL look like a normal bullet list */
.nh-about .nh-value-pills ul {
  margin: 10px 0 0 20px !important;  /* left indent for bullets */
  padding: 0 !important;
  list-style: disc !important;
}

/* Kill pill styling on list items */
.nh-about .nh-value-pills .nh-pill,
.nh-about .nh-value-pills li.nh-pill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;

  display: list-item !important;
  padding: 0 !important;
  margin: 6px 0 !important;

  border-radius: 0 !important;
  font-weight: 600; /* optional: slightly emphasized, still “simple” */
}

/* =========================
   PRODUCT PILLS (stay pills)
========================= */
.nh-about .nh-product-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.nh-about .nh-product-pills a {
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 800;

  background: #b31942;
  color: #ffffff !important;
  border: 2px solid #b31942;

  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap;

  align-items: center;
  justify-content: center;
  text-decoration: none !important;

  transition: background .2s ease, color .2s ease, transform .08s ease;
}

.nh-about .nh-product-pills a:hover {
  background: #ffffff;
  color: #b31942 !important;
}

.nh-about .nh-product-pills a:active {
  transform: translateY(1px);
}

/* =========================
   FAQ EXPANDER (keep BLUE)
   Scoped to nh-faq only to avoid touching other details elements
========================= */
.nh-about details.nh-faq > summary {
  background: #0a3161 !important; /* Neighborly blue */
  color: #ffffff !important;
  border: 2px solid #0a3161 !important;

  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Keep icons/text inside summary blue/white */
.nh-about details.nh-faq > summary * {
  color: inherit !important;
}

/* Optional: body styling inside FAQ */
.nh-about .nh-faq-body {
  padding: 10px 14px 14px;
}

/* Prevent default marker spacing weirdness in some browsers */
.nh-about details.nh-faq > summary::-webkit-details-marker {
  display: none;
}

/* =========================
   SAFETY: do NOT recolor generic details/summary
   Avoid broad body.elementor-page-498s like: .nh-about details summary {...}
========================= *//* End custom CSS */