#wrapper{
    display: grid;
    grid-template-columns:minmax(0,1fr) repeat(2,minmax(350px, 1fr)) minmax(0,1fr);
    background: rgb(12, 12, 12);}
    
   body {
    color: rgb(255, 255, 255);
    font-size: 3rem;
    text-align:end;
    padding: 0rem;
    font-family: Verdana, Arial, sans-serif;
    background-attachment: fixed;
    margin: 0px;
  }
  nav {
    background:rgb(12, 12, 12);
    grid-column: 2 / 4;
    grid-row: 1 / 1;
    font-size: 1rem;
    top: 0;
  }
  nav ul{
    margin: 0px;
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
    justify-content: center;
    padding: 0;
}

nav a{
  text-decoration: none;
  color:#FFFFFF;
  padding: 1rem;
  display: block;
  text-align: center;
  font-weight: bold;
}
nav a:hover{
  background-color: #0cb5aa;
}
  header{
    background: rgba(5, 0, 0, 0.484);
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    font-size: medium;
    display: flex;
    position: relative;
    margin-bottom: 10rem;
    padding-right: 1rem;
    justify-content: center;
  }
 
.logo{
    float: left;
    flex-wrap: wrap;
    width: auto;
    height: 70%;
    margin-right: 3rem;
  }
   #homehero{
    background: rgba(241, 11, 30, 0.3);
    grid-column: 1 / -1;
    grid-row: 2 / 4;
    background-image: url(drew-dau-_MGf3AUfipk-unsplash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
  main {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    text-align:left;
    align-items: stretch;
    background: rgb(12, 12, 12);
    grid-column: 2 / 4;
    grid-row: 4 / 5;
    font-size: small;
    margin-bottom: 3rem;
    align-items: center;
  }
  .flex-container{
  display:flex;
  align-self: flex-start;
  }
  .flexbox1, .flexbox2, .flexbox3 {
    text-align: center;
    padding: 1rem;
    height: 140px;
    width:100%;
  }
  .logo img{ 
    height: 120%;
    width: auto;
  }
  
.flex-container img{
width: 85%;
height: 90%;
}
  .container{
    background: rgba(5, 0, 0, 0.484);
    grid-column: 2 / 4;
    grid-row: 5 / 6;
    display: flex;
    text-align: center;
    align-items: stretch;
    position: relative;
    flex-flow: row nowrap;
    font-size: 20px;
    font-weight: bold;
    margin: 3rem;
  }
  .container img{
    height: 50%;
    width: 70%;
    margin: 1rem;
  }
  .flexbox4,.flexbox5,.flexbox6{
    width: 100%;
    border: solid;
    align-items: center;
    }
    .flexbox4:hover{
      background-color: #0cb5aa;
    }
    .flexbox5:hover{
      background-color: #0cb5aa;
    }
    .flexbox6:hover{
      background-color: #0cb5aa;
    }
  #homehero-2{
    background-image: url(IMG_7454.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:300px;
    grid-column: 1 / 5;
    grid-row: 5 / 6;
  }
 
  footer{
    grid-column: 2 / 4;
    grid-row: 7 / 8;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    text-align:left;
    align-items: stretch;
    background:none;
    padding: 0;
    margin-left: 2rem;
  }
  .container2{
    display:flex;
    align-self: flex-start;
    flex-flow: row nowrap;
    justify-content: center;
  }
  .flexbox7, .flexbox8, .flexbox9 {
    padding: 2rem;
    height: 70px;
    width: 100%;
   margin-right: 1rem;
  }
  footer img{
    flex: 1;
    height: 70%;
   width: 90%;
  }
  .flexbox7:hover{
    background-color: #0cb5aa;
  }
  .flexbox8:hover{
    background-color: #0cb5aa;
  }
  .flexbox9:hover{
    background-color: #0cb5aa;
  }
  footer div{
    display: block;
  }
  h1,p{
    justify-content: center;
   margin-right: 1rem;
  }

  
  .description{
    grid-column: 2 / 4;
    grid-row: 3 / 4;
    margin-bottom: 0rem;
    align-items: center;
    justify-content: center;
    color: #0cb5aa;
  text-align: center;
  font-weight: bolder;
  }
  .description p{
    font-size: 18px;
   text-align: left;
   color: #FFFFFF;
   font-weight: lighter;
  }
  .wrapinve header{
    margin-bottom: 1rem;
    background-color:rgb(80, 80, 80);
    padding-top: 1rem;
    grid-column: 1 / -1;
  }
  
  .flex-container2{
    display:flex;
    align-self: flex-start;
    flex-flow: row nowrap;
    text-align: center;
    grid-column: 2 / 4;
    grid-row: 6 / 7;
    padding: 0;
    font-size: small;
    align-items: center;
    }
    .inventorybox1, .inventorybox2, .inventorybox3, .inventorybox4, 
    .inventorybox5, .inventorybox6, .inventorybox7, .inventorybox8, .inventorybox9
    {
      text-align: center;
      display: flex;
      padding: 1rem;
      height: 140px;
      width:100%;
      border: solid;
      align-items: center;
      margin-top:0;
    }
    .flex-container2 img{
      width: 85%;
      height: 90%;
      }
      
   .flex-container3{
    display:flex;
    align-self: flex-start;
    flex-flow: row nowrap;
    text-align: center;
    grid-column: 2 / 4;
    grid-row: 5 / 6;
    padding: 0;
    font-size: small;
    align-items: center;
    }
  
    .flex-container3 img{
      width: 85%;
      height: 90%;
      }
      .flex-container4{
        display:flex;
        align-self: flex-start;
        flex-flow: row nowrap;
        text-align: center;
        grid-column: 2 / 4;
        grid-row: 5 / 6;
        padding: 0;
        font-size: small;
        align-items: center;
      }
        .flex-container4 img{
          width: 85%;
          height: 90%;
          }
      
          .flex-container3 img{
            width: 85%;
            height: 90%;
            }
            .flex-container5{
              display:flex;
              align-self: flex-start;
              flex-flow: row nowrap;
              text-align: center;
              grid-column: 2 / 4;
              grid-row: 5 / 6;
              padding: 0;
              font-size: small;
              align-items: center;
              }
          
              .flex-container5 img{
                width: 85%;
                height: 90%;
                }
               .inventorybox10, .inventorybox11, .inventorybox12{
                  text-align: center;
                  display: flex;
                  padding: 1rem;
                  height: 140px;
                  width:100%;
                  border: solid;
                  align-items: center;
                  margin-top:0;
                }

                form {
                  margin-top: 1rem;
                  display: grid;
                  grid-template-rows: auto;
                  grid-template-columns: 200px 1fr;
                  gap: 0.75rem;
                  width: 100%;
                  margin-right: 3rem;
                  }
                  main .forminfo{
                    margin-top: 3rem;
                    text-align: center;
                  }
                  input{
                    font-size: 1rem;
                    padding: 10px;
                    color: white;
                    background-color:rgb(255, 249, 249);
                    border: none;
                    outline: none;
                    background-color: rgb(80, 80, 80);
                }
                textarea:focus{
                  background-color:#FFFFFF;
                  font-family: Verdana, Arial, sans-serif;
                  background-color:  #0cb5aa92;
                  outline: #FFFFFF;
                  color: #FFFFFF;

                }
                .forminfo h3{
                  color: #0cb5aa;
                }
                label {
                    padding: 10px;
                    text-align: right;
                }
                
                #mySubmit {
                    width: 10rem;
                    grid-column: 2 / 3;
                  background-color: #0cb5aa;
                color:#FFFFFF; }
                
   .wrapserv main{
     grid-row: 4 / 5;
    justify-content: center;
      text-align: center;
       margin-top: 0;
       }
               
   .wrapserv header{
    margin-bottom: 1rem;
    background-color:rgb(80, 80, 80);
    padding-top: 1rem;
    grid-column: 1 / -1;
      }        
      .wrapserv main h1{
        color: #0cb5aa;
      }
      
      
      .wrapserv p{
        font-size: 18px;
        text-align: left;
      }
      .description{
        font-size: larger;
      }
     

      .serviceimg, .serviceimg2{
        display: flex;
        height: 100%;
        width: 100%;
        margin-top: 1rem;
      }
      .serviceimg img{
       height: 100%;
       width: 100%;
      }
      .serviceimg2 img{
        height: 100%;
        width: 100%;
      }
     
    main ul{
      margin-right: 10rem;
      
    }
    main li{
      font-size: 17px;
      text-align: left;
      margin-left: 5rem;
    }
    .wrapserv h2{
      text-align: left;
    }
    

    #map {
      height: 400px;
      width: 800px;
      margin-top: 2rem;
    }
.dealeraddy{
  margin-top: 2rem;
}
.dealeraddy h2{
  text-align: left;
}

.wrapmap main{
  grid-row: 4 / 5;
 justify-content: center;
   text-align: center;
    margin-top: 0;
    }
            
.wrapmap header{
 margin-bottom: 1rem;
 background-color: rgb(80, 80, 80);
 padding-top: 1rem;
 grid-column: 1 / -1;
   }        
   .wrapmap main h1{
     color: #0cb5aa;
   }
  
   
   .wrapmap p{
     font-size: 18px;
     text-align: left;
     margin-top: 2rem;
   }
   .mapinfo h1{
    margin-top: 2rem;
    color:#0cb5aa
   }
  @media only screen and (max-width: 992px) {
  #wrapper {background-size: cover;
    grid-template-columns:minmax(0,1fr) repeat(2,minmax(175px, 1fr)) minmax(0,1fr);
  }

  }
  @media only screen and (max-width: 768px) {
    #wrapper{
      grid-template-columns:minmax(0,1fr) repeat(2,minmax(155px, 1fr)) minmax(0,1fr);
    }
    .logo{
      float: left;
      flex-wrap: wrap;
      width: auto;
      height: 70%;
    }
    nav {
      grid-row: 1 / 1;
      grid-column: 1 / 5;
     }
     nav ul {
      flex-flow: column nowrap;
     }
     header{ 
      grid-column: 1 / -1;
      grid-row: 2 / 3;
     }
     #homehero{
      grid-column: 1 / -1;
      grid-row: 2 / 3;
      margin-bottom: 160px;
      background-size: cover;
      width: 100%;
      height: 250px;
     }
  .logo img{
    height: 100%;
    width: auto;
  }
  main {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    text-align:left;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 2 / 5;
    margin-top: 17rem;
  }
  .flex-container{
  display:flex;
  align-self: flex-start;
  }
  .flexbox1, .flexbox2, .flexbox3 {
    text-align: center;
    padding: 1rem;
    height: 100%;
    justify-content: center;
  }
  
  .container{
    grid-column: 1 / -1;
    grid-row: 5 / 6;
    display: flex;
    text-align: center;
    align-items: stretch;
    position: relative;
    flex-flow: row nowrap;
    font-size: 15px;
    font-weight: bold;
    margin: 3rem;
    gap: 1rem;
    background: none;
    margin-bottom: 5rem;
  }
  .container img{
    height: 50%;
    width: 80;
    margin: 1rem;
    justify-content: center;
    padding-right: 10px;
  }
  .flexbox4,.flexbox5,.flexbox6{
    height: 100%;
    width: 100%;
    border: solid;
    align-items: center;
    background: rgba(5, 0, 0, 0.484);
    gap: 1rem;
    justify-content: flex-start;
    }
   .flexbox4 img .flexbox5 img, .flexbox6 img{
     margin-right: 1rem;
    }
    footer{
      grid-column: 1 / 5;
      grid-row: 7 / 8;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0;
      margin-left: 0;
    }
    .container2{
      display:flex;
      align-self: flex-start;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      
    }
    .flexbox7, .flexbox8, .flexbox9 {
      text-align:center;
      padding: 2rem;
      height: 50%;
      width: auto;
    }

    .description{
      grid-column: 2 / 4;
      grid-row: 3 / 4;
      margin-bottom: 0rem;
      align-items: center;
      justify-content: center;
      color: #0cb5aa;
    text-align: center;
    font-weight: bolder;
    }
    .description p{
      font-size: 17px;
     align-items:  center;
     color: #FFFFFF;
     font-weight: lighter;
    }
    .wrapinve header{
      margin-bottom: 1rem;
      background-color:rgb(80, 80, 80);
    margin-top: 1rem;
      grid-column: 1 / -1;
    }
    .wrapinve main{
      grid-row: 4 / 5;
      justify-content: center;
      text-align: center;
      margin-top: 0;
    }
    .wrapserv header{
      margin-bottom: 1rem;
      background-color:rgb(80, 80, 80);
    margin-top: 1rem;
      grid-column: 1 / -1;
    }
    .wrapserv main{
      grid-row: 4 / 5;
      justify-content: center;
      text-align: center;
      margin-top: 0;
    }
    .wrapmap header{
      margin-bottom: 1rem;
      background-color:rgb(80, 80, 80);
    margin-top: 1rem;
      grid-column: 1 / -1;
    }
    .wrapmap main{
      grid-row: 4 / 5;
      justify-content: center;
      text-align: center;
      margin-top: 0;
    }
    .serviceimg, .serviceimg2{
      display: flex;
      height: 50%;
      width: 50%;
    }
    .serviceimg img{
     height: 100%;
     width: 100%;
    }
    .serviceimg2 img{
      height: 100%;
      width: 100%;
    }
    main ul{
      margin-right: 0rem;
    }
    .wrapserv h1{
      align-items: center;
      justify-content: center;
      margin-left: 2rem;
    }
    .wrapserv p {
      margin-left: 1rem;
    }
    .wrapserv header{
      padding-bottom: 1rem;
    }

    #map {
      height: 400px;
      width: 75%;
      margin-top: 2rem;
      justify-content: center;
    }

  .dealeraddy h2{
    text-align: left;
  }

    .wrapmap h1{
      align-items: center;
      justify-content: center;
      margin-left: 2rem;
    }
    .wrapmap p {
      margin-left: 1rem;
    }
    .wrapmap header{
      padding-bottom: 1rem;
    }
    .wrapmap ul{
      padding-right: 1rem;
    }

  }