@media screen and (max-width: 640px) {
    * {
        font-family: "arial", "verdana", "sans-serif";
    }

    body {
        height: 100%;
        width: 100%;
        background-color: rgba(230, 239, 248, 1);
        overflow-x:hidden;
    }

    #headerimage {
        width: 100%;
        height: auto;
    }

    #headerimage2 {
        width: 100%;
        height: 40%;
        float: left;
      
}

    .skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    a.skip:active,
    a.skip:focus,
    a.skip:hover {
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .topnav {
        background-color: rgb(89, 99, 48);
        width: 105%;
        margin-top: 5%;
    }

    .topnav a {
        float: left;
        display: block;
        color: rgb(124, 171, 207);
        text-align: center;
       padding-right: 2%;
        padding-top: 2%;
        padding-bottom: 2%;
        text-decoration: none;
        font-size: 1em;
        width: 10%;
        margin-right: 5%;
    }

    .topnav a:hover {
        background-color: rgb(89, 99, 48);
        color: black;
    }

    .active {
        background-color: rgb(89, 99, 48);
        width: 100%;
    }

    .topnav .icon {
        display: none;
    }
    #c1 {
        float: left;
        width: 100%;
    }
    #c2 {
        float: left;
        width: 100%;
    }

    #c3 {
        float: left;
        width: 100%;
    }
    #c4 {
        float: left;
        width: 100%;
    }

    #NTPS {
       
        margin-bottom: 10%;
        margin-top: 10%;
        font-size: 1.5em;
        width: 100%;
        color: rgba(89, 99, 48, 1);
    }
    #trees{
          width: 100%;
        height: auto;
        margin-bottom: 5%;
        margin-top: 5%;
        margin-left: 0%;
     
        
    }

    #P1 {
        color: rgba(89, 99, 48, 1);
        margin-bottom: 10%;
        font-size: 1.5em;
        width: 100%;
    }
  
 

    #about {
        display: none;
    
    }
    #about1 {
        margin-top: 25%;
        font-size: 2.5em;
        width: 100%;
        color: rgba(89, 99, 48, 1);
        text-align: center;

        font-family: monospace;
    }
    #problems {
        text-align: center;
        width: 100%;
        font-size: 1.5em;
        color: rgba(89, 99, 48, 1);
        margin-bottom: 10%;
        margin-top: 10%;
    }
    #services {
        color: rgba(89, 99, 48, 1);
        text-align: center;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.5em;
    }
    #photos {
        color: rgba(89, 99, 48, 1);
        text-align: center;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.2em;
        margin-top: 20%;
    }

    #tr1 {
        margin-left: 2%;
        width: 85%;
    }
    #tr2 {
        margin-left: 2%;
        width: 85%;
    }
    #tr3 {
        margin-left: 2%;
        width: 85%;
    }
    #td1 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #b41 {
        color: rgba(89, 99, 48, 1);
        margin-left: 2%;
        text-align: center;
    }

    #b1 {
        width: 100%;
        height: auto;
    }

    #td2 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #after1 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }

    #a1 {
        width: 104%;
        height: auto;
    }

    #td3 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #b2 {
        width: 100%;
        height: auto;
    }

    #td4 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #b42 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #after2 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #a2 {
        width: 101%;
        height: auto;
    }
    #b43 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #b4 {
        width: 100%;
        height: auto;
    }
    #after3 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #a4 {
        width: 104%;
        height: auto;
    }

    #ourteam {
        color: rgba(89, 99, 48, 1);
        width: 100%;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2em;
        text-align: center;
       
    }
    #teampic {
        width: 100%;
        height: auto;
        
    }

    #contact {
        color: rgba(89, 99, 48, 1);
        
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.5em;
        width: 100%;
    }



  

    #P4 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
        margin-bottom: 20%;
        width: 100%;
        margin-top: 10%;
        font-family: monospace;
        font-size: 1.5em;
    }

    #email {
        color:rgba(89, 99, 48, 1);
        font-family:sans-serif;
        margin-bottom: 5%;
        font-size: .8em;
    }
    #phone {
        color:rgba(89, 99, 48, 1);
        font-family: sans-serif;
        font-size: .8em;
    }

    #myBtn {
     
        position: fixed;
        bottom: 0%;
        right: 0%;
        z-index: 99;
        font-size: 1em;
        border: none;
        outline: none;
        background-color: rgb(190, 190, 184);
        color: white;
        cursor: pointer;

        border-radius: 4px;
    }

    #myBtn:hover {
        background-color: rgba(89, 99, 48, 1);
    }

    .footer {
        position: fixed;
        width: 80%;
     margin-top: 15%;
        bottom: 0%;
        background-color: rgb(190, 190, 184);
        font-size: 0.8em;
        font-style: italic;
       
    }
    #copy {
        margin-left: 0%;
        color: rgba(89, 99, 48, 1);
    }
}

/*small devices,tablets*/
@media screen and (min-width: 641px) and (max-width: 1007px) {
    * {
        font-family: "arial", "verdana", "sans-serif";
    }

    body {
        height: 100%;
        width: 98%;
        background-color: rgba(230, 239, 248, 1);
        overflow-x:hidden;
    }

    #headerimage {
        position: relative;
        width: 40%;
        height: auto;
        margin-left: 1.7%;
        margin-top: 15%;
    }
    #headerimage2 {
        position: absolute;
        width: 100%;
        height: 35%;
       margin-left: 
        margin-top: 2%;
        opacity: 0.5;
    }

    .skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    a.skip:active,
    a.skip:focus,
    a.skip:hover {
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .topnav {
        overflow: hidden;
        background-color: rgb(89, 99, 48);
        margin-left: %;
        margin-top: 8.5%;
    }

    .topnav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        margin-right: 4%;
  margin-bottom: 5%;
    margin-top: 5%;
        text-decoration: none;
        font-size: 1.5em;
    }

    .topnav a:hover {
        background-color: white;
        color: black;
    }

    .active {
        background-color: rgb(190, 190, 184);
    }

    .topnav .icon {
        display: none;
    }

    #c1 {
        float: left;
        width: 100%;
    }
    #c2 {
        float: left;
        width: 100%;
    }

    #c3 {
        float: left;
        width: 100%;
    }
    #c4 {
        float: left;
        width: 100%;
    }

    #about {
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        font-size: 2em;
        font-family: monospace;
        margin-left: 2%;
        padding-top: 1%;
        margin-top: 2%;
    }
    #about1 {
        margin-top: 5%;
        font-size: 2.5em;
        color: rgba(89, 99, 48, 1);
        text-align: center;

        font-family: monospace;
    }

    #NTPS {
        margin-left: 1%;
        padding-right: 4%;
        font-size: 1.5em;
    }
   #trees{
        width: 100%;
        height: auto;
        margin-bottom: 5%;
        margin-top: 5%;
    }

    #P1 {
        margin-left: 2%;
        padding-right: 4%;
        font-size: 1.5em;
    }
 

    p {
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        font-weight: 500;
        margin-left: 1%;
    }

    #problems {
        text-align: center;

        font-size: 1.5em;
        color: rgba(89, 99, 48, 1);
    }
    #services {
        color: rgba(89, 99, 48, 1);
        text-align: center;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.5em;
    }
    #photos {
        color: rgba(89, 99, 48, 1);
        text-align: center;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.2em;
        margin-top: 15%;
    }

    #tr1 {
        margin-left: 0%;
    }
    #tr2 {
        margin-left: 0%;
    }
    #tr3 {
        margin-left: 0%;
    }
    #td1 {
        background-color: rgba(230, 239, 248, 1);
        width: 50%;
    }

    #b41 {
        color: rgba(89, 99, 48, 1);

        text-align: center;
    }

    #b1 {
        width: 100%;
        height: auto;
    }

    #td2 {
        background-color: rgba(230, 239, 248, 1);
        width: 50%;
    }

    #after1 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }

    #a1 {
        width: 104%;
        height: auto;
    }

    #td3 {
        background-color: rgba(230, 239, 248, 1);
        width: 50%;
    }

    #b2 {
        width: 100%;
        height: auto;
    }

    #td4 {
        background-color: rgba(230, 239, 248, 1);
        width: 50%;
    }

    #b42 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #after2 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #a2 {
        width: 100%;
        height: auto;
    }
    #b43 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #b4 {
        width: 100%;
        height: auto;
    }
    #after3 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
    }
    #a4 {
        width: 104%;
        height: auto;
    }

    #ourteam {
        color: rgba(89, 99, 48, 1);
        width: 80%;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.2em;
        text-align: center;
        margin-left: 11.5%;
    }
    #teampic {
        width: 100%;
        height: auto;
        
    }
    #contact {
        color: rgba(89, 99, 48, 1);
       margin-left: 5%;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.5em;
    }

   
    #P4 {
        color: rgba(89, 99, 48, 1);
        text-align: center;
        margin-bottom: 20%;
        width: 100%;
        margin-top: 10%;
      
      
        font-family: monospace;
        font-size: 1.5em;
    }

    #email {
        color: rgba(89, 99, 48, 1);
        font-family: sans-serif;
        font-size: .8em;
        margin-bottom: 5%;
        
    }
    #phone {
        color: rgba(89, 99, 48, 1);
        font-family: sans-serif;
           font-size: .8em;     
    }

    #myBtn {
        position: fixed;
      
        bottom: 0%;
        right: 0%;
        z-index: 99;
        font-size: 1em;
        border: none;
        outline: none;
        background-color: rgb(190, 190, 184);
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #myBtn:hover {
        background-color: rgba(89, 99, 48, 1);
    }

    .footer {
        position: fixed;
        width: 100%;
        margin-top: 15%;
        bottom: 0;

        margin-left: 0%;
        background-color: rgb(190, 190, 184);
        font-size: 0.8em;
        font-style: italic;
    }
    #copy {
      
    }
}

/*laptop/computer*/
@media screen and (min-width: 1008px) {
    * {
        font-family: "arial", "verdana", "sans-serif";
    }

    body {
        height: 100%;
        width: 95%;
        background-color: rgba(230, 239, 248, 1);
    }

    #headerimage {
        position: relative;
        width: 25%;
        height: auto;
        margin-left: 1.7%;
        margin-top: 6%;
    }
    #headerimage2 {
        position: absolute;
        width: 80%;
        height: auto;
        margin-left: 11%;
        margin-top: 5%;
        opacity: 0.5;
    }

    .skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    a.skip:active,
    a.skip:focus,
    a.skip:hover {
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .topnav {
        overflow: hidden;
        background-color: rgb(89, 99, 48);
        margin-left: 11.5%;
        margin-top: 0%;
        margin-bottom: 5%;
        width: 84.5%;
    }

    .topnav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 1.5em;
    }

    .topnav a:hover {
        background-color: white;
        color: black;
    }

    .active {
        background-color: rgb(190, 190, 184);
    }

    .topnav .icon {
        display: none;
    }

    #NTPS {
        color: rgba(89, 99, 48, 1);
        margin-top: 5%;
        font-size: 1.5em;
        width: 80%;
        text-align: justify;
        margin-left: 11.5%;
        margin-bottom: 5%;
    }
 

    #c1 {
        float: left;
        width: 100%;
    }
    #c2 {
        float: left;
        width: 100%;
    }

    #c3 {
        float: left;
        width: 100%;
    }
    #c4 {
        float: left;
        width: 100%;
    }

    #about {
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        font-size: 4em;
        font-family: monospace;
        font-weight: 500;
        margin-left: 2%;
     margin-bottom: 10%;
        width: 100%;
    }
    #about1 {
        margin-top: 7%;
        font-size: 2.2em;
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        margin-left: 11.5%;
        width: 80%;
    }
    #problems {
        text-align: justify;
        margin-left: 11.5%;
        font-size: 1.5em;
        color: rgba(89, 99, 48, 1);
        width: 80%;
    }
    #services {
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        font-family: monospace;
        font-weight: bolder;
        font-size: 3.2em;
        margin-left: 11.5%;
        width: 80%;
        margin-top: 5%;
    }

    #photos {
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.5em;
        margin-left: 11.5%;
        margin-top: 7%;
        width: 80%;
    }

    #tr1 {
        width: 80%;
    }
    #tr2 {
        width: 80%;
    }
    #tr3 {
        width: 80%;
    }
    #td1 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #b41 {
        color: rgba(89, 99, 48, 1);
        padding-left: 23%;
        font-family: monospace;
        font-size: 2em;
    }

    #b1 {
        margin-left: 23%;
        width: 67%;
        height: auto;
    }

    #td2 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #after1 {
        color: rgba(89, 99, 48, 1);
        padding-left: 5%;
        width: 50%;
        font-family: monospace;
        font-size: 2em;
    }

    #a1 {
        margin-left: 5%;
        width: 68%;
        height: auto;
    }

    #td3 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #b2 {
        margin-left: 23%;
        width: 67%;
        height: auto;
    }

    #td4 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #b42 {
        color: rgba(89, 99, 48, 1);
        padding-left: 23%;
        font-family: monospace;
        font-size: 2em;
    }
    #after2 {
        color: rgba(89, 99, 48, 1);
        padding-left: 5%;
        width: 50%;

        font-family: monospace;
        font-size: 2em;
    }
    #a2 {
        margin-left: 5%;
        width: 67%;
        height: auto;
    }
    #td5 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #b43 {
        color: rgba(89, 99, 48, 1);
        padding-left: 23%;
        font-family: monospace;
        font-size: 2em;
    }
    #b4 {
        margin-left: 23%;
        width: 67%;
        height: auto;
    }
    #td6 {
        background-color: rgba(230, 239, 248, 1);
        width: 30%;
    }

    #after3 {
        color: rgba(89, 99, 48, 1);
        padding-left: 10%;
        width: 50%;
        font-family: monospace;
        font-size: 2em;
    }
    #a4 {
        margin-left: 5%;
        width: 68%;
        height: auto;
    }

    #ourteam {
        color: rgba(89, 99, 48, 1);
        width: 80%;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.2em;
        text-align: center;
        margin-left: 11.5%;
    }
    #teampic {
        margin-left: 28%;
        width: 50%;
        height: auto;
        margin-bottom: 5%;
    }

    #testimonials {
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        font-family: monospace;
        font-weight: bolder;
        font-size: 3.2em;
        margin-left: 11.5%;
        width: 80%;
    }

    #P1 {
        color: rgba(89, 99, 48, 1);
        padding-top: 2%;

        width: 80%;
        margin-left: 11.5%;

        padding-bottom: 2%;
        text-align: justify;

        font-weight: 500;
        font-size: 1.5em;
    }

 
       
     margin-left: 15%;
        font-family: monospace;
        font-weight: 900;
        font-size: 2.5em;
        margin-bottom: 2%;
        padding-top: 5%;
    }



   #trees{
        width: 100%;
        height: auto;
       margin-left: 2%;
   
    }

   #contact {
        color: rgba(89, 99, 48, 1);
       margin-left: 7%;
        font-family: monospace;
        font-weight: bolder;
        font-size: 2.5em;
    }

    #P4 {
        color: rgba(89, 99, 48, 1);
        text-align: justify;
        margin-bottom: 10%;
        width: 90%;
        margin-top: 2%;
      margin-left: 5%;
        
        font-family: monospace;
        font-size: 2.5em;
        padding-left: 2%;
        padding-top: 2%;
        padding-bottom: 2%;
    }

    #email {
        color: rgba(89, 99, 48, 1);
        font-family: sans-serif;
        font-size: .8em;
        margin-bottom: 5%;
    }
    #phone {
        color: rgba(89, 99, 48, 1);
        font-family: sans-serif;
        font-size: .8em;
    }

    #myBtn {
        position: fixed;

        bottom: 0%;
        right: 0%;
        z-index: 99;
        font-size: 1em;
        border: none;
        outline: none;
        background-color: rgb(190, 190, 184);
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #myBtn:hover {
        background-color: rgba(89, 99, 48, 1);
    }

    .footer {
        position: fixed;
        width: 100%;
        margin-top: 15%;
        bottom: 0;
        background-color: rgb(190, 190, 184);
        font-size: 1em;
        font-style: italic;
        text-align: centre;
    }
    #copy {
margin-left: 5%;
        color: rgba(89, 99, 48, 1);
    }
}