html, body {
  margin: 0;
  padding: 0;
  font-size: 18px;
}

body {
  background-color: #0A0911;
  color: rgba(255,255,255,1);
}

* {
  box-sizing: border-box;
}

canvas {
  display: block;
}

.fahkwang-extralight {
  font-family: "Fahkwang", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.fahkwang-light {
  font-family: "Fahkwang", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.fahkwang-regular {
  font-family: "Fahkwang", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fahkwang-medium {
  font-family: "Fahkwang", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.fahkwang-semibold {
  font-family: "Fahkwang", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.fahkwang-bold {
  font-family: "Fahkwang", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.fahkwang-extralight-italic {
  font-family: "Fahkwang", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.fahkwang-light-italic {
  font-family: "Fahkwang", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.fahkwang-regular-italic {
  font-family: "Fahkwang", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.fahkwang-medium-italic {
  font-family: "Fahkwang", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.fahkwang-semibold-italic {
  font-family: "Fahkwang", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.fahkwang-bold-italic {
  font-family: "Fahkwang", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/*.geist-<uniquifier> {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}*/


.geist-regular {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-family: "Fahkwang", sans-serif;
  font-size: 6rem;
  font-weight: 400;
  font-style: normal;
  margin: 30px;
}

h2 {
  font-family: "Fahkwang", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  font-style: normal;
}

p {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
}
.p-20 {
  font-size: 1.25rem;
}
.h-font {
  font-family: "Fahkwang", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  font-style: normal;
}

/* Responsive Grid */
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
	/* For mobile phones: */
	width: 100%;
}


.wrapper {
  position: relative;
  width: 100%;
  max-width: 2600px;
  height: auto;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100px;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(6, 5, 12, 0.97) 76.92%, rgba(0, 0, 0, 0.00) 100%);
  z-index: 10000;
}
.header:has(>.topnav.responsive) {
  background: linear-gradient(180deg, rgba(6, 5, 12, 0.97) 90%, rgba(0, 0, 0, 0.00) 100%);
  padding-bottom: 16px;
}

.topnav {
	overflow: hidden;
  display: flex;
  justify-content: space-between;
  max-width: 1440px;
  margin: auto;
}
.nav-container {
  display: flex;
}

.invis {
  display: block;
  padding: 0px 40px;
}
.topnav a {
	float: left;
	display: block;
	color: rgba(242,242,242,1.00);
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 1.25rem;
  font-family: "Fahkwang", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.topnav > .nav-logo {
  padding: 14px 66px 14px 16px;
}

.nav-logo {
  position: relative;
}
.logo-text {
  position: absolute;
  left: 73px;
  top: 18px;
  /* top: 6px; */
  /* font-size: 2.35rem; */
}

.topnav a:hover {
	color: #C7CEF2;
}
.topnav .icon {
	display: none;
}

.hero-cont {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background-image: url("images/silky-1.webp");
  background-size: cover;
  background-position: center;
}

.button {
  position: relative;
  display: inline-flex;
  color: rgba(0,0,0,1);
  background-color: #C7CEF2;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 6px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.button > p {
  margin: 0px;
}
.b-plane {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: -60%;
  transform: translate(-50%, -50%);
  background: linear-gradient(130deg, rgba(0, 0, 0, 0)0%, rgba(163, 110, 247, 0.507)30%, 
    rgba(0, 0, 0, 0)60%); /* rgba(163, 110, 247, 0.507) */
  transition: all 0.4s;
  transition-timing-function: ease;
  z-index: 9;
}
.button:hover > .b-plane {
  left: 50%;
}
.button > p {
  z-index: 10;
}



.hero-content {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.45);
  background: radial-gradient(rgba(0, 0, 0, 0.55)0%, rgba(0, 0, 0, 0)50%);
  border-radius: 26px;
  padding: 30px 10%;
  color: rgba(255,255,255,1);
  text-align: center;
  & > p {
    font-size: 1.5rem;
  }
}

.pop-products {
  background: radial-gradient(50% 50% at 50% 50%, #26233B 0%, rgba(10, 9, 17, 0.00) 100%);
  padding-bottom: 60px;
}
.cart-recommend {
  background: linear-gradient(130deg, #06060a 5%, #20174b 30%, #0A0911 60%, #181525 90%, #0A0911 120%);
}

.pop-products-header {
  text-align: center;
  height: auto;
}

.pop-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,400px));
  gap: 20px;
  justify-content: center;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,400px));
  gap: 20px;
  justify-content: center;
  padding: 0px 10%;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 450px;
  background: rgba(202, 202, 202, 0.04);
  padding: 40px;
  border-radius: 22px;
  & > * {
    margin: 0px;
  }
}
.card:hover {
  background: rgba(202, 202, 202, 0.065);
}

.spacer {
  height: 100px;
}

.product-img {
  width: 100%;
  aspect-ratio: 3/2;
  background-color: rgba(50,50,50,1);
  background: linear-gradient(166deg, #7C7C7C 11%, #323232 90%);
}

.about-satin {
  width: 100%;
  height: auto;
  margin: 0px;
  background: radial-gradient(50% 50% at 50% 50%, #26233B 0%, rgba(10, 9, 17, 0.00) 100%);
}
.alt-bg {
  background: linear-gradient(230deg, #06060a 5%, #20174b 30%, #0A0911 60%, #181525 90%, #0A0911 120%);
}
.satin-body {
  clear: both;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px 20px 60px 20px;
}
.satin-img {
  width: 40%;
  max-width: 400px;
  aspect-ratio: 4/3;
  background-color: #09042257;
  background-image: url("images/satin-pillowcase.webp");
  background-size: cover;
}
.satin-text {
  width: 40%;
  max-width: 600px;
  height: auto;
  font-size: 1.25rem;
}
.satinn-img, .satin-text {
  margin: 10px;
}
.hair-before-img {
  width: 40%;
  max-width: 400px;
  aspect-ratio: 4/3;
  background-color: #09042257;
  background-image: url("images/hair-before.webp");
  background-size: cover;
  box-shadow: 0px 6px 26px 0px rgba(0,0,0,0.5);
}
.hair-after-img {
  width: 40%;
  max-width: 400px;
  aspect-ratio: 4/3;
  background-color: #09042257;
  background-image: url("images/hair-after.webp");
  background-size: cover;
  box-shadow: 0px 6px 26px 0px rgba(0,0,0,0.5);
}


.benefits {
  padding-bottom: 6%;
  /*background: radial-gradient(50% 50% at 50% 50%, #26233B 0%, rgba(10, 9, 17, 0.00) 100%);*/
  background: linear-gradient(130deg, #06060a 5%, #20174b 30%, #0A0911 60%, #181525 90%, #0A0911 120%);
  & p {
    font-size: 1.25rem;
  }
}

.benefit-content p {
  display: list-item;
  list-style: disc inside;
  
}

.hair-container {
  height: auto;
}
.hair {
  position: relative;
  width: 100%;
  aspect-ratio: 6/5;
  background-image: url(images/hair-sketch-2.png);
  background-size: cover;
  padding: 0px;
  cursor: pointer;
}
.hair > p {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 200%);
  color: rgba(255, 255, 255, 0.5);
  animation-name: jump;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes jump {
  0% {transform: translate(-50%, 200%);}
  8% {transform: translate(-50%, 160%);}
  16% {transform: translate(-50%, 200%);}
  100% {transform: translate(-50%, 200%);}
}

.skincare {
  background: radial-gradient(50% 50% at 50% 50%, #3C3B52 0%, rgba(38, 35, 59, 0.21) 100%);
}

.skincare-content {
  position: relative;
  height: 70vh;
  height: 70svh;
  text-align: center;
  padding: 0px;
  background-image: url(images/satin-pillowcase.webp);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;

}

.skincare-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  padding: 10%;
  background: radial-gradient(rgba(0,0,0,0.7)15%, rgba(0,0,0,0)60%);
  & > p {
    font-size: 1.5rem;
  }
}

.testimonials-header {
  text-align: center;
}

.test-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  transform: perspective(2000px);
  pointer-events: none;
}
.testimonial {
  width: 260px;
  min-height: 280px;
  padding: 30px;
  border-radius: 16px;
  background-color: rgba(224, 224, 224, 0.08);
  background: linear-gradient(0deg, rgba(224, 224, 224, 0.08), rgba(224, 224, 224, 0.08));
  margin: 20px;
  cursor: pointer;
  transform: translateZ(0px) rotateX(0deg);
  transition: all 0.5s ease;
  pointer-events: auto;
  & p {
    margin: 16px 0px;
  }
}
.testimonial:hover {
  transform: translateZ(100px) rotateX(0deg);
  background-color: rgba(224, 224, 224, 0.185);
  background: linear-gradient(0deg, rgba(224, 224, 224, 0.185), rgba(224, 224, 224, 0.185));
}

.shiny-text {
  position: absolute;
  top: 18%;
  left: 14%;
  width: 80%;
  max-width: 800px;
  padding: 60px;
  background: radial-gradient(farthest-side at 46% 50%, rgba(0,0,0,0.7)45%, rgba(0,0,0,0.01)80%, rgba(0,0,0,0)100%);
  & p {
    font-size: 1.25rem;
  }
}

.dermatologist, .derm-content {
  padding: 0px;
}
.derm-content {
  position: relative;
  height: 80vh;
  height: 80svh;
  background: linear-gradient(100deg, #0D0928 0%, #1C1445 34.62%, #0D0928 66.83%, #1E1843 94.23%);
  background-image: url("images/silk-shader.png");
  background-size: cover;
  background-position: center;
}

.sosh-med, .footer-link, .footer-logo, .copyright {
  text-align: center;
}

.footer {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  background: linear-gradient(180deg, rgba(38, 35, 59, 0.10) 0%, #26233B 100%);
}
.social-media, .footer-left, .footer-center, .footer-right {
  display: flex;
}
.social-media {
  grid-column: 1/5;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;
}
.social-media > a > img {
  margin: 0px 16px;
  width: 40px;
  height: auto;
}

.footer-left {
  grid-column: 1/3;
  justify-content: flex-end;
  align-items: center;
  /*padding-right: 5%;*/
}
.footer-center {
  grid-row: 3/4;
  grid-column: 2/4;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0px;
}
.footer-right {
  grid-column: 3/5;
  justify-content: flex-start;
  align-items: center;
  /*padding-left: 5%;*/
}

.footer-left > a, .footer-center > a, .footer-right > a {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
}
.footer-left > a:hover, .footer-right > a:hover {
  color: #C7CEF2;

}
.footer-left  a {
  margin-right: 5%;
}
.footer-right a {
  margin-left: 5%;
}

.p-grid {
  padding-bottom: 60px;
}

.img-container {
  padding: 30px 20%;
}
.pd-container {
  padding: 30px 10%;
}

.product-details {
  width: 100%;
  height: auto;
  background: rgba(202, 202, 202, 0.04);
  padding: 20px;
  border-radius: 22px;
}

.h-product {
  font-size: 2.25rem;
  margin-left: 0px;
  margin-right: 0px;
}

button {
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 10px 30px;
  margin-right: 10px;
  text-decoration: none;
	font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  border-radius: 6px;
  background-color: #C7CEF2;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 2px solid #9f5bdf;
}
button:hover {
  box-shadow: 0px 0px 6px 0px #965bdf inset;
}

.color-swatch {
  aspect-ratio: 1/1;
}
.color-swatch:hover {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.45) inset;
}
.cs-dark {
  background-color: rgba(71,71,71,1);
}
.cs-white {
  background-color: rgba(210,210,210,1);
}
.cs-lilac {
  background-color: rgba(180, 120, 200,1);
}
.cs-amber {
  background-color: rgba(223,167,12,1);
}
.cs-pink {
  background-color: rgba(243,182,213,1);
}
.cs-mint {
  background-color: rgba(134,234,164,1);
}
.cs-blue {
  background-color: rgba(128,224,242,1);
}
.cs-purple {
  background-color: rgba(64,2,130,1);
}
.cs-navy {
  background-color: rgba(0,2,103,1);
}

.color-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px,80px));
  gap: 20px;
}

.cart-grid {
  width: 90%;
  max-width: 1440px;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: auto;
  margin-bottom: 60px;
  padding-bottom: 60px;
}
.cart-header {
  grid-column: 1/2;
  grid-row: 1/2;
  text-align: center;
}
.cart-item-dark {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: rgba(202, 202, 202, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 22px;
  padding: 24px;
}
.cart-item-white {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: rgba(202, 202, 202, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 22px;
  padding: 24px;
}
.cart-img {
  width: 40%;
  max-width: 400px;
  min-width: 280px;
  aspect-ratio: 3/2;
  background-color: rgba(50,50,50,1);
}
.item-details {
  padding-left: 40px;
}
.cart-link {
  text-decoration: none;
	font-size: 1.25rem;
  font-family: "Fahkwang", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgba(242,242,242,1.00);
}
.cart-link:hover {
  color: #C7CEF2;
}
.cart-button {
  padding: 6px 12px;
}
.order-details {
  grid-column: 1/2;
  grid-row: 4/5;
  align-self: start;
  background-color: rgba(202, 202, 202, 0.04);
  border-radius: 22px;
  padding: 30px;
  & h2 {
    font-size: 2rem;
  }
}
.order-row {
  display: flex;
  justify-content: space-between;
}
.order-details > .button {
  width: 100%;
}
.order-details > .button > p {
  margin: auto;
}

.order-details.checkout {
  width: 80%;
  max-width: 800px;
  height: auto;
  margin: auto;
  margin-bottom: 60px;
}

.checkout-h1 {
  text-align: center;
}

.w-100 {
  width: 100%;
}
.form-float {
  display: flex;
  column-gap: 20px;
}
.form-container {
  width: 100%;
}

input, select, textarea {
	border: 2px solid #C7CEF2;
	background-color: rgba(202, 202, 202, 0.04);
	padding: 10px 32px;
	font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
	border-radius: 6px;
	transition: all 0.25s ease;
  color: rgba(255, 255, 255, 1);
}
option {
  color: rgba(0, 0, 0, 1);
}
textarea {
	field-sizing: content;
	width: 100%;
	min-height: 120px;
}
input:hover, select:hover, textarea:hover {
	border: 2px solid #965bdf;
}
input[type="text"], select {
	padding: 10px 10px;
}
input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #965bdf;
}

.close-hero-container, .close-shiny, .close-hair, .close-dark, .close-white, .close-lilac, .close-amber, .close-pink, .close-mint, .close-blue, .close-purple, .close-navy {
  display: none;
}

hr {
  border: 1px solid #C7CEF2;
}

/* Responsive Grid */
/* For tablets and small laptops: */
@media only screen and (min-width: 800px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
/* For desktops: */
@media only screen and (min-width: 1000px) {
    .col-l-1 {width: 8.33%;}
    .col-l-2 {width: 16.66%;}
    .col-l-3 {width: 25%;}
    .col-l-4 {width: 33.33%;}
    .col-l-5 {width: 41.66%;}
    .col-l-6 {width: 50%;}
    .col-l-7 {width: 58.33%;}
    .col-l-8 {width: 66.66%;}
    .col-l-9 {width: 75%;}
    .col-l-10 {width: 83.33%;}
    .col-l-11 {width: 91.66%;}
    .col-l-12 {width: 100%;}
}

@media screen and (max-width: 800px) {
  .topnav {
    display: block;
  }
	.topnav a:not(.nav-logo) {
    display: none;
  }
	.topnav a.icon {
    float: right;
    display: block;
    font-size: 1rem;
  }
  .nav-container {
    display: contents;
  }
  .invis {
    display: none;
  }
}
@media screen and (max-width: 800px) {
	.topnav.responsive {position: relative;}
	.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
	  float: none;
	  display: block;
	  text-align: center;
  }
  .topnav.responsive .nav-logo {
    text-align: left;
  }

  .benefit-content {
    padding: 0px 10% 40px 10%;
  }
  .hair-container {
    padding: 0px 10% 20px 10%;
  }
  
  .cart-img {
    margin-bottom: 20px;
  }
  .item-details {
    padding-left: 0px;
  }

  .checkout-h1 {
    font-size: 4rem;
    text-align: center;
  }

}

@media screen and (min-width: 800px) {
  .satin-body {
    flex-direction: row;
  }
  .satin-text {
    margin-left: 5%;
  }
  
  .cart-item-dark {
    flex-direction: row;
  }
  .cart-item-white {
    flex-direction: row;
  }

}

@media screen and (min-width: 1000px) {
  .footer {
    grid-template-columns: 3fr 1fr 1fr 3fr;
  }
  .footer-left {
    grid-column: 1/2;

  }
  .footer-center {
    grid-row: 2/3;

  }
  .footer-right {
    grid-column: 4/5;

  }

  .img-container {
    padding: 0px 20px 0px 5%;
  }
  .pd-container {
    padding: 0px 5% 0px 20px;
  }

}

@media screen and (min-width: 1300px) {
  .test-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transform-style: preserve-3d;
    transform: perspective(2000px);
  }
  .testimonial {
    transform: translateZ(-100px) rotateX(30deg);
    cursor: pointer;
    transition: all 0.5s ease;
  }
  .testimonial:hover {
    transform: translateZ(100px) rotateX(0deg);
    background-color: rgba(224, 224, 224, 0.185);
    background: linear-gradient(0deg, rgba(224, 224, 224, 0.185), rgba(224, 224, 224, 0.185));
  }

  .testimonial:hover + * {
    transform: translateZ(-80px) rotateX(24deg);
    background: linear-gradient(-90deg, rgba(224, 224, 224, 0.08), rgba(224, 224, 224, 0.185));
  }
  .testimonial:has(+ *:hover) {
    transform: translateZ(-80px) rotateX(24deg);
    background: linear-gradient(90deg, rgba(224, 224, 224, 0.08), rgba(224, 224, 224, 0.185));
  }

  .img-container {
    padding: 0px 20px 0px 10%;
  }
  .pd-container {
    padding: 0px 10% 0px 20px;
  }

  .cart-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
  }
  .cart-header {
    grid-column: 1/3;
  }
  .cart-item-dark {
    grid-column: 1/2;
    grid-row: 2/3;
  }
  .cart-item-white {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  .order-details {
    grid-column: 2/3;
    grid-row: 2/4;
  }

  

}

@media screen and (min-width: 1900px) {
  .benefit-content {
    transform: translate(10%,0%);
  }
  .benefits .hair-container {
    transform: translate(-10%,0%);
  }
}