:root{
    --container-size: 640px;
    --containerForm-size: 480px;
    /* Страница */
    --body-bg: rgb(255, 255, 255);
    --contentBlock-color: black;
    /* Меню */
    --navbar-bg: #121212;
    --navbarBtn-hover: #39B54A33;
    --navbarClose-hover: #39B54A;
    --nvabarClose-bg: #d9d9d9;
    /*Шапка */
    --header-bg: rgb(255, 255, 255);
    /* Текст в шапке */
    --header-top-color:#1F7A32;
    /* Бургер кнопка */
    --burger-color: #39B54A;
    /* Лого */
    --logo-primary: #2D2D2A;
    --logo-secondary: #39B54A;
    --lang-color: #2D2D2A;
    --lang-border-color: #39B54A;
    --lang-activeColor: #39B54A;
    /* Блок шагов */
    --steps-text-color:#39B54A;
    --step-color: rgb(220, 218, 218);
    --step-colorActive: #39B54A;
    /* Блок шагов версия №2 */
    --steps2-bgActive: #39B54A;
    --steps2-borderActive:#ffffff;
    --steps2-bg: #2D2D2A;
    --steps2-border:#2D2D2A;
    --steps2-titleActiveColor: white;
    --steps2-textActiveColor: #ffffff;
    --steps2-titleColor: hsl(0, 0%, 100%);
    --steps2-textColor: #000000;
    --steps2-childBg: #39B54A;

    /* Форма */
    --form-bg: #d2e2df;
    --formTitle-color:#39B54A;
    --input-bg: white;
    --inputBorder-color:#39B54A;
    --inputIcon-color:#39B54A;
    --inputActiveIcon-color:#39B54A;
    --inputText-color: #39B54A;
    --inputPrefix-color: #39B54A;
    --failedAlert-bg:#fc5b53;
    --failedAlert-color:rgb(255, 255, 255);
    --inputFailedCheck-color:#39B54A;
    --inputActiveCheck-color: #39B54A;
    --validSvg-checked: #39B54A;

    /* Кнопка */
    --btn-bg: #39B54A;
    --btn-color: white;
    --btnDisable-bg: #a6a4a4;
    --btnDisable-color: #7d7f80;

    /*  */
    --bottomText-color:#2D2D2A;
    --bottomCheck-color:#39B54A;

    /*  */
    --btnExit-color: #2D2D2A;

    /* Footer */
    --footerBorder-color: #ffffff;
    --footer-bg: #ffffff;
    --footerText-color: black;
    --footerTextLinks-color: #39B54A;

    /*  */
    --sectionTitle-color:#39B54A;
    --sectionText-color: #000000;

    /* How Works Blocks */
    --howWorksTitle: #39B54A;
    --howWorksBlocks-bg:#ffffff;
    --howWorksBlocks-border:#39B54A;
    --howWorksBlocksTitle: #39B54A;
    --howWorksBlocksNumber-bg: #39B54A;
    --howWorksBlocksNumberText: #ffffff;
    --howWorksBlocksNumber-border: #39B54A;
    --howWorksBlockText-color: #000000;

    /* Easy Us Blocks */
    --easyUsTitle-color:#39B54A;
    --easyUsBlockTitle-color:#39B54A;
    --easyUsBlockText-color:#000000;

    /* Popular Features Blocks */
    --popularFeaturesTitle: #000000;
    --popular-border: #39B54A;
    --popular-bg: #ffffff;
    --popular-title-bg: #ffffff;
    --popular-title-color: #39B54A;
    --popular-text-color: #000000;
    --popular-btn-color: #39B54A;
    --popular-btn-hover: #39B54A;
    --popular-icon-fill: #ffffff;
    --popular-icon-border: #39B54A;

    /* Fit sub Blocks */
    --fitSupTitle-color: black;
    --fitSupBlock-bg: #ffffff;
    --fitSupBlock-border: #39B54A;
    --fitSupBlockLine-bg: #39B54A;
    --fitSupBlockTitle-color:#39B54A;
    --fitSupBlockText-color:#7E8189;


    /* every_sub */
    --everySubTitle-color:#222222;
    --every-bg: #ffffff;
    --every-border: #39B54A;
    --every-text-color: #222222;
    --every-icon-bg:#39B54A;

    /* simple_sub */
    --simpleTitle-color:rgb(0, 0, 0);
    --simple-subtitle-color: #39B54A;
    --simple-bg: #ffffff;
    --simple-border: #39B54A;
    --simple-title-color: #222222;
    --simple-price-color: #39B54A;
    --simple-text-color: #777777;

    /* faq */
    --faqTitle-color: #222222;
    --faq-title-bg: #ffffff;
    --faq-title-color: #222222;
    --faq-border: #39B54A;
    --faq-text-color: #222222;
    --faq-text-bg: #ffffff;
    --faq-arrow-color: #39B54A;

    /* ready */
    --ready-bg: #E8F8EC;
    --ready-text-color: #222222;
    --ready-title-color: #39B54A;
    --ready-subtitle-color: #444444;
    --ready-btn-bg: #39B54A;
    --ready-btn-color: #ffffff;
    --ready-btn-hover: #2E8B3D;
}

.header-top{
    display: none;
}



.popular_feat_icon{
    border: solid 3px var(--popular-icon-border);
    background: #39B54A;
    border-radius: 100px;

}

.stepBlock {
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  .steps {
    color: var(--steps-text-color);
    font-size: 12px;
    line-height: 1.18;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 28px;
  }

  .steps:after {
    content: "";
    display: table;
    clear: both;
  }

  .step {
    float: left;
    width: calc(50% - 4px);
    height: 8px;
    background: var(--step-color);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
  }

  .step + .step {
    margin-left: 8px;
  }

  .step:after {
    content: "";
    display: block;
    border-radius: 2px;
    width: 8px;
    height: 8px;
    background: var(--step-colorActive);
    transition: 0.5s ease;
  }


  .step + .step:after {
    content: none;
  }

  .step.filled + .step:after {
    content: "";
  }

.contentBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--contentBlock-color);
    margin-bottom: 1rem;
    max-width: var(--container-size);
    margin: 0 auto;
  }

  .contentBlock .subtitle {
    font-size: 1.4rem;
    line-height: 1.18;
    font-weight: 500;
    margin-bottom: 2rem;
  }

  .contentBlock .main-title {
    font-size: 1.6rem;
    line-height: 1.18;
    font-weight: 900;
    margin-bottom: 1rem;
  }

  .mainLogo {
    font-family: 'Roboto', sans-serif;
    max-width: 30rem;
    margin-bottom: 1rem;
}

.mainLogo img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

    .formBlock{
        max-width: var(--containerForm-size);
        margin: 0 auto;
        text-align: center;
    }

    .form-valid {
        margin: 1rem auto;
        padding: 0.5rem;
        width: 100%;
        box-sizing: border-box;
    }

    .title {
        color: var(--formTitle-color);
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 2rem;
    }

    .field:focus-within {
        animation: none;
    }

    .containerField{}

    .field {
        width: 100%;
        position: relative;
        margin: 2rem auto;
        margin-bottom: 1rem;
    }

    .fieldPin{
        width: 100%;
        position: relative;
        margin: 0 auto;
        margin-bottom: 1rem;
    }

    .field-input {
        display: block;
        width: 100%;
        height: 64px;
        background: var(--input-bg);
        border: 2px solid var(--inputBorder-color);
        border-radius: 8px;
        padding: 0 38px 0 91px;
        direction: ltr;
        color: var(--inputText-color);
        font-size: 24px;
        letter-spacing: 2px;
        transition: 0.5s ease;
        box-sizing: border-box;
    }

    .field-input.pin {
        height: 82px;
        text-align: center;
        letter-spacing: 16px;
        font-size: 3rem;
        padding: 0;
    }

    .field-input__prefix {
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 40px;
        color: var(--inputPrefix-color);
        font-size: 24px;
        line-height: 66px;
        letter-spacing: 2px;
        animation: shake 3s;
        -webkit-animation: shake 3s;
    }

    @keyframes shake {

        10%,
        90% {
            transform: translate3d(-1px, 0, 0);
            -webkit-transform: translate3d(-1px, 0, 0);
        }
    
        20%,
        80% {
            transform: translate3d(2px, 0, 0);
            -webkit-transform: translate3d(2px, 0, 0);
        }
    
        30%,
        50%,
        70% {
            transform: translate3d(-4px, 0, 0);
            -webkit-transform: translate3d(-4px, 0, 0);
        }
    
        40%,
        60% {
            transform: translate3d(4px, 0, 0);
            -webkit-transform: translate3d(4px, 0, 0);
        }
    }


    .field-icon {
        position: absolute;
        top: 20px;
        left: 14px;
        fill: var(--inputIcon-color);
        pointer-events: none;
        transition: 0.5s ease;
    }

    .field-check {
        position: absolute;
        top: 20px;
        right: 14px;
        width: 25px;
        height: 25px;
        fill: var(--inputFailedCheck-color);
        pointer-events: none;
        transition: 0.5s ease;
    }

    .field-check.active {
        fill: var(--inputActiveCheck-color);
    }

    .field-label {
        position: absolute;
        top: 20px;
        left: 40px;
        font-size: 24px;
        line-height: 1;
        pointer-events: none;
        transition: 0.5s ease;
    }

    .rtl-text .field-label {
        left: auto;
        right: 40px;
    }

    .field-error {
        color: red;
        text-align: left;
        margin-top: 8px;
        display: none;
    }

    .rtl-text .field-error {
        text-align: right;
    }

    .field-alert {
        position: absolute;
        left: 50%;
        bottom: 100%;
        margin-bottom: 14px;
        margin-left: -135px;
        width: 270px;
        background: var(--failedAlert-bg);
        border-radius: 4px;
        padding: 3px 5px;
        color: var(--failedAlert-color);
        font-size: 14px;
        animation: shake 5s ease-in-out 5 both;
        display: none;
    }

    .field-alert:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -10px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid red;
    }

    .field-alert.active {
         display: block;
    }

    .field-input:focus,
    .field-input.focus {
        border-color: var( --inputBorder-color);
        outline: none;
        box-shadow: none;
    }

    .field-input:focus~.field-input__prefix .field-icon,
    .focus .field-icon {
        fill: var(--inputActiveIcon-color);
    }

    .field-input:focus~.field-label,
    .focus~.field-label {
        top: -9px;
        left: 32px;
        background: #ffffff;
        padding: 2px 8px;
        color: var(--inputText-color);
        font-size: 14px;
    }

    .rtl-text .field-input:focus~.field-label,
    .rtl-text .focus~.field-label {
        left: auto;
        right: 32px;
    }

    .field-input.has-error {

    }

    .has-error~.field-icon {
        fill: red;
    }

    .has-error~.field-label {
        top: -9px;
        left: 32px;
        background: var(--bg-color);
        padding: 2px 8px;
        font-size: 14px;
        color: var(--input-error) !important;
    }

    .rtl-text .has-error~.field-label {
        left: auto;
        right: 32px;
    }

    .has-error~.field-error,
    .has-error~.field-alert {
        display: block;
    }

    .validBlock{
        display: none;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        margin: 0 auto 15px;
    }

    .validBlock svg{
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
        fill: var(--validSvg-checked);
    }
    .validBlock p{
        font-size: 1.5rem;
        font-weight: 300;
        color: #353b3c;
    }

    .btn {
        display: block;
        width: 100%;
        height: 7rem;
        background: var(--btn-bg);
        border: none;
        border-radius: 15px;
        color: var(--btn-color);
        font-size: 2.5rem;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 auto 10px;
    }

    .btn span {
        display: block;
        font-size: 11px;
        font-weight: 400;
        opacity: 0.6;
    }

    .btn[disabled],
    .btn.disabled {
        background: var(--btnDisable-bg);
        color: var(--btnDisable-color);
    }

    .button_bottom_text {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        color: var(--bottomText-color);
    }

    .button_bottom_text svg path {
        stroke: var(--bottomCheck-color);
    }

    .btn-exit {
        color: var(--btnExit-color);
        font-size: 1.2rem;
        font-weight: 500;
    }