@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #0f0f0f;
}

::-webkit-scrollbar {
  display: none;
}

/* BASE ////////////////////////////*/
body {
  font-family: "poppins", sans-serif;
}

.heading__primary {
  font-size: 20rem;
  letter-spacing: -0.2rem;
  text-transform: capitalize;
  line-height: 1.15;
  text-align: center;
  background-image: linear-gradient(#888 20%, rgba(255, 255, 255, 0.1098039216) 100%), linear-gradient(to right, #ffffff 80%, #000), linear-gradient(30deg, rgba(255, 255, 255, 0), #fff);
  background-size: 100%;
  background-clip: text;
  color: transparent;
}
.heading__primary--sp {
  background-image: linear-gradient(#fff 20%, rgba(34, 110, 50, 0) 100%);
  -webkit-text-stroke: none;
  background-size: 150%;
  background-clip: text;
  color: transparent;
}

.heading__secondary {
  font-size: 15rem;
  font-weight: 700;
  letter-spacing: -0.2rem;
  line-height: 1.2;
  text-align: center;
  background-image: linear-gradient(#303030, #171717);
  text-transform: capitalize;
  background-clip: text;
  color: transparent;
}
.heading__secondary--sp {
  background-image: linear-gradient(#000 20%, #fff 100%);
  -webkit-text-stroke: 0.2rem transparent;
  background-clip: text;
  color: transparent;
}

.heading__tertiary {
  font-size: 15rem;
  letter-spacing: -0.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background-image: linear-gradient(#888 20%, rgba(255, 255, 255, 0.1098039216) 100%), linear-gradient(to right, #ffffff 80%, #000), linear-gradient(30deg, rgba(255, 255, 255, 0), #fff);
  text-transform: capitalize;
  background-clip: text;
  color: transparent;
}
.heading__tertiary--sp {
  background-image: linear-gradient(#fff 20%, rgba(34, 110, 50, 0) 100%);
  -webkit-text-stroke: 0.2rem transparent;
  background-clip: text;
  color: transparent;
}

.heading__quartenary {
  font-size: 8rem;
  line-height: 1.3;
  letter-spacing: -0.2rem;
  font-weight: 800;
  text-transform: capitalize;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(#eee, #aaa);
}

.heading__quintary {
  font-size: 8rem;
  letter-spacing: -0.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(#eee, #aaa);
}

.article__project {
  overflow: auto;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
  position: relative;
}
.article__project::-webkit-scrollbar {
  display: none;
}

/* ARTICLE //////////////////////////////////////////*/
.article__container {
  margin: 0 auto;
  margin-top: 2rem;
  padding-bottom: 10rem;
  /* background-color: #2b8a3e; */
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 80%;
}

.article__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.article__heading {
  font-size: 10rem;
  color: #d5d5d5;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.2rem;
  text-align: center;
}

.article__tags {
  display: flex;
  gap: 1rem;
}

.article__desc {
  width: 80%;
  font-size: 2.5rem;
  text-align: center;
  color: #aaa;
}

.article__header--image {
  margin-top: 3rem;
  width: 100%;
  border-radius: 2rem;
  box-shadow: 0 0 0.4rem #0a0a0a;
  border-top: 0.1rem solid #262626;
}

/* TAGS */
.article__tag {
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-image: linear-gradient(#262626, #171717);
  border-top: 0.1rem solid #565656;
  box-shadow: 0 0 0.5rem #0a0a0a;
  border-radius: 2rem;
  padding: 0.8rem 1.6rem;
  color: #ddd;
}
.article__tag ion-icon {
  font-size: 1.5rem;
  color: inherit;
}

/* BODY */
.article__body {
  margin-top: 10rem;
  padding-bottom: 10rem;
  width: 90%;
  display: flex;
  gap: 8rem;
}

/*Aside*/
.aside {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aside__heading {
  font-size: 1.5rem;
  color: #888;
  font-weight: 400;
  letter-spacing: -0.05rem;
}

.contributor {
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 0.2rem solid #262626;
  padding-bottom: 2rem;
}

.contributor img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
}

.contributor__info {
  display: flex;
  flex-direction: column;
}

.contributor__name {
  font-size: 2rem;
  color: #ddd;
}

.contributor__date {
  font-size: 1.5rem;
  color: #777;
  font-weight: 400;
  letter-spacing: -0.05rem;
}

.aside__box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aside__box:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.aside__reading {
  margin-top: -0.5rem;
  display: flex;
  align-items: center;
  color: #ddd;
  gap: 0.5rem;
  font-size: 2rem;
}

.aside__reading ion-icon {
  font-size: 2.5rem;
}

/*Content*/
.content {
  width: 80%;
  /* height: 40rem; */
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.content__text {
  font-size: 2rem;
  font-weight: 300;
  color: #aaa;
}

.content__sep {
  width: 100%;
  height: 0.2rem;
  background-color: #262626;
}

.motivation {
  /* margin-top: 3rem; */
  font-size: 2rem;
  color: #2b8a3e;
  font-weight: 500;
}

.content__title {
  font-size: 2.5rem;
  color: #ccc;
}

.steps__container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.step__box {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.content__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 2rem;
  color: #aaa;
  font-weight: 300;
  list-style: outside;
  margin-left: 2rem;
  font-family: inherit;
}
.content__list a {
  color: #2b8a3e;
}

.content__organized {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 2rem;
  color: #aaa;
  font-weight: 500;
  /* list-style: outside; */
  margin-left: 2rem;
  font-family: inherit;
}

.content__organized a {
  color: #2b8a3e;
}

.content__linked {
  margin-top: -1.5rem;
  margin-left: 10rem;
}

.content__quote {
  border-left: 0.5rem solid #2b8a3e;
  padding-left: 5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.content__quotation {
  font-size: 2.5rem;
  font-weight: 600;
  color: #ddd;
}

.quote__author {
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 500;
  color: #555;
}

.content__example {
  display: flex;
  flex-direction: column;
  border-left: 0.5rem solid #ccc;
  border-radius: 0.5rem;
  padding: 2rem;
  gap: 2rem;
}

.content__example--text {
  font-size: 2rem;
  font-weight: 300;
  color: #ddd;
}

.content__table {
  width: 100rem;
  display: flex;
  flex-direction: column;
  margin: 3rem 0;
}

.content__table--titles {
  display: flex;
  justify-content: space-between;
  font-size: 2rem;
  color: #ddd;
  padding-bottom: 2rem;
  border-bottom: 0.1rem solid #262626;
  font-weight: 500;
}

.content__table--box-results {
  margin-top: -1rem;
  display: flex;
  justify-content: space-between;
}

.content__table--results {
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
  /* gap: 5rem; */
  font-weight: 300;
  color: #aaa;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.content__table--results span {
  /* width: 100%; */
  /* background-color: #2b8a3e; */
}

/* article motivate //////////*/
.article__motivate {
  width: 100%;
  height: 80rem;
  border-radius: 2rem;
  /* background-color: #2b8a3e; */
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/lion.webp);
  filter: grayscale(100%);
  box-shadow: 0 0 0.4rem #0a0a0a;
  border-top: 0.1rem solid #262626;
  background-size: cover;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.article__motivate--wolf {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/wolf.webp);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 50%;
}

.article__motivate--tiger {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/tiger.webp);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 60%;
}

.article__motivate--eagle {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/eagle.webp);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 60%;
}

.article__motivate--tiger-2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/tiger2.jpg);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 35%;
}

.article__motivate--shark {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/shark.webp);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 35%;
}

.article__motivate--fox {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/fox.webp);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 35%;
}

.article__motivate--deer {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/deer.webp);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 60%;
}

.article__motivate--zebra {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(../../all_img/zebra.webp);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 30%;
}

.article__motivate--giraffe {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), rgba(0, 0, 0, 0.9176470588)), url(https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 50%;
}

.article__motivate--white {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), #000000), url("https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 40%;
}

.article__motivate--bull {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2666666667), #000000), url("https://images.unsplash.com/photo-1493962853295-0fd70327578a?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  filter: grayscale(100%);
  background-size: cover;
  background-position: 0 80%;
}

.article__motivate--word {
  font-size: 8rem;
  color: #2b8a3e;
  background-image: linear-gradient(#fff, #2b8a3e);
  background-clip: text;
  -webkit-text-stroke: 0.3rem transparent;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.1rem;
}

.article__motivate--def {
  font-size: 2rem;
  color: #aaa;
  border-top: 0.1rem solid #fff;
  border-radius: 1000rem;
  outline: 0.3rem solid rgba(221, 221, 221, 0.3647058824);
  font-weight: 700;
  padding: 1rem 2rem;
  letter-spacing: -0.1rem;
}

/* more articles ////////////////////////////////*/
.article__more {
  margin: 0 auto;
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.article__more--tag {
  font-size: 2rem;
  background-image: linear-gradient(#262626, #171717);
  border-top: 0.1rem solid #565656;
  box-shadow: 0 0 0.5rem #0a0a0a;
  border-radius: 2rem;
  padding: 1rem 2rem;
  color: #ddd;
  font-weight: 500;
  /* box-shadow: 0 0 0.5rem #777; */
}

.article__more--heading {
  font-size: 10rem;
  font-weight: 400;
  color: #ddd;
  letter-spacing: -0.05rem;
}

.article__more--desc {
  text-align: center;
  font-size: 2.5rem;
  color: #aaa;
}

.article__systems {
  margin-top: 4rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.article__systems--box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.article__systems--box img {
  width: 100%;
  height: 50rem;
  border-top: 0.1rem solid #262626;
  box-shadow: 0 0 0.5rem #0a0a0a;
  object-fit: cover;
  object-position: top;
  border-radius: 2rem;
}

.article__systems--box-tags {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.article__systems--box-tags div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-image: linear-gradient(#262626, #171717);
  border-top: 0.1rem solid #565656;
  box-shadow: 0 0 0.5rem #0a0a0a;
  color: #ddd;
  border-radius: 2rem;
  padding: 1rem 2rem;
}

.article__systems--box-tags ion-icon {
  font-size: 2rem;
}

.article__systems--box-tags span {
  background-image: linear-gradient(#262626, #171717);
  border-top: 0.1rem solid #565656;
  box-shadow: 0 0 0.5rem #0a0a0a;
  color: #ddd;
  border-radius: 2rem;
  padding: 1rem 2rem;
}

.article__systems--box-heading {
  font-size: 3rem;
  font-weight: 500;
  color: #ccc;
}

.article__systems--box-desc {
  font-size: 2rem;
  color: #aaa;
}

.article__systems--box a {
  border: none;
  border-radius: 1000rem;
  text-decoration: none;
  font-family: inherit;
  font-size: 1.8rem;
  color: #ccc;
  display: flex;
  align-items: center;
  background-image: linear-gradient(#387d47, #226e32);
  border-top: 0.1rem solid #649a70;
  box-shadow: 0 0 0.4rem #0a0a0a;
  padding: 1rem 2rem;
  gap: 0.5rem;
  cursor: pointer;
}

@media (max-width: 140.625em) {
  .article__container {
    width: 90%;
  }
}
@media (max-width: 118.75em) {
  .article__container {
    width: 90%;
  }
  .article__heading {
    line-height: 1.25;
  }
  .article__desc {
    width: 90%;
  }
  .article__systems--box-heading {
    font-size: 2.5rem;
  }
  .article__systems--box-desc {
    font-size: 1.8rem;
  }
}
@media (max-width: 106.25em) {
  .article__body {
    width: 100%;
    gap: 5rem;
  }
  .article__motivate {
    height: 60rem;
  }
  .article__motivate--wolf {
    height: 60rem;
  }
  .article__motivate--tiger {
    height: 60rem;
  }
  .article__motivate--eagle {
    height: 60rem;
  }
  .article__more--heading {
    font-size: 8rem;
    letter-spacing: -0.1rem;
  }
  .article__more--desc {
    font-size: 2rem;
  }
  .article__systems--box img {
    height: 40rem;
  }
  .article__systems--box-tags {
    gap: 1rem;
  }
  .article__systems--box-tags div {
    padding: 0.5rem 1rem;
  }
  .article__systems--box-tags ion-icon {
    font-size: 1.5rem;
  }
  .article__systems--box-tags span {
    padding: 0.5rem 1rem;
  }
  .article__systems--box-heading {
    font-size: 2.2rem;
  }
  .article__systems--box-desc {
    font-size: 1.5rem;
  }
}
@media (max-width: 93.75em) {
  .article__heading {
    font-size: 8rem;
  }
  .article__desc {
    width: 95%;
    font-size: 2rem;
  }
  .article__body {
    justify-content: space-between;
  }
  .content {
    width: 70%;
  }
  .content__table {
    width: 80rem;
  }
}
@media (max-width: 81.25em) {
  .article__heading {
    font-size: 6rem;
  }
  .article__desc {
    width: 95%;
    font-size: 1.8rem;
  }
  .article__body {
    width: 100%;
    flex-direction: column;
    margin-top: 5rem;
  }
  .aside {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-bottom: 0.2rem solid #ddd;
    padding-bottom: 2rem;
  }
  .contributor {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .aside__heading--top {
    display: none;
  }
  .content {
    width: 100%;
  }
  .content__table {
    width: 100%;
  }
  .article__motivate {
    height: 50rem;
  }
  .article__motivate--wolf {
    height: 50rem;
  }
  .article__motivate--tiger {
    height: 50rem;
  }
  .article__motivate--eagle {
    height: 50rem;
  }
  .article__more {
    gap: 0;
  }
  .article__systems--box img {
    height: 30rem;
  }
  .article__systems--box-tags {
    flex-wrap: wrap;
  }
  .article__systems--box-tags div {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
  }
  .article__systems--box-tags ion-icon {
    font-size: 1.4rem;
  }
  .article__systems--box-tags span {
    font-size: 1.2rem;
  }
  .article__systems--box-heading {
    font-size: 1.6rem;
  }
  .article__systems--box-desc {
    font-size: 1.2rem;
  }
  .article__systems--box a {
    font-size: 1.5rem;
  }
}
@media (max-width: 68.75em) {
  .article__heading {
    font-size: 6rem;
  }
  .article__desc {
    font-size: 1.6rem;
  }
  .article__body {
    width: 100%;
    flex-direction: column;
    margin-top: 3rem;
  }
  .aside {
    justify-content: space-between;
  }
  .article__more {
    gap: 0;
  }
  .article__more--tag {
    font-size: 1.5rem;
    padding: 0.8rem 1.6rem;
  }
  .article__more--heading {
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: -0.05rem;
  }
  .article__more--desc {
    text-align: center;
    font-size: 1.8rem;
  }
  .article__systems {
    margin-top: 4rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  .article__systems--box img {
    height: 35rem;
  }
  .article__systems--box-tags div {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
  }
  .article__systems--box-tags ion-icon {
    font-size: 2rem;
  }
  .article__systems--box-tags span {
    font-size: 1.5rem;
  }
  .article__systems--box-heading {
    font-size: 2rem;
  }
  .article__systems--box-desc {
    font-size: 1.5rem;
  }
  .article__systems--box a {
    font-size: 1.5rem;
  }
}
@media (max-width: 53.125em) {
  .article__container {
    width: 95%;
  }
  .article__header {
    align-items: flex-start;
  }
  .article__heading {
    text-align: start;
    font-size: 5.5rem;
  }
  .article__desc {
    text-align: start;
    font-size: 2rem;
  }
  .contributor img {
    width: 5rem;
  }
  .contributor__name {
    font-size: 2rem;
  }
  .contributor__date {
    margin-top: 0.3rem;
    font-size: 1.5rem;
  }
  .aside__reading {
    margin-top: -0.8rem;
    font-size: 2rem;
  }
  .aside__reading ion-icon {
    font-size: 3rem;
  }
  .content__table--titles {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    color: #404040;
    font-weight: 500;
  }
  .content__table--results {
    font-size: 1.5rem;
  }
  .article__motivate {
    height: 40rem;
  }
  .article__motivate--wolf {
    height: 40rem;
  }
  .article__motivate--tiger {
    height: 40rem;
  }
  .article__motivate--eagle {
    height: 40rem;
  }
  .article__more {
    align-items: flex-start;
  }
  .article__more--heading {
    text-align: start;
  }
  .article__more--desc {
    text-align: start;
    font-size: 2rem;
  }
  .article__systems {
    margin-top: 4rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
  .article__systems--box {
    gap: 1rem;
  }
}
@media (max-width: 43.75em) {
  .article__heading {
    font-size: 4rem;
  }
  .article__tag {
    font-size: 1.5rem;
    padding: 0.5rem 1.2rem;
  }
  .article__tag ion-icon {
    font-size: 1.3rem;
  }
  .article__header--image {
    margin-top: 2rem;
  }
  .article__desc {
    font-size: 1.8rem;
  }
  .article__body {
    padding-bottom: 5rem;
  }
  .aside {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding-bottom: 3rem;
  }
  .contributor img {
    width: 5rem;
  }
  .contributor__name {
    font-size: 1.8rem;
  }
  .contributor__date {
    margin-top: -0.1rem;
    font-size: 1.5rem;
  }
  .aside__box--long {
    grid-column: 1/3;
  }
  .aside__reading {
    width: 100%;
    margin-top: -0.8rem;
    font-size: 2rem;
    gap: 1rem;
  }
  .aside__reading ion-icon {
    font-size: 2.5rem;
  }
  .content__text {
    font-size: 1.8rem;
  }
  .motivation {
    font-size: 1.8rem;
  }
  .content__title {
    font-size: 2.5rem;
  }
  .content__list {
    font-size: 1.8rem;
  }
  .content__organized {
    font-size: 1.8rem;
  }
  .content__linked {
    margin-left: 8rem;
  }
  .content__quotation {
    font-size: 2rem;
  }
  .quote__author {
    font-size: 1.5rem;
  }
  .content__example--text {
    font-size: 1.5rem;
  }
  .content__table {
    overflow-x: auto;
  }
  .content__table--titles {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    color: #404040;
    font-weight: 500;
  }
  .content__table--results {
    font-size: 1.5rem;
  }
  .article__motivate {
    height: 35rem;
  }
  .article__motivate--wolf {
    height: 35rem;
  }
  .article__motivate--tiger {
    height: 40rem;
  }
  .article__motivate--eagle {
    height: 40rem;
  }
  .article__motivate--word {
    font-size: 5rem;
  }
  .article__motivate--def {
    width: fit-content;
    font-size: 1.3rem;
    padding: 0.5rem 1rem;
  }
  .article__more {
    align-items: flex-start;
    margin-top: 7rem;
  }
  .article__more--heading {
    margin-top: 1rem;
    text-align: start;
    font-size: 4rem;
    font-weight: 600;
  }
  .article__more--desc {
    text-align: start;
    font-size: 1.5rem;
  }
  .article__systems {
    margin-top: 4rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 5rem;
  }
  .article__systems--box {
    gap: 2rem;
  }
}
@media (max-width: 34.375em) {
  .article__container {
    width: 90%;
  }
  .article__header {
    gap: 1.5rem;
  }
  .article__heading {
    font-size: 4rem;
  }
  .article__tags {
    gap: 0.5rem;
  }
  .article__desc {
    font-size: 2rem;
  }
  .article__header--image {
    margin-top: 1.5rem;
  }
  .aside {
    grid-template-columns: 1fr;
  }
  .aside__box--long {
    grid-column: auto;
  }
  .content__text {
    font-size: 2rem;
  }
  .motivation {
    font-size: 2rem;
  }
  .content__list {
    font-size: 2rem;
  }
  .content__organized {
    font-size: 2rem;
  }
  .content__quotation {
    font-size: 2.5rem;
  }
  .content__example--text {
    font-size: 2rem;
  }
  .content__table--container {
    width: 75rem;
    overflow: auto;
  }
  .content__table--titles {
    font-size: 1.8rem;
  }
  .content__table--results {
    font-size: 1.8rem;
  }
  .article__more--desc {
    font-size: 2rem;
  }
}
@media (max-width: 25em) {
  .article__header {
    align-items: flex-start;
  }
  .article__heading {
    font-size: 3.5rem;
    text-align: start;
  }
  .article__tag {
    gap: 0.5rem;
    font-size: 1.2rem;
  }
  .article__desc {
    font-size: 1.8rem;
    text-align: start;
  }
  .content__linked {
    margin-left: 5rem;
  }
  .content__quote {
    padding-left: 3rem;
  }
  .article__motivate--word {
    font-size: 4rem;
    font-weight: 500;
  }
  .article__more--heading {
    font-size: 3rem;
  }
  .article__systems--box {
    gap: 1.5rem;
  }
}
.project {
  background-color: #0a0a0a;
}
.project__top--back {
  background-size: cover;
  background-position: center;
  backdrop-filter: brightness(5);
}
.project__top--back::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 15, 15, 0), #323232), url("../../all_img/hero__img.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(1) contrast(1.5);
}

.disable-scroll {
  overflow: hidden;
}

/* HERO ///////////////////////////////*/
.hero {
  margin-top: 5rem;
}

.container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  margin-bottom: 20rem;
  position: relative;
}

.hero__tag {
  display: none;
  width: fit-content;
  font-size: 2rem;
  margin-bottom: 2rem;
  background-image: linear-gradient(#111, #131313);
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.4rem #000;
  padding: 1rem 2rem;
  font-weight: 500;
  color: #eee;
  border-radius: 100rem;
}

.hero__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.hero__text {
  margin-left: 0.5rem;
  margin-top: 2rem;
  letter-spacing: -0.05rem;
  font-size: 2.5rem;
  text-align: center;
  color: #aaa;
}

.users {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-image: linear-gradient(to right, #171717, #111);
  padding: 1.2rem;
  box-shadow: 0 0 1rem #000, inset 0 0 1rem #000;
  border-radius: 10rem;
  position: relative;
  z-index: 0;
  /* glowing animated border */
  border: 0.2rem solid transparent;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  background-image: linear-gradient(to right, #0a0a0a, #111), linear-gradient(270deg, #111, #fff, #111); /* border */
  background-size: 200% 200%, 400% 400%;
  animation: borderGlow 20s ease-in-out infinite;
}

.users__img {
  display: flex;
  align-items: center;
}

.users__img--object {
  width: 3rem;
  border-radius: 50%;
  border: 0.2rem solid #171717;
}
.users__img--object:not(:first-child) {
  margin-left: -1.5rem;
}

.users__text {
  font-size: 1.8rem;
  color: #aaa;
}

.users__text--sp {
  font-weight: 700;
  color: #fff;
}

.button {
  display: flex;
  align-items: center;
  margin-top: 3rem;
  gap: 2rem;
}

.hero__right {
  margin-top: 8rem;
  position: relative;
  width: 100%;
  height: 100rem;
  background-color: transparent;
  border: 0.1rem solid #aaa;
  backdrop-filter: blur(2rem);
  background-image: linear-gradient(rgba(170, 170, 170, 0.1294117647), rgba(170, 170, 170, 0));
  border-radius: 1rem;
  overflow: hidden;
  padding: 2rem;
}
.hero__right--box {
  width: 100%;
  height: 90%;
  border-radius: 1rem;
  overflow: hidden;
  border: 0.1rem solid #aaa;
  position: relative;
}
.hero__right--box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 60%;
  filter: contrast(1.1) brightness(0.8);
  opacity: 0;
  animation: fadeSlideshow 25s infinite; /* 5s per image, 5 images = 25s */
}
.hero__right--box-text {
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  letter-spacing: -0.05rem;
  background-color: rgba(170, 170, 170, 0.2039215686);
  backdrop-filter: blur(2rem);
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #aaa;
  color: #aaa;
}
.hero__right--dots {
  margin-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}
.hero__right--dots::after {
  content: "";
  width: 20rem;
  height: 5rem;
  background-image: linear-gradient(to right, #0a0a0a, rgba(10, 10, 10, 0), #0a0a0a);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.hero__right--dots-dots {
  width: 1rem;
  height: 1rem;
  background-color: #262626;
  border-radius: 50%;
}
.hero__right--dots-dots-active {
  background-color: #fff;
}

.hero__img {
  width: 90rem;
  border-radius: 1.5rem;
  /* outline: 0.3rem solid #2b8a3e;
  outline-offset: 0.5rem; */
}

.hero__money {
  width: 40rem;
  /* opacity: 0; */
  border-radius: 1.5rem;
  border: 0.2rem solid #fff;
  position: absolute;
  left: -5rem;
  bottom: -5rem;
}

.hero__box {
  border-left: 0.5rem solid #2b8a3e;
  padding-left: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  right: 6rem;
  bottom: 3rem;
}

.hero__motivation {
  font-size: 2rem;
  color: #fff;
}

.hero__author {
  width: fit-content;
  font-size: 1.5rem;
  color: #fff;
  font-style: italic;
  border-bottom: 0.2rem solid #fff;
}

.compare {
  width: 100%;
  padding: 0rem 10rem 15rem 10rem;
  background-color: #0a0a0a;
}
.compare__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compare__boxes {
  margin-top: 10rem;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-size: cover;
  box-shadow: 0 0 0.3rem #000;
  gap: 5rem;
}
.compare__box {
  width: 100%;
  height: 30rem;
  background-color: rgba(17, 17, 17, 0);
  border: 0.1rem solid #565656;
  border-radius: 1rem;
  font-weight: 600;
  padding: 5rem;
  box-shadow: 0 0 0.3rem #000;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.5s ease, border-color 0.5s ease, transform 0.5s ease;
}
.compare__box--active {
  border: 0.1rem solid #ccc;
  transform: translateY(-0.5rem); /* slight lift */
}
.compare__box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgb(20, 20, 20), transparent 70%);
  opacity: var(--active, 0);
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.compare__box--icon {
  font-size: 50rem;
  border-radius: 1000rem;
  color: rgba(23, 23, 23, 0.3843137255);
  position: absolute;
  bottom: -15rem;
  right: -15rem;
  z-index: 1;
}
.compare__box--heading {
  font-size: 5rem;
  color: #999;
  letter-spacing: -0.1rem;
  z-index: 1;
}
.compare__box--text {
  width: 70%;
  font-size: 2.5rem;
  letter-spacing: -0.05rem;
  line-height: 1.5;
  font-weight: 500;
  color: #555;
  z-index: 1;
}
.compare__cta {
  background-color: #0a0a0a;
  border: 0.1rem solid #565656;
  border-radius: 2rem;
  font-weight: 600;
  padding: 3rem;
  display: flex;
  justify-content: space-between;
}
.compare__cta--back {
  width: 100%;
  margin-top: 10rem;
  padding: 0.5rem;
  box-shadow: 0 0 0.3rem #000;
  background-color: rgba(153, 153, 153, 0.0549019608);
  border: 0.1rem solid rgba(86, 86, 86, 0.1647058824);
  border-radius: 2rem;
}
.compare__cta--left {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.compare__cta--heading {
  font-size: 4rem;
  font-weight: 600;
  color: #ddd;
  text-transform: capitalize;
}
.compare__cta--sep {
  width: 0.1rem;
  height: 100%;
  background-color: #262626;
}
.compare__cta--text {
  font-size: 2.5rem;
  color: #999;
}

.features {
  width: 100%;
  padding: 10rem;
  background-image: linear-gradient(#0f0f0f, #0a0a0a);
  background-size: cover;
}
.features__container {
  padding: 5rem 5rem 15rem 5rem;
}
.features__content {
  margin-top: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rem;
}
.features__box {
  display: flex;
  align-items: center;
  gap: 15rem;
}
.features__box--img {
  border-radius: 1.6rem;
  background-size: cover;
  background-image: linear-gradient(#0a0a0a, #0f0f0f);
  box-shadow: 0 0 0.3rem #000;
  padding: 5rem;
}
.features__box--img img {
  filter: saturate(0) invert(1) brightness(0.9);
}
.features__box--img-back {
  padding: 2rem;
  background-color: rgba(153, 153, 153, 0.0549019608);
  border: 0.1rem solid rgba(86, 86, 86, 0.1647058824);
  border-radius: 2.1rem;
}
.features__box--img img {
  width: 75rem;
}
.features__box--right {
  width: 100rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.features__box--right-tag {
  width: fit-content;
  border-radius: 100rem;
  padding: 1rem 2rem;
  color: #ccc;
  font-size: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-transform: capitalize;
  background-image: linear-gradient(#0a0a0a, #0f0f0f);
  border: 0.1rem solid rgba(38, 38, 38, 0.1490196078);
  outline: 0.7rem solid #262626;
  box-shadow: 0 0 0.4rem #000;
}
.features__box--right-text {
  font-size: 2.5rem;
  font-weight: 500;
  color: #aaa;
}

.today {
  margin-top: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.today__container {
  width: 100%;
  padding: 10rem 10rem 15rem 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.today__boxes {
  margin-top: 10rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rem;
}
.today__box {
  width: 100%;
  height: 100%;
  background-color: #0a0a0a;
  box-shadow: 0 0 0.4rem #000;
  border: 0.1rem solid #565656;
  border-radius: 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.today__box--back {
  padding: 1rem;
  background-color: rgba(153, 153, 153, 0.0549019608);
  border: 0.1rem solid rgba(86, 86, 86, 0.1647058824);
  border-radius: 2rem;
}
.today__box--number {
  font-size: 5rem;
  font-weight: 600;
  color: #eee;
  background-image: linear-gradient(#0a0a0a, #111);
  border: 0.1rem solid #999;
  box-shadow: 0 0 0.3rem #000;
  width: 9rem;
  height: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
}
.today__box--top {
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0 0 5rem 0;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
}
.today__box--top-1 {
  background-image: radial-gradient(circle, rgba(10, 10, 10, 0.7607843137), #0a0a0a 90%), linear-gradient(to bottom, rgba(10, 10, 10, 0), #0a0a0a), url("https://images.unsplash.com/photo-1589939705384-5185137a7f0f?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
}
.today__box--top-2 {
  background-image: radial-gradient(circle, rgba(10, 10, 10, 0.7607843137), #0a0a0a 90%), linear-gradient(to bottom, rgba(10, 10, 10, 0), #0a0a0a), url("https://images.unsplash.com/photo-1439754389055-9f0855aa82c2?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
}
.today__box--top-3 {
  background-image: radial-gradient(circle, rgba(10, 10, 10, 0.7607843137), #0a0a0a 90%), linear-gradient(to bottom, rgba(10, 10, 10, 0), #0a0a0a), url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-position: 80%;
}
.today__box--icon {
  margin-top: 10rem;
  font-size: 7rem;
  color: #ccc;
}
.today__box--heading {
  font-size: 6rem;
  text-align: center;
  font-weight: 400;
  color: #eee;
  line-height: 1.2;
  text-transform: capitalize;
}
.today__box--sep {
  width: 100%;
  height: 0.2rem;
  background-image: linear-gradient(to right, #171717 5%, #565656, #171717 95%);
}
.today__box--bottom {
  width: 100%;
  height: 90%;
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.today__box--text {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  color: #a5a5a5;
}
.today__box--text-sp {
  color: #efefef;
}
.today__btn {
  margin-top: 10rem;
}

.dream {
  margin-top: 5rem;
}
.dream__container {
  width: 100%;
  padding: 10rem 10rem 15rem 10rem;
}
.dream__box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rem;
  background-image: linear-gradient(#111, #0f0f0f);
  border: 0.1rem solid #565656;
  padding: 6rem 0;
  border-radius: 1.6rem;
}
.dream__box--back {
  padding: 2rem;
  background-color: rgba(153, 153, 153, 0.0549019608);
  border: 0.1rem solid rgba(86, 86, 86, 0.1647058824);
  box-shadow: 0 0 0.3rem #000;
  border-radius: 2rem;
}
.dream__left {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.dream__left--text {
  margin-top: 3rem;
  font-size: 2.5rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  color: #999;
}
.dream__right {
  width: 100rem;
  height: 75rem;
  background-image: url("https://images.unsplash.com/photo-1742056023863-4f47e97d340d?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  border-radius: 2rem;
  box-shadow: 0 0 0.3rem #000;
  border-top: 0.1rem solid #171717;
}
.dream__right--2 {
  background-image: url("https://images.unsplash.com/photo-1578411573481-130702ea6a99?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}

.types {
  margin-top: 5rem;
}
.types__container {
  width: 100%;
  padding: 10rem 10rem 15rem 10rem;
}
.types__content {
  margin-top: 10rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.types__box {
  background-image: linear-gradient(120deg, #0a0a0a, #0f0f0f);
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 68rem;
  border-radius: 0.5rem;
  border: 0.1rem solid #262626;
  box-shadow: 0 0 0.3rem #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: background-color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.types__box--active {
  background-image: none;
  background-color: #202020;
  border-color: #707070;
}
.types__box:hover {
  background-image: linear-gradient(120deg, #262626, #171717);
}
.types__box:hover .types__box--text {
  color: #bbb;
}
.types__box--top {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.types__box--top ion-icon {
  font-size: 3rem;
  color: #aaa;
  background-image: linear-gradient(#0f0f0f, #0a0a0a);
  border-radius: 1rem;
  border: 0.1rem solid #111;
  box-shadow: 0 0 0.3rem #000;
  padding: 1rem;
}
.types__box--title {
  width: fit-content;
  font-size: 4rem;
  font-weight: 600;
  background-image: linear-gradient(to right, #eee, #aaa);
  background-clip: text;
  color: transparent;
}
.types__box--text {
  font-size: 2rem;
  color: #888;
  transition: all 0.2s;
}
.types__box--img {
  height: 35rem;
  object-fit: cover;
  object-position: top;
  width: 100%;
}
.types__notes {
  margin-top: 5rem;
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 1rem;
}
.types__notes ion-icon {
  font-size: 5rem;
  color: #555;
}
.types__notes span {
  font-size: 4rem;
  letter-spacing: -0.1rem;
  background-image: linear-gradient(to right, #ccc, #999);
  font-weight: 400;
  background-clip: text;
  color: transparent;
}

.testimonials__container {
  padding: 10rem 0rem 15rem 0rem;
}
.testimonials__heading {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.testimonials__content {
  margin-top: 5rem;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow: hidden;
  position: relative;
}
.testimonials__content::after {
  content: "";
  width: 3%;
  height: 100%;
  background-image: linear-gradient(to right, #0f0f0f, rgba(15, 15, 15, 0));
  position: absolute;
}
.testimonials__content::before {
  content: "";
  width: 3%;
  height: 100%;
  background-image: linear-gradient(to left, #0f0f0f, rgba(0, 0, 0, 0));
  position: absolute;
  z-index: 100;
  right: 0;
}
.testimonials__boxes {
  display: flex;
  width: max-content;
  animation: scroll-left 100s linear infinite;
  gap: 2rem;
}
.testimonials__boxes:nth-child(even) {
  animation-name: scroll-right;
}
.testimonials__box {
  width: 80rem;
  height: 30rem;
  background-image: linear-gradient(#111, #0f0f0f);
  border-radius: 1.6rem;
  padding: 2.5rem;
  box-shadow: 0 0 0.3rem #000;
  border: 0.1rem solid #565656;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5rem;
}
.testimonials__box--back {
  padding: 0.5rem;
  background-color: rgba(153, 153, 153, 0.0549019608);
  border: 0.1rem solid rgba(86, 86, 86, 0.1647058824);
  box-shadow: 0 0 0.3rem #000;
  border-radius: 2rem;
}
.testimonials__box--left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.testimonials__box--top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5rem;
}
.testimonials__box--top-left {
  display: flex;
  flex-direction: column;
}
.testimonials__box--top-left-name {
  font-size: 1.8rem;
  font-weight: 500;
  color: #aaa;
}
.testimonials__box--top-left-hustle {
  margin-top: -0.3rem;
  font-size: 1.5rem;
  color: #777;
}
.testimonials__box--top-img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 100rem;
  box-shadow: 0 0 0.3rem #000;
  border: 0.2rem solid #171717;
}
.testimonials__box--message {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #aaa;
}
.testimonials__box--sep {
  width: 0.1rem;
  height: 100%;
  background-color: #171717;
}
.testimonials__box--prove {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.6rem;
  filter: brightness(0.7);
  box-shadow: 0 0 0.3rem #000;
  border-top: 0.1rem solid #171717;
}

.decide__container {
  width: 100%;
  padding: 10rem 10rem 15rem 10rem;
}
.decide__content {
  margin-top: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
}
.decide__box {
  width: 50rem;
  height: 90rem;
  background-image: linear-gradient(rgba(23, 23, 23, 0), rgba(17, 17, 17, 0));
  border-radius: 2rem;
  box-shadow: 0 0 0.4rem #000;
  border: 0.1rem solid #202020;
}
.decide__box-sp {
  background-image: linear-gradient(#111, rgba(0, 0, 0, 0));
  background-size: 100%;
  border: 0.1rem solid #333;
}
.decide__box--top {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  padding: 2rem;
}
.decide__box--top-icon {
  font-size: 6rem;
  color: #565656;
}
.decide__box--top-icon-sp {
  color: #999;
}
.decide__box--heading {
  font-size: 5rem;
  letter-spacing: -0.15rem;
  background-image: linear-gradient(to right, #777, #333);
  background-clip: text;
  color: transparent;
  font-weight: 500;
}
.decide__box--heading-sp {
  background-image: linear-gradient(to right, #ccc, #aaa);
}
.decide__box--tag {
  font-size: 2rem;
  letter-spacing: -0.05rem;
  color: #777;
  text-transform: capitalize;
}
.decide__box--tag-sp {
  color: #ddd;
}
.decide__box--sep {
  margin: 1rem 0;
  width: 100%;
  height: 0.1rem;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, #333, rgba(0, 0, 0, 0) 95%);
}
.decide__box--sep-sp {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 5%, #bbb, rgba(0, 0, 0, 0) 95%);
}
.decide__box--bottom {
  height: 65%;
  padding: 0 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.decide__box--bottom-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.decide__box--bottom-info-price {
  margin-top: 2rem;
  text-align: center;
  align-self: center;
  font-size: 3rem;
  letter-spacing: -0.15rem;
  color: #333;
}
.decide__box--bottom-info-price-sp {
  margin-top: 0;
  letter-spacing: -0.4rem;
  font-size: 7rem;
  width: fit-content;
  background-image: linear-gradient(#fff, #aaa);
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.decide__box--bottom-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: #777;
  font-size: 1.8rem;
  letter-spacing: -0.1rem;
}
.decide__box--bottom-info-list-sp {
  margin-top: -2rem;
  color: #ddd;
}
.decide__box--bottom-info-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.decide__box--features {
  margin-top: -0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.decide__box--features-detail {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: #ccc;
}
.decide__box--features-icon {
  font-size: 3rem;
}
.decide__box--features-icon-sp {
  color: #ccc;
}
.decide__box--features-text {
  font-size: 1.8rem;
}
.decide__box--features-text-sp {
  background-image: linear-gradient(#fff, #aaa);
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.decide__box--btn {
  text-transform: capitalize;
  align-self: center;
  font-size: 2rem;
  letter-spacing: -0.1rem;
  text-decoration: none;
  color: #777;
  padding: 1.5rem 3rem;
  background-image: linear-gradient(#171717, #111);
  border-radius: 1rem;
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.4rem #000;
  transition: all 0.2s;
}
.decide__box--btn-sp {
  background-image: linear-gradient(to right, #ccc, #aaa);
  border-radius: 1rem;
  color: #111;
  font-weight: 500;
  border-top: 0.1rem solid #fff;
  box-shadow: 0 0 0.4rem #000;
  transition: all 0.2s;
}
.decide__box--btn-sp:hover {
  background-image: linear-gradient(to right, #eee, #ccc) !important;
  border-top: 0.1rem solid #fff !important;
  box-shadow: 0 0 1rem #000;
}
.decide__box--btn:hover {
  background-image: linear-gradient(#181818, #121212);
  border-top: 0.1rem solid #212121;
  box-shadow: 0 0 1rem #000;
}

.increase {
  width: 60%;
  margin: 0 auto;
}
.increase__container {
  width: 100%;
  padding: 0rem 10rem 15rem 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.increase__top {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.increase__icon {
  font-size: 10rem;
  color: #aaaaaa;
}
.increase__heading {
  text-transform: capitalize;
  letter-spacing: -0.2rem;
  font-size: 7rem;
  background-image: linear-gradient(#eee 50%, #888);
  font-weight: 600;
  background-clip: text;
  color: transparent;
}
.increase__text {
  margin-top: 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  font-size: 2rem;
  letter-spacing: -0.1rem;
  color: #888;
}
.increase__text--sp {
  color: #b5b5b5;
  font-weight: 600;
}
.increase__btn {
  margin-top: 5rem;
}

.faq {
  background-color: #eee;
}
.faq__container {
  width: 180rem;
  margin: 0 auto;
  padding: 10rem 10rem 15rem 10rem;
}
.faq__content {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.faq__box {
  display: flex;
  flex-direction: column;
}
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  background-image: linear-gradient(#eee, rgba(234, 234, 234, 0.4784313725));
  border: 0.2rem solid #e5e5e5;
  outline: 0.5rem solid #eaeaea;
  box-shadow: 0 0.2rem 0.3rem #bbb;
  background-color: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: inherit;
}
.faq__question--text {
  font-size: 2.5rem;
  color: #262626;
  font-weight: 600;
  letter-spacing: -0.08rem;
}
.faq__question--icon {
  font-size: 3rem;
  color: #262626;
  transition: all 0.2s;
}
.faq__question--icon-transform {
  transform: rotate(180deg);
}
.faq__answer {
  margin-top: 0.5rem;
  max-height: 0;
  overflow: hidden;
  width: 100%;
  padding: 0;
  background-color: #eaeaea;
  box-shadow: 0 0 0.3rem #bbb;
  border-radius: 0.5rem;
  transition: max-height 0.5s ease-in-out;
}
.faq__answer--text {
  opacity: 0;
  font-size: 2rem;
  color: #555;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: -0.08rem;
  transition: all 0.2s;
}
.faq__answer--text-show {
  opacity: 100%;
}
.faq__answer--inner {
  padding: 2rem 3rem;
}
.faq__show {
  max-height: 50rem;
  transition: max-height 0.5s ease-in-out;
}

/* MEDIA QUERIES ///////////////////////////////*/
@media (max-width: 150.3125em) {
  .compare {
    padding: 0 15rem 15rem 15rem;
  }
  .compare__boxes {
    margin-top: 7.5rem;
    gap: 7.5rem;
  }
  .compare__cta--back {
    margin-top: 7.5rem;
  }
  .today__container {
    padding: 10rem 15rem 10rem 15rem;
  }
  .today__boxes {
    gap: 7.5rem;
  }
  .today__box--heading {
    font-size: 5rem;
  }
  .dream__container {
    padding: 10rem 15rem 15rem 15rem;
  }
  .dream__box {
    padding: 3rem 3.5rem;
    padding: 7.5rem;
  }
}
@media (max-width: 137.5em) {
  .heading__primary {
    font-size: 17rem;
  }
  .hero__text {
    font-size: 2.5rem;
  }
  .compare {
    padding: 0 7.5rem 15rem 7.5rem;
  }
  .compare__boxes {
    gap: 2rem;
  }
  .compare__box--text {
    width: 80%;
  }
  .heading__secondary,
  .heading__tertiary {
    font-size: 12rem;
  }
  .features {
    padding: 10rem 7.5rem 10rem 7.5rem;
  }
  .features__container {
    padding: 5rem 0rem 15rem 0rem;
  }
  .features__box--img img {
    width: 100%;
  }
  .features__box--right {
    width: 100%;
  }
  .today__container {
    padding: 10rem 7.5rem 10rem 7.5rem;
  }
  .today__boxes {
    gap: 5rem;
  }
  .today__box--heading {
    font-size: 4.5rem;
  }
  .dream__container {
    padding: 10rem 7.5rem 15rem 7.5rem;
  }
  .dream__left--text {
    font-size: 2.2rem;
  }
  .dream__right {
    width: 50%;
  }
  .heading__quintary {
    font-size: 6rem;
  }
  .types__content {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 118.75em) {
  .heading__primary {
    font-size: 15rem;
  }
  .hero {
    margin-top: 2rem;
  }
  .hero__tag {
    margin-bottom: 0;
  }
  .compare__box--heading {
    font-size: 5.5rem;
  }
  .compare__box--icon {
    font-size: 40rem;
  }
  .compare__box--text {
    width: 95%;
  }
  .heading__secondary,
  .heading__tertiary {
    font-size: 10rem;
  }
  .heading__quartenary {
    font-size: 7rem;
  }
  .today__box--heading {
    font-size: 4rem;
  }
  .today__box--text {
    font-size: 1.6rem;
  }
  .dream__box {
    gap: 5rem;
  }
  .increase__heading {
    font-size: 6rem;
  }
  .faq__container {
    width: 100%;
  }
}
@media (max-width: 106.25em) {
  .heading__primary {
    font-size: 13rem;
  }
  .btn {
    font-size: 2rem;
  }
  .hero__text {
    font-size: 2.2rem;
  }
  .heading__secondary {
    font-size: 9rem;
  }
  .heading__tertiary {
    font-size: 9rem;
  }
  .heading__quartenary {
    font-size: 6rem;
  }
  .compare__box {
    border-radius: 0.5rem;
    height: 25rem;
  }
  .compare__box--back {
    border-radius: 0.5rem;
  }
  .compare__box--icon {
    font-size: 30rem;
    right: -5rem;
  }
  .compare__box--text {
    font-size: 2rem;
  }
  .compare__cta {
    border-radius: 0.5rem;
  }
  .compare__cta--back {
    margin-top: 2rem;
    border-radius: 0.5rem;
  }
  .compare__cta--heading {
    font-size: 3rem;
  }
  .compare__cta--text {
    font-size: 2rem;
  }
  .features__content {
    gap: 20rem;
  }
  .features__box {
    gap: 7.5rem;
  }
  .today__boxes {
    gap: 2rem;
  }
  .today__box {
    border-radius: 0.5rem;
  }
  .today__box--back {
    border-radius: 0.5rem;
  }
  .today__box--top {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }
  .today__box--number {
    font-size: 4rem;
  }
  .today__box--heading {
    font-size: 3.5rem;
  }
  .today__box--bottom {
    padding: 3rem;
  }
  .today__box--text {
    font-size: 1.5rem;
  }
  .heading__quintary {
    font-size: 8rem;
  }
  .dream__box {
    border-radius: 0.5rem;
    flex-direction: column;
  }
  .dream__box--back {
    border-radius: 0.5rem;
  }
  .dream__left {
    width: 100%;
  }
  .dream__left--text {
    font-size: 2.8rem;
    font-weight: 300;
  }
  .dream__right {
    margin-top: 5rem;
    border-radius: 0.5rem;
    width: 100%;
    height: 50rem;
  }
  .types__content {
    grid-template-columns: repeat(2, 1fr);
  }
  .increase {
    width: 100%;
  }
}
@media (max-width: 90.625em) {
  .heading__primary {
    font-size: 12rem;
  }
  .hero__text {
    font-size: 1.8rem;
  }
  .heading__secondary {
    font-size: 8rem;
  }
  .heading__tertiary {
    font-size: 8rem;
  }
  .compare {
    padding: 0rem 5rem 15rem 5rem;
  }
  .compare__boxes {
    grid-template-columns: repeat(2, 1fr);
  }
  .compare__box {
    height: 30rem;
  }
  .compare__box--heading {
    font-size: 5rem;
  }
  .compare__box--icon {
    font-size: 40rem;
  }
  .compare__box--text {
    font-size: 2.5rem;
  }
  .compare__cta--left {
    gap: 2rem;
  }
  .compare__cta--heading {
    font-size: 2.5rem;
  }
  .compare__cta--text {
    font-size: 1.8rem;
  }
  .heading__quartenary {
    font-size: 5rem;
    line-height: 1.3;
  }
  .features {
    padding: 10rem 0;
  }
  .features__container {
    padding: 5rem 5rem 15rem 5rem;
  }
  .features__box--right-tag {
    font-size: 2.5rem;
  }
  .features__box--right-text {
    font-size: 2rem;
  }
  .today__container {
    padding: 10rem 5rem 15rem 5rem;
  }
  .today__box--heading {
    font-size: 3rem;
  }
  .today__box--text {
    font-size: 1.4rem;
  }
  .dream__container {
    padding: 10rem 5rem 15rem 5rem;
  }
  .dream__right {
    height: 60rem;
  }
  .types__container {
    padding: 10rem 5rem 15rem 5rem;
  }
  .faq__container {
    padding: 10rem 5rem 15rem 5rem;
  }
}
@media (max-width: 78.75em) {
  .heading__primary {
    font-size: 10rem;
  }
  .hero__tag {
    font-size: 1.8rem;
  }
  .hero__video {
    width: 100rem;
    height: 50rem;
  }
  .heading__secondary {
    font-size: 7rem;
  }
  .heading__tertiary {
    font-size: 7rem;
  }
  .compare__boxes {
    gap: 1rem;
  }
  .compare__box {
    padding: 4rem;
  }
  .compare__box--heading {
    font-size: 5rem;
  }
  .compare__box--content {
    gap: 3rem;
  }
  .compare__box--content-heading {
    font-size: 2.8rem;
  }
  .compare__cta--back {
    margin-top: 1rem;
  }
  .compare__cta--heading {
    font-size: 2.2rem;
  }
  .compare__cta--text {
    font-size: 1.5rem;
  }
  .today__boxes {
    gap: 1rem;
  }
  .today__box--heading {
    font-size: 2.5rem;
  }
  .today__box--text {
    font-size: 1.3rem;
  }
}
@media (max-width: 68.75em) {
  .heading__primary {
    font-size: 8.5rem;
  }
  .heading__primary br {
    display: none;
  }
  .hero__text {
    width: 80%;
    font-size: 2.5rem;
  }
  .hero__text br {
    display: none;
  }
  .hero__video {
    width: 95rem;
  }
  .heading__tertiary {
    font-size: 8.5rem;
  }
  .heading__tertiary br {
    display: none;
  }
  .heading__secondary {
    font-size: 8.5rem;
  }
  .heading__secondary br {
    display: none;
  }
  .compare {
    padding: 0rem 2.5rem 15rem 2.5rem;
  }
  .features__container {
    padding: 5rem 2.5rem 15rem 2.5rem;
  }
  .features__box {
    gap: 5rem;
  }
  .today__container {
    padding: 10rem 2.5rem 15rem 2.5rem;
  }
  .today__boxes {
    grid-template-columns: 1fr;
    gap: 10rem;
  }
  .today__box--number {
    font-size: 5.5rem;
  }
  .today__box--icon {
    font-size: 10rem;
  }
  .today__box--heading {
    font-size: 6rem;
    font-weight: 400;
  }
  .today__box--bottom {
    gap: 7rem;
  }
  .today__box--text {
    font-size: 2.5rem;
    font-weight: 300;
  }
  .dream__container {
    padding: 10rem 2.5rem 15rem 2.5rem;
  }
  .dream__box {
    padding: 4rem;
  }
  .types__container {
    padding: 10rem 2.5rem 15rem 2.5rem;
  }
  .decide__container {
    padding: 10rem 2.5rem 15rem 2.5rem;
  }
  .decide__content {
    gap: 1rem;
  }
  .decide__box {
    border-radius: 0.5rem;
  }
}
@media (max-width: 62.5em) {
  .heading__primary {
    font-size: 8rem;
  }
  .hero__text {
    font-size: 2.2rem;
  }
  .hero__right {
    height: 60rem;
  }
  .hero__right--dots {
    margin-top: 3rem;
  }
  .hero__right--box-text {
    font-size: 1.6rem;
    padding: 1rem 2rem;
  }
  .heading__tertiary {
    font-size: 8rem;
  }
  .heading__secondary {
    font-size: 8rem;
  }
  .compare__boxes {
    grid-template-columns: 1fr;
  }
  .compare__box {
    align-items: flex-start;
  }
  .compare__box--heading {
    font-size: 5rem;
    font-weight: 500;
  }
  .compare__box--text {
    font-size: 2.5rem;
  }
  .compare__box--icon {
    font-size: 50rem;
    right: -15rem;
  }
  .compare__cta {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .compare__cta--left {
    flex-direction: column;
    gap: 1rem;
  }
  .compare__cta--heading {
    font-size: 5rem;
  }
  .compare__cta--sep {
    width: 100%;
    height: 0.1rem;
  }
  .compare__cta--text {
    font-size: 2.2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .heading__quartenary {
    font-size: 4rem;
    font-weight: 500;
  }
  .features__box {
    flex-direction: column;
  }
  .features__box:first-child {
    flex-direction: column-reverse;
  }
  .features__box:nth-child(3) {
    flex-direction: column-reverse;
  }
  .features__box--right {
    gap: 2rem;
  }
  .heading__quintary {
    font-size: 5rem;
  }
  .dream__left--text {
    font-size: 2rem;
  }
  .dream__right {
    margin-top: 2rem;
  }
  .testimonials__box {
    width: 60rem;
  }
  .testimonials__box--top-left-name {
    font-size: 1.5rem;
  }
  .testimonials__box--top-left-hustle {
    font-size: 1.3rem;
  }
  .testimonials__box--message {
    font-size: 1.6rem;
  }
  .testimonials__box--prove {
    width: 100%;
  }
  .testimonials__box--prove-sp {
    width: 20rem !important;
  }
  .decide__content {
    width: 100%;
    flex-direction: column;
  }
  .decide__box {
    width: 100%;
  }
  .increase__top {
    flex-direction: column;
    text-align: center;
  }
  .increase__heading {
    font-size: 5rem;
    line-height: 1.3;
  }
  .faq__container {
    padding: 10rem 2.5rem 15rem 2.5rem;
  }
}
@media (max-width: 53.125em) {
  .heading__primary {
    font-size: 7.5rem;
  }
  .container {
    gap: 1rem;
  }
  .hero__tag {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
  .hero__left {
    gap: 0.5rem;
  }
  .users {
    margin-bottom: 1rem;
  }
  .heading__tertiary {
    text-align: center;
    font-size: 6rem;
    letter-spacing: -0.05rem;
  }
  .heading__tertiary br {
    display: none;
  }
  .heading__secondary {
    text-align: center;
    font-size: 6rem;
    letter-spacing: -0.05rem;
  }
  .heading__secondary br {
    display: none;
  }
  .compare {
    padding: 0rem 2.5rem 10rem 2.5rem;
  }
  .compare__box {
    padding: 3rem;
  }
  .compare__box--heading {
    font-size: 4.5rem;
  }
  .compare__box--content-left-icon {
    font-size: 4rem;
  }
  .compare__box--content-left-icon-solutions {
    font-size: 4rem;
  }
  .compare__box--content-heading {
    font-size: 3rem;
  }
  .compare__cta--heading {
    font-size: 5rem;
    margin-bottom: 2rem;
  }
  .compare__cta--text {
    margin-top: 2rem;
    font-size: 2rem;
  }
  .features {
    padding: 5rem 0;
  }
  .features__container {
    padding: 5rem 2.5rem 10rem 2.5rem;
  }
  .features__content {
    margin-top: 10rem;
  }
  .today {
    margin-top: 2rem;
  }
  .today__box--icon {
    font-size: 6rem;
  }
  .today__box--heading {
    font-size: 5rem;
  }
  .dream {
    margin-top: 0;
  }
  .dream__box {
    padding: 2.5rem;
  }
  .dream__right {
    background-position: center;
    height: 50rem;
  }
  .heading__quintary {
    font-size: 4.5rem;
  }
  .types__content {
    grid-template-columns: 1fr;
  }
  .types__notes {
    flex-direction: column;
    align-items: center;
  }
  .types__notes ion-icon {
    font-size: 6rem;
  }
  .types__notes span {
    text-align: center;
    line-height: 1.2;
  }
  .increase__container {
    padding: 0rem 2.5rem 15rem 2.5rem;
  }
  .faq__question {
    gap: 5rem;
  }
  .faq__question--text {
    width: 80%;
    font-size: 2rem;
    text-align: start;
  }
  .faq__answer--text {
    font-size: 1.8rem;
  }
}
@media (max-width: 37.5em) {
  .heading__primary {
    font-size: 7rem;
  }
  .hero {
    margin: 0;
  }
  .container {
    width: 100%;
    align-items: center;
    margin: 0;
    gap: 3rem;
    margin-bottom: 10rem;
    padding: 1.5rem;
  }
  .hero__text {
    width: 100%;
    font-size: 2rem;
    text-align: center;
    align-self: center;
  }
  .hero__tag {
    font-size: 1.3rem;
    align-self: center;
  }
  .hero__right {
    padding: 1rem;
    margin-top: 5rem;
  }
  .users {
    margin-bottom: 2rem;
    align-self: center;
    padding: 0.8rem 1.4rem;
  }
  .users__text {
    font-size: 1.5rem;
  }
  .button {
    align-self: center;
  }
  .hero__video {
    width: 45rem;
    height: 25rem;
  }
  .heading__secondary {
    font-size: 6rem;
  }
  .heading__tertiary {
    font-size: 6rem;
  }
  .compare {
    padding-top: 10rem;
    border-top: 0.1rem dashed #171717;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .compare__boxes {
    gap: 3rem;
  }
  .compare__box--icon {
    right: -15rem;
    font-size: 40rem;
  }
  .compare__cta--heading {
    font-size: 4rem;
    margin-bottom: 0;
  }
  .compare__cta--text {
    margin-top: 0;
    font-weight: 300;
    font-size: 1.5rem;
  }
  .features__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .heading__quintary {
    font-size: 4rem;
  }
  .today__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 5rem;
  }
  .today__box--heading {
    font-size: 3.8rem;
  }
  .today__box--text {
    font-size: 2rem;
  }
  .today__text {
    font-size: 1.8rem;
  }
  .today__btn {
    margin-top: 2rem;
  }
  .dream__container {
    padding-bottom: 5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .dream__box--back {
    padding: 1rem;
  }
  .dream__right {
    height: 40rem;
  }
  .testimonials__container {
    padding: 5rem 0rem 5rem 0rem;
  }
  .testimonials__content {
    gap: 1rem;
  }
  .testimonials__content:hover .testimonials__boxes {
    animation-play-state: running;
  }
  .testimonials__boxes {
    animation: scroll-left 120s linear infinite;
    gap: 1rem;
  }
  .testimonials__boxes:nth-child(even) {
    animation-name: scroll-right;
  }
  .testimonials__box {
    width: 55rem;
    gap: 3rem;
    border-radius: 0.5rem;
  }
  .testimonials__box--back {
    border-radius: 0.5rem;
  }
  .testimonials__box--top-left-name {
    font-size: 1.4rem;
  }
  .testimonials__box--top-left-hustle {
    font-size: 1.1rem;
  }
  .testimonials__box--message {
    font-size: 1.6rem;
  }
  .testimonials__box--prove {
    width: 100%;
  }
  .testimonials__box--prove-sp {
    width: 20rem !important;
  }
  .types__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .types__content {
    margin-top: 4rem;
  }
  .decide__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .decide__content {
    margin-top: 2rem;
  }
  .increase__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .faq__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .faq__question--text {
    font-size: 1.8rem;
  }
  .faq__answer--text {
    font-size: 1.8rem;
  }
}
@media (max-width: 31.25em) {
  .hero__tag {
    font-size: 1.3rem;
    padding: 0.5rem 1rem;
  }
  .heading__primary {
    font-size: 7rem;
  }
  .heading__primary br {
    display: none;
  }
  .hero__text {
    font-size: 1.6rem;
  }
  .users {
    padding: 0.8rem 1.4rem;
  }
  .users__text {
    font-size: 1.5rem;
  }
  .button {
    gap: 1.5rem;
  }
  .compare__boxes {
    margin-top: 3rem;
  }
  .compare__box {
    padding: 2rem;
    height: 25rem;
  }
  .compare__box--heading {
    margin-bottom: 1rem;
    font-size: 4rem;
  }
  .compare__box--text {
    font-size: 2rem;
  }
  .compare__box--icon {
    font-size: 30rem;
    right: -10rem;
    bottom: -10rem;
  }
  .compare__cta--back {
    margin-top: 3rem;
  }
  .compare__cta--heading {
    line-height: 1.2;
  }
  .compare__cta--text {
    font-size: 2rem;
  }
  .heading__secondary {
    font-size: 4.5rem;
  }
  .heading__tertiary {
    font-size: 4.5rem;
  }
  .features__box--right-tag {
    font-size: 1.8rem;
    padding: 0.5rem 1rem;
  }
  .today__container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  .today__box--number {
    font-size: 4rem;
    width: 7rem;
    height: 7rem;
  }
  .today__box--heading {
    font-size: 3.2rem;
  }
  .today__box--bottom {
    gap: 2rem;
  }
  .today__box--text {
    font-size: 1.6rem;
  }
  .heading__quartenary {
    line-height: 1.2;
  }
  .heading__quintary {
    font-size: 3rem;
  }
  .dream__left {
    gap: 0rem;
  }
  .dream__left__text {
    margin-top: 2rem;
  }
  .dream__btn {
    margin-top: 2rem;
  }
  .decide__box {
    height: auto;
  }
  .decide__box--heading {
    line-height: 1.2;
    text-align: center;
    margin: 1rem 0;
  }
  .decide__box--bottom {
    padding: 0 2rem;
  }
  .decide__box--bottom-info-list li {
    align-items: flex-start;
  }
  .decide__box--bottom-info-list li:first-child {
    margin-top: 1rem;
  }
  .decide__box--btn {
    margin: 8rem 0 3rem 0;
  }
}
@media (max-width: 25em) {
  .hero {
    margin-top: 0rem;
  }
  .container {
    width: 100%;
    margin-bottom: 5rem;
  }
  .hero__right {
    width: 100%;
    height: 40rem;
    padding: 0.5rem;
  }
  .hero__tag {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  .hero__text {
    width: 85%;
    font-size: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: 0;
  }
  .users {
    display: none;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  .users__img--object {
    width: 2.5rem;
  }
  .users__img--object:not(:first-child) {
    margin-left: -1.5rem;
  }
  .users__text {
    font-size: 1.5rem;
  }
  .button {
    margin-top: 1rem;
    gap: 1rem;
  }
  .heading__primary {
    font-size: 6.2rem;
    letter-spacing: -0.1rem;
  }
  .hero__right--box {
    border-radius: 0.5rem;
  }
  .hero__right--box-text {
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
  }
  .hero__right--dots {
    margin-top: 1.8rem;
  }
  .hero__right--dots::after {
    height: 3rem;
  }
  .compare {
    padding-top: 5rem;
  }
  .heading__tertiary {
    font-size: 4rem;
    font-weight: 500;
  }
  .heading__tertiary--2 {
    font-size: 5rem;
  }
  .heading__secondary {
    font-size: 5rem;
    font-weight: 500;
  }
  .compare {
    padding-bottom: 7.5rem;
  }
  .compare__box--heading {
    font-size: 3.5rem;
  }
  .compare__box--content-left-icon {
    font-size: 2rem;
    padding: 1rem;
  }
  .compare__box--content-left-icon-solutions {
    font-size: 2rem;
    padding: 1rem;
  }
  .compare__box--content-right {
    margin-bottom: 3rem;
  }
  .compare__box--content-heading {
    margin-top: 0;
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .compare__box--content-text {
    font-size: 1.6rem;
  }
  .compare__cta--heading {
    line-height: 1.2;
    margin-bottom: 1rem;
  }
  .compare__cta--text {
    margin-top: 1rem;
  }
  .heading__quartenary {
    font-size: 3.2rem;
    letter-spacing: -0.05rem;
    text-align: center;
  }
  .features {
    padding-top: 0;
    padding-bottom: 0;
  }
  .features__container {
    padding-bottom: 7.5rem;
  }
  .features__content {
    margin-top: 5rem;
    gap: 10rem;
  }
  .features__box--right {
    align-items: center;
    justify-content: center;
  }
  .features__box--right-tag {
    font-size: 2rem;
  }
  .features__box--right-text {
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
  }
  .today__container {
    padding-top: 4rem;
  }
  .today__boxes {
    margin-top: 5rem;
    gap: 5rem;
  }
  .today__box--back {
    padding: 0.5rem;
  }
  .today__box--number {
    background-image: none;
    background-color: #0f0f0f;
    border: 0.1rem solid #999;
    font-size: 4rem;
    width: 7rem;
    height: 7rem;
    top: -4rem;
  }
  .today__box--icon {
    font-size: 4.5rem;
  }
  .today__box--heading {
    font-size: 2.8rem;
  }
  .today__box--text {
    font-size: 1.8rem;
  }
  .heading__quintary {
    font-size: 4rem;
  }
  .heading__quintary br {
    display: none;
  }
  .dream__container {
    padding-top: 5rem;
  }
  .dream__box {
    padding: 1.5rem;
  }
  .dream__box--back {
    padding: 0.5rem;
  }
  .dream__left--text {
    font-size: 1.8rem;
  }
  .dream__right {
    height: 30rem;
  }
  .types__container {
    padding-top: 0rem;
  }
  .types__box:hover {
    background-image: none;
  }
  .types__box--top {
    padding: 1.5rem;
  }
  .types__box--title {
    font-size: 2.5rem;
  }
  .types__box--text {
    font-size: 1.8rem;
  }
  .types__notes span {
    font-size: 2.8rem;
  }
  .increase__heading {
    line-height: 1.2;
    font-size: 4rem;
  }
  .faq__question--text {
    line-height: 1.2;
  }
}
/* SYSTEMS /////////////////////////////////*/
.systems {
  width: 100vw;
  height: 100%;
  padding: 3rem;
  background-color: #0f0f0f;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  position: fixed;
  overflow-y: scroll;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: all 0.2s;
  overflow: auto;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
}
.systems::-webkit-scrollbar {
  display: none;
}

.close__system {
  font-size: 3rem;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(#171717, #111);
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.5rem #0a0a0a;
  border-radius: 1rem;
  color: #aaa;
  border: none;
  position: absolute;
  top: 2rem;
  right: 2rem;
  cursor: pointer;
}

.systems__hidden {
  opacity: 0;
  visibility: hidden;
}

.systems__heading {
  text-align: center;
  color: #aaa;
  font-size: 7rem;
  display: none;
}

.systems__container {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}

.systems__top {
  display: flex;
  flex-direction: column;
  border-bottom: 0.1rem solid #171717;
  padding-bottom: 1rem;
}

.systems__title {
  font-size: 2rem;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1000rem;
  width: fit-content;
  letter-spacing: -0.05rem;
  background-image: linear-gradient(#387d47, #226e32);
  border-top: 0.1rem solid #649a70;
  box-shadow: 0 0 0.4rem #000;
  padding: 1rem 2rem;
  font-weight: 400;
}

.systems__desc {
  margin-top: 1rem;
  font-size: 2rem;
  color: #aaa;
  font-weight: 500;
}

.systems__assets {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 2rem;
}

.asset {
  width: 100%;
  height: 20rem;
  border-radius: 1.5rem;
  background-image: linear-gradient(#171717, #111);
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.5rem #000;
  border-radius: 2rem;
  padding: 1rem 2rem;
  color: #aaa;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  gap: 0.5rem;
}
.asset:hover {
  background-image: linear-gradient(#202020, #151515);
  border-top: 0.1rem solid #222;
}
.asset:hover .asset__icon {
  color: #ccc;
}
.asset:hover .asset__title {
  color: #ccc;
}
.asset:hover .asset__desc {
  color: #ccc;
}

.asset__icon {
  font-size: 5rem;
  color: #555;
}

.asset__title {
  font-size: 2.8rem;
  color: #555;
}

.asset__desc {
  font-size: 1.4rem;
  text-align: center;
  font-weight: 500;
  color: #555;
}

/* MEDIA QUERIES ///////////////////////////////*/
@media (max-width: 137.5em) {
  .systems__assets {
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (max-width: 125em) {
  .systems__assets {
    grid-template-columns: repeat(9, 1fr);
  }
}
@media (max-width: 115.625em) {
  .systems__assets {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (max-width: 106.25em) {
  .systems__assets {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (max-width: 93.75em) {
  .systems__heading {
    font-size: 6rem;
  }
  .systems__container {
    margin-top: 3rem;
  }
  .systems__assets {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 81.25em) {
  .systems__assets {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 68.75em) {
  .systems__assets {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 53.125em) {
  .systems__assets {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 40.625em) {
  .systems__heading {
    font-size: 4rem;
    text-align: start;
  }
  .systems__desc {
    font-size: 1.8rem;
  }
  .systems__assets {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 31.25em) {
  .systems {
    padding: 2rem;
  }
  .close__system {
    font-size: 2rem;
    top: 2rem;
    right: 2rem;
  }
  .systems__container {
    margin-top: 1rem;
  }
  .systems__heading {
    font-size: 3.5rem;
    display: none;
    text-align: start;
  }
  .systems__title {
    font-size: 1.8rem;
  }
  .systems__desc {
    font-size: 1.8rem;
  }
  .systems__assets {
    grid-template-columns: repeat(2, 1fr);
  }
  .asset {
    height: 20rem;
  }
  .asset__icon {
    font-size: 5rem;
  }
  .asset__title {
    font-size: 2.5rem;
  }
  .asset__desc {
    font-size: 1.4rem;
  }
}
@media (max-width: 25em) {
  .systems {
    padding: 1.5rem;
  }
  .close__system {
    top: 1rem;
    right: 1rem;
  }
  .systems__title {
    font-size: 2rem;
    padding: 0.5rem 1.2rem;
  }
  .systems__desc {
    font-size: 1.8rem;
    font-weight: 500;
  }
  .systems__assets {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .asset {
    height: 15rem;
  }
  .asset__icon {
    font-size: 4rem;
  }
  .asset__title {
    font-size: 2rem;
  }
  .asset__desc {
    font-size: 1.15rem;
  }
}
.hidden {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.menu__active {
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

.opacity {
  opacity: 0;
}

.displaynone {
  display: none !important;
}

.settings-open {
  pointer-events: none;
  opacity: 0.1;
  transition: all 0.5s;
}

.no-scroll {
  overflow: hidden;
  transition: all 0.5s;
}

.journey-disabled {
  background-image: none !important;
  background-color: #222 !important;
  color: #666 !important;
  pointer-events: none !important;
  border-top: none !important;
  opacity: 0.95;
}

.info-welcome {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#0a0a0a 10%, #0f0f0f);
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.info-welcome__message {
  height: 100%;
  font-size: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.2rem;
  font-weight: 500;
  line-height: 1.2;
}
.info-welcome__message--message {
  background-image: linear-gradient(to left, rgba(23, 23, 23, 0) 10%, #aaa, #eee);
  background-clip: text;
  color: transparent;
  background-position: 200%;
  font-weight: 600;
  background-repeat: no-repeat;
  background-size: 500%;
}
.info-welcome__message--message-reveal {
  background-position: 0%;
  transition: background-position 5s;
}
.info-welcome__message--name {
  transform: scale(1.02);
  padding: 2rem;
  border-radius: 0.5rem;
  transition: all 0.5s;
  color: transparent;
}
.info-welcome__message--name-reveal {
  color: #37b24d;
}
.info-welcome__message--loading {
  margin-top: 2rem;
  font-size: 2rem;
  letter-spacing: -0.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #eee;
  font-weight: 300;
  background-image: linear-gradient(#111, #151515);
  border-radius: 1rem;
  padding: 1rem 2rem;
  box-shadow: 0 0 0.3rem #000;
  border-top: 0.1rem solid #151515;
  transition: all 0.5s;
}
.info-welcome__message--loading i {
  animation: loading 1s infinite linear;
}

.info-page {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  background-image: linear-gradient(#0a0a0a 10%, #0f0f0f);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.info-page__box {
  box-shadow: 0 0 0.5rem #000;
  border-top: 0.1rem solid #171717;
  border-radius: 2rem;
  background-image: linear-gradient(#0a0a0a, #111);
  padding: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: relative;
  z-index: 1;
}
.info-page__heading {
  font-size: 2.8rem;
  font-weight: 400;
  color: #bbb;
}
.info-page__input {
  font-family: inherit;
  border: none;
  font-size: 1.8rem;
  border-radius: 0.5rem;
  background-color: #151515;
  padding: 1rem;
  color: #aaa;
  text-align: center;
}
.info-page__input::placeholder {
  text-align: center;
  color: #aaa;
}
.info-page__input:focus {
  outline: none;
}
.info-page__input:focus::placeholder {
  color: transparent;
}
.info-page__name {
  font-size: 1.2rem;
  text-align: center;
  color: #999;
}
.info-page__btn {
  padding: 1rem 2rem;
  font-family: inherit;
  color: #eee;
  border: none;
  font-weight: 600;
  font-size: 2rem;
  background-image: linear-gradient(#226e32, #387d47);
  border-top: 0.1rem solid #649a70;
  box-shadow: 0 0 0.4rem #0a0a0a;
  padding: 1rem 2rem;
  border-radius: 0.8rem;
  cursor: pointer;
}
.info-page__btn:hover {
  background-image: linear-gradient(#387d47, #649a70);
  border-top: 0.1rem solid #7aa884;
}

.dashboard__project {
  background-color: #0f0f0f;
  padding: 2rem;
  height: 100%;
}

.dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  gap: 3rem;
}
.dashboard__menu {
  min-width: 10rem;
  min-height: 95vh;
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-top: 0.1rem solid #202020;
  background-color: #171717;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 2rem;
  padding: 2rem 0;
}
.dashboard__menu--closed {
  transform: scaleX(0);
}
.dashboard__menu--top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}
.dashboard__menu--img {
  width: 6rem;
  background-image: linear-gradient(#111, #171717);
  border: #fff;
  padding: 0.5rem;
  border-radius: 1rem;
  box-shadow: 0 0 0.3rem #000;
}
.dashboard__menu--nav {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.dashboard__menu--nav-btn {
  font-size: 2.5rem;
  font-family: inherit;
  border: none;
  background-color: transparent;
  color: #404040;
  border-top: 0.1rem solid #171717;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.dashboard__menu--nav-btn:hover {
  color: #eee;
}
.dashboard__menu--nav-btn-active {
  color: #eee;
  background-color: #262626;
  border-top: 0.1rem solid #303030;
}
.dashboard__menu--logout {
  font-size: 2.5rem;
  font-family: inherit;
  border: none;
  background-color: transparent;
  color: #565656;
  cursor: pointer;
  transition: all 0.2s;
}
.dashboard__menu--logout:hover {
  color: #eee;
}

.dashboard__content {
  margin-top: 2rem;
  width: 100%;
}
.dashboard__content--top {
  display: flex;
  justify-content: space-between;
}
.dashboard__content--top-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dashboard__content--top-nav {
  margin-top: 1rem;
  font-size: 3.5rem;
  background-color: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
  display: none;
}
.dashboard__content--top-heading {
  font-size: 4rem;
  font-weight: 400;
  color: #ddd;
}
.dashboard__content--top-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dashboard__content--top-name {
  font-size: 2rem;
  width: 4rem;
  height: 4rem;
  background-color: #171717;
  box-shadow: 0 0 0.4rem #000;
  border: none;
  border-top: 0.1rem solid #262626;
  color: #999;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}
.dashboard__content--top-name:hover {
  background-color: #262626;
  border-top: 0.1rem solid #404040;
}

.dashboard__progress {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
.dashboard__progress--anounce {
  width: 100%;
  padding: 1rem;
  background-color: #171717;
  box-shadow: 0 0 0.3rem #000;
  border-top: 0.1rem solid #202020;
  border-radius: 1rem;
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dashboard__progress--anounce-left {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.dashboard__progress--anounce-tag {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #277d36;
  border-top: 0.1rem solid #37b24d;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
}
.dashboard__progress--anounce-tag-icon {
  font-size: 1.8rem;
}
.dashboard__progress--anounce-tag-text {
  font-size: 1.5rem;
  font-weight: 500;
}
.dashboard__progress--anounce-heading {
  font-size: 2rem;
  color: #ccc;
  font-weight: 400;
}
.dashboard__progress--anounce-btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 1.5rem;
  color: #111;
  background-color: transparent;
  border: none;
  background-image: linear-gradient(#277d36, #37b24d);
  border-top: 0.1rem solid #37b24d;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.dashboard__progress--anounce-btn:hover {
  background-image: linear-gradient(#2c8e3e, #4bba5f);
  border-top: 0.1rem solid #4bba5f;
}
.dashboard__progress--projects {
  width: 100%;
  height: 50rem;
  background-image: linear-gradient(45deg, #171717 50%, rgba(17, 17, 17, 0) 80%), url("https://images.unsplash.com/photo-1639322537138-5e513100b36e?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-position: right;
  padding: 5rem;
  box-shadow: 0 0 0.4rem #000;
  border-top: 0.1rem solid #202020;
  border-bottom: 0.2rem solid #111;
  border-left: 0.2rem solid #171717;
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.dashboard__progress--projects-back {
  grid-column: 1/-1;
}
.dashboard__progress--projects-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.dashboard__progress--projects-tag {
  font-size: 2rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  background-color: rgba(43, 138, 62, 0.1725490196);
  color: #2b8a3e;
  border-radius: 0.5rem;
}
.dashboard__progress--projects-heading {
  font-size: 8rem;
  line-height: 1.3;
  color: #ddd;
  font-weight: 600;
}
.dashboard__progress--projects-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  font-family: inherit;
  text-transform: capitalize;
  color: #fff;
  border: none;
  font-weight: 400;
  font-size: 2rem;
  background-image: linear-gradient(#226e32, #32a045);
  border-top: 0.1rem solid #649a70;
  box-shadow: 0 0 0.4rem #000;
  border-radius: 1rem;
  cursor: pointer;
}
.dashboard__progress--projects-btn:hover {
  background-image: linear-gradient(#387d47, #37b24d);
  border-top: 0.1rem solid #7aa884;
}
.dashboard__progress--projects-icon {
  font-size: 100rem;
  color: rgba(43, 138, 62, 0.5254901961);
  display: none;
  position: absolute;
  right: 0;
  bottom: -45rem;
}
.dashboard__progress--blueprint {
  width: 100%;
  height: 50rem;
  background-color: #171717;
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.4rem #000;
  border-radius: 2rem;
  padding: 2rem;
  overflow: hidden;
  position: relative;
}
.dashboard__progress--blueprint-heading {
  font-size: 2rem;
  font-weight: 400;
  color: #ddd;
}
.dashboard__progress--blueprint-btn {
  width: fit-content;
  padding: 0.5rem 1rem;
  border: none;
  background-color: transparent;
  color: #ccc;
  font-family: inherit;
  font-weight: 500;
  font-size: 1.5rem;
  background-image: linear-gradient(#151515, #181818);
  box-shadow: 0 0 0.3rem #000;
  border-radius: 0.5rem;
  border-top: 0.1rem solid #202020;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dashboard__progress--blueprint-btn:hover {
  background-image: linear-gradient(#181818, #202020);
  border-top: 0.1rem solid #222;
}
.dashboard__progress--blueprint-container {
  width: 100%;
  margin-top: 2rem;
  padding-bottom: 5rem;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: scroll;
  gap: 1rem;
}
.dashboard__progress--blueprint-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #111;
  box-shadow: 0 0 0.3rem #000;
  border-top: 0.1rem solid #151515;
  padding: 1.5rem;
  border-radius: 1.8rem;
}
.dashboard__progress--blueprint-box-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.dashboard__progress--blueprint-box-logo {
  font-size: 4rem;
  background-color: #171717;
  box-shadow: 0 0 0.3rem #000;
  padding: 1.5rem;
  border-radius: 1.5rem;
  color: #2b8a3e;
}
.dashboard__progress--blueprint-box-info {
  display: flex;
  flex-direction: column;
}
.dashboard__progress--blueprint-box-info-title {
  font-size: 2rem;
  color: #eee;
  font-weight: 500;
}
.dashboard__progress--blueprint-box-info-details {
  display: flex;
  gap: 2rem;
}
.dashboard__progress--blueprint-box-info-details-box {
  font-size: 1.5rem;
}
.dashboard__progress--blueprint-box-info-details-box-title {
  color: #aaa;
  font-weight: 400;
}
.dashboard__progress--blueprint-box-info-details-box-text {
  color: #eee;
  font-weight: 500;
}
.dashboard__progress--blueprint-box-progress {
  font-size: 1.5rem;
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  background-color: #404040;
  border-radius: 1rem;
  font-weight: 500;
  color: #777;
}
.dashboard__progress--blueprint-box-mark {
  width: 100%;
  border: none;
  background-color: transparent;
  margin-right: 1rem;
  font-family: inherit;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  color: #eee;
  background-image: linear-gradient(#171717, #111);
  box-shadow: 0 0 0.3rem #000;
  border-top: 0.1rem solid #262626;
  text-decoration: none;
  border-radius: 1rem;
  cursor: pointer;
}
.dashboard__progress--blueprint-box-mark:hover {
  background-image: linear-gradient(#262626, #171717);
  border-top: 0.1rem solid #404040;
}
.dashboard__progress--tracker {
  width: 100%;
  height: 50rem;
  background-color: #171717;
  border-top: 0.1rem solid #202020;
  padding: 2rem;
  box-shadow: 0 0 0.4rem #000;
  border-radius: 2rem;
}
.dashboard__progress--tracker-container {
  margin-top: 2rem;
  width: 100%;
  height: 90%;
  display: grid;
  gap: 2rem;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.dashboard__progress--tracker-box {
  width: 100%;
  background-color: #111;
  box-shadow: 0 0 0.3rem #000;
  padding: 1.5rem;
  border-radius: 1.8rem;
  position: relative;
}
.dashboard__progress--tracker-box-goals {
  grid-row: 3/4;
  box-shadow: 0 0 0.3rem #000;
}
.dashboard__progress--tracker-box-count {
  box-shadow: 0 0 0.3rem #000;
}
.dashboard__progress--tracker-box-quote {
  grid-row: 2/4;
  box-shadow: 0 0 0.3rem #000;
  overflow: auto;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
  position: relative;
}
.dashboard__progress--tracker-box-quote::-webkit-scrollbar {
  display: none;
}
.dashboard__progress--tracker-box-business {
  grid-row: 1/3;
  box-shadow: 0 0 0.3rem #000;
  overflow: auto;
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none; /* Firefox */
  position: relative;
}
.dashboard__progress--tracker-box-business::-webkit-scrollbar {
  display: none;
}
.dashboard__progress--tracker-box-heading {
  font-size: 1.6rem;
  font-weight: 400;
  color: #eee;
}
.dashboard__progress--tracker-box-content {
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  border-radius: 1rem;
}
.dashboard__progress--tracker-box-content-title {
  font-size: 5rem;
  letter-spacing: -0.3rem;
  font-weight: 700;
  width: fit-content;
  color: #aaa;
}
.dashboard__progress--tracker-box-content-info {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.dashboard__progress--tracker-box-content-info-period {
  font-size: 1.5rem;
  font-weight: 500;
  color: #aaa;
}
.dashboard__progress--tracker-box-content-info-earning {
  font-size: 3rem;
  font-weight: 400;
  color: #ccc;
}
.dashboard__progress--tracker-box-details {
  margin-top: 1rem;
  display: flex;
  gap: 5rem;
  background-image: linear-gradient(#111, #171717);
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.3rem #111;
  border-radius: 2rem;
  padding: 1rem 2rem;
}
.dashboard__progress--tracker-box-details-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: #888;
}
.dashboard__progress--tracker-box-details-results {
  font-size: 1.8rem;
  font-weight: 500;
  color: #ccc;
  margin-left: 0.5rem;
}
.dashboard__progress--tracker-box-org {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  position: relative;
}
.dashboard__progress--tracker-box-org-button {
  width: fit-content;
  padding: 0.5rem 1rem;
  border: none;
  background-color: transparent;
  color: #ccc;
  font-family: inherit;
  font-weight: 500;
  font-size: 1.5rem;
  background-image: linear-gradient(#151515, #181818);
  border-radius: 0.5rem;
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.3rem #000;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dashboard__progress--tracker-box-org-button:hover {
  background-image: linear-gradient(#181818, #202020);
  border-top: 0.1rem solid #222;
}
.dashboard__progress--tracker-box-org-message {
  font-size: 5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-weight: 500;
  color: #262626;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dashboard__progress--tracker-box-org-message ion-icon {
  margin-bottom: -1rem;
  font-size: 5rem;
}
.dashboard__progress--tracker-box-org-top {
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(#111, #151515);
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 2rem;
  padding: 1rem 2rem;
}
.dashboard__progress--tracker-box-org-tag {
  font-size: 1.5rem;
  color: #777;
  font-weight: 600;
}
.dashboard__progress--tracker-box-org-name {
  font-size: 3rem;
  font-weight: 600;
  color: #aaa;
}
.dashboard__progress--tracker-box-org-middle {
  background-image: linear-gradient(#111, #171717);
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 2rem;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dashboard__progress--tracker-box-org-desc {
  font-size: 1.6rem;
  color: #aaa;
  font-weight: 500;
}
.dashboard__progress--tracker-box-org-box {
  width: 100%;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.dashboard__progress--tracker-box-org-box-earning {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(#111, #171717);
  border-top: 0.1rem solid #202020;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 2rem;
  padding: 1rem 2rem;
}
.dashboard__progress--tracker-box-org-box-earning-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #777;
}
.dashboard__progress--tracker-box-org-box-earning-desc {
  font-size: 3rem;
  font-weight: 600;
  color: #aaa;
}
.dashboard__progress--tracker-box-top {
  display: flex;
  justify-content: space-between;
}
.dashboard__progress--tracker-box-top-btn {
  background-color: transparent;
  border: none;
  font-size: 2.5rem;
  color: #aaa;
  cursor: pointer;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard__progress--tracker-box-top-btn:hover {
  background-color: #262626;
}
.dashboard__progress--tracker-box-list {
  margin-top: 0.5rem;
  color: #aaa;
  font-weight: 500;
  font-size: 1.6rem;
  list-style: square;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.dashboard__progress--tracker-box-list li {
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background-color: #171717;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  border-top: 0.1rem solid #202020;
  gap: 1.5rem;
}
.dashboard__progress--tracker-box-list button {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  background-color: transparent;
  border: none;
  color: #ddd;
  background-image: linear-gradient(#151515, #262626);
  border-top: 0.1rem solid #303030;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.dashboard__progress--tracker-box-list button:hover {
  background-image: linear-gradient(#202020, #303030);
  border-top: 0.1rem solid #333;
}

.account__window {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30rem;
  background-image: linear-gradient(#171717, #111);
  border-top: 0.1rem solid #262626;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 2rem;
  padding: 2rem;
  font-size: 2rem;
  color: #aaa;
  position: absolute;
  right: 3rem;
  top: 10rem;
  transition: all 0.2s;
}
.account__window ion-icon {
  font-size: 5rem;
}
.account__window--top {
  background-image: linear-gradient(#111, #151515);
  border-top: 0.1rem solid #232323;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 2rem;
}
.account__window--top-letter {
  background-image: linear-gradient(#387d47, #226e32);
  border-top: 0.1rem solid #649a70;
  box-shadow: 0 0 0.4rem #0a0a0a;
  color: #eee;
  padding: 0.5rem 1rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account__window--top-name {
  color: #eee;
}
.account__window--info {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}
.account__window--info-btn {
  width: 3.5rem;
  height: 3.5rem;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(#111, #151515);
  border-top: 0.1rem solid #232323;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.account__window--info-btn:hover {
  background-image: linear-gradient(#171717, #202020);
  border-top: 0.1rem solid #262626;
}
.account__window--info-btn ion-icon {
  font-size: 2rem;
  color: #ccc;
}
.account__window--info-status {
  display: flex;
  background-image: linear-gradient(#111, #151515);
  border-top: 0.1rem solid #232323;
  box-shadow: 0 0 0.3rem #000;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  gap: 1rem;
}
.account__window--info-status-title {
  font-size: 1.5rem;
}
.account__window--info-status-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.account__window--info-status-info-res {
  font-size: 1.5rem;
}
.account__window--info-status-info-sign {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: #4bba5f;
  outline: 0.3rem solid rgba(75, 186, 95, 0.6509803922);
}
.account__window--notify {
  margin-top: 2rem;
  width: 100%;
  height: 25rem;
  background-image: linear-gradient(#0f0f0f, #0a0a0a);
  box-shadow: 0 0 0.4rem #000;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  color: #262626;
}

.dashboard__documentaries {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.dashboard__documentaries--container {
  display: flex;
  flex-direction: column;
}
.dashboard__documentaries--container-sp {
  padding: 2rem;
  border-radius: 2rem;
  background-image: linear-gradient(#111, #171717);
  border-top: 0.1rem solid #222;
  box-shadow: 0 0 0.3rem #000;
}
.dashboard__documentaries--heading {
  width: fit-content;
  border-radius: 100rem;
  font-size: 2rem;
  color: #ccc;
  font-weight: 400;
}
.dashboard__documentaries--videos {
  margin-top: 2rem;
  display: flex;
  gap: 2rem;
  overflow-y: scroll;
}
.dashboard__documentaries--videos-vid {
  width: 45rem;
  height: 25rem;
  border-radius: 2rem;
}

.dashboard__projects {
  width: 100;
  display: flex;
  gap: 5rem;
}
.dashboard__projects--page {
  display: flex;
  justify-content: center;
}
.dashboard__projects--main {
  font-size: 5rem;
  font-weight: 600;
  background-image: linear-gradient(#387d47, #226e32);
  background-clip: text;
  color: transparent;
  align-self: flex-start;
  margin-bottom: 5rem;
}
.dashboard__projects--container {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
}
.dashboard__projects--left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dashboard__projects--icon {
  font-size: 4rem;
  padding: 1.2rem 1rem;
  border-radius: 1000rem;
}
.dashboard__projects--icon-1 {
  background-image: linear-gradient(#339af0, #1c7ed6);
  border-top: 0.1rem solid #74c0fc;
}
.dashboard__projects--icon-2 {
  background-image: linear-gradient(#845ef7, #7048e8);
  border-top: 0.1rem solid #b197fc;
}
.dashboard__projects--icon-3 {
  background-image: linear-gradient(#20c997, #0ca678);
  border-top: 0.1rem solid #63e6be;
}
.dashboard__projects--icon-4 {
  background-image: linear-gradient(#fcc419, #f59f00);
  border-top: 0.1rem solid #ffe066;
}
.dashboard__projects--icon-5 {
  background-image: linear-gradient(#ff6b6b, #f03e3e);
  border-top: 0.1rem solid #ffa8a8;
}
.dashboard__projects--icon-6 {
  background-image: linear-gradient(#cc5de8, #ae3ec9);
  border-top: 0.1rem solid #e599f7;
}
.dashboard__projects--icon-7 {
  background-image: linear-gradient(#5c7cfa, #4263eb);
  border-top: 0.1rem solid #91a7ff;
}
.dashboard__projects--line {
  width: 0.3rem;
  height: 100%;
  background-image: linear-gradient(#999, #ddd);
}
.dashboard__projects--line-1 {
  background-image: linear-gradient(#1c7ed6, #845ef7);
}
.dashboard__projects--line-2 {
  background-image: linear-gradient(#7048e8, #20c997);
}
.dashboard__projects--line-3 {
  background-image: linear-gradient(#0ca678, #fcc419);
}
.dashboard__projects--line-4 {
  background-image: linear-gradient(#f59f00, #ff6b6b);
}
.dashboard__projects--line-5 {
  background-image: linear-gradient(#f03e3e, #cc5de8);
}
.dashboard__projects--line-6 {
  background-image: linear-gradient(#ae3ec9, #5c7cfa);
}
.dashboard__projects--line-7 {
  background-image: linear-gradient(#4263eb, #171717);
}
.dashboard__projects--box {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 10rem;
}
.dashboard__projects--heading {
  font-size: 4rem;
  font-weight: 500;
  color: #ddd;
}
.dashboard__projects--upgrades {
  font-size: 2rem;
  margin-left: 2.5rem;
  color: #aaa;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.library__container {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 15rem;
}
.library__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.library__top {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 0.1rem solid #171717;
  padding-bottom: 2rem;
}
.library__tag {
  font-size: 2rem;
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1000rem;
  width: fit-content;
  letter-spacing: -0.05rem;
  background-image: linear-gradient(#387d47, #226e32);
  border-top: 0.1rem solid #649a70;
  box-shadow: 0 0 0.4rem #000;
  padding: 1rem 2rem;
  font-weight: 400;
}
.library__description {
  margin-top: 1rem;
  font-size: 2rem;
  color: #aaa;
  font-weight: 500;
}
.library__boxes {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3rem;
}
.library__box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-image: linear-gradient(#171717, #111);
  border-radius: 2rem;
  padding: 2.5rem;
  box-shadow: 0 0 0.4rem #000;
  border-top: 0.1rem solid #202020;
}
.library__box--top {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.library__box--top-logo {
  font-size: 3rem;
  background-image: linear-gradient(#202020, #171717);
  box-shadow: 0 0 0.4rem #000;
  border-top: 0.1rem solid #262626;
  color: #888;
  border-radius: 1rem;
  padding: 1.5rem 1.6rem;
}
.library__box--top-name {
  font-size: 3.5rem;
  letter-spacing: -0.1rem;
  font-weight: 600;
  color: #888;
}
.library__box--text {
  font-size: 1.8rem;
  line-height: 1.4;
  color: #888;
  border-bottom: 0.1rem solid #202020;
  padding-bottom: 2rem;
}
.library__box--bottom {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.library__box--bottom-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.library__box--bottom-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: #555;
}
.library__box--bottom-text {
  font-size: 1.5rem;
  color: #888;
  font-weight: 500;
}
.library__box--btns {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.library__box--btns-read {
  border: none;
  background-color: transparent;
  margin-right: 1rem;
  font-family: inherit;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  color: #eee;
  background-image: linear-gradient(#111, #171717);
  box-shadow: 0 0 0.3rem #000;
  border-top: 0.1rem solid #171717;
  text-decoration: none;
  border-radius: 1rem;
  cursor: pointer;
}
.library__box--btns-read:hover {
  background-image: linear-gradient(#171717, #262626);
  border-top: 0.1rem solid #202020;
}
.library__box--btns-journey {
  border: none;
  background-color: transparent;
  margin-right: 1rem;
  font-family: inherit;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  color: #eee;
  background-image: linear-gradient(#1b5828, #2c8e3e);
  border-top: 0.1rem solid #32a045;
  box-shadow: 0 0 0.3rem #000;
  text-decoration: none;
  border-radius: 1rem;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.library__box--btns-journey:hover {
  background-image: linear-gradient(#1f632d, #32a045);
  border-top: 0.1rem solid #4bba5f;
}

.dashboard__settings {
  width: 115rem;
  height: 50rem;
  background-image: linear-gradient(#111, #171717);
  border-radius: 0.5rem;
  box-shadow: 0 0 0.4rem #000;
  border-top: 0.1rem solid #262626;
  padding: 2.5rem 2.5rem 0 2.5rem;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dashboard__settings--close {
  background-color: transparent;
  border: none;
  font-size: 3rem;
  position: sticky;
  display: block;
  margin-left: auto;
  top: 1rem;
}
.dashboard__settings--loading {
  font-size: 3rem;
  position: absolute;
  right: 3rem;
  top: 3rem;
  color: #ccc;
  animation: loading 1s infinite linear;
}
.dashboard__settings--top {
  display: flex;
  flex-direction: column;
  border-bottom: 0.1rem solid #202020;
  padding-bottom: 2rem;
}
.dashboard__settings--top-heading {
  font-size: 3.5rem;
  color: #eee;
  font-weight: 600;
  letter-spacing: -0.05rem;
}
.dashboard__settings--top-text {
  margin-top: 0.5rem;
  font-size: 1.8rem;
  color: #aaa;
  font-weight: 300;
}
.dashboard__settings--nav {
  width: fit-content;
  margin-top: 3rem;
  display: flex;
  border-radius: 0.3rem;
  overflow: hidden;
  box-shadow: 0 0 0.3rem #000;
}
.dashboard__settings--nav-btn {
  font-size: 1.8rem;
  letter-spacing: -0.03rem;
  font-family: inherit;
  border: none;
  background-color: transparent;
  padding: 1.5rem 10rem;
  background-color: #202020;
  border-top: 0.1rem solid transparent;
  color: #888;
  cursor: pointer;
  transition: all 0.2s;
}
.dashboard__settings--nav-btn-active {
  background-color: transparent;
  color: #ccc;
  border-top: 0.1rem solid #262626;
}
.dashboard__settings--nav-btn:hover {
  background-color: transparent;
  color: #ccc;
  border-top: 0.1rem solid #262626;
}
.dashboard__settings--details {
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
  transition: all 0.5s;
}
.dashboard__settings--details-frame {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.dashboard__settings--details-frame-person {
  flex-direction: row;
  border-bottom: 0.1rem solid #202020;
  gap: 2rem;
}
.dashboard__settings--details-frame-system {
  margin-top: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dashboard__settings--details-frame-system-system {
  font-size: 12rem;
  letter-spacing: -0.3rem;
  font-weight: 600;
  color: #aaa;
}
.dashboard__settings--details-frame-system-box {
  display: flex;
  flex-direction: column;
}
.dashboard__settings--details-frame-system-title {
  font-size: 2rem;
  letter-spacing: -0.05rem;
  color: #888;
}
.dashboard__settings--details-frame-system-required {
  font-size: 7rem;
  font-weight: 600;
  letter-spacing: -0.2rem;
  color: #aaa;
}
.dashboard__settings--details-person {
  width: 28rem;
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
}
.dashboard__settings--details-person-letter {
  height: fit-content;
  font-size: 2rem;
  background-image: linear-gradient(#2c8e3e, #4bba5f);
  border-top: 0.1rem solid #4bba5f;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2rem;
  font-weight: 600;
  color: #fff;
}
.dashboard__settings--details-person-name {
  margin-top: 0.5rem;
  font-size: 2rem;
  color: #ccc;
}
.dashboard__settings--details-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 0.1rem solid #202020;
  padding-bottom: 2rem;
}
.dashboard__settings--details-header-content {
  margin-top: 3rem;
}
.dashboard__settings--details-header-noborder {
  border: none;
}
.dashboard__settings--details-header-heading {
  font-size: 1.8rem;
  color: #eee;
}
.dashboard__settings--details-header-desc {
  font-size: 1.5rem;
  color: #888;
  font-weight: 300;
}
.dashboard__settings--details-fillout {
  margin-top: 2rem;
  width: 25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}
.dashboard__settings--details-fillout-system {
  margin-top: 3rem;
  width: 100%;
}
.dashboard__settings--details-fillout-sep {
  display: flex;
  gap: 5rem;
}
.dashboard__settings--details-label {
  font-size: 1.5rem;
  color: #eee;
  letter-spacing: 0.05rem;
}
.dashboard__settings--details-input {
  font-family: inherit;
  font-size: 1.5rem;
  padding: 1rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background-color: #262626;
  box-shadow: 0 0 0.3rem #111;
  border-top: 0.1rem solid #303030;
  color: #eee;
  z-index: 1;
}
.dashboard__settings--details-input-textarea {
  width: 50rem;
  height: 20rem;
  resize: none;
}
.dashboard__settings--details-input:focus {
  outline: none;
}
.dashboard__settings--details-input-text {
  top: 2.8rem;
  position: absolute;
  z-index: 0;
  width: 100%;
}
.dashboard__settings--details-input-companyname, .dashboard__settings--details-input-companycurr, .dashboard__settings--details-input-companygoal {
  width: 100%;
  position: absolute;
  top: 2.8rem;
  z-index: 0;
}
.dashboard__settings--details-input-companydesc {
  width: 50rem;
  position: absolute;
  top: 2.8rem;
  z-index: 0;
}
.dashboard__settings--details-systems {
  margin-top: 0.5rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.dashboard__settings--details-system {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background-color: transparent;
  border: none;
  background-image: linear-gradient(#111, #131313);
  box-shadow: 0 0 0.4rem #000;
  border-top: 0.1rem solid #171717;
  border-radius: 0.4rem;
  padding: 1.5rem;
  font-size: 2rem;
  color: #ccc;
  cursor: pointer;
}
.dashboard__settings--details-system-active {
  outline: 0.2rem solid #32a045;
  color: #eee;
}
.dashboard__settings--details-system:hover {
  background-image: linear-gradient(#131313, #171717);
}
.dashboard__settings--details-system ion-icon {
  font-size: 2.5rem;
}
.dashboard__settings--details-reset {
  margin-top: 1rem;
  width: fit-content;
  font-family: inherit;
  border: none;
  background-color: transparent;
  color: #111;
  background-image: linear-gradient(#f03e3e, #ff6b6b);
  box-shadow: 0 0 0.4rem #000;
  border-top: 0.1rem solid #ff8787;
  border-radius: 0.5rem;
  padding: 1rem 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 2rem;
  font-weight: 500;
  cursor: pointer;
}
.dashboard__settings--details-reset:hover {
  background-image: linear-gradient(#fa5252, #ff8787);
  border-top: 0.1rem solid #ffc9c9;
}
.dashboard__settings--details-reset ion-icon {
  font-size: 2.5rem;
}
.dashboard__settings--btns {
  display: flex;
  gap: 2rem;
  position: sticky;
  bottom: 2rem;
  z-index: 100;
}
.dashboard__settings--close {
  font-family: inherit;
  font-size: 2rem;
  padding: 0.5rem 2.5rem;
  color: #ccc;
  font-weight: 500;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(#111, #151515);
  border-top: 0.1rem solid #232323;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 0.5rem;
  cursor: pointer;
}
.dashboard__settings--close:hover {
  background-image: linear-gradient(#171717, #202020);
  border-top: 0.1rem solid #262626;
}
.dashboard__settings--save {
  font-family: inherit;
  font-size: 2rem;
  padding: 0.5rem 2.5rem;
  color: #ccc;
  font-weight: 500;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(#226e32, #32a045);
  border-top: 0.1rem solid #37b24d;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 0.5rem;
  cursor: pointer;
}
.dashboard__settings--save:hover {
  background-image: linear-gradient(#387d47, #37b24d);
  border-top: 0.1rem solid #4bba5f;
}
.dashboard__settings--name-btn {
  width: 100%;
  position: absolute;
  padding: 1rem;
  cursor: pointer;
  top: 2.8rem;
  z-index: 2;
}
.dashboard__settings--name-btn:hover {
  background-color: #303030;
}

.dashboard__notes {
  width: 35rem;
  background-color: #171717;
  border-radius: 0.5rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2rem;
}
.dashboard__notes--top {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2rem;
}
.dashboard__notes--top label {
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.1rem;
  color: #ccc;
}
.dashboard__notes--top textarea {
  width: 100%;
  height: 16rem;
  resize: none;
  font-family: inherit;
  font-size: 1.5rem;
  padding: 1rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background-color: #262626;
  box-shadow: 0 0 0.3rem #111;
  border-top: 0.1rem solid #303030;
  color: #eee;
  z-index: 1;
}
.dashboard__notes--top textarea:focus {
  outline: none;
}
.dashboard__notes--btns {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
.dashboard__notes--btn, .dashboard__notes--btn-add {
  margin-top: 2rem;
  font-size: 1.5rem;
  background-color: transparent;
  border: none;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  font-family: inherit;
  background-image: linear-gradient(#151515, #262626);
  box-shadow: 0 0 0.3rem #000;
  border-radius: 0.5rem;
  border-top: 0.1rem solid #262626;
  color: #ccc;
  font-weight: 500;
  cursor: pointer;
}
.dashboard__notes--btn:hover, .dashboard__notes--btn-add:hover {
  background-image: linear-gradient(#202020, #303030);
  border-top: 0.1rem solid #303030;
}
.dashboard__notes--btn-add {
  background-image: linear-gradient(#226e32, #32a045);
  border-top: 0.1rem solid #37b24d;
  color: #eee;
  box-shadow: 0 0 0.3rem #000;
  border-radius: 0.5rem;
  cursor: pointer;
}
.dashboard__notes--btn-add:hover {
  background-image: linear-gradient(#387d47, #37b24d);
  border-top: 0.1rem solid #4bba5f;
}

.dashboard__lecture {
  width: 80%;
  margin: 0 auto;
  margin-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.dashboard__lecture--btn {
  width: fit-content;
  background-color: transparent;
  border: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  background-image: linear-gradient(#226e32, #32a045);
  border-top: 0.1rem solid #37b24d;
  color: #eee;
  box-shadow: 0 0 0.3rem #000;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
}
.dashboard__lecture--btn:hover {
  background-image: linear-gradient(#387d47, #37b24d);
  border-top: 0.1rem solid #4bba5f;
}
.dashboard__lecture--box {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.dashboard__lecture--heading {
  font-size: 5rem;
  line-height: 1.2;
  background-image: linear-gradient(#888, #ccc);
  font-weight: 500;
  color: transparent;
  background-clip: text;
}
.dashboard__lecture--texts {
  font-size: 2.5rem;
  display: flex;
  flex-direction: column;
  color: #888;
  font-weight: 300;
  gap: 3rem;
}
.dashboard__lecture--texts-text-overmarked {
  background-color: #37b24d;
  border-radius: 0.5rem;
  font-weight: 500;
  padding: 0 0.5rem;
  color: #000;
}
.dashboard__lecture--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-left: 7rem;
}
.dashboard__lecture--org {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-left: 7rem;
}

@media (max-width: 143.75em) {
  .library__boxes {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 135.625em) {
  .dashboard__progress--tracker-box-details {
    gap: 3rem;
  }
  .dashboard__progress--tracker-box-details-title {
    font-size: 1.3rem;
  }
  .dashboard__progress--tracker-box-details-results {
    font-size: 1.6rem;
  }
}
@media (max-width: 121.875em) {
  .dashboard__progress--tracker-box-content {
    align-items: center;
  }
  .dashboard__progress--tracker-box-content-title {
    font-size: 4rem;
  }
  .dashboard__progress--tracker-box-details {
    flex-direction: column;
    background-image: none;
    border: none;
    padding: 0;
    gap: 1rem;
  }
  .dashboard__progress--tracker-box-details-title {
    font-size: 1.4rem;
  }
  .dashboard__progress--tracker-box-details-results {
    font-size: 1.8rem;
  }
  .dashboard__progress--tracker-box-details div {
    background-image: linear-gradient(#111, #151515);
    padding: 1.5rem;
    box-shadow: 0 0 0.3rem #000;
    border-radius: 1.5rem;
    border-top: 0.1rem solid #171717;
  }
  .dashboard__progress--tracker-box-content {
    padding: 0;
  }
  .dashboard__progress--tracker-box-content-title {
    font-size: 3.2rem;
    letter-spacing: -0.1rem;
  }
  .dashboard__progress--tracker-box-content-info {
    background-image: linear-gradient(#111, #151515);
    padding: 0.5rem 1.5rem;
    box-shadow: 0 0 0.3rem #000;
    border-radius: 1.5rem;
    border-top: 0.1rem solid #171717;
  }
  .dashboard__progress--tracker-box-content-info-earning {
    font-size: 2.5rem;
  }
  .dashboard__progress--tracker-box-org-name {
    font-size: 2.5rem;
  }
  .dashboard__progress--tracker-box-org-desc {
    font-size: 1.5rem;
  }
  .dashboard__progress--tracker-box-org-box-earning-desc {
    font-size: 2.5rem;
  }
  .library__boxes {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 109.375em) {
  .dashboard__progress--blueprint-box-logo {
    font-size: 3rem;
    padding: 1rem;
  }
  .dashboard__progress--blueprint-box-info-title {
    font-size: 1.6rem;
  }
  .dashboard__progress--blueprint-box-info-details-box-title {
    font-size: 1.3rem;
  }
  .dashboard__progress--blueprint-box-info-details-box-text {
    font-size: 1.4rem;
  }
  .dashboard__progress--blueprint-box-mark {
    margin-right: 0;
  }
  .dashboard__progress--tracker-box-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .dashboard__progress--tracker-box-content-info {
    width: 100%;
  }
  .dashboard__progress--tracker-box-org-box {
    flex-direction: column;
  }
}
@media (max-width: 96.875em) {
  .dashboard__progress--blueprint-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .dashboard__progress--blueprint-box {
    gap: 3rem;
  }
  .dashboard__progress--blueprint-box-left {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
  }
  .dashboard__progress--blueprint-box-info-title {
    font-size: 2rem;
  }
  .dashboard__progress--blueprint-box-info-details {
    flex-direction: row;
    gap: 3rem;
  }
  .dashboard__progress--blueprint-box-info-details-box {
    display: flex;
    flex-direction: column;
  }
  .dashboard__progress--blueprint-box-info-details-box-title {
    font-size: 1.3rem;
  }
  .dashboard__progress--blueprint-box-info-details-box-text {
    font-size: 1.5rem;
    color: #ddd;
  }
  .dashboard__progress--blueprint-box-logo {
    font-size: 4rem;
    padding: 1.5rem;
  }
  .dashboard__progress--blueprint-box-mark {
    width: 100%;
  }
  .dashboard__progress--tracker-box-list li {
    padding: 0.5rem 1rem;
    box-shadow: 0 0 0.3rem #000;
  }
  .dashboard__progress--tracker-box-list-btn {
    box-shadow: 0 0 0.2rem #000;
  }
  .dashboard__progress--tracker-box-org-button {
    font-size: 1.3rem;
  }
  .library__boxes {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 81.25em) {
  .dashboard {
    gap: 1.5rem;
  }
  .dashboard__progress {
    margin-top: 1rem;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .dashboard__progress--projects {
    padding: 3rem;
    border-left: 0;
    background-image: linear-gradient(45deg, #171717 40%, rgba(23, 23, 23, 0.2588235294) 100%), url("https://images.unsplash.com/photo-1639322537138-5e513100b36e?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  }
  .dashboard__progress--projects-heading {
    font-size: 7rem;
  }
  .dashboard__progress--blueprint {
    grid-row: 4/5;
  }
  .dashboard__lecture {
    width: 90%;
  }
  .dashboard__projects--container {
    margin-left: 5rem;
  }
  .dashboard__projects--main {
    font-size: 3rem;
  }
  .dashboard__projects--heading {
    font-size: 3.5rem;
  }
  .dashboard__settings {
    width: 90rem;
  }
  borde .dashboard__settings--nav-btn {
    padding: 1.5rem 6.5rem;
  }
  .dashboard__settings--details-systems {
    grid-template-columns: repeat(4, 1fr);
  }
  .dashboard__settings--details-frame-system-system {
    font-size: 8rem;
  }
  .dashboard__settings--details-frame-system-required {
    font-size: 5rem;
  }
  .library__boxes {
    gap: 1.5rem;
  }
  .library__box {
    padding: 1.5rem;
  }
  .library__box--bottom-box {
    align-items: flex-start;
    flex-direction: column;
  }
  .library__box--bottom-text {
    font-size: 2rem;
  }
}
@media (max-width: 65.625em) {
  .library__boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 62.5em) {
  .dashboard__progress--anounce {
    padding: 1rem 1.5rem;
  }
  .dashboard__progress--anounce-tag {
    display: none;
  }
  .dashboard__progress--projects {
    justify-content: flex-start;
    gap: 5rem;
  }
  .dashboard__progress--projects-heading {
    font-size: 6rem;
  }
  .dashboard__progress--projects-heading br {
    display: none;
  }
  .dashboard__projects {
    gap: 3rem;
  }
  .dashboard__projects--container {
    margin-left: 2rem;
    padding-right: 2rem;
  }
  .dashboard__projects--main {
    font-size: 2.5rem;
  }
  .dashboard__projects--heading {
    font-size: 3rem;
  }
  .dashboard__projects--icon {
    font-size: 3rem;
  }
  .dashboard__settings {
    width: 80%;
    padding-bottom: 2rem;
  }
  .dashboard__settings--nav-btn {
    padding: 1rem 4rem;
  }
  .dashboard__settings--btns {
    position: relative;
    margin-top: 5rem;
  }
  .dashboard__settings--details-systems {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard__settings--details-frame-system-system {
    font-size: 6rem;
  }
  .dashboard__settings--details-frame-system-required {
    font-size: 4rem;
  }
}
@media (max-width: 50em) {
  .dashboard__content {
    margin-top: 0;
  }
  .dashboard__progress--tracker {
    height: auto;
  }
  .dashboard__progress--tracker-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .dashboard__progress--tracker-box {
    min-height: 20rem;
  }
  .dashboard__progress--blueprint {
    height: auto;
  }
  .dashboard__progress--blueprint-container {
    height: 100%;
  }
  .dashboard__progress--blueprint-box {
    padding: 0.6rem 1.3rem;
  }
  .dashboard__lecture {
    width: 95%;
  }
  .dashboard__lecture--texts {
    font-size: 2rem;
  }
  .dashboard__settings {
    padding: 1.5rem;
  }
  .dashboard__settings--nav-btn {
    padding: 1rem 3rem;
  }
  .dashboard__settings--details-systems {
    grid-template-columns: 1fr 1fr;
  }
  .library__box {
    padding: 2rem 1rem;
    align-items: center;
  }
  .library__box--top {
    flex-direction: column;
  }
  .library__box--top-name {
    font-size: 3.5rem;
    color: #bbb;
  }
  .library__box--text {
    font-size: 1.5rem;
    text-align: center;
  }
  .library__box--bottom {
    text-align: center;
  }
  .library__box--bottom-box {
    text-align: center;
    align-items: center;
  }
  .library__box--btns {
    justify-content: center;
  }
}
@media (max-width: 43.75em) {
  .dashboard__progress--anounce {
    padding: 0.8rem 1rem;
  }
  .dashboard__progress--anounce-heading {
    font-size: 1.6rem;
  }
  .dashboard__progress--anounce-btn {
    font-size: 1.3rem;
  }
  .dashboard__progress--projects {
    background-image: linear-gradient(45deg, #171717 100%, rgba(17, 17, 17, 0) 100%), url("https://images.unsplash.com/photo-1639322537138-5e513100b36e?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    height: auto;
  }
  .dashboard__progress--projects-heading {
    font-size: 5rem;
    line-height: 1.2;
  }
  .dashboard__progress--blueprint-box {
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
    padding: 2rem;
    gap: 1rem;
  }
  .dashboard__progress--blueprint-box-left {
    border-bottom: 0.1rem solid #171717;
    padding-bottom: 2rem;
  }
  .dashboard__progress--blueprint-box-info-title {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    margin-top: -0.5rem;
  }
  .dashboard__projects {
    gap: 1rem;
  }
  .dashboard__projects--container {
    margin-left: 1rem;
    padding-right: 2rem;
  }
  .dashboard__projects--main {
    font-size: 2rem;
  }
  .dashboard__projects--heading {
    font-size: 2.5rem;
  }
  .dashboard__projects--icon {
    font-size: 2.5rem;
  }
  .dashboard__projects--upgrades {
    font-size: 1.8rem;
    gap: 1.5rem;
  }
  .dashboard__notes {
    width: 30rem;
  }
  .dashboard__notes label {
    font-size: 2.5rem;
  }
  .dashboard__settings--nav-btn {
    padding: 1rem 2.5rem;
    font-size: 1.5rem;
  }
  .dashboard__settings--details-person {
    border-bottom: 0.1rem solid #262626;
    padding-bottom: 1.5rem;
  }
  .dashboard__settings--details-frame {
    flex-direction: column;
  }
  .dashboard__settings--details-fillout-sep {
    gap: 1rem;
    flex-direction: column;
  }
  .dashboard__settings--details-input-textarea {
    width: 45rem;
  }
  .dashboard__settings--details-frame-system-system {
    font-size: 4.5rem;
  }
  .dashboard__settings--details-frame-system-required {
    font-size: 3rem;
  }
}
@media (max-width: 37.5em) {
  .dashboard__menu {
    min-width: 5rem;
    gap: 10rem;
    position: absolute;
    transform: scaleX(0);
    opacity: 0;
    padding: 1rem;
    width: fit-content;
    min-height: 75vh;
    transform-origin: 0;
    left: 2rem;
    z-index: 1000;
    transition: all 0.2s;
  }
  .dashboard__menu--top {
    gap: 2rem;
  }
  .dashboard__content {
    width: 100%;
  }
  .dashboard__content--top-nav {
    display: block;
  }
  .account__window {
    width: 25rem;
    height: 35rem;
  }
  .account__window--top {
    gap: 1rem;
    padding: 1.5rem 1rem;
  }
  .account__window--top-letter {
    font-size: 1.6rem;
  }
  .account__window--top-name {
    font-size: 1.5rem;
  }
  .dashboard__projects {
    gap: 2rem;
  }
  .dashboard__projects--container {
    margin-left: 0rem;
    padding-right: 2rem;
  }
  .dashboard__projects--main {
    font-size: 3rem;
  }
  .dashboard__projects--heading {
    font-size: 3.2rem;
  }
  .dashboard__projects--icon {
    font-size: 2.5rem;
  }
  .dashboard__projects--upgrades {
    margin-left: 2rem;
    font-size: 2rem;
    gap: 2rem;
  }
  .dashboard__settings--nav-btn {
    padding: 0.9rem 1.8rem;
  }
  .dashboard__settings--details-input-textarea {
    width: 37rem;
  }
  .dashboard__settings--details-frame-system {
    flex-direction: column;
  }
  .dashboard__settings--details-frame-system-system {
    font-size: 6rem;
  }
  .dashboard__settings--details-frame-system-title {
    margin-top: 2rem;
  }
  .dashboard__settings--details-frame-system-required {
    font-size: 4rem;
  }
}
@media (max-width: 34.375em) {
  .library__boxes {
    grid-template-columns: 1fr;
  }
  .library__box--text {
    font-size: 2rem;
  }
}
@media (max-width: 31.25em) {
  .dashboard__project {
    padding: 1rem;
  }
  .dashboard__content--top-heading {
    font-size: 3rem;
  }
  .dashboard__progress {
    gap: 1rem;
  }
  .dashboard__progress--anounce-heading {
    font-size: 1.3rem;
  }
  .dashboard__progress--anounce-btn {
    padding: 0.5rem 0.8rem;
  }
  .dashboard__progress--anounce-btn ion-icon {
    display: none;
  }
  .dashboard__progress--projects {
    padding: 2rem;
    background-image: linear-gradient(#171717, #151515);
  }
  .dashboard__progress--projects-back {
    padding: 0.1rem;
    border-radius: 2.1rem;
    background-image: linear-gradient(#37b24d, #151515);
  }
  .dashboard__progress--projects-tag {
    font-size: 1.5rem;
  }
  .dashboard__progress--projects-heading {
    font-size: 4rem;
  }
  .dashboard__progress--projects-btn {
    font-size: 1.6rem;
  }
  .dashboard__progress--tracker {
    padding: 1rem;
  }
  .dashboard__progress--tracker-container {
    gap: 1rem;
  }
  .dashboard__progress--blueprint {
    padding: 1rem;
  }
  .dashboard__progress--blueprint-heading {
    margin-left: 1rem;
  }
  .dashboard__progress--blueprint-box-info-title {
    font-size: 3rem;
  }
  .dashboard__progress--blueprint-box-info-details {
    flex-direction: column;
    gap: 1rem;
  }
  .dashboard__progress--blueprint-box-info-details-box-text {
    font-size: 2rem;
  }
  .account__window {
    top: 6.5rem;
    right: 1rem;
  }
  .dashboard__notes {
    width: 28rem;
  }
  .dashboard__notes label {
    font-size: 2.5rem;
  }
  .dashboard__notes textarea {
    height: 12rem;
  }
  .dashboard__notes--btn {
    font-size: 1.6rem;
  }
  .dashboard__notes--btn-add {
    font-size: 1.6rem;
  }
  .dashboard__lecture {
    width: 98%;
  }
  .dashboard__lecture--heading {
    font-size: 4rem;
  }
  .dashboard__settings {
    width: 90%;
  }
  .dashboard__settings--nav-btn {
    padding: 0.3rem 0.8rem;
    font-size: 1.6rem;
  }
  .dashboard__settings--details-input-textarea {
    width: 29rem;
  }
  .dashboard__settings--details-system {
    font-size: 1.6rem;
  }
  .info-page {
    margin-left: -1rem;
  }
  .info-page__heading {
    font-size: 2.5rem;
  }
  .info-page__input {
    padding: 0.8rem;
    font-size: 1.6rem;
  }
  .info-page__btn {
    font-size: 1.6rem;
  }
}
@media (max-width: 25em) {
  .dashboard__lecture {
    width: 98%;
  }
  .dashboard__lecture--heading {
    font-size: 3.5rem;
  }
  .dashboard__settings--details-frame-system-system {
    font-size: 5rem;
  }
  .dashboard__settings--details-frame-system-title {
    margin-top: 1.5rem;
  }
  .dashboard__settings--details-frame-system-required {
    font-size: 3rem;
    text-align: center;
  }
  .info-page__box {
    padding: 3rem;
  }
}
@media (max-width: 87.5em) {
  .info-welcome__message {
    font-size: 6rem;
  }
}
@media (max-width: 62.5em) {
  .info-welcome__message {
    font-size: 4rem;
  }
}
@media (max-width: 43.75em) {
  .info-welcome__message {
    font-size: 3rem;
  }
}
@media (max-width: 25em) {
  .info-welcome__message {
    font-size: 2.5rem;
  }
  .info-welcome__message--name {
    padding: 0;
  }
  .info-welcome__message--loading {
    font-size: 1.5rem;
  }
}
.checkout {
  background-color: #0a0a0a;
}
.checkout__container {
  padding: 10rem 10rem 15rem 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.checkout__logo {
  width: 15rem;
  padding: 1rem;
  background-color: #0a0a0a;
  box-shadow: 0 0 0.4rem #000;
  border: 0.1rem solid #666;
  border-radius: 1.6rem;
  filter: saturate(0) brightness(1.5) contrast(1.2);
}
.checkout__logo--box {
  height: fit-content;
  margin-bottom: 5rem;
  padding: 2rem;
  background-color: rgba(153, 153, 153, 0.1529411765);
  border: 0.1rem solid #999;
  border-radius: 2rem;
}
.checkout__heading {
  font-size: 8rem;
  background-image: linear-gradient(#fff, #aaa);
  background-clip: text;
  color: transparent;
  letter-spacing: -0.2rem;
  text-align: center;
  text-transform: capitalize;
}
.checkout__text {
  margin-top: 2rem;
  font-size: 2.5rem;
  font-weight: 500;
  color: #999;
}
.checkout__plans {
  margin-top: 10rem;
  display: flex;
  gap: 5rem;
}
.checkout__plan {
  width: 45rem;
  background-image: linear-gradient(rgba(23, 23, 23, 0), rgba(17, 17, 17, 0));
  border: 0.1rem solid #202020;
  box-shadow: 0 0 0.4rem #000;
  border-radius: 2rem;
}
.checkout__plan--victory {
  background-image: linear-gradient(#111 5%, #0f0f0f);
  border-top: 0.1rem solid #333;
  box-shadow: 0 0 0.3rem #000;
  overflow: hidden;
  position: relative;
}
.checkout__plan--top {
  padding: 4rem;
  position: relative;
}
.checkout__plan--top-tag {
  background-image: linear-gradient(#ddd, #aaa);
  border-radius: 0.5rem;
  border-top: 0.1rem solid #fff;
  box-shadow: 0 0 0.4rem #000;
  color: #111;
  padding: 0.8rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: absolute;
  right: 3rem;
  top: 3rem;
}
.checkout__plan--top-tag ion-icon {
  font-size: 2rem;
}
.checkout__plan--top-tag span {
  font-size: 1.8rem;
  font-weight: 600;
}
.checkout__plan--top-header {
  display: flex;
  flex-direction: column;
  width: 35rem;
  gap: 0.5rem;
}
.checkout__plan--top-heading {
  font-size: 4rem;
  letter-spacing: -0.1rem;
  font-weight: 500;
  background-image: linear-gradient(to right, #bbb, #707070);
  background-clip: text;
  color: transparent;
}
.checkout__plan--top-heading-victory {
  background-image: linear-gradient(#fff, #aaa);
  background-clip: text;
  color: transparent;
}
.checkout__plan--top-text {
  font-size: 1.8rem;
  letter-spacing: -0.05rem;
  color: #707070;
  font-weight: 500;
}
.checkout__plan--top-text-victory {
  color: #bbb;
}
.checkout__plan--top-amount {
  margin-top: 2rem;
  display: flex;
  align-items: flex-end;
}
.checkout__plan--top-amount-sign {
  font-size: 3rem;
  color: #999;
}
.checkout__plan--top-amount-sign-victory {
  color: #eee;
}
.checkout__plan--top-amount-price {
  margin-bottom: -1rem;
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: -0.1rem;
  background-image: linear-gradient(to right, #aaa, #707070);
  background-clip: text;
  color: transparent;
}
.checkout__plan--top-amount-price-victory {
  background-image: linear-gradient(to right, #eee, #aaa);
  background-clip: text;
  color: transparent;
}
.checkout__plan--top-info {
  font-size: 1.5rem;
  letter-spacing: -0.05rem;
  color: #565656;
}
.checkout__plan--top-info-victory {
  color: #aaa;
}
.checkout__plan--top-cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}
.checkout__plan--top-btn {
  color: #999;
  background-color: #0a0a0a;
  border: 0.1rem solid #202020;
  box-shadow: 0 0 0.4rem #000;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  letter-spacing: -0.05rem;
  text-decoration: none;
  border-radius: 1rem;
  font-weight: 500;
  transition: all 0.2s;
}
.checkout__plan--top-btn:hover {
  background-color: #111;
  border: 0.1rem solid #232323;
}
.checkout__plan--top-btn-victory {
  background-color: #d5d5d5;
  border: 0.1rem solid #202020;
  box-shadow: 0 0 0.4rem #000;
  color: #111;
}
.checkout__plan--top-btn-victory:hover {
  background-color: #eee;
  box-shadow: 0 0 0.4rem #000;
}
.checkout__plan--top-explain {
  text-align: center;
  margin-top: 1rem;
  font-size: 1.8rem;
  color: #999;
  font-weight: 500;
  letter-spacing: -0.05rem;
}
.checkout__plan--top-explain-sp {
  background-image: linear-gradient(to right, #ddd, #aaa);
  background-clip: text;
  color: transparent;
}
.checkout__plan--sep {
  margin-top: -1rem;
  width: 100%;
  height: 0.1rem;
  background-color: #202020;
}
.checkout__plan--bottom {
  padding: 4rem;
}
.checkout__plan--bottom-top {
  display: flex;
  flex-direction: column;
}
.checkout__plan--bottom-heading {
  font-size: 2.5rem;
  font-weight: 500;
  color: #999;
}
.checkout__plan--bottom-heading-victory {
  color: #ccc;
}
.checkout__plan--bottom-text {
  font-size: 1.5rem;
  color: #565656;
}
.checkout__plan--bottom-list {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  list-style: none;
}
.checkout__plan--bottom-list-element {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.checkout__plan--bottom-list-element-icon {
  font-size: 1.5rem;
  color: #eee;
  background-image: linear-gradient(#202020, #171717);
  border-radius: 50%;
  padding: 0.5rem;
  box-shadow: 0 0 0.4rem #000;
  border-top: 0.1rem solid #333;
}
.checkout__plan--bottom-list-element-feature {
  font-size: 1.8rem;
  color: #999;
  text-transform: capitalize;
}
.checkout__plan--bottom-list-element-feature-victory {
  color: #ccc;
}
.checkout__users {
  margin-top: 10rem;
}
.checkout__footer {
  border-top: 0.1rem solid #151515;
}

@media (max-width: 100em) {
  .checkout__plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .checkout__plan {
    width: 100%;
  }
  .checkout__plan--top-header {
    width: 100%;
  }
}
@media (max-width: 87.5em) {
  .checkout__container {
    padding: 10rem 5rem 15rem 5rem;
  }
  .checkout__plans {
    gap: 1rem;
  }
  .checkout__plan {
    border-radius: 0.5rem;
  }
}
@media (max-width: 75em) {
  .checkout__container {
    padding: 10rem 2.5rem 15rem 2.5rem;
  }
  .checkout__heading {
    font-size: 7rem;
    line-height: 1.2;
  }
  .checkout__plan--top {
    padding: 2rem;
  }
  .checkout__plan--bottom {
    padding: 2rem;
  }
}
@media (max-width: 64.125em) {
  .checkout__heading {
    font-size: 8rem;
    line-height: 1.2;
  }
  .checkout__text {
    text-align: center;
  }
  .checkout__plans {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 5rem;
  }
  .checkout__plan {
    width: 100%;
  }
  .checkout__plan--top {
    padding: 4rem;
  }
  .checkout__plan--top-heading {
    font-size: 6rem;
  }
  .checkout__plan--top-text {
    font-size: 2.5rem;
  }
  .checkout__plan--top-amount-price {
    font-size: 8rem;
  }
  .checkout__plan--top-info {
    font-size: 2rem;
  }
  .checkout__plan--sep {
    margin: 2rem 0;
  }
  .checkout__plan--bottom {
    padding: 4rem;
  }
  .checkout__plan--bottom-heading {
    font-size: 4rem;
  }
  .checkout__plan--bottom-text {
    font-size: 2rem;
  }
  .checkout__plan--bottom-list-element-icon {
    font-size: 2rem;
  }
  .checkout__plan--bottom-list-element-feature {
    font-size: 2.5rem;
  }
}
@media (max-width: 40.625em) {
  .checkout__heading {
    font-size: 7rem;
  }
}
@media (max-width: 37.5em) {
  .checkout__container {
    padding: 10rem 1.5rem 15rem 1.5rem;
  }
  .checkout__heading {
    font-size: 6rem;
  }
  .checkout__plan--top {
    padding: 2rem;
  }
  .checkout__plan--bottom {
    padding: 2rem;
  }
  .checkout__plan--bottom-list-element-icon {
    font-size: 1.5rem;
  }
  .checkout__plan--bottom-list-element-feature {
    font-size: 2rem;
  }
  .checkout__users {
    align-self: center;
  }
}
@media (max-width: 28.75em) {
  .checkout__logo {
    width: 12rem;
  }
  .checkout__heading {
    font-size: 5rem;
  }
  .checkout__text {
    font-size: 2rem;
  }
  .checkout__plan--top-heading {
    font-size: 4.5rem;
  }
  .checkout__plan--top-text {
    font-size: 2rem;
  }
  .checkout__plan--top-amount-price {
    font-size: 6rem;
  }
  .checkout__plan--bottom-list-element {
    align-items: flex-start;
  }
  .checkout__plan--bottom-list-element-icon {
    font-size: 1.3rem;
  }
  .checkout__plan--bottom-list-element-feature {
    font-size: 1.6rem;
  }
}
@media (max-width: 25em) {
  .checkout__container {
    padding: 5rem 1.5rem 15rem 1.5rem;
  }
  .checkout__heading {
    font-size: 4.5rem;
  }
  .checkout__plans {
    margin-top: 7.5rem;
    gap: 7.5rem;
  }
  .checkout__plan--top-heading {
    font-size: 3.5rem;
  }
  .checkout__plan--top-tag {
    width: fit-content;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .checkout__plan--victory {
    overflow: visible;
  }
}
/* FOOTER */
.article__footer {
  border-top: 0.2rem solid #2b8a3e;
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.footer__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer__logo {
  width: 15rem;
}

.footer__logo--text {
  margin-top: -1rem;
  font-size: 3.5rem;
  font-family: "Nunito Sans", sans-serif;
  color: #ddd;
  letter-spacing: -0.2rem;
  font-weight: 400;
}

.footer__logo--text-sp {
  font-weight: 800;
}

.footer__hope {
  margin-top: 3rem;
  font-size: 2rem;
  font-weight: 500;
}

.footer__container {
  max-width: 180rem;
  margin: 0 auto;
  padding: 10rem 10rem 15rem 10rem;
}
.footer__content {
  display: flex;
  justify-content: space-between;
  gap: 10rem;
}
.footer__left {
  width: 70rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.footer__links {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.footer__links--link {
  font-size: 2rem;
  text-decoration: none;
  color: #ddd;
  letter-spacing: -0.1rem;
}
.footer__links--link:hover {
  color: #eee;
  text-decoration: underline solid #eee;
}
.footer__links--sep {
  width: 0.1rem;
  height: 100%;
  background-color: #262626;
}
.footer__text {
  font-size: 1.5rem;
  color: #aaa;
}
.footer__right {
  width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
.footer__support {
  display: flex;
  flex-direction: column;
}
.footer__support--title {
  font-size: 2rem;
  color: #aaa;
  text-transform: uppercase;
  font-weight: 600;
}
.footer__support--text {
  font-size: 1.8rem;
  color: #ddd;
}
.footer__btn {
  width: 100%;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background-color: rgba(0, 0, 0, 0);
  border: 0.1rem solid #262626;
  text-decoration: none;
  color: #ddd;
  transition: all 0.2s;
}
.footer__btn:hover {
  background-color: #111;
}

@media (max-width: 90.625em) {
  .footer__container {
    padding: 10rem 5rem 15rem 5rem;
  }
}
@media (max-width: 68.75em) {
  .footer__container {
    padding: 10rem 2.5rem 15rem 2.5rem;
  }
  .footer__content {
    flex-direction: column;
    align-items: center;
  }
  .footer__left {
    align-items: center;
    text-align: center;
  }
  .footer__links--sep {
    height: 5rem;
    width: 0.1rem;
  }
  .footer__right {
    align-items: center;
    text-align: center;
    gap: 5rem;
  }
}
@media (max-width: 53.125em) {
  .footer__container {
    padding: 5rem;
  }
  .footer__left {
    width: 100%;
  }
  .footer__links {
    gap: 2.5rem;
    flex-direction: column;
  }
  .footer__links--sep {
    width: 100%;
    height: 0.1rem;
  }
}
@media (max-width: 37.5em) {
  .footer__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .footer__content {
    gap: 5rem;
  }
}
/* HEADER ////////////////////////////*/
.header {
  width: 100%;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-family: "open sans", sans-serif;
}

.logo__img {
  width: 8rem;
  filter: saturate(0) brightness(1.5);
}

.logo__text {
  display: none;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.15rem;
  background-image: linear-gradient(#277d35, rgba(115, 201, 129, 0)), url("/all_img/text-back3.webp");
  background-size: cover;
  background-position: center;
  background-clip: text;
  color: transparent;
}

.header__nav {
  margin-left: -7.5rem;
  display: flex;
  gap: 1rem;
}
.header__nav--link {
  font-size: 1.8rem;
  text-decoration: none;
  color: #ccc;
  border-top: 0.1rem solid #0f0f0f;
  font-weight: 400;
  padding: 1rem 2rem;
  border-radius: 1000rem;
  transition: all 0.2s;
}
.header__nav--link:hover {
  background-color: #171717;
  border-top: 0.1rem solid #202020;
}

.header__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 2.5rem;
  text-decoration: none;
  font-family: inherit;
  border: none;
  background-image: linear-gradient(rgba(50, 160, 69, 0), rgba(34, 110, 50, 0));
  border: 0.2rem solid #fff;
  background-color: transparent;
  box-shadow: 0 0 0.4rem #000;
  padding: 1rem 2rem;
  color: #fff;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
}
.header__btn:hover {
  background-color: #eee;
  color: #111;
}

.disable-overflow {
  overflow: hidden;
}

@media (max-width: 106.25em) {
  .header__btn {
    font-size: 2rem;
  }
}
@media (max-width: 37.5em) {
  .header {
    padding: 1.5rem;
  }
  .logo__img {
    width: 5rem;
  }
  .logo__text {
    font-size: 2.5rem;
  }
  .header__btn {
    font-size: 1.5rem;
  }
}
@media (max-width: 25em) {
  .header {
    padding: 1.5rem;
  }
  .logo__img {
    width: 5rem;
  }
  .logo__text {
    font-size: 2rem;
  }
  .header__btn {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
  }
}
.btn {
  width: fit-content;
  font-family: inherit;
  border: none;
  font-size: 2rem;
  color: #eee;
  text-transform: capitalize;
  text-decoration: none;
  background-image: linear-gradient(#eee, #aaa);
  border-top: 0.1rem solid #fff;
  box-shadow: 0 0 0.3rem #000;
  padding: 1.5rem 3rem;
  color: #000;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s;
}
.btn:hover {
  background-image: linear-gradient(#fff, #bbb);
  border-top: 0.1rem solid #fff;
}

.btn-2 {
  display: none;
  color: #ccc;
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(#111, #151515);
  border-top: 0.1rem solid #191919;
  box-shadow: 0 0 0.5rem #000;
  padding: 1.5rem 3rem;
  font-size: 3rem;
  font-family: inherit;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-2:hover {
  background-image: linear-gradient(#171717, #202020);
  color: #eee;
}

@media (max-width: 106.25em) {
  .btn {
    font-size: 2rem;
  }
  .btn-2 {
    font-size: 2rem;
  }
}
@media (max-width: 37.5em) {
  .btn {
    font-size: 1.8rem;
  }
  .btn-2 {
    font-size: 1.8rem;
  }
}
@media (max-width: 31.25em) {
  .btn {
    font-size: 1.4rem;
    padding: 1rem 2rem;
  }
  .btn-2 {
    font-size: 1.4rem;
    padding: 1rem 2rem;
  }
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
    opacity: 80%;
  }
  50% {
    opacity: 100%;
  }
  100% {
    transform: rotate(360deg);
    opacity: 80%;
  }
}
@keyframes movingText {
  from {
    background-position: 0%;
  }
  to {
    background-position: 1000%;
  }
}
/* Animations */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes borderGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes fadeSlideshow {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

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