* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
  line-height: 120%;
  font-family: "Inter", sans-serif;
}

body {
  min-height: 100vh;
  background: url(../img/bg-mob.png) no-repeat center top / cover;
}

section {
  padding: 0 15px;
}

.telka-img {
  width: 53px;
}

.top-line {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 6px;
  background: #2a486b;
  z-index: 1;
}

header {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20px 15px;
}

.logo {
  width: 100px;
  margin: auto;
}

.main-img img {
  width: 100%;
  display: block;
}

.main-img {
  margin-bottom: 20px;
}

h1 {
  color: #000;
  padding-bottom: 20px;
  font-size: 25px;
}

.btn {
  display: block;
  background: #2a486b;
  box-shadow: 0px 1px 3px 0px #00000047;
  color: #fff;
  text-align: center;
  padding: 20px;
  width: 100%;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 22px;
  margin: 20px 0;
  cursor: pointer;
}

.btn:hover {
  background: linear-gradient(180deg, #e8332a 0%, #d01b12 100%);
}


.support {
padding: 15px;
border-radius: 15px;
text-align: center;
border: 1px solid #2a486b;
}

.flexxer {
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.bank-wrap{
  display: block;
  width: 100%;
  max-width: 150px;
}

.telka {
  display: flex;
  gap: 15px;

  align-items: center;
  margin-bottom: 30px;
}

.telka p {
  font-weight: 700;
  font-size: 16px;
}

.telka p span {
  font-weight: 500;
  color: #929292;
}

.grey {
  color: #666666;
}

.progress {
  width: 100%;
}
.progress-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 13px;
  padding-top: 20px;
}

.actions {
  font-weight: 700;
}

#questNum,
#questNum1 {
  color: #2a486b;
}
#questNum1 {
  font-size: 36px;
  font-weight: 700;
}

.bar {
  background: #e6e6e6;
  height: 6px;
  width: 100%;
  border-radius: 50px;
  margin-bottom: 20px;
}

.inside-bar {
  height: 100%;
  background: #2a486b;
  width: 0%;
}

.actions-desk {
  border: 1px solid #d9d9d9;
  padding: 30px;
  text-align: center;
  border-radius: 30px;
  margin-bottom: 20px;
  width: 100%;
}

.desk,
.quiz-step {
  display: none;
}

.quiz-step1 {
  display: block;
}

.nachat p {
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  line-height: 150%;
}

.nachat {
  width: 100%;
  margin-top: 30px;

  text-align: left;
}

.question {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
  color: #000;
}

main {
  width: 100%;
}

.answer {
  width: 100%;
  background: #2a486b;
  color: #fff;
  font-size: 16px;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;

  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: center;
}

.answer:hover {
  background: #2a486b99;
}

.option {
  width: fit-content;
  font-size: 14px;
  font-weight: 700;
  min-width: 33px;
  min-height: 33px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  background: #fff;
  color: #d01b12;
}





.finale-subtext {
  padding: 10px 15px;
  font-size: 15px;
  border: 1px solid #2a486b;
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
}

.form-wrap {
  margin-top: 30px;
}





.form input {
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 10px;
  color: #111111;
  font-size: 18px;
  margin-bottom: 10px;
  border: none;
  background: #ffffff;
}

.aaactions {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
}

.subtitle {
  font-size: 18px;
  font-weight: 500;
}

.sub-answer {
  font-size: 14px;
  padding-top: 20px;
}

.form {
  display: none;
}

.form h2 {
  color: #fff;
  text-align: center;

  font-size: 24px;
padding-bottom: 20px;
  font-weight: 700;
  line-height: 120%; /* 28.8px */
}


@media (min-width: 1024px) {
  body {
    min-height: 100vh;
    background: url(../img/bg.png) no-repeat center top / cover;
  }

  .quiz-img {
  width: 100%;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);

}

  .question {
    font-size: 24px;
  }

  main {
    padding: 140px 40px 40px;
    border-radius: 30px;
    background: #fff;
    margin: 20px auto;
    width: 100%;
    position:relative;
  }

  .sub-answer {
    font-size: 16px;
    text-align: center;
    line-height: 140%;
  }

  .answer {
    font-size: 20px;
    padding: 20px;
  }

  .quiz-step {

  }

  .quiz {
    padding: 30px;
  }

  section {
    padding: 30px 100px;
  }

  header {
    padding: 20px 100px;
  }

  .logo {
    width: 100px;
  }

  .start-flexer {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
  }

  .start-flexer > * {
    width: 100%;
  }

  h1 {
    font-size: 40px;
  }
  .subtitle {
    font-size: 22px;
  }
  .btn {
    font-size: 24px;
  }

  .gerb,
  .actions,
  .mob {
    display: none !important;
  }

  .desk {
    display: block;
  }

  .nachat p {
    font-size: 18px;
  }

  main,
  .form-wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 50px;
  }
  main {
    margin: 0;
    gap: 100px;
    align-items: center;
  }

  .quiz {
    height: 100vh;
  }
  main {
    height: 100%;
  }

  .form-wrap {
    padding: 20px;
    border-radius: 30px;
    background: #fff;
    margin: 20px auto;
    width: 860px;
  }

  .quiz-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .topper {
    width: 100%;
    height: fit-content;
    border-radius: 40px;
    border: 1px solid #d9d9d9;
    background: #faf8f7;
    padding: 40px 37px 40px 29px;
  
  }

  .topper.flex {
    display: flex;
    height: 100%;
  flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }



  .telka-img {
    width: 100px;
  }

  .form h2 {
    font-size: 34px;
  }
}

    .form {
        justify-content: center;
        height: 100%;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        border-radius: 30px;

  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(
    --1212,
    linear-gradient(205deg, #066eff 25.45%, #faf8f7 102.2%)
  );
  padding: 20px;
}

.nachat .grand {
  font-size: 24px;
  font-weight: 700;
  color: #2a486b;
  padding-bottom: 20px;
}
@media (max-width: 600px) {

  .form {
  border-radius: 24px 24px 0 0;

  }
  .topper,
  .quiz-wrap {
    border-radius: 24px;
    border: 1px solid #d9d9d9;
    background: #faf8f7;
    padding: 16px;
  }
  main {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .quiz {
    padding: 0;
  }

  .quiz-wrap {
    border-radius: 24px 24px 0 0;
    border: none;
  }

  .quiz-wrap.last {
    padding: 0;
  }

  .topper {
    margin: 0 15px;
  }

  .nachat .grand {
    font-size: 20px;
  }
}



.final {
margin: 0;
  display: none;
}