@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("shutter-concrete-min.jpg");
  height: 500px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar > * {
  text-decoration: none;
  color: #252323;
}
.concrete-steps {
  margin: 5em 0;
  gap: 1em;
}
a {
  padding: .75em;
  border-radius: 5px;
}
.open-menu a:hover  {
  color: #14BCE3;
}
.navbar a:hover, .navbar .active {
  background-color: #14BCE3;
}
button, a {
  transition: all .4s ease;
}
.open-menu a:hover  {
  color: #14BCE3;
}
button, .services-quote-btn {
  background-color: #14BCE3;
  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: #14BCE3;
  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: #14BCE3;
  color: #252323;
}
.promo-call-btn .booking-link {
  background-color: white;
  color: #252323;
  display: block;
  padding: 0;
}

.call-btn {
  background-color: #252323;
  color: #14BCE3;
  width: 11em;
}
.call-btn:hover, .quote-btn:hover {
  background-color: #252323;
  color: white;
}
.logo {
   height: 100%;
   width: 100%;
}
.logo-container {
  margin: 1em;
  height: 10em;
  width: 12em;
  background-image: url("ohiopremium-logo-digital.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;
}
.services {
  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(shutter-concrete-service-min.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#deck {
  background-image: url(deck.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
#house {
  background-image: url(house.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#roof {
  background-image: url(roof.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: #252323;
  color: #14BCE3;
  opacity: .9;
  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;
}
.services-general > *{
  font-size: 1.5em;
}
.services-important {
  font-size: 1.5em;
  font-weight: bold;
}
.banner-btn-container {
  width: 70%;
  background-color: rgb(37, 35, 35, .8);
  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: 847e89;
  color: #252323;
}
.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;
  background-color: #14BCE3;
  color: #252323;
  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: #14BCE3;
} */
.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: #14BCE3;
  height: 25em;
  width: 100%;
  background-position: center;
}
.satisfaction-jpg {
  height: 18em;
}

.works-step {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  height: 200px;
}
.pricing {
  padding: 5em 6em;
  gap: 2em;
  min-height: 90vh;
  justify-content: start;
}
.footer {
  background-color:#252323;
  width: 100%;
  height: 10em;
  box-shadow: inset;
  color: #FFFFFF;
}
.contact-link {
  color: white;
}
.contact-link:hover {
  color: white;
  background-color: none;
  color: #14BCE3;
}
.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: 1em;

}
.booking-link {
  text-decoration: none;
  color: #14BCE3;
  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;

}
.bef-aft {
  height: 400px;
  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("neildw3.jpeg");
}
.bef-aft2 {
  background-image: url("kentroof1.jpg");
}
.bef-aft3 {
  background-image: url("kententrance.jpg");
}
.bef-aft4 {
  background-image: url("kentdriveandroof1.jpg");
}
.bef-aft5 {
  background-image: url("neilsw.jpeg");
}
.bef-aft6 {
  background-image: url("alexpatio1.jpeg");
}
.bef-aft7 {
  background-image: url("neildw2.jpeg");
}
.bef-aft8 {
  background-image: url("brickchimney.jpeg");
}
.bef-aft9 {
  background-image: url("laurenbrickandgutter.jpeg");
}
.bef-aft10 {
  background-image: url("laurensidewindow.jpeg");
}
.bef-aft11 {
  background-image: url("neildw1.jpeg");
}

.bef-aft12 {
  background-image: url("kentfull.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: 0;
  }

  .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%;
}