.tracker {
  font-family: "GT Eesti Pro Display";

  // section:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(
  //     :nth-child(5)
  //   ):not(:nth-child(6)) {
  //   display: none;
  // }

  .auth-header {
    display: none;

    @media (max-width: 431px) {
      display: flex;
      background-color: #a7ca60;
    }

    .burger__line {
      background-color: #4a4a4a;
    }

    .auth__buttons {
      .signIn {
        background-color: #eeeeee;
      }
    }
  }

  &__container {
    margin: 0 auto;
    // padding: 85px 0 90px;
    max-width: 1080px;
    position: relative;
    display: flex;
  }
  &__intro {
    background-color: #a7ca60;
    position: relative;

    @media (max-width: 431px) {
      height: 485px;
      overflow: hidden;
    }

    .intro {
      &__question-mark {
        position: absolute;
        right: 15%;

        @media (max-width: 431px) {
          display: none;
        }
      }
      &__code {
        position: absolute;
        mix-blend-mode: plus-lighter;
        bottom: 96px;
        left: 16%;

        @media (max-width: 431px) {
          display: none;
        }
      }
      &__code--top {
        position: absolute;
        mix-blend-mode: plus-lighter;
        top: 20px;
        left: 38%;

        @media (max-width: 431px) {
          display: none;
        }
      }

      &__container {
        display: flex;
        column-gap: 165px;
        height: 475px;
        overflow: hidden;

        @media (max-width: 431px) {
          flex-direction: column-reverse;
          align-items: center;
          height: auto;
        }
      }

      &-logo {
        display: flex;
        flex-direction: column;
        position: relative;

        h3 {
          color: #ffffff;
          font-family: "Geraspoheko";
          font-size: 343px;
          font-weight: 400;
          line-height: 325.92px;

          @media (max-width: 431px) {
            display: none;
          }
        }

        &__cup {
          position: absolute;
          bottom: -85px;
          right: -150px;

          @media (max-width: 431px) {
            position: static;
            margin: -90px 0 0 0;
          }

          img {
            @media (max-width: 431px) {
              height: 350px;
            }
          }

          &::before {
            content: "Не нужно заваривать мышь";
            display: flex;
            align-items: center;
            position: relative;
            top: 100px;
            left: -80px;
            width: 182px;
            height: 106px;
            border-radius: 8px;
            border: 0.5px solid #ffffff;
            background: linear-gradient(
              110.06deg,
              rgba(255, 255, 255, 0.34) 0%,
              rgba(199, 206, 198, 0.34) 99.25%
            );
            backdrop-filter: blur(8.6999998093px);
            box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
            padding: 0 15px;
            font-size: 17px;
            font-weight: 700;
            line-height: 19.72px;
            letter-spacing: 0.01em;
            text-align: center;

            @media (max-width: 431px) {
              width: 125px;
              height: 106px;
              left: 170px;
            }
          }
        }
      }

      &-content {
        display: flex;
        flex-direction: column;
        color: #607536;
        max-width: 455px;

        @media (max-width: 431px) {
          margin: 0 20px;
        }

        &__sublogo {
          margin-top: 37px;

          @media (max-width: 431px) {
            display: none;
          }

          h5 {
            font-size: 29px;
            font-weight: 900;
            line-height: 33.64px;
            letter-spacing: 0.11em;
            position: relative;
            display: inline;

            &::after {
              content: "";
              position: absolute;
              background: #ffffff;
              width: 14px;
              height: 14px;
              border-radius: 100px;
              left: 49%;
              top: -30%;
            }
          }
        }

        span {
          font-size: 33px;
          font-weight: 300;
          line-height: 37.29px;
          letter-spacing: 0.01em;
          margin: 101px 0 34px 0;

          @media (max-width: 431px) {
            font-size: 29px;
            line-height: 32.77px;
            text-align: center;
            margin: 21px 0 26px 0;
          }
        }

        p {
          font-size: 33px;
          font-weight: 500;
          line-height: 37.29px;
          letter-spacing: 0.01em;

          @media (max-width: 431px) {
            font-size: 25px;
            line-height: 28.25px;
            text-align: center;
          }
        }
      }
    }
  }

  &__presentation {
    background-color: #eeeeee;
    position: relative;

    .presentation {
      &__code {
        position: absolute;
        mix-blend-mode: plus-lighter;
        bottom: 225px;
        right: 18%;

        @media (max-width: 431px) {
          display: none;
        }
      }
      &__code--top {
        position: absolute;
        mix-blend-mode: plus-lighter;
        top: 60px;
        left: 25%;

        @media (max-width: 431px) {
          display: none;
        }
      }
      &__ellipse {
        position: absolute;
        width: 563px;
        height: 563px;
        top: -90px;
        left: 50%;
        transform: translate(-50%);

        @media (max-width: 431px) {
          display: none;
        }
      }

      &__container {
        display: flex;
        flex-direction: column;
        height: 749px;
        overflow: hidden;
        text-align: center;
        align-items: center;
        z-index: 2;

        @media (max-width: 431px) {
          height: 660px;
        }

        h5 {
          color: #4a4a4a;
          font-size: 33px;
          font-weight: 700;
          line-height: 38.28px;
          margin-top: 95px;

          @media (max-width: 431px) {
            font-size: 19px;
            line-height: 22.04px;
            text-align: center;
            margin-top: 37px;
          }
        }

        h4 {
          text-transform: uppercase;
          color: #a7ca60;
          font-size: 103px;
          font-weight: 900;
          line-height: 119.48px;
          margin-top: 9px;

          @media (max-width: 431px) {
            font-size: 50px;
            font-weight: 900;
            line-height: 58px;
            text-align: center;
          }
        }

        p {
          color: #4a4a4a;
          font-size: 19px;
          font-weight: 300;
          line-height: 22.04px;
          letter-spacing: 0.01em;
          max-width: 609px;
          margin-bottom: 52px;

          @media (max-width: 431px) {
            font-size: 15px;
            line-height: 17.4px;
            text-align: center;
            max-width: 370px;
          }

          span {
            font-weight: 700;
          }
        }
      }

      &-auth__buttons {
        display: flex;
        column-gap: 29px;

        @media (max-width: 431px) {
          column-gap: 12px;
        }

        button {
          width: 185px;
          height: 45px;
          border-radius: 44px;
          font-size: 17px;
          font-weight: 500;
          line-height: 19.72px;
        }

        .signIn {
          a {
            color: #607536;
          }
          background-color: #a7ca60;
          border: none;
        }

        .signUp {
          a {
            color: #a7ca60;
          }
          border: 1px solid #a7ca60;
          background: none;
        }
      }

      &__tracker-preview {
        margin-top: 61px;
        position: relative;

        @media (max-width: 431px) {
          margin-top: 37px;
          overflow: hidden;
          height: 315px;
          left: 150px;
        }

        .tracker-preview {
          &__buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            bottom: 155px;
            right: -75px;

            @media (max-width: 431px) {
              display: none;
            }

            button {
              background: none;
              width: 70px;
              height: 64px;
              border-radius: 5px;
              border: 1px solid #ffffff;
            }

            button:first-child {
              margin-bottom: 22px;
            }
          }
        }
      }

      &__addition {
        background-color: #a7ca60;
        width: 247px;
        height: 188px;
        border-radius: 24px 0px 83px 0px;
        color: #ffffff;
        position: absolute;
        padding: 40px 43px 40px 50px;
        bottom: -34px;
        left: 21%;
        z-index: 2;

        @media (max-width: 431px) {
          width: 255px;
          height: 102px;
          left: -22.26px;
          border-radius: 24px 0px 44px 0px;
          padding: 25px 0 0 60px;
        }

        span {
          font-size: 26px;
          font-weight: 900;
          line-height: 28.34px;
          letter-spacing: 0.03em;
          text-align: left;

          @media (max-width: 431px) {
            max-width: 174px;
          }
        }

        p {
          font-size: 15px;
          font-weight: 300;
          line-height: 19.65px;
          text-align: left;

          @media (max-width: 431px) {
            display: none;
          }
        }
      }
    }
  }

  &__goals {
    background-color: #1e1e1e;
    position: relative;

    .goals {
      &__code {
        position: absolute;
        mix-blend-mode: plus-lighter;
        bottom: -96px;
        left: 7%;
        z-index: 1;

        @media (max-width: 431px) {
          display: none;
        }
      }

      &__container {
        display: flex;
        flex-direction: column;
        height: 720px;
        text-align: center;
        align-items: center;

        @media (max-width: 431px) {
          height: 1020px;
          overflow: hidden;
        }
      }

      &-head {
        margin-top: 24px;
        position: relative;
        display: flex;
        justify-content: center;

        &__logo {
          font-family: "Bebas Neue";
          font-size: 244px;
          font-weight: 700;
          line-height: 244px;
          letter-spacing: -0.03em;
          background: linear-gradient(0deg, #171717 -59.84%, #2a2a2a 136.14%);
          filter: drop-shadow(7px 0px 10px rgba(0, 0, 0, 0.1294117647));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

          @media (max-width: 431px) {
            font-size: 110px;
            line-height: 110px;
            letter-spacing: 0.01em;
            margin-top: 20px;
          }
        }

        &__info {
          position: absolute;
          bottom: 55px;
          max-width: 552px;
          font-size: 15px;
          font-weight: 300;
          line-height: 17.4px;
          letter-spacing: 0.02em;
          color: #eeeeee;

          @media (max-width: 431px) {
            bottom: -55px;
            max-width: 372px;
          }

          span {
            font-weight: 700;
          }
        }
      }

      &__items {
        margin-top: 31px;
        display: flex;
        justify-content: space-between;
        column-gap: 48px;

        @media (max-width: 431px) {
          display: grid;
          grid-template-columns: 1fr 1fr;
          row-gap: 86px;
          margin-top: 95px;
        }

        .item {
          &__wrapper {
            position: relative;

            &:nth-child(2) {
              margin-right: 41px;

              @media (max-width: 431px) {
                margin: 0;
              }
            }
            &:nth-child(3) {
              margin-left: 41px;

              @media (max-width: 431px) {
                margin: 0;
              }
            }
          }

          &__head {
            position: absolute;
            display: flex;
            color: #a7ca60;
            top: -45px;
            left: 20px;

            h4 {
              margin-bottom: 0;
              font-weight: 700;
              font-size: 100px;
              text-transform: uppercase;
              line-height: 0.8;
            }

            p {
              font-size: 12px;
              font-weight: 700;
              line-height: 13.92px;
              letter-spacing: 0.01em;

              @media (max-width: 431px) {
                font-size: 12px;
                font-weight: 700;
                max-width: 107px;
                text-align: left;
              }
            }
          }
        }
      }

      &__item {
        position: relative;
        width: 200px;
        height: 205px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(3px);
        box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
        background: linear-gradient(
          137deg,
          rgba(87, 87, 87, 0.34) 0%,
          rgba(104, 104, 104, 0.34) 100%
        );
        border: 0.5px solid #717171;
        border-radius: 8px;

        @media (max-width: 431px) {
          width: 200px;
          height: 205px;
        }

        .item {
          &__info {
            font-size: 15px;
            font-weight: 300;
            line-height: 19.65px;
            color: #dddddd;
            max-width: 148px;

            @media (max-width: 431px) {
              font-size: 17px;
            }

            span {
              font-weight: 700;
            }
          }
        }
      }

      &__target {
        position: absolute;
        bottom: 0;
      }
    }
  }

  &__invite {
    background-color: #a7ca60;
    position: relative;

    .invite {
      &__code {
        position: absolute;
        mix-blend-mode: plus-lighter;
        bottom: 10px;
        right: 12%;
      }

      &__container {
        padding-top: 84px;
        height: 582px;
        overflow: hidden;
        column-gap: 133px;

        @media (max-width: 431px) {
          height: auto;
          padding-top: 35px;
          display: flex;
          flex-direction: column;
        }
      }

      &__info {
        max-width: 541px;

        @media (max-width: 431px) {
          max-width: 377px;
          margin: 0 auto;
        }

        h5 {
          color: #607536;
          font-size: 44px;
          font-weight: 700;
          line-height: 51.04px;

          @media (max-width: 431px) {
            font-size: 29px;
            line-height: 33.64px;
          }
        }

        p {
          color: #607536;
          margin: 39px 0 64px 0;
          font-size: 17px;
          font-weight: 300;
          line-height: 19.72px;

          @media (max-width: 431px) {
            margin: 30px 0 22px 0;
          }

          span {
            font-weight: 700;
          }
        }
      }

      &-auth__buttons {
        display: flex;
        column-gap: 29px;

        @media (max-width: 431px) {
          flex-direction: column;
          row-gap: 22px;
        }

        button {
          width: 185px;
          height: 45px;
          border-radius: 50px;
          font-size: 17px;
          font-weight: 500;
          line-height: 19.72px;
        }

        .signIn {
          a {
            color: #607536;
          }
          background-color: #ffffff;
          border: none;

          @media (max-width: 431px) {
            display: none;
          }

          &-modile {
            a {
              color: #607536;
            }
            background-color: #ffffff;
            border: none;
          }
        }

        .signUp {
          a {
            color: #ffffff;
          }
          border: 1px solid #ffffff;
          background: none;

          @media (max-width: 431px) {
            display: none;
          }

          &-modile {
            a {
              color: #ffffff;
            }
            border: 1px solid #ffffff;
            background: none;
          }
        }
      }

      &__logo {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;

        @media (max-width: 431px) {
          flex-direction: row;
          padding-left: 18px;
          column-gap: 18px;
        }

        h3 {
          color: #ffffff;
          font-family: "Geraspoheko";
          font-size: 343px;
          font-weight: 400;
          line-height: 325.92px;
          z-index: 3;
          position: relative;

          @media (max-width: 431px) {
            font-size: 140px;
            font-weight: 400;
            line-height: 140px;
            z-index: 2;
          }
        }

        &__sign {
          position: absolute;
          z-index: 2;
          left: -180px;
          top: 70px;

          @media (max-width: 431px) {
            width: 90px;
            left: -40px;
            top: 50px;
          }
        }

        &__ellipse {
          position: absolute;
          width: 463px;
          height: 563px;
          z-index: 1;

          @media (max-width: 431px) {
            width: 220px;
            height: 220px;
          }
        }
      }
    }
  }

  &__nav {
    background-color: #eeeeee;
    position: relative;

    .nav {
      &__code {
        position: absolute;
        mix-blend-mode: plus-lighter;
        bottom: 10px;
        right: 12%;
      }

      &__container {
        padding-top: 49px;
        height: 638px;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 431px) {
          height: 1170px;
        }
      }

      &__project {
        padding: 0 55px;
        display: flex;
        column-gap: 80px;
        height: 142px;
        align-items: center;
        border-radius: 8px;
        border: 1px solid #f8f8f8;

        @media (max-width: 431px) {
          align-items: normal;
          flex-direction: column;
          row-gap: 32px;
          height: 266px;
          max-width: 397px;
          padding: 32px 30px;
        }

        .project__img {
          border-radius: 8px;
          width: 99px;
          height: 81px;
          background: #a7ca60;
          position: relative;

          img {
            position: relative;
          }

          .flag {
            bottom: 21px;
            right: -10px;
          }
        }

        p {
          color: #717171;
          font-size: 17px;
          font-weight: 300;
          line-height: 21.59px;
          letter-spacing: 0.02em;

          span {
            font-weight: 700;
          }
        }
      }

      &__title {
        color: #4a4a4a;
        font-size: 46px;
        font-weight: 900;
        line-height: 53.36px;
        letter-spacing: 0.03em;
        text-align: center;
        margin: 42px 0 77px 0;

        @media (max-width: 431px) {
          font-size: 19px;
          line-height: 22.04px;
        }
      }

      &__opportunities {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));

        @media (max-width: 431px) {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          column-gap: 20px;
          row-gap: 19px;
          width: 100%;
          margin: 0 0 86px 0;
        }
      }

      &__opportunity {
        width: 320px;
        height: 91px;
        padding-left: 55px;
        display: flex;
        align-items: center;

        @media (max-width: 431px) {
          padding: 0;
          width: 40%;
          height: auto;
          display: block;

          div {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            background: linear-gradient(
              95.54deg,
              #ffffff 5.13%,
              #f1f1f1 97.48%
            );
            border: 0.5px solid #ffffff;
            border-radius: 18px;
            padding: 10px;
            height: 221px;
          }
        }

        p {
          font-weight: 500;
          font-size: 20px;
          line-height: 21.4px;
          color: #838383;

          @media (max-width: 431px) {
            font-size: 14px;
            font-weight: 500;
            line-height: 14.12px;
            text-align: center;
            min-height: 55px;
          }
        }

        img {
          display: none;
          position: absolute;
          right: -130px;
          bottom: -15px;

          @media (max-width: 431px) {
            display: block;
            position: relative;
            right: auto;
            bottom: auto;
          }
        }
        @media (max-width: 431px) {
          &:hover {
            p {
              font-weight: 700;
              color: rgba(74, 74, 74, 1);
              max-width: 165px;

              span {
                color: rgba(167, 202, 96, 1);
              }
            }
          }
        }
        @media (min-width: 432px) {
          &:hover {
            border-right: 1px solid rgba(245, 245, 245, 1);
            border-bottom: 1px solid rgba(245, 245, 245, 1);
            background: linear-gradient(
              95.54deg,
              #ffffff 5.13%,
              #eeeeee 97.48%
            );
            border-radius: 5px;
            cursor: pointer;

            div {
              display: flex;
              align-items: center;
              position: relative;
            }

            p {
              font-weight: 700;
              color: rgba(74, 74, 74, 1);
              min-width: 167px;

              span {
                color: rgba(167, 202, 96, 1);
              }
            }
            img {
              display: block;
            }
          }
        }
      }

      &__opportunity:nth-child(-n + 3) {
        border-bottom: 1px solid rgba(245, 245, 245, 1);
      }

      &__opportunity:nth-child(-n + 2) {
        border-right: 1px solid rgba(245, 245, 245, 1);
      }

      &__opportunity:nth-child(4) {
        border-right: 1px solid rgba(245, 245, 245, 1);
      }

      &__opportunity:nth-child(5) {
        border-right: 1px solid rgba(245, 245, 245, 1);
      }
    }

    .outstaffing__offers {
      padding: 10px 0 25px 10px;
      cursor: pointer;

      @media (max-width: 431px) {
        padding: 0;
        width: 40%;
      }

      div {
        display: flex;
        background: rgba(255, 255, 255, 1);
        border-radius: 5px;
        height: 91px;
        padding: 24px 35px 24px 42px;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 431px) {
          height: 100%;
          padding: 0;
          flex-direction: column;
          justify-content: space-evenly;
          border-radius: 18px;
          border: 0.5px solid #ffffff;
        }

        p {
          color: rgba(167, 202, 96, 1);
          font-weight: 500;
          font-size: 20px;
          line-height: 21.4px;
          max-width: 215px;

          @media (max-width: 431px) {
            font-weight: 500;
            font-size: 16px;
            line-height: 17.12px;
            text-align: center;
          }
        }

        img {
          width: 27px;
          height: 15px;
        }
      }
    }
  }
}