/*========================================================
	Main Style CSS for My Quality Construction Roofing & Siding 2025
=========================================================*/
/* Ewa: I updated and modified css on 2/01/25 @ 2:03pm EST */

:root {
  --main-black: #232322;
  --orange: #fa903a;
  --main-red: #e30000;
  --blue: #1389c8;
  --white: #fff;
  --light-blue: #97dde9;
  --darker-orange: #c8732e;
  --darkblue: #094080;
  --yellow: #fdb910;
  --lightgreybg: #f3f4f6;
}

@font-face {
    font-family: 'axi-regular';
    src: url("../fonts/axiforma-regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'axi-black';
    src: url("../fonts/axiforma-black.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-semi';
    src: url("../fonts/metropolis.semi-bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-bold';
    src: url("../fonts/metropolis.bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'metropolis-medium';
    src: url("../fonts/metropolis.medium.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: proximaNova-Bold;
    src: url('../fonts/ProximaNova-Bold.ttf');
}
/*========================================================
                                          RESET
  =========================================================*/
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
abbr,
address,
em,
img,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
legend,
caption,
article,
aside,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

*:focus {
    outline: none;
}

* {
    box-sizing: border-box;
}

input[type='submit'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*========================================================
                      Main Styles
=========================================================*/
body {
    background: #fff;
    font-family: 'axi-regular', arial, sans-serif;
    font-weight: 400;
    color: var(--main-black);
    font-size: 19px;
    line-height: 1.6;
    margin: 0;
}

body.nav-active {
    overflow: hidden;
}
h1, h2, h3, h4, h5, h6{
  font-family: axi-black, arial, sans-serif;
  line-height: 1.3;
}
h1, h2, h3, h4{
  font-size: 60px;
  text-transform: uppercase;
}
h2.indh2,
h3.indh2 {
    font-size: 46px;
    text-align: center;
}
h3.indlh3 {
    font-size: 32px;
    line-height: 1.3;
}
li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.clear {
    clear: both;
}

ol li {
    list-style-type: decimal;
    list-style-position: inside;
    text-align: left;
    padding-left: 20px;
    line-height: 1.3em;
}

.titlep {
    max-width: 1090px;
    margin: 0 auto;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
h1, h2, h3, h4 {
  	font-size: 56px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  body {
  	font-size: 18px;
  }
  h1, h2, h3, h4 {
  	font-size: 46px;
  }
  h2.indh2, h3.indh2 {
      font-size: 38px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  body {
  	font-size: 18px;
  }
  h1, h2, h3, h4 {
  	font-size: 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  body {
  	font-size: 19px;
  }
  h1, h2, h3, h4 {
  	font-size: 34px;
  }
  h2.indh2,
  h3.indh2 {
      font-size: 38px;
      text-align: center;
  }
  h3.indlh3 {
      font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  body {
  	font-size: 18px;
    line-height: 1.5;
  }
  h1, h2, h3, h4 {
  	font-size: 33px;
    line-height: 1.3;
  }
  h2.indh2,
  h3.indh2 {
  	font-size: 30px;
  }
}

/*=======================================================
                       Main Layout
=========================================================*/
/*========================================================
	NAVIGATION
=========================================================*/
.menu ul li.mlogo,
.menu ul li.mphone,
.menu ul li.maddress,
.menu ul li.mobSocial,
.menu ul li.mhours,
.menu ul li.mlinks1,
.menu ul li.mlinks2,
.smobitrigger,
.mnuclose,
.advertMob,
.digitalMob,
.printMob,
.logoMobTop,
.telMobTop,
.promosMobile,
h1.banCenH1Mob,
.banCenWrapMob,
.belowbanBtnMob,
.marketingBanMob,
.howitworksBanMob,
.logosLinkMob,
.logosMobile,
.aboutbanCenWrapMob,
.bannerMobile {
    display: none;
}

.menu {
    text-align: right;
}

.menu ul li.mlinks {
    display: inline-block;
}
.menu ul li.mmlinks {
    display: none;
}
.menu ul li.mlinks a {
  color: var(--main-black);
    font-size: 21px;
    line-height: 22px;
    text-transform: capitalize;
    padding: 0 0 0 30px;
    transition: all 0.3s ease;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .menu ul li.mlinks a {
        font-size: 18px;
        padding: 0 0 0 35px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .menu ul li.mlinks a {
  	font-size: 16px;
  	line-height: 30px;
  	padding: 0 0 5px 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {}
@media only screen and (max-width: 767px) {}

/*=======================================================
    Buttons
=========================================================*/
.lrBtn {
  background: var(--orange);
  border-radius: 35px;
  color: #fff;
  display: inline-block;
	font-size: 19px;
  font-weight: 500;
  line-height: 0.8;
  padding: 25px 50px;
	text-align: center;
	text-transform: uppercase;
}
.grBlueBtnRight .lrBtn{
  background: var(--blue);
}
.grBlueBtnRight .lrBtn{
  background: var(--white);
  border: 2px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
}
.bannSubBtn {
    background: var(--orange);
    border-radius: 35px;
    color: var(--darkblue);
    display: inline-block;
	font-size: 28px;
    font-weight: 500;
    line-height: 0.8;
    padding: 25px 50px;
	text-align: center;
	text-transform: capitalize;
}
.listButton {
	line-height: 0.8;
	padding: 25px 50px;
	color: var(--main-black);
	text-align: center;
	display: inline-block;
	font-family: axi-regular, arial, sans-serif;
	font-size: 28px;
	letter-spacing: 5px;
	text-transform: uppercase;
	border-radius: 40px;
	border: 3px solid var(--orange);
}
.bannerBtn {
    background: var(--darkblue);
    border-radius: 35px;
    color: var(--white);
    display: inline-block;
	font-size: 19px;
    font-weight: 400;
    line-height: 1;
    padding: 18px 30px 15px;
	text-align: center;
	text-transform: uppercase;
}
.reviewsBtn {
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 40px;
    line-height: 1;
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    font-family: axi-regular, arial, sans-serif;
    font-size: 19px;
    padding: 18px 30px 15px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .lrBtn {
  	font-size: 19px;
    padding: 17px 44px;
  }
  .listButton{
    font-size: 24px;
    padding: 22px 44px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .lrBtn {
  	font-size: 19px;
  	padding: 15px 40px;
  }
    .bannSubBtn {
        font-size: 21px;
        padding: 15px 40px;
        line-height: 1.2;
    }
    .listButton {
        padding: 17px 38px;
        font-size: 19px;
        border: 2px solid var(--orange);
    }
    .bannerBtn,
    .reviewsBtn {
        font-size: 16px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .lrBtn {
  	font-size: 16px;
  	padding: 15px 36px;
  }
     .bannSubBtn {
        font-size: 18px;
        padding: 12px 30px;
        line-height: 1.2;
    }
    .listButton {
        padding: 15px 36px;
        font-size: 16px;
        border: 2px solid var(--orange);
    }
     .bannerBtn,
    .reviewsBtn {
        font-size: 16px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .lrBtn {
  	font-size: 19px;
  	padding: 15px 40px;
  }
    .bannSubBtn {
        font-size: 21px;
        padding: 15px 40px;
        line-height: 1.2;
    }
    .listButton {
        padding: 15px 40px;
        font-size: 19px;
        border: 2px solid var(--orange);
    }
}
@media only screen and (max-width: 767px) {
  .lrBtn {
  	font-size: 19px;
  	padding: 18px 30px;
  }
    .bannSubBtn {
        font-size: 18px;
        padding: 12px 30px;
        line-height: 1.2;
    }
    .listButton {
        padding: 18px 30px;
        font-size: 16px;
        border: 2px solid var(--orange);
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {
    .lrBtn {
        font-size: 16px;
        line-height: 1.3;
        padding: 18px 23px;
    }

}

/*========================================================
	CONTENT
=========================================================*/
.bodyFrame {
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.pageFull {
    width: 100%;
    margin: 0 auto;
}
.pageSize {
    width: 1320px;
    margin: 0 auto;
}
.pageSmaller {
    width: 870px;
    margin: 0 auto;
}
.pageTop {
    width: 1300px;
    margin: 0 auto;
}
.pageServ {
    width: 85%;
    margin: 0 auto;
}
.pageInd {
    width: 1300px;
    margin: 0 auto;
}
.topic {
    padding-top: 121px;
}
.pageSubPack {
    width: 1200px;
    margin: 0 auto;
}
.pageTit {
    width: 1000px;
    margin: 0 auto;
}
.topSub {
    border-bottom: 2px solid #004271;
}
.pageSub {
    width: 1616px;
    margin: 0 auto;
}
.dottedbord {
    border-top: 1px dashed #65839a;
}
.nodotted {
    border-top: 0 !important;
}

.socbg {
    padding: 0 0 50px;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .pageSize {
      width: 85%;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1919px) {
    .socbg {
        padding: 50px 0 90px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .socbg {
        padding: 0 0 75px;
    }
    .pageSmaller{
      width: 90%;
    }
}
@media only screen and (max-width: 1300px) {
    .pageSize {
        width: 95%;
    }
}
@media only screen and (max-width: 767px) {
  .pageSmaller{
    width: 90%;
  }
}


.bannerIndex {
    background: url(../images/index/cis-bannerbg.webp);
}
.bannerMold {
    background: url(../images/mold/mold-banner-desktop.jpg);
}
.bannerRenovation {
    background: url(../images/renovation/renovation-banner-desktop.jpg);
}
.bannerRestoration {
    background: url(../images/restoration/restoration-banner-desktop.jpg);
}
.bannerWaterDamage {
    background: url(../images/waterdamage/waterdamage-banner-desktop.jpg);
}
.indexFormMobile {
    display: none;
}
.bannerbg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1200px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.centBanRect{
  width: 90%;
  margin: 0 auto;
}
.indexBanLeft {
    width: 50%;
}
.banRectNew{
  background: url('../images/index/index-blue-bg.webp') no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  padding: 50px 55px;
  max-width: 960px;
}
.banRectNew h1{
  font-size: 55px;
  text-transform: uppercase;
}
.banh1sp2 {
    display: block;
}
.banRectNew p{
  font-size: 30px;
  margin: 30px 0 0;
  text-transform: capitalize;
}
.banRectNew p span{
  margin: 0 10px 0 10px;
}
.banRectNew p span:nth-child(1){
  margin: 0 10px 0 0;
}
.banRectBtnPlace{
  margin: 50px 0 0;
}
.angleWhBottom {
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    left: 0;
    bottom: 0;
    z-index: 2;
}
.angleWhTop {
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    left: 0;
    top: 0;
    z-index: 3;
}
.subpban p {
    text-transform: none;
}
.indexBanWrap {
    display: flex;
    align-items: center;
}
.indexBanForm {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bannerMobWrap {
    display: none;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .banRectNew {
  	max-width: 860px;
  }
  .banRectNew h1 {
  	font-size: 50px;
  }
  .banRectNew p {
  	font-size: 28px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .banRectNew {
  	max-width: 670px;
  }
  .banRectNew h1 {
  	font-size: 36px;
  }
  .banRectNew p {
  	font-size: 24px;
    margin: 20px 0 0;
  }
  .banRectBtnPlace {
  	margin: 35px 0 0;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .banRectNew {
  	max-width: 610px;
    padding: 38px 55px;
  }
  .banRectNew h1 {
  	font-size: 32px;
  }
  .banRectNew p {
  	font-size: 21px;
    margin: 20px 0 0;
  }
  .banRectBtnPlace {
  	margin: 35px 0 0;
  }
    .indexBanWrap {
        margin-top: 80px;
    }
    .indexForm {
        max-width: 340px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .banRectNew {
  	max-width: 590px;
    padding: 38px 35px;
  }
  .banRectNew h1 {
  	font-size: 30px;
  }
  .banRectNew p {
  	font-size: 21px;
    margin: 20px 0 0;
  }
  .banRectBtnPlace {
  	margin: 25px 0 0;
  }
}
@media only screen and (max-width: 767px) {
    .indexFormMobile {
        display: inline-block;
        background: #f9f9f9;
    }
  .bannerbg{
    background: none;
  }
  .bannerMobile{
    display: block;
    width: 100%;
  }
  .centBanRect {
  	width: 100%;
    background: url(../images/index/index-blue-bg.webp) no-repeat;
    background-position: center;
    background-size: cover;
      height: 260px;
  }
  .banRectNew {
  	max-width: 525px;
  	padding: 38px 25px 50px;
    text-align: center;
      margin: 0 auto;
      background: none;
  }
  .banRectNew h1 {
  	font-size: 26px;
  }
  .banRectNew p {
  	font-size: 16px;
    margin: 20px 0 0;
  }
  .banRectBtnPlace {
  	margin: 25px 0 0;
  }
    .indexBanForm {
        display: none;
    }
    .indexBanLeft {
        width: 100%;
    }
    .bannerMobWrap {
      position: relative;
        display: inline-block;
    }
    .indexBanContWrap {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {
    .centBanRect {
        height: 300px;
    }
    .banh1sp1 {
        display: block;
    }
    .banRectNew {
        padding: 38px 20px 50px;
    }
    .banRectNew p span:nth-child(1) {
        margin: 0 5px 0 0;
    }
    .banRectNew p span {
        margin: 0 5px 0 5px;
    }
    .indexBanContWrap {
        width: 212px;
    }
}

/*========================================================
	TOP
=========================================================*/
.banTopWrap {
  background: #fff;
    width: 100%;
    margin: 0 auto;
    z-index: 9999;
    box-shadow: 0px 11px 15px -20px rgba(0,0,0,0.60);
}
.blueBar{
  background: var(--darkblue);
  padding: 5px 0;
}
.blueBarSize{
  width: 72%;
  margin: 0 auto;
    max-width: 1320px;
}
.blueBarCont{
  color: var(--white);
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
}
.blueBarCont img{
  width: 20px;
  margin: 6px 8px 0 0;
}
.ttopLoc,
.ttopTel{
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: left top 5px;
  padding-left: 28px;
}
.ttopTel{
  background-image: url('../images/phone.png');
}
.ttopLoc{
  background-image: url('../images/map.png');
}
.blueBarCont p{
  margin-left: 50px;
}
.ttopLoc {
    margin-right: 35px;
}
.banTop {
    width: 72%;
    margin: 0 auto;
    display: flex;
    height: 120px;
    align-items: center;
    max-width: 1320px;
}

.logoTop,
.logoTopSub {
    width: 20%;
    justify-content: flex-start;
    height: 120px;
}

.logoTopSub a {
    display: inline-block;
}

.logoTop img {
    height: 90px;
    margin-top: 15px;
}

.logoTopSub img {
    margin-top: 20px;
    height: 60px;
}

.navTop {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.topInfoWrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 20px;
}
.topAdr,
.topTel {
    font-size: 22px;
    font-weight: 500;
    line-height: 22px;
    text-transform: capitalize;
    padding: 15px 45px;
    color: #fff;
}
.topAdr{
  background: #0d8ba2;
}
.topTel{
  background: #fa903a;
}
.faloctop,
.fateltop {
    margin-right: 5px;
}

.bannrBtnPlace {
    margin-top: 70px;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {

    .topAdr, .topTel {
        font-size: 20px;
    }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .blueBarSize,
  .banTop {
  	width: 90%;
  }
  .banTop{
    height: 90px;
  }
  .blueBarCont {
  	font-size: 18px;
  }
    .logoTop,
    .logoTopSub {
        width: 15%;
    }
    .navTop {
        width: 85%;
    }
     .topAdr, .topTel {
        font-size: 16px;
    }
    .logoTop img {
    	height: 70px;
    	margin-top: 20px;
    }
    .ttopLoc,
    .ttopTel{
      background-size: 18px 18px;
      padding-left: 26px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .blueBarSize,
  .banTop {
  	width: 95%;
  }
  .banTop{
    height: 90px;
  }
  .blueBarCont {
  	font-size: 17px;
  }
  .logoTop{
    height: 80px;
  }
    .logoTop,
    .logoTopSub {
        width: 15%;
    }
    .logoTop img {
    	height: 65px;
    	margin-top: 5px;
    }
    .navTop {
        width: 85%;
    }
    .topAdr, .topTel {
        font-size: 14px;
    }
    .ttopLoc,
    .ttopTel{
      background-size: 18px 18px;
      padding-left: 26px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .blueBar {
        display: none;
    }
  .ttopLoc,
  .ttopTel{
    background-size: 16px 16px;
    padding-left: 24px;
  }

}
@media only screen and (max-width: 767px) {
    .blueBar {
        display: none;
    }
  .blueBarSize,
  .banTop {
  	width: 95%;
  }
  .blueBarCont {
  	font-size: 16px;
  }
}
/*========================================================
            INDEX Banner NEW
=========================================================*/
/* Ewa: I added  on 05/10/25 @ 1:47pm EST */
.banIndex{
  background: var(--lightgreybg);
  padding: 100px 0;
    margin-top: 162px;
}
.banIndSize {
  width: 75%;
  margin: 0 auto;
  max-width: 1320px;
}
.banIndWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
    align-items: center;
}
.banIndLeft{
  width: 45%;
}
.banIndLeft h2{
font-family: axi-black, arial, sans-serif;
    font-size: 60px;
    margin: 20px 0 0;
    line-height: 1.2;
    max-width: 620px;
    text-transform: uppercase;
}




.banIndRight {
    width: 45%;
}
p.banFull {
  font-size: 24px;
  margin: 20px 0 0;
    font-weight: 600;
}
p.banFull span {
  color: var(--blue);
}
.banIndLeft h1,
 .banIndLeft h2{
    font-family: axi-black, arial, sans-serif;
    font-size: 60px;
    margin: 20px 0 0;
    line-height: 1.2;
    max-width: 620px;
    text-transform: uppercase;
}
.banh1bellow {
    width: 580px;
    background: var(--white);
    padding: 17px 28px 8px;
    border-radius: 25px;
}
.banh1bellow h2 {
    font-size: 28px;
    font-family: axi-regular, arial, sans-serif;
    text-transform: none;
}
.banh1bellow h2 span {
    font-family: axi-black, arial, sans-serif;
    font-size: 72px;
    color: var(--darkblue);
    text-transform: uppercase;
}
.banh1b1 {
    margin-right: 20px;
}
.banh1b2 h2 {
    line-height: 1.2;
    text-transform: capitalize;
}
.banh1b4 {
    color: var(--darkblue);
}
.banh1last h2 {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.banh1last h2 .banh1b3  {
    width: 145px;
    font-size: 24px;
    font-family: axi-regular, arial, sans-serif;
    text-transform: capitalize;
    color: var(--main-black);
}
.banh1bellow sup {
    color: var(--main-black);
    font-size: 32px;
    margin-left: 5px;
}
p.banDescr {
  font-family: axi-regular, arial, sans-serif;
  font-size: 21px;
  line-height: 1.5;
  margin: 30px 0 0;
    width: 600px;
}
p.banDescr span {
    font-weight: 600;
}
.stRevs{
  background: var(--white);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0;
  margin: 40px 0 0;
}
.stRevs a{
  text-transform: uppercase;
}
.stRevDigit{
  margin-right: 30px;
}
.stRevDigit p{
  font-family: graphikbold, arial, sans-serif;
  font-size: 102px;
}
.stRevDigit p span{
  font-family: graphiksemi, arial, sans-serif;
}
.stRevText p{
  font-family: graphikbold, arial, sans-serif;
  font-size: 37px;
  text-transform: uppercase;
}
.stRevText p span{
  font-family: graphiksemi, arial, sans-serif;
}
.stRevText img{
  width: 200px;
}
.newBanbtns{
  margin: 50px 0 0;
}
.hideInDesktop{
  display: none!important;
}
.banIndImgRight{
  width: 100%;
  border-radius: 25px;
}
.banButnsWrap {
    margin-top: 40px;
}
.callBtn {
    font-weight: 600;
    font-size: 24px;
    margin-left: 50px;
}
/* Custom styling for Swiper pagination */
.swiper .banIndImgRight {
  position: relative!important;
}

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 500px!important;
  z-index: 10;
  width: 150px;
}

.swiper-pagination-bullet {
  width: 15px!important;
  height: 15px!important;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.7)!important;
}

.swiper-pagination-bullet-active {
  background-color: #fff;
}
@media only screen and (min-width: 1920px){
  .newBanbtns .skilledBtn{
    min-width: 301.5px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .swiper-pagination {
    left: 400px!important;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1919px) {
    .banIndex {
        margin-top: 144px;
    }
  .banIndSize{
    width: 90%;
    max-width: 1440px;
  }
  .banIndLeft {
  	width: 40%;
  }
  p.banFull {
  	font-size: 24px;
  }
  .banIndLeft h2,
  .banIndLeft h1 {
  	font-size: 68px;
  }
  p.banDescr {
  	font-size: 23px;
    margin: 30px 0 0;
      width: 530px;
  }
  .stRevs{
    margin: 30px 0 0;
  }
  .stRevDigit p {
  	font-size: 90px;
  }
  .stRevText p {
  	font-size: 34px;
  }
  .stRevText img {
  	width: 185px;
  }
  .newBanbtns {
    margin: 40px 0 0;
  }
  .banIndImgRight {
  	max-width: 760px;
  }
  .swiper-pagination {
    left: 350px!important;
  }
  .newBanbtns .skilledBtn{
    min-width: 239.5px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .banIndex {
  	padding: 60px 0;
  }
  .banIndSize{
    width: 90%;
  }
    .banh1bellow {
        width: 470px;
    }
  .banIndLeft {
  	width: 45%;
  }
  p.banFull {
  	font-size: 21px;
  }
  .banIndLeft h2,
  .banIndLeft h1 {
  	font-size: 56px;
    margin: 10px 0 0;
  }
  p.banDescr {
  	font-size: 18px;
    margin: 15px 0 0;
  }
  .stRevs{
    margin: 25px 0 0;
  }
  .stRevDigit p {
  	font-size: 82px;
  }
  .stRevText p {
  	font-size: 30px;
  }
  .stRevText img {
  	width: 170px;
  }
  .newBanbtns {
    margin: 35px 0 0;
  }
  .banIndImgRight {
  	max-width: 600px;
  }
  .swiper-pagination {
    left: 340px!important;
  }
  .newBanbtns .skilledBtn{
    min-width: 239px;
  }
    .banButnsWrap {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
    .banIndex {
        margin-top: 128.8px;
    }
    p.banDescr {
      width: 500px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .banIndex {
  	padding: 60px 0;
      margin-top: 128.8px;
  }
  .banIndSize{
    width: 95%;
    max-width: 975px;
  }
  .banIndLeft {
  	width: 42%;
  }
  p.banFull {
  	font-size: 18px;
  }
  .banIndLeft h2,
  .banIndLeft h1 {
  	font-size: 45px;
    margin: 20px 0 0;
  }
  p.banDescr {
  	font-size: 16px;
    margin: 25px 0 0;
  }
    .banButnsWrap {
        margin-top: 25px;
    }
    .callBtn {
        font-size: 19px;
        margin-left: 35px;
    }
  .stRevs{
    margin: 25px 0 0;
  }
  .stRevDigit {
  	margin-right: 22px;
  }
  .stRevDigit p {
  	font-size: 68px;
  }
  .stRevText p {
  	font-size: 23px;
  }
  .stRevText img {
  	width: 130px;
  }
  .newBanbtns {
    margin: 35px 0 0;
  }
  .banIndImgRight {
  	max-width: 500px;
  }
  .swiper-pagination {
    left: 260px!important;
  }
    p.banDescr {
      width: auto;
  }
    .banh1bellow {
        width: 400px;
    }
    .banh1bellow h2,
    .banh1last h2 .banh1b3 {
        font-size: 18px;
    }
    .banh1bellow h2 span {
        font-size: 48px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .banIndex {
  	padding: 60px 0;
    margin-top: 0;
  }
  .banIndWrap{
    flex-direction: column-reverse;
    padding-bottom: 40px;
  }
  .banIndSize{
    width: 95%;
    max-width: 975px;
  }
  .banIndLeft {
  	width: 90%;
  }
  .banIndRight {
  	width: 100%;
  }
  p.banFull {
  	font-size: 18px;
    margin: 40px 0 0;
  }
  .banIndLeft h2,
  .banIndLeft h1 {
  	font-size: 60px;
    margin: 20px 0 0;
  }
  p.banDescr {
  	font-size: 19px;
    margin: 25px 0 0;
      width: auto;
  }
    .banButnsWrap {
        margin-top: 30px;
    }
  .stRevs{
    margin: 25px 0 0;
  }
  .stRevDigit {
  	margin-right: 22px;
  }
  .stRevDigit p {
  	font-size: 68px;
  }
  .stRevText p {
  	font-size: 23px;
  }
  .stRevText img {
  	width: 130px;
  }
  .banIndImgRight {
  	max-width: none;
  }
  .newBanbtns {
    margin: 35px 0 0;
  }
  .newBanbtns .rvnBtn{
    margin-right: 20px;
  }
  .swiper-pagination {
    left: 0!important;
    right: 0!important;
    text-align: center;
    bottom: 0!important;
  }
  .swiper-pagination-bullet {
    width: 15px!important;
    height: 15px!important;
    background-color: rgba(30, 73, 157, 0.7)!important;
  }

  .swiper-pagination-bullet-active {
    background-color: #1E499D!important;
  }
}
@media only screen and (max-width: 767px) {
  .banIndex {
  	padding: 30px 0;
    margin-top: 0;
  }
  .banIndWrap{
    flex-direction: column-reverse;
    padding-bottom: 40px;
  }
  .banIndSize{
    width: 92%;
    max-width: 975px;
  }
  .banIndLeft,
  .banIndRight {
  	width: 100%;
  }
  p.banFull {
  	font-size: 16px;
    margin: 30px 0 0;
  }
  .banIndLeft h2,
  .banIndLeft h1 {
  	font-size: 38px;
    margin: 20px 0 0;
  }
  p.banDescr {
  	font-size: 18px;
    margin: 25px 0 0;
      width: auto;
  }
    .banButnsWrap {
        margin: 30px 0 10px;
    }
  .stRevs{
    margin: 25px 0 0;
  }
  .stRevDigit {
  	margin-right: 22px;
  }
  .stRevDigit p {
  	font-size: 50px;
  }
  .stRevText p {
  	font-size: 18px;
  }
  .stRevText img {
  	width: 100px;
  }
  .banIndImgRight {
  	max-width: none;
  }
  .newBanbtns {
    margin: 28px 0 0;
  }
  .newBanbtns .rvnBtn{
    margin-right: 20px;
  }
  .newBanbtns .skilledBtn{
    margin-left: 0;
  }
  .banh1bellow {
  	width: 100%;
  	padding: 17px 24px 8px;
  }
  .banh1bellow h2 span {
  	font-size: 50px;
  }
  .banh1bellow h2 {
  	font-size: 20px;
  }
  .banh1last h2 .banh1b3 {
  	font-size: 21px;
  }
  .hideInMob{
    display: none!important;
  }
  .hideInDesktop{
    display: inline-block!important;
  }
  .swiper-pagination {
    left: 0!important;
    right: 0!important;
    text-align: center;
    bottom: 0!important;
  }
  .swiper-pagination-bullet {
    width: 15px!important;
    height: 15px!important;
    background-color: rgba(30, 73, 157, 0.7)!important;
  }

  .swiper-pagination-bullet-active {
    background-color: #1E499D!important;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /*.banIndLeft{
    max-width: 442px;
  }*/
  .banIndLeft h2,
  .banIndLeft h1 {
  	font-size: 48px;
  }
  .callBtn {
  	margin-left: 15px;
  }

}
@media only screen and (max-width: 479px) {
  .newBanbtns .rvnBtn{
    margin-right: 0;
  }
  p.banDescr br{
    display: none;
  }
  .newBanbtns a{
    max-width: 165px!important;
  }
  .newBanbtns .rvnBtn,
  .newBanbtns .skilledBtn {
  	font-size: 16px;
  	padding: 15px 12px;
  }
    .banButnsWrap {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
    }
    .callBtn {
        display: none;
    }
    .banButnsWrap .lrBtn {
        width: 260px;
    }
}

/*========================================================
            Blue Band Contact Us page
=========================================================*/
.orangeBand{
  background: var(--blue);
  color: var(--white);
  margin: 160px 0 0;
  padding: 40px 0;
  text-align: center;
}
.orangeBand p{
  font-size: 30px;
  line-height: 1.1;
  text-transform: capitalize;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .orangeBand p {
  	font-size: 26px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .orangeBand {
    margin: 130px 0 0;
  	padding: 25px 0;
  }
  .orangeBand p {
  	font-size: 22px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .orangeBand {
    margin: 126px 0 0;
  	padding: 25px 0;
  }
  .orangeBand p {
  	font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .orangeBand {
  	padding: 25px 0;
    margin: 60px 0 0;
  }
  .orangeBand p {
  	font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .orangeBand {
  	padding: 25px 0;
    margin: 25px 0 0;
  }
  .orangeBand p {
  	font-size: 20px;
  }
}

/*========================================================
            Banner Index
=========================================================*/
.banQci{
  background: url('../images/index/bannerbg.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  color: var(--white);
    height: 1100px;
    padding-top: 162px;
}
.newSize{
  width: 72%;
  margin: 0 auto;
    max-width: 1320px;
}
.banQciWrap{
  display: flex;
  justify-content:flex-start;
    align-items: center;
    height: 938px;
}
.banQciLeft{
  width: 70%;
}
.banQciLeft h1 {
  font-size: 100px;
  line-height: 1.1;
  text-transform: uppercase;
    max-width: 1290px;
}
.banQciLeft p {
  font-family: axi-black, arial, sans-serif;
  font-size: 90px;
  text-transform: capitalize;
    padding-top: 30px;
}
.banQciLeft h2{
  margin: 110px 0 0;
}
.formQciMobile{
  display: none;
}
.banQciLeftBtnPlc {
    margin: 60px 0 0;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .banQci{
    padding: 180px 0;
  }
  .newSize {
  	width: 86%;
  }
  .banQciLeft h1 {
  	font-size: 92px;
       max-width: 1152px;
  }
  .banQciLeft p {
  	font-size: 76px;
      padding-top: 10px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .banQci{
      height: 700px;
      padding-top: 130px;
  }
    .banQciWrap {
        height: 570px;
    }
  .newSize {
  	width: 85%;
  }
  .banQciLeft h1 {
  	font-size: 64px;
       max-width: 775px;
  }
  .banQciLeft p {
  	font-size: 54px;
      padding-top: 0;
  }
    .banQciLeftBtnPlc {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .banQci{
    padding-top: 130px;
      height: 700px;
  }
     .banQciWrap {
        height: 570px;
    }
  .newSize {
  	width: 95%;
  }
  .banQciLeft h1 {
  	font-size: 56px;
      max-width: 681px;
  }
  .banQciLeft p {
  	font-size: 46px;
      padding-top: 0;
  }
     .banQciLeftBtnPlc {
        margin-top: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .newSize {
  	width: 95%;
  }
  .banQci {
  	padding-top: 0;
      height: 480px;
      margin-top: 0;
  }
    .banQciWrap {
        height: 480px;
    }
  .banQciLeft h1 {
  	font-size: 52px;
      max-width: 730px;
  }
  .banQciLeft p {
  	font-size:42px;
      padding-top: 0;
  }
    .banQciLeftBtnPlc {
        margin-top: 20px;
    }
    .banQciLeft {
        width: 100%;
    }
}
@media only screen and (max-width: 767px) {
  .banQci{
    height: 480px;
  }
  .newSize {
  	width: 90%;
  }
  .banQci {
  	padding-top: 0;
  }
  .banQciLeft h1 {
  	font-size: 40px;
  }
    .banQciLeft h1 span {
        display: block;
    }
  .banQciLeft p {
  	font-size: 36px;
      padding-top: 0;
  }
  .banQciLeft h1,
   .banQciLeft p {
    text-shadow: 3px 0px 5px #000;
  }
  .banQciWrap {
  	height: 480px;
  }
  .banQciLeft,
  .banQciRight{
    width: 100%;
  }
  .banQciRight{
    display: none;
  }
  .formQciMobile{
    display: block;
  }
  .banQciLeft h2 {
  	margin: 30px 0 0;
  }
     .banQciLeftBtnPlc {
        margin-top: 25px;
    }
}
@media only screen and (max-width: 479px) {}
/*========================================================
        Florida Map Section Index
=========================================================*/
.florMap{
  background: #e8eae9;
}
.florMapSize{
  width: 70%;
  margin: 0 auto;
}
.florMapWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.florMapLeft,
.florMapRight{
  width: 48%;
}
.florMapLeft h2{
  font-size: 60px;
  margin: 70px 0 0;
}
.florMapLeft h2 span{
  display: block;
  color: var(--blue);
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .florMapSize {
  	width: 86%;
  }
  .florMapLeft h2 {
  	font-size: 54px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .florMapSize {
  	width: 95%;
  }
  .florMapLeft h2 {
  	font-size: 46px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .florMapSize {
  	width: 95%;
  }
  .florMapLeft h2 {
  	font-size: 32px;
    margin: 55px 0 0;
  }
  .florMapRight img{
    width: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .florMapSize {
  	width: 95%;
  }
  .florMapLeft h2 {
  	font-size: 25px;
  	margin: 40px 0 0;
  }
  .florMapRight img{
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .florMap{
    padding: 0 0 30px;
  }
  .florMapSize {
  	width: 95%;
  }
  .florMapLeft h2 {
  	font-size: 25px;
  	margin: 40px 0 0;
  }
  .florMapRight img{
    width: 100%;
  }
  .florMapWrap {
  	flex-direction: column-reverse;
  }
  .florMapLeft,
  .florMapRight{
    width: 100%;
  }
}

/*========================================================
        Water Removal Services Section Index
=========================================================*/
.onlyText{
  background: #f9f9f9;
  padding: 100px 0;
  text-align: center;
}
.onlyText h2{
  margin: 0 0 45px;
}
.onlyText p{
  width: 90%;
  margin: 0 auto;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .onlyText {
  	padding: 80px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .onlyText {
  	padding: 80px 0;
  }
}
@media only screen and (max-width: 767px) {
  .onlyText {
  	padding: 60px 0;
  }
  .onlyText p {
    width: 95%;
  	text-align: left;
  }
}

/*========================================================
        Expert Witness Section Index
=========================================================*/
.expSec{
  background: var(--blue);
  color: var(--white);
  padding: 100px 0 90px;
}
.expSec .newSize{
  position: relative;
}
.expRect{
  background: var(--orange);
  padding: 15px 25px 20px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  width: 185px;
  position: absolute;
  top: -100px;
  left: 0;
}

.expDigits{
  color: var(--blue);
  font-size: 120px;
  font-weight: 700;
  line-height: 0.8;
  margin-top: 15px;
}
.expDigits span{
  display: none;
}
.expLabel span{
  color: var(--blue);
  font-size: 30px;
  text-transform: capitalize;
}
.expLabel{
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
}

.expSecBigContent{
  padding-left: 280px;
}
.expSecWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.expSecLeft{
  width: 41%;
}
.expSecRight{
  width: 54%;
}
.expSecLeft h2{
  line-height: 1.2;
  margin: 10px 0 0;
}
.expSecLeft p{
  margin: 30px 0 0;
}
.expSecRight img{
  width: 100%;
  height: auto;
  border-radius: 30px;
}
.expBtnPlace{
  text-align: center;
  margin: 100px 0 0;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .expRect {
  	width: 165px;
  	top: -100px;
  	left: 0;
  }
  .expSecBigContent {
  	padding-left: 260px;
  }
  .expDigits {
  	font-size: 94px;
  }
  .expLabel span {
  	font-size: 25px;
  }
  .expLabel {
  	font-size: 18px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .expRect {
  	width: 145px;
  	top: -100px;
  	left: 0;
  }
  .expSecBigContent {
  	padding-left: 180px;
  }
  .expDigits {
  	font-size: 76px;
  }
  .expLabel span {
  	font-size: 20px;
  }
  .expLabel {
  	font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .expSec {
  	padding: 100px 0 90px;
  }
  .expRect {
  	width: 145px;
  	top: -100px;
  	left: 0px;
  }
  .expSecBigContent {
  	padding-left: 180px;
  }
  .expDigits {
  	font-size: 76px;
  }
  .expLabel span {
  	font-size: 20px;
  }
  .expLabel {
  	font-size: 16px;
  }
  .expSecLeft,
  .expSecRight{
    width: 100%;
  }
  .expSecLeft{
    margin-bottom: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .expSec {
  	padding: 145px 0 80px;
  }
  .expSecWrap {
  	flex-direction: column-reverse;
  }
  .expRect {
  	width: 280px;
  	top: -120px;
  	left: -20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 0;
  }

  .expSecBigContent {
  	padding-left: 0px;
  }
  .expDigits {
  	font-size: 56px;
    margin-top: 0;
  }
  .expDigits span{
    display: block;
    font-size: 14px;
    text-transform: capitalize;
  }
  .expLabel span {
  	display: none;
  }
  .expLabel {
  	font-size: 24px;
    text-align: left;
    margin-left: 10px;
  }
  .expSecLeft,
  .expSecRight{
    width: 100%;
  }
  .expSecRight img {
  	margin: 0 0 10px;
  }
  .expSecLeft{
    margin-bottom: 40px;
  }
  .expBtnPlace {
  	margin: 20px 0 0;
  }
}

/*========================================================
        Services & Solutions Section Index
=========================================================*/
.lrSection{
  padding: 90px 0;
    background: var(--lightgreybg);
}
.lrSection h1 {
  text-align: center;
  margin: 0 0 130px;
}
.lrSection h2 {
    margin-bottom: 90px;
}
.lrSection h1 span,
.lrSection h2 span{
  display: block;
}
.lrSectionWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
    align-items: center;
    background: var(--white);
    padding: 30px;
    border-radius: 25px;
}
.lrSecLeftImg{
  width: 55%;
}
.goodImg{
    width: 100%;
    padding-top: 20px;
}
.lrSecRightText{
  width: 43%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lrSecLeftImg img{
  width: 100%;
    border-radius: 25px;
}
.goodImg img{
    width: 100%;
    border-radius: 35px;
}
.lrSecRightText h3 span{
  display: block;
}
.lrSecRightText p,
.lrExtraRect p {
  margin: 15px 0 0;
    font-size: 19px;
}
.lrSecRightText ul {
    padding: 10px 0 0 25px;
}
.lrSecRightText ul li {
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 15px;
}
.lrSecRightText ul li span {
    font-family: axi-black, arial, sans-serif;
}
.lrGrayRectRound{
  background: #e8eae9;
  border-radius: 30px;
  padding: 20px 30px;
}
.lrSecUl{
  margin: 40px 0 0;
}
.lrSecUl li{
  background-image: url('../images/index/blue-tick.svg');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 18px 18px;
  padding-left: 30px;
  margin-bottom: 15px;
}
.lrSubUl{
  padding-left: 20px;
}
.lrSubUl2Cols{
  column-count: 2;
}
.lrSubUl li{
  list-style-type: disc;
  list-style-position: outside;
  margin-bottom: 15px;
}
.lrSubUl li span{
  display: block;
  font-weight: 700;
}
.lrSecBtnPlace{
  margin: 25px 0 0;
}
.lrSecBtnPlace .lrBtn{
  background: var(--blue);
}
.lrSecQuoteBtnPlace{
  text-align: center;
}
.lrSecQuoteBtnPlace .lrBtn{
  background: var(--white);
  border: 2px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
}

.lrSectionWrapRever{
  flex-direction: row-reverse;
}
.lrSecAddMargin{
  margin: 45px 0 0;
}
.newBlue{
  background: var(--blue);
  color: var(--white);
}
.newBlue img{
  border-radius: 30px;
}
.lrExtraWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 50px 0 0;
}
.lrExtraRect{
  width: 48%;
}
.lrSection h4{
  text-transform: uppercase;
}
.roofingBtnPlace{
  margin: 60px 0 0;
  text-align: center;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .goodImg {
      display:none;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .lrSection {
  	padding: 80px 0;
  }
  .lrSection h1,
  .lrSection h2 {
  	margin: 0 0 70px;
  }
  h3.indlh3 {
  	font-size: 26px;
  }
    .lrSecRightText p,
    .lrExtraRect p {
        font-size: 18px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .lrSection {
  	padding: 50px 0;
  }
  .lrSection h1,
  .lrSection h2 {
  	margin: 0 0 50px;
  }
  .lrSecAddMargin {
  	margin: 50px 0 0;
  }
    h2.indh2, h3.indh2 {
        font-size: 34px;
    }
    h3.indlh3 {
        font-size: 24px;
    }
    .lrSecLeftImg {
        width: 45%;
    }
    .lrSecRightText {
        width: 52%;
    }
    .lrSecRightText p, .lrExtraRect p {
        font-size: 18px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .lrSection {
  	padding: 35px 0 85px;
  }
  .lrSection h1,
  .lrSection h2 {
  	margin: 0 0 70px;
  }
  .title768 h2 {
    width: 70%;
    margin: 0 auto 90px;
  }
  .lrSecLeftImg,
  .lrSecRightText {
  	width: 100%;
  }
  .lrSecLeftImg{
    margin-bottom: 40px;
  }
  .lrSecAddMargin {
  	margin: 80px 0 0;
  }
  .lrSubUl2Cols{
    column-count: 1;
  }
  .lrExtraRect{
    width: 100%;
  }
  .lrSecRightText p,
  .lrExtraRect p {
      font-size: 18px;
  }
  .lrExtraRect:last-child{
    margin: 40px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .lrSection {
  	padding: 35px 0 85px;
  }
  .lrSectionWrap {
  	padding: 22px;
  }
  .lrSectionSubPage{
    padding: 50px 0 65px;
  }
  .lrSection h1,
  .lrSection h2 {
  	margin: 0 0 35px;
  }
  .lrSection h1 span,
  .lrSection h2 span{
    display: block;
  }
  .lrSecRightText p,
  .lrExtraRect p {
  	font-size: 18px;
  }
  .lrSecLeftImg,
  .lrSecRightText {
  	width: 100%;
  }
  .lrSecLeftImg{
    margin-bottom: 40px;
  }
  .lrSecRightText h3 {
  	font-size: 24px;
  }
  .lrGrayRectRound{
    padding: 20px;
  }
  .lrSecAddMargin {
  	margin: 60px 0 0;
  }
  .lrSecBtnPlace{
    text-align: left;
  }
  .lrSubUl2Cols{
    column-count: 1;
  }
  .lrExtraRect{
    width: 100%;
  }
  .lrExtraRect:last-child{
    margin: 40px 0 0;
  }
  .roofingBtnPlace .bannerBtn{
    font-size: 18px;
    line-height: 1.3;
    border-radius: 42px;
  }
  .roofingBtnPlace .bannerBtn span{
    display: block;
  }
}

@media only screen and (max-width: 479px) {

}
/*========================================================
        Compare Us to The Competition Section Index
=========================================================*/
.compUs{
  background: var(--lightgreybg);
  padding: 80px 0;
  text-align: center;
}
.compUs h3{
  margin-bottom: 15px;
}
.compUsTableSize{
  width: 865px;
  margin: 0 auto;
}
.compUsWrap{
  width: 100%;
  margin: 60px auto 0;
    border-radius: 25px;
}

.compUsLogo img{
  width: 210px;
  margin: 40px 0 0;
}
.compUsRow{
  background: var(--white);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
    border-bottom: 1px solid var(--lightgreybg);
}
.compUsText{
  width: 80%;
  text-align: left;
    padding: 20px;
}
.compUsText p {
    font-size: 19px;
    max-width: 540px;
}
.compUsTick{
  width: 20%;
    border-left: 1px solid var(--lightgreybg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.compUsTick img{
  width: 40px;
}
.crow1 {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.crow2 {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .compUsText p {
        font-size: 18px;
    }
    .compUsTick img {
        width: 35px;
    }
    .compUs {
        padding: 70px 0;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .compUs {
  	padding: 80px 0;
  }
  .compUsTick img{
    width: 30px;
  }
    .compUsText p {
        font-size: 18px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .compUs {
  	padding: 80px 0;
  }
  .compUsTableSize{
    width: 95%;
  }
  .compUsWrap{
    width: 90%;
  }
  .compUsText {
    width: 75%;
  }
  .compUsTick img{
    width: 44px;
  }
}
@media only screen and (max-width: 767px) {
  .compUs {
  	padding: 60px 0;
  }
  .compUsTableSize{
    width: 100%;
  }
  .compUsLogo img {
  	width: 190px;
  	margin: 60px 0 0;
  }
  .compUsWrap {
  	width: 100%;
  	margin: 50px auto 0;
    border-radius: 0;
  }
  .crow1{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .crow2{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .compUsRow {
  	padding: 20px 10px;
  }
  .compUsText {
    width: 70%;
  }
  .compUsTick {
  	justify-content: flex-end;
  }
  .compUsText p{
    font-size: 18px;
  }
  .compUsTick img{
    width: 40px;
  }
}

/*========================================================
        What Our Customers Have Said Section Index
=========================================================*/
.whOur{
  padding: 90px 0;
}
.bordRem{
  border-top: none;
}
.whOurFaq h1,
.whOurFaq h4{
  text-align: center;
}
.whOurFaq h4{
  font-size: 46px;
  margin-bottom: 60px;
}
.whOurSize{
  width: 48%;
  margin: 0 auto;
}
.whOurBox{}
.whOurBox img{
  width: 150px!important;
}
.whExcep{
  font-family: axi-black, arial, sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  margin: 15px 0 0;
}
.whText{
  margin: 15px 0 0;
  font-size: 19px;
}
.whNameAndDate{
  color: #8e8d92;
  display: flex;
  justify-content: space-between;
  margin: 20px 0 0;
    font-size: 16px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .whOurSize{
    width: 50%;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1919px){
  .whOurSize {
  	width: 60%;
  }
  .whOurFaq h4{
    font-size: 38px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .whOur {
        padding: 70px 0;
    }
    .whOurSize {
    	width: 65%;
    }
    .whOurFaq h4{
      font-size: 38px;
    }
    .whExcep {
  	font-size: 26px;
  }
    .whOurBox img {
       width: 125px!important;
    }
    .whText {
        margin-top: 35px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .whOur {
  	padding: 80px 0;
  }
  .whOurBox {
  	margin: 80px 0 0;
  }
  .whOurSize {
  	width: 75%;
  }
  .whOurFaq h4{
    font-size: 34px;
    margin-bottom: 30px;
  }
  .whExcep {
  	font-size: 23px;
  }
  .whText {
  	font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .whOur {
  	padding: 80px 0;
  }
  .whOurSize {
  	width: 90%;
  }
  .whOurFaq h4{
    font-size: 34px;
    margin-bottom: 30px;
  }
  .whExcep {
  	font-size: 23px;
  }
  .whOurBox {
  	margin: 60px 0 0;
  }
  .whText{
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .whOur {
  	padding: 60px 0;
  }
  .whOurFaq{
    padding: 60px 0;
  }
  .whOurFaq h4{
    font-size: 30px;
    margin-bottom: 30px;
  }
  .whNameAndDate {
  	flex-wrap: wrap;
  }
  .whNamePers,
  .whDate{
    width: 100%;
    line-height: 1.4;
  }
  .whOurSize {
  	width: 90%;
  }
  .whText {
  	font-size: 18px;
  }
  .whExcep {
  	font-size: 23px;
  }
  .whOurBox img {
  	width: 170px;
  }
}
/*========================================================
        We are here to help you section
=========================================================*/
.perWeb {
    padding: 120px 0;
    text-align: center;
    color: #fff;
    position: relative;
    margin: 0;
    background: var(--blue);
}
.perWeb h3 {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
}
.perWeb h3 span {
    display: block;
    font-size: 40px;
    font-weight: 500;
    text-transform: capitalize;
}
.perFlex {
   display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 30px 0 0;
}
.perFlex p {
    font-size: 26px;
    margin-right: 20px;
}
.banRectNewBtn {
    display: inline-block;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    padding: 14px 50px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    background: var(--orange);
    border-radius: 35px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .perWeb h3 {
  	font-size: 54px;
  }
  .perWeb h3 span {
  	font-size: 30px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .perWeb {
      padding: 80px 0;
  }
    .perWeb h3 {
        font-size: 56px;
    }
    .perWeb h3 span {
        font-size: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .perWeb {
        padding: 80px 0;
    }
    .perWeb h3 {
    	font-size: 46px;
    }
    .perWeb h3 span {
    	font-size: 26px;
    }
    .perFlex p {
    	font-size: 20px;
    }
    .banRectNewBtn {
    	font-size: 20px;
    	padding: 12px 46px;
    }
}
@media only screen and (max-width: 767px) {
    .perWeb {
        padding: 70px 0;
    }
    .perWeb h3 {
        font-size: 36px;
    }
    .perWeb h3 span {
        font-size: 24px;
        padding-top: 8px;
    }
    .perFlex p {
        font-size: 21px;
        margin-right: 0;
        margin-bottom: 5px;
    }
    .banRectNewBtn {
    	font-size: 16px;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .perWeb h3{
    max-width: 80%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 479px) {
  .perWeb {
      padding: 60px 0;
  }
    .perWeb h3 {
        font-size: 32px;
    }
}
/*========================================================
        BLUE RIBBON
=========================================================*/
.blueRibbon {
    background: var(--blue);
    padding: 60px 0;
}
.blueRibbonWrap {
    width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.blueRibbLeft {
   width: 70%;
}
.blueRibbRight {
    width: 25%;
    display: flex;
    justify-content: flex-end;
}
.blueRibbLeft h3 {
    color: var(--white);
    margin-bottom: 15px;
}
.blueRibbLeft p {
    color: var(--white);
    text-transform: capitalize;
    font-size: 19px;
}
.blueRibbLeft p span {
    font-weight: 600;
    font-size: 23px;
    margin-left: 15px;
    letter-spacing: 2px;
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .blueRibbonWrap {
        width: 700px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .blueRibbonWrap,
  .blueRibbLeft,
  .blueRibbRight{
    width: 100%;
    text-align: center;
  }
  .blueRibbonWrap{
    justify-content: center;
  }
  .blueRibbRight{
    justify-content: center;
    margin: 20px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .blueRibbonWrap,
  .blueRibbLeft,
  .blueRibbRight{
    width: 100%;
    text-align: center;
  }
  .blueRibbonWrap{
    justify-content: center;
  }
  .blueRibbRight{
    justify-content: center;
    margin: 20px 0 0;
  }
  .blueRibbLeft p span {
  	display: block;
  }
}
@media only screen and (max-width: 479px) {

}

/*========================================================
        SUNROOM DIVIDER
=========================================================*/
.sunroombg {
    background: var(--blue);
}
.sunroomWrap {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.sunroomLeft,
.sunroomRight {
    width: 50%;
}
.sunroomLeft {
    background: url('../images/indexnew/sunroom.webp') no-repeat;
    background-position: center center;
    background-size: cover;
    height: 510px;
}
.sunroomRight {
    padding-left: 35px;
}
.sunroomRight h3 {
    color: var(--white);
    margin-bottom: 15px;
}
.sunroomRight h3 span {
    display: block;
}
.sunroomRight p {
    font-size: 18px;
    color: var(--white);
}
.sunroomRightIns {
    width: 635px;
}
.sumroomBtnWrap {
    margin-top: 45px;
}
.sformbg {
    padding: 80px 0;
    background: #E8EAEA;
}
.sformWrap h3 {
    font-family: axi-black, arial, sans-serif;
    text-align: center;
}
.sformWrap iframe {
    width: 100%;
    background: transparent!important;
    min-height: 650px!important;
    margin-top: 60px;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .sunroomRight p {
        font-size: 18px;
    }
    .sunroomRightIns {
        width: 90%;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
     .sunroomRightIns {
        width: 90%;
    }
    .sumroomBtnWrap {
        margin-top: 20px;
    }
    .sformbg{
      padding: 80px 0 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .sformbg {
  	padding: 80px 0 60px;
  }
  .sunroomLeft,
  .sunroomRight{
    width: 100%;
  }
  .sunroomRight{
    padding: 40px 25px;
  }
}
@media only screen and (max-width: 767px) {
  .sformbg{
    padding: 60px 0 30px;
  }
  .sunroomLeft,
  .sunroomRight{
    width: 100%;
  }
  .sunroomRight{
    padding: 40px 25px;
  }
  .sunroomLeft{
    height: 350px;
  }
  .sunroomRightIns {
  	width: 100%;
  }
  .sunroomRight h3 span {
  	display: inline;
  }

}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .sunroomLeft{
    height: 400px;
  }
}
@media only screen and (max-width: 479px) {}
/*========================================================
        Footer
=========================================================*/
.lblueBand{
  background: var(--light-blue);
  padding: 30px 0;
}
.lblueBandWrap{
  display: flex;
  justify-content: center;
}
.lblueBandWrap a{
  font-weight: 700;
}
.hoursFooter{
  margin-left: 40px;
}
.footr{
  background: var(--main-black);
  color: var(--white);
  padding: 80px 0;
}
.footrMenu ul li.mlogo,
.footrMenu ul li.mphone,
.footrMenu ul li.maddress,
.footrMenu ul li.mhours,
.footrMenu ul li.mobSocial{
  display: none;
}
.footrWrap{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}
.footrOne {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
}

.footrMenu {
    width: 66%;
    margin: 50px auto 20px;
    display: flex;
    justify-content: center;
}
.footrLogo{
  margin: 0 0 20px;
}
.footrLogo img{
  width: 300px;
}
.footrAdr h6 {
  	font-family: axi-black, arial, sans-serif;
    font-size: 23px;
    color: var(--white);
    line-height: 1.2;
  }
.footrAdr p {
  line-height: 1.3;
    font-size: 19px;
    padding-bottom: 15px;
}
.footrAdr p span{
  display: block;
}
.footrTel p {
    line-height: 1.3;
    font-size: 30px;
    color: var(--white);
    font-family: axi-black, arial, sans-serif;
}
.footrMenu ul{
  text-align: center;
}
.footrMenu ul li{
  display: inline-block;
  text-transform: capitalize;
  padding: 0 10px 15px;
    font-family: axi-black, arial, sans-serif;
    font-size: 19px;
}
.mediadivider {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    margin-top: 20px;
}
.innerBox {
    display: inline-block;
    margin-right: 10px;
}
.mediadivider img {
    width: 40px;
}
.fooLic {
    padding: 60px 0;
}
.fooLic p {
    font-family: axi-black, arial, sans-serif;
    line-height: 1.5;
    font-size: 20px;
    color: var(--white);
    text-transform: capitalize;
}
.fooLic p span {
    line-height: 1.2;
    font-size: 18px;
    font-family: axi-regular, arial, sans-serif;
    display: block;
    text-align: center;
}
.copyright{
  color: #d9d9d9;
  font-size: 18px;
  padding: 40px 0 0;
  text-align: center;
}
.outerSticky {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
.stickyFooter {
    background: #282828;
    color: #fff;
    padding: 10px 0;
    border-top: 1px solid #fff;
}
.innerStickyFooter {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
.centeringSticky {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.innerStickyFooter a img {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin-right: 8px;
}
.innerStickyFooter a p {
    display: inline-block;
    font-size: 24px;
    font-family: Arial, sans-serif;
    vertical-align: middle;
}
.copyright p {
    font-size: 16px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .footrMenu {
  	width: 74%;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .footrLogo img {
        width: 200px;
    }
    .footrTel p {
        font-size: 26px;
    }
    .footrAdr h6 {
        font-size: 18px;
    }
    .footrAdr p {
        font-size: 16px;
    }
    .footrMenu {
    	width: 74%;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .footrLogo img {
    width: 200px;
  }
    .footrTel p {
        font-size: 26px;
    }
    .footrAdr h6 {
        font-size: 18px;
    }
    .footrAdr p {
        font-size: 16px;
    }
    .footrOne {
        padding-left: 60px;
    }
    .footrMenu {
    	width: 80%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .footr {
  	padding: 65px 0 80px;
  }
  .footrLogo img {
    width: 200px;
  }
    .footrTel p {
        font-size: 26px;
    }
    .footrAdr h6 {
        font-size: 18px;
    }
    .footrAdr p {
        font-size: 16px;
    }
    .footrMenu {
      width: 80%;
    }
}
@media only screen and (max-width: 767px) {
    .footr {
        padding: 35px 0;
    }
  .footrWrap {
  	flex-direction: column;
  }
    .footrOne,
    .footrAdr,
    .footrMenu {
        width: 100%;
        display: flex;
       flex-direction: column;
        align-items: center;
    }
    .footrLogo img {
        width: 200px;
    }
    .footrTel p {
        font-size: 26px;
    }
    .footrMenu {
        width: 240px;
        margin: 50px auto;
        align-items: flex-start;
    }
  .footrMenu ul li {
  	display: block;
  }
  .footrMenu ul {
  	text-align: left;
  }
  .mediadivider img {
  	width: 45px;
  }
  .lblueBandWrap{
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
  }
  .hoursFooter {
  	margin: 10px 0 0 0;
  }
  .copyright p span{
    display: block;
  }
    .fooLic p {
        font-size: 18px;
    }
    .fooLic p span {
        font-size: 16px;
    }
    .footrAdr {
        width: 240px;
        margin: 0 auto;
        align-items: flex-start;
    }
    .footrAdr h6,
    .footrAdr p {
        font-size: 18px;
    }
    .copyright {
        margin-bottom: 60px;
    }
}
@media only screen and (max-width: 479px) {
    .footrAdr p span {
        display: block;
    }
    .innerBox {
        padding: 15px 5px;
    }
    .copyright {
        font-size: 14px;
    }
    .fooLic {
        padding: 35px 0;
    }
}

/*=======================================================
                      Review us page
=========================================================*/
.wrapBoxes{
  width: 78%;
  margin: 0 auto 80px;
  text-align: center;
  overflow: hidden;
  max-width: 1325px;
}
.reviewTit {
    padding: 80px 0 30px;
    margin: 160px 0 0;
}
.reviewTit h1 {
    text-align: center;
}
.wrapBoxes h1{
  margin: 30px auto;
}
.revBoxWrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.revBox{
  width: 25%;
  padding: 10px 15px;
  overflow: hidden;
  color: #fff;

}

.inRevBox{
  border: 1px solid #777;
  box-shadow: 1px 1px 8px -1px rgba(0, 0, 0, 0.65);
  padding: 10px 15px;
}
.inRevBox p{
  font-size: 21px;
}
.inRevBox p a {
    color: #777;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {

}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
    .reviewTit{
      margin: 130px 0 0;
    }
    .reviewTit h1 {
        font-size: 36px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .reviewTit{
    margin: 126px 0 0;
  }
    .reviewTit h1 {
        font-size: 36px;
    }
    .revBox {
    	width: 32%;
    }
    .inRevBox img{
      width: 180px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .reviewTit{
    margin: 0 0 0;
  }
    .reviewTit h1 {
      width: 70%;
      margin: 0 auto;
        font-size: 34px;
    }
    .revBox {
    	width: 50%;
    }
    .reviewTit {
        padding: 50px 0 20px;
    }
}
@media only screen and (max-width: 767px) {
   .reviewTit h1 {
        font-size: 34px;
    }
    .reviewTit {
        padding: 60px 0 20px;
        margin: 0 0 0;
    }
    .revBox {
    	width: 100%;
    	margin: 0 auto;
    }
}

/*========================================================
    Contact Us page
=========================================================*/
.contPhone,
.contAdr{
  text-align: center;
}
.contPhone{
  margin: 20px 0 0;
}
.contPhone a{
  font-size: 32px;
}
.contAdr{
  margin: 5px 0 20px;
}
.contAdr p span{
  display: block;
}
.newContact h1{
  font-size: 50px;
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .contPhone a {
    font-size: 30px;
  }
  .newContact h1 {
  	font-size: 46px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .newContact h1 {
    font-size: 32px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .contPhone a {
    font-size: 30px;
  }
  .newContact h1 {
  	font-size: 34px;
  }
}
@media only screen and (max-width: 767px) {
  .contPhone a {
  	font-size: 30px;
  }
  .newContact h1 {
    font-size: 34px;
    width: 90%;
    margin: 0 auto;
  }
}

/*========================================================
            Disclaimer Page
=========================================================*/
.disclaimer{
  padding: 162px 0 50px;
}
.warrantyTit h1 {
    text-align: center;
    padding-bottom: 50px;
}
.warrantyTit h1 span {
    font-size: 24px;
    text-transform: none;
    font-weight: 300;
    letter-spacing: normal;
    display: block;
    text-transform: capitalize;
}
.warranty-box {
    width: 100%;
    margin: 20px auto 0;
    overflow: hidden;
}
.warranty-title {
    font-size: 32px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.3;
    margin: 0 0 10px;
}
.warranty-desc p {
  color: #555;
    line-height: 1.5;
    margin: 0 0 30px;
}
.sidingWrapper {
    padding-top: 70px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .disclaimer{
    padding: 130px 0 50px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .disclaimer{
    padding: 130px 0 35px;
  }
  .warranty-title {
      font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .disclaimer{
    padding: 0 0 35px;
  }
  .warranty-title {
      font-size: 24px;
  }
    .warrantyTit h1 {
        padding-bottom: 30px;
    }
  .warranty-box {
      margin: 20px auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .disclaimer{
    padding: 0 0 20px;
  }
  .warranty-title {
      font-size: 24px;
  }
     .warrantyTit h1 {
        padding-bottom: 20px;
    }
}

/*========================================================
    Sub Pages Layout - mold testing, mold removal...
=========================================================*/
.banSubWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
    padding-top: 162px;
}
.banSubLeft,
.banSubRight{
  width: 50%;
  height: 900px;
}
.banSubLeft{
  background: var(--blue);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 100px 80px 610px;
}
.banSubLeft h1{
  font-size: 68px;
}
.banSubBtnPlace{
  margin: 60px 0 0;
}
.banSubRight{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.banRenovation {
  background-image: url('../images/renovation/home-renovation-services.jpg');
}
.banFloridaRoom {
  background-image: url('../images/florida-room/florida-room.jpg');
}
.banPainting {
  background-image: url('../images/painting/painting-banner.jpg');
}
.banWindows {
  background-image: url('../images/windows/windows-banner-macomb.jpg');
}
.banRoofing {
  background-image: url('../images/roofing/roofing-banner.jpg');
}
.banGutters {
  background-image: url('../images/gutters/gutters-banner.jpg');
}

p.lrPBold{
  font-weight: 700;
  margin: 30px 0 20px;
}

.waterSecbg{
  padding: 100px 0;
}
.belowRenbg {
    background: #f9f9f9;
}
.belowbanRen h3{
  margin-bottom: 20px;
}
.waterPar {
    padding-top: 12px;
    font-weight: 700;
}
.waterPar span {
    display: block;
    font-weight: 400;
}
.aboutbg {
    padding-top: 150px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .banSubLeft {
  	padding: 80px 100px 80px 300px;
  }
  .banSubLeft,
  .banSubRight {
  	height: 740px;
  }
  .banSubLeft h1 {
  	font-size: 66px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .banSubLeft {
  	padding: 80px 100px 80px 100px;
  }
  .banSubLeft,
  .banSubRight {
  	height: 540px;
  }
  .banSubLeft h1 {
  	font-size: 54px;
  }
  .waterSecbg{
    padding: 80px 0;
  }
    .aboutbg {
    padding-top: 90px;
}
    .banSubWrap {
        padding-top: 130px;
    }
}
@media only screen and (min-width: 1601px) and (max-width: 1919px){
  .banSubLeft {
  	padding: 80px 100px 80px 142px;
  }
  .banSubLeft h1 {
    font-size: 58px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .banSubWrap {
  	padding-top: 128px;
  }
  .banSubLeft {
  	padding: 80px 100px 80px 25px;
  }
  .banSubLeft,
  .banSubRight {
  	height: 440px;
  }
  .banSubLeft h1 {
  	font-size: 42px;
  }
  .banSubBtnPlace {
    margin: 40px 0 0;
  }
  .waterSecbg{
    padding: 80px 0;
  }
     .aboutbg {
    padding-top: 120px;
}

}
@media only screen and (min-width: 1024px){
  .lrPMaxx{
    width: 77%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .banSubWrap{
    flex-direction: column-reverse;
      padding-top: 0;
  }
  .banSubLeft {
  	padding: 80px 150px 80px 20px;
  }
  .banSubLeft,
  .banSubRight {
    width: 100%;
  	height: 440px;
  }
  .banSubLeft h1 {
  	font-size: 42px;
  }
  .banSubBtnPlace {
  	margin: 40px 0 0;
  }
  .banSubLeft{
    height: auto;
  }
  .waterSecbg{
    padding: 60px 0;
  }
      .aboutbg {
    padding-top: 70px;
}

}
@media only screen and (max-width: 767px) {
  .banSubWrap{
    flex-direction: column-reverse;
      padding-top: 0;
  }
  .banSubLeft {
  	padding: 60px 20px 60px 20px;
  }
  .banSubLeft,
  .banSubRight {
    width: 100%;
  	height: 340px;
  }
  .banSubLeft h1 {
  	font-size: 34px;
  }
  .banSubBtnPlace {
  	margin: 40px 0 0;
  }
  .banSubLeft{
    height: auto;
  }
  .waterSecbg{
    padding: 60px 0;
  }
     .aboutbg {
    padding-top: 35px;
}

}
@media only screen and (max-width: 479px) {}

/*========================================================
  Sub Pages Bottom Blue / Gray Layout - mold testing, mold removal...
=========================================================*/
.grBlueSecWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.grBlueLeft,
.grBlueRight{
  width: 50%;
}
.grBlueLeft{
  background: var(--blue);
  color: var(--white);
  padding: 80px 100px 100px 360px;
}
.grBlueRight{
  background: #E8EAEA;
  padding: 80px 360px 100px 100px;
}

.grBlueSec h3{
	font-size: 48px;
	line-height: 1.2;
  margin: 0 0 30px;
}
.grBlueSec .lrSubUl li {
	margin-bottom: 8px;
}
.grBlueBtnLeft,
.grBlueBtnRight{
  margin: 60px 0 0;
}
.addExtrSpace{
  padding: 20px 0 0;
}
.addExtrSpace2{
  padding: 30px 0 0;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .grBlueLeft{
    padding: 80px 120px 100px 140px;
  }
  .grBlueRight{
    padding: 80px 140px 100px 120px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .grBlueSec h3{
  	font-size: 40px;
  }
  .grBlueLeft {
  	padding: 80px 60px 80px 40px;
  }
  .grBlueRight {
  	padding: 80px 40px 80px 60px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .grBlueSec h3{
  	font-size: 28px;
  }
  .grBlueLeft {
  	padding: 80px 60px 80px 30px;
  }
  .grBlueRight {
  	padding: 80px 30px 80px 60px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .grBlueSec h3{
  	font-size: 34px;
  }
  .grBlueSecWrap{
    flex-direction: column;
  }
  .grBlueLeft,
  .grBlueRight{
    width: 100%;
  }
  .grBlueLeft,
  .grBlueRight {
    padding: 60px 60px 60px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .grBlueSec h3 {
  	font-size: 26px;
  }
  .grBlueSecWrap{
    flex-direction: column;
  }
  .grBlueLeft,
  .grBlueRight{
    width: 100%;
  }
  .grBlueLeft,
  .grBlueRight {
    padding: 60px 10px 60px 10px;
  }
}

/*========================================================
    Sub Page mold removal bottom Map Section
=========================================================*/
.moldRem{
  background: var(--blue);
  color: var(--white);
  padding: 80px 0;
}
.moldRemWrap{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 72%;
  margin: 0 auto;
}
.moldRemMap{
  width: 38%;
}
.moldRemText{
  width: 52%;
}
.moldRemMap{
  padding: 15px 60px 15px 0;
  border-right: 1px solid var(--light-blue);
  text-align: center;
}
.moldRemText{
  padding: 15px 0 15px 60px;
}
.moldRemMap p{
  margin: 40px 0 0;
}
.moldRemText h3 {
	font-size: 48px;
	line-height: 1.2;
}
.moldRemText ul{
  margin: 20px 0 0;
}
.moldRemBtnPlace{
  margin: 40px 0 0;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .moldRemWrap{
    width: 86%;
  }
  .moldRemMap {
  	width: 42%;
  }
  .moldRemText {
  	width: 56%;
  }
  .moldRemMap p {
  	margin: 25px 0 0;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .moldRemWrap{
    width: 95%;
  }
  .moldRemMap {
  	width: 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .moldRemText {
  	width: 56%;
  }
  .moldRemMap img{
    width: 100%;
  }
  .moldRemMap p {
  	margin: 25px 0 0;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .moldRemWrap{
    width: 95%;
  }
  .moldRemMap {
  	width: 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .moldRemText {
  	width: 56%;
  }
  .moldRemText h3 {
    font-size: 28px;
  }
  .moldRemMap img{
    width: 100%;
  }
  .moldRemMap p {
  	margin: 25px 0 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .moldRemWrap{
    width: 95%;
  }
  .moldRemMap {
  	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: none;
    padding: 15px 60px 15px 0;
  }
  .moldRemText {
  	width: 100%;
    padding: 50px 60px 15px 0;
  }
  .moldRemText h3 {
    font-size: 34px;
  }
  .moldRemMap img{
    width: 80%;
  }
  .moldRemMap p {
  	margin: 25px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .moldRem {
  	padding: 60px 0;
  }
  .moldRemWrap{
    width: 95%;
  }
  .moldRemMap {
  	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: none;
    padding: 0px 0 15px 0;
  }
  .moldRemText {
  	width: 100%;
    padding: 50px 0 0;
  }
  .moldRemText h3 {
  	font-size: 26px;
  }
  .moldRemMap img{
    width: 100%;
  }
  .moldRemMap p {
  	margin: 25px 0 0;
  }
}

/*========================================================
    Black Mold light gray section
=========================================================*/
.colText{
  padding: 90px 0;
}
.lgray{
  background: #fbfbfb;
}
.colGray{
  background: #e8eae9;
}
.colText h3{
  font-size: 48px;
  line-height: 1.2;
  text-align: center;
}
.colTextWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 60px 0 0;
}
.colTextRect{
  width: 48%;
}
.colText .banSubBtnPlace{
  text-align: center;
}
.colTextPonly{
  max-width: 1100px;
  margin: 60px auto 0;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .colText h3 {
  	font-size: 40px;
  }
  .colTextWrap{
    margin: 40px 0 0;
  }
  .colTextPonly{
    max-width: 900px;
    margin: 60px auto 0;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .colText {
  	padding: 60px 0;
  }
  .colText h3 {
  	font-size: 28px;
  }
  .colTextWrap{
    margin: 20px 0 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .colText {
  	padding: 60px 0;
  }
  .colText h3 {
  	font-size: 34px;
  }
  .colTextWrap{
    margin: 20px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .colText {
  	padding: 60px 0;
  }
  .colTextRect{
    width: 100%;
  }
  .colText h3 {
  	font-size: 26px;
    text-align: left;
  }
  .colTextWrap{
    margin: 10px 0 0;
  }
  .colTextPonly{
    margin: 30px auto 0;
  }
}

/*========================================================
    Mobile Menu
=========================================================*/
  @media only screen and (max-width: 1023px) {
      .banTopWrap {
          background: #fff;
          z-index: -1;
      }

      .banTop {
        width: 93%;
        height: 90px;
    }

      .logoTop {
          display: none;
      }

      .logoMobTop {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 90px;
          width: 70%;
      }
      .topInfoWrap {
          display: none;
      }

      .logoTopSub {
          width: 70%;
      }

      .logoMobTop img {
          height: 70px;
      }

      .navTop {
          width: 30%;
      }
      .telMobTop,
      .navTop {
      	width: 70px;
      	display: flex;
      	align-items: center;
      	justify-content: center;
      }
      .telMobTop img {
      	height: 47px;
      	margin-top: 13px;
      }

      header {
          height: 90px;
      }

      .smobitrigger,
      .mnuclose {
          display: inline-block;
      }
      .smobitrigger {
          color: transparent;
          width: 30%;
      }

      .smobitrigger {
          background: url("../images/menuopen.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: 66px 66px;
          width: 60px;
          height: 60px;
      }

      .mnuclose {
          background: url('../images/menuclose.png');
          background-position: right top;
          background-repeat: no-repeat;
          background-size: 40px 40px;
          color: transparent;
          height: 40px;
          margin: 0 0 10px 0;
          text-align: right;
          display: inline-block;
          width: 100% !important;
      }
      .mobimenu {
          padding: 0;
          margin: 0px;
          width: 17.9375em;
          position: fixed;
          height: 100% !important;
          top: 0px;
          left: -27.625em;
      }

      .mnuopn {
          left: 0px !important;
      }

      .ovrActv {
          position: fixed;
          background: rgba(0, 0, 0, 0.79);
          width: 100%;
          height: 100%;
          z-index: 9998;
          -webkit-transition: 0.5s;
          -moz-transition: 0.5s;
          -ms-transition: 0.5s;
          -o-transition: 0.5s;
          transition: 0.5s;
      }

      .menu ul {
          padding: 30px 20px 10px 20px;
          overflow-y: auto;
          margin: 0 auto;
      }

      .menu ul li.mlinks,
      .menu ul li.mmlinks {
          text-align: left;
          /*width: 100%;*/
          display: block;
          height: 50px;
      }

      .menu ul li.mlinks a,
      .menu ul li.mmlinks a {
          font-size: 18px;
          line-height: 50px;
          text-transform: uppercase;
          padding: 20px 0;
          /*width: 100%;*/
          /*display: inline-block;*/
          /*height: 50px;*/
          text-align: left;
          color: #474749;
      }

      .mlinks a {
          padding: 20px 0;
      }

      .bannerbg .menu ul li.mlinks a,
      .bannerbgAds .menu ul li.mlinks a {
          font-size: 18px;
          line-height: 50px;
          text-transform: uppercase;
          width: 100%;
          display: inline-block;
          height: 50px;
          text-align: left;
          color: #474749;
      }

      .bannerbg .menu ul li.mlinks a:hover,
      .bannerbgAds .menu ul li.mlinks a:hover {
          color: #259cce;
      }

      .menu ul li.mlinks1 {
          display: block;
          font-size: 19px;
          font-weight: 700;
          height: 35px;
          margin-top: 30px;
          text-align: left;
      }

      .menu ul li.mlinks2 {
          text-align: left;
          /*width: 100%;*/
          display: block;
          height: 50px;
      }

      .menu ul li.mlinks2 a {
          font-size: 18px;
          font-weight: 500;
          line-height: 50px;
          text-transform: uppercase;
          text-align: center;
          padding: 20px 0;
          transition: all 0.3s ease;
      }

      .menu ul li.mlinks2 a:hover {
          color: #259cce;
      }

      .menu ul li.mlogo {
          margin: 20px auto 0 auto;
          height: auto;
          display: inline-block;
          width: 100%;
          text-align: left;
      }

      .menu ul li.mlogo img {
          width: 260px;
          margin: 0 0 30px 0;
      }

      .menu ul li.mphone {
          display: block;
          text-align: left;
          width: 100%;
          margin: 0 auto;
          line-height: 50px;
          height: 50px;
      }

      .menu ul li.mphone a {
          font-size: 32px;
      }

      .menu ul li.maddress {
          display: block;
          text-align: left;
          font-size: 18px;
          text-transform: capitalize;
          margin: 0 auto;
          width: 100%;
          line-height: 1.1;
          padding-top: 13px;
      }

      .menu ul li.maddress span {
          display: block;
      }

      .menu ul li.mhours {
          display: block;
          font-size: 18px;
          text-transform: uppercase;
          margin: 10px auto 40px;
          width: 100%;
          text-align: left;
      }

      .menu ul li.msocial,
      .menu ul li.mobSocial {
          width: 90%;
          margin: 30px 0 100px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
      }
      .menu ul li.mobSocial img{
        margin-right: 8px;
          max-width: 45px;
      }
      .menu ul li.msocial a {
          display: inline-block;
          margin: 0 10px 10px;
      }

      .menu ul li.msocial img {
          width: 42px;
          filter: invert(1);
      }
  /*
      .mobimenu {
          padding: 0;
          margin: 0px;
          width: 17.9375em;
          position: fixed;
          height: calc(100% - 62px) !important;
          top: 62px;
          background-color: #fff;
          left: 0;
          opacity: 0;
          visibility: hidden;
          transform: translateX(-100%);
          transition: all 0.5s ease-in-out;
          z-index: 101;
      }

      .mobimenu-overlay {
          position: fixed;
          top: 62px;
          left: 0;
          width: 100vw;
          height: calc(100vh - 62px);
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease-in-out;
      }

      .mobimenu-overlay.is-active {
          opacity: 1;
          visibility: visible;
      }

      .mobimenu.is-active {
          opacity: 1;
          visibility: visible;
          transform: translateX(0);
      }

      .mobimenu1 {
          padding: 0;
          margin: 0px;
          width: 17.9375em;
          position: fixed;
          height: 100% !important;
          top: 0px;
          left: -24.625em;
      }

      .mnuopn {
          left: 0px !important;
      }

      .ovrActv {
          position: fixed;
          background: rgba(0, 0, 0, 0.79);
          width: 100%;
          height: 100%;
          z-index: 100;
          -webkit-transition: 0.5s;
          -moz-transition: 0.5s;
          -ms-transition: 0.5s;
          -o-transition: 0.5s;
          transition: 0.5s;
      }
      */
  }
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .banTop {
  	width: 95%;
  }
  .logoMobTop {
    width: calc(100% - 150px);
  }
  .telMobTop{
    width: 90px;
  }
}
  @media only screen and (max-width: 767px) {

      .pageSub,
      .pageSize {
          width: 90%;
      }

      .pageTit {
          width: 100%;
      }

      .bannerbg {
          background: none;
          height: auto;
      }
      .logoMobTop {
      	width: calc(100% - 140px);
      }
  }

/*=======================================================
                       BANNER SECTION
=========================================================*/
.banSliderNew{
  margin: 160px 0 0;
}
.bannerLayerMob {
  display: none;
}
.belBan {
  margin: 30px auto;
  width: 100%;
  overflow: hidden;
}
.belBan h1 {
  text-align: center;
  font-size: 3em;
  font-weight: bold;
  text-transform: capitalize;
  padding: 20px 0;
}
.belBan p {
  width: 70%;
  font-size: 2em;
  margin: 0 auto;
  text-align: center;
  padding-top: 20px;
  display: block;
}
.bannerLayer,
.bannerP {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.colBan {
  background: url('../images/banner.jpg') center center no-repeat;
}
.bannerWrap {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
    width: 100%;
}
.bannL,
.bannR {
  width: 50%;
  float: left;
  overflow: hidden;
}
.bannL p {
  margin: 300px auto 60px auto;
  text-align: center;
  font-size: 4em;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 2px 1px #000;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .banSliderNew{
    margin: 128px 0 0;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .banSliderNew{
    margin: 127px 0 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .banSliderNew{
    margin: 0 0 60px;
  }
}
@media only screen and (max-width: 767px) {
  .banSliderNew{
    margin: 0 0 0;
  }
  .banSliderNew .newSize{
    width: 100%;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .bannerLayer {
      display: none;
  }
  .bannerLayerMob {
      display: block;
  }
.sliderWrap {
  width: 100%;
}
.bannerWrap {
  width: 100%;
}
}
@media only screen and (max-width: 479px) {
  .bannerLayer {
      display: none;
  }
  .bannerLayerMob {
      display: block;
  }
.sliderWrap {
  width: 100%;
}
.bannerWrap {
  width: 100%;
}
.belBan h1 {
  font-size: 1.6em;
  padding: 10px 20px 0 20px;
}
.bannL p {
  margin: 0 auto;
  font-size: 1.4em;
  padding: 20px 0;
}
.bannL,
.bannR {
  width: 100%;
  float: none;
}
}

/*========================================================
    Google Five Star Reviews section Index
=========================================================*/
.fiveS{
  background: var(--blue);
  border-bottom: 1px solid #ccc;
  color: var(--white);
  padding: 70px 0;
}
.fiveSwrap{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.fiveSone p{
  color: var(--white);
  font-family: proximaNova-Bold, arial, sans-serif;
  font-size: 110px;
  font-weight: 700;
  line-height: 0.7;
}
.fiveSone p span{
  color: var(--white);
  text-shadow: -2px -2px 0 var(--white), 2px -2px 0 var(--white), -2px 2px 0 var(--white), 2px 2px 0 var(--white);
}
.fiveStwo{
  margin: 0 70px;
}
.fiveStwo p{
  font-family: axi-regular, arial, sans-serif;
  font-size: 38px;
  line-height: 1.1;
  text-transform: uppercase;
}
.fiveStwo p span{
  display: block;
}
.fiveStwo img{
  width: 225px;
  vertical-align: sub;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .fiveStwo{
    margin: 0 60px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .fiveSone p {
  	font-size: 90px;
  }
  .fiveStwo{
    margin: 0 60px;
  }
  .fiveStwo p {
  	font-size: 32px;
  }
  .fiveStwo img {
  	width: 190px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .fiveS {
  	padding: 50px 0;
  }
  .fiveSone p {
  	font-size: 76px;
  }
  .fiveStwo{
    margin: 0 50px;
  }
  .fiveStwo p {
  	font-size: 26px;
  }
  .fiveStwo img {
  	width: 150px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .fiveS {
  	padding: 60px 0;
    margin: 0;
  }
  .fiveSwrap{
    flex-direction: column;
  }
  .fiveSone p {
  	font-size: 96px;
  }
  .fiveStwo{
    margin: 40px 50px;
  }
  .fiveStwo p {
  	font-size: 38px;
  }
  .fiveStwo img {
  	width: 190px;
  }
}
@media only screen and (max-width: 767px) {
  .fiveS {
  	padding: 60px 0;
    border-top: 1px solid #ccc;
    margin: 0 0 0;
  }
  .fiveSwrap{
    flex-direction: column;
  }
  .fiveSone p {
  	font-size: 110px;
  }
  .fiveStwo{
    margin: 40px 0;
  }
  .fiveStwo p {
  	font-size: 32px;
  }
  .fiveStwo img {
  	width: 160px;
  }
}

/*========================================================
   Privacy Policy
=========================================================*/
.privacySection {
    padding: 162px 0 0;
}
.privacybg {
    padding-top: 90px;
}
.privacyWrap {
    width: 70%;
    margin: 70px auto;
}
.privacyWrap h3,
.privacyWrap h4 {
    text-transform: capitalize;
    font-size: 36px;
    text-align: left;

}
.privacyWrap h3 {
    font-size: 36px;
}
.privacyWrap h4 {
    font-size: 28px;
}
.privacyWrap p {
    padding: 30px 0;
    line-height: 1.5;
}
.privacybg h1 {
    margin-bottom: 20px;
}
.privacyp {
    width: 70%;
    margin: 0 auto;
}
.privacyWrap ul {
    padding-left: 20px;
}
.privacyWrap ul li {
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 15px;
}
.privacylistbottom {
    padding-bottom: 30px;
}
.privacylisttop {
    padding-top: 30px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
    .privacyWrap,
    .privacyp {
        width: 85%;
    }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
   .privacyWrap,
    .privacyp {
        width: 100%;
    }
    .privacyWrap h3 {
        font-size: 28px;
    }
    .privacyWrap h4 {
        font-size: 24px;
    }
    .privacySection {
        padding-top: 130px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
    .privacyWrap,
    .privacyp {
        width: 100%;
    }
    .privacySection {
        padding-top: 130px;
    }
    .privacybg {
        padding-top: 70px;
    }
    .privacyWrap h3 {
        font-size: 26px;
    }
    .privacyWrap h4 {
        font-size: 21px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .privacyWrap,
    .privacyp {
        width: 100%;
    }
    .privacySection {
        padding-top: 0;
    }
    .privacybg {
        padding-top: 70px;
    }
    .privacyWrap h3 {
        font-size: 26px;
    }
    .privacyWrap h4 {
        font-size: 21px;
    }
    .privacyWrap {
        margin: 50px auto;
    }
}
@media only screen and (max-width: 767px) {
   .privacyWrap,
    .privacyp {
        width: 100%;
    }
    .privacySection {
        padding-top: 0;
    }
    .privacybg {
        padding-top: 35px;
    }
    .privacyWrap h3 {
        font-size: 21px;
    }
    .privacyWrap h4 {
        font-size: 18px;
    }
    .privacyWrap {
        margin: 35px auto;
    }
    .privacyWrap p {
        padding: 20px 0;
    }
}

/*========================================================
    Discount discoSec new index section
=========================================================*/
.discoSec {
  padding: 50px 0 80px;
  text-align: center;
}

.discoSec h2 {
  font-family: coolvetica, arial, sans-serif;
  font-size: 52px;
  margin-bottom: 80px;
  text-transform: capitalize;
}

.discoSecWrap {
  padding: 0 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.discoBox {
  border: 1px solid #c4c1c1;
  width: 26%;
  position: relative;
  padding: 0 0 30px 0;
}

.discoBox img {
  display: block;
  width: 100%;
  height: auto;
}

.discoPerc {
  background: var(--main-red);
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 60px;
  top: 42px;
  border-radius: 50%;
}

.discoPerc p {
  color: #fff;
  font-family: coolvetica, arial, sans-serif;
  font-size: 40px;
}

.discoText {
  padding: 30px 10px 0;
}

.discoText p span {
  font-family: coolvetica, arial, sans-serif;
  display: block;
  font-weight: 700;
  margin: 0 0 10px;
}

.discoText p {
  font-size: 21px;
  line-height: 1.4;
  min-height: 127px;
}

.discoArea {
  font-family: coolvetica, arial, sans-serif;
  color: var(--main-red);
  font-size: 32px;
  margin: 20px 0 0;
}

.discoBtnPlace {
  margin: 30px 0 0;
}

@media only screen and (min-width: 2560px){
  .discoSec {
    padding: 50px 0 90px;
    text-align: center;
  }
  .discoSec h2 {
    margin-bottom: 100px;
    font-size: 90px;
  }
  .discoSecWrap{
    width: 1940px;
    margin: 0 auto;
    padding: 0 0;
  }
  .discoBox {
  	padding: 0 0 40px 0;
  }
  .discoText p {
  	font-size: 30px;
  	line-height: 1.4;
  	min-height: 127px;
  }
  .discoText p span{
    font-size: 36px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .discoText p {
  	font-size: 24px;
    line-height: 1.3;
  }
  .discoText p span{
    font-size: 26px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .discoSec h2 {
    margin-bottom: 60px;
    font-size: 36px;
  }

  .discoSecWrap {
    padding: 0 0;
  }

  .discoBox {
    width: 30%;
  }

  .discoText p span {
    font-size: 21px;
  }

  .discoText p {
    font-size: 18px;
  }

  .discoArea {
    font-size: 28px;
  }

  .discoBtnPlace {
    margin: 20px 0 0;
  }

  .discoBtn {
    padding: 15px 25px;
    font-size: 18px;
  }

  .discoPerc {
    width: 70px;
    height: 70px;
    left: 30px;
    top: 22px;
  }

  .discoPerc p {
    padding: 15px 25px;
    margin: 0;
    font-size: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .discoSec {
    padding: 30px 0 60px;
  }

  .discoSecWrap {
    padding: 0 0;
  }

  .discoSec h2 {
    margin-bottom: 60px;
    font-size: 36px;
  }

  .discoBox {
    width: 30%;
  }

  .discoText p span {
    font-size: 21px;
  }

  .discoText p {
    font-size: 18px;
    min-height: 140px;
  }

  .discoArea {
    font-size: 28px;
  }

  .discoBtnPlace {
    margin: 20px 0 0;
  }

  .discoBtn {
    padding: 15px 25px;
    font-size: 18px;
  }

  .discoPerc {
    width: 70px;
    height: 70px;
    left: 30px;
    top: 22px;
  }

  .discoPerc p {
    padding: 15px 25px;
    margin: 0;
    font-size: 30px;
  }
}

@media only screen and (max-width: 767px) {
  .discoSec {
    padding: 50px 0;
  }

  .discoSec h2 {
    font-size: 36px;
    margin-bottom: 40px;
  }

  .discoSecWrap {
    max-width: 337px;
    margin: 0 auto;
    padding: 0 0;
  }

  .discoBox {
    width: 100%;
    margin-bottom: 60px;
  }

  .discoBox:last-child {
    margin-bottom: 0;
  }

  .discoText p {
    min-height: auto;
  }
}

/*========================================================
    Services page
=========================================================*/
.uniTitle h1 {
  color: var(--top-ban-h1);
  font-family: coolvetica, arial, sans-serif;
  font-size: 84px;
  font-weight: 700;
  text-transform: capitalize;
  margin: 80px 0 100px;
  text-align: center;
}

.uniTitle h1 span {
  display: block;
}



.nServiPage {
  background-image: url(../images/indexnew/bg-reviews-section-right-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  padding: 0 0 60px;
}

.nServiWrap {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
}

.nServiBox {
  width: 28%;
  margin-bottom: 80px;
}

.nServiBox img {
  width: 140px;
}

.nServiBox p span {
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.nServiBox p {
  font-size: 21px;
  line-height: 1.4;
  margin: 20px 0 40px;
  min-height: 230px;
}

@media only screen and (min-width: 2560px){
  .nServiPage {
  	padding: 0 0 90px;
  }
  .nServiWrap {
  	max-width: 1600px;
  }
  .uniTitle h1 {
  	font-size: 120px;
  }
  .nServiBox {
  	margin-bottom: 140px;
  }
  .nServiBox img {
    width: 199px;
  }
  .nServiBox p {
  	font-size: 30px;
  	line-height: 1.4;
  	margin: 20px 0 40px;
  	min-height: 390px;
  }
  .nServiBox p span {
  	font-size: 36px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .nServiBox p {
    font-size: 24px;
    line-height: 1.3;
    min-height: 300px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .nServiPage {
  	background-size: 100% auto;
  }
  .uniTitle h1 {
    font-size: 44px;
  }
  .nServiBox p {
    font-size: 18px;
    min-height: 230px;
  }
}

@media only screen and (min-width: 1024px) {

  .nServiBox:nth-child(4),
  .nServiBox:nth-child(5),
  .nServiBox:nth-child(6) {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .uniTitle h1 {
    font-size: 44px;
    margin: 40px 0 60px;
  }

  .nServiWrap {
    width: 90%;
  }

  .nServiBox {
    width: 46%;
  }

  .nServiBox p {
    min-height: 288px;
  }
}

@media only screen and (max-width: 767px) {
  .nServiPage {
    background-size: 100% 340px;
    padding: 0 0 60px;
  }

  .uniTitle h1 {
    font-size: 36px;
    margin: 40px 0 20px;
  }

  .nServiWrap {
    width: 337px;
    margin: 0 auto;
  }

  .nServiBox {
    width: 100%;
  }

  .nServiBox p {
    min-height: auto;
  }
}

@media only screen and (max-width: 479px) {
  .nServiWrap {
    width: 100%;
  }
}

/*========================================================
    servIndiv
=========================================================*/
.stormSecSub {
  background-position: center bottom;
}

.stormRightTopSub p {
  margin-bottom: 20px;
}

.stormBtnsPlaceSub {
  justify-content: center;
}

.aspSec {
  background: var(--gray-bg);
  padding: 20px 0;
}

.nServiBoxSub {
  width: 28%;
  margin-bottom: 80px;
}

.nServiBoxSub img {
  width: 140px;
}

.nServiBoxSub p span {
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  text-transform: capitalize;
}

.nServiBoxSub p {
  font-size: 19px;
  line-height: 1.6;
  margin: 20px 0 40px;
  min-height: 369.6px;
  text-align: justify;
}
.nServiBtnPlaceSub .lrBtn{
  background: var(--blue);
}
@media only screen and (min-width: 2560px){
  .nServiBoxSub img {
    width: 165px;
  }
  .nServiBoxSub p span {
  	font-size: 26px;
  }
  .nServiBoxSub p {
    min-height: 452px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .nServiBoxSub p span {
  	font-size: 26px;
  }
  .nServiBoxSub p {
    font-size: 19px;
    line-height: 1.3;
    min-height: 369.6px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .nServiBoxSub {
  	margin-bottom: 0px;
  }
  .nServiBoxSub p {
  	font-size: 18px;
  	min-height: 414px;
  }
  .nServiBoxSub p span {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .nServiBoxSub p {
    font-size: 18px;
    min-height: 509px;
  }
  .nServiBoxSub p span {
  	font-size: 18px;
  }
  .nServiBoxSub {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 1023px) {
  .nServiBoxSub p {
    min-height: 0;
    font-size: 18px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .nServiBoxSub {
    width: 45%;
  }

  .nServiBoxSub:last-child {
    margin-bottom: 0;
  }

  .nServiBoxSub p,
  .nServiBoxSub p span {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .nServiBoxSub {
    width: 100%;
  }
  .nServiBoxSub p span {
  	font-size: 22px;
  }
  .aspSec {
    padding-top: 100px;
  }
  .nServiBtnPlaceSub .lrBtn{
    min-width: 204px;
  }
}

/*========================================================
    Shingles Selection New Page
=========================================================*/
.shingSecWrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.shingSecLeft,
.shingSecRight {
  width: 48%;
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .shingSec {
  	background-size: 100% auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {

  .shingSecLeft,
  .shingSecRight {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {

  .shingSecLeft,
  .shingSecRight {
    width: 100%;
  }

  .shingSec {
    background-size: 100% 340px;
  }
}

/*========================================================
    Shingles Content Page
=========================================================*/
.shinglesBan {
  display: flex;
  flex-direction: column;
}

.shinglesBan1 {
  font-size: 22px;
  text-transform: none;
  font-weight: 300;
  letter-spacing: normal;
  display: block;
}

.shinglesBan2 {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
  position: relative;
}

.shinglesBan3 {
  text-transform: uppercase;
  font-size: 21px;
}

.shinglesTit {
  margin: 0 auto 100px;
}

.shinglesTit h2 {
  font-size: 38px;
  line-height: 1.3;
  text-align: left;
  padding: 15px 0 20px;
  display: block;
  color: var(--main-red);
  text-transform: capitalize;
  font-weight: 700;
}

.shinglesSec {
  width: 100%;
  margin: 0 auto 50px;
  overflow: hidden;
  padding-bottom: 30px;
}

.shiglesAbove {
  width: 100%;
}

.shinglesTop {
  font-size: 24px;
  font-weight: 300;
}

.shinglesTop span {
  font-weight: 700;
}

.shinglesTop sup {
  font-size: 14px;
}

.shinglesAboveLeft h3 {
  text-align: left;
  text-transform: uppercase;
  font-weight: 900;
}

.shinglesIconsWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 660px;
  margin: 35px 0;
}

.shinglesIcons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shinglesIcons img {
  width: 60px;
  margin: 0 0 10px;
}

.shinglesIcons p {
  text-align: center;
  font-size: 16px;
  line-height: 1.3;
}

.shiglesThumbsWrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.shinglesThumbs {
  width: 24.5%;
  margin: 0 0 20px;

}

.shinglesThumbs img {
  width: 145px;
}

.lastshinglesSec {
  border-bottom: none;
}

.shinglesThumbs p {
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
  text-align: left;
}
@media only screen and (min-width: 2560px){
  .shinglesTit h2 {
  	font-size: 38px;
  }
  .shinglesBan1 {
  	font-size: 22px;
  }
  .shinglesBan3 {
  	font-size: 25px;
  }
  .shiglesAfter{
    font-size: 21px;
  }
  .shinglesIconsWrap {
  	max-width: 615px;
  }
  .shinglesIcons img {
    width: 60px;
  }
  .shinglesIcons p {
    font-size: 14px;
  }
  .shiglesThumbsWrap {
  	width: 100%;
  }
  .shinglesThumbs p {
  	font-size: 15px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .shinglesIcons p {
  	font-size: 14px;
  }
  .shinglesIconsWrap {
  	max-width: 615px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .shinglesThumbs img {
  	width: 138px;
  }
  .shinglesThumbs p {
  	font-size: 15px;
  }
  .shinglesIconsWrap {
  	max-width: 595px;
  }
  .shinglesIcons img {
  	width: 52px;
  }
  .shinglesIcons p {
  	font-size: 12px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .shinglesThumbs {
    width: 25%;
  }

  .shinglesThumbs img {
    width: 105px;
  }

  .shinglesThumbs p {
    font-size: 12px;
  }

  .lastshinglesSec {
    margin-bottom: 20px;
  }
  .shinglesBan2 {
    font-size: 28px;
  }

  .shinglesTit h2 {
    font-size: 29px;
  }

  .shinglesSec {
    margin-bottom: 35px;
  }

  .shiglesAfter {
    font-size: 16px;
  }

  .shinglesIcons p {
    font-size: 11px;
  }
  .shinglesIcons img {
  	width: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .shinglesTit {
    margin-bottom: 35px;
  }

  .shinglesAboveLeft {
    padding-bottom: 15px;
  }

  .shinglesThumbs {
    width: 25%;
  }

  .shinglesSec {
    margin-bottom: 0;
  }
  .shinglesTit h2 {
  	font-size: 30px;
  }
  .shinglesBan2 {
  	font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .shinglesTit {
    margin-bottom: 35px;
  }

  .shinglesAboveLeft {
    padding: 20px 0 15px;
  }

  .shinglesThumbs {
    width: 50%;
    text-align: center;
  }

  .shinglesThumbs p {
    text-align: center;
  }

  .shinglesSec {
    margin-bottom: 0;
  }

  .shinglesIcons {
    width: 24%;
  }

  .shinglesIconsWrap {
    flex-wrap: wrap;
  }

  .shinglesThumbs img {
    margin: 0 auto;
  }
  .shinglesTit p {
    font-size: 18px;
  }
  .shinglesTit h2 {
    font-size: 26px;
  }

  .shinglesBan2 {
    font-size: 26px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .shiglesThumbsWrap {
    width: 85%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 479px) {
  .shinglesIcons {
    width: 50%;
    margin-bottom: 30px;
  }

  .shinglesThumbs {
    width: 100%;
  }

  .shinglesThumbs img {
    width: 180px;
  }
}

/*========================================================
    Roof Warranty Page
=========================================================*/
.warrantyBox {
  width: 100%;
  margin-bottom: 35px;
}

.warrantyBox h2 {
  font-size: 30px;
  color: var(--main-red);
  text-align: left;
  padding-bottom: 20px;
}

.warrantyBox h3 {
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 15px;
}

.warrantyList ul li {
  background: url('../images/dot.png') no-repeat;
  background-position: left top 18px;
  background-size: 14px 14px;
  padding: 6px 0 6px 24px;
  font-size: 21px;
  text-align: left;
  text-transform: capitalize;
  font-weight: 500;
}

.warrantyList {
  max-width: 650px;
  padding-bottom: 20px;
}
@media only screen and (min-width: 2560px){
  .warrantyBox h2 {
  	font-size: 32px;
  }
  .warrantyList ul li {
  	font-size: 19px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .warrantyList ul li {
  	font-size: 19px;
    line-height: 1.4;
    background-position: left top 14px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .warrantyBox h2 {
  	font-size: 24px;
  }
  .warrantyList ul li {
  	background-position: left top 14px;
  	background-size: 12px 12px;
  	font-size: 18px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .warrantyBox h2 {
    font-size: 30px;
  }

  .warrantyBox h3 {
    font-size: 21px;
  }

  .warrantyList ul li {
    font-size: 18px;
    background-position: left top 14px;
    background-size: 11px 11px;
    padding: 6px 0 6px 21px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .warrantyBox h2 {
    font-size: 24px;
  }

  .warrantyBox h3 {
    font-size: 21px;
  }

  .warrantyList ul li {
    font-size: 19px;
    background-position: left top 14px;
    background-size: 11px 11px;
    padding: 6px 0 6px 21px;
  }
}
@media only screen and (max-width: 767px) {
  .warrantyBox h2 {
    font-size: 24px;
  }

  .warrantyBox h3 {
    font-size: 21px;
  }

  .warrantyList ul li {
    font-size: 18px;
    background-position: left top 14px;
    background-size: 11px 11px;
    padding: 6px 0 6px 21px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {}

/*========================================================
    Roof Warranty New Page
=========================================================*/
.roofWarSec {
  background-image: url(../images/indexnew/bg-reviews-section-right-min.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  padding: 0 0 60px;
}

.roofWarSecWrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 60px 0 0;
}

.roofWarSecLeft,
.roofWarSecRight {
  width: 48%;
}

.roofWarSec h3 {
  font-size: 24px;
  text-align: left;
  padding: 0 0 20px;
  display: block;
  color: var(--main-blue);
  text-transform: capitalize;
  font-weight: 700;
  line-height: 1.3;
}

@media only screen and (min-width: 2560px){
  .roofWarSec h3 {
    font-size: 34px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .roofWarSec h3 {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .roofWarSecWrap {
  	padding: 40px 0 0;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .roofWarSec {
    background-size: 100% auto;
  }
  .roofWarSecWrap {
    padding: 20px 0 0;
  }
  .warrantyBox h2 {
  	font-size: 22px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {

  .roofWarSecLeft,
  .roofWarSecRight {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {

  .roofWarSecLeft,
  .roofWarSecRight {
    width: 100%;
  }

  .roofWarSec {
    background-size: 100% 340px;
  }
}

/*========================================================
    Roof Total Protection page
=========================================================*/
.asphaltWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

.asphaltBox {
  width: 32%;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 21px 0px rgb(0, 0, 0, .09);
  text-align: center;
  background: #fff;
}


.asphaltBox img {
  width: 100%;
  display: block;
}

.asphaltBox h3 {
  font-size: 29px;
  color: var(--top-ban-h1);
  padding: 30px 30px 20px;
  text-transform: capitalize;
}

.asphaltBox p {
  font-size: 21px;
  font-weight: 500;
  padding: 0 30px 40px;
}

.asphaltBtnWrap {
  margin-top: auto;
  border-top: 1px solid #e8e8e8;
  padding: 40px 0;
}

.asphaltBtnWrap a {
  display: inline-block;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
}

.asphaltBtnWrap a::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/index/red-arrow.png) no-repeat;
  background-size: 20px 20px;
  top: 0;
  right: -30px;
  position: absolute;
}
@media only screen and (min-width: 2560px){
  .asphaltBox p {
  	font-size: 19px;
  }
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .asphaltBox h3 {
  	font-size: 29px;
  }
  .asphaltBox p {
  	font-size: 19px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .asphaltbg {
    padding-top: 35px;
  }
  .asphaltBox h3 {
    font-size: 28px;
  }
  .asphaltBox p{
    font-size: 18px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .asphaltbg {
    padding-top: 20px;
  }
  .asphaltBox h3 {
    font-size: 22px;
  }
  .asphaltBox p {
    font-size: 16px;
  }
  .asphaltBtnWrap {
    padding: 20px 0;
  }
  .asphaltBtnWrap a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .asphaltbg {
    padding: 0 0 50px;
  }
  .asphaltBox {
    width: 47%;
    margin-bottom: 35px;
  }
  .asphaltBox h3 {
    font-size: 24px;
  }
  .asphaltBox p {
    font-size: 18px;
  }
  .asphaltBtnWrap a {
    font-size: 14px;
  }
  .asphaltBtnWrap {
    padding: 20px 0;
  }
}
@media only screen and (max-width: 767px) {
  .asphaltbg {
    padding: 0 0 50px;
  }
  .asphaltBox {
    width: 432px;
    margin: 0 auto 35px;
  }
  .asphaltBox h3 {
    font-size: 24px;
    padding: 0 15px 20px;
  }
  .asphaltBox p {
    font-size: 18px;
  }
  .asphaltBtnWrap a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 479px) {
  .asphaltCont {
    padding: 20px 15px;
  }
  .asphaltBox p {
    padding: 0 0 20px;
  }
  .asphaltBtnWrap {
    padding: 20px 0;
  }
}

/*========================================================
   HIDDEN
=========================================================*/
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
  }