/* ## Hero Banner section
--------------------------------------------- */
.hero-banner {
  padding: 53px 0 96px;
}

.hero-banner .hero-banner-title-container {
  font-size: 55px;
  padding: 40px;
  background: rgba(14, 14, 14, 0.8);
}

/* ## Image Content section
--------------------------------------------- */
.image-content .btn {
  background: var(--yellow);
  margin-top: 32px;
}

.image-content .btn:hover {
  background: #fecb3b;
}

/* ## Process section
--------------------------------------------- */
.process .process-text {
  margin-bottom: 32px;
}

.process .card {
  padding: 25px;
}

.process .consultation-color {
  background: var(--light-red);
}

.process .surface-preparation {
  background: var(--blue);
}

.process .professional-painting {
  background: var(--light-yellow);
}

.process .post-project {
  background: var(--black);
}

.process .card-body {
  padding: 15px;
}

.process .professional-painting .card-title,
.process .professional-painting .card-text {
  color: var(--black);
}

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

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

/* ## Why Choose Us section
--------------------------------------------- */
.why-choose-us .btn {
  background: var(--yellow);
  margin-top: 32px;
}

.why-choose-us .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;
}

/* ## 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: 481px;
  }

  .transform .transform-content,
  .why-choose-us .why-choose-us-content {
    padding-right: 59px;
  }

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

@media only screen and (max-width: 992px) {
  .hero-banner {
    padding: 48px 0 76px;
  }

  .transform .btn,
  .why-choose-us .btn,
  .process .btn,
  .get-started .btn {
    margin-top: 27px;
  }

  .process .process-text {
    margin-bottom: 27px;
  }

  .process .card-body {
    padding: 10px;
  }
}

@media only screen and (max-width: 768px) {
  .hero-banner {
    padding: 43px 0 56px;
  }

  .transform .btn,
  .why-choose-us .btn,
  .process .btn,
  .get-started .btn {
    margin-top: 22px;
  }

  .process .process-text {
    margin-bottom: 27px;
  }

  .process .card-body {
    padding: 5px;
  }
}