@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
* {
   box-sizing: border-box;
   font-family: 'Lato', sans-serif;
   margin: 0;
   padding: 0 ;
}

a {
   text-decoration: none;
   color: #72a3b9
}

a:visited {
   color: #97bb8e;
}

a:hover {
   text-decoration: none;
   cursor: pointer;
}  


/* Add a black background color to the top navigation */
.topnav {
   background-color: #fbfbfb;
   overflow: hidden;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
   position: fixed;
   width: 100%;   
   top: 0;
}

/* Style the links inside the navigation bar */
.topnav a {
   float: left;
   display: block;
   color: #1c1c1c;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
   background-color: #fbfbfb;
   color: #97bb8e;
}

/* Add an active class to highlight the current page */
.topnav a.active {

   color: #97bb8e;
   border-bottom: 2px solid #97bb8e;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
   display: none;
}

/* .innernav ul {
   list-style: none;
}

.innernav ul li {
   display: inline-block;
   position: relative;
}

.innernav ul li a {
   display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
      transition: background-color 0.3s;
}

.innernav ul li a:hover {
   background-color: #f4f4f4;
   color: #97bb8e;
}

.innernav ul li ul {
   display: none;
   position: absolute;
   background-color: #fff;
   border: 1px solid #ccc;
   border-top: none;
   z-index: 10;

}

.innernav ul li:hover ul  {
   display: block;
   z-index: 10;
}

.innernav ul li ul li {
   display: block;
   white-space: nowrap;
   z-index: 10;
}

.innernav ul li ul li a {
   display: block;
   padding: 10px;
   text-decoration: none;
   color: #333;
   transition: background-color 0.3s;
   z-index: 10;
}

.innernav ul li ul li a:hover {
   background-color: #f0f0f0;
} */

.logo {
   width: 150px;
   height: 100px;
}



.hero {
   background-image: url('./images/hero.jpg');
   background-size: cover;
   background-position: center;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   text-align: center;
   z-index: 1;
}

.hero-inner {
   color: white
}

.hero-inner h1 {
   font-size: 4em;
   margin-bottom: 0;
}

.hero-inner p {
   font-size: 1.56em;
   margin-top: 0;
}

.btn {
   background-color: #17215c;
   color: white;
   padding: 15px 25px;
   border: none;
   border-radius: 2.5px;
   font-size: 1.2em;
   cursor: pointer;
   margin: 20px 0;
}

.btn a {
   color: white;
   text-decoration: none;
}

.btn:hover {
   background-color: white;
   
}

.btn a:hover {
   color: #17215c;
}  

.fouricons {
   display: flex;
   justify-content: space-around;
   align-content: center;
   flex-direction: row;
   gap: 2rem;
   max-width: 85%;
   margin: 90px auto;
}

.icon img {
   width: 100px;
   height: 100px;
}

.icon {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 250px;
   text-align: center;
}

.goodbye {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 0 auto;
   max-width: 85%;
   gap: 2rem;
}

.goodbye-text {
   max-width: 450px;
   background-color: #92bacc;
   padding: 1.5rem;
   font-size: 1.1em;
      color: #353535;
}

.hero2 {
   margin-top: 100px;
   background-image: url('./images/hero2.jpg');
   background-size: cover;
   background-position: center;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   text-align: center;
   flex-direction: column;
}

.hero2 h1 {
   font-size: 3em;
   display: block;
   margin-bottom: 0;
}

.hero2 p {
   font-size: 1.56em;
   margin-top: 0;
   display: block;
}

.improve {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
      color: #353535;
}

.improve img {
   width: 40%;
   height: 40%;
}

.improve-text {
   max-width: 450px;
   background-color: #92bacc;
   padding: 1.5rem;
}

.help {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 200px auto;
   max-width: 65%;
   text-align: center;
   gap: 2rem;
   font-size: 1.2em;
      color: #353535;
}

.quote {
   font-size: 10rem;
   font-family:Georgia, 'Times New Roman', Times, serif
}

.feedback {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
      color: #353535;

}


.feedback-item {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   width: 500px;
   height: 500px;
   gap: 2rem;
   font-size: 1em;
   background-color: #97bb8e;
      color: white;
      padding: 2rem;
}

.feedback-item img {
   width: 100px;
   height: 100px;
}

.coc {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
      color: #353535;
}

footer {
   background-color: #72a3b9;
}

.footer-inner {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 0 auto;
   max-width: 85%;
   font-size: 1.2em;
      color: #353535;

}

.footerlogo {
   padding-top: 50px;
   width: 250px;
   height: 200px;
   margin: 0 auto;

}

.footer-item {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 35px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
      color: #353535;

}

.footer-item a {
   color: #353535;
   text-decoration: none;
   display:flex;
   justify-content: center;
   align-items: center;
   gap: 1rem;

}

.footer-item img {
   width: 30px;
   height: 30px;

}

#fbicon {
   width: 40px;
   height: 40px;
}

.followus {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 0 auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
      color: #353535;

}

.about {
   padding-top: 100px;
   max-width: 85%;
   margin: 0 auto;
   background: url('./images/wood.jpg');
   background-size: cover;
   background-position: center;
   background-blend-mode: hard-light;
   
   
}

.about-main {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
      color: #353535;


}

.about-text {
   max-width: 600px;
   line-height: 1.75em;
   padding: 1.5rem;
   background-color: bisque;
   color: #353535;
}

.about-cta {
   padding-top: 100px;
}

.about-us {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;
     
}

.about-us h2 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;
}

.contact {
   padding-top: 100px;
   max-width: 85%;
   margin: 0 auto;
}

.contact-us {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   
   gap: 2rem;
   
   color: #353535;
   
}

.contact-us h2 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;
}

.contact-main {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;
     

}

.contact-img {
   width: 40%;
   height: 40%;
}

.contact-text {
   max-width: 600px;
   line-height: 1.75em;
   padding: 1.5rem;
   background-color: #92bacc;
   color: #353535;

}

.contact-form {
   max-width: 600px;
   line-height: 1.75em;
   padding: 1.5rem;
   margin: 0 auto;
   color: #353535;

}

form {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 1rem;
}

input {
   padding: 10px;
   width: 100%;
   box-shadow: 0 0 0 1px #353535;
   border-radius: 5px;
}

textarea {
   padding: 10px;
   width: 100%;
   height: 200px;
   box-shadow: 0 0 0 1px #353535;
   border-radius: 5px;
}

.thanks {
   padding-block: 200px;
   text-align: center;
   font-size: 2rem;
}

.services {
   padding-top: 100px;
   max-width: 85%;
   margin: 0 auto;
}

.servicesh2 {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   gap: 2rem;
   color: #353535;
}

.servicesh2 h2 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;
}

.wholehome {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;

}

.wholehome-text {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 45vw;
   gap: 1rem;
   font-size: 1.2em;
   background-color: #92bacc;
   padding: 2rem;
}

.wholehome-text h2 {
   font-size: 2.1em;
   
}

.wholehome-text h3 {
   font-size: 1.3em;
   color: #2c3831;
}


.wholehome-text p {
   font-size: 1em;
   color: #353535;
}

.wholehome-img img {
   max-width: 40vw;
}

.wholehomeh2 {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   gap: 2rem;
   color: #353535;
}

.wholehomeh2 h2 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;
}

.unpacking, .individual, .assembly {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;

}

.unpacking-text, .assembly-text, .individual-text {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 45vw;
   gap: 1rem;
   font-size: 1.2em;
   background-color: #92bacc;
   padding: 2rem;
}

.unpacking h2, .assembly h2, .individual-text h2 {
   font-size: 2.1em;

}

.unpacking h3, .assembly h3, .individual-text h3 {
   font-size: 1.3em;
   color: #2c3831;
}


.unpacking-text p, .assembly-text p, .individual-text p {
   font-size: 1em;
   color: #353535;
}

.unpacking-img img, .assembly-img img, .individual-img img {
   max-width: 40vw;
}

.unpackingh2, .assemblyh2, .individualh2 {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   gap: 2rem;
   color: #353535;
}

.unpackingh2 h2, .assemblyh2 h2, .individualh2 h2 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;
}

.unpacking-bottom, .assembly-bottom, .wholehome-bottom {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 650px;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;

}

.individual-bottom {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 650px;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;

}

.unpacking-bottom {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 650px;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;

}

.assembly-bottom {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 650px;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;

}

.plates {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 20px auto;
   width: 650px;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;
}

.plates p {
   display: flex;
   border: 2px solid #97bb8e;
   padding: .5rem;
   border-radius: 10px;
   font-size: .9rem;
}


.servicearea {
   padding-top: 200px;
   padding-bottom: 100px;
   max-width: 85%;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

.servicearea h1 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;

}

.servicearea h2 {
   font-size: 2em;
   padding: 35px 50px;

}

.gallery {
   padding-top: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 2rem;
   margin-bottom: 100px;;
}

.gallery h1 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;
   text-align: center;
   margin-bottom: 100px;
}

.gallerycontainer {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 4rem;
   max-width: 85%;
   z-index: -1;
 
}

.galleryimg {
   position: relative;
   z-index: -1;
}

.galleryimg p {
   font-size: 1.2em;
   color: #353535;
   text-align: center;
   position: absolute;
   bottom: 0;
   z-index: 100;
   background-color: #92bacc;
   font-size: 2rem;;
   width: 400px;
   z-index: 1;
}


.galleryimg img {
   width: 400px;
   height: 400px;   
   z-index: -1;
}

.miscimgcontainer {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 4rem;
   max-width: 85%;
   z-index: -1;
 

}

.referrals {
   padding-top: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   

}

.quote {
   font-size: 10rem;
   font-family: Georgia, 'Times New Roman', Times, serif
}

.reviews {
   padding-top: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   max-width: 85%;
   gap: 2rem;
   font-size: 1.2em;
   color: #353535;

}

.reviews h1 {
   font-size: 2.5em;
   padding: 35px 50px;
   border: 2px solid #353535;
}


.review {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin: 100px auto;
   width: 500px;
   height: 500px;
   gap: 2rem;
   font-size: 1em;
   background-color: #97bb8e;
   color: white;
   padding: 2rem;
}

.review img {
   width: 100px;
   height: 100px;
}

.tall {
   height: 600px;
}

.footer-item small {
   font-size: .8rem;
}

.wide {
   width: 1000px;
   height: 700px;
} 

.banner {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   text-align: center;
   font-size: 2rem;
   background-color: #72a3b9;
   padding: 10px;
   max-width: 1000px;
}

@media screen and (max-width: 1400px){
   .about-main {
     flex-direction: column;
   }

   .about-text {
      max-width: 95%;
   }
}

@media screen and (max-width: 1133px){
   .odd { background-color: bisque;
      padding: 2rem;}
   
      .even {
         background-color: #97bb8e;
         padding: 2rem;
      }

      .innernav a {
         font-size: .7rem;
      }
}

@media screen and (max-width: 900px) {
   .fouricons {
      flex-direction: column;
      align-items: center;
   
   }
   
   .innernav a {
      padding: .5rem;
   }
   .goodbye {
      flex-direction: column;
      align-items: center;
   }

   .goodbye img {
      width: 80%;
      height: 80%;
   }

   .improve {
      flex-direction: column;
      align-items: center;
   }

   .feedback {
      flex-direction: column;
      align-items: center;
   }

   .about-main {
      flex-direction: column;
      align-items: center;
   }

   .wholehome {
      flex-direction: column;
      align-items: center;
      
   }

   .wholehome-text {
      max-width: 95%;
   }

   .individual {
      flex-direction: column;
      align-items: center;
   }

   .individual-text {
      max-width: 95%;
   }

   .unpacking {
      flex-direction: column;
      align-items: center;
   }

   .unpacking-text {
      max-width: 95%;
   }

   .assembly {
      flex-direction: column;
      align-items: center;
   }

   .assembly-text {
      max-width: 95%;
   }

   .wide {
      width: 100%;
      height: 700px;
   }

   .contact-main {
      flex-direction: column;
      align-items: center;
   }

   .contact-img {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
   }

     
}

@media  screen and (max-width: 700px){
   .plates {
      max-width: 95%;
   }

   .servicearea iframe {
      width: 95%;
      
   }

   .followus {
      flex-direction: column;
      align-items: center;
   }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 764px) {
   .topnav a:not(:first-child) {
      display: none;
   }

   .topnav a.icon {
      float: right;
      display: block;
   }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 764px) {
   .topnav.responsive {
      position: relative;
   }

   .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
   }

   .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
   }

   .wide {
      width: 95%;
      height: 900px;
   }

   .feedback-item {
      width: 95%;
      height: 100%;
   }
}

@media screen and (max-width: 600px){
   .odd,
      .even {
         width: 100%;
         padding-inline: 0;
      }
   
      .gallerycontainer {
         max-width: 100%;
      }

      .galleryimg img {
         width: 350px;
         height: 350px;
      }

      .galleryimg p {
         width: 350px;
      }
}

@media screen and (max-width: 500px) {
   .review {
      width: 95%;
      height: 100%;
   }

   .coc img {
      width: 100%;
      height: 100%;
   
   }
}

@media screen and (max-width: 375px) {
   .galleryimg img {
         width: 250px;
         height: 250px;
      }
   
      .galleryimg p {
         width: 250px;
      }

      .hero-inner h1 {
         font-size: 2.5em;
         padding-bottom: 3rem;;
      }

      .hero-inner p {
         font-size: 1.2em;
         padding: 3rem;
      }

      .hero2 h1 {
         font-size: 2.5em;
         padding-bottom: 3rem;;
      }
}