.elementor-14387 .elementor-element.elementor-element-f1629dc{--display:flex;}.elementor-14387 .elementor-element.elementor-element-7c05d7e{--display:flex;}/* Start custom CSS for html, class: .elementor-element-08a6a39 *//* ==========================================================================
   TEMPCO — Gas Heater Servicing & Repairs page
   Responsive additions only — main HTML is fully self-contained
   Paste into Elementor → Page Settings → Custom CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   FULL-WIDTH BREAKOUT — forces the wrapper to span 100vw regardless of
   Elementor's section container width. Without this, the page sits
   inside the default 1140px container with empty space on each side.
   -------------------------------------------------------------------------- */
.tempco-services {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* --------------------------------------------------------------------------
   CONTAINER — controls inner content width INSIDE the full-bleed wrapper
   The wrapper goes edge-to-edge; .ts-container caps content at 1240px
   -------------------------------------------------------------------------- */
.tempco-services .ts-container {
  width: 100% !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}
.tempco-services .ts-container--narrow {
  max-width: 880px !important;
}

/* --------------------------------------------------------------------------
   HERO — 2 column inner layout
   -------------------------------------------------------------------------- */
.tempco-services .ts-hero {
  padding: 80px 0 !important;
  background: linear-gradient(135deg, #F7F8FA 0%, #FFFFFF 100%);
}

.tempco-services .ts-hero__inner {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.tempco-services .ts-hero__content { max-width: 640px; }

.tempco-services .ts-hero__media img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05) !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.tempco-services .ts-hero__cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

@media (max-width: 900px) {
  .tempco-services .ts-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .tempco-services .ts-hero__media { order: -1; }
}

/* --------------------------------------------------------------------------
   WHAT'S INCLUDED — 2 column → 1 on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .tempco-services section > .ts-container > div[style*="repeat(2"][style*="20px 32px"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WARNING GRID — 4 col → 2 col → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-warning-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .tempco-services .ts-warning-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WHY SERVICE — 6 cards in 3 col → 2 → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .tempco-services .ts-why-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   SYSTEMS WE SERVICE — 3 col → 1
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .tempco-services .ts-systems-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   BRANDS — 4 col → 2 → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-brands-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .tempco-services .ts-brands-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WHY CHOOSE — 3 col → 2 → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-whychoose-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .tempco-services .ts-whychoose-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on Why Choose cards */
.tempco-services .ts-whychoose-grid > div {
  transition: all 0.25s ease;
}
.tempco-services .ts-whychoose-grid > div:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(245,166,35,0.4) !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   RELATED SERVICES — 3 col → 1
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .tempco-services .ts-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on related service cards */
.tempco-services .ts-related-grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
  border-color: #C8102E !important;
}

/* --------------------------------------------------------------------------
   SHOWCASE — 2 col → 1 on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tempco-services .ts-showcase__inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Showcase stat row collapses on very narrow screens */
@media (max-width: 480px) {
  .tempco-services .ts-showcase__content > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}/* End custom CSS */
/* Start custom CSS *//* ==========================================================================
   TEMPCO — Gas Heater Servicing & Repairs page
   Responsive additions only — main HTML is fully self-contained
   Paste into Elementor → Page Settings → Custom CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   FULL-WIDTH BREAKOUT — forces the wrapper to span 100vw regardless of
   Elementor's section container width. Without this, the page sits
   inside the default 1140px container with empty space on each side.
   -------------------------------------------------------------------------- */
.tempco-services {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* --------------------------------------------------------------------------
   CONTAINER — controls inner content width INSIDE the full-bleed wrapper
   The wrapper goes edge-to-edge; .ts-container caps content at 1240px
   -------------------------------------------------------------------------- */
.tempco-services .ts-container {
  width: 100% !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}
.tempco-services .ts-container--narrow {
  max-width: 880px !important;
}

/* --------------------------------------------------------------------------
   HERO — 2 column inner layout
   -------------------------------------------------------------------------- */
.tempco-services .ts-hero {
  padding: 80px 0 !important;
  background: linear-gradient(135deg, #F7F8FA 0%, #FFFFFF 100%);
}

.tempco-services .ts-hero__inner {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.tempco-services .ts-hero__content { max-width: 640px; }

.tempco-services .ts-hero__media img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05) !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}

.tempco-services .ts-hero__cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

@media (max-width: 900px) {
  .tempco-services .ts-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .tempco-services .ts-hero__media { order: -1; }
}

/* --------------------------------------------------------------------------
   WHAT'S INCLUDED — 2 column → 1 on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .tempco-services section > .ts-container > div[style*="repeat(2"][style*="20px 32px"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WARNING GRID — 4 col → 2 col → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-warning-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .tempco-services .ts-warning-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WHY SERVICE — 6 cards in 3 col → 2 → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .tempco-services .ts-why-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   SYSTEMS WE SERVICE — 3 col → 1
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .tempco-services .ts-systems-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   BRANDS — 4 col → 2 → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-brands-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .tempco-services .ts-brands-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WHY CHOOSE — 3 col → 2 → 1
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-whychoose-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .tempco-services .ts-whychoose-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on Why Choose cards */
.tempco-services .ts-whychoose-grid > div {
  transition: all 0.25s ease;
}
.tempco-services .ts-whychoose-grid > div:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(245,166,35,0.4) !important;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   RELATED SERVICES — 3 col → 1
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .tempco-services .ts-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on related service cards */
.tempco-services .ts-related-grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
  border-color: #C8102E !important;
}

/* --------------------------------------------------------------------------
   SHOWCASE — 2 col → 1 on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .tempco-services .ts-showcase__inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Showcase stat row collapses on very narrow screens */
@media (max-width: 480px) {
  .tempco-services .ts-showcase__content > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}/* End custom CSS */