/* Color Theme Swatches in Hex */
.maincontent{
  max-width:100%;
padding:0;
margin:0;
}

svg{
   overflow:visible;
}
:root{
    --sm-svg-height: 70px;
    --sm-svg-width: 70px;
    --lg-svg-height:150px;
    --lg-svg-width: 150px;
}


html, body{
   font-size:18px;
}

h1{
   font-family: 'Anton', sans-serif;
   font-size:clamp(40px, 5vw, 60px);
} 
h2{
   font-size:clamp(40px, 3vw, 60px);
   font-family: 'Anton', sans-serif;
   letter-spacing: 2.9px;
}
h3, h4{
   font-family: 'Anton', sans-serif;
}
h5, h6{
   font-family: 'Montserrat', sans-serif;
}
p{
   font-family: 'Montserrat', sans-serif;
   font-size:1rem;
   line-height:24px;
   letter-spacing:1.3px;
}
h4{
   margin:10px 0;
}
.tb-20{
   margin:20px 0;
}
.tb-60{
   margin:60px 0;
}
.heading{
   font-weight:900;
   /* letter-spacing:2.5px; */
   text-transform:uppercase;
}
.heading-sm{
   margin: 8px 0;
   font-weight:900;
   letter-spacing:2px;
   text-transform:uppercase;
}
.bold{
   font-weight:900;
   letter-spacing:2.5px;
}
.ital{
   font-style: italic;
}

.shadow{
   filter:drop-shadow(5px,5px,20px, rgba(215,215,215.9 ));
}
.upper{
   text-transform: uppercase;
}
.right{
   text-align:right;
}
.underline{
   width:30%; 
   height:1px;
   margin:10px auto 30px; 
   border:1px solid #fff;
   background-color:#fff;
}
.underline-drk{
   width:30%; 
   height:1px;
   margin:10px auto 30px; 
   border:1px solid #000;
   background-color:#000;
}
img{
   width:100%;
   filter:drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}
.myButton {
   background-color: rgba(22, 88, 115, 1);
   box-shadow: 0px 6px 10px -7px #000;
   border:1px solid rgba(204, 217, 156, 1);
   border-radius: 3px;
   display: inline;
   cursor: pointer;
   color: rgba(250,250,250, 1);
   font-family: 'Montserrat', sans-serif;
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 1.2px;
   padding: 13px 32px;
   text-decoration: none;
   max-width:40%;
   margin:20px auto 0;
   z-index:4;
 }
 .myButton:hover {
   box-shadow: 0px 10px 14px -7px #276873;
   background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
   background-color: #408c99;
   color: #F3EFE6;
   transform:scaleX(0.9);
 }
 .myButton:active {
   position: relative;
   top: 1px;
 }

 .section1{
    background-image: linear-gradient(rgba(255,255,255,0.9)0%, rgba(255,255,255,0.9)100%), url("/imageserver/Reusable/drywall-commercial21/roof4.png");
    background-repeat: no-repeat;
    background-size: cover;
     padding:5%;
     padding:5%;
   }
   .section1 h4{
      padding:25px 0;
   }
   .section1 .box-inner{
      margin-top:30px;
   }
   .section2{
      background-image: linear-gradient(rgba(90,90,90,0.8)0%, rgba(90,90,90, 0.8)100%), url("/imageserver/Reusable/drywall-commercial21/office-space-min.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      
      padding:5%;
      color:#fff;
 }
 .section2-inner{
    max-width:80vw;
    margin:0 auto;
    display:grid;
    text-align:center;
    justify-content: center;
   }
   .subHeading{
    padding:0 10%;
   }
   .round{
    margin:5%;
 }
 .services-list{
    margin-top:55px;
 }
 .service-list-item{
    margin:25px 0;
    max-width:675px;
   text-align:left;
 }
 .service-list-item h4{
    margin-left: 35px;
 }
 .service-list-item p{
    margin-left: 35px;
 }
 #roofSvg{
    height:75px;
    width:75px;
    fill:#fff;
    margin-top:12px;
    margin-left:12px;
   }
   #toolsSvg{
      height:100px;
      width:100px;
      margin-top:15px;
      fill:none;
   }
   #shieldSvg{
      height:100px;
      width:100px;
      margin-top:15px;
    fill:none;
    transition:.5s;
 }
 
 circle{
    stroke:#000;
    stroke-width:4px;
    -webkit-filter: url("#blur");
	filter: url("index.html#blur");
 }

 #shieldSvg:hover circle{
    transform:rotate(360deg);
    transition:2s;
    transform-origin: 100%;
 }
 #toolsSvg:hover circle{
    transform:rotateY(360deg);
    transition:2s;
    transform-origin:100%;
 }
 .circle:not(#roofSvg):hover{
    transform:rotateX(360deg);
    transition:2s;
    transform-origin:100%;
 }

 /* ========================= Section 3 ============== */

 .section3{
   background-image: linear-gradient(to bottom,rgba(255,255,255,1)0%, rgba(255,255,255, 0.8)100%), url("/imageserver/Reusable/drywall-commercial21/spekbg1.png");
   background-repeat: no-repeat;
   background-size: cover;
   padding:5%;
   margin:0 auto;

}
.section3-inner{
   text-align: center;
   max-width:1250px;
   margin:0 auto;
}

.section3 .box{
   position: relative;
   text-align:center;
   background:rgba(250,250,250,0.1);
   max-width:425px;
   min-height:450px;
   display:flex;
   flex-direction: column;
   justify-content: flex-start;
   padding:1em ;
   transition: .3s;
   margin:0 auto;
   -webkit-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.55); 
box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.55);
}
.boxSvg{
   border:2px solid #000;
   border-radius:50%;
   height:30%;
   width:32%;
   position: relative;
   display:flex;
   justify-content:center;
   align-items:center;
   margin:0 auto 15%;
}
.boxSvg img{
   max-width:75px;
}
.boxSvg::after{
   content:"";
   bottom:-35%;
   position: absolute;
   height:40px;
   width:2px;
   background:#000;
}
.boxSvg::before{
   content:"";
   bottom:-50%;
   position: absolute;
   border:1px solid #000;
   border-radius:50%;
   height:20px;
   width:20px;
}
.section3 .box:hover{
   background-color:#5d648c;
   transform:translateY(-10px) scale(.99);
   color:#fafafa;
   fill:#fafafa;
}
.section3 .boxes{
   max-width:90%;
   margin-top:5%;
   margin:5% auto 0;
   display:flex;
   gap:20px;
   justify-content: space-around;
   flex-wrap:wrap;
}
.section4{
   padding:5%;
   background-image:linear-gradient(to top, rgba(255,255,255,0.8)0%, rgba(255,255,255,0.8)100% ), url('/imageserver/Reusable/drywall-commercial21/spekbg2.png');
   background-size: 100%;
   background-repeat:no-repeat;
}
.steps-header{
   text-align: center;
   padding:0 5%;
}
.steps-grid{
   display:grid;
   grid-template-columns: 40% 55%;
   /* grid-template-rows: repeat(7, 1fr); */
   /* gap:5vw; */
}

.grid-right{
   grid-column: 2/3;
   grid-row: 1/2;
   margin-left:4vw;
}
.grid-right1{
   grid-column: 2/3;
   grid-row: 1/2;
}
.grid-right2{
   grid-column: 2/3;
   grid-row: 2/3;
}
.grid-right3{
   grid-column: 2/3;
   grid-row: 3/4;
}
.grid-right4{
   grid-column: 2/3;
   grid-row: 4/5;
}
.grid-right5{
   grid-column: 2/3;
   grid-row: 5/6;
}
.grid-right6{
   grid-column: 2/3;
   grid-row: 6/7;
}
.grid-right h5{
   margin-top:8px;
}
.grid-left-full{
   grid-column: 1/2;
   grid-row: 1/8;
   margin:30px 0 0;
}
.grid-left img{
   max-width:800px;
}
.grid-left1{
   grid-row:1/3;
   align-self:center;
}
.grid-left2{
   grid-row:3/4;
}
.grid-left3{
   grid-row: 4/6;
   align-self:flex-end;
}
.grid-left4{
   grid-row:6/7;
   align-self:flex-end;
}
.collage-single{
   display:none;
   text-align: center;
   margin:20px 0;
   max-width:400px;
}


@media screen and (max-width:1200px){
   .grid-left-full{
      display:none;
   }
  .collage-single{
     display:block;
  }
   .round{
      text-align:center;
      padding:0 15%;
   }
}



@media screen and (max-width:992px){
   .section2{
      text-align:center;
      margin:0 auto;
   }
   .round{
      text-align:center;
      padding:0 15%;
   }
   .steps-grid{
      grid-template-columns: 1fr;
      text-align: center;
   }
   .grid-right6{
      grid-column: 1/-1;
      grid-row:1/2;
   }
   .grid-right1{
      grid-column: 1/-1;
      grid-row:3/4;
   }
   .grid-right2{
      grid-column: 1/-1;
      grid-row:5/6;
   }
   .grid-right3{
      grid-column: 1/-1;
      grid-row:7/8;
   }
   .grid-right4{
      grid-column: 1/-1;
      grid-row:9/10;
   }
   .grid-right5{
      grid-column: 1/-1;
      grid-row:11/12;
   }
   .grid-left1{
      grid-column: 1/-1;
      grid-row:2/3;
   }
   .grid-left2{
      grid-column: 1/-1;
      grid-row:4/5;
   }
   .grid-left3{
      grid-column: 1/-1;
      grid-row:6/7;
   }
   .grid-left4{
      grid-column: 1/-1;
      grid-row:8/9;
   }

    .collage-single{
      
      justify-self: center;
   } 
   

}