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;
}
#main-wrapper{
  overflow:hidden;
}
img{
  width:100%;
}
h1{
  font-size:2.5rem;
}
p{
  font-weight:300;
}
.bold{
  font-weight:600;
  color:#6395AD;
}
.highlight{
  color:#6395AD;
  font-weight:600;
}
.title{
  position: relative;
  padding:20px 0;
}
.title::after{
  content:"";
  bottom:-10px;
  left:-5%;
  position: absolute;
  height:100%;
  width:100%;
  background-image:url('/imageserver/Reusable/design-build22/db-bg-blue.png');
  background-size:80%;
  background-repeat: no-repeat;
}
 #hero{
  background-image:url('/imageserver/Reusable/design-build22/hero-bg.png');
  background-size:100%;
  background-repeat:no-repeat;
 }
#hero-grid{
  display:grid;
  padding:0 5%;
  grid-template-columns: 1fr 1fr;
}
 #hero-img img{
   max-width:900px;
 }
 #hero-content{
   justify-self:center;
   padding:8% 0;
 }
 .sec1-container{
   padding:3% 5%;
   max-width:1800px;
   margin:0 auto;
 }
 .grid-6040{
   display:grid;
   grid-template-columns: 1fr .8fr;
   gap:30px;
 }
 .sec1-container{
   /* text-align:right; */
 }
 #meeting{
   filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
 }
 .sec2-container{
   padding:5% 8%;
   
 }
 .grid-5050{
   display:grid;
   grid-template-columns: 1fr 1fr;
 }
 #average{
   grid-row:1/2;
   grid-column: 2/3;
   align-self:center;
   position: relative;
   text-align: center;
 }
 #diagram{
  grid-row:1/2;
  grid-column: 1/2;
  position: relative;
  max-width:800px;
  place-self:center;
  filter:drop-shadow(3px 3px 3px rgba(0,0,0,0.3));
  z-index:10;
 }
 #average h2{
   line-height:4rem;
   position: relative;
   max-width:500px;
   z-index:5;
 }
 #average::after{
  content:"";
  position: absolute;
  background-color:#FAE0C0;
  height:140%;
  width:115%;
  top:-15%;
  left:-20%;
  transform:rotate(35deg) skew(-5deg);
 }
 #average::before{
  content:"";
  position: absolute;
  border:1px solid #6395AD;
  height:140%;
  width:115%;
  top:-15%;
  left:-20%;
  z-index:5;
  transform:rotate(25deg) skew(-5deg);
 }
  .section3{
    background-image: linear-gradient(rgba(255,255,255,.95) 0%, rgba(255,255,255,.95)100%), url('/imageserver/Reusable/design-build22/construction-site-silhouette.png');
    background-size:50%;
    background-position:80% 50%;
    background-repeat: no-repeat;
  }
  .sec3-container{
    padding:5% 8%;
  }
  .step-link{
    color:#6395AD;
    font-weight:400;
    margin-left:10px;
    cursor:pointer;
  }
  .sec4-container{
    padding:1% 8%;
    margin-bottom:200px;
  }
  .benefits-grid{
    display:grid;
    background-image:radial-gradient(ellipse at center, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.8) 49%, rgba(255,255,255,1) 100%), url('/imageserver/Reusable/design-build22/design-build2.png');
    background-repeat: no-repeat;
    background-size:cover;
    gap:20px;
    margin-top:50px;
  }
  .benefit-item{
    max-width:600px;
    position: relative;
  }
  .benefit-item::before{
    content:"";
    position: absolute;
    top:0;
    left:-5%;
    background-color:#FAE0C0;
    height:150px;
    width:150px;
    transform:rotate(-35deg);
    z-index:1;
  }
  .benefit-item::after{
    content:"";
    position: absolute;
    border:1px solid #6395AD;
    height:150px;
    width:150px;
    top:-5%;
    left:-5%;
    transform:rotate(25deg) skew(-5deg);
   }
  .benefit-item p{
    font-weight:400;
    position: relative;
    z-index:2;
  }
  .benefit-item h3{
    font-weight:500;
    position: relative;
    z-index:2;
  }
  #benefit1{
    grid-row:1/3;
    grid-column:4/7;
  }
  #benefit2{
    grid-row:3/6;
    grid-column:6/9;
    margin-top:25px;
  }
  #benefit3{
    grid-row:6/8;
    grid-column:5/9;
    justify-self: center;
    margin-top:35px;
  }
  #benefit4{
    grid-row:5/7;
    grid-column: 2/5;
    margin-top:50px;
    justify-self:flex-end;
  }
  #benefit5{
    grid-row:2/5;
    grid-column:1/5;
    margin-top:60px;
  }
  #benefit6{
    grid-row:7/10;
    grid-column:3/7;
    margin-top:50px;
  }

  @media screen and (max-width:992px) {
    body, html{
      font-size:14px;
    }
    #hero-grid{
      display:block;
      text-align: center;
    }
    #hero-img img{
      display:none;
    }
    .grid-6040{
      display:block;
    }
    #average h2{
      max-width:100%;
    }
    #average{
      margin-top:75px;
      padding:3% 5%;
    }
    #average::before{
      transform:rotate(0deg);
      left:0;
      width:100%;
    }
    #average::after{
      transform:rotate(0deg);
      left:0;
      width:100%;
    }
    #diagram{
      max-width:100%;
      z-index:10;
     }
     .benefits-grid{
       display:block;
     }
     #benefit2, #benefit4, #benefit6{
       margin:50px 0 0 100px;
     }
     #benefit1, #benefit3, #benefit5{
       margin:50px 0 0 0;
     }

  }