/* @import url('http://example.com/example_style.css'); */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700;800&display=swap');
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* RULES */








body {all:unset;font-family:Red Hat Display}
h1 { font-size:2em; font-weight: 800; color: rgba(115, 111, 111, 1); margin: 10px 0px }
h2 { font-size:1.5em; font-weight: 700; color: rgba(115, 111, 111, 1);margin: 10px 0px}
h3 {font-size:1.17em; font-weight: 700; color: rgba(119, 188, 65, 1);margin: 0 }
h4 {font-size:1em; font-weight: 700; color: rgba(115, 111, 111, 1)}
h5 {font-size:0.83em; font-weight: 700; color: rgba(115, 111, 111, 1)}
h6 {font-size:0.75em; font-weight: 700; color: rgba(115, 111, 111, 1)}
p {font-weight: 400; color: rgba(87, 82, 82, .8)}
ul {color: rgba(87, 82, 82, .8)}
ol {color: rgba(87, 82, 82, .8)}
.big-copy {font-size: 1.17em; }
.go812842568 {border-bottom-right-radius: 0px!important; bottom: 20px!important; right 20px!important}
a {font-weight: 500; color: rgba(119, 188, 65, 1)}
.page-center { float: none; max-width: 1200px; margin: 0 auto; padding: 20px; width: 100%; box-sizing: border-box; }
.hs-tools-menu.hs-collapsed {display:none!important}
img {border-radius: 8px}
.cta {background: rgba(119, 188, 65, 1); border: 1px solid rgba(119, 188, 65, 1);color: white; font-weight: 700; border-radius: 25px; padding: 15px 30px; text-decoration: none; margin: 10px 0px;width: max-content; display: block}
.cta:hover {background: rgba(246, 246, 246, 1); color: rgba(87, 82, 82, .8)}
.circle-cta-wrapper {transition: all .2s;text-decoration:none!important;margin:0 auto;position:relative; z-index:2;font-family: ;border-radius: 50%; width: 115px; height: 115px; display:flex; justify-content:center; align-items:center;background:rgba(119, 188, 65, 1); border: 5px solid white; color: white; margin-top:-60px; font-size: 17px; text-align:center}
.circle-cta-wrapper:hover {background: rgba(246, 246, 246, 1); color: rgba(87, 82, 82, .8)!important; text-decoration:none!important; border: 5px solid rgba(119, 188, 65, 1)}
.circle-cta {text-decoration:none}
.blur-bubble {background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 20px; border-radius: 20px}
section {background-size: cover; background-position:center center }
.overflow-cards::-webkit-scrollbar {
  width: 200px!important;
  height: 10px;
 
  
}

.overflow-cards::-webkit-scrollbar-track {
  border-radius: 10px;
 

 
}

.overflow-cards::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(119, 188, 65, 1);
 width: 200px!important;
   
 
}
/* PADDING */
.pd-small {padding: 20px 0}
.pd-med {padding: 20px 0}
.pd_large {padding: 50px 0}
.pd-none { padding: 0}


/* MARGIN */
.mg-small {margin: 30px 0}
.mg-med {margin: 50px 0}
.mg_large {margin: 80px 0}
.mg-none { margin: 0;}

/* TEXT-ALIGN */
.text-center {text-align:center}
.text-left {text-align:left}


/* FLEXBOX */
.flex {display: flex;}
.flex-wrap {flex-wrap:wrap}
.flex.flex-column {flex-direction: column}
.flex.r-flex-column {flex-direction: column}
.flex.flex-align-start {align-items:flex-start}
.flex.flex-align-center {align-items:center}
.flex.flex-align-end {align-items:flex-end}

.flex.flex-justify-between {justify-content:space-between; height: 100%}
.flex.flex-justify-start {justify-content:flex-start}
.flex.flex-justify-center {justify-content:center}
.flex.flex-justify-end {justify-content:flex-end}

/* MOBILE NAV */
/* ================================= added navigation code ============================= */
/* ================================= added navigation code ============================= */

.mainNav { --itemPadding: 15px; --downIconSize: 12px; --brown: #a97c50; position: absolute; display: flex; top: 0; left: 0; right: 0; transition: .4s ease; grid-template-areas: "logo" "navUl"; z-index: 50; }
#navSpacer { width: 100vw; height: 165px; }
.mainNav.scroll { position: fixed; background-color: rgba(255, 255, 255, 1); backdrop-filter: blur(20px); grid-template-areas: "logo navUl"; justify-content: center; }
#mainLogo { width: 200px; margin: 20px auto; display: block; grid-area: logo; }
  #mainLogo img {width: 100%; display: block}
.mobile.trigger { display: none }
.mainNav.scroll #mainLogo { display: none; }
#mobileLogo img, .mainNav.scroll #mobileLogo img { display: none; grid-area: logo; }

.mainNav.scroll #mobileLogo { display: block; margin: 15px; justify-self: end; }
.invert { fill: white; }
.mainNav.scroll .invert { fill: black; }
.fourC-Brown { fill: rgba(119, 188, 65, 1); }
.mainNav>div { max-width: 1100px; margin: 0 auto; margin-right: 30px;grid-area: navUl; align-self: center; }
.mainNav ul { list-style-type: none; margin: 0; padding: 0; }
.mainNav>div>ul { display: grid; grid-auto-flow: column; gap: 5px; align-content: space-around; }
.hs-menu-item a { padding: var(--itemPadding); display: block;  text-decoration: none; color: rgba(115, 111, 111, 1); white-space: nowrap; font-weight: bold; position: relative; }
.mainNav.scroll .hs-menu-item a { color: rgba(115, 111, 111, 1);}
.hs-menu-item a:before { content: ""; position: absolute; width: 0; height: 3px; bottom: 0px; left: 0; background-color: rgba(119, 188, 65, 1); visibility: hidden; transition: 0.4s ease; }
.scroll .hs-menu-item a:before { background-color: rgba(119, 188, 65, 1); }
.hs-menu-item a.active:before { width: 100%; visibility: visible; }
.hs-menu-item a:hover:before { visibility: visible; width: 100%; }
.hs-item-has-children .hs-menu-item a:before { height: 0}
.hs-item-has-children>a { padding-right: calc((var(--downIconSize) * 2) + var(--itemPadding)); }
.hs-item-has-children>a::after { content: url(https://www.fourcfinancial.com/hubfs/downArrow.svg); position: absolute; width: 15px;height: 15px;margin-left: 15px;filter: invert(1) grayscale(1); }
.scroll .hs-item-has-children>a::after { content: url(https://www.fourcfinancial.com/hubfs/downArrow.svg);filter: invert(1) grayscale(1); }
.hs-menu-children-wrapper { box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4); background: white; transition: .4s ease; }
.hs-menu-children-wrapper .hs-menu-item a:hover { background: rgba(119, 188, 65, 1); color: white }
.mainNav.scroll .hs-menu-children-wrapper { background: white; }
  .mainNav.scroll .hs-menu-children-wrapper .hs-menu-item a:hover { background: rgba(119, 188, 65, 1); color: white }
.hs-item-has-children .hs-menu-children-wrapper { opacity: 0; visibility: hidden; translate: -20px; position: absolute; transition: .4s ease; }
.hs-item-has-children:hover .hs-menu-children-wrapper { opacity: 1; visibility: visible; translate: 0; }
.mainNav .nav-cta {margin-left: 0px; margin-right: auto;}

@media only screen and (max-width: 1200px) {
  .mainNav>div {margin-right: auto}
  .black {fill: black}
    .mainNav,
    .mainNav.scroll { grid-template-rows: min-content min-content; grid-template-areas: "logo" "navUl"; justify-content: center; }
    #navSpacer { height: 65px; }
    #mainLogo img, .mainNav.scroll #mainLogo img, #mainLogo { display: none; }
    .mainNav #mobileLogo { display: block; justify-self: center; margin: 15px 0; }
  #mobileLogo img {height: 30px; display: block}
    .mainNav.scroll #mobileLogo {  justify-self: center; }
  .mainNav.scroll #mobileLogo img {display:block}
    .mainNav.scroll .hs-menu-children-wrapper .hs-menu-item a { background: rgba(119, 188, 65, 1); color: white }
    .mobile.trigger { display: grid; justify-content: center; align-items: center; width: 60px; aspect-ratio: 1/1; position: fixed; top: 0; left: 0; z-index: 200; background-repeat: no-repeat; background-position: center; background-size: 24px 24px; cursor: pointer; transition: .4s ease; }
    .mobile.trigger svg { width: 24px; height: 24px }
    .mobile.trigger .invert { fill: white; transition: .4s ease; }
    .mobile.trigger.scroll .invert { fill: black; }
    .mobile.trigger.active svg { display: none }
    .mobile.trigger.active { background-image: url('https://www.fourcfinancial.com/hubfs/xmark-solid.svg'); rotate: 90deg;filter: invert(1) grayscale(1);  }
    .mainNav { height: 60px; z-index: 100; background: white; backdrop-filter: blur(20px); position: fixed; align-items: center; display: grid}
    .mainNav.active { height: 100vh; bottom: 0; align-content: center; }
    .mainNav .hs-menu-wrapper, .mainNav.active .hs-menu-wrapper { visibility: hidden; opacity: 0; }
  .hs-menu-children-wrapper .hs-menu-item a { background: rgba(119, 188, 65, 1); color: white }
    .mainNav.active .hs-menu-wrapper { visibility: visible; opacity: 1; }
    .mainNav>div>ul { grid-auto-flow: row; text-align: center; }
    .mainNav>div>ul li { width: 75vw; }
    .hs-item-has-children .hs-menu-children-wrapper { position: relative; height: 0; translate: 0; }
    .hs-item-has-children:hover .hs-menu-children-wrapper { height: auto; }
    .hs-menu-children-wrapper { box-shadow: none; }
    
     .nav-cta {visibility: hidden;margin-left: auto!important; margin-right: auto;}
      .mainNav.active .nav-cta {visibility: visible!important; grid-area: initial!important; margin-left: auto!important; margin-right: auto;}
}

/* ============================== end of added navigation code ========================= */
/* ============================== end of added navigation code ========================= */
/* ============================== end of added navigation code ========================= */
/* HAMBURGER MENU */
/* .full-nav {display:none}
/* .mobile-nav-logo {text-align:center; padding: 20px;background: white}
.mobile-nav-logo img {width: 100px}
.hamburger-menu {display:block;position: fixed; top:0px; right:0px; z-index:99; background: }
.hamburger-menu .toggler {position:absolute; top:13px; left:13px;z-index:5; cursor:pointer; width:40px; height:40px; opacity:0}
.hamburger-menu .hamburger {top:0; left:0; width:25px; height:30px; padding: 1rem;background:rgba(119, 188, 65, 1); display: flex; align-items:center; justify-content:center}
.chevy {width: 10px; margin-left:10px; margin-bottom: -2px; transform: rotate(90deg)!important;transition: .5s;}
.rotate {width:10px; margin-left: 10px; margin-bottom: -2px;transform:rotate(0deg)!important; transition: .3s;}
.menu svg {width: 10px; margin-left:10px; margin-bottom: -2px;transform: rotate(90deg); fill:white}
.no-m-link {margin-right: 0px!important} */
/* hamburger line */
/* top and bottom lines */
/* .hamburger-menu .hamburger > div {position:relative; width:100%; height:2px; background-color:white; display: flex; align-items:center; justify-content:center;transition: all 0.4s ease}
.hamburger-menu .hamburger > div:before,
.hamburger-menu .hamburger > div:after {content: ''; position:absolute; z-index:1; top:-10px; width:100%; height:2px; background:inherit}
 */
/* moves line down */
/* .hamburger-menu .hamburger > div:after {top: 10px} */

/* toggler animation */
/* .hamburger-menu .toggler:checked + .hamburger > div {transform: rotate(135deg) ;z-index:3;} */

/* turn lines into x */
/* .hamburger-menu .toggler:checked + .hamburger > div:before,
.hamburger-menu .toggler:checked + .hamburger > div:after {top:0; transform: rotate(90deg);} */

/* show menu */
/* .hamburger-menu .toggler:checked ~ .menu {visibility:visible}  
.hamburger-menu .toggler:checked ~ .menu > div {transform: translateX(0%); transition-duration: 0.75s}
.hamburger-menu .toggler:checked ~ .menu > div > div {opacity:1; transition: opacity 0.4s ease}

.hamburger-menu .menu {position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden; visibility:hidden; display:flex; align-items:center;justify-content:center; }
.hamburger-menu .menu > div { background:rgba(119, 188, 65, 1);width:100vw;  z-index: 5;height:100vh;display:flex;align-items:center;justify-content:center;transform:translateX(200%);transition: all 0.4s ease}
.hamburger-menu .menu > div > div {text-align:left; max-width:90vw; max-height:100vh; opacity:0;transition: opacity 0.4s ease}
.hamburger-menu .menu > div > div > ul {padding-inline-start: 0px}
.hamburger-menu .menu > div > div > ul > li { padding: 1rem; list-style:none;font-family: Red Hat Display; font-size: 16px;text-decoration:none; color: white; font-weight: 500}
.hamburger-menu .menu > div > div > ul > li > a {transition: color 0.4s ease;font-family: Red Hat Display; font-size: 16px;text-decoration:none; color: white; font-weight: 500} */

/* .nav-dropdown-menu {display: none; flex-direction:column; justify-content: flex-start; padding-left: 30px }
.nav-dropdown-menu.open {display:flex!important}
.nav-dropdown-menu a {padding: 5px 0px; font-family: Red Hat Display; font-size: 14px; color:white; text-decoration:none }
.nav-dropdown-menu2 {display: none; flex-direction:column; justify-content: flex-start; padding-left: 30px }
.nav-dropdown-menu2.open {display:flex!important}
.nav-dropdown-menu2 a {padding: 5px 0px; font-family: Red Hat Display; font-size: 14px; color:white; text-decoration:none }
.nav-dropdown-menu3 {display: none; flex-direction:column; justify-content: flex-start; padding-left: 30px;text-decoration:none }
.nav-dropdown-menu3.open {display:flex!important}
.nav-dropdown-menu3 a {padding: 5px 0px; font-family: Red Hat Display; font-size: 14px; color:white; text-decoration:none }
.nav-dropdown-menu4 {display: none; flex-direction:column; justify-content: flex-start; padding-left: 30px;text-decoration:none }
.nav-dropdown-menu4.open {display:flex!important}
.nav-dropdown-menu4 a {padding: 5px 0px; font-family: Red Hat Display; font-size: 14px; color:white; text-decoration:none }  */

/* 3-COL */
.three-col .col {margin: 20px 0px}
.col-icon {max-height: 45px; margin-bottom: 15px}
.card-style {box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;;border-radius: 8px;padding: 20px; }
#awards .col-icon {max-height: 90px;}
#blog-3-col .col-icon {width: 100%; max-height: 200px; min-height: 200px; object-fit:cover}
#finance-options-3-col .col-icon {width: 100%; max-height: 200px; min-height: 200px; object-fit:cover}

/* FULL WIDTH */
.full-width {position:relative}

#what-is-a-heat-pump {margin-bottom: 100px; padding-bottom: 60px}
#what-is-a-heat-pump img {width: 80%; max-width: 500px; position:absolute; bottom: -80px; left: 50%; transform: translate(-50%,  0%) }

/* VIDEO SPLIT */
.video-wrapper {width: 90%;}
.video-wrapper iframe { box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;;border-radius: 8px; width: 100%; height: 100%; min-height: 220px;}
.video-wrapper video { box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;;border-radius: 8px; width: 100%; height: 100%; min-height: 220px;object-fit:cover}

.video-copy {padding: 0 20px}

/* IMAGE SPLIT */
.splitSlide {max-width: 100%;}
.split-copy {margin-bottom: 20px; }
.splitSlide .swiper-slide {border-radius: 8px} 
.splitSlide .swiper-slide-next {border-radius: 8px} 
.splitSlide .swiper-slide-prev {border-radius: 8px} 
.splitSlide .swiper-wrapper {border-radius: 8px; padding-bottom: 15px} 
.splitSlide .swiper-slide img {width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 8px; }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: rgba(119, 188, 65, 1); border-radius: 20px}
.swiper-pagination-progressbar {background: white; height: 8px!important; }
.splitSlide .swiper-pagination-progressbar {background: white; height: 8px!important;bottom: 0;top:initial}
.splitSlide .swiper-button-next:after, .swiper-button-prev:after {font-size: 2em; color: white}
.splitSlide .swiper-button-next{background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px); padding: 9px 18px; border-radius: 50px}
.splitSlide .swiper-button-prev {background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 9px 18px;border-radius: 50px}
.splitSlide .swiper-button-next:hover {background: rgba(72, 68, 67, 0.82); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px); padding: 9px 18px; border-radius: 50px; transform: scale(1.03)}
.splitSlide .swiper-button-prev:hover {background: rgba(72, 68, 67, 0.82); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 9px 18px;border-radius: 50px; transform: scale(1.03)}
.split-image {max-width: 100%}

/* FULL MOD SLIDE */
.fullSlide {max-width: 100%;margin-top:20px}
.fullSlide .caption {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px)}
.fullSlide .swiper-slide {border-radius: 8px; position:relative;} 
.fullSlide .swiper-slide-next {border-radius: 8px} 
.fullSlide .swiper-slide-prev {border-radius: 8px} 
.fullSlide .swiper-wrapper {border-radius: 8px; padding-bottom: 15px} 
.fullSlide .swiper-slide img {width: 100%; height: auto; min-height: 300px; object-fit: cover; border-radius: 8px; max-height: 700px }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: rgba(119, 188, 65, 1); border-radius: 20px}
.swiper-pagination-progressbar {background: white; height: 8px!important; }
.fullSlide .swiper-pagination-progressbar {background: white; height: 8px!important;bottom: 0;top:initial}
.fullSlide .swiper-button-next:after, .swiper-button-prev:after {font-size: 2em; color: white}
.fullSlide .swiper-button-next{background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px); padding: 9px 18px; border-radius: 50px}
.fullSlide .swiper-button-prev {background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 9px 18px;border-radius: 50px}
.fullSlide .swiper-button-next:hover {background: rgba(72, 68, 67, 0.82); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px); padding: 9px 18px; border-radius: 50px; transform: scale(1.03)}
.fullSlide .swiper-button-prev:hover {background: rgba(72, 68, 67, 0.82); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 9px 18px;border-radius: 50px; transform: scale(1.03)}


/* OVERFLOW CARDS */
.overflow-cards {overflow-x:auto;margin: 0 0 0 20px;cursor: url("https://20167015.fs1.hubspotusercontent-na1.net/hubfs/20167015/idhp%20scroll%20mouse.png"), auto; cursor: pointer; padding-bottom: 20px }

.overflow-cards .testimonial-card {min-width: 250px; padding: 20px; border: 1px solid rgba(112, 112, 112, 1);border-radius: 20px; margin-right: 20px}
.overflow-cards .testimonial-card:nth-last-child(1) {margin-right: 20px}
.overflow-cards .testimonial-card:nth-last-child(odd) {background:rgba(246, 246, 246, 1) }
.overflow-cards .testimonial-card svg {fill: rgba(119, 188, 65, 1); height: 20px; padding: 5px 6px; border: 1px solid rgba(112, 112, 112, 1); border-radius: 50px}
.overflow-cards .testimonial-card h4 {margin: 0px}
.quote-icon {fill: rgba(119, 188, 65, 1); height: 20px; padding: 5px 6px; border: 1px solid rgba(112, 112, 112, 1); border-radius: 50px; background: white}

/* TESTIMONAL GRID */
.testimonial-grid .three-col {gap: 20px; }
.testimonial-grid .three-col .col {width: auto!important; flex: 1 1; margin: 20px 0!important;}
.testimonial-grid .testimonial-card {max-width: 100%; padding: 20px; border: 1px solid rgba(112, 112, 112, 1);border-radius: 20px; margin-bottom: 20px}
.testimonial-grid .col-1 .testimonial-card:nth-child(odd) {background:rgba(246, 246, 246, 1) }
.testimonial-grid .col-2 .testimonial-card:nth-child(even) {background:rgba(246, 246, 246, 1) }
.testimonial-grid .col-3 .testimonial-card:nth-child(odd) {background:rgba(246, 246, 246, 1) }
.testimonial-grid .testimonial-card svg {fill: rgba(119, 188, 65, 1); height: 30px; padding: 7px 8px; border: 1px solid rgba(112, 112, 112, 1); border-radius: 50px}
.testimonial-grid .testimonial-card h4 {margin: 0px}
.testimonial-grid .testimonial-card .quote-copy p {font-size:1.15rem}
.quote-icon {fill: rgba(119, 188, 65, 1); height: 20px; padding: 5px 6px; border: 1px solid rgba(112, 112, 112, 1); border-radius: 50px; background: white}

/* HOME-HERO_SLIDER */
.homeSlide {width: 100%;}
.homeSlide .swiper-wrapper .swiper-slide {position:relative;}
.homeSlide .swiper-wrapper .swiper-slide img {border-radius: 0px; width: 100%; min-height: 500px; object-fit:cover; max-height: 500px}
.homeSlide .swiper-wrapper .swiper-slide .caption {width: 80%;top: 20px;left: 20px;padding: 20px;position:absolute;background: rgba(72, 68, 67, 0.62);border-top-left-radius: 0px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);}
.homeSlide .swiper-wrapper .swiper-slide .caption h1 {position:relative; z-index: 2; color: white; font-size: 1.5rem}
.homeSlide .swiper-button-next:after, .swiper-button-prev:after {font-size: 2em; color: white}
.homeSlide .swiper-button-next{background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px); padding: 9px 18px; border-radius: 50px}
.homeSlide .swiper-button-prev {background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 9px 18px;border-radius: 50px}
.homeSlide .swiper-button-next:hover {background: rgba(72, 68, 67, 0.82); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px); padding: 9px 18px; border-radius: 50px; transform: scale(1.03)}
.homeSlide .swiper-button-prev:hover {background: rgba(72, 68, 67, 0.82); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 9px 18px;border-radius: 50px; transform: scale(1.03)}

/*  3 COL DROPDOWNS */
.dropdown {margin: 10px 0px!important}
.d-flex {display: flex;}
.align-items-center {align-items:center}
.text-control-1 h2 {margin-bottom: 20px;}
.q-mark { padding: 18px 0 18px 18px;}
.question {padding: 20px;margin: 0px;}
.more { padding: 20px;min-width: 18px; min-height:18;max-height: 18px; max-width: 18px; fill: rgba(87, 82, 82, .8)}
.answer {padding: 20px;padding-left: 20px;padding-bottom: 20px;background-color: #fff;overflow: hidden; border-radius: 8px;}
.accordion { background-color: #fff;cursor: pointer;width: 100%;text-align: left;outline: none;transition: 0.4s;box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;;border-radius: 8px;}
.question-wrapper {display: flex;justify-content: space-between;align-items: center;transition: background-color 0.25s ease-in-out;width: 100%; border-radius: 8px;}
.answer-wrapper {display: none;}
.icon-expend {transform: rotateX(180deg);transition: transform 0.75s ease-in-out;}
.question-wrapper.active, .accordion:hover .question-wrapper {background-color: rgba(246, 246, 246, 1)}
.active p, .accordion:hover .question-wrapper p {}
.container {width: 100%}

/* FORM */
 .form-wrapper form { position: relative; font-family: Red Hat Display}
 .form-wrapper form fieldset { max-width: 100%!important; }
 .form-wrapper form ul { list-style-type: none; padding: 0; margin: 2px 0 10px 0;  }
 .form-wrapper form fieldset.form-columns-2 .hs-form-field { width: 100%!important; box-sizing: border-box;}
.form-wrapper form fieldset.form-columns-2 .hs-input {margin-right: 0px!important; width: 100%!important}
.form-wrapper form fieldset.form-columns-2 .input {margin-right: 0px!important}
.form-wrapper form fieldset.form-columns-1 .input {margin-right: 0px!important}
 .form-wrapper form fieldset.form-columns-1 .hs-form-field { width: 100%!important; box-sizing: border-box; }
.form-wrapper form fieldset.form-columns-1 input[type="checkbox"] {margin-right: 10px; margin-bottom: 0}
.form-wrapper .hs-richtext {color:rgba(87, 82, 82, .8); font-size: 12.8px }
.form-wrapper form input, form select, textarea { border: 1px solid rgba(119, 188, 65, 1); border-radius: 7px; padding: 15px; box-sizing: border-box; color: white; box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;  }
 .form-wrapper form input:focus , form select:focus , textarea:focus {border: 2px solid ; color: rgba(87, 82, 82, .8)}
 .form-wrapper form .legal-consent-container p { font-size: .8em; margin: 20px 0 0 0; max-width: 700px; color: rgba(87, 82, 82, .8) }
 .form-wrapper form input[type="submit"] { padding: 15px 50px; border-radius: 9px;  margin: 20px 0 0 0; width: auto; cursor: pointer; transition: .2s; font-weight: 700; border: 0; box-shadow: none; }
 .form-wrapper form input[type="submit"]:hover { transition: .2s; }
 .form-wrapper label { font-size: 16px; margin: 15px 0 5px 0; display: block;color: rgba(87, 82, 82, .8); font-weight: 500 }
 .form-wrapper textarea {padding-bottom: 20px; padding-top: 20px; font-family: "Inter", sans-serif; width: 100%!important}
 .hs-error-msg { color: ; }
 .hs-error-msgs { margin: 0 0 36px 0; padding-left: 0 }
.hs-error-msgs li {
    list-style-type: none;

}
 .legal-consent-container .hs-error-msgs label { color: ; }
 .form-wrapper form select { -webkit-appearance: none; }
 .form-wrapper form fieldset ul p { color: white; }
 .form-wrapper form input, .standardForm form select, .standardForm form textarea {; color: rgba(87, 82, 82, .8);    }
.form-wrapper form input[type="submit"] {  background-color: rgba(119, 188, 65, 1);  color:white;  -webkit-appearance: none; width: 100%; font-family: Red Hat Display; font-size: 16px; border: 1px solid rgba(119, 188, 65, 1)}
.form-wrapper form input[type="submit"]:hover {  background: white; box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;; color: rgba(87, 82, 82, .8); border: 1px solid rgba(119, 188, 65, 1) }
 input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover, 
textarea:-webkit-autofill:focus, 
select:-webkit-autofill, 
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus 
{
  border: 0;  
  -webkit-text-fill-color: black;
  color: black;
}

  form h2 {margin-top: 0px}
 input:-internal-autofill-selected {background-color: !important; color: white!important; box-shadow: none}
.submitted-message {font-family: }

textarea {  padding: 10px 5px; border: unset; box-shadow: unset; font-family: Arial; }

/* BLOG */
.blog-header {}
.blog-header h2 {text-align:center}
.blog-snippet h2 {font-size:1.17em;}
.blogTags ul {display: flex; list-style-type:none; padding-inline-start:0px; flex-wrap:wrap}
.blogTags ul li::marker {display:none}
.blogTags ul li {margin: 15px 0px}
.filterTag {text-decoration:none; padding: 8px 16px; margin: 0px 5px; border: 1px solid rgba(119, 188, 65, 1); border-radius: 50px; box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;; color: rgba(87, 82, 82, .8)}
.blogTags ul li a {text-decoration:none; padding: 8px 16px; margin: 0px 5px; border: 1px solid rgba(119, 188, 65, 1); border-radius: 50px; box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;; color: rgba(87, 82, 82, .8)}
.blog-index__post {margin: 10px; padding: 0px}
.blog-index__post a {text-decoration:none}
.blog-index__post-image--large {height: 300px; width: 100%; display: block; background-size:cover; border-top-right-radius: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
.blog-index__post .post-title a {font-weight: 700; color: rgba(87, 82, 82, .8)}
.blog-index__post .post-title a:hover {color: #fdb817}
.blog-index__post-image--small {height: 220px; width: 100%; display: block; background-size:cover; border-top-right-radius: 8px; border-top-left-radius: 8px; border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
.blog-index__post-content {padding: 20px}

.blog-post-wrapper {max-width: 900px; padding: 20px; margin: 0 auto; box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
.blog-post-wrapper .blog-body img {max-width: 700px; width: 100%!important; margin: 0 auto; object-fit:cover}
 .author-icon {margin-right: 8px}
.publish-date {margin-left: 8px}
.blog-data {font-size: 13px}

/* Numbered Blog Pagination */
.blog-pagination { display: block; text-align: center; margin: 20px 0px 40px 0px}
.blog-pagination > div { display: inline-block; }
.blog-pagination-left { text-align: right; }
.blog-pagination-right { text-align: left; }
.blog-pagination a { display: inline-block; text-align: center; border-radius: 4px; padding: 5px 10px; text-decoration: none; transition: .2s; }
.blog-pagination a:hover, .blog-pagination a:focus { background-color: rgba(246, 246, 246, 1); transition: .2s; }
.blog-pagination a.elipses { border: 0; }
.blog-pagination a.active { background-color: rgba(246, 246, 246, 1); color: ; pointer-events: none; cursor: default; }
.blog-pagination a.next-link, .blog-pagination a.prev-link { background-color: ; color: ; }
.blog-pagination a.next-link:hover, .blog-pagination a.prev-link:hover { background-color: rgba(246, 246, 246, 1); color: ; transition: .2s; }


/* FOOTER  */
.footer {background: rgba(246, 246, 246, 1); padding: 30px 0px}
.footer-col {padding: 15px 0px}
  .footer-col.links a {margin-bottom: 15px}
.footer .awards {padding: 20px 0px}
  .footer .awards img {max-height: 50px; margin: 0 5px}
.footer-logo {max-width: 150px}
.footer h2 {font-size: 1.17rem}
 .footer .page-center { padding: 0px 20px 30px 20px}

/* MEDIA-QUERIES */
@media (max-width: 768px) {
.testimonial-grid .three-col .col {margin: 0!important;}
  .testimonial-grid .three-col {gap: 0px; }
}
@media (min-width: 510px) {
#what-is-a-heat-pump {margin-bottom: 100px; padding-bottom: 90px}
#what-is-a-heat-pump img {width: 80%; max-width: 500px; position:absolute; bottom: -80px; left: 50%; transform: translate(-50%,  0%) }
}

@media (min-width: 768px) {
/*   RULES */
  .flex.flex-row-reverse {flex-direction:row-reverse!important}
  .pd-small {padding: 40px 0}
    .pd-med {padding: 60px 0}
  .pd_large {padding: 80px 0}
  .header-module .big-copy {max-width: 600px; font-size: 1.17rem}
    #what-is-a-heat-pump {margin-bottom: 100px; padding-bottom: 120px}
#what-is-a-heat-pump img {width: 80%; max-width: 500px; position:absolute; bottom: -80px; left: 50%; transform: translate(-50%,  0%) }
  #how-does-it-work {padding-bottom: 60px}
  
/*   3 COL */
.flex.r-flex-column {flex-direction: row}
.three-col .col {margin: 20px 20px; width: 33.33%}
  .three-col .col.flex:nth-child(1) {margin-left: 0}
  .three-col .col.flex:nth-child(3) {margin-right: 0}
  #blog-3-col .col {max-height: 300px}
  #blog-3-col .col-icon {max-height: 175px; min-height: 150px}
/*   IMAGE SPLIT */
  .split-copy {max-width: 50%; padding-right: 30px}
   .flex.flex-row-reverse .split-copy {max-width: 50%; padding-right: 0px; padding-left: 30px}
  .split-image {max-width: 100%}
/*   VIDEO SPLIT */
  .video-copy {max-width: 40%; padding-left: 30px}
  .video-wrapper iframe {min-height: 400px}
   .video-wrapper video {min-height: 400px}
  
/*   HOME HERO SLIDER */
  .homeSlide .swiper-wrapper .swiper-slide img {border-radius: 0px; width: 100%; min-height: 600px; object-fit:cover; max-height: 600px}
  .homeSlide .swiper-wrapper .swiper-slide .caption {box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;;width: auto; max-width: 500px;top: 50px;left: 20px;padding: 20px;position:absolute;background: rgba(72, 68, 67, 0.62);border-top-left-radius: 0px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);}

/*   OVERFLOW CARDS */
  .overflow-cards .testimonial-card svg {height: 30px; padding: 7px 9px }
  
  /*   FULL WIDTH SLIDER */
  .fullSlide {max-width: 750px}
  .fullSlide .swiper-slide img {width: 100%; height: auto; min-height: 300px; object-fit: cover; border-radius: 8px; max-height: 700px; margin: 0 auto }
  
/*   TESTIMONIAL GRID */
  
/*   BLOG */
  
  .blog-index__post--small {max-width: calc(50% - 20px)}
  .blog-index__post-image--large {height: 100%; min-height: 300px;min-width:350px; display: block; background-size:cover;border-top-right-radius: 0px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;border-bottom-right-radius: 0px;}
  .blog-index__post--large {display: flex; flex-wrap:nowrap}
  .blog-post-wrapper {max-width: 900px; padding: 40px; margin: 0 auto; box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
.blog-post-wrapper .blog-body img {max-width: 700px; width: 100%!important; margin: 0 auto; max-height: 550px}
  .blog-post-wrapper .blog-body {max-width: 700px;margin: 0 auto}

/*   FOOTER */
  .footer .page-center {justify-content:space-between; padding: 0px 20px 50px 20px}
  .footer-col {width: 30%; }
  .footer-col.links a {margin-bottom: 15px}
  .footer .awards img {max-height: 80px; margin: 0 5px}
}

@media (min-width: 1200px) {
/*   RULES */
 #how-does-it-work {padding-bottom: 80px}
 .pd-small {padding: 60px 0}
  /*   VIDEO SPLIT */
  .video-copy {max-width: 35%; padding-left: 90px; padding-right: 20px}
  .video-wrapper {padding-left: 20px}
  .video-wrapper iframe {min-height: 400px; }
   .video-wrapper video {min-height: 400px; }
  .video-section .flex {max-width: 1200px; margin: 0 auto}
  .overflow-wrapper {}
  .overflow-cards {max-width: 100%; margin-left: 10% }
  .overflow-cards .testimonial-card {min-width: 300px}
  
  /*   IMAGE SPLIT */
  .split-copy {max-width: 50%; padding-right: 75px}
   .flex.flex-row-reverse .split-copy {max-width: 50%; padding-right: 0px; padding-left: 75px}
  .splitSlide .swiper-slide img {width: 100%; height: 100%; min-height: 400px; object-fit: cover; border-radius: 8px; max-height: 400px }
  .splitSide .swiper-button-next{background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px); padding: 9px 18px; border-radius: 50px}
.splitSide .swiper-button-prev {background: rgba(72, 68, 67, 0.62); backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);padding: 9px 18px;border-radius: 50px}
.split-image {min-width: 400px; padding-left: 30px; max-height: 400px; object-fit:contain}
  /*   FORM */
  .form-wrapper {max-width: 800px; margin: 0 auto; padding: 20px; background: rgba(246, 246, 246, 1); box-shadow:rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;; border-radius: 8px }
  
  

  
  
/*   FULL NAV */
/*    .mobile-nav {display:none}
  .full-nav {padding: 10px 20px 10px 20px;display:block; max-width: 1200px; margin: 0 auto; font-weight: 700 }
  .full-nav .nav-items {max-width: 100%;display: flex; justify-content:space-around; margin: 0 auto; align-items:center;flex-wrap:wrap}
  .full-nav .logo img { width: 150px; padding: 10px 0px }
  .full-nav .nav-bg {padding: 43px 0px 43px 0px;background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 12%, rgba(255,255,255,0.85) 29%, rgba(255,255,255,1) 51%, rgba(255,255,255,0.85) 72%, rgba(255,255,255,0.6) 86%, rgba(255,255,255,0) 100%, rgba(255,255,255,0.85) 617%);}
  .full-nav ul {display: flex; list-style:none; font-family: Red Hat Display;padding-inline-start: 0px}
  .full-nav ul li a {margin: 0 15px;font-family: Red Hat Display;  text-decoration:none; color: rgba(115, 111, 111, 1); font-size: 16px; font-weight: 700}
  .full-nav ul li a:hover {color:rgba(119, 188, 65, 1)}
    .full-nav ul li  {margin: 0 15px;font-family: Red Hat Display;  text-decoration:none; color: rgba(115, 111, 111, 1);font-size: 16px}
  .full-nav ul li:hover {color: rgba(119, 188, 65, 1)}
  .full-nav ul li:hover {cursor:pointer}
  .full-nav-target {position:relative; }
  .full-nav .nav-dropdown-menu {color: rgba(87, 82, 82, .8);position:absolute; background:white; margin: 10px 0px; padding: 0px 0px; top:27px; left: -208px; text-align:center; width: 201px; z-index: 2; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
  .full-nav .nav-dropdown-menu2 {color: rgba(87, 82, 82, .8);position:absolute; background:white; margin: 10px 0px; padding: 0px 0px; top:27px; left: -146px; width: 160px; text-align:center; z-index: 2;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }
  .full-nav .nav-dropdown-menu3 {color: rgba(87, 82, 82, .8);position:absolute; background:white; margin: 10px 0px; padding: 0px 0px; top:27px; left: -161px; width: 160px; text-align:center; z-index: 2;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }
  .full-nav .nav-dropdown-menu4 {color: rgba(87, 82, 82, .8);position:absolute; background:white; margin: 10px 0px; padding: 0px 0px; top:27px; left: -161px; width: 160px; text-align:center; z-index: 2;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; }
  .full-nav .nav-dropdown-menu a  { color: rgba(87, 82, 82, .8);font-size:14px; text-decoration:none;padding:8px 5px;  }
  .full-nav .nav-dropdown-menu a:hover {background: rgba(246, 246, 246, 1)}
    .full-nav .nav-dropdown-menu2 a  { color: rgba(87, 82, 82, .8); font-size:14px; text-decoration:none;color: rgba(87, 82, 82, .8);font-size:14px; text-decoration:none;padding:8px 5px;}
    .full-nav .nav-dropdown-menu2 a:hover {background: rgba(246, 246, 246, 1)}
    .full-nav .nav-dropdown-menu3 a  { color: rgba(87, 82, 82, .8); font-size:14px; text-decoration:none;color: rgba(87, 82, 82, .8);font-size:14px; text-decoration:none;padding:8px 5px;}
      .full-nav .nav-dropdown-menu3 a:hover {background: rgba(246, 246, 246, 1)}
      .full-nav .nav-dropdown-menu4 a  { color: rgba(87, 82, 82, .8); font-size:14px; text-decoration:none;color: rgba(87, 82, 82, .8);font-size:14px; text-decoration:none;padding:8px 5px;}
      .full-nav .nav-dropdown-menu4 a:hover {background: rgba(246, 246, 246, 1)}

  .nav-cta {margin-top:-8px} */
  
  


  
  /*   HOME HERO SLIDER */
  .homeSlide .swiper-wrapper .swiper-slide img {border-radius: 0px; width: 100%; min-height: 750px; object-fit:cover; max-height: 750px}
.homeSlide .swiper-wrapper .swiper-slide .caption {width: auto; max-width: 500px;top: 100px;left: 100px;padding: 20px;position:absolute;background: rgba(72, 68, 67, 0.62);border-top-left-radius: 0px;border-top-right-radius:8px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);}
.homeSlide .swiper-wrapper .swiper-slide .caption h1 {position:relative; z-index: 2; color: white; font-size: 2rem}
  .homeSlide .swiper-button-prev {left: 100px}
  .homeSlide .swiper-button-next {right: 100px}
  
/*   BLOG */
  
  .blog-index__post--small {max-width: calc(33% - 20px)}
  .blog-index__post-image--large {height: 100%; min-height: 400px;min-width:500px; display: block; background-size:cover;border-top-right-radius: 0px; border-top-left-radius: 8px; border-bottom-left-radius: 8px;border-bottom-right-radius: 0px;}
  .blog-index__post--large {display: flex; flex-wrap:nowrap}

  .footer-logo {margin-left: 20px}
}

@media (min-width: 1450px) {
    .overflow-cards {max-width: 100%; margin-left: 15% }
    /*   HOME HERO SLIDER */
  .homeSlide .swiper-wrapper .swiper-slide img {border-radius: 0px; width: 100%; min-height: 750px; object-position:0 20%; max-height: 750px}
.homeSlide .swiper-wrapper .swiper-slide .caption {width: auto; max-width: 500px;top: 100px;left: 400px;padding: 20px;position:absolute;background: rgba(72, 68, 67, 0.62);border-top-left-radius: 0px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(6.8px);-webkit-backdrop-filter: blur(6.8px);}
  .homeSlide .swiper-wrapper .swiper-slide[data-swiper-slide-index="1"] .caption {left: 800px; }
    .homeSlide .swiper-wrapper .swiper-slide[data-swiper-slide-index="4"] .caption {left: 800px;}
  .homeSlide .swiper-wrapper .swiper-slide .caption h1 {position:relative; z-index: 2; color: white; font-size: 2rem}
  .homeSlide .swiper-button-prev {left: 150px}
  .homeSlide .swiper-button-next {right: 150px}
  .full-nav {max-width: 1400px}
      }

@media (min-width: 1700px) {
    .overflow-cards {max-width: 100%; margin-left: 20% }
      }

@media (min-width: 1950px) {
   .overflow-cards {max-width: 100%; margin-left: 25% }
}