* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Inter", sans-serif;

}

:root {
  --title-font: 'HelveticaNeueCyr';
  --title-fw: 500;
}

.mainscreen {
  position: relative;
}

.mainscreen-hero {
  position: relative;
  min-height: 512px;

  & .mainscreen-hero__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 512px;

    & img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }

  & .mainscreen-hero__logo {
    margin-top: 16px;
    margin-bottom: 94px;
  }

  & .mainscreen-hero__info {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;

    & .mainscreen-hero__info-title {
      color: var(--Core-Additional-surface, #FFF);
      text-align: center;
      font-family: var(--title-font);
      font-size: 56px;
      font-style: normal;
      /* font-weight: 550; */
      line-height: 64px;
      margin-bottom: 16px;

      @media(max-width: 768px) {
        font-size: 48px;
        line-height: 56px;
      }
    }

    & .mainscreen-hero__info-subtitle {
      color: var(--Core-Core-surface, #F4F5FD);
      text-align: center;
      font-size: 20px;
      font-style: normal;
      font-weight: 700;
      line-height: 28px;
      margin-bottom: 32px;
      letter-spacing: -0.8px;
    }

    & .btn {
      color: var(--Core-Content-hard, #232332);
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 24px;
      letter-spacing: -0.64px;
      padding: 16px 32px;
      border-radius: 32px;
      background: var(--Yellow, #E6F355);
      text-decoration: none;
    }
  }
}

.mainscreen-form__section {
  position: relative;
  background-color: #313FFE;
  height: 915px;

  &::before {
    content: '';
    position: absolute;
    top: -10%;
    background-color: inherit;
    left: 0;
    border-radius: 96px 96px 0px 0px;
    height: 96px;
    width: 100%;

    @media(max-width:768px) {
      border-radius: 40px 40px 0px 0px;
      height: 48px;
      top: -5%;
    }
  }

  @media(max-width: 1150px) {
    height: 772px;
  }

  @media(max-width: 768px) {
    height: 720px;
  }

    @media(max-width: 390px) {
    height: 772px;
  }


  & .mainscreen-form__inner {
    height: 100%;
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;

    @media(max-width: 1250px) {
      padding-left: 16px;
      padding-right: 16px;
    }

    @media(max-width: 1150px) {
      justify-content: center;
      align-items: flex-start;
      padding-top: 40px;
    }
  }

  & .form-decor {
    max-width: 938px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 92px;

    & img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      transform: scale(1.5);

      @media(max-width: 1250px) {
        transform: scale(1.4);
      }

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

  & .form {
    padding: 40px 24px;
    border-radius: 24px;
    box-shadow: 0px 15px 20px 0px rgba(110, 110, 132, 0.10);
    background-color: #232332;
    position: relative;
    z-index: 3;
    max-width: 589px;
    width: 100%;

    & .form-title {
      color: var(--Core-Core-surface, #F4F5FD);
      font-family: 'HelveticaNeueCyr';
      font-size: 40px;
      font-style: normal;
      line-height: 48px;
      margin-bottom: 8px;
    }

    & .form-subtitle {
      color: var(--Core-Core-surface, #F4F5FD);
      font-variant-numeric: lining-nums proportional-nums;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 28px;
      margin-bottom: 24px;
      letter-spacing: -0.8px;
    }

    /* & .input-wrap {
      height: 52px;
      width: 100%;
      border-radius: 8px;
      background: var(--Core-Core-surface, #F4F5FD);
      overflow: hidden;
      margin-bottom: 16px;

      & input {
        display: block;
        width: 100%;
        height: 100%;
        padding-left: 16px;

        &::placeholder {
          color: var(--Core-Content-low, #6E6E84);
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px;
          letter-spacing: -0.28px;
          &:last-of-type {
            color: red;
          }
        }
      }

      & select {
        display: block;
        width: 100%;
        height: 100%;
        padding-left: 16px;
      }
    } */

    & .submit {
      border-radius: 8px;

      background: var(--Positive-P-Surface-hard-P-Content, #22CD48);
      color: var(--Opposite-core-O-Core-Content-Hard, #FFF);
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: -0.28px;
      cursor: pointer;
      padding: 8px 12px;
      width: 100%;
      border: none;
      outline: none;
    }

    & .submit[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}

.input-wrap {
  margin-bottom: 16px;

  .field {
    position: relative;
    height: 52px;
    background: var(--Core-Core-surface, #F4F5FD);
    border-radius: 8px;
    overflow: hidden;

    input,
    select {
      width: 100%;
      height: 100%;
      padding: 16px;
      padding-top: 18px;
      font-size: 14px;
      font-weight: 400;
      border: none;
      background: transparent;
      appearance: none;
    }

    select:invalid {
      color: var(--Core-Content-low, #6E6E84);
    }

    label {
      position: absolute;
      left: 16px;
      top: 16px;
      color: var(--Core-Content-low, #6E6E84);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      pointer-events: none;
      transition: all 0.2s ease;
    }

    .required {
      color: red;
    }


    input:focus+label,
    input:not(:placeholder-shown)+label,
    select:focus+label,
    select:valid+label {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-5px);
    }

    &.select-wrapper {
      position: relative;

      .custom-arrow {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.mainscreen-inner {
  position: relative;
}

.counter {
  position: absolute;
  bottom: 40px;
  max-width: 1200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-radius: 90px;
  background: var(--Black, #15151F);
  height: 112px;

  @media(max-width: 1250px) {
    max-width: calc(100vw - 32px);
  }

  @media(max-width: 768px) {
    padding: 24px;
    height: 80px;
  }

  & .counter-text {
    color: var(--Yellow, #E6F355);
    font-family: var(--title-font);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;

    @media(max-width: 768px) {
      font-size: 20px;
    }
  }

  & .counter-time {
    color: var(--Yellow, #E6F355);
    font-family: var(--title-font);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;

    @media(max-width: 768px) {
      font-size: 20px;
    }
  }
}



@font-face {
  font-family: 'HelveticaNeueCyr';
  src: url('../fonts/helveticaneuecyr_black.otf');
  src: local('HelveticaNeueCyr Black'), local('HelveticaNeueCyr-Black'),
    url('../fonts/helveticaneuecyr_black.otf?#iefix') format('embedded-opentype'),
    url('../fonts/helveticaneuecyr_black.otf') format('otf'),
    url('../fonts/helveticaneuecyr_black.otf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'HelveticaNeueCyr';
  src: url('../fonts/helveticaneuecyr_roman.otf');
  src: local('HelveticaNeueCyr Roman'), local('HelveticaNeueCyr-Roman'),
    url('../fonts/helveticaneuecyr_roman.otf?#iefix') format('embedded-opentype'),
    url('../fonts/helveticaneuecyr_roman.otf') format('otf'),
    url('../fonts/helveticaneuecyr_roman.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'HelveticaNeueCyr';
  src: url('../fonts/helveticaneuecyr_thin.otf');
  src: local('HelveticaNeueCyr Thin'), local('HelveticaNeueCyr-Thin'),
    url('../fonts/helveticaneuecyr_thin.otf?#iefix') format('embedded-opentype'),
    url('../fonts/helveticaneuecyr_thin.otf') format('otf'),
    url('../fonts/helveticaneuecyr_thin.otf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'HelveticaNeueCyr';
  src: url('../fonts/helveticaneuecyr_ultralight.otf');
  src: local('HelveticaNeueCyr UltraLight'), local('HelveticaNeueCyr-UltraLight'),
    url('../fonts/helveticaneuecyr_ultralight.otf?#iefix') format('embedded-opentype'),
    url('../fonts/helveticaneuecyr_ultralight.otf') format('otf'),
    url('../fonts/helveticaneuecyr_ultralight.otf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'HelveticaNeueCyr';
  src: url('../fonts/helveticaneuecyr_ultralightitalic.otf');
  src: local('HelveticaNeueCyr UltraLight Italic'), local('HelveticaNeueCyr-UltraLightItalic'),
    url('../fonts/helveticaneuecyr_ultralightitalic.otf?#iefix') format('embedded-opentype'),
    url('../fonts/helveticaneuecyr_ultralightitalic.otf') format('otf'),
    url('../fonts/helveticaneuecyr_ultralightitalic.otf') format('truetype');
  font-weight: 100;
  font-style: italic;
}