/*-------------------------- BANNER --------------------------*/

.banner {
  width: 100%;
  height: 50rem;
  color: var(--color-white);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;
  align-items: center;
}

/*--- UTILITY CLASSES FOR DIFFERENT BACKGROUNDS FOR DIFFERENT PAGES ---*/
.banner--about {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-4.jpg");
  background-position: bottom;
}

.banner--civil-construction {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-civil-construction.jpg");
}

.banner--infrastructure {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-infrastructure.jpg");
  background-position: bottom center;
}

.banner--industry {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-industry.jpg");
  background-position: bottom center;
}

.banner--electrical {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-electrical.jpg");
}

.banner--turnkey {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-turnkey.jpg");
}

.banner--project-management {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-project-management.jpg");
  background-position: center;
}

.banner--contact {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-contact.jpg");
  background-position: center;
}

.banner--sustainable {
  background-image: linear-gradient(to right, rgba(0, 31, 34, 0.5) 0%, rgba(0, 15, 17, 0.6) 100%), url("../../assets/images/bg-6.jpg");
  background-position: center;
}

/*--- BANNER HEADING ---*/
.banner__heading {
  font-size: 10rem;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1.2;
  text-align: center;
  max-width: 80rem;
  margin-bottom: 3rem;
}

@media only screen and (max-width: 27.5em) {
  .banner__heading {
    font-size: 6rem;
  }
}

/*--- BREADCRUMBS TO SHOW THE PAGE NAVIGATION ---*/
.breadcrumb__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.breadcrumb__item {
  font-size: 1.4rem;
  color: inherit;
}

.breadcrumb__link:link,
.breadcrumb__link:visited {
  font-size: 1.4rem;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  gap: 1.5rem;
  transition: all 0.2s;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus {
  color: var(--color-primary-light);
}

.breadcrumb__link > span {
  display: inline-flex;
  position: relative;
}

.breadcrumb__link > span::after {
  content: "";
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-white);
  position: absolute;
  top: 100%;
  left: 0;
  transition: all 0.2s;
}

.breadcrumb__link:hover > span::after,
.breadcrumb__link:focus > span::after {
  background-color: var(--color-primary-light);
}

.breadcrumb__icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: var(--color-white);
}

/*-------------------------- BANNER --------------------------*/