/*
 * Service Area Pages – Full Visual Styling
 * Styles Elementor container elements on city pages (alice-tx, beeville-tx, etc.)
 * to match the visual language of the rest of the site.
 *
 * Element IDs are shared across all 6 city pages.
 */

/* ================================================================
   RESET: Remove WordPress block-theme spacing on service area pages
   ================================================================ */
.elementor-element-71898d8,
.elementor-element-4dd9cfd,
.elementor-element-b073815,
.elementor-element-31f66db,
.elementor-element-18a2aa9,
.elementor-element-0d7a253,
.elementor-element-4f423dd,
.elementor-element-53fa7cb,
.elementor-element-bb7fb5e,
.elementor-element-543884f,
.elementor-element-7678bdf,
.elementor-element-1e3470e {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ================================================================
   TYPOGRAPHY: Match site-wide type system
   ================================================================ */
.elementor-element-71898d8 h1,
.elementor-element-71898d8 h2 {
  font-family: var(--chucknoon, 'Chuck Noon', sans-serif);
  color: #ffffff;
  text-transform: none;
  line-height: 1;
}

.elementor-element-71898d8 h1 {
  font-size: clamp(36px, 5vw, 82px);
}

.elementor-element-4dd9cfd h2,
.elementor-element-b073815 h2 {
  font-family: var(--chucknoon, 'Chuck Noon', sans-serif);
  font-size: clamp(30px, 4vw, 72px);
  line-height: 1;
  padding-bottom: 30px;
}

.elementor-element-31f66db h3,
.elementor-element-0d7a253 h3 {
  font-family: var(--chucknoon, 'Chuck Noon', sans-serif);
  font-size: clamp(24px, 3vw, 52px);
  line-height: 1;
  padding-bottom: 20px;
}

.elementor-element-53fa7cb h2,
.elementor-element-1e3470e h2 {
  font-family: var(--chucknoon, 'Chuck Noon', sans-serif);
  font-size: clamp(30px, 4vw, 72px);
  line-height: 1;
  color: #ffffff;
  text-align: center;
}

.elementor-element-bb7fb5e h2,
.elementor-element-543884f h2,
.elementor-element-7678bdf h2 {
  font-family: var(--chucknoon, 'Chuck Noon', sans-serif);
  font-size: clamp(28px, 3.5vw, 62px);
  line-height: 1;
  padding-bottom: 20px;
}

/* Body text */
.elementor-element-4dd9cfd p,
.elementor-element-b073815 p,
.elementor-element-bb7fb5e p,
.elementor-element-543884f p,
.elementor-element-7678bdf p,
.elementor-element-53fa7cb p,
.elementor-element-1e3470e p {
  font-family: var(--poppins, 'Poppins', sans-serif);
  font-size: 16px;
  line-height: 1.7;
}

/* ================================================================
   HERO BANNER – .elementor-element-71898d8
   Matches .innerbannersec pattern
   ================================================================ */
.elementor-element-71898d8 {
  background-color: #141414;
  background-image: url('/wp-content/uploads/2025/07/Main-bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 125px 0 !important;
  overflow: hidden;
}

.elementor-element-71898d8::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.elementor-element-71898d8 > .e-con-inner,
.elementor-element-71898d8 > * {
  position: relative;
  z-index: 1;
}

/* ================================================================
   INTRO SECTION – .elementor-element-4dd9cfd / b76d896
   Matches .servidepgfstcontsec pattern
   ================================================================ */
.elementor-element-4dd9cfd {
  background-color: var(--grey1, #181818) !important;
  padding: 100px 0 !important;
  overflow: hidden;
}

.elementor-element-4dd9cfd h2 {
  color: #ffffff;
}

.elementor-element-4dd9cfd p,
.elementor-element-4dd9cfd li {
  color: rgba(255, 255, 255, 0.85);
}

.elementor-element-b76d896 {
  background-color: transparent !important;
  max-width: 1400px;
  margin: 0 auto !important;
}

.elementor-element-b76d896 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* ================================================================
   "OUR SERVICES" HEADING – .elementor-element-b073815
   ================================================================ */
.elementor-element-b073815 {
  background-color: var(--dark, #141414) !important;
  padding: 80px 0 40px !important;
  text-align: center;
}

.elementor-element-b073815 h2 {
  color: #ffffff;
}

.elementor-element-b073815 p {
  color: rgba(255, 255, 255, 0.85);
}

/* ================================================================
   FOUNDATION REPAIR SECTION – .elementor-element-31f66db
   Dark background with white text
   ================================================================ */
.elementor-element-31f66db {
  background-color: var(--dark, #141414) !important;
  padding: 40px 0 20px !important;
  text-align: center;
}

.elementor-element-31f66db h2,
.elementor-element-31f66db h3,
.elementor-element-31f66db p {
  color: #ffffff;
}

/* ================================================================
   FOUNDATION REPAIR CARDS – .elementor-element-18a2aa9
   Flip-box cards row
   ================================================================ */
.elementor-element-18a2aa9 {
  background-color: var(--grey1, #181818) !important;
  padding: 20px 0 80px !important;
}

.elementor-element-18a2aa9 .elementor-flip-box {
  min-height: 350px;
}

.elementor-element-18a2aa9 .elementor-flip-box__front {
  background-size: cover;
  background-position: center;
}

.elementor-element-18a2aa9 h3 {
  font-family: var(--chucknoon, 'Chuck Noon', sans-serif);
  font-size: 28px;
  color: #ffffff;
}

/* ================================================================
   ROOFING SERVICES HEADING – .elementor-element-0d7a253
   ================================================================ */
.elementor-element-0d7a253 {
  background-color: var(--dark, #141414) !important;
  padding: 80px 0 20px !important;
  text-align: center;
}

.elementor-element-0d7a253 h2,
.elementor-element-0d7a253 h3,
.elementor-element-0d7a253 p {
  color: #ffffff;
}

/* ================================================================
   ROOFING CARDS – .elementor-element-4f423dd
   ================================================================ */
.elementor-element-4f423dd {
  background-color: var(--grey1, #181818) !important;
  padding: 20px 0 80px !important;
}

.elementor-element-4f423dd .elementor-flip-box {
  min-height: 350px;
}

.elementor-element-4f423dd h3 {
  font-family: var(--chucknoon, 'Chuck Noon', sans-serif);
  font-size: 28px;
  color: #ffffff;
}

/* ================================================================
   CTA: "WHY DELAYING..." – .elementor-element-53fa7cb
   Matches .eightcontsec pattern (image bg + overlay)
   ================================================================ */
.elementor-element-53fa7cb {
  background-color: #141414;
  background-image: url('/wp-content/uploads/2025/06/banner.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  padding: 150px 0 !important;
  text-align: center;
  overflow: hidden;
}

.elementor-element-53fa7cb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 0;
}

.elementor-element-53fa7cb > .e-con-inner,
.elementor-element-53fa7cb > * {
  position: relative;
  z-index: 1;
}

.elementor-element-53fa7cb h2,
.elementor-element-53fa7cb p,
.elementor-element-53fa7cb a {
  color: #ffffff;
}

/* ================================================================
   "WHY HOMEOWNERS CHOOSE MAMMOTH" – .elementor-element-bb7fb5e / 52d0911
   Two-column with image + text, light background
   ================================================================ */
.elementor-element-bb7fb5e {
  background-color: #f5f5f5 !important;
  padding: 100px 0 !important;
  overflow: hidden;
}

.elementor-element-52d0911 {
  background-color: transparent !important;
  max-width: 1400px;
  margin: 0 auto !important;
}

.elementor-element-52d0911 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.elementor-element-bb7fb5e h2 {
  color: var(--dark, #141414);
}

.elementor-element-bb7fb5e p {
  color: #333333;
}

/* ================================================================
   "ABOUT MAMMOTH" – .elementor-element-543884f
   ================================================================ */
.elementor-element-543884f {
  background-color: #ffffff !important;
  padding: 100px 0 !important;
  overflow: hidden;
}

.elementor-element-543884f h2 {
  color: var(--dark, #141414);
}

.elementor-element-543884f p {
  color: #333333;
}

/* ================================================================
   "SERVING COMMUNITIES" – .elementor-element-7678bdf
   Dark background section
   ================================================================ */
.elementor-element-7678bdf {
  background-color: var(--grey1, #181818) !important;
  padding: 100px 0 !important;
  overflow: hidden;
}

.elementor-element-7678bdf h2,
.elementor-element-7678bdf h3,
.elementor-element-7678bdf p,
.elementor-element-7678bdf li {
  color: #ffffff;
}

.elementor-element-7678bdf p,
.elementor-element-7678bdf li {
  color: rgba(255, 255, 255, 0.85);
}

/* ================================================================
   FINAL CTA – .elementor-element-1e3470e
   Orange background CTA block
   ================================================================ */
.elementor-element-1e3470e {
  background-color: var(--orange, #fd6206) !important;
  padding: 100px 0 !important;
  text-align: center;
  overflow: hidden;
}

.elementor-element-1e3470e h2,
.elementor-element-1e3470e h3,
.elementor-element-1e3470e p,
.elementor-element-1e3470e a {
  color: #ffffff;
}

/* Style the "Get Started" links as buttons */
.elementor-element-53fa7cb a[href*="free-estimates"],
.elementor-element-1e3470e a[href*="free-estimates"] {
  display: inline-block;
  clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
  background: var(--orange, #fd6206);
  color: #ffffff;
  font-family: var(--poppins, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 20px 60px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.elementor-element-1e3470e a[href*="free-estimates"] {
  background: var(--dark, #141414);
}

.elementor-element-53fa7cb a[href*="free-estimates"]:hover,
.elementor-element-1e3470e a[href*="free-estimates"]:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(253, 98, 6, 0.4);
}

/* ================================================================
   FLIP-BOX GLOBAL OVERRIDES
   Match the hover-card visual from .sgleservicecontsec
   ================================================================ */
.elementor-element-18a2aa9 .elementor-flip-box__front,
.elementor-element-4f423dd .elementor-flip-box__front {
  border-radius: 0;
}

.elementor-element-18a2aa9 .elementor-flip-box__back,
.elementor-element-4f423dd .elementor-flip-box__back {
  background: var(--orange, #fd6206) !important;
}

.elementor-element-18a2aa9 .elementor-flip-box__back h3,
.elementor-element-4f423dd .elementor-flip-box__back h3,
.elementor-element-18a2aa9 .elementor-flip-box__back p,
.elementor-element-4f423dd .elementor-flip-box__back p {
  color: #ffffff;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  .elementor-element-71898d8 {
    padding: 80px 20px !important;
  }

  .elementor-element-4dd9cfd,
  .elementor-element-bb7fb5e,
  .elementor-element-543884f,
  .elementor-element-7678bdf {
    padding: 60px 20px !important;
  }

  .elementor-element-53fa7cb {
    padding: 80px 20px !important;
  }

  .elementor-element-1e3470e {
    padding: 60px 20px !important;
  }
}

@media (max-width: 767px) {
  .elementor-element-71898d8 {
    padding: 60px 15px !important;
  }

  .elementor-element-71898d8 h1 {
    font-size: 36px;
  }

  .elementor-element-4dd9cfd h2,
  .elementor-element-b073815 h2,
  .elementor-element-53fa7cb h2,
  .elementor-element-1e3470e h2 {
    font-size: 32px;
  }

  .elementor-element-4dd9cfd,
  .elementor-element-bb7fb5e,
  .elementor-element-543884f,
  .elementor-element-7678bdf {
    padding: 40px 15px !important;
  }

  .elementor-element-53fa7cb,
  .elementor-element-1e3470e {
    padding: 50px 15px !important;
  }

  .elementor-element-53fa7cb a[href*="free-estimates"],
  .elementor-element-1e3470e a[href*="free-estimates"] {
    padding: 15px 40px;
    font-size: 16px;
  }
}