/* ## Hero Banner section
--------------------------------------------- */
.hero-banner {
  padding: 60px 0 145px;
  background: linear-gradient(
    to right,
    rgba(14, 14, 14, 0.8) 50%,
    transparent 50%
  );
}

.hero-banner .bg-image {
  z-index: -1;
}

.hero-banner .hero-banner-title {
  font-size: 55px;
}

.hero-banner .btn {
  color: var(--black);
  background: var(--yellow);
  padding: 16px 24px;
  margin-top: 40px;
}

.hero-banner .btn:hover {
  background: #fecb3b;
}

/* ## Review section
--------------------------------------------- */
.review {
  margin: -90px 0;
}

.review .container {
  padding: 37px 15px 48px;
}

.review .review-logos {
  margin-top: 26px;
  gap: 50px;
}

/* ## Trusted section
--------------------------------------------- */
.trusted {
  padding: 160px 0 60px;
  background: var(--yellow);
}

.trusted .trusted-text {
  color: var(--black);
}

.trusted .btn {
  background: var(--red);
  margin-top: 32px;
}

.trusted .btn:hover {
  background: #ef4d52;
}

/* ## Services section
--------------------------------------------- */
.services .services-title {
  margin-bottom: 32px;
}

.services .card-body {
  padding: 24px;
}

.services .painter {
  border: var(--light-red);
}

.services .indoor {
  border: var(--blue);
}

.services .outdoor {
  border: var(--yellow);
}

.services .painter .card-body {
  border: var(--light-red);
  background: var(--light-red);
}

.services .indoor .card-body {
  border: var(--blue);
  background: var(--blue);
}

.services .outdoor .card-body {
  border: var(--light-yellow);
  background: var(--light-yellow);
}

.services .outdoor .card-body .card-title,
.services .outdoor .card-body .card-text {
  color: var(--black);
}

.services .btn {
  background: var(--yellow);
  margin-top: 32px;
}

.services .btn:hover {
  background: #fecb3b;
}

/* ## Why Choose Us section
--------------------------------------------- */
.why-choose-us {
  background: var(--blue);
}

.why-choose-us .why-choose-us-text {
  margin-bottom: 32px;
}

.why-choose-us .card-body {
  padding: 24px;
}

.why-choose-us .btn {
  background: var(--yellow);
  margin-top: 32px;
}

.why-choose-us .btn:hover {
  background: #fecb3b;
}

/* ## Orange County section
--------------------------------------------- */
.orange-county .btn {
  background: var(--yellow);
  margin-top: 32px;
}

.orange-county .btn:hover {
  background: #fecb3b;
}

/* ## Success Stories section
--------------------------------------------- */
.success-stories {
  background: rgba(0, 0, 0, 0.4);
}

.success-stories .bg-image {
  z-index: -1;
}

.success-stories .swiper,
.success-stories .swiper-pagination {
  margin-top: 60px;
}

.success-stories .card {
  background: #f9f9f9;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.102);
}

.success-stories .card-body {
  padding: 24px;
}

.success-stories .card-info,
.success-stories .card-title {
  color: var(--black);
  margin-bottom: 32px;
}

.success-stories .card-profile {
  border: 2px solid var(--blue);
}

.success-stories .card-date,
.success-stories .card-location {
  color: #676c71;
}

.success-stories .swiper-pagination-bullet {
  background-color: var(--white);
  width: 16px;
  height: 16px;
  margin: 0 5px;
}

/* ## Our Projects section
--------------------------------------------- */
.our-projects .our-projects-text {
  margin-bottom: 32px;
}

/* ## Get Started section
--------------------------------------------- */
.get-started {
  background: #f9fcfb;
}

.get-started .btn {
  background: var(--yellow);
  margin-top: 32px;
}

.get-started .btn:hover {
  background: #fecb3b;
}

/* ## Mobile Responsiveness
--------------------------------------------- */
@media only screen and (min-width: 992px) {
  .hero-banner .hero-banner-title {
    max-width: 520px;
  }

  .hero-banner .hero-banner-text {
    max-width: 470px;
  }

  .trusted .container {
    max-width: 940px;
  }

  .our-projects .our-projects-title,
  .our-projects .our-projects-text {
    max-width: 760px;
  }

  .orange-county .orange-county-content {
    padding-right: 59px;
  }

  .get-started .get-started-text {
    max-width: 970px;
  }
}

@media only screen and (max-width: 1200px) {
  .hero-banner {
    background: linear-gradient(
      to right,
      rgba(14, 14, 14, 0.8) 60%,
      transparent 60%
    );
  }
}

@media only screen and (max-width: 992px) {
  .hero-banner {
    padding: 50px 0 135px;
    background: linear-gradient(
      to right,
      rgba(14, 14, 14, 0.8) 70%,
      transparent 70%
    );
  }

  .hero-banner .hero-banner-title {
    font-size: 45px;
  }

  .hero-banner .btn {
    padding: 13px 22px;
    margin-top: 30px;
  }

  .review .container {
    padding: 32px 15px 43px;
  }

  .review .review-logos {
    margin-top: 20px;
    gap: 35px;
  }

  .trusted {
    padding: 140px 0 50px;
  }

  .trusted .btn {
    margin-top: 27px;
  }

  .services .services-title {
    margin-bottom: 27px;
  }

  .services .btn {
    margin-top: 27px;
  }

  .why-choose-us .why-choose-us-text {
    margin-bottom: 27px;
  }

  .why-choose-us .btn {
    margin-top: 27px;
  }

  .orange-county .btn {
    margin-top: 27px;
  }

  .success-stories .swiper,
  .success-stories .swiper-pagination {
    margin-top: 40px;
  }

  .success-stories .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
  }

  .our-projects .our-projects-text {
    margin-bottom: 27px;
  }

  .get-started .btn {
    margin-top: 27px;
  }
}

@media only screen and (max-width: 768px) {
  .hero-banner {
    padding: 40px 0 125px;
    background: rgba(14, 14, 14, 0.8);
  }

  .hero-banner .hero-banner-title {
    font-size: 35px;
  }

  .hero-banner .btn {
    padding: 10px 20px;
    margin-top: 20px;
  }

  .review .container {
    padding: 27px 15px 38px;
  }

  .review .review-logos {
    margin-top: 15px;
    gap: 20px;
  }

  .trusted {
    padding: 120px 0 40px;
  }

  .trusted .btn {
    margin-top: 22px;
  }

  .services .services-title {
    margin-bottom: 27px;
  }

  .services .btn {
    margin-top: 27px;
  }

  .why-choose-us .why-choose-us-text {
    margin-bottom: 22px;
  }

  .why-choose-us .btn {
    margin-top: 22px;
  }

  .orange-county .btn {
    margin-top: 22px;
  }

  .success-stories .swiper,
  .success-stories .swiper-pagination {
    margin-top: 20px;
  }

  .success-stories .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }

  .our-projects .our-projects-text {
    margin-bottom: 22px;
  }

  .get-started .btn {
    margin-top: 22px;
  }
}