.header-wrapper {
  display: grid;
  grid-template-columns: 1fr repeat(12, minmax(min-content, 10rem)) 1fr;
  position: relative;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0rem;
    left: 0rem;
    width: 26rem;
    height: 26rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../../public/webp/hand-left.webp");
    @media only screen and (max-width: 45em) {
      width: 20rem;
      height: 20rem;
    }
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 7rem;
    right: 0rem;
    width: 25rem;
    height: 45rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../../public/webp/hand-right.webp");
    z-index: -1;

    @media only screen and (max-width: 45em) {
      width: 20rem;
      height: 40rem;
    }
  }
}

.header {
  grid-column: 2/14;
  margin-top: 25rem;
  padding: 0 6rem;

  @media only screen and (max-width: 45em) {
    grid-column: 1/15;
    padding: 0 4rem;
  }

  &__hero {
    &--heading {
      font-family: $font-secondary;
      font-size: 9rem;
      line-height: 100%;
      letter-spacing: -0.03em;
      color: var(--color-white);
      position: relative;
      @media only screen and (max-width: 45em) {
        font-size: 7rem;
        br {
          display: none;
        }
      }
      @media only screen and (max-width: 28em) {
        font-size: 6rem;
      }

      &-gradient {
        background: linear-gradient(
          -45deg,
          var(--color-light-blue),
          var(--color-light-purple),
          var(--color-light-blue),
          var(--color-light-purple)
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 400% 400%;
        animation: gradient 3s ease infinite;
      }
    }
    &--cta {
      margin-top: 13rem;
      display: inline-block;
      font-family: $font-tertiary;
      font-size: 1.8rem;
      line-height: 92.4%;
      letter-spacing: 0.19em;
      color: var(--color-gray);
      text-decoration: none;
      position: relative;

      &::after {
        display: block;
        content: "";
        position: absolute;
        bottom: -1rem;
        left: 0;
        width: 50%;
        height: 1px;
        background: var(--color-gray);
        transition: all 0.3s ease;
      }

      &:hover {
        &::after {
          width: 100%;
        }
      }
    }
  }

  &__footer {
    grid-column: 1/15;
    padding: 0 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16rem;
    margin-bottom: 14rem;
    color: var(--color-gray);

    @media only screen and (max-width: 57em) {
      padding: 0 4rem;
    }

    &--right {
      width: 20rem;
      @include centerContent;
    }
    a {
      color: var(--color-gray);
      text-decoration: none;
      font-family: $font-tertiary;
      line-height: 92.4%;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      transition: all 0.3s ease-in-out;
      &:hover {
        color: var(--color-white);
      }
    }
  }
}

// section

.section-projects {
  grid-column: 2/14;
  margin-top: 20rem;
  padding: 0 6rem;

  @media only screen and (max-width: 57em) {
    grid-column: 1/15;
  }
  @media only screen and (max-width: 45em) {
    padding: 0 4rem;
  }

  p {
    margin-bottom: 15rem;
    margin-top: 2rem;
  }

  .project-card {
    width: 80%;
    margin: 20rem auto;
    background: linear-gradient(
      180deg,
      rgba(35, 37, 49, 0.5) 0%,
      rgba(15, 15, 24, 0.5) 100%
    );
    // background: rgba(15, 15, 24, 0.5) 100%;
    border: 0.2rem solid #20222e;
    box-sizing: border-box;
    backdrop-filter: blur(54px);
    border-radius: 7.3rem;
    display: flex;
    align-items: center;
    padding: 6rem;
    position: relative;

    @media only screen and (max-width: 57em) {
      width: 70%;
      border-radius: 6.3rem;
      flex-direction: column;
    }
    @media only screen and (max-width: 40em) {
      width: 75%;
    }
    @media only screen and (max-width: 35em) {
      width: 80%;
    }
    @media only screen and (max-width: 30em) {
      padding: 4rem;
      width: 84%;
      border-radius: 4.3rem;
    }
    @media only screen and (max-width: 23em) {
      width: 90%;
    }
    @media only screen and (max-width: 22em) {
      width: 100%;
    }

    &::before {
      content: "";
      display: block;
      position: absolute;
      top: -5rem;
      right: -5rem;
      width: 15rem;
      height: 15rem;
      background-repeat: no-repeat;
      background-size: contain;

      @media only screen and (max-width: 57em) {
        top: -3rem;
        right: -3rem;
        width: 12rem;
        height: 12rem;
      }
    }

    &:nth-of-type(1) {
      a {
        color: #6b9796;
      }
      &::before {
        background-image: url("../../public/svg/01.svg");
      }
    }
    &:nth-of-type(2) {
      a {
        color: #e6972f;
      }
      &::before {
        background-image: url("../../public/svg/02.svg");
      }
    }
    &:nth-of-type(3) {
      a {
        color: #57a3c7;
      }
      &::before {
        background-image: url("../../public/svg/03.svg");
      }
    }
    &:nth-of-type(4) {
      a {
        color: #c08af1;
      }
      &::before {
        background-image: url("../../public/svg/04.svg");
      }
    }

    &__left {
      margin-right: 6rem;
      @media only screen and (max-width: 57em) {
        order: 2;

        display: flex;
        align-self: flex-start;

        display: none;
      }
      h4 {
        transform: rotate(180deg);
        writing-mode: tb-rl;
        font-family: $font-tertiary;
        font-size: 1.3rem;
        line-height: 92.4%;
        letter-spacing: 0.19em;
        color: #8b8b8b;
        line-height: 120%;
        @media only screen and (max-width: 57em) {
          transform: rotate(360deg);
          writing-mode: lr-tb;
          margin-top: 3rem;
          margin-bottom: 2rem;
        }
      }
    }
    &__middle {
      width: 35rem;
      height: 45rem;
      background-size: cover;
      position: relative;
      border-radius: 5.3rem;
      overflow: hidden;

      @media only screen and (max-width: 57em) {
        order: 1;
        border-radius: 5rem;
        height: 40rem;
      }
      @media only screen and (max-width: 30em) {
        width: 30rem;
        border-radius: 3rem;
      }

      canvas {
        position: absolute;
        // border-radius: inherit !important;
        z-index: 0;
        width: 100% !important;
        height: 100% !important;
      }

      img {
        width: 100%;
        height: 100%;

        &:hover {
          &:nth-child(2) {
            opacity: 1;
          }
        }

        &:nth-child(1) {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          transition: opacity 0.3s;
        }
        &:nth-child(2) {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          transition: opacity 0.3s;
        }
      }
    }
    &__right {
      margin-left: 6rem;
      @media only screen and (max-width: 57em) {
        margin-left: 0rem;
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        order: 3;
        margin-top: 2rem;
      }
      h2 {
        margin-bottom: 6rem;
        @media only screen and (max-width: 57em) {
          margin-bottom: 3rem;
        }
      }
    }
    &__link {
      display: inline-block;
      font-family: $font-tertiary;
      font-size: 1.8rem;
      line-height: 92.4%;
      letter-spacing: 0.19em;
      text-decoration: none;
      position: relative;

      &::after {
        display: block;
        content: "";
        position: absolute;
        bottom: -1rem;
        left: 0;
        width: 50%;
        height: 1px;
        background: var(--color-gray);
        transition: all 0.3s ease;
      }

      &:hover {
        &::after {
          width: 100%;
        }
      }
    }
    &__socials {
      margin-top: 10rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 5rem;

      @media only screen and (max-width: 57em) {
        width: 6.5rem;
        margin-top: 5rem;
      }
    }
  }
}

// section=reviews

.section-reviews__bg {
  background-color: #050810;
}

.section-reviews {
  grid-column: 1/15;
  display: grid;
  grid-template-columns: 1fr repeat(12, minmax(min-content, 10rem)) 1fr;
  padding: 8rem 0;
  transition: all 0.3s ease-in-out;
  &__top {
    grid-column: 2/14;
    padding: 0 6rem;

    @media only screen and (max-width: 57em) {
      grid-column: 1/15;
    }
    @media only screen and (max-width: 45em) {
      padding: 0 4rem;
    }

    p {
      margin-top: 1.5rem;
    }
  }

  &__bottom {
    grid-column: 1/15;
    overflow-x: hidden;
    margin-top: 8rem;
    margin-bottom: 4rem;
    &-wrapper {
      @include centerContent;
      width: max-content;
      .review-card {
        background: #171e2f;
        border-radius: 2rem;
        padding: 3rem;
        margin: 1.5rem;
        &__top {
          @include centerContent;
          margin-bottom: 3rem;
          // &--left {
          // }
          // &--right {
          //   img {
          //   }
          // }
        }

        // &__bottom {
        // }

        &__p {
          font-size: 0.8rem;
          text-transform: uppercase;
          line-height: 81.4%;
          letter-spacing: 0.25em;
          color: #585e6e;
        }

        &__h3 {
          font-size: 1.9rem;
          line-height: 81.4%;
          letter-spacing: -0.01em;
          color: #585e6e;
          margin-top: 1.5rem;
          font-weight: 100;
        }

        &__h2 {
          font-size: 2rem;
          line-height: 130.4%;
          color: var(--color-white);
          font-weight: 100;
        }
      }
    }
  }
}

.review-card__anim1 {
  animation: reviewCardAnim1 25s ease-in-out infinite alternate;

  &:hover {
    animation-play-state: paused;
  }
}

.review-card__anim2 {
  animation: reviewCardAnim2 25s ease-in-out infinite alternate;
  &:hover {
    animation-play-state: paused;
  }
}

// section-contact
.section-contact {
  grid-column: 2/14;
  padding: 0 6rem;
  margin-top: 12rem;

  @media only screen and (max-width: 57em) {
    grid-column: 1/15;
  }
  @media only screen and (max-width: 45em) {
    padding: 0 4rem;
  }

  &__h2 {
    font-size: 4.5rem;
    line-height: 130.4%;
    letter-spacing: -0.06em;
    color: var(--color-gray);
    font-weight: 100;
    margin-top: 4rem;

    @media only screen and (max-width: 56.25em) {
      font-size: 4rem;
    }
    @media only screen and (max-width: 37.5em) {
      font-size: 3rem;
    }

    a {
      color: var(--color-white);
      font-weight: bold;
      text-decoration: none;
      transition: all 0.3s ease-in-out;

      &:hover {
        color: var(--color-light-blue);
      }
    }
  }
}

// section-socials
.section-socials {
  grid-column: 2/14;
  padding: 0 6rem;
  margin-top: 12rem;

  @media only screen and (max-width: 57em) {
    grid-column: 1/15;
  }
  @media only screen and (max-width: 45em) {
    padding: 0 4rem;
  }

  p {
    margin-top: 2rem;
  }

  &--links {
    @include centerContent;
    margin-top: 4rem;
    gap: 2rem;
    flex-wrap: wrap;
    max-width: 40rem;
  }
  a {
    @include centerContent;
    color: var(--color-gray);
    text-decoration: none;
    font-family: $font-tertiary;
    line-height: 92.4%;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 100;
    transition: all 0.3s ease-in-out;
    &:hover {
      color: var(--color-white);
    }
  }
}

.footer {
  @include centerContent;
  width: 100%;
  margin-top: 12rem;
  padding: 3rem 6rem;
  border-top: 1px solid rgba(#c4c4c4, 0.25);

  @media only screen and (max-width: 45em) {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  &__socials {
    @include centerContent;
    width: 6rem;
  }
}

.speaker {
  @include centerContent;
  width: 7rem;
  height: 4rem;
  border: 0.2rem solid var(--color-purple);
  border-radius: 50px;
  padding: 1rem 1.5rem;
  position: relative;

  &__toggle {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    background-color: var(--color-white);
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    z-index: 2;
  }
  // &__muted {
  // }
  &__unmuted {
    transform: rotate(180deg);
    .rect1-anim {
      animation: rect1Anim 1s ease-in-out infinite alternate;
    }
    .rect2-anim {
      animation: rect2Anim 1s ease-in-out infinite alternate;
    }
    .rect3-anim {
      animation: rect3Anim 1s ease-in-out infinite alternate;
    }
    .rect4-anim {
      animation: rect4Anim 1s ease-in-out infinite alternate;
    }
  }
}

.speaker__toggle--anim {
  left: 54%;
}
