@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Oxygen', sans-serif;
}

.App {
  text-align: center;
  background-color: #FFFFFF;
  color: #252323;
}
.navlinks {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #252323;
  gap: 1em;
}
.navlinks a {
  color: #252323;
  text-decoration: none;
  padding: .75em;
  border-radius: 5px;
}
.navbar {
  display: flex;
  justify-content: space-around;
  height: 11em;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
  width: 100%;
  padding: 0 1em; 
}

.banner {
  background-image: url("kitchen.jpg");
  height: 500px;
  width: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar > * {
  text-decoration: none;
  color: black;
}
.concrete-steps {
  margin: 5em 0;
  gap: 1em;
}
a {
  padding: .75em;
  border-radius: 5px;
}
/* .open-menu a:hover  {
  color: #244D31;
} */
.navbar a:hover, .navbar .active {
 text-decoration: underline;
}
button, a {
  transition: all .4s ease;
}
.open-menu a:hover  {
  color: #244D31;
}
button, .services-quote-btn {
  background-color: #244D31;
  border-radius: 5px;
  border: none;
  padding: 1em;
  color: #252323;
  font-weight: bold;
  text-decoration: none;
  font-size: 13.33px;
  font-size: 13.33px;
}

.services-quote-btn {
  background-color: #244D31;
  border-radius: 5px;
  border: none;
  padding: 1em;
  color: #252323;
  font-weight: bold;
  text-decoration: none;
  font-size: 13.33px;
}
.services-quote-btn:hover {
  background-color: #252323;
  color: white;
}
.promo {
  color: #FFFFFF;
  background-color: #252323;
  width: 100%;

}
.promo h4 {
  padding: 1em;
}
.promo-call-btn {
  background-color: white;
  padding: 1em;
  width: 11em;
}

.promo .quote-btn:hover {
  background-color: #244D31;
  color: #252323;
}
.promo-call-btn .booking-link {
  background-color: black;
  color: #ffffff;
  display: block;
  padding: 0;
}
.call {
  color: #ffffff;
  text-decoration: none;
}
.call-btn {
  background-color: black;
  color: #ffffff;
  width: 11em;
}
.white-call-btn {
  background-color: #ffffff;
  width: 11em;
}
.white-call-btn a {
  color: black;
  font-size: 1.25em;
}

.logo {
   height: 100%;
   width: 100%;
}
.logo-container {
  margin: 1em;
  height: 10em;
  width: 12em;
  background-image: url("pinehilllogo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;
}
.flooring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
  color: #252323;
  margin-bottom: 2em;
}
.services-grid-item {
  background-color: #252323;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30em;
  flex: 1 0 0;
}
#driveway {
  background-image: url("floor.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}
#deck {
  background-image: url("bath.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}
#house {
  background-image: url("painting.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#roof {
  background-image: url("kitchen-remodel.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#fence {
  background-image: url(fence.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
#paint {
  background-image: url(paint.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
#rust {
  background-image: url(rust.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
.service-description {
  background-color: #244D31;
  color: #ffffff;
  opacity: .7;
  padding: 1em;
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5em;
}
.services-general {
  background-color: #70798C;
  color: #282c34;
  padding: 10em;
  display: flex;
  flex-direction: column;
}
#flooring-1 {
  background-image: url(elevate.png);
  background-position: center;
  background-size: cover;
  background-repeat: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50vw;
  height: 100%;
}
#remodeling-1 {
  background-image: url(kitchen.png);
  background-repeat: none;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60vw;
  height: 100%;
  background-position: center;
}
#remodeling-1 > * {
  height: fit-content;
  width: fit-content;
  background-color: rgba(255, 255, 255, 0.735);
  padding: 1em;
}

#painting-1 {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('paint-green.png');
  background-position: center;
  background-size: cover;
  background-repeat: none;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
  width: 50vw;
  height: 100%;
}

#flooring-1 > div {
  color: white;
}
#flooring-2 {
  width: 50vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 1em;
  background-color: #244d3174;
  color: black;
}
#flooring-2 > div > p {
  font-size: 16px;
}
#flooring-3 {
  background-color: white;
  color: black;
}
#flooring-1 > div {
  padding-top: 5em;
  padding-bottom: 5em;
}
.services-general > *{
  font-size: 1.5em;
}
.services-important {
  font-size: 1.5em;
  font-weight: bold;
}
.flooring-container {
  width: 100vw;
  height: fit-content;
}
.top-flooring-div {
  display: flex;
  flex-direction: column;
  width: 100vw;

  justify-content: center;
  align-items: center;
  height: 40em;
}

.plank-couch-description {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%;
  justify-content: center;
  gap: 3em;
  align-items: space-between;
}
.banner-btn-container {
  width: 70%;
  background-color: rgba(10, 23, 14, 0.7);
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  flex-direction: column;
  padding: 3em;
  gap: 1em;
}
#floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50vw, none));
  /* grid-gap: 10px; */
  width: 100%;
  margin: 0 auto;
}
.flooring-top {
  height: 20em;
  width: 100vw;
  display: flex;
  justify-content: center;
}
@media (max-width: 750px) {
  .flooring-top {
    flex-direction: column; /* Change to vertical layout */
    height: fit-content;
    width: 100%;
    
  }
  #flooring-1, #painting-1 {
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #flooring-2 {
    width: 100%;
  }
  #painting-1 {
    padding: 4em;
  }
  #remodeling-1 {
    width: 100%;
    padding-top: 4em;
    padding-bottom: 4em;
    padding-left: .5em;
    padding-right: .5em;
  }
}
#choose-lvp {
  /* padding: 3em; */
  /* background-color: #244d3174; */
  display: flex;
  flex-direction: row;
  width: 100%;
}
#choose-description {
  width: 100%;
  padding: 3em;
  background-color: #244d3174;
}
#choose-samples {
  width: 50%;

  background-image: url('planksamples.png');
  background-size: cover; 
  background-position: center;
  
}
#flooring-3 {
  padding: 2em;
  background-color: white;
  color: #0d1b11;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#floor-grid > div {
  font-size: 20px;
  text-align: center;
}
.blue-window {
  width: 70%;
  background-color: rgb(10, 23, 14, 0.7);
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  flex-direction: column;
  padding: 3em;
  gap: 1em;
}
.promo-btns {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 2em;
  padding: 2em;
}
h1, h2 {
  font-family: 'Titillium Web', sans-serif;
}
.banner-btn-container h2 {
  color: #ffffff;
}
.banner-btn {
  background-color: #ffffff;
  color: black;
}
.concrete-steps {
  width: 65%;
}
.mobile-info {
  display: none;
}
.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.step-icon {
  height: 5em;
  width: 3em;
  color: 847e89;
}

.hamburger-icon {
  width: 12em;
  height: 2em;
}
.quote-btn {
  width: 11em;
  color: black;
  border-radius: 5px;
  border: none;
  padding: 1em;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  display: block;
  text-align: center;
}
/* .navlinks {
  height: 100%;
}
.navlinks > a {
  height: 100%;
  text-align: center;
} */
.nav-btns {
  display: flex;
  justify-content: center;
  height: 100%;
  margin: 1em 0;
  gap: .5em;
  width: 12em;
}
/* .hamburger-icon {
  width: 96px;
} */
.quote-form-container {
  width: 80%;
  display: flex;
  gap: 3em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.quote-form {
  display: flex;
  flex-direction: column;
  padding: 5em 3em;
}
.quote-form label {
  width: 15em;
  text-align: start;
}
.quote-form input {
  width: 20em;
  height: 2em;
}

@media screen and (min-width: 700px) {
  .form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
  }
  .check-col {
    width: 30em;
    margin: 0 auto;
  }
}

.job-form-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2em;
  /* min-width: 430px; */
}

/* .quote-form-container {
  background-color: 847e89;
} */
input, textarea {
  background-color: #FFFFFF;
  border: 1px solid #252323;
  accent-color: #929191;
}

.form-row {
  margin-top: .5em;
}
.text-area {
  margin: 2em;
  gap: 1em;
}
.quote-submit-btn {
  background-color: #252323;
  color: #FFFFFF;
}
textarea {
  width: 370px;
  height: 6em;
  font-family: sans-serif;
}
.job-type-label {
  text-align: start;
}
.quote-form .text-center {
  text-align: center;
}
.open-menu {
  background-color: #252323;
  width: 100%;
}
.open-menu > * {
  color: #FFFFFF;
  text-decoration: none;
  padding: 1em;
}
.check-col {
  margin-top: 2em;
}
.contact-container {
  margin-bottom: 2em;
}
.quote-form h1 {
  margin-bottom: 2em;
}
.service-info {
  background-color: white;
  border-bottom: 2x solid white;
  display: flex;
  flex-direction: column;
  gap: 2em;
  color: #252323;
  align-items: center;
  justify-content: center;
  flex: 1 0 0;
  width: 100%;
}
.service-info p {
  padding: 2em;
}
.service-info li p {
  padding: 0;
}

.service-info ul {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  width: 70%;
  list-style: none;
}
.what-we-clean h3 {
  margin-bottom: 2em;
}
.services-container {
  padding-top: 5em;
  /* gap: 2em;  */
  display: flex;
  flex-direction: column;
  width: 100%;
}
.service-container {
  background-color: #252323;
  color: #FFFFFF;
  width: 100%;
  height: 30em;
  display: flex;
  flex-direction: row;
}

.how-it-works {
  display: flex;
  flex-direction: column;
  gap: 2em;
  padding-top: 5em;
  width: 100%;
}
/* .services {
  text-decoration: underline 3px;
  text-decoration-color: #244D31;
} */
.satisfaction {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #dbdbdb;
  background: linear-gradient( rgba(23, 25, 25, .5), rgba(0, 0, 0, 0.9) ), url("shutter-brick-min.jpg");
  background-size: cover;
  color: #252525;
  padding: 2em;
  gap: 2em;
  color: #244D31;
  height: 25em;
  width: 100%;
  background-position: center;
}
.satisfaction-jpg {
  height: 18em;
}

.works-step {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 300px;
  width: 300px;
  min-width: 400px;
}
.pricing {
  padding: 5em 6em;
  gap: 2em;
  min-height: 90vh;
  justify-content: start;
}
.footer {
  background-color:#244d3174;
  width: 100%;
  height: 10em;
  box-shadow: inset;
  color: #252323;
}
.contact-link {
  color: #252323;
}
.contact-link:hover {
  color: white;
  background-color: none;
  color: #244D31;
}
.footer-item {
  flex: 1 1 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cert-logo {
  height: 9em;
  margin: 0 auto;
}
.banner .quote-btn:hover {
  background-color: white;
  color: #252323;
}
.contact-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.mission-container {
  height: 20em;
  padding: 1em 4em;
  color: #FFFFFF;
  background-color: #252323;
}
.hiw-root {
  padding: 5em 2em;
}
.main-steps {
  gap: 3em;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.booking-link {
  text-decoration: none;
  color: #244D31;
  text-align: center;
}
.nav-btns .booking-link:hover {
  color: white;
  background-color: #252323;
}
.contact-link-main {
  color: #252323;
  padding: 0;
}
.padding-top {
  padding-top: 5em;
}
.slick-slider {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-x: visible;
  overflow-y: visible;
  width: 90%;
  margin: 0 auto;
}
/* .slick-list {
  width: 50%;
  margin: 0 auto;
} */
.image-slick-div {
  width: 100%;
  margin-top: 3em;
  margin-bottom: 3em;

}
.image-slick-div > h1 {
  margin-bottom: 2em;

}
.face-copy {
  display: flex;
  flex-direction: column;
  justify-content:  center;
  align-items: center;
  height: 100%;

}
.bef-aft {
  height: 500px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: none;
  padding-bottom: 4em;
}

.bef-aft1 {
  background-image: url("gibbs-basement-bath.jpg");
}
.bef-aft2 {
  background-image: url("gibbs-kitchen.jpg");
}
.bef-aft3 {
  background-image: url("gibbs-basement.jpg");
}
.bef-aft4 {
  background-image: url("bk.jpg");
}
.bef-aft5 {
  background-image: url("gibbs-bar.jpg");
}

.slick-prev:before, .slick-next:before {
  color: #252323 !important;
}
.test {
  height: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.test-text {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
  width: 80%;
  margin-bottom: 2em;
}
.test-parent {
  background-color: rgb(246, 245, 245);
}
@media screen and (max-width: 500px) {
  .banner-btn-container {
    padding: 1em;
  }
  
  .checkbox-container input{
    width: 3em;
  }
}
@media screen and (max-width: 650px) {
  .nav-btns {
    display: none;
  }
  .mobile-info {
    display: block;
  }
  .promo-btns {
    display: flex;
  }
}
@media screen and (max-width: 790px) {
  .satisfaction {
    flex-direction: column;
  }
  .satisfaction-jpg {
    height: 10em;
  }
}
@media screen and (max-width: 588px) {
  .copyright {
    display: none;
  }
}
@media screen and (max-width: 1080px) {
  .contact-container {
    flex-direction: column;
    width: min-content;
    word-wrap: break-word;
  }
  .divider {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  .service-container {
    display: flex;
    height: 100%;
    flex-direction: column;
    background-color: #252323;
    
  }
  /* .main-steps {
    flex-direction: column;
    gap: 2em;
  } */

  .service-info {
    padding: 1em;
  }
  .services-container {
    gap: 0;
  }
  .services-grid-item {
    height: 40em;
    
  }
}
  @media screen and (max-width: 375px) {
    .banner-btn-container {
      width: 95%;
    }
}
/* @media screen and (max-width: 1000px) {
  .navbar {
    flex-direction: column;
  }
} */
@media screen and (min-width: 1000px) {
  .works-step {
    height: none;
  }

}
.email-foot {
  word-wrap: break-word;
  width: 100%;
}
.work-step-1 {
  background-image: url("elevate.png");
  background-repeat: none;
  background-size: cover;
  background-position: center;
}
.work-step-2 {
  background-image: url("painting.png");
  background-repeat: none;
  background-size: cover;
  background-position: top;
}
.work-step-3 {
  background-image: url("kitchen.png");
  background-repeat: none;
  background-size: cover;
  background-position: middle;
}
.work-step-4 {
  background-image: url("bath.png");
  background-repeat: none;
  background-size: cover;
  background-position: bottom;
}
.plank-couch {
  background-image: url("elevate.png");
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}