@font-face {
  font-family: cyrene;
  src: url(../assets/fonts/Cyrene+Regular+Advanced.otf);
}
@font-face {
  font-family: figtree;
  src: url(../assets/fonts/Figtree-VariableFont_wght.ttf);
}
* {
  font-family: figtree;
  color: #191257;
}

.paragraph {
  max-width: 50ch;
  margin-bottom: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  margin-top: 0;
  font-size: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}

.step {
  color: #191257;
  font-size: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}

.overtitle {
  color: #2247FF;
  margin-bottom: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  margin-top: 0;
  font-weight: 500;
  font-size: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}

.subtitle {
  margin-bottom: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  margin-top: 0;
  font-family: cyrene;
  font-size: clamp(1.6875rem, 1.2273rem + 2.0455vw, 2.8125rem);
  font-weight: 100;
}

.btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: 0.2s;
  font-weight: 600;
  padding: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem) clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  font-size: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  color: white;
  background-color: #191257;
  text-decoration: none;
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
}
.btn:hover {
  transition: 0.2s;
  background-color: #FFFFFF;
  color: #191257;
  cursor: pointer;
}
.btn:active {
  transition: 0.2s;
  background-color: #FFFFFF;
  color: #191257;
}
.btn__unclickable {
  background-color: #191257;
  color: #ffffff;
  pointer-events: none;
}

.glass {
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.3);
  border-radius: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  border: 0.15em solid rgb(255, 255, 255);
  box-shadow: 0px 20px 15.4px rgba(56, 49, 141, 0.2);
}

a {
  transition: 0.1s;
  text-decoration: none;
}
a :hover {
  transition: 0.1s;
  color: aqua;
}

button {
  border: none;
}

body {
  background: url(../assets/images/paper-texture.jpg);
  padding: 0;
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
}

.logo {
  width: 3em;
}

.custom {
  box-sizing: border-box;
  display: flex;
  flex-flow: column-reverse;
  height: 100vh;
  width: 80%;
  padding: 7.5% 0 5%;
  margin: 0 auto;
  gap: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
}
.custom__size:hover {
  cursor: pointer;
}
.custom__left {
  height: 50%;
  width: 100%;
  margin: 0 auto;
}
.custom__right {
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  width: 100%;
  margin: 15% 0 0;
  height: 40%;
}
.custom__optionpanel {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}
.custom__sidenav {
  margin: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem) 0;
  width: 80%;
  border-bottom: solid 2px #191257;
  display: flex;
  flex-flow: row;
  align-items: baseline;
  justify-content: center;
}
.custom__step {
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  transition: 0.1s;
  padding: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  margin-bottom: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
}
.custom__step img {
  height: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  margin-bottom: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
}
.custom__step:hover {
  transition: 0.1s;
  background-color: white;
  cursor: pointer;
}
.custom__step p {
  font-size: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.custom__scrollable {
  height: 50%;
}
.custom__stars {
  background: url(../assets/images/star_green.webp), url(../assets/images/star_pastelblue.webp), radial-gradient(circle, rgba(255, 0, 161, 0.32) 0%, rgba(255, 0, 161, 0) 48%, rgba(255, 0, 161, 0) 100%);
  background-position: -20% -30%, 150% 120%;
  background-repeat: no-repeat;
  background-size: 70%, 80%, 100%;
  opacity: 0.8;
}
.custom__price {
  font-size: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.custom__page {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.custom__options {
  box-sizing: border-box;
  width: 100%;
  padding: 0 clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  overflow-y: auto;
  scrollbar-color: #191257;
}
.custom__viewport {
  border-radius: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  width: 100%;
  height: 80%;
}
.custom__bottom {
  display: flex;
  flex-flow: row nowrap;
  align-items: last baseline;
  justify-content: space-between;
  text-align: end;
  margin: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem) 0 0;
  align-self: flex-end;
}
.custom__controlpanel {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
}
.custom__panelbtn {
  transition: 0.1s;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
  text-align: center;
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
}
.custom__panelbtn img {
  height: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.custom__panelbtn:hover {
  cursor: pointer;
  transition: 0.1s;
  background-color: white;
}
.custom__next {
  margin: 0;
}

.landing {
  width: 100vw;
  height: 110vh;
  background: rgba(255, 0, 161, 0.2196078431);
  background: radial-gradient(circle, rgba(255, 0, 161, 0.32) 0%, rgba(255, 0, 161, 0) 48%, rgba(255, 0, 161, 0) 100%);
}
.landing__nav {
  box-sizing: border-box;
  padding: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem) clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  z-index: 5;
  position: fixed;
  top: 0%;
  width: 100vw;
  height: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 0;
}
.landing__stars {
  background: url(../assets/images/star_green.webp), url(../assets/images/star_pastelblue.webp), url(../assets/images/star_purple.webp);
  background-position: -20% -30%, -10% 10%, 10% 120%;
  background-repeat: no-repeat;
  background-size: 80%, 150%, 100%;
  opacity: 0.6;
}
.landing__hands {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url(../assets/images/hand_green.webp), url(../assets/images/hand_colorful.webp), url(../assets/images/hand_pink.webp);
  background-repeat: no-repeat;
  background-position: -200px top, left 570px, right bottom;
  background-size: 150%, 85%, 95%;
}
.landing__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.landing__icon {
  height: 1.25em;
}
.landing__icon:hover {
  cursor: pointer;
}
.landing__icon--search {
  display: none;
}
.landing__icon--account {
  display: none;
}
.landing__links {
  display: none;
}
.landing__logo {
  width: 60vw;
  margin-bottom: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
}
.landing__burgermenu {
  transition: 1s;
  box-sizing: border-box;
  transform: translate(100vw);
  padding: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  position: fixed;
  z-index: 10;
  text-align: end;
  width: 100vw;
  height: 100vh;
  font-weight: 600;
  font-size: clamp(1.6875rem, 1.2273rem + 2.0455vw, 2.8125rem);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}
.landing__burgermenulinks {
  display: flex;
  flex-flow: column wrap;
  gap: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  list-style: none;
}
.landing__burgermenubtn:hover {
  cursor: pointer;
}
.landing__exit {
  position: absolute;
  left: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  height: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  justify-self: start;
}
.landing__exit:hover {
  cursor: pointer;
}
.landing__text {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.stars {
  position: absolute;
  z-index: -1;
  height: 100vh;
  width: 100vw;
}

.collections {
  position: relative;
}
.collections__options {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.collections__option {
  box-sizing: border-box;
  width: 100%;
  border-radius: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  height: 20vh;
  display: flex;
  flex-flow: column;
  justify-content: end;
  padding: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.collections__option--1 {
  transition: 0.2s;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/summershine_thumbnail.webp) no-repeat;
  background-position: center;
  background-size: 100%;
}
.collections__option--1:hover {
  transition: 0.2s;
  background-size: 110%;
}
.collections__option--2 {
  transition: 0.2s;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/chromemadness_thumbnail.webp) no-repeat;
  background-position: top;
  background-size: 100%;
}
.collections__option--2:hover {
  transition: 0.2s;
  background-size: 110%;
}
.collections__option--3 {
  transition: 0.2s;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/springfloral_thumbnail.webp) no-repeat;
  background-position: center;
  background-size: 100%;
}
.collections__option--3:hover {
  transition: 0.2s;
  background-size: 110%;
}
.collections__option:hover {
  cursor: pointer;
}
.collections__name {
  color: white;
  margin-bottom: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
}
.collections__star {
  position: absolute;
  pointer-events: none;
  top: 50%;
  right: 0;
  z-index: 2;
  width: 40vw;
  height: 40vw;
  background: url(../assets/images/starlong_pink.webp) center;
  background-size: contain;
  background-repeat: no-repeat;
}
.collections__stars {
  width: 100vw;
  height: 200vh;
  background: url(../assets/images/star_pastelblue.webp);
  background-repeat: no-repeat;
  background-position: -500px 300px;
  opacity: 0.7;
}

.color {
  width: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.color:hover {
  cursor: pointer;
}

.theme {
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  height: 100vh;
  padding: 20% 0 0;
}
.theme__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  height: 100%;
}
.theme__collection {
  border-radius: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  padding: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  display: flex;
  align-items: end;
}
.theme__collection h2 {
  color: white;
}
.theme__collection--loudluxury {
  grid-column: span 2/span 2;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/chromemadness_thumbnail.webp);
}
.theme__collection--corporategirly {
  grid-row-start: 2;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/chromemadness_thumbnail.webp);
  background-position: center top;
  background-size: cover;
}
.theme__collection--summershine {
  grid-row-start: 2;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/summershine_thumbnail.webp);
  background-position: center bottom;
  background-size: cover;
}
.theme__collection--springfloral {
  grid-row-start: 3;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/cherryblossomimghover.webp);
  background-position: center;
  background-size: cover;
}
.theme__collection--timelessclassics {
  grid-row-start: 3;
  background-size: cover;
  background: linear-gradient(180deg, rgba(63, 69, 163, 0) 32%, rgba(63, 69, 163, 0.84) 82%), url(../assets/images/frenchmanucureimghover.webp);
  background-position: center bottom;
}

.productsgallery {
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 20% 0 0;
}
.productsgallery__filter {
  font-size: clamp(1.6875rem, 1.2273rem + 2.0455vw, 2.8125rem);
  display: flex;
  flex-flow: row;
  align-items: center;
  padding: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem) clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
}
.productsgallery__select {
  transition: 0.1s;
  font-size: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  border: none;
  padding: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  background: none;
}
.productsgallery__select:hover {
  transition: 0.1s;
  background-color: white;
}
.productsgallery__btn {
  border: none;
  font-size: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.productsgallery__options {
  padding: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem) 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.productsgallery__stars {
  position: fixed;
  height: 100vh;
  background: url(../assets/images/star_green.webp), url(../assets/images/star_pastelblue.webp), radial-gradient(circle, rgba(255, 0, 161, 0.32) 0%, rgba(255, 0, 161, 0) 48%, rgba(255, 0, 161, 0) 100%);
  background-position: 0% 0%, 150% 120%;
  background-repeat: no-repeat;
  background-size: 60%, 80%, 100%;
  opacity: 0.8;
}

.exemples {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
}
.exemples__slider {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem) clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
}
.exemples__pics {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  justify-content: center;
  gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  width: 100%;
  margin: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem) 0;
  height: 50vh;
}
.exemples__pic {
  transition: 0.2s;
  border-radius: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  height: 5vh;
  width: 100%;
  overflow: hidden;
}
.exemples__pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exemples__pic:hover {
  transition: 0.2s;
  height: 30vh;
  cursor: pointer;
}
.exemples__star {
  pointer-events: none;
  left: 0;
  z-index: 2;
  width: 40vw;
  height: 40vw;
  background: url(../assets/images/starlong_purple.webp) center;
  background-size: contain;
  background-repeat: no-repeat;
}

.socialmedias__slider {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.socialmedias__icon {
  height: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
}
.socialmedias__links {
  display: flex;
  flex-flow: row wrap;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.socialmedias__imgs {
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  display: flex;
  justify-content: center;
  gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  width: 100%;
}
.socialmedias__img {
  overflow: hidden;
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  height: 40vh;
  width: 20%;
  transition: 0.2s;
}
.socialmedias__img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.socialmedias__img:hover {
  cursor: pointer;
  transition: 0.2s;
  transform: translateY(-5%);
}
.socialmedias__img:active {
  transition: 0.2s;
  transform: scale(0.9);
}
.socialmedias__stars {
  height: 100vh;
  background: url(../assets/images/star_pastelblue.webp), url(../assets/images/star_blue.webp), radial-gradient(circle, rgba(255, 0, 161, 0.32) 0%, rgba(255, 0, 161, 0) 48%, rgba(255, 0, 161, 0) 100%);
  background-size: 60%, 80%, 100%;
  background-repeat: no-repeat;
  background-position: left 0px, right bottom, center;
  opacity: 0.6;
}

.cell {
  transition: 0.2s;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}
.cell:hover {
  cursor: pointer;
  transition: 0.2s;
  transform: translateY(-5%);
}
.cell:active {
  transition: 0.2s;
  transform: scale(0.9);
}

.aboutus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
}
.aboutus__imgs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.aboutus__img {
  width: 50%;
  border-radius: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.aboutus__stars {
  height: 200vh;
  background: url(../assets/images/star_pink.webp);
  background-position: 20% 30%;
  background-repeat: no-repeat;
  background-size: 200%;
  opacity: 0.6;
}
.aboutus__star {
  pointer-events: none;
  left: -10%;
  z-index: 2;
  width: 50vw;
  height: 50vw;
  background: url(../assets/images/starlong_purple.webp) center;
  background-size: contain;
  background-repeat: no-repeat;
}

.tutorial {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
}
.tutorial__steps {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
}
.tutorial__nailfile {
  top: -15%;
  position: absolute;
}
.tutorial__glue {
  position: absolute;
  right: -10%;
  top: -10%;
  transform: rotate(-45deg);
}
.tutorial__nail {
  position: absolute;
}
.tutorial__step {
  position: relative;
  text-align: center;
  display: flex;
  flex-flow: column;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  width: 25%;
}
.tutorial__step img {
  width: 100%;
}

.canvas-container {
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  width: 100%;
  margin: 0 auto;
  height: 50%;
}

.products {
  border-bottom: solid rgba(34, 71, 255, 0.5019607843) 2px;
}
.products__options {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.products__cta {
  margin-top: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  justify-self: center;
}
.products__stars {
  width: 100vw;
  height: 150vh;
  background: url(../assets/images/star_green.webp);
  background-repeat: no-repeat;
  background-position: right 0px;
  opacity: 0.7;
}
.products__option {
  width: 45%;
}
.products__img {
  transition: 0.2s;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  margin-bottom: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.products__star {
  pointer-events: none;
  right: 0;
  z-index: 2;
  width: 30vw;
  height: 30vw;
  background: url(../assets/images/starlong_pastelblue.webp) center;
  background-size: contain;
  background-repeat: no-repeat;
}

.desktop {
  display: none;
}

.row {
  display: flex;
  flex-flow: row wrap;
  -moz-column-gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
       column-gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  row-gap: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
  margin-bottom: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  justify-content: center;
}

.choice {
  width: 2.13em;
  height: 2.13em;
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  border: solid #191257 2px;
}

.mobile {
  display: block;
}

.text {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.icon {
  height: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  margin-left: 0;
}

.selected {
  background-color: white;
}

.section {
  box-sizing: border-box;
  padding: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  width: 100%;
  margin: 0 auto;
}

.textandcta {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  margin-bottom: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  justify-content: center;
}

.texticon {
  display: flex;
  flex-flow: row;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  text-align: center;
}

.cart {
  transition: 1s;
  box-sizing: border-box;
  transform: translate(100vw);
  height: 100vh;
  width: 40vh;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.cart__btn {
  position: absolute;
  bottom: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.cart__products {
  display: flex;
  flex-flow: column;
  gap: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  overflow-y: auto;
  scrollbar-color: #191257;
  height: 80vh;
}
.cart__text {
  display: flex;
  flex-flow: column;
}
.cart__price {
  color: #2247FF;
  margin: 0;
}
.cart__name {
  margin: 0;
}
.cart__product {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.cart__img {
  height: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  width: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  -o-object-fit: cover;
     object-fit: cover;
}
.cart__img img {
  -o-object-fit: cover;
     object-fit: cover;
}
.cart__exit {
  height: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  position: absolute;
  left: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.cart__exit:hover {
  cursor: pointer;
}
.cart__subtitle {
  margin-top: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}

.customtutorial {
  z-index: 10;
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.customtutorial__intro {
  box-sizing: border-box;
  padding: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  width: 70%;
  display: flex;
  flex-flow: column;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.customtutorial__btns {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.customtutorial__step {
  box-sizing: border-box;
  padding: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  width: 70%;
  display: flex;
  flex-flow: column;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.customtutorial__step img {
  width: 100%;
}
.customtutorial__btn {
  align-self: flex-end;
}

.checkout {
  padding-top: 20%;
}
.checkout__inputlabel {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
}
.checkout__form {
  display: flex;
  flex-flow: column;
}
.checkout__page {
  display: flex;
  flex-flow: column;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.checkout__label {
  margin-bottom: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  font-weight: 600;
  font-size: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.checkout__input {
  padding: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem) clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  background-color: white;
}
.checkout__fnamelname {
  display: flex;
  flex-flow: row;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.checkout__streetpostcode {
  display: flex;
  flex-flow: row;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.checkout__citycountry {
  display: flex;
  flex-flow: row;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.checkout__namenumber {
  display: flex;
  flex-flow: row;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.checkout__cvvdate {
  display: flex;
  flex-flow: row;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.checkout__preview {
  padding: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  display: flex;
  flex-flow: column;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  align-items: center;
}
.checkout__products {
  display: flex;
  flex-flow: column;
  gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  height: 90%;
  overflow-y: auto;
}
.checkout__btn--buy {
  justify-self: end;
}
.checkout__total {
  border-top: solid #191257 2px;
  padding: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem) 0;
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.credits {
  padding-top: 20%;
}
.credits__links {
  display: flex;
  flex-flow: column;
  gap: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
}
.credits__link {
  font-size: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}

.set {
  display: flex;
  flex-flow: column;
  gap: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  justify-content: center;
  align-items: center;
  padding-top: 20%;
}
.set__widthoptions {
  display: flex;
  flex-flow: row;
  gap: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
}
.set__slider {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}
.set__slider img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.set__btns {
  box-sizing: border-box;
}
.set__btn--buy {
  background-color: #2247FF;
}
.set__slide {
  box-sizing: border-box;
  aspect-ratio: 1/1;
  border-radius: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: 0.2s;
}
.set__collectionrating {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: baseline;
}
.set__rating {
  font-size: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  display: flex;
  flex-flow: row;
  gap: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem);
  align-items: baseline;
}
.set__icon {
  height: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
}
.set__text {
  width: 100%;
}
.set__btn {
  font-size: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.set__quantity {
  border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  padding: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem) clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.set__pricequantity {
  padding-bottom: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  display: flex;
  flex-flow: row;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: solid #191257 2px;
}
.set__width {
  padding: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem) 0;
}
.set__comment {
  box-sizing: border-box;
  width: 100%;
  height: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  padding: clamp(0.375rem, 0.2727rem + 0.4545vw, 0.625rem) clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.set__nextprev {
  box-sizing: border-box;
  z-index: 1;
  position: absolute;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
}
.set__next {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
}
.set__prev {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border: none;
}

.mobile {
  display: block;
}

.hidden {
  display: none;
}

.footer {
  color: white;
  height: 120vh;
  width: 100vw;
  background: url(../assets/images/handgreenfooter.webp), url(../assets/images/handcolorfulfooter.webp), url(../assets/images/handpinkfooter.webp), url(../assets/images/star_green.webp), url(../assets/images/star_pastelblue.webp), linear-gradient(180deg, rgba(63, 69, 163, 0) 0%, rgb(63, 69, 163) 35%, rgb(85, 29, 153) 89%, rgb(85, 29, 153) 100%);
  background-size: 60%, 60%, 50%, 70%, 100%, 150%;
  background-repeat: no-repeat;
  background-position: 0, right 110%, right 30%, center, 150% 100%;
  bottom: 0;
  display: flex;
}
.footer__stars {
  position: absolute;
  z-index: 5;
}
.footer__text {
  width: 100%;
  padding: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-self: flex-end;
  gap: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  margin-bottom: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 38%, rgba(0, 0, 0, 0.75) 66%, rgba(0, 0, 0, 0) 100%);
}
.footer__linklist {
  list-style: none;
}
.footer__link a {
  color: white;
  transition: 0.1s;
}
.footer__link a:hover {
  transition: 0.1s;
  color: aqua;
}
.footer__paragraph {
  color: white;
  font-weight: 500;
}

.active {
  transition: 1s;
  transform: translate(0vw);
}

.show {
  transition: 0.2s;
  opacity: 1;
}

@media (min-width: 600px) {
  .custom__right {
    height: 50%;
    margin: 20% 0 0;
  }
  .custom__left {
    height: 45%;
  }
}
@media (min-width: 800px) {
  .custom__right {
    height: 55%;
    margin: 15% 0 0;
  }
  .custom__left {
    height: 40%;
  }

  .set {
    padding-top: 10%;
    display: flex;
    flex-flow: row;
    align-items: start;
  }
  .set__btn {
    font-size: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  }
  .set__btns {
    display: flex;
    flex-flow: row;
    gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  }
}
@media (min-width: 900px) {
  .custom {
    padding: 2.5% 0;
  }
  .custom__right {
    height: 60%;
    margin: 10% 0 0;
  }
  .custom__left {
    height: 30%;
    margin: 0;
  }
  .custom__right {
    height: auto;
  }

  .theme {
    box-sizing: border-box;
    width: 70%;
    margin: 0 auto;
    height: 100vh;
    padding: 10% 0 0;
  }
  .theme__grid {
    height: 80%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  }
  .theme__collection {
    border-radius: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    padding: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
    display: flex;
    align-items: end;
  }
  .theme__collection--loudluxury {
    grid-column: span 2/span 2;
  }
  .theme__collection--corporategirly {
    grid-column-start: 3;
    grid-row-start: 1;
  }
  .theme__collection--summershine {
    grid-column-start: 3;
  }
  .theme__collection--springfloral {
    grid-column-start: 2;
    grid-row-start: 2;
  }
  .theme__collection--timelessclassics {
    grid-column-start: 1;
    grid-row-start: 2;
  }

  .aboutus {
    height: 70vh;
    flex-flow: row;
    justify-content: center;
    align-items: center;
  }
  .aboutus__stars {
    height: 200vh;
    background: url(../assets/images/star_pink.webp);
    background-position: 20% 30%;
    background-repeat: no-repeat;
    background-size: 50%;
    opacity: 0.8;
  }

  .products__options {
    justify-content: center;
    gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  }
  .products__option {
    width: 27%;
  }

  .productsgallery {
    box-sizing: border-box;
    width: 70%;
    margin: 0 auto;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 10% 0 0;
  }
}
@media (min-width: 1000px) {
  .footer {
    background: url(../assets/images/handgreenfooter.webp), url(../assets/images/handcolorfulfooter.webp), url(../assets/images/handpinkfooter.webp), url(../assets/images/star_green.webp), url(../assets/images/star_pastelblue.webp), linear-gradient(180deg, rgba(63, 69, 163, 0) 0%, rgb(63, 69, 163) 35%, rgb(85, 29, 153) 89%, rgb(85, 29, 153) 100%);
    background-size: 40%, 50%, 40%, 50%, 60%, 100%;
    background-repeat: no-repeat;
    background-position: 0 -30%, right -50%, right -50%, top, 150% 100%;
    bottom: 0;
  }
  .footer__text {
    padding: 10%;
  }

  .customtutorial__step {
    width: 50%;
  }

  .landing__stars {
    height: 110vh;
    width: 100vw;
    background-position: -300px -550px, 800px -700px, right 200px;
    background-size: 60%, 70%, 50%;
    background-repeat: no-repeat;
  }
  .landing__hands {
    background-position: 300px top, left 200px, right center;
    background-size: 50%, 40%, 40%;
  }
  .landing__logo {
    width: 50vw;
    margin-bottom: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  }
  .landing__logo {
    width: 40vw;
    margin-bottom: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  }

  .section {
    width: 70%;
  }

  .textandcta {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .collections__cta {
    display: block;
  }
  .collections__options {
    flex-flow: row;
    gap: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  }
  .collections__option {
    width: 30%;
    height: 30vh;
  }

  .socialmedias__stars {
    height: 125vh;
    background-size: 50%, 60%;
    background-position: left -100px, right bottom;
    opacity: 0.6;
  }

  .choice {
    width: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    height: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    border-radius: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    border: solid #191257 2px;
  }

  .texticon {
    justify-content: start;
    text-align: left;
  }

  .desktop {
    display: block;
  }

  .mobile {
    display: none;
  }

  .text {
    align-items: start;
  }

  .row {
    -moz-column-gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
         column-gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
    justify-content: start;
  }

  .exemples {
    height: 80vh;
  }
  .exemples__slider {
    width: 100%;
    padding: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem) 0;
  }
  .exemples__pics {
    display: flex;
    flex-flow: row;
    justify-content: center;
    gap: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    height: 30vh;
    width: 100%;
    margin-bottom: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  }
  .exemples__pic {
    height: 100%;
    width: 10%;
    overflow: hidden;
  }
  .exemples__pic img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .exemples__pic:hover {
    height: 100%;
    transition: 0.3s;
    width: 30%;
    cursor: zoom-in;
  }

  .credits {
    padding-top: 15%;
  }

  .products__options {
    justify-content: start;
    gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  }
  .products__options--index {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  }
  .products__option {
    width: 22%;
  }
}
@media (min-width: 1200px) {
  .customtutorial__step {
    width: 30%;
  }

  .credits {
    padding-top: 10%;
  }

  .landing__nav {
    border-radius: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    padding: 0 clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }
  .landing__links {
    display: flex;
    flex-flow: row nowrap;
    list-style: none;
    gap: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  }
  .landing__link {
    transition: 0.1s;
  }
  .landing__link:hover {
    transition: 0.1s;
    color: aqua;
    cursor: pointer;
  }
  .landing__link a:hover {
    transition: 0.1s;
    color: aqua;
  }
  .landing__burgermenubtn {
    display: none;
  }
  .landing__actions {
    display: flex;
    flex-flow: row nowrap;
    gap: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  }
  .landing__icon--search {
    display: block;
  }
  .landing__icon--account {
    display: block;
  }

  .checkout {
    padding-top: 10%;
  }
  .checkout__inputlabel {
    width: 100%;
    display: flex;
    flex-flow: column wrap;
  }
  .checkout__form {
    display: flex;
    flex-flow: row;
    gap: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  }
  .checkout__steps {
    width: 60%;
    display: flex;
    flex-flow: column;
    gap: clamp(3rem, 2.1818rem + 3.6364vw, 5rem);
  }
  .checkout__preview {
    position: -webkit-sticky;
    position: sticky;
    top: 17.5%;
    width: 40%;
    height: 50vh;
  }

  .custom {
    padding-top: 10%;
    display: flex;
    flex-flow: row nowrap;
    gap: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem);
  }
  .custom__left {
    width: 60vw;
    height: 100%;
  }
  .custom__optionpanel {
    display: flex;
    flex-flow: row nowrap;
    align-items: start;
  }
  .custom__bottom {
    margin-top: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
  }
  .custom__options {
    width: 65%;
    height: 100%;
    padding: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem) 0 clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem) clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    overflow-y: auto;
    scrollbar-color: #191257;
  }
  .custom__sidenav {
    margin: clamp(1.5rem, 1.0909rem + 1.8182vw, 2.5rem) 0;
    width: 25%;
    border-bottom: 0;
    border-right: solid 2px #191257;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
  }
  .custom__step img {
    height: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  }
  .custom__step p {
    font-size: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  }
  .custom__right {
    gap: clamp(0.75rem, 0.5455rem + 0.9091vw, 1.25rem);
    width: 40vw;
    height: 100%;
    margin: 0;
  }
  .custom__page {
    align-items: start;
  }

  .productsgallery__stars {
    height: 170vh;
    background: url(../assets/images/star_green.webp), url(../assets/images/star_pastelblue.webp), radial-gradient(circle, rgba(255, 0, 161, 0.32) 0%, rgba(255, 0, 161, 0) 48%, rgba(255, 0, 161, 0) 100%);
    background-position: -50% -40%, 150% 120%;
    background-repeat: no-repeat;
    background-size: 60%, 80%, 100%;
    opacity: 0.8;
  }
}
@media (min-width: 1400px) {
  .custom {
    padding-top: 7.5%;
  }
  .custom__left {
    width: 40vw;
  }
  .custom__right {
    width: 60vw;
  }
}
.notfixed {
  margin: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem) 0;
  position: relative;
}

/*# sourceMappingURL=app.css.map*/