.club {
  font-family: "GT Eesti Pro Text";

  &-mobile-menu {
    display: none;

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

    .menu {
      &-container {
        position: absolute;
        z-index: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      &__img {
        position: relative;
        top: -277px;
        transition: top 0.5s ease;

        svg {
          width: 100%;
          height: auto;
        }
      }

      &-nav {
        position: absolute;
        top: 38px;
        left: 55px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 15px;
        font-size: 22px;
        font-weight: 400;
        line-height: 25.52px;
        letter-spacing: 0.05em;
        opacity: 0;
        transition: opacity 0s ease-in;

        a {
          color: #727272;

          &:hover {
            color: #000000;
          }
        }
      }

      &-burger {
        width: 17px;
        position: relative;
        top: -340px;
        left: 50%;
        transform: translateX(-50%);
        transition: top 0.5s ease;

        &__line {
          margin-bottom: 2px;
          width: 14px;
          height: 2px;
          border-radius: 46px;
          background-color: #ffffff;
        }
      }
    }
  }

  &-mobile-menu-active {
    .menu {
      &__img {
        top: 0;

        svg {
          fill: #edededd4;
        }
      }

      &-nav {
        opacity: 1;
        transition: opacity 0.5s ease-out;
      }

      &-burger {
        position: relative;
        top: -62px;
      }
    }
  }

  &__button {
    text-transform: uppercase;
    background: linear-gradient(
          332deg,
          #dc5a0e 10%,
          #ff940c 30%,
          #ff5500 50%,
          #ff8400 70%,
          #ff511d 90%
        )
        padding-box,
      linear-gradient(262.84deg, #ff9370 22.62%, #9d300d 74.23%) border-box;
    border: 1px solid transparent;
    border-radius: 94px;
    width: 471px;
    height: 82px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 20.64px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    position: relative;
    transition: background 0.5s ease-in-out;
    background-size: 200% 200%;

    @media (max-width: 431px) {
      width: 345px;
      height: 60px;
      font-size: 22px;
      line-height: 18.92px;
    }

    div {
      position: absolute;
      left: 83%;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background-color: #ffffff;
      box-shadow: -4px 8px 10px 0px rgba(176, 45, 3, 1);
      display: flex;
      align-items: center;
      justify-content: center;

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

        img {
          width: 18.62px;
        }
      }

      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 0;
        height: 1.3px;
        border-radius: 2px;
        background-color: #000000;
        transition: width 0.5s ease, transform 0.3s ease;
        transform-origin: left center;
      }
      // Левая часть галочки
      &::before {
        top: 52%;
        left: 26%;
        transform: rotate(45deg);

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

      // Правая часть галочки
      &::after {
        top: 67%;
        left: 43%;
        transform: rotate(-45deg);
        transition-delay: 0.3s;
      }
    }

    &:hover {
      animation: gradientShift 13s infinite;

      @keyframes gradientShift {
        0% {
          background-position: 0% 0%, 0% 0%; /* Слева сверху */
        }
        50% {
          background-position: 100% 100%, 0% 100%; /* Вниз вправо */
        }
        70% {
          background-position: 100% 0%, 100% 100%; /* Вверх вправо */
        }
        85% {
          background-position: 0% 100%, 100% 0%; /* Вверх влево */
        }
        100% {
          background-position: 0% 0%, 0% 0%; /* Возвращаемся в начальную точку */
        }
      }

      div {
        img {
          display: none;
        }

        &::before {
          width: 14px;

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

        &::after {
          width: 27px;

          @media (max-width: 431px) {
            width: 22px;
          }
        }
      }
    }
    &:not(:hover) {
      div {
        &::before,
        &::after {
          transition: none;
        }
      }
    }
  }

  &-header {
    background-color: #eeeeee;
    padding: 32px 0;
    width: 100%;
    display: flex;
    justify-content: center;

    @media (max-width: 960px) {
      padding: 75px 0 59px 0;
    }

    .header {
      &-container {
        position: relative;

        @media (max-width: 960px) {
          width: 100%;
          display: flex;
          justify-content: center;
          z-index: 1;
        }
      }

      &-cube {
        position: absolute;
        top: -32px;
        left: -300px;

        @media (max-width: 960px) {
          top: -165px;
          left: auto;
          rotate: 25deg;
        }
      }

      &__logo {
        display: flex;
        flex-direction: row;
        column-gap: 24px;

        @media (max-width: 960px) {
          width: 100%;
          flex-direction: row-reverse;
          justify-content: space-around;
          img {
            &:nth-child(1) {
              width: 129px;
            }
            &:nth-child(2) {
              display: none;
            }
            &:nth-child(3) {
              width: 149px;
            }
          }
        }
      }

      &-nav {
        display: flex;
        flex-direction: row;
        column-gap: 55px;
        background-color: #fbfbfb;
        border: 1px solid #ffffff;
        margin-top: 40px;
        font-size: 17px;
        font-weight: 400;
        line-height: 19.72px;
        letter-spacing: 0.05em;
        border-radius: 49px;
        padding: 6px 39px;

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

        a {
          color: #727272;

          &:hover {
            color: #242424;
          }
        }
      }
    }
  }

  &-title {
    width: 100%;
    display: flex;
    background-color: #eeeeee;
    padding-top: 46px;
    justify-content: center;

    .title {
      &-container {
        position: relative;

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

      &-bg {
        &--top {
          position: absolute;
          top: 0;
          left: -43%;

          @media (max-width: 431px) {
            width: 233px;
            position: absolute;
            top: 86px;
            right: 0;
            left: auto;
            overflow: hidden;
          }
          img {
            @media (max-width: 431px) {
              width: 370px;
            }
          }
        }
        &--bottom {
          position: absolute;
          bottom: -70px;
          right: 0;

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

      &__name {
        max-width: 930px;
        color: #333333;
        font-family: "Soyuz Grotesk";
        font-size: 139px;
        font-weight: 700;
        line-height: 133.86px;
        position: relative;
        text-align: right;

        @media (max-width: 431px) {
          font-size: 85px;
          max-width: 393px;
          text-align: right;
          line-height: normal;
          padding-top: 40px;
        }

        span {
          color: #ced741;
          left: 0;
          top: -40px;
          position: absolute;

          @media (max-width: 431px) {
            font-size: 119px;
            top: -77px;
          }
        }

        p {
          font-size: 98px;
          line-height: 94.37px;

          @media (max-width: 431px) {
            font-size: 44px;
            line-height: normal;
            max-width: 393px;
          }
        }
      }

      &__header {
        font-family: "Highliner";
        font-size: 924px;
        font-weight: 400;
        line-height: 794.64px;
        color: #ffffff;
        position: relative;
        margin-top: -160px;

        @media (max-width: 431px) {
          font-size: 393px;
          line-height: normal;
          margin-top: 32px;
        }

        span {
          position: relative;
          z-index: 2;
        }

        .header {
          &__human {
            position: absolute;
            z-index: 1;
            left: 30%;
            bottom: 5%;

            @media (max-width: 431px) {
              width: 321px;
              left: 13%;
              bottom: 28%;
            }

            &-shadow {
              position: absolute;
              left: 52.5%;
              bottom: 0%;

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

            &-cube {
              position: absolute;
              z-index: 1;
              right: 5%;
              top: 15.6%;

              @media (max-width: 431px) {
                width: 112px;
                top: -3%;
              }
            }
          }
        }
      }
    }
  }

  &-description {
    .description {
      &-bg {
        position: absolute;
        left: 10%;
        top: 13%;

        @media (max-width: 431px) {
          width: 420px;
          left: 0;
          top: 10%;
          z-index: -1;
        }
      }

      &-container {
        background-image: url("assets/images/landingClub/bg1.webp");
        background-repeat: no-repeat;
        background-size: cover;
        height: 1200px;
        position: relative;
        z-index: 1;
        margin-top: -230px;
        padding-top: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 431px) {
          background-position-x: 25%;
          height: 1787px;
          margin-top: -173px;
          padding-top: 90px;
        }
      }

      &-subtitle {
        color: #ededed;
        font-family: "Soyuz Grotesk";
        font-size: 44px;
        font-weight: 700;
        line-height: 59.84px;
        position: relative;
        left: 80px;
        margin-bottom: 46px;

        @media (max-width: 431px) {
          line-height: 40.48px;
          position: static;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-bottom: 30px;

          p {
            max-width: 281px;
          }
        }
      }

      &-content {
        margin-top: 78px;
        display: flex;
        justify-content: center;
        column-gap: 49px;
        position: relative;

        @media (max-width: 431px) {
          margin-top: 55px;
          flex-direction: column;
          align-items: center;
        }

        &__cube {
          position: absolute;
          left: -170px;
          bottom: -95px;

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

        &__title {
          font-family: "Soyuz Grotesk";
          font-size: 139px;
          font-weight: 700;
          line-height: 133.86px;
          color: #ffffff;
          text-align: right;
          position: relative;
          top: -35px;

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

          span {
            color: #ced741;

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

        &__text {
          font-size: 19px;
          font-weight: 400;
          line-height: 22.04px;
          color: #ffffff;

          @media (max-width: 431px) {
            font-size: 23px;
            line-height: 31.08px;
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          p {
            max-width: 473px;

            @media (max-width: 431px) {
              max-width: 361px;
              text-align: center;
            }
          }
        }

        &__subjects {
          max-width: 550px;
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          margin-top: 48px;

          @media (max-width: 431px) {
            margin-top: 61px;
            padding-left: 21px;
          }

          .subject {
            font-size: 17px;
            font-weight: 400;
            text-align: center;
            color: #787878;
            padding: 4.5px 15.5px;
            background-color: #fbfbfb;
            border: 1px solid #ffffff;
            border-radius: 49px;

            @media (max-width: 431px) {
              font-size: 19px;
              padding: 3px 20px;
            }
          }
        }
      }
    }
  }

  &-mission {
    position: relative;
    .mission {
      &-bg-element {
        position: absolute;
        left: 20%;
        top: -170px;
        z-index: 1;

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

          left: -26px;
          top: -161px;
        }
      }

      &-bg {
        position: absolute;
        right: 0;
        top: 60px;
        z-index: 1;
        width: 573px;
        overflow: hidden;

        @media (max-width: 431px) {
          top: auto;
          right: auto;
          bottom: 13%;
          width: 100%;
          z-index: -1;
          display: flex;
          justify-content: center;

          img {
            width: 511px;
          }
        }
      }

      &-mobile-cube {
        display: none;
        width: 106px;
        overflow: hidden;

        @media (max-width: 431px) {
          display: block;
          position: absolute;
          right: 0;
          top: -182px;
          z-index: 2;
        }

        img {
          width: 231.51px;
        }
      }

      &-cube {
        position: absolute;
        right: 20%;
        top: -120px;
        z-index: 2;

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

      &-container {
        background-image: url("assets/images/landingClub/bg2.webp");
        background-repeat: no-repeat;
        background-size: cover;
        height: 1500px;
        position: relative;
        z-index: 1;
        margin-top: -300px;
        padding-top: 230px;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 431px) {
          margin-top: -69px;
          background-position-x: 72%;
          padding-top: 75px;
          height: 2365px;
        }
      }

      &-header {
        display: flex;
        justify-content: center;
        column-gap: 49px;
        position: relative;

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

        &__title {
          font-family: "Soyuz Grotesk";
          font-size: 133px;
          font-weight: 700;
          line-height: 118.07px;
          color: #e94e1c;
          position: relative;
          top: -145px;

          @media (max-width: 431px) {
            font-size: 127px;
            line-height: 112.74px;
            position: static;

            span {
              font-size: 101px;
              line-height: 89.66px;
            }
          }
        }

        &__text {
          font-size: 27px;
          font-weight: 300;
          line-height: 37.65px;
          color: #1e1e1e;
          max-width: 418px;
          margin-bottom: 71px;

          @media (max-width: 431px) {
            text-align: center;
            margin: 70px 0;

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

      &__subtitle {
        font-family: "Soyuz Grotesk";
        font-size: 44px;
        font-weight: 700;
        line-height: 59.84px;
        text-align: center;
        color: #333333;

        @media (max-width: 431px) {
          font-size: 34px;
          font-weight: 700;
          line-height: 46.24px;
        }

        span {
          color: #e94e1c;
        }
      }

      &-content {
        width: 911px;
        height: 324px;
        background: linear-gradient(
          139.77deg,
          rgba(255, 255, 255, 0.5) 17.22%,
          rgba(239, 239, 239, 0.5) 79.03%
        );
        border: 0.8px solid #ffffff;
        border-radius: 20px;
        box-shadow: 14px 18px 29.9px 0px #0000000f;
        margin-top: 43px;
        padding: 58px 38px 0 51px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 431px) {
          width: 392px;
          height: auto;
          padding: 47px 32px 64px 32px;
          gap: 66px;
        }

        &__subjects {
          display: flex;
          flex-wrap: wrap;
          column-gap: 80px;
          row-gap: 45px;

          @media (max-width: 431px) {
            row-gap: 54px;
          }

          .subject {
            display: flex;
            column-gap: 20px;
            align-items: center;

            &__img {
              width: 45.15px;
              height: 45.15px;
              border-radius: 50%;
              background: #ffffff;
              display: flex;
              justify-content: center;
              align-items: center;
              box-shadow: -4px 9px 10px 0px rgba(0, 0, 0, 0.1);

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

            &__text {
              font-size: 18px;
              font-weight: 350;
              line-height: 20.88px;
              color: #333333;

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

                font-size: 27px;
                font-weight: 350;
                line-height: 31.32px;

                span {
                  font-weight: 700;
                }
              }
            }
          }
        }
        .club__button {
          display: none;
          @media (max-width: 431px) {
            display: flex;
          }
        }
        &__button {
          text-transform: uppercase;
          background: linear-gradient(
                332deg,
                #dc5a0e 10%,
                #ff940c 30%,
                #ff5500 50%,
                #ff8400 70%,
                #ff511d 90%
              )
              padding-box,
            linear-gradient(262.84deg, #ff9370 22.62%, #9d300d 74.23%)
              border-box;
          border: 1px solid transparent;
          width: 367px;
          height: 64px;
          border-radius: 35px 35px 6px 6px;
          color: #ffffff;
          font-size: 17px;
          font-weight: 700;
          line-height: 14.62px;
          text-align: center;
          display: flex;
          align-items: center;
          flex-direction: row;
          justify-content: center;
          position: relative;
          transition: background 0.5s ease-in-out;
          background-size: 200% 200%;

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

          &::after {
            content: "";
            background-color: #b4b4b4;
            width: 383px;
            height: 74px;
            position: absolute;
            z-index: -1;
            top: -11px;
            border-radius: 35px 35px 0 0;
          }

          div {
            position: absolute;
            left: 83%;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: #ffffff;
            box-shadow: -4px 8px 10px 0px rgba(176, 45, 3, 1);
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 17px;
            }

            &::before,
            &::after {
              content: "";
              position: absolute;
              width: 0;
              height: 1.3px;
              border-radius: 2px;
              background-color: #000000;
              transition: width 0.5s ease, transform 0.3s ease;
              transform-origin: left center;
            }
            // Левая часть галочки
            &::before {
              top: 52%;
              left: 26%;
              transform: rotate(45deg);
            }

            // Правая часть галочки
            &::after {
              top: 67%;
              left: 43%;
              transform: rotate(-45deg);
              transition-delay: 0.3s;
            }
          }

          &:hover {
            animation: gradientShift 13s infinite;

            div {
              img {
                display: none;
              }

              &::before {
                width: 12px;
              }

              &::after {
                width: 22px;
              }
            }
          }
          &:not(:hover) {
            div {
              &::before,
              &::after {
                transition: none;
              }
            }
          }
        }
      }
    }
  }

  &-members {
    position: relative;
    .members {
      &-bg {
        position: absolute;
        left: 0;
        top: 40%;
        z-index: -1;

        @media (max-width: 431px) {
          width: 100%;
          z-index: 0;
          top: auto;
          bottom: 0;
          overflow: hidden;
        }
      }

      &-cube {
        display: none;

        @media (max-width: 431px) {
          width: 281px;
          display: block;
          position: absolute;
          top: 13%;
          left: 2%;
          rotate: -79deg;
        }
      }

      &-container {
        background-image: url("assets/images/landingClub/bg3.webp");
        background-repeat: no-repeat;
        background-size: cover;
        height: 1500px;
        position: relative;
        z-index: 1;
        margin-top: -450px;
        padding-top: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 431px) {
          background-image: url("assets/images/landingClub/bg3-mobile.webp");
          height: 1918px;
          padding-top: 522px;
          margin-top: -554px;
        }
      }

      &-header {
        position: relative;

        @media (max-width: 431px) {
          align-items: end;
          display: flex;
          flex-direction: column;
          padding: 0 25px;
        }

        &__subtitle {
          font-family: "Soyuz Grotesk";
          font-size: 44px;
          font-weight: 700;
          line-height: 59.84px;
          text-align: center;
          color: #ffffff;
          position: relative;
          bottom: -30px;

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

        &__title {
          font-family: "Soyuz Grotesk";
          font-size: 133px;
          font-weight: 700;
          line-height: 118.07px;
          text-align: center;
          color: #ced741;

          @media (max-width: 431px) {
            font-size: 101px;
            line-height: 89.66px;
            text-align: left;
            text-align-last: right;
          }
        }
      }

      &-content {
        display: flex;
        align-items: center;
        color: #333333;
        column-gap: 37px;
        margin-top: 108px;

        &__button {
          width: 45.15px;
          height: 45.15px;
          background-color: #ffffff;
          border-radius: 50%;
          box-shadow: 0 0 0 4px #a7ca604f;
          border: none;
          box-shadow: 0px 5px 10px 1px rgba(167, 202, 96, 0.3098039216);

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

          &--right {
            img {
              rotate: 180deg;
            }
          }
        }

        &-slider {
          width: 1000px;
          display: flex;
          align-items: center;
          column-gap: 26px;

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

          .swiper-wrapper {
            padding-bottom: 40px;
          }

          .slider {
            &-item {
              width: 302px;
              border: 1px solid transparent;
              background: linear-gradient(159.23deg, #ffffff 0%, #d9d9d9 75.83%)
                  padding-box,
                linear-gradient(159.81deg, #ffffff 0%, #b3b3b3 85.61%)
                  border-box;
              border-radius: 16px;
              padding: 11px 11px 70px 11px;
              position: relative;

              &::after {
                content: "";
                background-color: #1e1e1e;
                width: 83.66px;
                height: 69.03px;
                position: absolute;
                right: -3px;
                bottom: -3px;
                border-radius: 25px 0 0 0;
              }

              &__img {
                border: 1px solid transparent;
                background: linear-gradient(
                      159.23deg,
                      #ffffff 0%,
                      #ffffff 75.83%
                    )
                    padding-box,
                  linear-gradient(180deg, #fcfcfc 0%, #cccccc 100%) border-box;
                border-radius: 10px;
              }

              &-info {
                display: flex;
                justify-content: space-around;
                margin: 5.6px 0 20.9px 0;
              }

              &__title {
                font-size: 16px;
                font-weight: 700;
                line-height: 13.76px;
                text-align: center;
                padding: 10px 18px;
                background-color: #ffffff;
                border-radius: 284px;
              }

              &__subtitle {
                font-size: 16px;
                font-weight: 350;
                line-height: 13.76px;
                text-align: center;
                padding: 10px 26px;
                background-color: #ffffff;
                border-radius: 284px;
              }

              &__text {
                font-size: 16px;
                font-weight: 300;
                line-height: 22.08px;
                text-align: left;
              }

              &__arrow {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                bottom: 0;
                z-index: 1;
                right: 0;
                width: 68.66px;
                height: 54.03px;
                border-radius: 25px 16px 16px 16px;
                border: 0.8px solid transparent;
                background: linear-gradient(
                      128.96deg,
                      #ced741 8.97%,
                      #a5ac2d 100.06%
                    )
                    padding-box,
                  linear-gradient(127.63deg, #fff4d0 0%, #607536 99.53%)
                    border-box;
                box-shadow: 0px 6px 20px -7px #a7ca60;
              }

              &--end {
                width: 302px;
                height: 448px;
                border: 1px solid transparent;
                background: linear-gradient(180deg, #ced741 0%, #a5ac2d 100%)
                    padding-box,
                  linear-gradient(180deg, #fcfcfc 0%, #cccccc 100%) border-box;
                border-radius: 16px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;

                &__img {
                  position: absolute;
                  top: 38px;
                }

                &__title {
                  font-family: "Soyuz Grotesk";
                  font-size: 44px;
                  font-weight: 700;
                  line-height: 47.52px;
                  text-align: center;
                  margin-bottom: 24px;
                  z-index: 1;
                }

                &__button {
                  width: 245px;
                  height: 54px;
                  border: 1px solid transparent;
                  background: linear-gradient(
                        128.96deg,
                        #ffffff 8.97%,
                        #dedede 100.06%
                      )
                      padding-box,
                    linear-gradient(127.63deg, #ffffff 0%, #eeeeee 99.53%)
                      border-box;
                  border-radius: 55px;
                  font-size: 17px;
                  font-weight: 700;
                  line-height: 14.62px;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }
  }

  &-event {
    .event {
      &-cube {
        position: absolute;
        right: 0;
        top: 230px;
        filter: blur(4px);

        @media (max-width: 431px) {
          width: 201px;
          overflow: hidden;
          top: 110px;

          img {
            width: 300px;
            rotate: 85deg;
          }
        }
      }

      &-container {
        background-image: url("assets/images/landingClub/bg4.webp");
        background-repeat: no-repeat;
        background-size: cover;
        height: 1900px;
        position: relative;
        z-index: 1;
        margin-top: -210px;
        padding-top: 140px;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 431px) {
          margin-top: -312px;
          padding-top: 245px;
          height: 4155px;
          background-image: url("assets/images/landingClub/bg4-mobile.webp");
        }
      }

      &-header {
        &__subtitle {
          font-family: "Soyuz Grotesk";
          font-size: 44px;
          font-weight: 700;
          line-height: 59.84px;
          text-align: center;
          color: #333333;

          @media (max-width: 431px) {
            line-height: 44px;
            text-align: left;
            display: block;
            max-width: 225px;
            margin-bottom: 38px;
          }
        }

        &__title {
          font-family: "Soyuz Grotesk";
          font-size: 133px;
          font-weight: 700;
          line-height: 118.07px;
          text-align: center;
          color: #e94e1c;

          @media (max-width: 431px) {
            font-size: 55px;
            font-weight: 700;
            line-height: 48.83px;
          }
        }
      }

      &-content {
        display: flex;
        column-gap: 60px;
        margin-top: 60px;
        color: #333333;

        @media (max-width: 431px) {
          flex-direction: column;
          margin-top: 0;
        }

        .content {
          &__title {
            font-family: "Soyuz Grotesk";
            font-size: 94px;
            font-weight: 700;
            line-height: 127.84px;
            position: relative;
            top: 80px;

            span {
              font-size: 44px;
              line-height: 59.84px;
              position: relative;
              top: -81px;
            }

            img {
              position: relative;
              top: -12px;

              @media (max-width: 431px) {
                width: 36px;
                height: 39px;
                margin-left: 23px;
              }
            }
          }

          &-tomorrow {
            @media (max-width: 431px) {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              flex-wrap: wrap;
              align-content: center;
            }

            .tomorrow {
              &-item {
                width: 328px;
                border: 1px solid transparent;
                background: linear-gradient(
                      159.23deg,
                      #ffffff 0%,
                      #d9d9d9 75.83%
                    )
                    padding-box,
                  linear-gradient(159.81deg, #ffffff 0%, #b3b3b3 85.61%)
                    border-box;
                border-radius: 16px;
                padding: 12px 12px 70px 12px;
                position: relative;

                @media (max-width: 431px) {
                  width: 383.81px;
                  padding: 14px 14px 70px 14px;
                }

                &::after {
                  content: "";
                  background-color: #e0e0e0;
                  width: 83.66px;
                  height: 69.03px;
                  position: absolute;
                  right: -3px;
                  bottom: -3px;
                  border-radius: 25px 0 0 0;
                }

                &__img {
                  border: 1px solid transparent;
                  background: linear-gradient(
                        159.23deg,
                        #ffffff 0%,
                        #ffffff 75.83%
                      )
                      padding-box,
                    linear-gradient(180deg, #fcfcfc 0%, #cccccc 100%) border-box;
                  border-radius: 10px;
                  width: 100%;
                }

                &-info {
                  display: flex;
                  justify-content: space-around;
                  margin: 5.6px 0 20.9px 0;

                  @media (max-width: 431px) {
                    margin: 17px 0 10px 0;
                    justify-content: space-between;
                  }
                }

                &__title {
                  font-size: 16px;
                  font-weight: 700;
                  line-height: 13.76px;
                  text-align: center;
                  padding: 10px 18px;
                  background-color: #ffffff;
                  border-radius: 284px;

                  @media (max-width: 431px) {
                    padding: 11px 17px;
                    font-size: 20px;
                    line-height: 17.2px;
                  }
                }

                &__subtitle {
                  font-size: 16px;
                  font-weight: 350;
                  line-height: 13.76px;
                  text-align: center;
                  padding: 10px 26px;
                  background-color: #ffffff;
                  border-radius: 284px;

                  @media (max-width: 431px) {
                    padding: 12px 33px;
                    font-size: 20px;
                    line-height: 17.2px;
                  }
                }

                &__text {
                  font-size: 16px;
                  font-weight: 300;
                  line-height: 22.08px;
                  text-align: left;

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

                &__arrow {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  position: absolute;
                  bottom: 0;
                  z-index: 1;
                  right: 0;
                  width: 68.66px;
                  height: 54.03px;
                  border-radius: 25px 16px 16px 16px;
                  border: 0.8px solid transparent;
                  background: linear-gradient(
                        128.96deg,
                        #fb3d00 8.97%,
                        #ff7244 100.06%
                      )
                      padding-box,
                    linear-gradient(127.63deg, #ffffff 0%, #be370b 99.53%)
                      border-box;
                  box-shadow: 0px 6px 20px -6px #d54314;
                }

                &--end {
                  width: 302px;
                  height: 448px;
                  border: 1px solid transparent;
                  background: linear-gradient(180deg, #ced741 0%, #a5ac2d 100%)
                      padding-box,
                    linear-gradient(180deg, #fcfcfc 0%, #cccccc 100%) border-box;
                  border-radius: 16px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  position: relative;

                  &__img {
                    position: absolute;
                    top: 38px;
                  }

                  &__title {
                    font-family: "Soyuz Grotesk";
                    font-size: 44px;
                    font-weight: 700;
                    line-height: 47.52px;
                    text-align: center;
                    margin-bottom: 24px;
                    z-index: 1;
                  }

                  &__button {
                    width: 245px;
                    height: 54px;
                    border: 1px solid transparent;
                    background: linear-gradient(
                          128.96deg,
                          #ffffff 8.97%,
                          #dedede 100.06%
                        )
                        padding-box,
                      linear-gradient(127.63deg, #ffffff 0%, #eeeeee 99.53%)
                        border-box;
                    border-radius: 55px;
                    font-size: 17px;
                    font-weight: 700;
                    line-height: 14.62px;
                    text-align: center;
                  }
                }
              }
            }
          }

          &-month {
            .month {
              &-container {
                display: flex;
                flex-direction: column;
                row-gap: 12px;

                @media (max-width: 431px) {
                  row-gap: 18px;
                }
              }

              &-item {
                width: 580px;
                background-color: #d9d9d9;
                border: 1px solid #e9e9e9;
                display: flex;
                align-items: center;
                padding: 7px 29px 7px 7px;
                column-gap: 24px;
                border-radius: 10px;

                @media (max-width: 431px) {
                  width: 384px;
                  padding: 10px 10px 35px 10px;
                  flex-direction: column;
                  justify-content: center;
                }

                &__img {
                  border: 1px solid transparent;
                  background: linear-gradient(
                        159.23deg,
                        #ffffff 0%,
                        #ffffff 75.83%
                      )
                      padding-box,
                    linear-gradient(180deg, #fcfcfc 0%, #cccccc 100%) border-box;
                  border-radius: 10px;
                  width: 196px;

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

                &-info {
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 13.76px;
                  text-align: center;
                  column-gap: 16px;
                  display: flex;
                  align-items: center;
                  margin-bottom: 21px;

                  @media (max-width: 431px) {
                    margin: 27px 0 30px 0;
                    column-gap: 39px;
                    padding: 0 11px;
                    font-size: 21px;
                    line-height: 18.06px;
                  }
                }

                &__date {
                  display: flex;
                  align-items: center;
                  column-gap: 9px;

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

                  img {
                    width: 15px;
                    height: 16px;

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

                &__position {
                  display: flex;
                  align-items: center;
                  column-gap: 9px;

                  img {
                    width: 12px;
                    height: 16px;

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

                &__title {
                  font-size: 21px;
                  font-weight: 700;
                  line-height: 18.06px;

                  @media (max-width: 431px) {
                    font-size: 27px;
                    line-height: 29.16px;
                    padding: 0 11px;
                  }
                }

                &__text {
                  font-size: 16px;
                  font-weight: 300;
                  line-height: 16.32px;

                  @media (max-width: 431px) {
                    font-size: 21px;
                    line-height: 26.25px;
                    padding: 0 11px;
                  }
                }
              }
            }
          }
        }
      }

      &-text {
        font-size: 27px;
        font-weight: 300;
        line-height: 37.65px;
        color: #1e1e1e;
        margin: 48px 0 30px 0;

        @media (max-width: 431px) {
          text-align: center;

          span {
            font-weight: 500;
            text-align: center;
          }
        }
      }
    }
  }

  &-news {
    position: relative;
    .news {
      &-bg {
        position: absolute;
        right: 0;
        top: 48%;
        z-index: -1;

        @media (max-width: 431px) {
          overflow: hidden;
          width: 703px;
          top: 31%;

          img {
            position: relative;
            right: -85px;
          }
        }
      }

      &-cube {
        position: absolute;
        bottom: -121px;
        right: 22.3%;
        width: 173px;
        z-index: 2;
        rotate: 265deg;

        @media (max-width: 431px) {
          right: auto;
          left: -17%;
        }
      }

      &-container {
        background: url("assets/images/landingClub/bg5.webp");
        background-repeat: no-repeat;
        background-size: cover;
        height: 1400px;
        position: relative;
        z-index: 1;
        margin-top: -430px;
        padding-top: 460px;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 431px) {
          margin-top: -540px;
          padding-top: 500px;
          height: 1862px;
          background-image: url("assets/images/landingClub/bg5-mobile.webp");
        }
      }

      &-header {
        position: relative;

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

        &__subtitle {
          font-family: "Soyuz Grotesk";
          font-size: 44px;
          font-weight: 700;
          line-height: 59.84px;
          text-align: center;
          color: #ededed;
          position: relative;
          bottom: -25px;

          @media (max-width: 431px) {
            line-height: 44px;
            text-align: left;
            position: static;
            max-width: 280px;
          }
        }

        &__title {
          font-family: "Soyuz Grotesk";
          font-size: 133px;
          font-weight: 700;
          line-height: 118.07px;
          text-align: center;
          color: #e94e1c;

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

      &-content {
        display: flex;
        align-items: center;
        color: #333333;
        column-gap: 37px;
        margin-top: 108px;

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

        &__button {
          width: 45.15px;
          height: 45.15px;
          background-color: #ffffff;
          border-radius: 50%;
          box-shadow: 0 0 0 4px #a7ca604f;
          border: none;
          box-shadow: 0px 5px 10px 1px rgba(233, 78, 28, 0.31);

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

          &--right {
            img {
              rotate: 180deg;
            }
          }
        }

        &-slider {
          display: flex;
          align-items: center;
          column-gap: 23px;
          width: 1000px;

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

          .slider {
            &-item {
              width: 496px;
              border: 1px solid transparent;
              background: linear-gradient(159.23deg, #ffffff 0%, #d9d9d9 75.83%)
                  padding-box,
                linear-gradient(159.81deg, #ffffff 0%, #b3b3b3 85.61%)
                  border-box;
              border-radius: 16px;
              padding: 12px 12px 32px 12px;
              position: relative;
              color: #333333;

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

              &__img {
                border: 1px solid transparent;
                background: linear-gradient(
                      159.23deg,
                      #ffffff 0%,
                      #ffffff 75.83%
                    )
                    padding-box,
                  linear-gradient(180deg, #fcfcfc 0%, #cccccc 100%) border-box;
                border-radius: 10px;
                width: 100%;
              }

              &__title {
                font-size: 23px;
                font-weight: 700;
                line-height: 19.78px;
                margin: 23px 0 23px 0;

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

              &__text {
                font-size: 16px;
                font-weight: 300;
                line-height: 16.32px;

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

      &__subtitle {
        font-family: "Soyuz Grotesk";
        font-size: 133px;
        font-weight: 700;
        line-height: 118.07px;
        text-align: center;
        color: #e0e0e0;
        position: absolute;
        bottom: -36px;

        @media (max-width: 431px) {
          font-size: 117px;
          line-height: 103.87px;
          margin: 60px 0;
          position: relative;
          bottom: auto;
          color: #ececec;
          z-index: 2;
        }
      }
    }
  }

  &-footer {
    .footer {
      &-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 145px;
        overflow: hidden;

        @media (max-width: 431px) {
          width: 100%;
          height: auto;
          bottom: auto;
          top: -29%;
        }

        img {
          width: 703px;

          @media (max-width: 431px) {
            position: relative;
            width: 811px;
            left: -92%;
          }
        }
      }

      &-cube {
        position: absolute;
        bottom: 0;
        right: 8%;
        overflow: hidden;

        @media (max-width: 431px) {
          width: 142px;
          right: 0;
          bottom: 41%;
        }
      }

      &-container {
        background-color: #e0e0e0;
        position: relative;
        display: flex;
        z-index: 1;
        padding: 42px 0 42px 340px;
        column-gap: 90px;

        @media (max-width: 431px) {
          padding: 62px 38px 45px 49px;
          flex-direction: column;
        }
      }

      &-logo {
        display: flex;
        flex-direction: column;
        row-gap: 50px;
        z-index: 1;

        @media (max-width: 431px) {
          align-items: flex-end;
        }

        img {
          width: 245px;

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

        &--sub {
          row-gap: 12px;
          display: flex;
          flex-direction: column;

          img:nth-child(1) {
            width: 66px;
          }

          img:nth-child(2) {
            width: 251px;
          }
        }
      }

      &-nav {
        display: flex;
        flex-direction: column;
        row-gap: 8px;

        @media (max-width: 431px) {
          margin: 73px 0 51px 0;
          row-gap: 26px;
        }

        a {
          font-size: 20px;
          font-weight: 400;
          line-height: 23.2px;
          letter-spacing: 0.01em;
          color: #333333;

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

          &:hover {
            color: #000000;
          }
        }
      }

      &-content {
        @media (max-width: 431px) {
          display: flex;
          flex-direction: column;
        }

        span {
          font-family: "Soyuz Grotesk";
          font-size: 20px;
          font-weight: 700;
          line-height: 20.2px;
          color: #e94e1c;

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

        .content {
          &__social-icons {
            display: flex;
            column-gap: 15px;
            margin: 26px 0 18px 0;

            @media (max-width: 431px) {
              margin: 31px 0 58px 0;
              column-gap: 29px;
            }

            .social-icon {
              border: 0.8px solid #ffffff;
              background: linear-gradient(
                139.77deg,
                rgba(255, 255, 255, 0.5) 17.22%,
                rgba(239, 239, 239, 0.5) 79.03%
              );
              border-radius: 20px;
              width: 109px;
              height: 87px;
              display: flex;
              align-items: center;
              justify-content: center;

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

          &__link {
            font-size: 13px;
            font-weight: 300;
            line-height: 15.08px;
            letter-spacing: 0.01em;
            color: #333333;
            margin-right: 19px;

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