@media(max-width: 768px) {
  .the_body {
    font-family: 'Work Sans', sans-serif;
    position: relative;
  }
  
  body {
    margin: 0%;
    padding: 0%;
    width: 100%;
  }
  
  /* this is for nav menu */
  #nav_container {
    flex-direction: column;
    align-items: center;
    }

    #nav_container > .nav-wrapper_items > div {
      margin: 5px 7px;
      font-size: 0.6em;
      text-transform: uppercase;
    }

   /* home section */
  
  .background_image {
    align-items: center;
    height: 250px;
    background-position: cover;
    justify-content: center;
    display: flex;
    opacity: 1;
    animation: none;
  }
  
.page_one {
  height: 100%;

}

.Page_one_container {
  height: 100%;
}

.pageone_wrap {
  margin: 150px 20px;
}


.page_one_header .welcome {
 max-width: 100%;
 display: flex;
 font-size: 3rem;
 justify-content: center;
 /* transform: rotate(20deg) */
}

.first_page_text {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 200px;
  font-size: 12px;
  line-height: normal;
}


/* about Section*/
   .about_background {
    background:white;
    height: 100vh;
    width: 100%;
   
  }

  .about_us {
    max-width: 80%;
    height: 100%;
    position: relative;
    justify-content: start;
    margin: 50px;
  }
  .about_background {
    height: 100%;
  }
  
  /* Services Section */
  .service_background {
    display: grid;
    width: 100%;
    height: 100%;
  }
  .services_list { 
  grid-template-columns: 1fr 1fr;
  margin-bottom: 150px;
  }
  .service_header {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  
  /*work*/
 .work_container {
   grid-template-columns: 1fr;
   grid-gap: 0px;
 } 

  /* Contacts */
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  
  .contacts_background{
    height: 100%;

  }

  .contact_wrapper {
    top: 30px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
  }
  
    .signup-title h1 {
     font-family: helvetica, arial, sans-serif;
     font-size: 40px;
     width: 100%;
    }
  
  iframe,
  .map {
    width: 95%;
    margin: auto;
    padding: 5px;
  }
  
  .signup-form {
    background: white;
    width: 90%;
    padding: 5px;
    margin: auto;
  }
  
  .input textarea {
        padding: 1rem;
        background: rgb(240, 240, 244);
        display: flex;
        margin: auto;
        display: block;
        border-radius: 5px;
        box-shadow: rgba(0,0,0,0.3);
        font-family: Roboto;
        border: 0px;
        border-bottom: 2px solid white;
    }
  
    .signup-form input,
    .signup-form select,
    .signup-form textarea {
        display: block;
        background: rgb(250, 250, 250);
        margin: 20px auto;
        padding: 10px;
        color: grey;
        padding: 10px;
        width: 100%;
        border: 0px;
        border-bottom: 2px solid transparent;
    }
  
  .msg textarea{
      height: 150px;
      border: 0px;
      border-bottom: 2px solid transparent;
  }
  
  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #818383;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    color: #818383;
  }
  :-ms-input-placeholder {
    /* IE 10+ */
    color: #818383;
  }
    .btn {
      background: red;
      text-align: center;
      padding: 15px;
      border: 0px;
      border-radius: 5px;
      color: white;
      cursor: pointer;
      text-transform: uppercase;
    }
  
    .btn:hover {
      background: #791D16;
    }
  
   .signup-title {
     font-family: helvetica, arial, sans-serif;
     font-size: 40px;
     width: 80%;
     margin: auto;
  }
  
    .contact_us {
      position: relative;
      display: inline-block;
      width: 100%;
      margin: auto;
      align-items: center;
    }

    .new_middle{
      background: white;
      display: block;
      width: 100%;
      padding:5px;
      text-align: center;
      z-index: 20;
    }

    
    .click_us_2 {
      display: block;
      position: relative;
      color: grey;
      list-style: none;
      top: 0;
    }
    
    .mail_us_2 {
      position: relative;
    }
    .mail_us_2 a{
      text-decoration: none;
      color: grey;
    }
    
    .mail_us_2 a:hover,
    .mail_us_2 a:active {
      color: red;
    }
    
    .call_us_2 {
      position: relative;
      padding-left: 10px;
    }
    
    /* footer starts here */

   #footer {
     display: none;
   }
  
  }