body{
    font-family:arial;
    background: white;
    margin: 0px;
}

.border-box{align-items:center;}

.box{margin:8px;width:auto;overflow-x:none;min-width:460px;height:auto;background:white;padding:19px;border-radius:8px;box-shadow:2px 2px 6px lightgrey, -2px -2px 6px lightgrey;font-family:arial;color:grey;}

input, textarea{
    min-width: 240px;
    display: block;
    background:white;
    box-shadow: 1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
    border-radius: 6px;
    padding:12px;
    border:none;
    outline:none;
    margin: auto;
    margin-top:14px;
    margin-bottom:14px;
    font-size:18px;
}

input[type=button]{
    border:1px solid #7aff7d;
    font-size:20px;
    color:white;
    background: #7aff7d;
}

input[type=button]:hover{
    box-shadow: 4px 4px 8px lightgrey, -4px -4px 8px lightgrey;
}

textarea{
    font-family: arial;
    resize: none;
    height: 80px;
}

#contactsection{
    margin: auto;
    width: 268px;
}

#content{
    margin: 2em;
    margin-top:180px;
}

header{
    width:100vw;
    height:auto;
    min-height: 80px;
    max-height: 500px;
    background:white;
    position:fixed;
    top:0px;
    z-index:999;
    box-shadow: 6px 0px 12px lightgrey;
    border-bottom:2px solid lightgrey;
    margin:0px;
}
#header-title{
    width:100%;
    float:left;
    padding:auto;
    padding:0.5em;
}
header img{
    float:left;
    margin-right:9px;
}
#header-text, #footer-text{
    margin-left:0px;
    margin-top:8px;
    font-size:20px;
    color:#7aff7d;
    float:left;
}
#header-text-second{
    font-size:14px;
    color:lightgrey;
}
.header-btn-main{
    float:right;
    padding:10px 25px 10px;
    border:2px solid #7aff7d;
    color:#7aff7d;
    text-align:center;
    margin-top:6px;
    margin-right:20px;
    border-radius:8px;
}
.header-btn-main:hover{
    color:white;
    background:#7aff7d;
    box-shadow:-2px 2px 6px lightgrey;
}
@media only screen and (max-width: 400px) {
.header-btn-main{
    float:right;
    padding:12px 10px 12px;
    border:2px solid #7aff7d;
    color:#7aff7d;
    text-align:center;
    margin-top:4px;
    margin-right:8px;
    border-radius:8px;
font-size:12px;
content:"";
}
.header-btn-main:hover{
    color:white;
    background:#7aff7d;
    box-shadow:-2px 2px 6px lightgrey;
}
}
a{
    text-decoration:none;
}
a:hover{
    text-decoration:none;
}
#header-menu{
    width:100%;
    height:auto;
    max-height:20px;
    margin-top:8px;
    padding-top:10px;
    padding-bottom:10px;
    margin-bottom:0.5em;
    border-top:1px solid lightgrey;
}
#header-menu ul{
    list-style-type: none;
    overflow:hidden;
    width:100%;
    padding:0px;
    margin:auto;
    margin-top:6px;
}
#header-menu ul li{
    float:left;
    width:33%;
    max-width:33vw;
    display:inline;
    text-align:center;
}
#header-menu ul li a{
    color:#c3c7c3;
    font-size:14px;
    text-align:center;
    border-radius:16px;
}
#header-menu ul li a:hover{
    color:#54ff58;
    border:1px solid #f0ffeb;
    padding:16px;
    border-radius:16px;
}
::-webkit-scrollbar {
    width: 2px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 6px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #54ff58; 
    border-radius: 4px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #54ff58; 
  }
  footer{
      background:white;
      margin:0px;
      width:100%;
      max-width:100vw;
      height:auto;
      padding:4px;
      bottom:0px;
      position:fixed;
      z-index:999;
      border-top:1px solid #54ff58;
      box-shadow: -4px -0px 10px lightgrey;
  }
  #footer-text{
      margin:0px;
      font-size:16px;
      padding-top:8px;
      color:grey;
  }
  footer input{
    min-width: 240px;
    border-radius:0px;
    background:white;
    box-shadow:none;
    padding:8px;
    margin:0px;
    margin-left:8px;
    border-bottom:1px solid #54ff58;
    outline:none;
    float:left;
}
footer input[type=button]{
    min-width:180px;
    border:1px solid #54ff58;
    border-radius:4px;
    margin-left:14px;
}
#footer-content{
    width:800px;
    margin:auto;
}
#content-box{
    width:100%;
    height:auto;
    background: white;
    border:none;
    border-radius:12px;
    text-align:center;
    margin-top:120px;
}
#content-box-video{
    width:100%;
    height:auto;
    background: white;
    border:none;
    border-radius:12px;
    text-align:center;
    margin-top:40px;
}
#content-box h1{
    text-align:center;
    color:grey;
    font-size:38px;
    font-weight:400;
    transition: font-size 0.8s, padding-bottom 4s;
}
#contactsection h1{
    text-align:center;
    color:grey;
    font-size:38px;
    font-weight:400;
    transition: font-size 0.8s, padding-bottom 4s;
}
#content-box h1:hover{
    color:#54ff58;
    font-size:44px;
    padding-bottom:-6px;
}
#content-box img{
    width:80%;
    height:auto;
    border-radius:8px;
    border:2px solid #54ff58;
    box-shadow: 4px 4px 12px lightgrey;
    transition: width 2s, height 4s;
}
#content-box img:hover{
    width:100%;
}
#promo-video, #contactsection{
    width:100%;
    max-width:1200px;
    margin:auto;
    height:auto;
    border:none;
    border-radius:10px;
    box-shadow: 2px 2px 6px lightgrey, -2px -2px 6px lightgrey;
    margin-top:30px;
    z-index:1;
    padding-top:20px;
    padding-bottom:18px;
}
#contactsection{
    top:120px;
}
#promo-video h4{
  text-align:center;
  color:lightslategray;
  font-weight:500;
  font-size:18px;
}
#content-box #mini-text{
    display:none;
    text-align:left;
    color:lightslategray;
    font-weight:500;
    font-size:18px;
    margin-left:120px;
  }
#promo-video video{
    width:80%;
    height:auto;
    margin:auto;
    border-radius:8px;
    box-shadow:1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
}
@media only screen and (min-width: 1000px) {
    #content-box h1{
        float:left;
        width:50%;
        padding:auto;
    }
    #goal h1{
        float:left;
        width:50%;
        padding:auto;
        margin-top:20px;
    }
    #content-box img{
        float:left;
        width:40%;
    }
    #content-box img:hover{
        width:45%;
    }
    #main-tag{
        width:100%;
        height:auto;
        display:flex;
    }
    #content-box #mini-text{
        display: block;
    }
  }
  #benefits-table{
    margin-top:120px;
  }
  #benefits-table table{
      width:80%;
      max-width:800px;
      height:auto;
      margin:auto;
      background:white;
      border-radius:4px;
      box-shadow:1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
  }
  #contact-list{
    margin-top:120px;
  }
  #contact-list table{
    width:80%;
    max-width:800px;
    height:auto;
    margin:auto;
    background:white;
    border-radius:4px;
    box-shadow:1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
}
  tr{
      background: white;
      width:50%;
      margin:20px;
  }
  td{
      border-top:1px solid #54ff58;
      padding:20px;
      text-align:left;
      color:lightslategray;
  }
  #benefits-table p{
      color:lightslategray;
      font-size:20px;
  }
  i{
      color: #54ff58;
  }
  .cross{
      color:red;
  }
  #goal article{
    margin:auto;
      margin-top:120px;
      color:grey;
      font-size:18px;
      line-break: 8px;
      max-width:800px;
      text-align:center;
  }
  #goal h1{
      height:100%;
      font-size: 40px;
  }
  #our-goal{
      text-align:left;
      background:white;
      box-shadow: 1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
      border-radius:8px;
      padding:20px;
      font-size:0.8em;
      line-height:1.4;
  }
  #buttons{
      width:80%;
      margin:auto;
      margin-top:120px;
      padding:20px;
      text-align:center;
      overflow-x:hidden;
  }
  #buttons .header-btn-main{
      float:none;
      margin:auto;
  }
  #header-menu p{
      margin-left:20px;
      margin-bottom:8px;
      font-size:12px;
      color:lightslategray;
      text-align:center;
  }
  #buttons #header-menu{
      bottom:0px;
  }
  #googleMap{
      width:100%;
      max-width:800px;
      height:400px;
      border-radius:8px;
      margin:auto;
  }
  #map p{
      text-align:center;
  }
  #projects, #pricing{
      width:100%;
      max-width:1200px;
      height:auto;
      overflow-x:scroll;
      padding-top:20px;
      padding-bottom:20px;
      display:flex;
      margin:auto;
      z-index:20;
      border-radius:8px;
      margin-top:20px;
      box-shadow: inset 1px 1px 4px lightgrey,inset -1px -1px 4px lightgrey;
  }
  #project{
      width:280px;
      height:480px;
      background:white;
      border-radius:8px;
      box-shadow: 1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
      margin:20px;
      padding:4px;
      text-align:center;
  }
  @media only screen and (max-width: 800px) {
      #project{
      width:80%;
      height:480px;
      background:white;
      border-radius:8px;
      box-shadow: 1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
      margin:20px;
      padding:4px;
      text-align:center;
  }
  }
  #project h1{
      text-align:center;
      font-size:20px;
      color:lightslategray;
      font-weight:300;
  }
  #project img{
      width:auto;
      height:280px;
      border-radius:8px 8px 0px 0px;
      box-shadow: 1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
  }
  #project p{
      color:lightslategray;
      font-size:14px;
      margin:10px;
  }
  #title h1, #title-products h1{
      color:lightslategray;
      width:auto;
      max-width:400px;
      margin:auto;
      font-size:20px;
      text-align:center;
      font-weight:300;
      background:white;
      padding:10px;
      border-radius:8px;
      box-shadow: 1px 1px 4px lightgrey;
  }
  #title-products h1{
      box-shadow:none;
      transition: font-size 1s;
      max-width: 600px;
  }
  #title-products h1:hover{
      font-size:28px;
      color:#54ff58;
  }
  #products{
        width:auto;
        height:auto;
        background:white;
        border-radius:8px;
        margin:20px;
        text-align:center;
        margin-top:80px;
  }
  #products img{
    width:240px;
    max-width:800px;
    height:auto;
    margin-bottom:40px;
    margin:auto;
    border-radius:8px;
    box-shadow: 1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
    transition: width 1s, height 2s;
}
hr{
    background: lightslategray;
    color:lightslategray;
}
#products p{
    width:60%;
    height:auto;
    margin:auto;
    color:lightslategray;
    font-size:14px;
    padding:10px;
}
#products h1{
    width:80%;
    height:auto;
    margin:auto;
    text-align:center;
    font-size:20px;
    color:lightslategray;
    font-weight:300;
}
#products img:hover{
    width:280px;
}
@media only screen and (min-width: 1000px) {
    #products{
        width:auto;
        height:280px;
        background:white;
        border-radius:8px;
        margin:20px;
        text-align:center;
        margin-top:80px;
  }
  #products img{
    width:auto;
    float:left;
    height:240px;
    border-radius:8px 0px 0px 8px;
    box-shadow: 1px 1px 4px lightgrey, -1px -1px 4px lightgrey;
    transition: width 1s, height 2s;
}
hr{
    background: lightslategray;
    color:lightslategray;
}
#products p{
    text-align:center;
    font-size:18px;
    color:lightslategray;
    font-weight:300;
    width:auto;
    margin-top:20px;

}
#products h1{
    text-align:center;
    font-size:20px;
    color:lightslategray;
    font-weight:300;
    width:auto;
}
#products img:hover{
    width:auto;
    height:280px;
}
  }
  #pricing #product{
      height:auto;
  }
  #products a{
      color:white;
      background:#54ff58;
      padding:10px;
      border-radius: 8px;
  }
  #pricing{
      overflow:hidden;
      display: flex;
      justify-content: center;
  }
  #value{
      font-size: 40px;
      color: #54ff58;
      font-weight: 400;
      text-align:center;
      width:100%;
      margin:auto;
      padding-top:40px;
      padding-bottom: 40px;
  }
  #pricing #project h1{
      font-size:40px;
  }
  #pricing #project table{
      margin-top:10px;
  }
  #products .re-link{
      background: white;
      color:#54ff58;
      border:1px solid #54ff58;
      transition: box-shadow 1s;
  }
  #products .re-link:hover{
      box-shadow: 2px 2px 6px lightgrey, -2px -2px 6px lightgrey;
  }