:root {
  --dominant-color: #2C2C2E;
  --primary-color: rgb(219, 203, 189);
  --primary-color-1: #EEE;
  --secondary-color: #D1D3FF;
  --secondary-color-1: #333C6A;
  --color-underline: #B7FFB0;
  --primary-gradient: linear-gradient(114deg, #A0FFFE 0%, #A6FFDA 46.29%, #B7FFB0 96.84%);
  --primary-gradient-modified: linear-gradient(to left, #A6FFDA 46.29%, #B7FFB0 96.84%);
  --gradient-main-1: linear-gradient(190deg, #EEE 11.13%, #CAFCFF 85.94%); }

@keyframes rotate {
  100% {
    transform: rotate(360deg); } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scrollbar-width: none; }
  @media only screen and (max-width: 37.5em) {
    html {
      font-size: 31.25%; } }

body {
  font-size: 1.6rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 400;
  color: var(--dominant-color);
  line-height: 1.3;
  -ms-overflow-style: none; }
  body::-webkit-scrollbar {
    display: none; }

.paragraph--1 {
  font-size: 1.6rem;
  font-family: 'Inter';
  font-weight: 600;
  text-transform: uppercase; }

.paragraph--1::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform: translateY(-1rem); }
  @media only screen and (max-width: 37.5em) {
    .paragraph--1::after {
      transform: translateY(-5px); } }

.paragraph--2 {
  font-size: 2.5rem;
  color: var(--secondary-color-1); }
  @media only screen and (max-width: 37.5em) {
    .paragraph--2 {
      font-size: 3rem; } }

.paragraph--3 {
  font-size: 2rem;
  font-family: 'Inter';
  color: var(--secondary-color-1); }

.paragraph--small {
  font-size: 1rem;
  font-family: 'Inter'; }
  @media only screen and (max-width: 37.5em) {
    .paragraph--small {
      font-size: 1.5rem; } }

.heading {
  font-weight: 400;
  color: var(--secondary-color-1); }
  .heading__main, .heading__sub {
    display: block;
    text-align: center;
    font-weight: 400;
    line-height: 1; }
  .heading__main {
    font-size: 6rem; }
    @media only screen and (max-width: 37.5em) {
      .heading__main {
        font-size: 5rem; } }
    .heading__main > span {
      display: inline-block;
      font-size: 5.6rem;
      font-style: italic; }
  .heading__sub {
    font-size: 5rem;
    font-style: italic; }
    @media only screen and (max-width: 37.5em) {
      .heading__sub {
        font-size: 6rem; } }
  .heading__span {
    display: block; }
    @media only screen and (max-width: 37.5em) {
      .heading__span {
        display: inline-block; } }
  .heading--1 {
    color: var(--dominant-color); }
  .heading--2 {
    font-size: 4.5rem; }
    @media only screen and (max-width: 37.5em) {
      .heading--2 {
        font-weight: 700;
        font-size: 3rem; } }
  .heading--3 {
    font-size: 4rem; }
    @media only screen and (max-width: 37.5em) {
      .heading--3 {
        font-size: 3.2rem; } }
  .heading--4 {
    font-size: 3.2rem; }
    @media only screen and (max-width: 37.5em) {
      .heading--4 {
        font-size: 2.75rem; } }

.u-margin-bottom-1 {
  margin-bottom: 1.2rem; }

.u-margin-bottom {
  margin-bottom: 2rem; }
  @media only screen and (max-width: 37.5em) {
    .u-margin-bottom {
      margin-bottom: 1rem; } }

.u-margin-bottom-4 {
  margin-bottom: 4rem; }

.u-margin-bottom-8 {
  margin-bottom: 8rem; }
  @media only screen and (max-width: 37.5em) {
    .u-margin-bottom-8 {
      margin-bottom: 4rem; } }

.u-italic {
  font-style: italic; }

.u-text-center {
  text-align: center; }

.hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(8rem); }

.animate-btn {
  animation-name: booming;
  animation-duration: 1s;
  animation-iteration-count: infinite; }

.btn {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  z-index: 2;
  overflow: hidden; }
  .btn:link, .btn:visited {
    display: inline-block;
    text-decoration: none;
    padding: 1.5rem 5rem;
    border-radius: 10rem; }
  .btn--1 {
    background: var(--primary-gradient);
    color: inherit; }
  .btn--2 {
    border: 1px solid var(--secondary-color-1);
    color: var(--secondary-color-1); }

.card {
  border-radius: 2rem;
  position: sticky; }
  .cards {
    margin-top: 10rem;
    flex: 0 0 auto;
    width: 70%;
    transition: all 2s; }
    @media only screen and (max-width: 37.5em) {
      .cards {
        width: 85%; } }
  .card:not(:last-child) {
    margin-bottom: 3rem; }
  .card__heading {
    display: flex;
    align-items: center;
    padding: 3rem; }
    .card__heading > .heading--3 {
      margin-right: auto; }
  .card__img {
    display: inline-block; }
    @media only screen and (max-width: 37.5em) {
      .card__img {
        width: 4rem;
        height: auto; } }
  .card__figure {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding: 0 3rem 5rem 3rem; }
    @media only screen and (max-width: 37.5em) {
      .card__figure {
        flex-direction: column; } }
    .card__figure-text, .card__figure-img {
      flex: 0 0 auto;
      width: 48%; }
      @media only screen and (max-width: 37.5em) {
        .card__figure-text, .card__figure-img {
          width: 100%; } }
    .card__figure-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block; }
  .card--1 {
    background-color: rgba(209, 211, 255, 0.65); }
  .card--2 {
    background-color: #cafcff; }
  .card--3 {
    background-color: #b7ffb0; }
  .card--4 {
    background-color: #fff; }

.collection {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 4rem;
  list-style: none; }

.about {
  display: flex;
  align-items: center;
  gap: 16rem; }
  @media only screen and (max-width: 37.5em) {
    .about {
      flex-direction: column;
      justify-content: center;
      gap: 5rem; } }
  .about__img, .about__text {
    flex: 1; }
  @media only screen and (max-width: 37.5em) {
    .about__img {
      width: 65%;
      height: auto; } }
  .about__text {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; }
    @media only screen and (max-width: 37.5em) {
      .about__text {
        width: 90%;
        text-align: center; } }
    .about__text > a {
      align-self: flex-start;
      margin-top: 4rem; }
      @media only screen and (max-width: 37.5em) {
        .about__text > a {
          margin-top: 3rem; } }
    .about__text .heading__span:nth-child(2) {
      font-size: 3.7rem; }
      @media only screen and (max-width: 37.5em) {
        .about__text .heading__span:nth-child(2) {
          font-size: 3.5rem; } }
    @media only screen and (max-width: 37.5em) {
      .about__text .btn {
        align-self: center; } }
  .about__background {
    display: block;
    width: 80%;
    height: 80%;
    object-fit: cover; }
    @media only screen and (max-width: 37.5em) {
      .about__background {
        width: 100%;
        height: 100%; } }

.footer {
  padding-top: 19.5rem;
  padding-bottom: 4rem;
  background-color: var(--secondary-color-1);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }
  @media only screen and (max-width: 37.5em) {
    .footer {
      padding-top: 10rem;
      padding-bottom: 5rem; } }
  .footer__figure {
    margin-bottom: 17rem;
    filter: invert(1); }
    @media only screen and (max-width: 37.5em) {
      .footer__figure {
        margin-bottom: 7rem;
        width: 5rem;
        height: auto; } }
    .footer__figure-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .footer__company-motto {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem; }
    @media only screen and (max-width: 37.5em) {
      .footer__company-motto {
        margin-bottom: 2rem; } }
  @media only screen and (max-width: 37.5em) {
    .footer__company-name {
      display: inline-block;
      width: 15rem;
      height: auto; } }
  .footer__paragraph {
    font-size: 3.5rem;
    font-style: italic;
    text-align: center; }
    @media only screen and (max-width: 37.5em) {
      .footer__paragraph {
        font-size: 2rem; } }
  .footer__social {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.6rem; }
  .footer__media {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 2.4rem; }
  .footer__icon {
    font-size: 3rem; }
    @media only screen and (max-width: 37.5em) {
      .footer__icon {
        font-size: 2rem; } }
  .footer__btn:link, .footer__btn:visited {
    display: inline-block;
    text-decoration: none;
    color: unset;
    font-size: 2.3rem;
    font-family: inherit; }
    @media only screen and (max-width: 37.5em) {
      .footer__btn:link, .footer__btn:visited {
        font-size: 2rem; } }

.header {
  min-height: 100vh;
  background-color: var(--primary-color);
  position: relative;
  display: flex;
  flex-direction: column; }
  @media only screen and (max-width: 37.5em) {
    .header {
      background: linear-gradient(to top, rgba(219, 203, 189, 0.8), rgba(219, 203, 189, 0.8)), url(../asset/hero-main.svg) no-repeat;
      background-size: cover;
      background-position: top center;
      justify-content: center; } }
  .header__nav {
    display: flex;
    align-self: center;
    flex: 0 0 auto;
    width: 95%;
    padding: 2rem 4rem;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50rem;
    position: absolute;
    top: 0;
    transform: translateY(2rem);
    z-index: 10; }
  .header__logo {
    margin-right: auto; }
  .header__hero {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    @media only screen and (max-width: 37.5em) {
      .header__hero {
        flex-direction: column;
        justify-content: center; } }
  .header__hero-sub--1, .header__hero-sub--2 {
    flex: 0 0 auto;
    width: 49%; }
  .header__hero-sub--1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 8rem; }
    @media only screen and (max-width: 37.5em) {
      .header__hero-sub--1 {
        width: 100%;
        gap: 4rem; } }
  @media only screen and (max-width: 37.5em) {
    .header__hero-sub--2 {
      display: none; } }
  .header__background {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.logo {
  width: 15rem; }

.sticky {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.8); }

.plan__collection {
  list-style: none;
  background-color: #fff;
  padding: 4rem 6rem;
  border-radius: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  width: 75%;
  gap: 2.4rem; }
  @media only screen and (max-width: 37.5em) {
    .plan__collection {
      width: 85%; } }

.plan__item {
  font-size: 2.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 5rem; }
  @media only screen and (max-width: 37.5em) {
    .plan__item {
      font-size: 1.6rem;
      align-items: flex-start;
      gap: 2rem; } }
  .plan__item-img {
    width: 4rem;
    height: auto;
    transform: translateY(0.5rem); }
    @media only screen and (max-width: 37.5em) {
      .plan__item-img {
        width: 3rem; } }
    .plan__item-img img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; }

.plan__intro {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3rem; }
  .plan__intro .paragraph--3 {
    flex: 0 0 auto;
    width: 67%;
    text-align: center; }

.quality__content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9rem; }
  @media only screen and (max-width: 37.5em) {
    .quality__content {
      flex-direction: column; } }
  .quality__content:first-of-type {
    margin-bottom: 12rem; }

.quality__write-up, .quality__collection, .quality__figure {
  flex: 0 0 auto;
  width: 50%; }
  @media only screen and (max-width: 37.5em) {
    .quality__write-up, .quality__collection, .quality__figure {
      width: 80%; } }

.quality__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.quality__write-up {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 3rem; }
  @media only screen and (max-width: 37.5em) {
    .quality__write-up {
      gap: 2rem;
      align-items: center;
      flex: 0 0 auto;
      width: 100%;
      text-align: center; } }

.quality__collection {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  gap: 3.3rem;
  font-size: 2.3rem;
  background-color: #fff;
  padding: 3.7rem 8rem;
  border-radius: 2rem;
  list-style: none; }

.quality__item {
  position: relative;
  font-size: 1.6rem;
  font-family: 'Inter';
  font-weight: 400; }
  .quality__item::before {
    content: '';
    position: absolute;
    top: .4rem;
    left: 0;
    transform: translateX(-3rem);
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--secondary-color);
    border-radius: 50%; }

.quality__btn {
  border: none;
  outline: none;
  background-color: transparent;
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite; }
  @media only screen and (max-width: 37.5em) {
    .quality__btn {
      width: 13rem;
      height: auto; } }
  @media only screen and (max-width: 37.5em) {
    .quality__btn img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover; } }

.section {
  transition: all 5s; }
  .section-about {
    padding: 10rem 5rem;
    background-color: var(--secondary-color); }
  .section-properties {
    padding: 10rem 0;
    background-color: var(--primary-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-direction: column; }
  .section-quality {
    background: var(--gradient-main-1);
    padding: 8rem 14rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; }
    @media only screen and (max-width: 37.5em) {
      .section-quality {
        padding: 6rem 3rem; } }
  .section-plan {
    padding: 10rem 5rem;
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4.4rem; }
    @media only screen and (max-width: 37.5em) {
      .section-plan {
        padding: 6rem 3rem; } }
    .section-plan .heading__main {
      color: var(--secondary-color-1); }
      .section-plan .heading__main:last-of-type > span {
        transform: translate(-1.5rem, -0.5rem); }
        .section-plan .heading__main:last-of-type > span::after {
          content: "";
          display: block;
          width: 100%;
          height: .3rem;
          transform: translateY(0.3rem);
          background-color: var(--color-underline); }
    .section-plan-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      gap: 4rem; }