*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.header{
    display: grid;
    background-color:  #f54029;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
    "logo logo NavB NavB NavB NavB NavB NavB"
   /*  "logo logo NavB NavB NavB NavB NavB NavB" */
    "logo logo Phon Phon Eml1 Eml1 Loca Loca"
    "logo logo Fax  Fax  Eml2 Eml2 Loca Loca"
    ;
    max-height: 200px;
    }

.Logo{
    background-color: white;
    grid-area: logo;
    min-width: 200px;
    }

.Logo-img{
    height: 100%;
    width: 100%;
    object-fit: scale-down;
    padding-left: 2rem;
    padding-right: 1rem;
    }

.NavBar{    
    background-color: rgb(252, 253, 251);
    grid-area: NavB;
    padding: 0.3rem;
    }

.main-nav ul{
    display: grid;
    grid-gap:20px;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(4, 1fr);
}

.main-nav .current{
    background: #2D721C;
}
.main-nav a{

    background:#f54029;
    display: block;
    text-decoration: none;
    padding: 0.8rem;
    padding-top: 0.5rem;
    text-align: center;
    color: rgb(246, 250, 245);
    font-family: 'Kanit', sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    box-shadow: 0 1px 5px rgb(45, 114, 18, .9);
}


.main-nav a:hover{
    background: #2D721C ;
}
.Phone{
    background-color: #f54029;
    grid-area: Phon;
    height: 70px;
}
.Phone-img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    padding-left: 0.5rem;
    padding-right: 1rem;
    
    
}
.Fax{
    background-color: #f54029;
    grid-area: Fax;
    font-size: 1.5rem;
    display: block;
    justify-self: center;
    align-self: center;
    color: white;
    padding-left: 0.5rem;
    padding-right: 1rem;
    object-fit: scale-down;

}
.Email1{
    background-color: #f54029;
    grid-area: Eml1;
}
.Email2{
    background-color: #f54029;
    grid-area: Eml2;
}
.Location{
    background-color: #f54029;
    grid-area: Loca;
}

#showcase{
    min-height: 400px;
    /* background: url('../img/BackLandPage5.jpg') no-repeat -10px -10px; */
    text-align: center;
    /* width: auto; */
    object-fit: scale-down;
    background-image: url("http://www.famaprinting.com/2020/2020-05/img/BackLandPage5.jpg");
    background-size: cover;
    background-position: center;
    border-top: green;
   border-style: solid;
  }

  #showcase h1{
    margin-top: 5px;
    padding-top: 20px;
    font-size: 45px;
    margin-bottom: 10px;
    font-style: oblique;
    text-shadow: 2px 3px #ffffff;
  }

  #showcase p{
    font-size: 20px;
    font-weight: bold;
  }
  .quotetxt{
      background-color: #2D721C;
      display: grid;
      grid-template-columns: 5fr auto auto 5fr;
      height: 50px;
      align-items: center;
      justify-items: center;
      padding: 0;
      grid-template-areas: ". Quotetxt Quotebtn .";
      text-align: center;
    
  }
  .quotetxt-btn{
    grid-area: Quotebtn;
  }

  .quotetxt-txt{
    grid-area:Quotetxt;
}

.quotetxt-txt h1{
    font-size: 40px;
    margin-right: 20px;
}

.quotetxt a{
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    font-weight: bolder;
    font-size: 32px;
    background-color: rgb(128, 182, 115, 0.25);
    padding: 5px 30px;
    box-shadow: 3px 3px 8px rgba(167, 201, 153, 0.9);
}

.quotetxt a:hover{
    background: #f54029 ;
}

.quotetxt-txt h1{
    color: #ffffff;
}


#boxes{
    margin-top: 20px;
   /*  align-items: center; */
 /*    justify-items: center; */
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  }
  
  #boxes .box{
    /* float: left; */
    text-align: center;
    padding: 10px;
    
  }
  
  #boxes .box img{
    width: 150px;
  
  }
  

  #boxes .container2{
    min-height: 300px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  }

  .footer-tex{
    padding: 20px;
    margin-top: 20px;
    color:#000000;
    background-color: #F54029;
    text-align: center;
    text-decoration: underline;
  
  }

  /* Media Queries */

  
  @media screen and (max-width: 992px){

    .Logo{
        justify-self: center;
        background-color: white;
    }


    .body1{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: repeat(5,1fr);
        grid-template-areas: 
        "top1"
        "Main"
        "estimate"
        "services"
        "Bottom1"
        ;
        grid-gap:1rem 2rem;
        position: absolute;
        justify-items: stretch;
        align-items: stretch;
        padding-left: 10px;
        padding-right: 10px;
        
    }
    .main-nav ul{
        grid-template-columns: 1fr;
        width: 100%;
      }
    
    .header{
        grid-area: top1;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "logo"
        "NavB"
        "Phon"
        "Eml1"
        "Loca"
        ;
    }
    .Email2{
        display: none;
        
    }

    .Fax{
        display: none;
    }
    
    
.Logo{
    max-width: 300px;
 
}

#showcase{
    min-height: 200px;
    max-height: 200px;
    
    
    /* position: relative;
    min-height: 200px;
    top:880;
 */
}

#showcase h1{
    margin-top: 10px;
    padding-top: 10px;
    font-size: 24px;
    margin-bottom: 1px;

}

#showcase p{
    font-size: 15px;
    font-weight: bold;
}

.Showcasediv{
    min-height: 100px;
    grid-area: Main;
    /* position: relative;
    top:880; */
    position: absolute;
    margin-top: 455px;
    display: none;

    
}
.body1{
    display: grid;
 /*    background-color: bisque; */
}

.Quotediv{
    grid-area: estimate;
    position: absolute;
    margin-top: 250px;
    width: 100%;
    justify-items: center;
    }

    .quotetxt{
        background-color: #2D721C;
        display: grid;
        grid-template-columns: auto 1fr 1fr auto;
        justify-items: center;
        
    }

    .quotetxt-txt h1{
        font-size: 30px;
        margin-right: 10px;
    }

    .quotetxt a{
        text-transform: uppercase;
        color: #ffffff;
        text-decoration: none;
        font-weight: bolder;
        font-size: 22px;
        background-color: rgb(128, 182, 115, 0.25);
        padding: 1px 1px;
        box-shadow: 1.5px 1.5px 4px rgba(167, 201, 153, 0.9);
    }

#boxes .container2{
    min-height: 100px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
}

.boxesdiv{
    grid-area: services;
 /*    background-color: aqua; */
    position: absolute;
    margin-top: 110px;

}

#boxes{

    margin-top: 0px;
    grid-template-columns: 1fr;

}

.bottomend{
    grid-area: Bottom1;
    position: absolute;
    margin-top: 855px;
}
    
  }/* END Media Query 700 


  @media(max-width:550px){

   
   .body1{
    padding-left: 2px;
    padding-right: 2px;
   }
    .main-nav ul{
       
        width: 500px;
      }

      .Showcasediv{
       /*  min-height: 100px;
        grid-area: Main;
        /* position: relative;
        top:880; 
        position: absolute; 
        margin-top: 435px;
      }

      .Quotediv{
        margin-top: 420px;
      }
  
}/* END Media Query 550 */
  
/* .add2{
position: relative;
height: 1px;
}

.add2-1{
    position: relative;
    top: -800px;
    left: auto;

} */