.elementor-14378 .elementor-element.elementor-element-7bb2e69{--display:flex;}body.elementor-page-14378{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-b2fee02 *//* ==========================================================================
   TEMPCO — Child service page additions (v4)
   Add this to your existing services.css OR paste into the page's
   Custom CSS in Elementor (after the parent CSS rules).
   ========================================================================== */

/* --------------------------------------------------------------------------
   FULL-WIDTH BREAKOUT — forces wrapper to span 100vw regardless of
   Elementor's section container width.
   -------------------------------------------------------------------------- */
.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 — caps inner content width inside the full-bleed wrapper
   -------------------------------------------------------------------------- */
.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; }
}

/* --------------------------------------------------------------------------
   PROCESS — 5 column responsive (parent uses 3, child uses 5)
   -------------------------------------------------------------------------- */
.tempco-services .ts-process__list {
  grid-template-columns: repeat(5, 1fr) !important;
}

@media (max-width: 1100px) {
  .tempco-services .ts-process__list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

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

/* --------------------------------------------------------------------------
   "WHY MATTERS" 6-card grid — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-why > .ts-container > div[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .tempco-services .ts-why > .ts-container > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   BRANDS — 4-column to 2 to 1 responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-services > .ts-container > div[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .tempco-services .ts-services > .ts-container > div[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WHY CHOOSE TEMPCO — 5-card grid responsive
   Navy background, amber-circle icons
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 800px) {
  .tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on Why Choose cards */
.tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] > div {
  transition: all 0.25s ease;
}
.tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] > 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-column to 1
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .tempco-services section[style*="background: #FAF6F2"] > .ts-container > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on related service cards */
.tempco-services section[style*="background: #FAF6F2"] a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
  border-color: #C8102E !important;
}

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

@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 — Child service page additions (v4)
   Add this to your existing services.css OR paste into the page's
   Custom CSS in Elementor (after the parent CSS rules).
   ========================================================================== */

/* --------------------------------------------------------------------------
   FULL-WIDTH BREAKOUT — forces wrapper to span 100vw regardless of
   Elementor's section container width.
   -------------------------------------------------------------------------- */
.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 — caps inner content width inside the full-bleed wrapper
   -------------------------------------------------------------------------- */
.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; }
}

/* --------------------------------------------------------------------------
   PROCESS — 5 column responsive (parent uses 3, child uses 5)
   -------------------------------------------------------------------------- */
.tempco-services .ts-process__list {
  grid-template-columns: repeat(5, 1fr) !important;
}

@media (max-width: 1100px) {
  .tempco-services .ts-process__list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

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

/* --------------------------------------------------------------------------
   "WHY MATTERS" 6-card grid — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-why > .ts-container > div[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .tempco-services .ts-why > .ts-container > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   BRANDS — 4-column to 2 to 1 responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .tempco-services .ts-services > .ts-container > div[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 540px) {
  .tempco-services .ts-services > .ts-container > div[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   WHY CHOOSE TEMPCO — 5-card grid responsive
   Navy background, amber-circle icons
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 800px) {
  .tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on Why Choose cards */
.tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] > div {
  transition: all 0.25s ease;
}
.tempco-services .ts-why-choose > .ts-container > div[style*="repeat(5"] > 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-column to 1
   -------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .tempco-services section[style*="background: #FAF6F2"] > .ts-container > div[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Hover effect on related service cards */
.tempco-services section[style*="background: #FAF6F2"] a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
  border-color: #C8102E !important;
}

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

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