/* ## 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);
}

/* ## Who We Are section
--------------------------------------------- */
.who-we-are .btn {
  background: var(--yellow);
  margin-top: 32px;
}

.who-we-are .btn:hover {
  background: #fecb3b;
}

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

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

.services .our-mission .card-body {
  background: var(--light-red);
}

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

.services .our-commitment .card-body {
  background: var(--light-yellow);
}

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

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

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

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

  .who-we-are .who-we-are-content,
  .why-choose-us .why-choose-us-content {
    padding-right: 59px;
  }

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

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

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

  .who-we-are .btn,
  .why-choose-us .btn {
    margin-top: 27px;
  }

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

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

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

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

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

  .who-we-are .btn,
  .why-choose-us .btn {
    margin-top: 22px;
  }

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

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

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

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