.subpage-section .bold-text{
    color: #000000d1;
    font-weight: 900;
    font-size: 1.4rem;
}

.top-subheading-banner ul {
  --col-gap: 2rem;
  --barH: 1rem;
  --roleH: 2rem;
  --flapH: 2rem;

  /* width: min(60rem, 100%); */
  margin-inline: auto;

  display: flex;
  flex-wrap: wrap;

  gap: var(--col-gap);
  padding-inline: calc(var(--col-gap) / 2);

  justify-content: center;
  align-items: flex-start;
  list-style: none;
}
.top-subheading-banner ul li {
  width: 10em;
  display: grid;
  grid-template:
    "role"
    "icon"
    "title"
    "descr";
  align-items: flex-start;
  gap: 1rem;
  padding-block-end: calc(var(--flapH) + 1rem);
  text-align: center;
  background: var(--accent-color);
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.6) var(--roleH),
    rgba(0, 0, 0, 0.4) calc(var(--roleH) + 0.5rem),
    rgba(0, 0, 0, 0) calc(var(--roleH) + 0.5rem + 5rem)
  );
  clip-path: polygon(
    calc(var(--col-gap) / -2 - 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px) 0,
    calc(100% + var(--col-gap) / 2 + 5px ) calc(100% - var(--flapH)),
    50% 100%,
    calc(var(--col-gap) / -2 - 5px) calc(100% - var(--flapH))
  );
}

/* bar */
.top-subheading-banner ul li::before {
  content: "";
  grid-area: role;
  height: var(--barH);
  width: calc(100% + var(--col-gap));
  margin-left: calc(var(--col-gap) / -2);
  margin-top: calc(var(--roleH) / 2 - var(--barH) / 2);
  background: grey;
  z-index: -1;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.4)
  );
}

/* role */
.top-subheading-banner ul li::after {
  content: "";
  grid-area: role;
  background: var(--accent-color);
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(0, 0, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0.4)
  );
  height: var(--roleH);
}

.top-subheading-banner ul li .icon,
.top-subheading-banner ul li .title,
.top-subheading-banner ul li .descr {
  padding-inline: 1rem;
  color: white;
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}

.top-subheading-banner ul li .icon {
  font-size: 3rem;
}
.top-subheading-banner ul li .title {
  font-size: 1.25rem;
  font-weight: 700;
}

.top-subheading-banner ul li .descr {
  font-size: 0.9rem;
}

.top-subheading-banner .credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}
.top-subheading-banner .credits a {
  color: var(--color);
}

/* ----------------page css------------------------------------------------------------------------------------ */


.subpage-section .top-heading-text {
  font-size: 30px;
}

.top-subheading-banner{
  display: none;
}

.section-details{
  display: flex;
  flex-direction: column-reverse;
}

.section-details2{
  display: flex;
  flex-direction: column;
}

.subpage-section .subheading {
  color: #000000d1;
  font-weight: 600;
}

.subpage-sec-image{
  width: 100%;
}

.sec-image{
  margin-bottom: 20px;
  margin-top: 15px;
}

.industries-image{
  width: 100%;
  border: 3px solid #000;
  border-radius: 16px;
}


@media (min-width: 768px) {
  .top-subheading-banner{
    display: block;
  }
}

@media (min-width: 992px) {
  .section-details{
    flex-direction: row;
    align-items: flex-start;
  }
  .section-details2{
    flex-direction: row;
    align-items: flex-start;
  }
  .industries-image-banner{
    display: flex;
    justify-content: center;
  }
  .industries-image{
    max-width: 1200px;
  }
  .subpage-section .top-heading-text {
    font-size: 63px;
  }
  .subpage-sec-image{
    min-width: 450px;
  }
  .sec-image{
    /* padding-left: 40px; */
  }
  .subpage-desc{
    margin-right: 40px;
  }
  .subpage-desc2{
    margin-left: 40px;
  }
  .subpage-section .subheading {
    font-size: 35px;
  }

  .subpage-sec-image:hover {
    -ms-transform: scale(1.02); /* IE 9 */
    -webkit-transform: scale(1.02); /* Safari 3-8 */
    transform: scale(1.02); 
  }


}

@media (min-width: 1300px) {
  .subpage-sec-image{
    min-width: 500px;
  }
}