/*.step.step-hidden {*/
/*    display: none !important;*/
/*}*/
/*.first__content {*/
/*    background-image: url("../img/bg-quiz.png");*/
/*    background-size: cover;*/
/*    background-position: 50% 50%;*/
/*    position: relative;*/
/*    z-index: 20;*/
/*}*/
/*.first__content-form{*/
/*    min-height: 100vh;*/
/*    position: relative;*/
/*    padding-bottom: 200px;*/
/*    z-index: 20;*/
/*}*/

/*.first__content-bg .left{*/
/*    position: absolute;*/
/*    height: 50%;*/
/*    top: 0;*/
/*    left: 0;*/
/*    z-index: 0;*/

/*}*/

/*#question_1 .checkbox-content {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(1, 1fr);*/
/*    gap: 20px;*/
/*    place-items: center;*/
/*}*/
/*#question_1 .checkbox-label {*/
/*    padding: 25px;*/
/*    max-width: 400px;*/
/*    width: 100%;*/
/*}*/
/*#question_2 .checkbox-content {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2, 1fr);*/
/*}*/

/*.first__content-bg .right{*/
/*    position: absolute;*/
/*    height: 90%;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    z-index: 0;*/
/*}*/

/*.first__content-form .container{*/
/*    position: relative;*/
/*    z-index: 20;*/
/*}*/

/*.first__content-form form{*/
/*    position: relative;*/
/*    min-height: auto;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: flex-start;*/
/*    padding-top: 3%;*/

/*}*/


/*.step {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    opacity: 0;*/
/*    transform: translateX(50px);*/
/*    pointer-events: none;*/

/*    transition: opacity 0.5s ease, transform 0.5s ease;*/
/*    z-index: 0;*/
/*}*/

/*.step.active {*/

/*    position: relative;*/
/*    opacity: 1;*/
/*    zoom: 1;*/
/*    transform: translateX(0);*/
/*    pointer-events: all;*/
/*    z-index: 1;*/
/*}*/

/*.progress-wrapper {*/
/*    margin-bottom: 20px;*/
/*}*/

/*.progress-count {*/
/*    text-align: center;*/
/*    color: #FFF;*/
/*    text-align: center;*/
/*    leading-trim: both;*/
/*    text-edge: cap;*/

/*    font-size: 18px;*/
/*    font-style: normal;*/
/*    font-weight: 600;*/
/*    line-height: 48px; !* 266.667% *!*/
/*    padding-bottom: 20px;*/
/*}*/

/*.progress-container {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    gap: 5px;*/
/*}*/

/*.progress-segment {*/
/*    flex: 1;*/
/*    height: 8px;*/
/*    background: rgba(255, 255, 255, 0.32);*/
/*    border-radius: 30px;*/
/*    border: 2px solid rgba(255, 255, 255, 0.4);*/
/*    transition: background-color 0.3s ease;*/
/*}*/

/*.progress-segment.active {*/
/*    background-color: #5CB85C;*/
/*}*/


/*.step h3{*/
/*    color: #FFF;*/
/*    text-align: center;*/
/*    leading-trim: both;*/
/*    text-edge: cap;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    font-size: 38px;*/
/*    font-style: normal;*/
/*    font-weight: 600;*/
/*    line-height: 48px; !* 120% *!*/

/*    padding-top: 30px;*/
/*}*/
/*.step h3 span {*/
/*    font-size: 16px;*/
/*    font-style: normal;*/
/*    font-weight: 400;*/
/*    line-height: normal;*/
/*}*/

/*.step h4{*/
/*    padding-top: 0px;*/
/*    color: #FFF;*/
/*    text-align: center;*/
/*    leading-trim: both;*/
/*    text-edge: cap;*/
/*    text-align: center;*/
/*    font-size: 18px;*/
/*    font-style: normal;*/
/*    font-weight: 400;*/
/*    line-height: 48px; !* 300% *!*/
/*}*/












/*.btn_block {*/
/*    position: absolute;*/
/*    bottom: 60px;*/
/*    display: flex;*/
/*    width: 100%;*/
/*    justify-content: center;*/
/*    gap: 10px;*/
/*}*/

/*.btn_block button {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 12px;*/
/*    border-radius: 14px;*/
/*    border: 1px solid rgba(255, 255, 255, 0.30);*/
/*    !*background: #5874DC;*!*/
/*    padding: 20px 28px;*/
/*    background: transparent;*/
/*    cursor: pointer;*/
/*    color: #fff;*/
/*    font-size: 18px;*/
/*    transition: all 0.3s ease;*/
/*    overflow: hidden;*/
/*}*/

/*.btn_block button svg {*/
/*    transition: transform 0.4s ease, opacity 0.4s ease;*/
/*}*/

/*.btn_block button span {*/
/*    transition: transform 0.4s ease;*/
/*}*/

/*!* Ефект ховера *!*/
/*.btn_block button:hover {*/
/*    border: 1px solid #FFF;*/
/*    background: #fff;*/
/*    transform: scale(1.05);*/

/*}*/



/*!* SVG з’їжджає і зникає *!*/
/*.prev-btn:hover svg {*/
/*    transform: translateX(-15px);*/
/*    opacity: 0;*/
/*}*/

/*.next-btn:hover svg {*/
/*    transform: translateX(15px);*/
/*    opacity: 0;*/
/*}*/

/*!* Текст злегка рухається для балансу *!*/
/*.prev-btn:hover span {*/
/*    color:  #273375;*/
/*    transform: translateX(-40%);*/
/*}*/

/*.next-btn:hover span {*/
/*    color:  #273375;*/
/*    transform: translateX(40%);*/
/*}*/

/*!* Анімація натискання *!*/
/*.btn_block button:active {*/
/*    transform: scale(0.97);*/
/*}*/






/*.btn_block button span{*/
/*    color: #FFF;*/
/*    text-align: center;*/
/*    leading-trim: both;*/
/*    text-edge: cap;*/
/*    font-family: Onest;*/
/*    font-size: 16px;*/
/*    font-style: normal;*/
/*    font-weight: 600;*/
/*    line-height: 20px; !* 125% *!*/
/*    transition: opacity 0.5s ease;*/
/*    pointer-events: all;*/
/*}*/

/*.btn_block.hidden {*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*}*/


/*.hidden {*/
/*    display: none !important;*/
/*}*/

/*.item.checkbox .checkbox-content{*/

/*    display: grid;*/
/*    grid-template-columns: repeat(2, 2fr);*/

/*    !*display: flex;*!*/
/*    !*flex-direction: column;*!*/
/*    gap: 20px;*/
/*    justify-content: space-between;*/
/*    align-items: stretch;*/
/*    margin-top: 60px;*/
/*}*/



/*.checkbox-label {*/
/*    display: grid;*/
/*    gap:20px;*/
/*    flex: 1;*/
/*    border-radius: 14px;*/
/*    border: 1px solid rgba(255, 255, 255, 0.15);*/
/*    background: rgba(255, 255, 255, 0.15);*/
/*    backdrop-filter: blur(8.5px);*/
/*    -webkit-backdrop-filter: blur(8.5px);*/
/*    !*padding: 50px 30px;*!*/
/*    padding: 20px;*/
/*    cursor: pointer;*/
/*    transition: background-color 0.3s, border-color 0.3s;*/
/*}*/

/*.checkbox-label:hover{*/
/*    border: 1px solid rgba(255, 255, 255, 1);*/
/*    backdrop-filter: blur(18.5px);*/
/*    -webkit-backdrop-filter: blur(18.5px);*/
/*}*/

/*.checkbox-label.active-selected {*/
/*    background-color: #5CB85C;*/

/*}*/

/*.checkbox-label.error {*/
/*    border: 1px solid #ff4d4f;*/
/*    animation: shake 0.3s ease;*/
/*}*/

/*@keyframes shake {*/
/*    0%, 100% { transform: translateX(0); }*/
/*    25% { transform: translateX(-4px); }*/
/*    75% { transform: translateX(4px); }*/
/*}*/







/*.checkbox-label input {*/
/*    display: none; !* ховаємо стандартний чекбокс *!*/
/*}*/

/*.checkbox-label span{*/
/*    color: #FFF;*/
/*    leading-trim: both;*/
/*    text-edge: cap;*/
/*    text-align: left;*/
/*    font-size: 18px;*/
/*    font-style: normal;*/
/*    font-weight: 700;*/
/*    line-height: normal; !* 28px *!*/
/*}*/

/*.checkbox-label p{*/
/*    color: #FFF;*/
/*    leading-trim: both;*/
/*    text-edge: cap;*/
/*    text-align: left;*/
/*    font-size: 14px;*/
/*    font-style: normal;*/
/*    font-weight: 400;*/
/*    line-height: 140%; !* 19.6px *!*/
/*}*/


/*#question_4 span{*/
/*    text-align: center;*/
/*}*/
/*.step-form{*/
/*    max-width: 440px;*/
/*    padding: 20px;*/
/*    border-radius: 30px;*/
/*    border: 1px solid #FFF;*/
/*    background: rgba(255, 255, 255, 0.20);*/
/*    backdrop-filter: blur(22px);*/
/*}*/
/*#step5{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*}*/
/*.step-form{*/
/*    display: grid;*/
/*    gap: 10px;*/
/*    margin: 0 auto;*/
/*}*/

/*form input[type="tel"], form input[type="text"], form input[type="email"] {*/
/*    color: var(--Color, #fff) !important;*/
/*    leading-trim: both;*/
/*    text-edge: cap;*/
/*    font-size: 16px;*/
/*    font-style: normal;*/
/*    font-weight: 400;*/
/*    line-height: 0;*/
/*    width: 100%;*/
/*    padding: 20px;*/

/*    -webkit-box-sizing: border-box;*/
/*    box-sizing: border-box;*/
/*    -webkit-transition: border .3s ease;*/
/*    transition: border .3s ease;*/
/*    border-radius: 14px;*/
/*    border: 1px solid rgba(255, 255, 255, 0.20);*/
/*    background: rgba(255, 255, 255, 0.30);*/
/*    backdrop-filter: blur(6.5px);*/
/*    -webkit-backdrop-filter: blur(6.5px);*/
/*}*/

/*form button[type="submit"] {*/
/*    padding: 15px 30px;*/
/*    border-radius: 14px;*/
/*    border: none;*/

/*    background: var(--primary-b, #CF202C);*/
/*    text-align: center;*/
/*    color: #FFF;*/
/*    text-align: center;*/

/*    font-size: 16px;*/
/*    font-style: normal;*/
/*    font-weight: 600;*/
/*    line-height: 20px; !* 125% *!*/

/*    cursor: pointer;*/
/*    transform: scale(1);*/
/*    transition: 0.3s ease-in-out;*/
/*}*/
/*form button[type="submit"]:hover{*/
/*    transform: scale(1.05);*/

/*}*/

/*form button[type="submit"]:active{*/
/*    transform: scale(0.97);*/
/*}*/

/*.iti{*/
/*    width: 100%;*/
/*}*/
/*.checkbox input[type="checkbox"]#scales {*/
/*    display: inline-block; !* відображаємо стандартний чекбокс *!*/
/*    width: auto;*/
/*    height: auto;*/
/*    margin-right: 8px; !* відступ між галочкою і текстом *!*/
/*    appearance: checkbox; !* для сучасних браузерів *!*/
/*    -webkit-appearance: checkbox;*/
/*    -moz-appearance: checkbox;*/
/*}*/

/*.checkbox a{*/
/*    color: #fff;*/
/*    text-decoration: none;*/
/*    font-size: 10px;*/
/*    font-style: normal;*/
/*}*/





/*form input[type="tel"]::placeholder,*/
/*form input[type="text"]::placeholder,*/
/*form input[type="email"]::placeholder {*/
/*    color: #fff;*/
/*    opacity: 1;*/
/*}*/

/*!* для кросбраузерної підтримки *!*/
/*form input[type="tel"]::-webkit-input-placeholder,*/
/*form input[type="text"]::-webkit-input-placeholder,*/
/*form input[type="email"]::-webkit-input-placeholder {*/
/*    color: #fff;*/
/*}*/

/*form input[type="tel"]:-ms-input-placeholder,*/
/*form input[type="text"]:-ms-input-placeholder,*/
/*form input[type="email"]:-ms-input-placeholder {*/
/*    color: #fff;*/
/*}*/

/*form input[type="tel"]::-ms-input-placeholder,*/
/*form input[type="text"]::-ms-input-placeholder,*/
/*form input[type="email"]::-ms-input-placeholder {*/
/*    color: #fff;*/
/*}*/

/*.iti__selected-dial-code{*/
/*    color: #fff;*/
/*}*/



/*@media only screen and (max-width:1200px){*/
/*    .first__content-bg .left{*/
/*        width: 30%;*/
/*        height: auto;*/


/*    }*/

/*    .first__content-bg .right{*/
/*        width: 60%;*/
/*        height: auto;*/

/*    }*/

/*    .checkbox-label {*/
/*        display: grid;*/
/*        gap: 10px;*/
/*        padding: 20px;*/
/*    }*/
/*    .checkbox-label span{*/
/*        font-size: 18px;*/
/*    }*/
/*    .item.checkbox .checkbox-content{*/
/*       display: grid;*/
/*        grid-template-columns: repeat(3, 1fr);*/
/*    }*/
/*.first__content{*/
/*    overflow: hidden;*/
/*}*/


/*}*/
/*@media only screen and (max-width:992px) {*/




/*}*/
/*@media only screen and (max-width:768px){*/
/*    .item.checkbox .checkbox-content{*/
/*        display: grid;*/
/*        grid-template-columns: repeat(2, 1fr);*/
/*    }*/
/*}*/

/*@media only screen and (max-width:600px){*/


/*    .checkbox-label span {*/
/*        font-size: 12px;*/
/*    }*/



/*    .hidden {*/
/*        display: none;*/
/*    }*/
/*    .item.checkbox .checkbox-content{*/
/*        display: grid;*/
/*        grid-template-columns: repeat(2, 1fr);*/
/*        margin-top: 30px;*/
/*        gap: 10px;*/
/*    }*/


/*    .first__content-bg .left{*/
/*        height: auto;*/
/*        width: 90%;*/
/*        top: auto;*/
/*        bottom: 0;*/


/*    }*/
/*    .first__content-bg .left img{*/
/*        position: absolute;*/
/*        bottom: 0;*/
/*        left: 0;*/
/*    }*/

/*    .first__content-bg .right{*/
/*        position: absolute;*/
/*        height: auto;*/
/*        width: 80%;*/
/*        right: 0;*/
/*        bottom: auto;*/
/*        top: 0;*/
/*        z-index: 0;*/
/*    }*/

/*    .first__content-bg .right img{*/
/*        position: absolute;*/
/*        right: 0;*/
/*        top: 0;*/
/*    }*/

/*    .first__content-form form{*/
/*        padding-top: 70px;*/
/*    }*/
/*    .progress-count{*/
/*        padding-bottom: 10px;*/
/*    }*/
/*    .step h3{*/
/*        padding-top: 20px;*/
/*        font-size: 22px;*/
/*        line-height: normal;*/
/*    }*/
/*    .step h3 span {*/
/*        font-size: 12px;*/
/*    }*/

/*    .checkbox-label {*/
/*        display: grid*/
/*    ;*/
/*        gap: 10px;*/
/*        padding: 15px;*/
/*    }*/
/*    !*.first__content-form {*!*/

/*    !*    padding-bottom: 140px;*!*/

/*    !*}*!*/

/*    .btn_block {*/

/*        bottom: 50px;*/
/*        justify-content: space-between;*/

/*    }*/

/*    .step-form {*/
/*        margin-top: 30px;*/
/*        width: 100%;*/
/*        max-width: 100%;*/
/*    }*/
/*    form button[type="submit"] {*/
/*        padding: 25px 30px;*/
/*    }*/





/*}*/
.step.step-hidden {
    display: none !important;
}

.first__content {
    background-image: url("../img/bg-quiz.png");
    background-size: cover;
    background-position: 50% 50%;
    position: relative;
    z-index: 20;
    overflow: hidden;
    min-height: 100dvh;
}

.first__content-form {
    min-height: 100dvh;
    height: 100dvh;
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.first__content-bg .left {
    position: absolute;
    height: 50%;
    top: 0;
    left: 0;
    z-index: 0;
}

.first__content-bg .right {
    position: absolute;
    height: 90%;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.first__content-form .container {
    position: relative;
    z-index: 20;
}

.first__content-form form {
    position: relative;
    min-height: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
}

.step {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(50px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 0;
}

.step.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
}

.progress-wrapper {
    margin-bottom: 12px;
    flex-shrink: 0;
    padding-top: 20px;
    position: relative;
    z-index: 3;
}

.progress-count {
    text-align: center;
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    padding-bottom: 20px;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.progress-segment {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.32);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: background-color 0.3s ease;
}

.progress-segment.active {
    background-color: #5CB85C;
}

.step h3 {
    color: #FFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    padding-top: 30px;
    flex-shrink: 0;
    margin: 0;
}

.step h3 span {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 8px;
}

.step h4 {
    padding-top: 0;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 48px;
    flex-shrink: 0;
    margin: 0;
}

.item.checkbox {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    justify-content: flex-start;
}

.item.checkbox fieldset {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.item.checkbox .checkbox-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 40px;
    align-content: start;
    flex: 0 0 auto;
}

#question_1 .checkbox-content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    place-items: center;
}

#question_1 .checkbox-label {
    padding: 25px;
    max-width: 400px;
    width: 100%;
}

#question_2 .checkbox-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8.5px);
    -webkit-backdrop-filter: blur(8.5px);
    padding: 20px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
    box-sizing: border-box;
}

.checkbox-label:hover {
    border: 1px solid rgba(255, 255, 255, 1);
    backdrop-filter: blur(18.5px);
    -webkit-backdrop-filter: blur(18.5px);
}

.checkbox-label.active-selected {
    background-color: #5CB85C;
}

.checkbox-label.error {
    border: 1px solid #ff4d4f;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.checkbox-label input {
    display: none;
}

.checkbox-label span {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
}

.checkbox-label p {
    color: #FFF;
    text-align: left;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

#question_4 span {
    text-align: center;
}

.step-form {
    max-width: 440px;
    width: 100%;
    padding: 20px;
    border-radius: 30px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(22px);
    display: grid;
    gap: 10px;
    margin: 0 auto;
}

#step5 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

form input[type="tel"],
form input[type="text"],
form input[type="email"] {
    color: #fff !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    transition: border .3s ease;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(6.5px);
    -webkit-backdrop-filter: blur(6.5px);
}

form button[type="submit"] {
    padding: 15px 30px;
    border-radius: 14px;
    border: none;
    background: var(--primary-b, #CF202C);
    text-align: center;
    color: #FFF;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
    transform: scale(1);
    transition: 0.3s ease-in-out;
}

form button[type="submit"]:hover {
    transform: scale(1.05);
}

form button[type="submit"]:active {
    transform: scale(0.97);
}

.iti {
    width: 100%;
}

.checkbox input[type="checkbox"]#scales {
    display: inline-block;
    width: auto;
    height: auto;
    margin-right: 8px;
    appearance: checkbox;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}

.checkbox a {
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-style: normal;
}

form input[type="tel"]::placeholder,
form input[type="text"]::placeholder,
form input[type="email"]::placeholder {
    color: #fff;
    opacity: 1;
}

form input[type="tel"]::-webkit-input-placeholder,
form input[type="text"]::-webkit-input-placeholder,
form input[type="email"]::-webkit-input-placeholder {
    color: #fff;
}

form input[type="tel"]:-ms-input-placeholder,
form input[type="text"]:-ms-input-placeholder,
form input[type="email"]:-ms-input-placeholder {
    color: #fff;
}

form input[type="tel"]::-ms-input-placeholder,
form input[type="text"]::-ms-input-placeholder,
form input[type="email"]::-ms-input-placeholder {
    color: #fff;
}

.iti__selected-dial-code {
    color: #fff;
}

.btn_block {
    position: static;
    margin-top: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn_block button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.30);
    padding: 20px 28px;
    background: transparent;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    overflow: hidden;
    min-width: 180px;
}

.btn_block button svg {
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.btn_block button span {
    transition: transform 0.4s ease;
    color: #FFF;
    text-align: center;
    font-family: Onest, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    pointer-events: all;
}

.btn_block button:hover {
    border: 1px solid #FFF;
    background: #fff;
    transform: scale(1.05);
}

.prev-btn:hover svg {
    transform: translateX(-15px);
    opacity: 0;
}

.next-btn:hover svg {
    transform: translateX(15px);
    opacity: 0;
}

.prev-btn:hover span {
    color: #273375;
    transform: translateX(-40%);
}

.next-btn:hover span {
    color: #273375;
    transform: translateX(40%);
}

.btn_block button:active {
    transform: scale(0.97);
}

.btn_block.hidden {
    opacity: 0;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

@media only screen and (max-width: 1200px) {
    .first__content-bg .left {
        width: 30%;
        height: auto;
    }

    .first__content-bg .right {
        width: 60%;
        height: auto;
    }

    .checkbox-label {
        padding: 18px;
        min-height: 76px;
    }

    .checkbox-label span {
        font-size: 16px;
    }

    .item.checkbox .checkbox-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 32px;
    }
}

@media only screen and (max-width: 992px) {
    .step h3 {
        font-size: 30px;
        line-height: 1.2;
    }

    .item.checkbox .checkbox-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    .first__content,
    .first__content-form {
        min-height: 100dvh;
        height: 100dvh;
    }

    .first__content-form form {
        padding-top: 0;
    }

    .progress-wrapper {
        margin-bottom: 12px;
        padding-top: 18px;
    }

    .progress-count {
        font-size: 16px;
        line-height: 1.2;
        padding-bottom: 10px;
    }

    .step h3 {
        padding-top: 12px;
        font-size: 24px;
        line-height: 1.2;
    }

    .step h3 span {
        font-size: 13px;
        line-height: 1.3;
        margin-top: 6px;
    }

    .step h4 {
        font-size: 15px;
        line-height: 1.3;
    }

    .item.checkbox .checkbox-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 20px;
    }

    .checkbox-label {
        min-height: 70px;
        padding: 14px;
        border-radius: 12px;
    }

    .checkbox-label span {
        font-size: 14px;
        line-height: 1.2;
    }

    .btn_block {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .btn_block button {
        padding: 16px 18px;
        min-width: 150px;
    }
}

@media only screen and (max-width: 600px) {
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }

    .first__content {
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
    }

    .first__content-form {
        min-height: 100dvh;
        height: 100dvh;
        padding-bottom: 0;
    }

    .first__content-form form {
        height: 100%;
        padding-top: 100px;
    }

    .first__content-bg .left {
        height: auto;
        width: 90%;
        top: auto;
        bottom: 0;
    }

    .first__content-bg .left img {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .first__content-bg .right {
        position: absolute;
        height: auto;
        width: 80%;
        right: 0;
        bottom: auto;
        top: 0;
        z-index: 0;
    }

    .first__content-bg .right img {
        position: absolute;
        right: 0;
        top: 0;
    }

    .progress-wrapper {
        margin-bottom: 10px;
        padding-top: 14px;
    }

    .progress-count {
        font-size: 14px;
        line-height: 1.1;
        padding-bottom: 8px;
    }

    .progress-segment {
        height: 6px;
    }

    .step h3 {
        padding-top: 6px;
        font-size: 18px;
        line-height: 1.15;
    }

    .step h3 span {
        display: block;
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.25;
    }

    .step h4 {
        font-size: 13px;
        line-height: 1.2;
    }

    .item.checkbox .checkbox-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 14px;
        align-content: start;
    }

    #question_1 .checkbox-content {
        gap: 10px;
    }

    #question_1 .checkbox-label {
        max-width: 100%;
        padding: 16px;
        min-height: 56px;
    }

    #question_2 .checkbox-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .checkbox-label {
        min-height: 78px;
        padding: 10px 8px;
        border-radius: 10px;
    }

    .checkbox-label span {
        font-size: 11px;
        line-height: 1.15;
    }

    .checkbox-label p {
        font-size: 12px;
    }

    #question_5 .checkbox-label,
    #question_6 .checkbox-label,
    #question_7 .checkbox-label {
        min-height: 72px;
    }

    .btn_block {
        margin-top: auto;
        padding-top: 12px;
        padding-bottom: 20px;
        gap: 8px;
        flex-shrink: 0;
    }

    .btn_block button {
        flex: 1;
        min-width: 0;
        padding: 14px 10px;
        border-radius: 12px;
    }

    .btn_block button span {
        font-size: 14px;
        line-height: 1.2;
    }

    .step-form {
        max-width: 100%;
        padding: 16px;
        border-radius: 20px;
    }

    form input[type="tel"],
    form input[type="text"],
    form input[type="email"] {
        padding: 16px;
        font-size: 14px;
    }

    form button[type="submit"] {
        padding: 14px 20px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 390px) {
    .step h3 {
        font-size: 16px;
    }

    .step h3 span {
        font-size: 10px;
    }

    .item.checkbox .checkbox-content {
        gap: 6px;
        margin-top: 10px;
    }

    .checkbox-label {
        min-height: 52px;
        padding: 8px 6px;
    }

    .checkbox-label span {
        font-size: 14px;
        font-weight: 500;
    }

    #question_5 .checkbox-label,
    #question_6 .checkbox-label,
    #question_7 .checkbox-label {
        min-height: 64px;
    }

    .btn_block button {
        padding: 12px 10px;
    }

    .btn_block button span {
        font-size: 13px;
    }
}

@media only screen and (max-width: 1200px) and (max-height: 690px) {
    .progress-wrapper {
        padding-top: 10px;
        margin-bottom: 8px;
    }

    .progress-count {
        font-size: 13px;
        padding-bottom: 6px;
    }

    .progress-segment {
        height: 5px;
    }

    .step h3 {
        padding-top: 30px;
        font-size: 16px;
        line-height: 1.1;
    }

    .step h3 span {
        font-size: 10px;
        margin-top: 4px;
    }

    .item.checkbox .checkbox-content {
        gap: 8px;
        margin-top: 10px;
    }

    .checkbox-label {
        min-height: 52px;
        padding: 8px;
    }

    .checkbox-label span {
        font-size: 10px;
        line-height: 1.1;
    }

    .btn_block button {
        padding: 12px 10px;
    }

    .btn_block button span {
        font-size: 13px;
    }
}

@media only screen and (max-width: 1920px) and (max-height: 800px) {
    .progress-wrapper {
        padding-top: 10px;
        margin-bottom: 8px;
    }

    .progress-count {
        font-size: 13px;
        padding-bottom: 6px;
    }

    .progress-segment {
        height: 5px;
    }

    .step h3 {
        padding-top: 30px;
        font-size: 24px;
        line-height: 1.1;
    }

    .step h3 span {
        font-size: 10px;
        margin-top: 4px;
    }

    .item.checkbox .checkbox-content {
        gap: 8px;
        margin-top: 10px;
    }

    .checkbox-label {
        min-height: 52px;
        padding: 8px;
    }

    .checkbox-label span {
        font-size: 10px;
        line-height: 1.1;
    }

    .btn_block button {
        padding: 12px 10px;
    }

    .btn_block button span {
        font-size: 13px;
    }
}