/* === Red Barn Media Group - Custom Styles - RJ's Heating, Cooling, Water Heating === */

/* --- Hero --- */
.rj-hcw-hero-intro {
  margin-top: 117px;
  background: url(../img/rj-hcw-hero-2000-650.webp) center / cover no-repeat;
  width: 100%;
  height: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.rj-hcw-hero-intro h1,
.rj-hcw-hero-intro h2 {
  color: #ffffff;
  font-style: normal;
}

.rj-hcw-hero-intro h1 {
  font-size: 4rem;
  line-height: 1;
}

.rj-hcw-hero-intro h2 {
  font-size: 1.125rem;
  font-weight: 500;
}

.rj-hcw-hero-intro-form-field {
  font-size: 1rem;
}

/* --- Rollovers --- */
.nav.nav-pills {
  display: block;
}

h4.nav-link {
  font-size: 1.65rem;
  text-transform: uppercase;
}

.nav-pills h4.nav-link {
  color: #36404c;
  background-color: transparent !important;
  padding: 0.5rem 0;
}

.nav-pills h4.nav-link.active,
.nav-pills .show > h4.nav-link {
  background-color: #bc2d1b; /* Fallback */
  background-image: linear-gradient(90deg, #bc2d1b, #f67e14);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

/* --- Banners --- */
.rj-hcw-banner-phone-call,
.rj-hcw-banner-air-conditioner,
.rj-hcw-banner-heat-pump,
.rj-hcw-banner-mini-split,
.rj-hcw-banner-commercial,
.rj-hcw-banner-iaq,
.rj-hcw-banner-furnace,
.rj-hcw-banner-boiler,
.rj-hcw-banner-tank {
  background-position: center center;
  background-size: cover;
}

.rj-hcw-banner-phone-call,
.rj-hcw-banner-sub-page-img {
  width: 526px;
  height: 622px;
  border-radius: 1rem;
}

.rj-hcw-banner-phone-call { background-image: url(../img/rj-hcw-banner-phone-call-XXL.webp); }
.rj-hcw-banner-air-conditioner { background-image: url(../img/rj-hcw-banner-sub-page-air-conditioner.webp); }
.rj-hcw-banner-heat-pump { background-image: url(../img/rj-hcw-banner-sub-page-heat-pump.webp); }
.rj-hcw-banner-mini-split { background-image: url(../img/rjs-new-rollover-mini-split-648-692.webp); }
.rj-hcw-banner-commercial { background-image: url(../img/rjs-new-rollover-commercial-648-692.webp); }
.rj-hcw-banner-iaq { background-image: url(../img/rjs-new-rollover-iaq-648-692.webp); }
.rj-hcw-banner-furnace { background-image: url(../img/rj-hcw-banner-sub-page-furnace.webp); }
.rj-hcw-banner-boiler { background-image: url(../img/rjs-new-rollover-boiler-648-692.webp); }
.rj-hcw-banner-tank { background-image: url(../img/rjs-new-rollover-tank-648-692.webp); }

.rj-hcw-banner-a2l {
  background: url(../img/rj-hcw-banner-a2l-wide.svg) center bottom / cover;
  width: 100%;
  height: fit-content;
}

/* --- Media Queries --- */
@media (max-width: 1400px) {
  .rj-hcw-hero-intro { background-image: url(../img/rj-hcw-hero-1400-650.webp); }
  
  .rj-hcw-banner-phone-call,
  .rj-hcw-banner-sub-page-img {
    width: 451px;
    height: 522px;
  }
  .rj-hcw-banner-phone-call { background-image: url(../img/rj-hcw-banner-phone-call-XL.webp); }
}

@media (max-width: 1200px) {
  .rj-hcw-hero-intro { background-image: url(../img/rj-hcw-hero-1200-650.webp); }
  .rj-hcw-hero-intro h1 { font-size: 3.5rem; }
  .rj-hcw-hero-intro h2 { font-size: 1.25rem; }
  
  .rj-hcw-banner-phone-call,
  .rj-hcw-banner-sub-page-img {
    width: 376px;
    height: 447px;
  }
  .rj-hcw-banner-phone-call { background-image: url(../img/rj-hcw-banner-phone-call-LG.webp); }
}

@media (max-width: 991px) {
  .rj-hcw-hero-intro {
    background-image: url(../img/rj-hcw-hero-991-650.webp);
    height: fit-content;
  }
  .rj-hcw-hero-intro .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .rj-hcw-hero-intro h1 { font-size: 3rem; }
  .rj-hcw-hero-intro h2 { font-size: 1rem; }
  .rj-hcw-hero-intro-form-field { font-size: 0.85rem; }
}

@media (max-width: 767px) {
  .rj-hcw-hero-intro { background-image: url(../img/rj-hcw-hero-767-650.webp); }
  .rj-hcw-hero-intro .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .rj-hcw-hero-intro h1 { font-size: 2.5rem; }
  .rj-hcw-banner-a2l { background-image: url(../img/rj-hcw-banner-a2l-square.svg); }
}

@media (max-width: 576px) {
  .rj-hcw-hero-intro { background-image: url(../img/rj-hcw-hero-576-650.webp); }
  .rj-hcw-hero-intro h1 { font-size: 2.25rem; }
  .rj-hcw-hero-intro h2 { font-size: 0.85rem; }
}

@media (max-width: 450px) {
  .rj-hcw-hero-intro {background: #05224C;background: linear-gradient(45deg, rgba(5, 34, 76, 1) 0%, rgba(0, 14, 43, 1) 100%);}
  .rj-hcw-hero-intro h1 { font-size: 2rem; }
}