.quiz {
position: relative;
display: flex;
max-width: 1920px;
width: 100%;
margin: 0 auto;
} .quiz_left {
position: relative;
max-width: 573px;
width: 100%;
background: var(--dark);
padding: 50px 90px 360px;
} .quiz_left h2 {
font-size: 32px;
font-weight: 700;
line-height: 40px;
letter-spacing: 5%;
vertical-align: middle;
text-transform: uppercase;
color: var(--light2);
} .quiz_left .line {
max-width: 148px;
width: 100%;
height: 2px;
background: var(--light2);
margin: 15px 0 30px;
} .quiz_left p {
font-size: 24px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--white-text);
} .quiz_left .quiz-advantages {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 40px;
} .quiz-advantage {
display: flex;
align-items: center;
gap: 10px;
} .quiz-advantage svg {
min-width: 50px;
min-height: 50px;
width: 50px;
height: 50px;
color: var(--light2);
} .quiz-advantage__text {
display: flex;
flex-direction: column;
gap: 10px;
} .quiz-advantage h3 {
font-size: 20px;
font-weight: 700;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--white-text);
} .quiz-advantage p {
font-size: 15px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--white-text);
} .quiz_left-bg {
position: absolute;
left: 0;
bottom: 0;
} .quiz_right {
position: relative;
max-width: 1347px;
width: 100%;
} .quiz-advan-cards {
display: none;
gap: 40px;
} .quiz-nav {
display: flex;
align-items: center;
gap: 25px;
width: fit-content;
margin: 50px;
} .quiz-nav__step {
position: relative;
width: 50px;
height: 50px;
background: var(--white-text);
border: 1px solid var(--dark);
border-radius: 50%;
} .quiz-nav__step span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 24px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--dark);
} .quiz-nav__step.active {
background: var(--dark);
} .quiz-nav__step.active span {
color: var(--white-text);
} .quiz-nav .line {
width: 45px;
height: 2px;
background: var(--light2);
} .quiz-form {
position: relative;
z-index: 5;
max-width: 735px;
width: 100%;
min-height: 613px;
display: flex;
align-items: end;
margin-left: 50px;
margin-bottom: 20px;
background: var(--white-text);
border-radius: 15px;
overflow: hidden;
} .quiz-form__step {
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
user-select: none;
pointer-events: none;
padding: 20px 30px 35px;
} .quiz-form__step.active {
z-index: 5;
opacity: 1;
user-select: auto;
pointer-events: inherit;
} .quiz-form__step p {
font-size: 16px;
font-weight: 400;
line-height: 100%;
letter-spacing: 1%;
vertical-align: middle;
color: var(--light2);
} .quiz-form__step h3 {
font-size: 32px;
font-weight: 700;
line-height: 117%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--dark);
margin-top: 10px;
} .quiz-form__step-questions {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 20px;
max-width: 675px;
width: 100%;
margin-top: 30px;
} .quiz-form__step-questions.gap20 {
gap: 20px;
} .quiz-form__step-question {
position: relative;
max-width: 326px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 12.5px 20px;
background: #F5F0E81F;
border: 1px solid #452C2C40;
border-radius: 15px;
overflow: hidden;
} .quiz-form__step-question:hover {
background: #452C2C40;
} .quiz-form__step-question.active {
border: 1px solid var(--light);
box-shadow: 0px 2px 6.9px 0px #452C2C;
} .quiz-form__step-question.col-25 {
max-width: 131px;
} .quiz-form__step-question.col-100 {
max-width: 673px;
} .quiz-form__step-question.p17 {
padding: 17px 20px;
} .quiz-form__step-question input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
} .quiz-form__step-question_label {
display: flex;
align-items: center;
gap: 15px;
} .quiz-form__step-question_label img {
max-width: 60px;
width: 100%;
height: auto;
} .quiz-form__step-question_label-text {
display: flex;
flex-direction: column;
gap: 10px;
height: fit-content;
} .quiz-form__step-question h4 {
font-size: 20px;
font-weight: 700;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--light);
} .quiz-form__step-question p {
font-size: 15px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--black);
} .quiz-form__step_last {
width: 100%;
} .quiz-form__step_last-form {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 15px;
} .quiz-form__step_last-form .form-fields {
min-height: 60px;
} .quiz-form__step_last-form .form-fields .form-field.button-change.active {
max-width: 336px;
} .quiz-form__step_last-form .form-fields .form-field.button-change {
max-width: 326px;
} .quiz-form__step_last-form .form-fields .form-field.button-change .hidden {
left: 50px;
} .quiz-form__step_last-form .form-field input[type="text"],
.quiz-form__step_last-form .form-field textarea {
padding: 15px 20px;
} .quiz-form__step_last-form .form-field input[type="text"] ~ label,
.quiz-form__step_last-form .form-field textarea ~ label {
top: 10px;
gap: 15px;
} .quiz-form__step_last-form .form-field.textarea textarea {
min-height: 121px;
} .quiz-form__buttons {
display: flex;
align-items: center;
gap: 15px;
width: 100%;
padding: 35px 30px;
} .quiz-form__button {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
padding: 15px;
border: none;
outline: none;
border-radius: 10px;
cursor: pointer;
} .quiz-form__button:disabled {
cursor: inherit;
} .quiz-form__button p {
font-size: 24px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
color: var(--white-text);
} .quiz-form__button svg {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
} .quiz-form__button.prev {
max-width: 34%;
width: 100%;
border: 2px solid var(--light);
background: transparent;
} .quiz-form__button.prev:disabled {
border: 2px solid #FFDFBC;
} .quiz-form__button.prev:hover:not(:disabled) {
background: var(--light);
} .quiz-form__button.prev svg {
transform: rotate(180deg);
color: var(--light);
} .quiz-form__button.prev:hover:not(:disabled) svg {
color: var(--white-text);
} .quiz-form__button.prev:disabled svg {
transform: rotate(180deg);
color: #FFDFBC;
} .quiz-form__button.next {
max-width: 65%;
width: 100%;
min-height: 60px;
background: var(--dark);
} .quiz-form__button.next:disabled {
background: rgba(69, 44, 44, 0.7);
} .quiz-form__button.next:hover:not(:disabled) {
background: var(--light);
} .quiz-form__button.next svg {
color: var(--white-text);
} .quiz_right__safe-text {
max-width: 274px;
width: 100%;
margin: 20px 50px;
display: flex;
align-items: center;
gap: 5px;
} .quiz_right__safe-text svg {
min-width: 20px;
min-height: 20px;
width: 20px;
height: 20px;
color: var(--dark);
} .quiz_right__safe-text p {
font-size: 15px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
color: var(--dakr);
} .quiz_right-eco {
position: absolute;
top: 50px;
right: 90px;
z-index: 2;
max-width: 352px;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 22.5px 14.5px;
background: #A7C07E52;
border-radius: 15px;
} .quiz_right-eco svg {
min-width: 50px;
min-height: 50px;
width: 50px;
height: 50px;
color: #212F0C;
} .quiz_right-eco__text {
display: flex;
flex-direction: column;
gap: 10px;
} .quiz_right-eco h4 {
font-size: 20px;
font-weight: 700;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--black);
} .quiz_right-eco p {
font-size: 15px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--black);
} .quiz_right-bg {
position: absolute;
top: 135px;
right: 0;
z-index: 1;
} .quiz_right-guarantee {
position: absolute;
bottom: 226px;
right: 90px;
z-index: 3;
max-width: 352px;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 22.5px 14.5px;
background: var(--white-text);
border-radius: 15px;
} .quiz_right-guarantee svg {
min-width: 50px;
min-height: 50px;
width: 50px;
height: 50px;
color: var(--light2);
} .quiz_right-guarantee__text {
display: flex;
flex-direction: column;
gap: 10px;
} .quiz_right-guarantee__text h4 {
font-size: 20px;
font-weight: 700;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--black);
} .quiz_right-guarantee__text p {
font-size: 15px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--black);
} .quiz-advantages_bottom {
position: absolute;
left: 0;
bottom: 22px;
z-index: 7;
display: flex;
max-width: 1829px;
width: 100%; padding: 54px 50px 50px 190px;
} .quiz-advantages_bottom__list {
position: relative;
z-index: 7;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
width: 100%;
} .quiz-advantages_bottom .quiz-advantage {
display: flex;
align-items: center;
gap: 10px;
} .quiz-advantages_bottom  .quiz-advantage_1 {
max-width: 191px;
width: 100%;
} .quiz-advantages_bottom  .quiz-advantage_2 {
max-width: 205px;
width: 100%;
} .quiz-advantages_bottom  .quiz-advantage_3 {
max-width: 227px;
width: 100%;
} .quiz-advantages_bottom  .quiz-advantage_4 {
max-width: 257px;
width: 100%;
} .quiz-advantages_bottom  .quiz-advantage_5 {
max-width: 224px;
width: 100%;
} .quiz-advantages_bottom .quiz-advantage svg {
min-width: 50px;
min-height: 50px;
width: 50px;
height: 50px;
color: var(--light2);
} .quiz-advantages_bottom .quiz-advantage__text {
display: flex;
flex-direction: column;
gap: 10px;
} .quiz-advantages_bottom .quiz-advantage__text h3 {
font-size: 20px;
font-weight: 700;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--white-text);
} .quiz-advantages_bottom .quiz-advantage__text p {
font-size: 15px;
font-weight: 400;
line-height: 100%;
letter-spacing: 5%;
vertical-align: middle;
color: var(--white-text);
} .quiz-advantages_bottom .quiz-advantage__line {
width: 2px;
height: 45px;
background: var(--light2);
} .quiz-advantages_bottom > svg {
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
max-width: 1829px;
width: 100%;
height: 100%;
}
@media (max-width: 1850px) {
.quiz_left {
max-width: 493px;
padding: 50px 50px 360px;
} .quiz_right-eco {
right: 50px;
max-width: 271px;
padding: 13.5px 12px;
} .quiz_right-eco svg {
min-width: 40px;
min-height: 40px;
width: 40px;
height: 40px;
} .quiz_right-eco h4 {
font-size: 16px;
} .quiz_right-eco p {
font-size: 13px;
} .quiz_right-guarantee {
right: 50px;
max-width: 271px;
padding: 13.5px 14px;
} .quiz_right-guarantee svg {
min-width: 40px;
min-height: 40px;
width: 40px;
height: 40px;
} .quiz_right-guarantee__text h4 {
font-size: 16px;
} .quiz_right-guarantee__text p {
font-size: 13px;
}
} @media (max-width: 1750px) {
.quiz-advantages_bottom,
.quiz-advantages_bottom > svg {
max-width: 1650px;
}
} @media (max-width: 1650px) {
.quiz_left h2 {
font-size: 24px;
line-height: 100%;
} .quiz_right-eco,
.quiz_right-guarantee {
display: none;
} .quiz-advan-cards {
display: flex;
gap: 40px;
padding: 40px 20px 10px;
} .quiz-advan-cards .quiz_right-eco,
.quiz-advan-cards .quiz_right-guarantee {
position: static;
display: flex;
} .quiz_right-eco {
right: 50px;
max-width: 352px;
padding: 13.5px 12px;
} .quiz_right-eco svg {
min-width: 50px;
min-height: 50px;
width: 50px;
height: 50px;
} .quiz_right-eco h4 {
font-size: 20px;
} .quiz_right-eco p {
font-size: 15px;
} .quiz_right-guarantee {
right: 50px;
max-width: 352px;
padding: 13.5px 14px;
} .quiz_right-guarantee svg {
min-width: 50px;
min-height: 50px;
width: 50px;
height: 50px;
} .quiz_right-guarantee__text h4 {
font-size: 20px;
} .quiz_right-guarantee__text p {
font-size: 15px;
} .quiz-nav {
gap: 21px;
margin: 10px 30px 20px;
} .quiz-form {
margin-left: 30px;
} .quiz_left {
padding: 40px 40px 510px;
} .quiz_right-bg {
max-width: 700px;
top: 232px;
} .quiz-advantages_bottom {
max-width: 1360px;
padding: 54px 50px 50px 95px;
} .quiz-advantages_bottom > svg {
max-width: 1360px;
}
} @media (max-width: 1360px) {
.quiz_left {
padding: 40px 40px 540px;
}
} @media (max-width: 1200px) {
.quiz {
flex-direction: column;
} .quiz_left {
max-width: 100%;
padding: 50px;
} .quiz_left h2 {
max-width: 693px;
font-size: 32px;
} .quiz_left p {
max-width: 693px;
} .quiz_left .quiz-advantages {
position: relative;
z-index: 3;
max-width: 808px;
display: grid;
grid-template-columns: 1fr 1fr;
} .quiz_left-bg {
left: inherit;
right: 0;
z-index: 1;
transform: rotateY(190deg);
max-width: 330px;
} .quiz-advantages_bottom {
position: static;
margin-top: 30px;
background: var(--dark);
padding: 30px 50px;
border-radius: 10px;
} .quiz-advantages_bottom > svg {
display: none;
} .quiz-advantages_bottom__list {
justify-content: center;
flex-wrap: wrap;
gap: 30px 50px;
} .quiz-advantages_bottom .quiz-advantage__line {
display: none;
}
} @media (max-width: 800px) {
.quiz-advan-cards {
padding: 30px 50px 10px;
} .quiz-nav {
width: 100%;
justify-content: space-between;
gap: 5px;
padding: 10px 50px 20px;
margin: 0;
} .quiz-form__container {
padding: 10px 50px 0;
} .quiz-form {
margin: 0;
} .quiz-form__step {
padding: 20px 25px 35px;
} .quiz-form__step-questions {
gap: 10px;
} .quiz-form__step-question {
max-width: 290px;
padding: 12.5px 7px;
} .quiz-form__step-question.p17 {
max-width: 285px;
padding: 17px 10px;
} .quiz-form__step-question.col-25 {
max-width: 131px;
} .quiz-form__step-question_label {
gap: 10px;
} .quiz-advantages_bottom .quiz-advantage {
max-width: 230px;
}
.quiz-form__step_last-form .form-fields .form-field.button-change.active {
max-width: 273px;
} .quiz-form__step_last-form .form-fields .form-field.button-change {
max-width: 260px;
}
} @media (max-width: 740px) {
.quiz-advan-cards {
flex-direction: column;
gap: 15px;
padding: 15px 25px;
} .quiz-nav {
padding: 0 25px 10px;
} .quiz-nav__step {
width: 40px;
height: 40px;
} .quiz-nav .line {
width: 30px;
} .quiz-form__container {
padding: 10px 25px;
} .quiz-form__step {
padding: 20px 15px 35px;
} .quiz-form__step h3 {
font-size: 20px;
line-height: 24px;
} .quiz-form__step-questions {
margin-top: 20px;
} .quiz_right-bg {
display: none;
} .quiz_right__safe-text {
max-width: 305px;
padding: 10px 25px 20px;
margin: 0;
} .quiz-advantages_bottom {
margin: 0;
}
} @media (max-width: 680px) {
.quiz-form__step-question {
max-width: 100%;
padding: 10px 7px;
} .quiz-form {
min-height: 930px;
} .quiz-form__buttons {
padding: 20px 15px;
} .quiz-form__step-question.col-25 {
max-width: 150px;
}
} @media (max-width: 640px) {
.quiz-form__step_last-form .form-fields {
min-height: 135px;
} .quiz-form__step_last-form .form-fields .form-field.button-change.active {
max-width: 100%;
} .quiz-form__step_last-form .form-fields .form-field.button-change {
max-width: 100%;
}
} @media (max-width: 530px) {
.quiz_left {
padding: 25px 25px 340px;
} .quiz_left h2 {
font-size: 24px;
font-weight: 400;
} .quiz_left .line {
margin: 10px 0 15px;
} .quiz_left p {
font-size: 20px;
} .quiz_left .quiz-advantages {
grid-template-columns: 1fr;
gap: 10px;
} .quiz-advantage p {
font-size: 15px;
} .quiz_left-bg {
max-width: 90%;
left: 0;
right: inherit;
transform: none;
} .quiz-nav {
gap: 8px;
} .quiz-nav__step {
width: 30px;
height: 30px;
} .quiz-nav__step span {
font-size: 16px;
} .quiz-nav .line {
width: 10px;
} .quiz-form__button {
min-height: 65px;
} .quiz-form__button p {
font-size: 18px;
} .quiz-form__button svg {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
} .quiz-form__step-question.p17 {
padding: 25px 10px;
}
} @media (max-width: 430px) {
.quiz-form__step-question.col-25 {
max-width: 130px;
}
}