@font-face {
      font-family: 'Helvetica Neue';
      src: url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'),
            url('../fonts/HelveticaNeue-Medium.woff') format('woff');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
}

@font-face {
      font-family: 'Helvetica Neue';
      src: url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'),
            url('../fonts/HelveticaNeue-Bold.woff') format('woff');
      font-weight: bold;
      font-style: normal;
      font-display: swap;
}

@font-face {
      font-family: 'Helvetica Neue';
      src: url('../fonts/HelveticaNeue-Heavy.woff2') format('woff2'),
            url('../fonts/HelveticaNeue-Heavy.woff') format('woff');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
}

@font-face {
      font-family: 'Helvetica Neue';
      src: url('../fonts/HelveticaNeue-Roman.woff2') format('woff2'),
            url('../fonts/HelveticaNeue-Roman.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
}

@font-face {
      font-family: 'Helvetica Neue';
      src: url('../fonts/HelveticaNeue-Black.woff2') format('woff2'),
            url('../fonts/HelveticaNeue-Black.woff') format('woff');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
}

/* Custom Reset */
* {
      box-sizing: border-box;
}

body {
      font-family: 'Helvetica Neue';
      font-weight: normal;
      margin: 0;
      padding: 0px;
      background: url(../images/body-bg.png);
      background-repeat: no-repeat;
      background-size: cover;
      box-sizing: border-box;
}

a.active,
a:focus,
button:focus,
button.active {
      outline: none;
}

a {
      text-decoration: none;
}

a:focus,
a:hover,
a:active {
      outline: 0;
      box-shadow: none;
}

a:focus,
a:hover {
      text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
      margin: 0;
      padding: 0;
}

a {
      text-decoration: none;
      transition: all 0.5s ease-in-out;
}

a:hover {
      text-decoration: none;
}

ul,
ol {
      margin: 0;
      padding: 0;
      list-style: none;
}

ul li {
      list-style: none;
}

p {
      margin: 0;
      padding: 0;
}

input:focus,
select:focus,
textarea:focus {
      outline: none;
}

img {
      border-style: none;
      display: inline-block;
      max-width: 100%;
      height: auto;
}

.wized-container {
      max-width: 1340px;
      margin: 0 auto;
      padding: 0px 20px;
}

.wized-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.wized-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      max-width: 800px;
      margin: 48px auto;
      position: relative;
      z-index: 1;
}

.wized-list li {
      position: relative;
      z-index: 1;
      width: 25%;
}

.wized-list li::after {
      content: '';
      background-color: #262626;
      height: 6px;
      position: absolute;
      right: -55%;
      top: 10px;
      z-index: -1;
      width: 100%;
}

.wized-list li:last-child::after {
      content: none;
}

.wized-list li .circle {
      background: #000000;
      border: 1px solid #0F0F0F;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px;
      border-radius: 50%;
      margin: 0 auto 15px;
}

.wized-list li .circle span {

      background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

.wized-list li.active .circle span {
      color: #000000;
      background: none;
      -webkit-text-fill-color: inherit;
      display: block;
      padding-top: 1px;
}

.wized-list li.active .circle {
      color: #000000;
      background: linear-gradient(180deg, #C8951A 15%, #F6C305 83.75%);
}

.wized-list li h6 {
      background: linear-gradient(180deg, #FFF 15%, #999 83.75%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "Helvetica Neue";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 15px;
      text-align: center;
}

.wized-body {
      border: 1px solid rgba(38, 38, 38, 0.50);
      background: #0F0F0F;
      padding: 36px;
}

.wized-body h2 {
      background: linear-gradient(180deg, #FFF 15%, #999 83.75%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: "Helvetica Neue";
      font-size: 28px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      margin-bottom: 8px;
}

.wized-body p {
      color: #BCBAC0;
      font-family: "Helvetica Neue";
      font-size: 16px;
      font-style: normal;
      margin-bottom: 20px;
      font-weight: 400;
      line-height: normal;
}

.mb-32 {
      margin-bottom: 32px !important;
}

.form .form-label {
      color: var(--Gray-violet-100, #BCBAC0);
      font-family: "Helvetica Neue";
      font-size: 14px;
      margin-bottom: 8px;
      flex: 1;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      display: block;
}

.form .form-label span {
      color: #DC0008;

}

.color-red {
      color: #DC0008;
}

.tick-icon {
      display: none;
}

.wized-list li.active.complete .circle span {
      display: none;
}

.wized-list li.active.complete .tick-icon {
      display: block;
}

.wized-list li.active::after {
      background: #262626;
}

.wized-list li.active.complete::after {
      background: linear-gradient(180deg, #C8951A 15%, #F6C305 83.75%);
}

.form .form-control {
      color: #fff;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: -0.32px;
      border: 1px solid #262626;
      box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
      height: 44px;
      width: 100%;
      max-width: 320px;
      background-color: #1D1D1D;
      padding: 10px 12px;
}

.btn-back:hover {
      color: #000000;
      background: linear-gradient(90deg, #C8951A 15%, #F6C305 83.75%);
}

.form-check-input:checked[type=checkbox] {
      background-image: url(../images/tick-icon2.svg);
      background-position: center;
}

.btn-primary {
      padding: 12px;
      font-size: 16px;
      line-height: 24px;
      font-weight: normal;
      color: #000000;
      background: linear-gradient(180deg, #C8951A 15%, #F6C305 83.75%);
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 160px;
      border: none;
      height: 48px;
      width: fit-content;
}

.btn-primary:hover {
      color: #000000;
      background: linear-gradient(90deg, #C8951A 15%, #F6C305 83.75%);
}

.form {
      margin-bottom: 32px;
}

.form-check .form-check-input {
      background: #1D1D1D;
      border: 1px solid #262626;
      width: 16px;
      height: 16px;
      margin: 0px;
}

.form-check {
      padding: 0px;
      margin: 0 0 10px 0;
      display: flex;
      align-items: center;
      grid-gap: 10px;
}

.form-check .form-label {
      margin-bottom: 0px;
}

.form-check-input:checked[type=radio] {
      background-image: url(../images/check-bg.svg);
      background-size: 16px;
      background-position: center;
}

.progress-circle {
      --size: 100px;
      --thickness: 10px;
      --percent: 0;

      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
}

.progress-circle::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: #2a2a2a;
}

.progress-container {
      position: relative;
}

.progress-container::after {
      content: '';
      background: #0F0F0F;
      border-radius: 50%;
      width: 74px;
      height: 74px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.progress-circle::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(#e5bc58 0%,
                  #F6C305 calc(var(--percent) * 1%),
                  transparent 0);
      mask: radial-gradient(farthest-side,
                  transparent calc(100% - var(--thickness)),
                  #000 calc(100% - var(--thickness)));
      -webkit-mask: radial-gradient(farthest-side,
                  transparent calc(100% - var(--thickness)),
                  #000 calc(100% - var(--thickness)));
      transition: all 0.4s ease;
}


.progress-container span {
      font-family: "Helvetica Neue";
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: 15px;
      /* 83.333% */
      background: linear-gradient(180deg, #FFF 15%, #999 83.75%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 999;
}

.step-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
}

.btn-back {
      border: 1px solid #262626 !important;
      background: #101010;
      color: var(--Gray-violet-50, #EAE9EB);
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 160px;
      border: none;
      height: 48px;
      width: fit-content;
}

.btn-list {
      display: flex;
      grid-gap: 12px;
}

.wizard-step,
.inner-step {
      display: none;
}

.wizard-step.active {
      display: block;
}

.inner-step.active {
      display: block;
}

.wizard-error {
      background: #ff4d4d;
      color: white;
      padding: 10px 15px;
      margin-bottom: 20px;
      border-radius: 6px;
      display: none;
}

.error-msg {
      color: #ff4d4d;
      font-size: 14px;
      margin-top: 5px;
}

.input-error {
      border: 1px solid #ff4d4d !important;
}

.thankyou-box {
      max-width: 400px;
      margin: 0 auto;
      border: 1px solid rgba(38, 38, 38, 0.5);
      padding: 41px 16px;
      text-align: center;
      width: 100%;
      background-color: rgba(15, 15, 15, 1);
}

.thankyou-box h4 {
      margin: 29px 0px 4px;
      font-size: 28px;
      font-weight: 500;
      background: linear-gradient(180deg, #FFF 15%, #999 83.75%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

.thankyou-box p {
      font-size: 16px;
      font-weight: 400;
      background: linear-gradient(180deg, #FFF 15%, #999 83.75%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

.thankyou-page {
      padding-top: 38px;
}

.thankyou-inner {
      height: calc(100vh - 111px);
      display: flex;
      align-items: center;
      justify-content: center;
}

.mb-20 {
      margin-bottom: 20px !important;
}

.checkbox-limit-error {
      color: #ff4d4d;
      font-weight: normal;
}