/* ---------- Base ---------- */
:root{
  --brand-red:#dc3545;
  --brand-red-dark:#a71d2a;
  --ink:#111;
  --muted:#6b7280;
  --bg:#f8f9fa;
  --radius:14px;
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 6px 16px rgba(0,0,0,.12);
}

html{scroll-behavior:smooth}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ink);
  line-height:1.55;
}

/* Headings & subheadings use Barlow Condensed */
h1,h2,h3,h4,h5,h6,.hero-subtitle,.section-subtitle,.form-step legend{
  font-family:"Barlow Condensed",Arial,Helvetica,sans-serif;
  letter-spacing:.2px;
  font-weight: 800;
}

.site-header{
  position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid rgba(0,0,0,.06);
  
}
.site-logo{max-height:56px}

/* ---------- Hero ---------- */
.hero{
  background:url('../images/welcome-bg.jpeg') no-repeat center/cover;
  min-height:92vh;
  display:flex;
  align-items:center;
  color:#111;
  position:relative;
  padding:5rem 0 4rem;
}
.bathroom{
  background:url('../images/bathroom-bg.jpg') no-repeat center/cover;
  min-height:92vh;
  display:flex;
  align-items:center;
  color:#111;
  position:relative;
  padding:5rem 0 4rem;
}
.normal{font-size: medium; font-weight: 500;}
.hero .overlay{
  position:absolute; inset:0;
  
}
.hero-wrap{backdrop-filter:saturate(140%) blur(2px)}
.hero-subtitle{font-size:1.15rem; color:var(--muted)}
.hero-bullets li{margin:.25rem 0}
.hero-bullets i{color:var(--brand-red)}

/* ---------- Form Card ---------- */
.card .progress{height:6px; background:#eee}
.progress-bar{background:var(--brand-red)}
.form-step legend{font-weight:600}
.form-note a{color:var(--brand-red)}

/* ---------- Sections ---------- */
.section{padding:60px 0}
.section-light{background-color:var(--bg)}

.solution-card{
  background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); transition:.25s; cursor:pointer; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.solution-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.solution-card i{font-size:3rem; color:var(--brand-red); transition:.25s}
.solution-card:hover i{color:var(--brand-red-dark)}

.how-card{
  background:#fff; border-radius:10px; box-shadow:var(--shadow-sm); transition:.25s; height:100%;
}
.how-card:hover{box-shadow:var(--shadow-md)}
.how-card i{font-size:3rem; color:var(--brand-red)}

/* Competitive Edge */
.edge-card{
  background:#fff; border-radius:10px; box-shadow:var(--shadow-sm); transition:.25s; cursor:pointer; min-height:280px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.edge-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px)}
.edge-card i{font-size:3rem; color:var(--brand-red)}
.carousel-control-prev, .carousel-control-next{width:5%}
.carousel-control-prev{left:-60px}
.carousel-control-next{right:-60px}
.custom-arrow{background-color:rgba(0,0,0,.7); border-radius:50%; padding:15px}

/* CTA */
.cta-section{ background:linear-gradient(to bottom, rgba(0, 0, 0, .8),rgba(0, 0, 0, .4)) , url(../images/bottom-bg.jpg) no-repeat center/cover;}
.btn-cta{
  background-color:#e63946; color:#fff; padding:12px 28px; border-radius:8px; font-size: 20px; font-weight:800; transition:.25s; text-decoration:none;
}
.btn-cta:hover{background-color:#d62828; box-shadow:0 4px 12px rgba(0,0,0,.25)}
.cta-section-bathroom{ background:linear-gradient(to bottom, rgba(0, 0, 0, .7),rgba(0, 0, 0, .7)) , url(../images/bathroom-bg.jpg) no-repeat center/cover;}


/* Footer */
.footer-section{background-color:var(--bg); border-top:1px solid #ddd}
.footer-logo{max-height:50px}
.footer-menu a{color:#555; text-decoration:none; margin:0 8px; font-size:15px}
.footer-menu a:hover{color:#e63946}
.footer-disclaimer{color:#777; font-size:13px; line-height:1.4}

/* bathroom part css here */

/* Utilities */
.visually-hidden-focusable:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute!important;white-space:nowrap;width:1px}

/* Responsive tweaks */
@media (max-width: 991px){
  .hero{min-height:auto; padding:4rem 0 3rem}
  .carousel-control-prev{left:-30px}
  .carousel-control-next{right:-30px}
}


/* ---------- Form Card ---------- */
.card .progress{height:8px; background:#eee}
.progress-bar{background:var(--brand-red)}
.form-step legend{font-weight:600}
.form-note{font-size: 13px;}

/* Remove blur from hero form wrapper */
.hero-wrap{background:rgba(255,255,255,0.92); box-shadow:var(--shadow-md);}

/* Responsive field stacking */
@media (max-width: 767px){
  #multiStepForm .form-step .row .col-12,
  #multiStepForm .form-step .row .col-md-6{
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---------- Secure Seal ---------- */
.secure-seal {
  font-size: 14px;
  color: #555;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.secure-seal i {
  color: var(--brand-red);
  font-size: 16px;
}

/* Windows page css */
.windows {
  background:url('../images/windows-bg.jpg') no-repeat center/cover;
  min-height:92vh;
  display:flex;
  align-items:center;
  color:#111;
  position:relative;
  padding:5rem 0 4rem;
}

.cta-section-windows {
  background:linear-gradient(to bottom, rgba(0, 0, 0, .7),rgba(0, 0, 0, .7)) , url(../images/windows-bg.jpg) no-repeat center/cover;
}

/* Roofing page css */
.roofing {
  background:url('../images/roofing-bg.jpg') no-repeat center/cover;
  min-height:92vh;
  display:flex;
  align-items:center;
  color:#111;
  position:relative;
  padding:5rem 0 4rem;
}

.cta-section-roofing {
  background:linear-gradient(to bottom, rgba(0, 0, 0, .7),rgba(0, 0, 0, .7)) , url(../images/roofing-bg.jpg) no-repeat center/cover;
}

/* Solar page styling */
.solar {
  background: url('../images/solar-bg.jpg') no-repeat center/cover;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #111;
  position: relative;
  padding: 5rem 0 4rem;
}

.cta-section-solar {
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/solar-bg.jpg') no-repeat center/cover;
}

/* Gutter page styling */
.gutter {
  background: url('../images/gutter-bg.jpg') no-repeat center/cover;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #111;
  position: relative;
  padding: 5rem 0 4rem;
}

.cta-section-gutter {
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.7)), url('../images/gutter-bg.jpg') no-repeat center/cover;
}

/* Home Security page styling */
.home-security {
  background: url('../images/home-security-bg.jpeg') no-repeat center/cover;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #111;
  position: relative;
  padding: 5rem 0 4rem;
}

.cta-section-security {
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.7)), url('../images/home-security-bg.jpeg') no-repeat center/cover;
}

/* HVAC page styling */
.hvac {
  background: url('../images/hvac-bg.webp') no-repeat center/cover;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #111;
  position: relative;
  padding: 5rem 0 4rem;
}

.cta-section-hvac {
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.7)), url('../images/hvac-bg.webp') no-repeat center/cover;
}

/* Offers section styling */
.offers-section ul li {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.offers-section ul li a {
  color: #333;
  transition: color 0.2s ease;
}

.offers-section ul li a:hover {
  color: #d32f2f; /* brand red hover */
}
/* Offer cards */
.offer-card {
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.offer-card i {
  transition: color 0.3s ease, transform 0.3s ease;
}

.offer-card:hover i {
  color: #b71c1c; /* darker red */
  transform: scale(1.15);
}