/* Ductless Brothers — eye-catching "Our Service Area" + "What Our Customers Say" (homepage)
   Same look as gallery.css / service.css / sections.css */

/* ================= OUR SERVICE AREA ================= */
#areas.service-area-section{
  position:relative; overflow:hidden;
  padding:80px 25px 88px !important;
  background:
    radial-gradient(620px 420px at 82% 50%, rgba(103,201,232,.18), transparent 70%),
    radial-gradient(520px 360px at 8% 15%, rgba(216,90,28,.14), transparent 70%),
    radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 2px) 0 0 / 24px 24px,
    #0B1120 !important;
}
#areas .service-area-container{ gap:56px !important; align-items:center !important; }

/* Big title with gradient underline */
#areas .service-area-title{
  position:relative; margin:0 0 30px !important; padding-bottom:18px !important;
  color:#FFFFFF !important; text-shadow:0 6px 30px rgba(103,201,232,.25);
}
#areas .service-area-title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:90px; height:5px; border-radius:99px;
  background:linear-gradient(90deg,#D85A1C,#67C9E8);
}

/* "Outside our area? Call us" as a highlighted callout */
#areas .service-area-description{
  position:relative; padding:14px 20px 14px 52px !important; border-radius:16px;
  background:rgba(216,90,28,.12) !important; border:1px solid rgba(216,90,28,.45);
  color:#FFFFFF !important; font-weight:600 !important; text-align:left;
}
#areas .service-area-description::before{
  content:"📍"; position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:20px;
}

/* Town list inside a glowing card */
#areas .service-area-towns{
  padding:20px 22px !important; border-radius:18px;
  border:2px solid transparent !important;
  background:
    linear-gradient(#151E33,#151E33) padding-box,
    linear-gradient(135deg,#D85A1C,#67C9E8) border-box !important;
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 40px rgba(103,201,232,.12);
  color:#AAB6C8 !important; font-size:13.5px !important; line-height:1.85 !important;
}
#areas .service-area-towns a{
  color:#67C9E8 !important; font-weight:700; text-decoration:none;
  padding:1px 7px; border-radius:99px; background:rgba(103,201,232,.12);
  transition:background .2s, color .2s;
}
#areas .service-area-towns a:hover{ background:#3AA9CF; color:#FFFFFF !important; }

/* Map with glowing frame, lifts on hover */
#areas .service-area-map-container{ position:relative; }
#areas .service-area-map{
  max-width:620px !important; border-radius:22px !important;
  border:2px solid transparent;
  background:linear-gradient(135deg,#D85A1C,#67C9E8) border-box;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 60px rgba(103,201,232,.25);
  transition:transform .4s ease, box-shadow .4s ease;
}
#areas .service-area-map:hover{
  transform:translateY(-5px) scale(1.01);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 80px rgba(103,201,232,.35);
}

/* ================= WHAT OUR CUSTOMERS SAY ================= */
#testimonials.section{
  position:relative; overflow:hidden;
  padding-top:72px !important; padding-bottom:80px !important;
  background:
    radial-gradient(600px 400px at 15% 40%, rgba(216,90,28,.15), transparent 70%),
    radial-gradient(560px 380px at 88% 70%, rgba(103,201,232,.16), transparent 70%),
    radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 2px) 0 0 / 24px 24px,
    #0B1120 !important;
}
#testimonials .testimonial-section-title{
  position:relative; display:table; margin:0 auto 44px !important;
  padding:0 0 14px !important; background:none !important; border:0 !important; box-shadow:none !important;
  font-size:clamp(32px,4vw,52px) !important; color:#FFFFFF !important; letter-spacing:-.5px;
}
#testimonials .testimonial-section-title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:90px; height:5px; border-radius:99px;
  background:linear-gradient(90deg,#D85A1C,#67C9E8);
}
#testimonials .testimonial-layout{ align-items:start !important; gap:32px !important; }

/* Handshake photo and quote card: glowing gradient borders */
#testimonials .testimonial-shared-image,
#testimonials .testimonial-content{
  border:2px solid transparent !important;
  background:
    linear-gradient(#151E33,#151E33) padding-box,
    linear-gradient(135deg,#D85A1C,#67C9E8) border-box !important;
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 40px rgba(103,201,232,.12) !important;
  transition:transform .3s ease, box-shadow .3s ease;
}
#testimonials .testimonial-shared-image:hover,
#testimonials .testimonial-content:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 55px rgba(103,201,232,.22) !important;
}
#testimonials .testimonial-content::before{ display:none !important; }
#testimonials .testimonial-shared-image{ position:relative; overflow:hidden; }
#testimonials .testimonial-shared-image img{ transition:transform .6s ease; }
#testimonials .testimonial-shared-image:hover img{ transform:scale(1.04); }

/* Faint giant quote mark in the card background */
#testimonials .testimonial-content::after{
  content:"\201D"; position:absolute; right:28px; bottom:-60px;
  font-family:Georgia, serif; font-size:260px; line-height:1;
  color:rgba(103,201,232,.07); pointer-events:none;
}

/* Quote text: white, readable */
#testimonials #testimonial-quote{ color:#E6ECF4 !important; font-size:17px !important; line-height:1.8 !important; }
#testimonials #testimonial-quote::before{
  font-family:Georgia, serif; font-size:72px !important;
  background:linear-gradient(135deg,#F08A4B,#67C9E8);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
}
#testimonials #testimonial-name{ color:#FFFFFF !important; }
#testimonials #testimonial-location{ color:#F39566 !important; font-weight:700 !important; }

/* Arrows and dots (match the gallery) */
#testimonials .testimonial-arrow{
  z-index:2; background:rgba(11,17,32,.6) !important; border:1px solid rgba(103,201,232,.6) !important;
  backdrop-filter:blur(6px); color:#FFFFFF !important;
}
#testimonials .testimonial-arrow:hover{ background:#3AA9CF !important; }
#testimonials .testimonial-dot{
  width:10px; height:10px; border:0 !important; padding:0; border-radius:99px !important;
  background:rgba(255,255,255,.3) !important; transform:none !important; transition:width .3s, background .3s;
}
#testimonials .testimonial-dot.active{ width:28px !important; background:#67C9E8 !important; }

@media (max-width:900px){
  #areas.service-area-section{ padding:56px 16px 64px !important; }
  #areas .service-area-description{ text-align:left; }
  #testimonials.section{ padding-top:56px !important; padding-bottom:56px !important; }
  #testimonials .testimonial-section-title{ margin-bottom:32px !important; }
  /* Phone: arrows sit at the bottom of the card instead of over the words */
  #testimonials .testimonial-content{ padding:28px 22px 84px !important; }
  #testimonials .testimonial-arrow{ top:auto !important; bottom:18px; transform:none !important; }
  #testimonials .testimonial-arrow:hover{ transform:scale(1.08) !important; }
  #testimonials .testimonial-arrow-left{ left:calc(50% - 56px) !important; }
  #testimonials .testimonial-arrow-right{ right:calc(50% - 56px) !important; }
}

/* ===== Service Area layout: title centered on top, text column the same height as the map ===== */
@media (min-width:901px){
  #areas .service-area-container{
    display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important;
    grid-template-rows:auto auto 1fr; column-gap:48px !important; row-gap:20px !important;
    align-items:stretch !important; max-width:1200px;
  }
  #areas .service-area-content{ display:contents !important; }
  #areas .service-area-title{ grid-column:1 / -1; grid-row:1; justify-self:center; text-align:center; margin:0 0 16px !important; }
  #areas .service-area-title br{ display:none; }
  #areas .service-area-description{ grid-column:1; grid-row:2; margin:0 !important; max-width:none !important; }
  #areas .service-area-towns{
    grid-column:1; grid-row:3; margin:0 !important; max-width:none !important;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-size:13px !important; line-height:1.8 !important;
  }
  #areas .service-area-towns{ display:block; }
  #areas .service-area-map-container{ grid-column:2; grid-row:2 / 4; display:block !important; position:relative; min-height:100%; }
  #areas .service-area-map{
    position:absolute; inset:0; width:100% !important; height:100% !important; max-width:none !important;
    object-fit:cover; object-position:center;
  }
}