:root {
  --main-color: #e7eeef;
  --secondary-color: #806f5d;
}
.goBackArrow{
  display:none;
}
body,
html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size:18px;
    font-family: 'Montserrat', sans-serif;
}

.maincontent {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.maincontent_wrapper {
    padding-top: 0;
}

img {
    width: 100%;
}

h1{
  font-size:2.5rem;
}

p{
  font-size:18px;
}

.highlight{
  color: var(--secondary-color);
}
[class*='-container'] {
  padding: 2%;
}
.title{
  font-size:1.2rem;
  font-weight:700;
  display:block;
  margin-block:10px;
}

.hero{
  background-image: url('/imageserver/Reusable/home-water-mold-damage23/hero-min.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height:50vh;
  background-position: bottom;
}
.hero-container{
  height:100%;
  width:50%;
  padding:2%;
  float:right;
  text-align: center;
  clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 0% 50%);
  background-color:var(--main-color);
  color:var(--secondary-color);
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-container span{
  font-size:clamp(24px, 2.3vw, 60px);
}

#clip{
  /* position: absolute; */
  fill:#000;
}

.main-header{
  max-width:1200px;
  margin:0 auto;
  text-align: center;
}

.main-header span{
  font-size:1.3rem;
}

.steps{
  margin:40px auto;
  text-align: center;
}

.flex-group{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /* margin-block:20px; */
}

.iconbox{
  height:75px;
}

.iconbox img{
  max-width:75px;
}

.flex-item{
  width:250px;
  /* min-width:250px; */
}

.my-grid-left{
  display:grid;
  grid-template-columns: 40% 55%;
  gap:50px;
}

.my-grid-left .grid-content{
  grid-column: 2/3;
  grid-row:1/2;
  padding:2em 4em;
}
.grid-content p{
  max-width:800px;
}
.my-grid-left .grid-image{
  background-image: url('/imageserver/Reusable/home-water-mold-damage23/Commercial_Water_Page_Resize-min.png');
  background-size:cover;
  background-repeat: no-repeat;
  background-position: top;
  grid-column: 1/2;
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}

.section2{
  background-color: var(--main-color);
  padding-bottom:2em;
  overflow:hidden;
}

.water-faq{
  padding-top:1em;
  max-width:1400px;
  margin:0 auto;
}

.water-faq .flex-group{
  margin-top:20px;
  justify-content: center;
  padding-left:1em;
}

.water-faq .flex-item p{
  font-size:.8rem;
}

.water-faq .flex-item{
  position: relative;
  width:300px;
  margin:10px 40px;
}

.water-faq .flex-item:not(.divider-line)::before{
  position: absolute;
  content:"";
  background-image: url('/imageserver/Reusable/home-water-mold-damage23/list-item-circle.png');
  background-size: cover;
  background-position: center;
  height:40px;
  width:40px;
  top:0;
  left:-60px;
  /* padding-left:50px; */
}

.section3{
  overflow:hidden;
}

.my-grid-right{
  display:grid;
  grid-template-columns: 50% 50%;
  gap:50px;
}

.my-grid-right .grid-image{
  background-image: url('/imageserver/Reusable/home-water-mold-damage23/mold1-min.png');
  background-size: cover;
  grid-column: 2/3;
  clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 5% 100%, 0% 50%);
}

.my-grid-right .grid-content{
  grid-column: 1/2;
  grid-row:1/2;
  padding:2em 4em;
  place-self:center;
}

.my-grid-right .grid-content p{
  max-width:600px;
}

.sub-header{
  position: relative;
  display:inline-block;
}

.sub-header::after{
  content:"";
  position: absolute;
  bottom:5px;
  left:0;
  height:1px;
  width:50%;
  background-color:var(--secondary-color) ;
}

.cta-wrapper{
  margin-top:20px;
}

.cta{
  border:1px solid var(--secondary-color);
  padding:16px 24px;
  background-color:var(--secondary-color);
  color:var(--main-color);
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}

.cta:hover{
  box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
  color:#fff;
  text-decoration: none;
  transform:scale(.99);
  font-size:.98rem;
}

.section4{
  background-image:linear-gradient(rgba(231,238,239,0.9) 0%, rgba(231,238,239,0.9) 100%), url('/imageserver/Reusable/home-water-mold-damage23/farmhouse-wide-min.jpg');
  color:var(--secondary-color);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height:55vh;
  margin-top:2em;
  text-align: center;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.section4 p{
  max-width:1200px;
  margin:0 auto;
  font-size:1.1rem;
  min-height:65px;
}
.section4 h2{
  font-size:1.8rem;
}

@media screen and (max-width:992px) {
  .hero{
    background-position: center;
  }
.my-grid-left .grid-image {
    background-position: center;
    height: 34vh;
    clip-path: unset;
  }
  .hero-container{
    clip-path: polygon(0% 77%, 49% 68%, 100% 78%, 100% 100%, 0% 100%);
    width:100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .my-grid-left{
    display:block;
    text-align: center;
  }
  .my-grid-right{
    text-align: center;
    display:block;
  }
  .flex-group{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .flex-item{
    width:80%;
  }
.water-faq .flex-item{
    width:80%;
  }
  .divider-line{
    display:none;
  }
  .sub-header::after{
    width:100%;
  }
  .water-faq .flex-item:not(.divider-line)::before{
    height:20px;
    width:20px;
    left:-30px;
  }
  [class*='-wrapper'] {
    padding:2% 5%;
  }
.my-grid-right .grid-content{
    padding:2em;
  }
  .my-grid-left .grid-content{
    padding:2em;
  }
.main-header span{
    font-size:.9rem;
  }
.title.highlight{
    min-height:0;
  }
}