/* * { 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,
h6 {
  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; */
  width: 100%;
  max-height: 56.25vw;
  aspect-ratio: 16 / 9;
  background-color: #333;
  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);
  }
}

.card-character .card,
.card-character .card-header {
  border: 0;
  background-color: transparent;
}
.card-character .card {
  height: 100%;
}
.card-character .card .card-body {
  --bs-card-spacer-x: 1.75rem;
  border: .25rem solid #f3cfaf;
  border-radius: 3rem;
  background: #fff;
  overflow: hidden;
}
.card-character .card .card-body img {
  height: 14rem;
  object-fit: contain;
}
.card-character .card hr {
  border-top: .25rem solid #f3cfaf;
  border-radius: .125rem;
  opacity: 1;
}

.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;
}

.material2 {
  padding-bottom: 1px;
}
c.material2:last-child {
  background: linear-gradient(#0000, #0001);
}
.material2 img {
  max-width: 100%;
}
.material2 .card {
  border: 0;
  background: transparent;
}
.material2 h4 {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-top: 1rem;
  margin-left: .75rem;
  margin-bottom: 0;
  padding: .5rem .75rem;
  border-radius: 1rem;
  background: #5744d5;
  color: #fff;
}
@media(min-width: 1199.98px) and (max-width: 1399.98px) {
  .material2 h4 {
    font-size: 1.3rem;
  }
}

.material2 .bubble {
  position: relative;
  margin-top: -1.25rem;
  padding: 1.75rem 1.25rem 1rem;
  border-radius: 1.5rem;
  background: #fff;
}
.material2 .bubble::before,
.material2 .bubble::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 60%;
  width: 1.5rem;
  border-width: .75rem;
  border-style: solid;
  border-color: transparent;
  border-right-color: #fff;
  border-top-color: #fff;
  transform: skew(30deg);
}
.material2 .bubble::before {
  top: calc(100% + .125rem);
  border-right-color: rgba(0, 0, 0, 0.075);
  border-top-color: rgba(0, 0, 0, 0.075);
  filter: blur(.125rem);;
}
.material2 .card-body button {
  position: relative;
  border: none;
  background: none;
}
.material2 button img {
  border-radius: .25rem;
}
.material2 button .bi {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  fill: #fff;
  opacity: .8;
  backdrop-filter: blur(calc(var(--bs-body-font-size)* .5));
  transition: all .3s;
}
.material2 button:hover .bi {
  opacity: 1;
  backdrop-filter: blur(calc(var(--bs-body-font-size)* 2));
}

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

.carousel-custom {}

.e {
  height: 30rem;
  color: #fff;
}
.carousel-custom .carousel-item:nth-child(1) .e { background: red; }
.carousel-custom .carousel-item:nth-child(2) .e { background: blue; }
.carousel-custom .carousel-item:nth-child(3) .e { background: lime; }
.carousel-custom .carousel-indicators button:nth-child(1) { background: red; }
.carousel-custom .carousel-indicators button:nth-child(2) { background: blue; }
.carousel-custom .carousel-indicators button:nth-child(3) { background: lime; }
.carousel-custom .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel-custom .carousel-control-next {
  /* position: absolute; */
  /* top: 0; */
  /* bottom: 0; */
  /* z-index: 1; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* width: 15%; */
  /* padding: 0; */
  /* color: #fff; */
  /* text-align: center; */
  /* background: 0 0; */
  /* filter: var(--bs-carousel-control-icon-filter); */
  /* border: 0; */
  /* opacity: .5; */
  /* transition: opacity .15s ease; */

  bottom: 2.75rem;
  width: 100%;
}
.carousel-custom .carousel-indicators {
  /* position: absolute; */
  /* right: 0; */
  /* bottom: 0; */
  /* left: 0; */
  /* z-index: 2; */
  /* display: flex; */
  /* justify-content: center; */
  /* padding: 0; */
  /* margin-right: 15%; */
  /* margin-bottom: 1rem; */
  /* margin-left: 15%; */

  padding-top: 1rem;
  }
.carousel-custom .carousel-indicators [data-bs-target] {
  /* box-sizing: content-box; */
  /* flex: 0 1 auto; */
  /* width: 30px; */
  /* height: 3px; */
  /* padding: 0; */
  /* margin-right: 3px; */
  /* margin-left: 3px; */
  /* text-indent: -999px; */
  /* cursor: pointer; */
  /* background-color: var(--bs-carousel-indicator-active-bg); */
  /* background-clip: padding-box; */
  /* border: 0; */
  /* border-top: 10px solid transparent; */
  /* border-bottom: 10px solid transparent; */
  /* opacity: .5; */
  /* transition: opacity .6s ease; */

  width: 1.25rem;
  height: 1.25rem;
  border: .125rem solid;
  border-radius: 1rem;
}
.carousel-custom .carousel-indicators button:nth-child(1) {
  margin-left: 1rem;
}