.maincontent{
  max-width:100%;
}

 h2, h3, p, li {
    font-family: 'Josefin Sans', sans-serif;
    font-weight:bold;

  }

h1 {
    font-family: 'Dela Gothic One', cursive;
    font-size:4em;
}
p{
  font-size:18px;
}
.maincontent{
    max-width:100%;
  }
  .grid-container{
      display: inline-grid;
      width: 100%;
      height:100%;
      margin: 0 auto;
      grid-template-columns: 10% repeat(16, 5%) 10%;
      grid-template-rows: repeat(8, 50px);   
      padding-left:5%; 
  }
  .grid-container-sm{
      display: inline-grid;
      width: 100%;
      min-width:275px;
      height:100%;
      margin: 0 auto;
      grid-template-rows: 50px repeat(15, 20px);    
  }
  .grid-container-lg{
    display: inline-grid;
    width: 100%;
    height:100%;
    margin: 0 auto;
    grid-template-columns: 10% repeat(16, 5%) 10%;
    grid-auto-rows: repeat(10, 10%);     
}
  .myButton {
      box-shadow:inset 0px 1px 3px 0px #91b8b3;
     /* background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%); */
      background-color:#768d87;
      border-radius:5px;
      border:1px solid #566963;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-size:18px;
      font-weight:bold;
      padding:13px 28px;
      text-decoration:none;
      text-shadow:0px -1px 0px #2b665e;
  }
  .myButton:hover {
   /*   background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%); */
      background-color:#6c7c7c;
  }
  .myButton:active {
      position:relative;
      top:1px;
  }

  ul li{
    list-style-image: url("/imageserver/Reusable/electrical-res/check.png");
  }
  .r-hero {
    background-image: url(/imageserver/Reusable/electrical-res/hero-bg-res-comm.png);
    background-repeat: no-repeat;
    height: clamp(300px, 60vh, 800px);
    background-size: cover;
    background-position: center;
}
  .r-hero-bolt {
    grid-column:1/2;
    grid-row:3/9;
    justify-self: center;
  }
  .r-hero-text {
      grid-column:1/-1;
      grid-row:3/11; 
  }
  .r-hero-text h1{
    font-size:clamp(26px, 3vw, 60px);
    display: inline-block;
  }
  #commercial {
    padding-left:50px;
  }
  #electrical {
    padding-left:100px;
  }
  #service {
    padding-left:150px;
  }
  .r-hero-btn {
    grid-column:6/9;
    grid-row: 9/10 ;
   }
  .r-hero-img {
    grid-column:1/21;
    grid-row:1/10;
   }
  .r-hero-img-comm {
    grid-column:1/21;
    grid-row:1/8;
   }
  .r-header {
      margin-top:8%;
      display:flex;
      flex-direction: column;
      align-items: center;
      text-align:center;
      font-size:1em;
  }
  .section2-wrapper{
    background-image: url("/imageserver/Reusable/electrical-res/middle-bg.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    margin-top:100px;
  }
  .section2-content{
    padding:0 8%;
  }
  .services-list {
    padding-left:15%;
  }
  .van-top {    
    grid-column:1/15;
    grid-row: 2/4 ;
    font-size:5em;
    font-weight:700;
   }
   .van {    
    grid-column:3/15;
    grid-row: 4/10;
   }
   .van img{
    width:100%; 
    max-width:250px;
   }
   .van-bottom {
    display:flex;
    flex-direction: row;
    grid-column:1/-1;
    grid-row:9/15;
    font-size:38px;
    font-weight:700;
    text-transform: uppercase;
   }
   .icons{
     padding:5% 8%;
     text-align: center;
   }
   .icons h3{
     padding-top:15px;
   }
   .trust-section{
     margin-top:5%;
   }
   .trust-img{
     margin-top:0;
   }
   .bottom-bg{
    background-image: url("/imageserver/Reusable/electrical-res/bottom-bg.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;

  }
   .section3-wrapper{
    margin:0 8% 0 8%;
   }
   .equipment-img{
    grid-column:1/10;
    grid-row: 1/4;
   }
   .equipment-text{
    grid-column:9/17;
    grid-row: 2/3;
   }
   .safe-text{
    grid-column:2/11;
    grid-row: 8/9;
   }
   .safe-img{
    grid-column:12/16;
    grid-row: 6/10;
   }


   @media screen and (max-width:1100px) {
   .grid-container-sm{
      grid-template-columns:auto;
      grid-template-rows:auto; 
      place-content:center;
  }
     .section2-wrapper{
        margin-top:10px;
  }
     .services{
         text-align:center;
  }
     
    .section3-wrapper{
      margin:8% 1% 0 0;
     }
   .van-top {
      grid-column:1/-1;
      grid-row: 1/11 ;
      

     }
     .van {
      grid-column:1/-1;
      grid-row: 1/11;      
     }
  }
  @media screen and (max-width:900px) {
    .r-hero-text{
      grid-column: 1/-1;
      text-align: center;
    }
    .r-hero-bolt {
      grid-column:1/2;
      grid-row:3/9;
      justify-self: flex-end;
    }
    .grid-container{
      grid-template-columns: 10% repeat(16, 5%) 10%;
      grid-template-rows: repeat(6, 50px);
      }
    
       .r-header {
        padding:0 4%;
    }
    .trust-img{
      margin-top:40%;
    }
    .equipment-img{
      grid-column:1/7;
      grid-row: 1/4;
     }
     .equipment-text{
      grid-column:7/17;
      grid-row: 2/3;
     }
     .safe-text{
       text-align: center;
      grid-column:2/18;
      grid-row: 7/9;
     }
     .safe-img{
      grid-column:12/18;
      grid-row: 6/10;
      opacity:0;
     }
  }
  @media screen and (max-width:768px) {  
     .services-list {
    padding-left:0;
  }
  .r-hero-bolt{
    display:none;
  }
    .services{
      text-align:center;    
}
     .trust-section{
      text-align:center;
    }
     .trust-img{
      margin-top:10%;
    }
    .equipment-img{
      opacity:0;
     }
     .equipment-text{
      grid-column:2/-2;
      grid-row: 2/3;
      text-align:center;
     }
     .myButton {
      box-shadow:inset 0px 1px 3px 0px #91b8b3;
     /* background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%); */
      background-color:#768d87;
      border-radius:5px;
      border:1px solid #566963;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-size:14px;
      font-weight:bold;
      padding:13px 28px;
      text-decoration:none;
      text-shadow:0px -1px 0px #2b665e;
  }
  }