* {
   margin: 0;
   padding: 0;
   font-family: "Poppins", sans-serif;
}
.header {
   min-height: 100vh;
   width: 100%;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.815)),
      url(/img/wastewater.png);
   background-position: center;
   background-size: cover;
   position: relative;
}
nav {
   display: flex;
   padding: 2% 6%;
   justify-content: space-between;
   align-items: center;
}
nav img {
   width: 150px;
   height: 150px;
}
.nav-links {
   flex: 1;
   text-align: right;
}
.nav-links ul li {
   list-style: none;
   display: inline-block;
   padding: 8px 12px;
   position: relative;
}
nav .fa {
   display: none;
}

.nav-links ul li a {
   color: #fff;
   text-decoration: none;
   font-size: 16px;
}
.nav-links ul li::after {
   content: "";
   width: 0%;
   height: 3px;
   background: #0adf69;
   display: block;
   margin: auto;
   transition: 0.3s;
}
.nav-links ul li:hover::after {
   width: 100%;
}

.text-box {
   width: 90%;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}
.text-box h1 {
   font-size: 100px;
   text-shadow: 0 0 3px #ed7a15, 0 0 6px #ed7a15;
}
.text-box p {
   margin: 10px 0 40px;
   font-size: 16px;
   color: #fff;
   letter-spacing: 0.2em;
}
.hero-btn {
   display: inline-block;
   text-decoration: none;
   color: #fff;
   border: 1px solid #fff;
   padding: 12px 34px;
   font-size: 13px;
   background: transparent;
   position: relative;
   cursor: pointer;
   border-radius: 12px;
}

.hero-btn:hover {
   border: 1px solid #0adf69;
   background: #0adf69;
   transition: 1.2s;
}

/* Section About us */
.about-content {
   width: 80%;
   margin: auto;
   text-align: center;
   padding: 60px;
}
.about-content h1 {
   font-size: 46px;
   color: #60340c;
}
.about-content p {
   font-size: 20px;
   font-weight: 500;
   line-height: 22px;
   padding: 20px;
   color: #60340c;
   letter-spacing: 3px;
}
.row {
   margin-top: 5%;
   display: flex;
   justify-content: space-between;
   gap: 16px;
}
.content-col {
   flex-basis: 31%;
   border-radius: 12px;
   background: #0adf69;
   margin-bottom: 5%;
   padding: 16px 16px;
   box-sizing: border-box;
   color: #60340c;
}
.content-col h3 {
   text-align: center;
   font-weight: 600;
   margin: 10px 0;
}
.content-col p {
   font-weight: 200;
   font-family: sans-serif;
}
.content-col:hover {
   box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
}

.testimonials {
   width: 80%;
   margin: auto;
   padding-top: 20px;
   text-align: center;
}
.testimonials h1 {
   font-size: 44px;
   color: #60340c;
}
.testimonial-col {
   display: flex;
   flex-basis: 44%;
   border-radius: 10px;
   margin-bottom: 5%;
   text-align: left;
   background-color: #effaeb;
   padding: 25px;
   cursor: pointer;
}

.testimonial-col img {
   height: 60px;
   width: 60px;
   margin-left: 5px;
   margin-right: 30px;
   border-radius: 50%;
}
.testimonial-col p {
   padding: 0;
   font-size: 12px;
}
.testimonial-col h3 {
   margin-top: 15px;
   text-align: left;
}
.testimonial-col .fa {
   color: #ed7a15;
}

.cta {
   margin: 100px auto;
   width: 80%;
   background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.815)),
      url(/img/lab_pipes.jpg);
   background-position: center;
   background-size: cover;
   border-radius: 10px;
   text-align: center;
   padding: 100px 0;
}
.cta h1 {
   color: #fff;
   margin-bottom: 20px;
}
.cta p {
   color: #fff;
   margin-bottom: 40px;
}

.footer {
   width: 100%;
   text-align: center;
   padding: 30px 0;
   background-color: #303030;
}

.footer h4 {
   margin-bottom: 25px;
   margin-top: 20px;
   font-weight: 600;
   color: #fff;
}
.footer p {
   font-weight: 300;
   color: #fff;
}
/* * * * * * * @media queries * * * * * * */

@media (max-width: 700px) {
   .text-box h1 {
      font-size: 20px;
   }
   .nav-links ul li {
      display: block;
   }
   .text-box p {
      font-size: 12px;
      padding: 10px;
      color: #fff;
      text-align: justify;
   }
   .nav-links {
      position: absolute;
      background: #0adf69;
      height: 100vh;
      width: 200px;
      top: 0;
      right: -200px;
      text-align: left;
      z-index: 2;
      transition: 1s;
   }
   nav .fa {
      display: block;
      color: #fff;
      margin: 10px;
      font-size: 22px;
      cursor: pointer;
   }
   .nav-links ul {
      padding: 30px;
   }
   .row {
      flex-direction: column;
      left: -20px;
   }
   .testimonial-col img {
      margin-left: 0px;
      margin-right: 15px;
   }

   .cta h1 {
      font-size: 16px;
   }
}