/* * { outline: 1px dashed #f003 } */

body {
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f8f8f8;
  color: #444;
}

.modal-backdrop {
  --bs-backdrop-bg: #fff;
}

footer {
  background: #fff;
}

.navbar.fixed-top {
  background-color: #fffc;
  backdrop-filter: blur(calc(var(--bs-body-font-size) * .25));
}
.dropdown-menu {
  --bs-dropdown-min-width: 5rem;
  margin: 0 auto;
  max-width: 6rem;
}
.navbar-brand {
  font-size: 0;
}
.navbar-brand img {
  width: auto;
  height: 2rem;
}

main {
  padding-top: 3.5rem;
  min-height: calc(100vh - 2rem);
}

section .container {
  margin: 5rem auto;
}

h2,
h3 {
  margin-bottom: 2rem;
  text-align: center;
}
h2 {
  font-weight: 700;
}
h4 {
  margin-bottom: 1.75rem;
  font-weight: 500;
}

.flex-column h5 {
  margin: 1.25rem 0 1rem;
}

section.cover {
  position: relative;
  margin-top: -3.5rem;
  height: 100vh;
  background-color: #000;
  background-image:
    linear-gradient(#000, #0000 28%, #0000 90%, #f8f8f8),
    url("cover.png")
  ;
  background-size: cover;
  background-position: center;
}
section.cover h2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  bottom: auto;
  text-align: center;
  font-size: 4vh;
  color: #fff;
}

.layer .trigger {
  position: relative;
  margin: -11vw -3rem -6vw;
  padding-top: 25vw;
  height: 50vw;
}
.layer .trigger .aos-init {
  transform: none;
  transition-property: all;
  opacity: .1;
}
.layer .trigger .aos-init.aos-animate {
  opacity: 1;
}
.layer .trigger>div {
  height: 4vw;
  max-height: 5vh;
}
.layer .trigger>div>div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.layer .trigger>div>div>div {
  width: 100%;
  height: 100%;
}
.layer .trigger span {
  position: relative;
  margin: auto;
  width: 24vw;
  height: 24vw;
  border-radius: 1vw;
  border-width: 0 0 .25vw .25vw;
  border-style: solid;
  border-color: #0009;
  background-size: cover;
}
.layer .trigger>div:nth-child(6) span { color: #f64; border: 1px solid #f640; background-image: url("layer1.png"); }
.layer .trigger>div:nth-child(5) span { color: #cfe; border: 1px solid #cfe0; background-image: url("layer2.png"); }
.layer .trigger>div:nth-child(4) span { color: #89c; background-color: #89ce; }
.layer .trigger>div:nth-child(3) span { color: #8c9; background-color: #8c9e; }
.layer .trigger>div:nth-child(2) span { color: #678; background-color: #678e; }
.layer .trigger>div:nth-child(1) span { color: #fff; background-color: #fffe; }
.layer .trigger>div:nth-child(6) span { width: 80vw; height: 40vw; }
.layer .trigger>div:nth-child(5) span { width: 80vw; height: 40vw; }
.layer .trigger>div:nth-child(4) span { transform: scaleY(50%) rotate(-45deg) translate( 10%,-10%); }
.layer .trigger>div:nth-child(3) span { transform: scaleY(50%) rotate(-45deg) translate(-10%, 10%); }
.layer .trigger>div:nth-child(2) span { transform: scaleY(50%) rotate(-45deg) translate(-30%, 30%); }
.layer .trigger>div:nth-child(1) span { transform: scaleY(50%) rotate(-45deg) translate(-60%, 60%); }
.layer .trigger span::before {
  position: absolute;
  text-transform: uppercase;
}
.layer .trigger>div:nth-child(6) span::before { font-size: 2.6vw; content: "sweat";    left: 64%; bottom: 1vw; }
.layer .trigger>div:nth-child(5) span::before { font-size: 2.6vw; content: "rain";    right: 70%;    top: 5vw; }
.layer .trigger>div:nth-child(4) span::before { font-size: 3vw;   content: "upper";    left: calc(100% - .5rem); top: calc(100% - .5rem); }
.layer .trigger>div:nth-child(3) span::before { font-size: 3vw;   content: "membrane"; left: calc(100% - .5rem); top: calc(100% - .5rem); }
.layer .trigger>div:nth-child(2) span::before { font-size: 3vw;   content: "linning";  left: calc(100% - .5rem); top: calc(100% - .5rem); }
.layer .trigger>div:nth-child(1) span::before { font-size: 3vw;   content: "skin"; right: calc(100% - .5rem); bottom: calc(100% - .5rem); }

.py-3 .layer .trigger>div:nth-child(5) span { filter: invert(1) brightness(5) contrast(.2) hue-rotate(250deg); }
.py-3 .layer .trigger>div:nth-child(1) span { color: #999; background-image: linear-gradient(225deg, #aab, #f0f0f1 70%); }
.py-3 .layer .trigger>div:nth-child(5) span::before { font-size: 2.6vw; content: "rain"; right: 68%; top: 26%; }

@media (orientation: portrait) {
  .layer .trigger {
    height: 62.5vh;
    overflow: hidden;
  }
  .layer .trigger>div>div {
    transform: scale(1.375);
  }
}

.material .row button[data-bs-toggle="modal"] {
  margin: 0 auto;
  padding: 0;
  max-width: 28rem;
  text-align: left;
  border: none;
  background: none;
}
.material .card {
  border-width: .125rem .5rem .5rem;
  border-color: #fff;
  overflow: hidden;
}
.material .card>div {
  border: 0;
  background: #fff;
}
.material .card-header,
.material .card-body {
  padding: 0;
}
c.material .card-header {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  inset: 0;
  border: 0;
  background: linear-gradient(#0000 70%, #fff);
}
.material img {
  display: block;
  margin: 0 -15%; 
  width: 130%;
}
.material h4 {
  margin: 0;
  text-align: center;
}
.material h4 span {
  display: inline-block;
  padding: .5rem 0;
}

/* .border:has(.layer)          { transform: skewX(-4deg) } */
/* .border:has(.layer) .trigger { transform: skewX( 4deg) } */
/* .material .card              { transform: skewX(-4deg) } */
/* .material .card>div          { transform: skewX( 4deg) } */

.step {
  height: 36rem;
  background-color: #000;
  background-image:
    linear-gradient(#0006, #000b),
    url("step.jpg")
  ;
  background-size: cover;
  background-position: center;
  color: #fff;
}

ul.iconlist {
  margin-bottom: -1rem;
}
ul.iconlist:not(.nav) li {
  display: inline-block;
  padding: 0 1rem 1rem;
}
ul.iconlist span {
  display: block;
  text-align: center;
}
ul.iconlist span.icon {
  padding: 0 1rem;
}
ul.iconlist img {
  margin: .5rem;
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}
ul.iconlist .disabled img {
  opacity: .2;
  filter: grayscale(1);
}
.blend {
  mix-blend-mode: multiply;
}

.diagram {
  max-width: 60rem;
}
.diagram>div>div:nth-child(1),
.diagram>div>div:nth-child(2),
.diagram>div>div:nth-child(3),
.diagram>div>div:nth-child(4) {
  position: absolute;
  top: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  width: 50%;
  right: 12%;
}
.diagram>div>div:nth-child(1)::before,
.diagram>div>div:nth-child(1)::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
}
.diagram>div>div:nth-child(1),
.diagram>div>div:nth-child(1)::before {
  border: .5rem solid;
  color: #2d15cbaa;
}
.diagram>div>div:nth-child(1)::before {
  margin: -.5rem;
  transform:  translateX(-52%);
}
.diagram>div>div:nth-child(2) {
  right: auto;
  left: 12%;
}
.diagram>div>div:nth-child(2)::before,
.diagram>div>div:nth-child(3)::before,
.diagram>div>div:nth-child(4)::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.diagram>div>div:nth-child(2)::before,
.diagram>div>div:nth-child(3)::before {
  margin: .875rem;
  border: .125rem dashed;
  color: #ccc;
}
.diagram>div>div:nth-child(4)::before {
  margin: 1.375rem;
  border: .125rem solid;
  color: #970;
}
.diagram>div>div:has(strong) {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  inset: 0;
  left: 15%;
  right: 15%;
}
.diagram strong {
  display: inline-block;
  width: 9rem;
  font-size: 1.5rem;
}
.diagram_l strong {
  font-size: 2rem;
}
@media (max-width: 992px) {
  .diagram strong {
    width: 9rem;
    font-size: 1rem;
  }
  .diagram_l strong {
    font-size: 1.5rem;
  }
}
@media (max-width: 768px) {
  .diagram>div>div:nth-child(1),
  .diagram>div>div:nth-child(1)::before {
    border: .375rem solid;
  }
  .diagram strong {
    width: 8rem;
    font-size: .8rem;
  }
  .diagram_l strong {
    font-size: 1.25rem;
    margin-bottom: .625rem;
  }
}
@media (max-width: 576px) {
  .diagram strong {
    width: 7rem;
    font-size: .7rem;
  }
  .diagram_l strong {
    font-size: 1rem;
    margin-bottom: .75rem;
  }
}
.diagram>div>div:nth-child(6) {
  position: absolute;
  left: 3%;
  top: 5%;
}
.diagram>div>div:nth-child(7) {
  position: absolute;
  right: 3%;
  bottom: 5%;
}
.diagram>div>div:nth-child(6) .badge {
  border: .25rem solid;
  color: #2d15cbaa;
  font-size: 2rem;
}
.diagram>div>div:nth-child(7) .badge {
  border: .25rem solid;
  color: #970;
  font-size: 1.25rem;
}

.table-bordered.text-center {
  font-size: .8em;
}
.table-bordered caption {
  text-align: right;
}
.table-bordered .table-active {
  --bs-table-color-state: #fff;
  --bs-table-bg-state: #2d15cbcc;
}
.table-bordered .badge {
  font-size: .75rem;
  position: absolute;
  transform: translate(.625rem, 1.125rem);
}
.table-bordered:has(.badge) th:nth-child(n+2) {
  width: 27.5%;
}
@media (max-width: 576px) {
  .table-bordered .badge {
    transform: translate(-6rem, 1.125rem);
  }
}

.overflow-hidden img {
  object-fit: cover;
}
.overflow-hidden img+span.badge {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
}

.chart {
  /* aspect-ratio: 16 / 7; */
  min-height: 20rem;
  border: 1px solid #dee2e6;
  background-color: white;
}

.nav {
  --bs-nav-link-color: #2d15cb;
  --bs-nav-link-hover-color: #2d15cbcc;
}