/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
* {box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  scroll-behavior: smooth;
  }

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  font-family: var(--regular);
  
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

*{
  -webkit-tap-highlight-color: transparent;
}




@font-face {
  font-family: 'Figtree-Black';
  src: url('../fonts/Figtree-Black.eot?#iefix') format('embedded-opentype'),  
	     url('../fonts/Figtree-Black.ttf')  format('truetype'), url('../fonts/Figtree-Black.svg#Figtree-Black') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree-Bold';
  src: url('../fonts/Figtree-Bold.eot?#iefix') format('embedded-opentype'),  
	     url('../fonts/Figtree-Bold.ttf')  format('truetype'), url('../fonts/Figtree-Bold.svg#Figtree-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree-Regular';
  src: url('../fonts/Figtree-Regular.eot?#iefix') format('embedded-opentype'),  
	     url('../fonts/Figtree-Regular.ttf')  format('truetype'), url('../fonts/Figtree-Regular.svg#Figtree-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree-Medium';
  src: url('../fonts/Figtree-Medium.eot?#iefix') format('embedded-opentype'),  
	      url('../fonts/Figtree-Medium.ttf')  format('truetype'), url('../fonts/Figtree-Regular.svg#Figtree-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree-Light';
  src: url('../fonts/Figtree-Light.eot?#iefix') format('embedded-opentype'), 
	    url('../fonts/Figtree-Light.ttf')  format('truetype'), url('../fonts/Figtree-Light.svg#Figtree-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Figtree-SemiBold';
  src: url('../fonts/Figtree-SemiBold.eot?#iefix') format('embedded-opentype'),  
	      url('../fonts/Figtree-SemiBold.ttf')  format('truetype'), url('../fonts/Figtree-SemiBold.svg#Figtree-SemiBold') format('svg');
  font-weight: normal;
  font-style: normal;
}




:root {
    --black: #000000;
    --white: #ffffff;
      --red: #FF011B;
 --darkGray: #383838;
--lightGray: #EDEDED;
--font14:14px;
--font16:16px;
--font18:18px;
--font24:24px;
--font28:28px;
--font32:32px;
--font38:38px;
--font52:52px;
--regular:'Figtree-Regular';
--medium:'Figtree-Medium';
--bold:'Figtree-Bold';
--semiBold:'Figtree-SemiBold';
--light:'Figtree-Light';
--blackFont:'Figtree-Black';

}
/* 
.whiteBg { background-color: var(--white); }
.redBg { background-color: var(--red); }
.darkGrayBg { background-color: var(--darkGray); }
.lightGrayBg { background-color: var(--lightGray); }

.blackColor { color: var(--black); }
.whiteColor { color: var(--white); }
.redColor { color: var(--red); } */

/* .mt-35{
  margin-top: 35px;
} */
.darkGrayBg { background-color: var(--darkGray); }
.lightGrayBg { background-color: var(--lightGray); }
.blackBg { background-color: var(--black); }
.mr-r{
  margin-right: 26px;
}
.mr-t{
  margin-top: 30px;
}
.mr-t2{
  margin-top: 35px;
}
p{
  font-family: var(--regular);
  font-size: var(--font16);
  line-height: 26px;
  font-weight: normal;
}
p a{
  color: red;
  transition: all 0.35s;
}
p a:hover{
  color: red;
  text-decoration: underline;
  transition: all 0.35s;
}

/* .container{
  max-width: 1676px;
  padding-left: 20px;
  padding-right:20px;  
  margin-right: auto;
  margin-left: auto;  
} */

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
}


.menubar{ 
  width: 100%;
  height: 107px;
}
.homeBanner {
  position: relative;
}
.homeBanner img {
  width: 100%;
}
.desk{
  display: block;
}
.mob{
  display: none;
}
.homeBannerContent {
  position: absolute;
  bottom: 90px;
}
.bannerHeading { 
  font-family: var(--medium);
  font-size: 78px;
  color: var(--white);
  margin-bottom: 40px;
  margin-top: 0;
  font-weight: normal;
}
.findoutBtn {
  font-size: var(--font14);
  text-transform: uppercase;
  font-family: var(--medium);
  letter-spacing: 2px;
  background-color: var(--white);
  padding: 13px 43px 11px;
  color: var(--black);
  text-decoration: none;
  border: solid 1px var(--black);
  float: left;
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  min-width: 245px;
  text-align: center;
}
.findoutBtn:hover {
 background: var(--red);
  border: solid 1px var(--red);  
  color: var(--white);
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
}
.bannerBtnRow .findoutBtn{
  border: solid 1px var(--white);
}
.bannerBtnRow .findoutBtn:hover{
  background-color: var(--white);
  color: #000;
}
.bannerBtnRow .findoutBtn.g-quote:hover{
  background-color: transparent;
  color: #fff;
}
/* .bannerBtnRow .findoutBtn:hover{
  background-color: transparent;
  color: var(--white);
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
} */
.findoutBtn2 {
  font-size: var(--font14);
  text-transform: uppercase;
  font-family: var(--medium);
  letter-spacing: 2px;
  background-color: transparent;
  padding: 12px 43px;
  color: var(--black);
  text-decoration: none;
  border: solid 1px var(--red);
  float: left;
  cursor: pointer;
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
}
.findoutBtn2:hover {
 background: var(--red);
 color: var(--white);
}
.findoutBtn.g-quote {
  background-color: transparent;
 color: var(--white);
 transition: all 0.35s;
 border: 1px solid #fff;
}
.findoutBtn.g-quote:hover {
  background-color: transparent;
 color: var(--white);
 transition: all 0.35s;
 border: 1px solid #fff;
}




.bannerTopText {
  font-family: var(--regular);
  font-size: var(--font32);
  color: var(--white);
  position: relative;
  margin-left: 60px;

}

.bannerTopText::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50px;
  background-image: url(../images/headingIco.png);
  background-size: 35px;
  height: 15px;
  width: 35px;
}
.introHeading{
  font-size: 52px;
  font-family: var(--medium);
  margin-top: 75px;
  margin-bottom: 25px;
  font-weight: normal;
}

.introText {
  width: 100%;
  margin-bottom: 60px;
  position: relative;
  z-index: 9;
}

.threeColumns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  row-gap: 25px;
}
.twoColumnsMainBox {
  width: 100%;
  float: left;
  margin-top: 50px;
}
.twoColumnsMainBox.mr-t {
    margin-top: 15px;
}
.oneColumns{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 56px;  
}
.twoColumns{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;  
}
.productBox {
  position: relative;
  padding-bottom: 100px;
}
.productHeading {
  font-size: var(--font32);
  font-family: var(--regular);
  color: var(--black);
}
.productTextBox .productHeading {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: left;
}
.productTextBox .findoutBtn{
  margin-top: 35px;
  margin-bottom: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.productTextBox p {
  text-align: left;
}
.productBox.blackBg {
  height: 620px;
}
.productBox.blackBg {
  color: var(--white);
  text-align: center;
  padding: 25px;
}
.productBox.blackBg .productHeading{
  color: var(--white);
}
.imgResponsive {
  max-width: 100%;
  width: auto;
  height: auto;
}
.innerPageBanner img {
  min-height: 130px;
  max-height: 130px;
  width: 100%;
}
.productBox.blackBg p {
  font-family: var(--regular);
  font-size: var(--font24);
  margin-left: 3%;
  margin-right: 3%;
  line-height: 32px;
  margin-bottom: 45px;
  text-align: center;
}
.blackBg .getQuoteBtn {
  margin-top: 20px;
}
.warrantyBox {
  width: 92%;
  float: left;
  margin-left: 12%;
}
.warrantyImg {
  float: left;
}
.warrantyText {
  float: left;
  font-size: 48px;
  line-height: 60px;
  text-align: left;
  margin-top: 56px;
  margin-left: 15px;
  font-family: 'Figtree-Regular';
  font-weight: normal;
}

.getQuoteBtn {
  font-size: var(--font14);
  font-family: var(--medium);
  letter-spacing: 2px;
  border: solid 1px var(--red);
  text-decoration: none;
  color: var(--white);
  text-transform: uppercase;
  padding: 11px 0;
  width: 86%;
  float: left;
  margin-left: 7%;
  margin-right: 7%;
}
.getQuoteBtn:hover {
color: var(--white);
background: var(--red);
transition: all 0.35s;
}

 .feturesInnerSection .whyFeturesRow{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px; 
} 
.feturesInnerSection .feturesBox {
  width: 100%;
}
.whyFeturesRow {
  display: flex;
  justify-content: center;
  gap: 56px; 
}

.feturesBox {
  width: 25%;
}
.whyCambroOuterSection{
  position: relative;
  margin-top: 65px;
  background-size: 100% auto;
  width: 100%;
  float: left;
}
.whyCambroOuterSection.underfloorHeating {
  margin-top: 0;
}
.whyCambroInnerSection {
  color: var(--white);
  padding: 125px 0px;
  text-align: center;
  position: relative;
  z-index: 1  ;
}
.whyBgImg > .imgResponsive {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.comonHeading {
  font-size: var(--font38);
  font-family: var(--medium);
  margin-bottom: 15px;
  font-weight: normal;
}
.whyCambroInnerSection h2.comonHeading {
  margin-top: 0;
}
.feturesInnerSection h2.comonHeading {
  margin-top: 0;
}
.brandOuterSection {
  width: 100%;
  float: left;
  text-align: center;
  padding: 5% 0;
}
.whyIntroText {
  width: 67%;
  margin: 0 auto;
  margin-bottom: 50px;
}
.fetureHeading {
  font-size: var(--font18);
  font-family: var(--medium);
  color: var(--red); 
  padding: 0 20px;
  margin: 0 auto;
  margin-top: 15px; 
  line-height: 29px;  
  font-weight: normal;
}
.whyCambroInnerSection .fetureHeading {
  border-bottom: solid 2px #6E6E6E;
}
.brandBox{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10%;
}
.brandIcon {
  width: 20%;
  padding: 20px;
}
.clear{
  clear: both;
}


.footerSection {
  width: 100%;
  float: left;
  background-color: var(--darkGray);
  color: var(--white);
  padding: 48px 0px;
  position: relative;
  background-size: 1000px;
  background-repeat: no-repeat;
  background-size: 45%;
  background-position: right 0px bottom 0px;
}
.footerBox{
  width: 100%;
  float: left;
}
.footerLeftBox{
  width: 25%;
  float: left;
}
.footerRighttBox{
  width: 75%;
  float: right;
  padding-right: 50px;
  position: relative;
}
.instaImg{
  position: absolute;
  top: -9px;
  right: 80px;
  width: 45px;
}
.instaImg.insta{
  right: 82px;

}
.instaImg.fb{
  right: 14px;
}
.footerRightWrapper{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.footerRightBoxInner {
  width: calc(24% - 30px);
  margin-right: 30px;
}
.footerlogo {
  width: 118px;
}
.phoneNo {
  font-family: var(--semiBold);
  font-size: var(--font28);
  color: var(--white);
  background-color: var(--red);
  padding: 21px 52px;
  padding-top: 19px;
  width: 282px;
  float: left;
  height: 68px;
  text-decoration: none;
  margin-bottom: 15px;
}
.phoneNo:hover {
  color: var(--white);
}
.phoneNo {
  text-decoration: none;
  pointer-events: none;
}

.address {
  width: 100%;
  float: left;
}
.address a {
  width: 100%;
  float: left;
  color: var(--red);
  text-decoration: underline;
}
.address a:hover {
    color: var(--red);
}
.footerHeading {
  font-family: var(--regular);
  font-size: var(--font28);
  color: var(--white);
  padding-bottom: 20px;
  border-bottom: solid 1px #6E6E6E;
}
.footerHeading a.Nv_lnk{
  font-family: var(--regular);
  font-size: var(--font28);
  color: var(--white);

}

ul.footerList {
  padding-left: 1px;
  list-style: none;
  margin-top: 15px;
}
ul.footerList li {
  margin: 21px 0px;
}
ul.footerList li a {
  color: var(--white);
  font-size: var(--font16);
  font-family: var(--regular);
  line-height: 22.5px;
}
.footerBg {
  bottom: 0;
  position: absolute;
  right: 0;
}
.footerBg img {
  width: 1000px;
}
.copyRight {
  color: #6E6E6E;
  text-decoration: none;
  margin-top: 45px;
}
.copyRight a{
  color: #6E6E6E;
  text-decoration: none;
}
.copyRight a:hover{
  color: #6E6E6E;
}
.copyRight  sup{
  color: #6E6E6E;
}
.centerContent {
  text-align: center;
  width: 100%;
  float: left;
}
.centerContent.mr-t {
    margin-top: 20px;
}
.centerContent.hyhMar {
    margin-top: -15px;
}
.innerPageBanner { 
   position: relative;
  }
.InnerBannerText {
  position: absolute;
  top: 0px;
  width: 100%;
  min-height: 130px;
  text-align: center;
  float: left;
}

.innerPageHeading{
  /* background: url('../images/innerHeadingBg.jpg') no-repeat; */
  background-size: cover;
  width: 100%;
 min-height: 130px;
 text-align: center;
 float: left;
}
.innerHeading{
  color: var(--white); 
  font-family: var(--medium);
  font-size: var(--font52);
  margin-top: 0px;
  font-weight: normal;
}
.breadcrumbs {
  font-family: var(--regular);
  font-size: var(--font14);
  color: var(--white);
  padding-top: 18px;
  text-align: right;
  padding-right: 0px;
}
.breadcrumbs a {
  color: var(--white);
  transition: all 0.35s;
}
.breadcrumbs a:hover {
  color: var(--white);
  text-decoration: underline;
  transition: all 0.35s;
}
.breadcrumbs span {
  padding: 0 7px;
}
.threeColumnsUnderfloor {
  width: 100%;
  float: left;
  clear: both;
  margin-top: 15px;
}
.threeColumnsUnderfloor.subpage {
  margin-top: 15px;
}
.threeColumnsUnderfloor.radiators .productBox {
  padding-bottom: 0;
}
.threeColumnsUnderfloor.radiators {
  margin-bottom: 60px;
}
.threeColumnsUnderfloor .productBox {
  padding-bottom: 25px;
}
.twoColumnsMainBox.heatingWork {
  margin-top: 100px;
  float: left;
  width: 100%;
}
.twoColumnsMainBox.underfloor {
  margin-top: 15px;
  float: left;
  width: 100%;
  margin-bottom: 50px;
}

.twoColumnsMainBox.underfloor .productBox {
  margin-bottom: 0;
  padding-bottom: 0;
}
.testimonimain.underfloor {
  margin-top: 0;
}
.serviceBox.blackBg {
  color: var(--white);
}
.serviceBox {
  padding: 35px;
}
.serviceImg {
  float: left;
  width: 14%;
  height: 100%;
}
.serviceImg img {
  width: 85px;
}
.serviceBox.blackBg .serviceImg img {
  width: 55px;
  margin-left: 5%;
}
.serviceBox.blackBg .findoutBtn {
  border: solid 1px var(--red);
  color: var(--white);
  background: transparent;
}
.feturesOuterSection.subpage {
  margin-bottom: 50px;
}
.serviceTextBox {
  width: 90%;
  text-align: left;
}

.serviceHeading {
  font-size: var(--font32);
  font-family: var(--regular);
}

.serviceBox h2.serviceHeading {
  margin-top: 0;
  font-weight: normal;
}

.feturesOuterSection{
  width: 100%;
  float: left;
  position: relative;
  margin-top: 65px;
  background-size: 100% auto;
  background: var(--darkGray);
}

.feturesInnerSection {
  color: var(--white);
  padding: 80px 0px;
  text-align: center;
}

.feturesRow{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px; 
}
.subPages .feturesRow {
  display: flex;
  gap: 35px;
  flex-wrap: wrap;
  justify-content: center;
}

.subPages .feturesInnerSection .feturesBox{
  width: 23%;
}

.feturesIntroText {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 50px;
}
.feturesInnerSection .fetureIcon img {
  width: 90px;
  height: 90px;
  min-height: 90px;
}

.feturesInnerSection .fetureHeading {
  font-size: var(--font24);
  font-family: var(--medium);
  color: var(--white);
  text-transform: none;
  font-weight: normal;
}
.whyCambroOuterSection.hydronicHeating {
  margin-top: 0;
}

.enquirnowsec {
  float: left;
  width: 100%;
  background: var(--lightGray);
  padding: 40px 15px 55px;

}
.enquirnowsec .form-titles {
  text-align: center;
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 20px;
}
.heading-mdtitle {
  font-size: 28px;
  margin: 0 0 15px;
  font-family: Mulish-Bold;
  font-weight: normal;
}
.enquirnowsec .colcontain {
  float: left;
  display: block;
  width: 100%;
  padding: 0px;
  position: relative;
}
.colcontain .custcolrow {
  position: relative;
  margin: 0 -20px;
  font-family: 'Figtree-Regular';
}
.qtfrmmain .fieldrow {
  float: left;
  width: 100%;
  margin: 0 0 10px;
}
.colcontain .custcolrow .col6 {
  width: 50%;
  position: relative;
  padding: 0 20px;
}
 .custcolrow.col6 {
  padding: 0 20px;
}
.qtfrmmain .form-field {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  min-height: 47px;
  padding: 0 8px;
  color: var(--darkGray);
  border-bottom: solid 1px #000;
  border-radius: 0;
}
.qtfrmmain .col12 .form-field {
  padding-left: 0px;
}
.qtfrmmain .form-field.select {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  min-height: 47px;
  padding: 0 8px;
  color: var(--darkGray);
  border-bottom: solid 1px #000;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url(../images/downArrow.png);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: right 1px center;
  outline: none;
}
.qtfrmmain .form-field:focus {
  outline: 0;
}
span.star {
  position: absolute;
  top: 14px;
  left: 18px;
}

.fileuplodinputmain {
  text-align: center;
  width: 100%;
}
.fileType {
  width: 51%;
  text-align: center;
  color: #8B623E;
  font-family:var(--regular);
  font-size: var(--font14);
  line-height: 24px;
  margin: 0 auto;
  margin-top: 25px;
}

.attachmentSec {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.attachmentHeading {
  text-align: center;
  width: 100%; 
  margin-bottom: 10px;
}
.upldimg {
  width: 121px;
  margin: 0 auto;
  position: relative;
}
.text-center {
  text-align: center !important;
}
.fileup-btn {
  position: relative;
  text-decoration: underline;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Figtree-Medium';
  color: #383838;
}
.files_details .file_list .cancel .fa-times::before {
  content: '';
  top: 7px;
  display: block;
  position: relative;
  width: 15px;
  height: 1px;
  background: #333;
  transform: rotate(45deg);
}
.files_details .file_list .cancel .fa-times::after {
  content: '';
  display: block;
  position: relative;
  width: 15px;
  height: 1px;
  background: #333;
  transform: rotate(-45deg);
  top: 6px;
}
.fileup-btn span img {
  margin-left: 10px;
  width: 17px;
  margin-bottom: -2px;
}

.qtfrmmain .files_details {
  display: block;
  text-align: center;
  margin: 20px 0 0;
}.colcontain .custcolrow .col12 {
  width: 100%;
  position: relative;
  padding: 0 20px;
}
.fieldrow.col12 {
  display: flex;
  justify-content: center;
}
.qtfrmmain .fieldrow {
  float: left;
  margin: 0 0 10px;
}
.join {
  display: inline-block;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 19px;
  color: var(--bs-body-color);
  border: 1px solid var(--darkGray);
  cursor: pointer;
  padding: 14px 40px;
  font-weight: 400;
  transition: all 0.3s;
  min-width: 252px;
  text-align: center;
  background: none;
  font-family: 'Figtree-Regular';
  font-weight: normal;
}
.join:hover {  
  background: var(--darkGray);
  color: var(--white);
}
.join .button-loader {
  display: none;
}
.button-loader > div {
  width: .8rem;
  height: .8rem;
  background-color: white;
  border-radius: 50%;
  animation: 1.2s infinite ease-in-out load;
}
.button-loader div:nth-child(1) {
  animation-delay: -0.32s;
}
.button-loader div:nth-child(2) {
  animation-delay: -0.16s;
}

.subpageCategory {
  width: 100%;
  float: left;
  margin-top: 55px;
}
ul.categoryList {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

ul.categoryList li {
  float: left;
  list-style: none;
}
ul.categoryList li a {
  padding: 20px 25px;
  border: solid 1px var(--darkGray);
  font-family: var(--medium);
  font-size: var(--font14);
  color: var(--black);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-right: none;
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  display: inline-flex;
}
ul.categoryList li:last-child a {
  border-right: solid 1px #000;
}

ul.categoryList li a:hover {
  background: var(--black);
  color: var(--white);
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
}
ul.categoryList li a.active {
  background: var(--black);
  color: var(--white);
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
}

.feturesOuterSection.subpage .comonHeading {
  margin-bottom: 60px;
  margin-top: 20px;
}
.feturesOuterSection.subpage .feturesInnerSection {
  padding: 60px 0px;
  padding-bottom: 0;
}
.feturesOuterSection.underfloor .feturesInnerSection {
  padding-bottom: 0;
}
.feturesOuterSection.subpage .feturesInnerSection .fetureHeading {
  font-size: var(--font24);
  font-family: var(--regular);
}
.feturesOuterSection.subpage .fetureHeading {
  padding: 0%;
  border-bottom: 0px;
}
.feturesOuterSection.subpage .feturesBox p {
  padding: 0%;
}
.feturesOuterSection.subpage .feturesRow {
  gap: 45px;
}
.gallery {
  width: 100%;
  float: left; 
  margin-bottom: 100px;
}
.galleryRow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px;
  width: 100%;
  float: left;
}
.galleryRow.four{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 45px;
  width: 100%;
  float: left;
}
.galleryImgName {
  font-size: 16px;
  font-family: 'Figtree-Medium';
  text-transform: uppercase;
  margin-top: 15px;
}
.galleryIntro {
  width: 100%;
  float: left;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 0px;
}
.casectamain {
  width: 100%;
  float: left;
  margin-top: 0;
  margin-bottom: 70px;
  padding: 0 15%;
  margin-top: 40px;
}
.casectain {
  background: var(--black);
  width: 100%;
  padding: 30px;
  display: grid;
  grid-template-columns: 70% 30%;
  font-size: 24px;
  color: var(--white);
  margin: 0 auto;
}
.ctaHeading {
  font-size: var(--font32);
  font-family: var(--bold);
  margin-bottom: 10px;
}
.ctaText {
  font-size: var(--font24);
  font-family: var(--regular);
  margin-right: 10px;
}
.ctaContent {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.price {
  width: 40%;
  float: left;
  color: var(--red);
  font-size: var(--font38);
  font-family: var(--medium);
}
.ctaBtn {
  font-size: var(--font14);
  color: var(--white);
  font-family: var(--medium);
  text-transform: uppercase;
  border-bottom: solid 1px var(--red);  
  letter-spacing: 2px;
  margin-left: 5%;
  margin-bottom: 10px;
  padding-bottom: 1px;
}
.ctaBtn:hover {
  color: var(--white);  
  border-bottom: solid 1px transparent;
}
.price span {
  width: 100%;
  display: block;
  font-size: var(--font16);
  font-family: var(--regular);
}
.hotWater .productTextBox .productHeading {
  margin-top: 0;
  margin-bottom: 0px;
  font-family: var(--medium);
  font-size: var(--font38);
  font-weight: normal;
}
.mainBoxRow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 80px;
}
.boxColumn {
  width: calc(50% - 27px); 
}
.boxColumnImgBox {
  position: relative;
}
.boxColumnTextBox {  
  padding-top: 20px;
}
.boxColumnTextFull {
  margin-top: 50px;
}
.iconOfBrand {
  max-width: 123px;
  position: absolute;
  left: 20px;
  bottom: 20px;
}
.boxColumnTextBox h4 {
  padding: 0;
  font-size: var(--font32);
  font-weight: normal;
  margin-bottom: 10px;
  font-family: var(--regular);
  margin-top: 5px;
}
.boxColumnTextBox h3 {
  padding: 0;
  font-size: var(--font32);
  font-weight: normal;
  margin-bottom: 10px;
  font-family: var(--regular);
  margin-top: 5px;
}
.brandListHeading {  
  font-family: var(--regular);
  font-size: var(--font24);
  margin-top: 20px;
  margin-bottom: 15px;
}
ul.redBulletList {
  margin-left: 1px;
  padding-left: 0px;
}
ul.redBulletList li {
  list-style: none;
  padding-left: 20px;
  font-size: 16px;
  font-weight: 400;
  padding-top: 5px;
  padding-right: 0px;
  padding-bottom: 2px;
  background-image: url(../images/listBullet.png);
  background-size: 21px;
  background-repeat: no-repeat;
  background-position: left 10px;
  color: #383838;
}
.redBulletList b{
font-size: var(--font16);
font-family: var(--semiBold);
margin-left: 15px;
color: #383838;
}
.redBulletList li{
font-size: var(--font16);
font-family: var(--regular);
line-height: 26px;
}
.outline-btns {
  float: left;
  margin-bottom: 25px;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.outline-btns .btn {
  padding: 0;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 10px 5px 0px 0;
  border: 1px solid #000;
  border-radius: 0;
  font-weight: 500;
  color: #fff;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
.brandMainBox .comonHeading {
  text-align: center;
  margin-bottom: 58px;
}
.rebateSectionOuter{
  padding: 70px 0px;
  color: var(--white);
  width: 100%;
  float: left;
}
.rebateSectionInner .comonHeading{
color: var(--white);
text-align: center;
margin-top: 0;
}
.feturesOuterSection.hydronicHeatPump .feturesInnerSection {
  padding-bottom: 0;
}
.rebateTextRed {
  text-align: center;
  font-family: var(--semiBold);
  font-size: var(--font24);
  color: var(--red);
}
.rebateTextRed a {
  color: var(--red);
  border-bottom: solid 1px var(--red);
}
.rebateTextRed span {
  color: var(--red);
  border-bottom: solid 1px var(--red);
}

.rebateTextRed a:hover {
  color: var(--red);
  border-bottom: solid 1px var(--red);
}
.rebateText {
  text-align: center;
  font-family: var(--regular);
  font-size: var(--font24);
  color: var(--white);
  line-height: 26px;
}
.rebateRow{
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin: 0 -15px;
  margin-top: 60px;
}
.rebateCol {
  width: calc(33.333333% - 30px);
  margin: 0 15px;
  padding: 0 60px;
  display: flex;
  align-items: flex-start;
}
.counter {
  padding: 20px;
  width: 50px;
  height: 50px;
  border: solid 1px var(--red);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--red);
  font-size: var(--font28);
  font-family: var(--semiBold);
}
.rebateColHead {
  font-size: var(--font24);
  font-family: var(--regular);
  color: var(--red);
  margin-top: 10px;
  font-weight: normal;
}
.rebateColContent {
  margin-left: 15px;
}
.rebateColText {
  font-size: var(--font16);
  font-family: var(--regular);
  line-height: 26px;
  margin-top: 10px;
}
ul.grayBulletList {
  margin-left: 1px;
  padding-left: 5px;
}
ul.grayBulletList li {
  list-style: none;
  padding-left: 20px;
  line-height: 26px;
  font-size: var(--font16);
  font-family: var(--regular);
  font-weight: 400;
  padding-top: 1px;
  padding-right: 0px;
  padding-bottom: 2px;
  background-image: url(../images/listBullet2.png);
  background-size: 7px;
  background-repeat: no-repeat;
  background-position: left 10px;
}
.rebateBottomContent {
  width: 100%;
  float: left;
  margin-top: 60px;
}
.brandMainBox {
  width: 100%;
  float: left;
}
.productMainBox{
  width: 100%;
  float: left;
  margin-top: 15px;
}
.productRow{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  margin: 0 -15px;
}
.productCol {
  width: calc(33.333333% - 50px);
  margin: 0 25px;
  margin-bottom: 95px;
  position: relative;
  padding-bottom: 55px;
}
.productHeading{
  font-family: var(--regular);
  font-size: var(--font32);
  margin-top: 25px;
  font-weight: normal;
}
.productListHead{
  font-family: var(--semiBold);
  font-size: var(--font16);
}
ul.productList {
  margin-left: 1px;
  padding-left: 0px;
}
ul.productList li {
  list-style: none;
  padding-left: 29px;
  font-size: var(--font16);
  font-family: var(--regular);
  font-weight: 400;
  line-height: 35px;
  padding-top: 1px;
  padding-right: 0px;
  padding-bottom: 2px;
  background-image: url(../images/listBullet.png);
  background-size: 21px;
  background-repeat: no-repeat;
  background-position: left 10px;
}

.warrantyMainBox {
  width: 100%;
  float: left;
}
.warrantyRow {
  display: flex;
  width: 100%;
  justify-content: center;
}
.warrantyCol {
  background-color: var(--black);
  color: var(--white);
  padding: 35px;
  max-width: 790px;
}
.warrantyImg {
  float: left;
  width: 21%;
  height: 100%;
}
.threeColumnsMainBox .warrantyImg {
  float: left;
  width: 28%;
  height: 100%;
}
.warrantyRow .findoutBtn {
  background: transparent;
  border: solid 1px var(--red);
  color: var(--white);
  min-width: 244px;
  text-align: center;
}
.warrantyRow .findoutBtn:hover {
  background: var(--red);
  color: #fff;
}
.warrantyMainBox .warrantyImg img {
  margin-left: 5%;
}
.warrantyImg img {
  margin-left: 5%;
}
.warrantyHeading {
  font-size: var(--font32);
  font-family: var(--regular);
}
h2.warrantyHeading {
  margin-top: 0;
  font-weight: normal;
}
.productCol .findoutBtn {
  position: absolute;
  bottom: 0;
}
.fourColumnsMainBox.heatPump {
  margin-top: 45px;
}
.fourColumnsMainBox{
  width: 100%;
  float: left;
}
.fourRow{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px;
  width: 100%;
  float: left;
}
.heatPumpModalNo {
  width: 100%;
  float: left;
  text-align: center;
  margin-top: 15px;
  position: relative;
}
.brandMainBox.heatPump {
  margin-top: 70px;
  width: 100%;
  float: left;
}
/* .heatPumpModalNo::after {
  position: absolute;
  content: "";
  background: var(--red);
  height: 2px;
  width: 197px;
  bottom: -10px;
  left: 50%;
  transform: translate(-50%, -50%);
} */
.brand2MainSection{
  width: 100%;
  float: left;
  margin-top: 20px;
}
.brand2Row {
  display: flex
;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 100px;
}
.brand2img{
  width: 25%;
  float: left;
  text-align: center;
}
.brand2Cotent{
  width: 65%;
  float: left;
}
.brand2Heading{
  font-family: var(--regular);
  font-size: var(--font24);
}
.whyCambroOuterSection.heatPump {
  margin-top: 0px;
}
.twoColumnsMainBox.hydronicHeatPump {
  margin-top: 100px;
  margin-bottom: 100px;
}
.heatPumpProductOuter {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  margin-top: 15px;
}
.heatPumpProductRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  width: 100%;
  float: left;
}
.heatPumpProductRow.five {
  margin-top: 15px;
  grid-template-columns: repeat(5, 1fr);
  gap: 35px;
}
.heatPumpBox{position: relative;}

.products_tags{position: absolute; right: 0; font-size: 16px; text-transform: uppercase; color: #fff; font-family:var(--bold); background: #FF011B; line-height: 20px; padding:10px 19px; }

.heatPumpProductInner {
  width: 90%;
  margin: 0 auto;
}
.heatPumpModalNo {
  text-transform: uppercase;
  letter-spacing: .5px;
  font-family: var(--medium);
  font-size: var(--font16);
}

 .feturesRow.three{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-bottom: 70px;
  margin-top: 60px;
} 

.feturesRow.three.center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  grid-row-gap: 75px;
  margin-bottom: 70px;
  margin-top: 60px;
}
.feturesRow.center .feturesBox {
  width: 30%;
}
.hydronicHeatPump .feturesBox p {
  padding: 0%;
}
/* .hydronicHeatPump .fetureHeading {
  padding: 0%;
  border-bottom: 0px;
} */
.discountServiceOuter {
  width: 100%;
  float: left;
  padding: 60px 0px;
  margin-top: 40px;
}
.discountHeading {
  font-family: var(--bold);
  font-size: 54px;
  text-transform: uppercase;
  text-align: center;
}
.discountDuration {
  text-align: center;
}
.discountServiceInner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  width: 100%;
  float: left;
  margin-top: 40px;
}
.discountBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: var(--white);
  padding: 20px 20px 20px 0px;
  border-top: solid 8px var(--red);
}
.discountIcon {
  width: 20%;
  float: left;
  text-align: center;
}

.discountText {
  width: 80%;
  float: left;
}
.discountSubHeading {
  font-family: var(--regular);
  font-size: var(--font24);
  line-height: 32px;
}
.discountPrice {
  font-family: var(--semiBold);
  font-size: var(--font32);
}
.discountPrice span{
  font-family: var(--regular);
  font-size: var(--font24);
  color: var(--red);
}
.gst {
  margin-top: 5px;
}
.discountCondation {
  margin-top: 40px;
  width: 100%;
  float: left;
}
.discountCondation p{
  font-family: var(--regular);
  font-size: var(--font16);
  line-height: 22px;
}
.homeServiceOuter {
  width: 100%;
  float: left;
  margin-top: 80px;
}
.homeServiceHeading {
  text-align: center;
  font-family: var(--regular);
  font-size: var(--font24);
  margin-bottom: 25px;
}
.homeServiceInner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  width: 100%;
  float: left;
  padding: 0 24%;
}
.homeServiceBottomText {
  width: 100%;
  float: left;
  padding: 0 8.5%;
}
.homeServiceBox ul.redBulletList li {
  padding-left: 28px;
}
.directorInner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  width: 100%;
  float: left;
  margin-top: 40px;
}
.discountBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%; 
  box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}
.directorImg {
  width: 25%;
  float: left;
  text-align: center;
  padding-right: 40px;
}
.directorText {
  width: 75%;
  float: left;
}
.directorName {
  font-family: var(--regular);
  font-size: var(--font32);
  line-height: 32px;
  margin-bottom: 10px;
}
.directorDeg {
  font-family: var(--regular);
  font-size: var(--font24);
  line-height: 32px;
}
.directorOuter {
  width: 100%;
  float: left;
  margin: 100px 0;
}
.addressOuter{
  width: 100%;
  float: left;
}
.addressRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  margin: 35px 0 170px 0px;
}
.addressCol {
  text-align: center;
  padding: 30px 32% 30px 0;
}
.addressCol.rightBorder {
  border-right: solid 1px #EDEDED;
  padding: 30px 0 30px 24%;
}
.contact a {
  text-decoration: none;
  pointer-events: none;
}
.addressHeading {
  font-size: var(--font24);
  font-family: var(--regular);
}
.map {
  font-family: var(--regular);
  font-size: var(--font16);
  text-decoration: underline;
  color: var(--red);
}
.map:hover {
  color: var(--red);
  text-decoration: none;
}
.subpageCategory.blog{
  margin-top: 55px;
  margin-bottom: 60px;
  width: 100%;
  float: left;
}

.blogOuter{
  width: 100%;
  float: left;
}
.blogInner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px;
  width: 100%; 
}
.blogBox {
  background: var(--lightGray);
  padding: 20px;
  border: solid 1px transparent;
  transition: all 0.35s;
} 
.blogBox:hover {
  border: solid 1px #6E6E6E;
  box-shadow: 0px 15px 15px rgb(0 0 0 / 16%);
  transition: all 0.35s;
}
.bgImg{
  color: var(--white);
}
.bgImg .readMore{
  color: var(--white);
  border-bottom:solid 1px var(--white);
}
 /* .readMore:hover{
  border-bottom:solid 1px var(--red);
  transition: all 0.35s;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
}
 */
.blogBoxTopHeading{
  font-family: var(--semiBold);
  font-size: var(--font16);
  margin-bottom: 20px;
}
.blogHeading{
  font-family: var(--regular);
  font-size: var(--font24);
  line-height: 32px;
}
.blogHeading a {
  color: var(--black);
}
.blogHeading a:hover {
  color: var(--black);
}
.blogBox.bgImg .blogHeading a {
  color: var(--white);
}
.blogBox.bgImg .blogHeading a:hover {
  color: var(--white);
}

.readMore{
  font-family: var(--medium);
  font-size: var(--font14);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom:solid 1px #000;
  padding-bottom: 4px;
  margin-top: 40px;
  float: left;
}
.paginationOuter{
  width: 100%;
  float: left;
  margin-top: 100px;
  margin-bottom: 100px;
}
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
}
.pagination a {
  color: var(--black);
  float: left;
  padding: 9px 15px;
  text-decoration: none;
  border: solid 1px var(--black);
  margin: 6px;
  transition: all 0.35s;
}
ul.pagination .page-item a {
  color: var(--black);
  float: left;
  padding: 9px 15px;
  text-decoration: none;
  border: solid 1px var(--black);
  margin: 6px;
  transition: all 0.35s;
  cursor: pointer;
}
ul.pagination .page-item a:hover {
  color: var(--white);
  background: var(--black);
  transition: all 0.35s;
}


.pagination .active .page-link {
  color: var(--black);
  float: left;
  padding: 9px 15px;
  text-decoration: none;
  border: solid 1px var(--black);
  margin: 6px;
  transition: all 0.35s;
  cursor: pointer;
  color: var(--white);
  background: var(--black);
  transition: all 0.35s;
}
.pagination .active .page-link:hover {
  color: var(--white);
  background: var(--black);
  transition: all 0.35s;
}
ul.pagination .page-item span {
  color: var(--black);
  float: left;
  padding: 9px 15px;
  text-decoration: none;
  border: solid 1px var(--black);
  margin: 6px;
  transition: all 0.35s;
  cursor: pointer;
}
ul.pagination .page-item span:hover {
  color: var(--white);
  background: var(--black);
  transition: all 0.35s;
}

.pagination a.active {
  color: var(--white);
  background: var(--black);
  transition: all 0.35s;
}
.blogDetailOuter{
  width: 100%;
  float: left;
  margin-bottom: 100px;
}
.blogPageHeading .innerHeading {
  color: var(--black);
  font-family: var(--semiBold);
  font-size: var(--font52);
  margin-top: 20px;
}
.blogPageHeading  .breadcrumbs{
  color: var(--black);
}
.blogPageHeading  .breadcrumbs a {
  color: var(--black);
}
.blogDetailsRow{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%; 
  gap: 56px;
  margin-top: 50px;
}
.blogSubHeading {
  font-family: var(--regular);
  font-size: var(--font32);
  margin-top: 60px;
  margin-bottom: 10px;
}
.backBtn {
  font-family: var(--regular);
  font-size: var(--font16);
  margin-top: 40px;
  float: left;
}
.backBtn span {
  margin-top: -1px;
  float: right;
  margin-left: 15px;
  transition: all 0.35s;
}
.backBtn span:hover {
  color: red;
  transition: all 0.35s;
}
.mobCall {
  display: none;
}
ul.mobExtraMenu {
  display: none;
}

::placeholder {
  color: var(--darkGray);
}
::-ms-input-placeholder { /* Edge 12-18 */
  color: var(--darkGray);
}
.colcontain .custcolrow .col6 {
  padding: 0 20px;
}
.enquirnowsec {
  padding: 40px 0px 55px;
}
.serviceBox .findoutBtn {
  background: transparent;
  margin-top: 10px;
}
.serviceBox .findoutBtn:hover {
  background: var(--red);
}
.files_details {
  display: flex;
  margin: 20px 0 0;
  justify-content: center;
}
.file_list {
  display: inline-block;
  background: #eee;
  padding: 10px 50px 10px 20px;
  position: relative;
  font-size: 15px;
  font-weight: normal;
  color: #333;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.uploadRow {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.queue {
  padding: 5px 15px;
  font-size: 14px;
}

.getQuote {
  width: 143px;
  height: 143px;
  background: red;
  color: white;
  font-family: var(--semiBold);
  font-size: 24px;
  position: fixed;
  right: 0;
  top: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
  text-align: center;
  transition: all 0.35s;
}
.getQuote:hover {
  background: #000;
  color: red;
  transition: all 0.35s;
}
.centerContent.pageHeight {
  margin-top: 45px;
  margin-bottom: 200px;
}
.homeLink {
  color: red;
  text-decoration: underline;
}
.homeLink:hover {
  color: red;
  text-decoration: none;
}

.testimoniwrapper.products {  margin-top: 80px;  float: left;  width: 100%;}
.testimoniwrapper{float: left; width: 100%; margin: 0; padding: 0;   margin-top: 80px;}
.testimonimain{float: left; display: flex; justify-content: center; width: 100%; margin: 0; padding: 25px 0 70px; margin-top: 80px; }
.testimonimain .testimonibox{max-width:85%;}
.testimonidetails{float: left; width: 100%; position: relative;}
.testimonidetails .testimonitexts .testimoniwrites{position: relative;}
.testimonitexts .testimoniwrites{font-size: 24px; color: var(--grayborder); line-height: 1.58; font-weight: 300;}
.testimonitexts .testimoniwrites::before{content: ''; position: absolute; content: ''; left: 0; right: 0; top:-50px; height: 50px; margin: 0 auto; width: 100px; background:url('../images/fiveStar.svg') no-repeat; background-size: 100px;}
.testimonitexts .testimonidtls{padding-left: 30px;  font-size: 16px; line-height: 24px; text-align: center;}
.testimoniwrites p {  font-size: var(--font24); font-family: var(--regular); line-height: 38px; text-align: center;}
.testimoniwrapper .owl-carousel .owl-dots{display: none;}
.testimoniwrapper .owl-carousel .owl-nav{position: absolute; bottom: -17px; right: 0; background: #fff; padding-left: 30px;}
.testimoniwrapper .owl-carousel .owl-nav button{display: inline-block; border:2px solid #E0E4E0 !important; height: 34px; width: 34px; border-radius: 50%;}
.testimoniwrapper .owl-carousel .owl-nav button.owl-prev{background:url('../images/slidearrowleft.png') no-repeat; background-size: 15px; margin:0; margin-right: 20px;  background-position: center;}
.testimoniwrapper .owl-carousel .owl-nav button.owl-next{background:url('../images/slidearrowright.png') no-repeat; background-size: 15px; background-position: center; margin:0;}


/*faq*/
.faqcontainermain{float: left; width: 100%; background-color:rgb(237 237 237 / 50%); padding: 50px 0 100px 0;}
.faqtextboxnew{float: left; width: 100%; background: var(--white); margin-top: -15px;}
.faqtextboxnew p{font-size: 16px; line-height:24px; color: #000; }
.faqSectionHeading {  font-family: var(--medium);  font-size: var(--font38);  text-align: center;  margin-top: 50px;  margin-bottom: 35px;   font-weight: normal;}
.faqTextheading {  font-family: 'Mulish-Bold';  font-size: var(--font16);  margin-bottom: 10px;}
.faqAddSec {  width: 100%;  float: left;  margin-bottom: 20px;}
.fitoutsfaqbox{width:100%; float:left;}
.fitoutsfaqbox h2{width:100%; float:left; font-size:36px; color:#000;  margin:0 0 15px 0; padding:0;}
.faqtextboxnew p {  padding: 0 22px;}
.page-faq{float:left; width:100%; }
.page-faq .faqbottom {background-color: var(--white); color: #383838;  float:left; width:100%; margin-bottom:21px; position: relative; box-shadow: 0 3px 6px rgb(0 0 0 / 16%);}
.page-faq .faqbottom ::before{content: '';  position: absolute;  left: 0; top:0; width: 7px;  height: 100%;  background-color: var(--red);  z-index: 1;}
.page-faq .faqheading {background: url(../images/downArrow.png) no-repeat right 20px top 25px; background-size:24px;   cursor: pointer; font-size:var(--font16);  float:left; width:100%; font-family: var(--semiBold); padding: 22px 15px 22px 22px;}
.page-faq .faqopen {  background: url(../images/upArrow.png) no-repeat right 20px top 24px;  background-size:24px;  float:left;  width:100%;}
.page-faq .faqtext {float:left; width:100%; display:none; background: #F4F4F4;  }
.expandall{width: auto; float:right; text-align: right; margin-bottom:15px; font-size:16px; color:#383838; margin-top:0px; cursor: pointer;  font-family: 'Figtree-Regular';  }
.expandall bdo {  text-decoration: underline;font-family: 'Figtree-Regular'; font-size: 16px;}
.faqheading span{display:none;}
.faqheading.faqopen span{display:inline-block;}

/*faq*/


/* history css start */
.historyOuter {  width: 100%;  float: left;  margin-top: 40px;}
.historyInner {  width: 1200px;  margin: 0 auto;  clear: both;  padding: 50px;}
.historyInner .comonHeading {  text-align: center;    margin-bottom: 40px;}
.hexa{  width: 20px;  height: 20px;  background: red;}
.timeline {  position: relative;  padding: 0;  width: 100%;  margin-top: 20px;  list-style-type: none;}
.timeline:before {  position: absolute;  left: 50%;  top: 0;  content: ' ';  display: block;  width: 2px;  height: 87%;  margin-left: -1px;  background: rgb(213,213,213);
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 8%, rgb(0, 0, 0) 92%, rgba(213,213,213,0) 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0, 0, 0)), color-stop(100%,rgb(0, 0, 0))); z-index: 5;}

.timeline li {  padding: 2em 0; position: relative;}
.aboutImg1 {
  position: absolute;
  right: 13%;  
  top: 12%;
}
.aboutImg1 span {
  width: 100%;
  display: block;
  font-size: 14px;
  font-family: 'Figtree-Regular';
}
.aboutImg1 img {
  max-width: 280px;
}
.imgMargin1 {
  margin-bottom: 125px;
}

li.secondTimeline {
  padding-bottom: 0;
}
.secondTimeline .time {
  margin-top: 10px;
}
.aboutImg2 {
  margin-top: 7px;
  margin-left: 12px;
}
.aboutImg2 img {
  max-width: 400px;
}
.aboutImg2 span {
  width: 100%;
  display: block;
  font-size: 14px;
  font-family: 'Figtree-Regular';
}




.timeline .hexa {   width: 32px;    height: 32px;    position: absolute;    border-radius: 50%;    background: #f80b0b;    z-index: 5;    left: 0;    right: 0;    margin-left: auto;
    margin-right: auto;    top: -30px;    margin-top: 0;}
.direction-l,.direction-r {  float: none;  width: 100%;  text-align: center;}
.time-wrapper {  display: block;  position: relative;  margin: 4px 0 0 0;  z-index: 14;  line-height: 1em;  vertical-align: middle;  color: #fff;}
.direction-l .time-wrapper {  float: none;}
.direction-r .time-wrapper {  float: none;}
.time {  color: #000;  display: inline-block;  padding: 8px; font-size: 32px; font-family: 'Figtree-Regular';}
.desc {  position: relative;  margin: 15px 0 0 0;  padding: 15px;   z-index: 15;}
.direction-l .desc, .direction-r .desc {    position: relative;    margin: 15px 0 0 0;    padding: 15px;    z-index: 15;    text-align: left;    margin-right: 30px;}

ul.subLinks {
    list-style: none;
    padding-left: 15px;
}
.formerrors {
  color: var(--red);
}
.field_error {
  color: var(--red);
}
.qtfrmmain .form-field.field_error {
  border-bottom: solid 1px var(--red);

}
.fileinfo {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.fileinfo p {
  background: #fbfbfb;
  color: #000000;
  margin: 2px;
  padding: 5px 10px;
  border: solid 1px #959191;
}
span.attach_close {
  cursor: pointer;
  padding: 0 2px 0 7px;
}

 button.btn.btn-primary {  
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 19px;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--darkGray) !important;
  cursor: pointer;
  padding: 14px 40px !important;
  font-weight: 400;
  transition: all 0.3s;
  min-width: 240px !important;
  text-align: center;
  background: none;
}
.sitemapmain {
  width: 100%;
  float: left;
  padding: 70px 0px;
}
ul.Explore {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0px;
  gap: 3%;
}
ul.Explore > li {
  width: 18%;
  margin-left: -10px;
  font-size: 20px;
  font-family: 'Figtree-SemiBold';
}
ul.Explore li ul {
  margin: 0;
  padding: 0px;
  list-style: none;
  padding-right: 15px;
  margin-top: 20px;
}
ul.Explore li ul li{
  width: 100%;
  line-height: 27px;
  margin-left: 7px;
  padding: 10px 0px;
  border-bottom: solid 1px #ccc;
  font-size: 16px;
  font-family: 'Figtree-Regular';
}
ul.subchild li:last-child {
  border-bottom: none;
  margin-bottom: -8px;
}
ul.Explore li ul.subchild{
  margin-top: 0px;
}
li.mainheading {
  position: relative;
}
li.mainheading:after {
  position: absolute;
  content: "";
  top: 30px;
  left: 0;
  background: #000;
  height: 1px;
  width: 100%;
}
.container .container {
  padding-left: 0;
  padding-right: 0;
}
.footerHeading.mobHide {
  padding-bottom: 26px;
}
.innerPageBanner.getaquote {
  max-height: 130px;
}
.onlyPara {
  margin-top: 40px;
}
.faqtextboxnew .grayBulletList {
  margin-left: 14px;
}
.twoColumnsMainBox.hydro {
  margin-top: 10px;
}
.modalNo {
  cursor: default;
}
.pagination {
  padding-left: 0;
}
.logo img {
  max-width: 208px;
}
.feturesInnerSection {
  padding: 80px 0px;
}


/* home banner animation css start */

.homeBanner {
  display: block;       
  min-height: auto;
  font-family: "Open Sans", sans-serif;
 }

  .homeBanner .footer {
      z-index: 1;
      --footer-background: #ffffff;
      display: block;
      position: relative;
      bottom: 0px;
      left: 0;
      width: 96%;
  }
  .homeBanner svg {    
    width: 100%;
    position: absolute;        
  }
  .homeBanner .footer .bubbles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1rem;
    background: var(--footer-background);
    filter: url("#blob");
  }
  .homeBanner .footer .bubbles .bubble {
    position: absolute;
    left: var(--position, 50%);
    background: var(--footer-background);
    border-radius: 100%;
    -webkit-animation: bubble-size var(--time, 12s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 12s) ease-in infinite var(--delay, 0s);
            animation: bubble-size var(--time, 12s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 12s) ease-in infinite var(--delay, 0s);
    transform: translate(-50%, 100%);
  }
  .homeBanner .footer .content {
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 4rem;
    padding: 2rem;
    background: var(--footer-background);
  }
  .homeBanner .footer .content a, body .footer .content p {
    color: #FFFFFF;
    text-decoration: none;
  }
  .homeBanner .footer .content b {
    color: Black;
  }
  .homeBanner .footer .content p {
    margin: 0;
    font-size: 0.75rem;
  }
  .homeBanner .footer .content > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .homeBanner .footer .content > div > div {
    margin: 0.25rem 0;
  }
  .homeBanner .footer .content > div > div > * {
    margin-right: 0.5rem;
  }
  .homeBanner .footer .content > div .image {
    align-self: center;
    width: 4rem;
    height: 4rem;
    margin: 0.25rem 0;
    background-size: cover;
    background-position: center;
  }
  
  @-webkit-keyframes bubble-size {
    0%, 45% {
      width: var(--size, 2rem);
      height: var(--size, 2rem);
    }
    100% {
      width: 0rem;
      height: 0rem;
    }
  }
  
  @keyframes bubble-size {
    0%, 45% {
      width: var(--size, 2rem);
      height: var(--size, 2rem);
    }
    100% {
      width: 0rem;
      height: 0rem;
    }
  }
  @-webkit-keyframes bubble-move {
    0% {
      bottom: -2rem;
    }
    100% {
      bottom: var(--distance, 3rem);
    }
  }
  @keyframes bubble-move {
    0% {
      bottom: -2rem;
    }
    100% {
      bottom: var(--distance, 3rem);
    }
  }



 
/* home banner animation css end */


.fixtoptextcolor {
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  height: 50px;
}
.fixtoptextcolor a {
  color: #fff;
  text-decoration: underline;
 font-family: 'Figtree-Medium';
}
.fixtoptextcolor a:hover {
  color: #fff;
  text-decoration: underline;
 font-family: 'Figtree-Medium';
}
.fixclosed::before {
    content: '';
    display: block;
    position: relative;
    width: 20px;
    height: 1px;
    background-color: var(--white);
    transform: rotate(45deg);
    top: 9px;
}
.fixclosed::after {
    content: '';
    display: block;
    position: relative;
    width: 20px;
    height: 1px;
    background-color: var(--white);
    transform: rotate(-45deg);
    top: 8px;
}
.fixclosed {
  position: absolute;
  right: 17px;
  top: 32%;
  cursor: pointer;
  z-index: 99;
  font-size: 0;
}
.fixtoptextcolor p {
  margin-top: 10px;
}
.black .breadcrumbs {
  color: #000;
}
.black .breadcrumbs a {
  color: #000;
}
.black .breadcrumbs span {
  color: #000;
}
textarea.form-field {
    margin-top: 12px;
}

@media(min-width: 768px){
  
  .timeline {    width: 660px;    margin: 0 auto;    margin-top: 20px;  }
  .timeline li:after {    content: "";    display: block;    height: 0;    clear: both;    visibility: hidden;  }  
  .timeline .hexa {    left: -36px;    right: auto;    top: 8px;  }
  .timeline .direction-l .hexa {    left: auto;    right: -36px;  }
  .direction-l {    position: relative;    width: 310px;    float: left;    text-align: right;  }
  .direction-r {    position: relative;    width: 310px;    float: right;    text-align: left;  } 
  .time-wrapper {    display: inline;    vertical-align: middle;    margin: 0;  }
  .direction-l .time-wrapper {    float: left;  }
  .direction-r .time-wrapper {    float: left;    margin-left: 15px;  }
  .time {  padding: 5px 10px; font-family: var(--regular); font-size: var(--font32); }
  .direction-r .desc {    margin: 25px 0 0 10px;  }
}
@media(min-width: 992px){
  .timeline {    width: 992px;    margin: 0 auto;    margin-top: 20px;  }
  .direction-l {    position: relative;    width: 435px;    float: left;    text-align: right;  }
  .direction-r {    position: relative;    width: 435px;    float: right;    text-align: left;  }
  .timeline .hexa {    left: -77px;    right: auto;    top: 8px;  }
  .timeline .direction-l .hexa {    left: auto;    right: -77px;  }
}

@media(max-width: 1200px){
  .historyInner {    width: 1091px;  }

}
@media(max-width: 991px){
  .historyInner {  width: 100%;  padding-left: 20px;}
  
}
@media(max-width: 767px){
.timeline:before {     left: 6%;  height: 91%; }
.direction-l .time-wrapper {    float: left;    margin-left: 50px;    width: 100%;    text-align: left;}
.direction-r .time-wrapper {    float: left;    margin-left: 50px;    width: 100%;    text-align: left;}
.direction-l .desc, .direction-r .desc {    text-align: left;    margin-right: 0px;    margin-left: 50px;}
.timeline .hexa {      top: unset;      left: -90%;}
.time {  font-size: 24px; font-family: 'Figtree-Regular'; margin-bottom: 15px; margin-left: 5px;}
.timeline li {  padding-bottom: 0px;}
li.firstTimeline {  padding-top: 0;}
.secondTimeline .time {  margin-top: 0px;}
.timeline .hexa { right: -6px;}
.fixtoptextcolor {
    height: 73px;
    padding: 0 43px;
}
.fixclosed {
    top: 38%;
    font-size: 0;
}

}
/* history css end */






@media only screen and (max-width: 1500px) {  
  .casectain {    grid-template-columns: 60% 40%;}  
  .homeServiceInner {    padding: 0 20%;  }
  .footerSection {    background-size: 65%;  }
  .productBox.blackBg {    height: auto;}
  .warrantyText {    width: 100%;    float: left;    font-size: 32px;    line-height: 60px;    text-align: center;    margin-top: 30px;    margin-left: 0;}
  .productBox.blackBg p {  font-size: var(--font16);  line-height: 26px;}
  .warrantyText br {  display: none;}
  .warrantyBox {  width: 100%;  float: left;  margin-left: 0;}
  .warrantyImg {    width: 100%;    text-align: center;    height: auto; margin-bottom: 15px;}
  .warrantyTextBox {    text-align: center;}
  .footerHeading {  font-size: var(--font24);}
  .footerHeading a.Nv_lnk{  font-size: var(--font24);}
  .serviceImg {  width: 16%;}
  .warrantyRow {    display: flex;    width: 100%;    justify-content: center;  }
.warrantyRow .findoutBtn { margin-left: 0; margin-left: calc(50% - 102px);}

}
@media screen and (max-width: 1300px) and (min-width: 992px) {
  .radiators .serviceBox {
    padding-bottom: 60px;
    display: flex;
}
.underfloor .serviceBox {
  padding-bottom: 60px;
  display: flex;
}

}
@media only screen and (max-width: 1300px) { 
  .footerHeading {    font-size: var(--font18);  }
  .footerHeading a.Nv_lnk{    font-size: var(--font18);  }
  .serviceImg {    width: 22%;}
  .blogInner {
    grid-template-columns: repeat(3, 1fr);
}
.heatPumpProductRow.five {  grid-template-columns: repeat(3, 1fr);  gap: 35px;
 }
 .homeBanner .footer {
  width: 95%;
}
}

@media (max-width: 1600px) and (min-width: 1280px) {
  .container {
    padding-left: 80px;
    padding-right: 80px;
  }
  .footerRightBoxInner:nth-child(1) {
    width: calc(27% - 27px);
  
  }
  .footerRightBoxInner:nth-child(2) {
    width: calc(22% - 30px);
  
  }
  .footerRightWrapper {
    margin-left: 2%;
}
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .container {
    padding-left: 60px;
    padding-right: 60px;
  }
  .footerRightWrapper {
    margin-left: 2%;
}
.footerRightBoxInner:nth-child(1) {
  width: calc(26% - 26px);

}
.footerRightBoxInner:nth-child(2) {
  width: calc(22% - 29px);

}


}

@media only screen and (max-width: 1200px) {  
  .Nv_lnk {   font-size: 20px  }
  .bannerHeading {  font-size: 65px;  }
  .casectamain {     padding: 0px 5%;}
  .casectain {    grid-template-columns: 60% 40%;}  
  .homeServiceInner {    padding: 0 15%;  }
  .discountIcon {    width: 25%;}
  .discountText {  width: 75%; }
  .phoneNo {    padding: 18px 22px;    width: 230px;    height: auto;}
  .footerRighttBox {    width: 74%;}
  .footerLeftBox {    margin-right: 5px;}
  .serviceImg {    width: 24%;}
  ul.Explore > li {    width: 31%; margin-right: 1%;}
}

@media only screen and (max-width: 1100px) {
  ul.categoryList {    padding-left: 0;  }
  ul.categoryList li {    float: none;    width: 100%;    max-width: 600px;  }
  ul.categoryList li a {    border-right: solid 1px #000;    display: flex;   width: 100%;   border-bottom: none; justify-content: center; }
  ul.categoryList li:last-child a {   border-right: solid 1px #000;    display: flex;    width: 100%;    border-bottom: solid 1px #000;  }
  .homeServiceInner {    padding: 0 10%;  }
  .footerRightBoxInner {    margin-right: 22px;}
  .footerRighttBox {    padding-right: 15px;  }
  
}

@media only screen and (max-width: 1400px) and (min-width: 992px)  {

  .footerRightBoxInner {
    margin-right: 15px;
}
.instaImg.fb img {
  width: 42px;
}
.instaImg.insta {
  right: 65px;
}
.instaImg.insta img {
  width: 45px;
}
.footerRightBoxInner {
  width: calc(25% - 30px);
  margin-right: 30px;
}


}

@media (max-width: 1023px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .footerRightBoxInner:nth-child(1) {
    width: calc(26% - 30px);
  
  }
  .footerRightBoxInner:nth-child(2) {
    width: calc(22% - 30px);
  
  }
}

@media only screen and (max-width: 991px) {
  .footerRightBoxInner:nth-child(1) {
    width: 100%;  
  }
  .footerRightBoxInner:nth-child(2) {
    width: 100%;  
  }
.desk{  display: none;}
.mob{  display: block;}
.bannerHeading {  font-size: 52px;  text-align: left;}
.introHeading {  font-size: 32px;}
.homeBannerContent {  bottom: 140px;}
.bannerTopText {  font-size: 25px;}
 p {  font-size: var(--font16); line-height: 26px;}
.threeColumns {  grid-template-columns: repeat(1, 1fr);}
.productHeading {  font-size: var(--font24);}
.comonHeading {  font-size: var(--font28); font-family: var(--semiBold); line-height: 36px;}
.fetureHeading {  font-size: var(--font16);}
.whyFeturesRow {  flex-wrap: wrap; padding-top: 120px;}
.feturesBox {
  width: 44%;
}

.whyCambroInnerSection {  padding: 80px 0;}
.about .whyCambroInnerSection {  border-bottom: solid 1px #595353;}
.fetureIcon img {  width: 85px;}
.faqSectionHeading {  font-family: var(--semiBold);  font-size: var(--font28); }
.faqtextboxnew p {  font-size: var(--font14);  line-height: 22px;  color: var(--black);}
.footerHeading {  font-size: var(--font24);  padding-bottom: 0px;  border-bottom: solid 0px #6E6E6E;}
.footerHeading a.Nv_lnk{  font-size: var(--font24);  padding-bottom: 0px;  border-bottom: solid 0px #6E6E6E; margin-top: 15px;}
ul.footerList li {  line-height: 40px;}
.innerHeading {  font-size: var(--font32);  margin: 0px;}
.footerBox {  display: flex;  flex-wrap: wrap;}
.footerLeftBox {  width: 100%;  text-align: center;  order: 1;   margin-top: 40px;}
.address {   margin: 20px 0px 40px;}
.rightBorder .address {   margin: 20px 0px 20px;}
.footerRighttBox {  width: 100%;  order: -1;}
.phoneNo {  float: none;  display: inline-block;}
.footerRightBoxInner {  width: 100%;}
.list1, .list2, .list3{  display: none;}
.list4{  font-size: var(--font24);}
.mobHide{  display: none;}
ul.footerList.list4 {  margin-top: -2px;}
.footerLeftBox p {  font-size: var(--font16);}
.footerlogo {  width: 151px;  margin: 0 auto; margin-bottom: 30px;}
.feturesRow {  grid-template-columns: repeat(1, 1fr);}
.twoColumns {  grid-template-columns: repeat(1, 1fr);}
.twoColumns .productHeading {  text-align: center;}
.twoColumnsMainBox.heatingWork {    margin-top: 20px;}
.twoColumnsMainBox.heatingWork .twoColumns .productHeading {  text-align: center;  margin-top: 10px;}
.productBox.orderM {  order: -1;  padding-bottom: 0px;  margin-top: 20px;}
.twoColumnsMainBox.heatingWork .productBox {  padding-bottom: 0;}
.innerPageBanner img {  height: 142px;}
.director .twoColumns {  gap: 15px;}

.innerPageHeading {    background-size: cover;  width: 100%;  background-position: center;  min-height: 139px;  text-align: center;  float: left;  background-size: 1086px 142px;}
.enquirnowsec .colcontain {  padding: 0 0px;}
.colcontain .custcolrow .col6 {  width: 100%;}
.fileType {  width: 100%; padding: 0 5%;}
.galleryRow {  grid-template-columns: repeat(1, 1fr);  gap: 35px;}
.galleryRow.four {  grid-template-columns: repeat(1, 1fr);  gap: 35px;}
.casectain {  grid-template-columns: repeat(1, 1fr); }
.casectamain {  padding: 0%;  max-width: 100%;  margin: 0 auto;  width: 100%;  float: left; margin-top: 15px;}
.ctaContent {  justify-content: center;}
.ctaText {  text-align: center;}
.price {  width: 100%;  float: none;  text-align: center;  margin-top: 15px; font-size: var(--font28);  font-family: var(--semiBold);}
.ctaBtn {    margin-bottom: 0px;  margin-top: 20px;}
.ctaText {  margin-top: 5px; font-size: var(--font16); line-height: 25px;}
.ctaHeading {  font-size: var(--font24);  font-family: var(--semiBold); width: 100%;  text-align: center;}
.twoColumnsMainBox.hotWater {  margin-top: 50px;  margin-bottom: 0px;}
.twoColumnsMainBox.hotWater .productBox {  position: relative;  padding-bottom: 0px; }
.twoColumnsMainBox.hotWater  .productHeading{  font-size: var(--font24);  font-family: var(--regular);  line-height: 29px; text-align: center;}
.boxColumn {  width: 100%; margin-bottom: 20px;}
.redBulletList b {  margin-left: 5px;}
.rebateRow {  margin-top: 20px;}
.rebateCol {  width: 100%;  margin-top: 25px; margin-left: 0;}
ul.redBulletList {  margin-left: 1px;  padding-left: 0px;  margin: 0;}
.rebateBottomContent {  margin-top: 25px;}
.rebateSectionOuter {  padding: 50px 0px;}
.rebateTextRed {  font-family: var(--regular);  font-size: var(--font18); line-height: 28px;}
.rebateText {  font-family: var(--regular);  font-size: var(--font14);  line-height: 22px;}
.rebateColHead {font-family: var(--regular);  font-size: var(--font14); }
.rebateColText { font-family: var(--regular);  font-size: var(--font14);  line-height: 22px; margin-left: -16px;}
ul.grayBulletList li {font-family: var(--regular);  font-size: var(--font14);  line-height: 22px;}
.counter {  padding: 0; width: auto; height: auto; border: none; border-radius: 0; display: flex; justify-content: center; align-items: center; color: var(--red); font-size: var(--font16);  font-family: var(--regular);}
.rebateColHead {  margin-top: 0px;}
.rebateColContent {  margin-left: 5px;}
.boxColumnImgBox .imgResponsive {  display: none;}
.boxColumnImgBox {  position: relative;  text-align: center;}
.iconOfBrand {  position: static;}
.boxColumnTextBox h4 {  text-align: center;}
.boxColumnTextBox h3 {  text-align: center;}
.brandListHeading {  text-align: center;}
.brandMainBox {  margin-top: 40px;}
.brandMainBox .comonHeading {  display: none;}
.boxColumnTextBox {  padding-top: 0px;}
.boxColumnImgBox img {   margin-bottom: 15px;}
.outline-btns {  margin-top: 20px;}
.mainBoxRow { margin-bottom: 30px;}
.mr-t {  margin-top: 35px;}
.faqcontainermain {  padding: 10px 0 50px 0;}
.productCol{width: 100%; }
.productRow{margin: 0;}
.rebateRow{margin: 0;}
.productCol .findoutBtn {  bottom: -20px; max-width: 228px;  margin-left: calc(50% - 112px);}
.testimoniwrites p {  font-size: var(--font18); line-height: 22px;}
.testimonimain {  padding: 50px 0 10px;  margin-top: 30px;  margin-bottom: 40px;}
.fourRow{  grid-template-columns: repeat(1, 1fr);}
.brand2img {  width: 100%;}
.brand2Cotent {  width: 100%; }
.brand2Heading {  text-align: center;}
.brand2img img {  margin-bottom: 15px; width: auto;}
.iconOfBrand {  max-width: 100%;}
.heatPumpProductRow {  grid-template-columns: repeat(1, 1fr);}
.heatPumpProductRow.five {  grid-template-columns: repeat(1, 1fr);  gap: 35px;
}
.feturesRow.three { grid-template-columns: repeat(1, 1fr); margin-bottom: 50px;}
.homeServiceInner {    padding: 0%;  }
.homeServiceInner {    padding: 0%;}
.discountHeading {  font-family: var(--semiBold);  font-size: var(--font28);}
.discountServiceInner {  grid-template-columns: repeat(1, 1fr);  margin-top: 40px;}
.discountBox {  padding: 20px 15px 20px 15px;}
.discountIcon {  width: 100%;}
.discountText {  width: 100%;}
.discountText p {  text-align: center;}
.discountSubHeading { text-align: center; font-family: var(--regular); font-size: var(--font18); line-height: 22px;margin-top: 15px;}
.discountPrice {  text-align: center;  margin-bottom: 20px;  margin-top: 16px;}
.discountCondation {  text-align: center;}
.homeServiceBottomText { padding: 0%;}
.directorInner {  grid-template-columns: repeat(1, 1fr);}
.directorImg {  text-align: center;  padding-right: 0;  width: 100%;}
.directorImg img{  max-width: 200px;}
.directorText {  width: 100%;}
.directorName {  text-align: center;  margin-top: 30px;  font-size: var(--font24);}
.directorDeg {  line-height: 32px;  text-align: center;  font-size: var(--font18);}
.directorText p {  text-align: center;}
.directorOuter {  margin: 10px 0;}
.contact a {  pointer-events: auto;}
.addressRow {  grid-template-columns: repeat(1, 1fr);  margin: 35px 0 70px 0px;}
.addressCol.rightBorder {  border-right: 0;}
.blogInner {  grid-template-columns: repeat(2, 1fr);}
.blogPageHeading .innerHeading {  font-size: var(--font32);}
.blogDetailsRow {  grid-template-columns: repeat(1, 1fr);}
.footerSection {  background-size: 0;}
.mobCall {  display: block;  margin-left: auto;  margin-right: 50px;}
.mobCall a {  color: var(--white);  border: solid 1px var(--white);  padding: 5px 7px;  font-family: var(--medium);  font-size: var(--font16);  letter-spacing: 2px;  text-transform: uppercase;}
.mobCall a:hover  {  color: var(--white);}
.mobCall a:visited {  color: var(--white);}
.logo img {  max-width: 150px;}


.findoutBtn {  float: none;  display: inline-block;  margin-bottom: 15px;  width: 100%;  text-align: center;   max-width: 322px; }
.findoutBtn:hover {  background: transparent;  border: solid 1px var(--black);  color: var(--black);}
  .bannerBtnRow .findoutBtn:hover {    background-color: var(--white);    color: var(--black);    border: solid 1px var(--white);  }
  .introHeading {    margin-top: 40px;}
.introText {  margin-bottom: 40px;}
.productTextBox .productHeading {  margin-top: 20px;}
.threeColumns {  gap: 22px;}
.whyBgImg > .imgResponsive {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: auto;  object-fit: cover;  object-position: center;  height: 310px;  overflow: hidden;}
.whyCambroOuterSection{  background-color: var(--darkGray);}
.getQuoteBtn {  width: 322px;  margin-left: calc(50% - 161px);  margin-right: 0;}
.productBox.blackBg {  padding-bottom: 80px;  display: none;}
.brandIcon {  width: 25%;  padding: 7px;}
.brandOuterSection {  padding: 50px 0;}
.brandBox{  padding: 0 0%;}
.feturesInnerSection .feturesBox {  display: grid;  grid-template-columns: 12% 88%;}

.feturesOuterSection.subpage .feturesInnerSection .feturesBox {  display: grid; 
   /* grid-template-columns: 15% 85%; */
  }
.feturesRow.center .feturesBox {
  display: grid;
  /* grid-template-columns: 12% 88%; */
  width: 100%;
}

.feturesInnerSection .fetureHeading {  font-size: var(--font18);  font-family: var(--regular);}
.feturesInnerSection .fetureHeading {  margin-top: 0;  padding-bottom: 0;  text-align: left;}
.feturesInnerSection .feturesBox p {  text-align: left;  padding-left: 20px;   margin-top: 4px; padding-right: 25px;}
.breadcrumbs {  display: none;}
.centerContent.mr-t {  margin-top: 15px; margin-bottom: 0px;}

.threeColumnsUnderfloor {  margin-top: 30px;}
.threeColumnsUnderfloor .threeColumns {  gap: 10px;}
.threeColumnsUnderfloor.subpage {  margin-top: 50px;}
.twoColumnsMainBox.underfloor {  margin-top: 0px;  margin-bottom: 0px;}
.twoColumns {  gap: 20px;}
.serviceBox .serviceImg img {  margin-bottom: 15px;}
.serviceTextBox .findoutBtn {  margin-top: 10px;}
.feturesOuterSection.subpage .feturesInnerSection .fetureHeading {  font-size: var(--font18);}
.feturesOuterSection.subpage .fetureIcon {    margin-right: 15px;  margin-top: 5px;}
.threeColumnsUnderfloor.radiators .threeColumns {  gap: 20px;}
.gallery {  margin-top: 35px;  margin-bottom: 60px;}
.galleryIntro {  margin-bottom: 35px;}
.twoColumnsMainBox.hotWater .productHeading br {  display: none;}
.page-faq .faqheading {  padding: 22px 44px 22px 22px;}
.productCol {  margin-bottom: 55px !important;}
.testimoniwrapper.products {  margin-top: 40px;  margin-bottom: 15px;}
.brand2Row {  margin-bottom: 50px;}
.serviceBox .findoutBtn {  margin-left: 0;}
.twoColumnsMainBox.director .productBox {  padding-bottom: 0;}
.blogPageHeading {  width: 100%;  float: left;  margin-top: 20px;}
.phoneNo {  padding: 21px 52px;  width: 322px;  height: 65px;  line-height: 24px;}
.phoneNo {  pointer-events: auto;}
.serviceImg {  width: 14%;}
 .whyCambroInnerSection .fetureHeading {  border-bottom: solid 0px #6E6E6E;  padding-bottom: 0px;}
.getQuote {  width: 73px;  height: 73px;  font-family: var(--bold);  font-size: 16px;}
ul.footerList li a {  font-size: 24px;}
ul.mobExtraMenu {  padding-left: 0;  display: block;}
ul.mobExtraMenu .Nv_lnk2 {  border-bottom: 0;}
.rebateCol {  padding: 0 0px;}
.childNavopen ul.mobExtraMenu {  display: none;}
.fileinfo p {  width: 100%;  text-align: left;}
.fileinfo {  margin: 0 auto;  margin-bottom: 30px;  max-width: 400px;}
span.attach_close {  cursor: pointer;  padding: 0 7px 0 7px;  float: right;}
.attachmentHeading {  padding: 0 15px;}
.productBox .productHeading {  text-align: left;}
.blogDetailsRow {  gap: 30px;  margin-top: -10px;}
.blogSubHeading {  font-size: 28px;}
.blogHeading {  font-size: 20px;  line-height: 25px;}
.serviceBox.lightGrayBg .findoutBtn:hover {  border: solid 1px var(--red);  color: var(--white);}
.serviceBox.blackBg .findoutBtn:hover {  border: solid 1px var(--red);  color: var(--white);}
.warrantyRow .findoutBtn {   max-width: 282px;  margin-left: 0;  margin-top: 15px;}
.warrantyHeading {  margin-bottom: 20px;}
.serviceTextBox {  width: 100%;}
.heatPumpImg img {  width: 100%;}
.feturesOuterSection.subpage .feturesInnerSection .fetureIcon img {  width: 71px;}
ul.Explore > li {  width: 48.5%;}
li.mainheading {  margin-top: 25px;}
ul.footerList.List1 {  display: none;}
ul.footerList.List2 {  display: none;}
ul.footerList.List3 {  display: none;}
ul.redBulletList li {
  font-size: 14px;
}
ul.productList li {
  font-size: var(--font14);
  line-height: 30px;
}
.redBulletList b {
  font-size: var(--font14);
}
.page-faq .faqheading {
  line-height: 26px;
}
.testimoniwrapper{ margin-top: 40px;}

.historyOuter .container {
  padding-left: 0;
  padding-right: 0;
}
.discountCondation p {
  font-size: var(--font14);
  line-height: 22px;
}
.productMainBox {
  margin-top: 0px;
}
.productCol { 
  margin: 0;
}
.footerSection {
  padding-top: 20px;
}
.instaImg {
  top: 17px;
}
.InnerBannerText {
  height: 100%;
  text-align: center;
  float: left;
  display: flex;
  align-items: center;
}
.mobCall a:hover {
  text-decoration: none;
}
.addressCol {
  text-align: center;
  padding: 0px 0px 30px;
}
.paging-content {
  margin-top: -50px;
}
.subPages .feturesInnerSection .feturesBox {
  width: 100%;
}

.addressCol {
  text-align: center;
  padding: 30px 0% 30px 0;
}
.addressCol.rightBorder {
  border-right: solid 1px #EDEDED;
  padding: 30px 0 30px 0%;
}
.aboutImg1 {
  right: 1%;
}
.aboutImg2 {
  margin-left: 15px;
}
.aboutImg2 img {
  max-width: 260px;
}
.aboutImg1 img {
  max-width: 260px;
}
.twoColumnsMainBox.hydronicHeatPump {
  margin-top: 100px;
  margin-bottom: 50px;
}
.feturesRow.three.center {
  grid-row-gap: 30px;
}
.boxColumnTextFull {
  margin-top: 15px;
}
.homeBanner .footer {
  width: 94%;
}
.hydronicTextCol .productBox {
  padding-bottom: 0px;
}
.hydronicTextCol .productBox:nth-child(2) {
  padding-bottom: 50px;
}
.twoColumnsMainBox {
  margin-top: 0;
}

}

@media only screen and (max-width: 800px) {
.whyFeturesRow {padding-top: 100px;}
.home .whyFeturesRow {padding-top: 120px;}
}


@media only screen and (max-width: 767px) {
.serviceImg {  float: left;  width: 100%;  height: auto;  text-align: center;}
.serviceHeading {  font-size: var(--font24);}
.serviceTextBox {  text-align: center;}
.homeBannerContent {  bottom: 50px; padding: 0 20px;} 
.serviceBox.blackBg {  order: -1;}
.warrantyImg {  float: left;  width: 100%;  height: auto;  text-align: center;}
.warrantyTextBox {  text-align: center;}
.warrantyHeading {  font-size: var(--font24);}
.homeServiceInner {  grid-template-columns: repeat(1, 1fr);  padding: 0%; gap: 0px;}
.blogInner {  grid-template-columns: repeat(1, 1fr);}
.warrantyBox {  width: 100%;  margin-left: 0%;}
.warrantyText {  width: 100%;  text-align: center;  margin-top: 20px;  margin-bottom: 20px;}
.productBox.blackBg {  height: auto;}

.bannerTopText::before {
  left: 0;
  background-size: 20px;
  background-repeat: no-repeat;
  height: 15px;
  width: 27px;
  display: block;
  position: relative;
  top: 0;
  margin: 0 auto;
  text-align: center;
}
.feturesInnerSection .feturesBox {  display: grid;  grid-template-columns: 17% 80%;}
.bannerTopText {  margin-left: 10%;}
.findoutBtn {  margin-left: calc(50% - 159px);}
/* .bannerBtnRow .findoutBtn {  margin-left: calc(50% - 141px);} */
.feturesOuterSection.subpage .feturesOuterSection .fetureIcon {  width: 68px;}
/* .feturesOuterSection.subpage .feturesInnerSection .fetureIcon img {  width: 45px;} */
.feturesOuterSection.subpage .fetureIcon {  width: 70px;}
ul.Explore > li {  width: 100%;}
.sitemapmain {  padding: 19px 0px 60px;}
.historyInner .comonHeading {
  margin-left: 40px;
}
.bannerTopText {
  font-size: var(--font24);
  margin-left: 0;
  text-align: center;
  margin-bottom: 7px;
  text-align: center;
  margin-bottom: 15px;
}
.homeBannerContent {
  bottom: 100px;
  width: 100%;
  left: 50%;
  transform: translate(-50%, 0px);
  margin: 0 auto;
  max-width: 387px;
}
.bannerBtnRow {  max-width: 322px;  margin: 0 auto;}
.bannerHeading {  font-size: 32px; margin-left: 5px;     text-align: center; }

.aboutImg1 {
  position: static;
  margin-left: 70px;
}
.imgMargin1 {
  margin-bottom: 0px;
}
.aboutImg2 {
  margin-top: 0px;
  margin-left: 66px;
}

.homeBanner .footer {
  width: 92%;
}




}


@media only screen and (max-width: 500px) {
.productTextBox .findoutBtn {  bottom: 0;  right: 0;  left: 0;  text-align: center;}
.homeBannerContent {  bottom: 57px;}
.whyCambroInnerSection {  padding-top: 55px;}
.whyFeturesRow {  gap: 30px;}

.feturesInnerSection .feturesBox {  display: grid;  grid-template-columns: 25% 80%;}
.whyFeturesRow {
  padding-top: 90px;
}
.home .whyFeturesRow {
  padding-top: 120px;
}
.instaImg.insta{
  right: 14px;

}
.instaImg.fb{
  right: 14px;
  top:90px;
}
.homeBanner .footer {
  width: 90%;
  bottom: -25px;
}


}
@media only screen and (max-width: 400px) {
  .findoutBtn { 
    max-width: 100%;
    margin-left: 0;
  }
  .bannerBtnRow .findoutBtn { 
    margin-left: 0;
    max-width: 100%;
  }
  .bannerBtnRow {
    max-width: 97%;
    margin: 0 auto;
  }
  .homeBannerContent { 
    width: 100%;
    max-width: 100%;
  }
  .join {
    min-width: 100%;
  }
  .productCol .findoutBtn {
    max-width: 100%;
    margin-left: 0;
  }
  .bannerHeading {  margin-left: 2px; }
  button.btn.btn-primary {
    width: 100%;
  }
  .homeBanner .footer {
    width: 89%;
  }
}


@media only screen and (min-width:1101px)
{
  ul.categoryList{grid-gap: 10px 0;}
  ul.categoryList li a{border: solid 1px var(--darkGray); }
  ul.categoryList li + li{margin-left: -1px;}
}