:root{
  --black-color: #000;
  --yellow-color: #f9bb4a;
  --gray-bg-color: #f3f4f6;
  --white-color: #fff;
  --dark-gray-color: #c5c7cb;
  --light-purple-color: #9994d0;
  --dark-purple-color: #2a2742;
}
body{
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--black-color);
  background-color: var(--gray-bg-color);
  padding-bottom: 30px;
}
.white-bg{
  background-color: var(--white-color);
}
.mw-420{
  max-width: 420px;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-10{
  margin-bottom: 10px;
}
.mb-16{
  margin-bottom: 16px;
}
.mb-20{
  margin-bottom: 20px;
}
.mb-26{
  margin-bottom: 26px;
}
.mb-30{
  margin-bottom: 30px;
}
.mb-40{
  margin-bottom: 40px;
}
.mb-50{
  margin-bottom: 50px;
}
.container{
  max-width: 420px;
}

/***************
Header css start
****************/
.header-area {
  padding: 16px 0;
  background-color: var(--white-color);
}
.header-area .logo img{
  max-width: 100px;
}
.header-area .header-arrow{
  max-width: 21px;
  width: 100%;
}
.wrapper-container{
  max-width: 420px;
  padding: 0 20px 20px;
}
.sw-content-area :where(h1, h2, h3, p, ul){
  margin-top: 0;
}
.sw-content-area .main-img{
  max-width: 134px;
}
.sw-content-area .title{
  font-size: 33px;
  line-height: 42px;
  font-weight: bold;
}
.sw-content-area .bottom-title{
  font-size: 30px;
  line-height: 28px;
  font-weight: bold;
}
.sw-content-area .subtitle{
  font-size: 18px;
  line-height: 20px;
  font-weight: bold;
}
.sw-content-area .subtitle > span{
  color: var(--yellow-color);
}
.sw-content-area .desc{
  font-size: 14px;
  line-height: 20px;
}
.sw-content-area .list-title{
  font-size: 18px;
  line-height: 27px;
  font-weight: bold;
  text-align: start;
  margin-bottom: 4px;
}
.sw-content-area .list-title.yellow{
  color: var(--yellow-color);
}
.sw-content-area .check-list{
  padding-right: 0px;
  list-style: none;
}
.sw-content-area .check-list .check-list-item{
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
}
.sw-content-area .check-list .check-list-item .icon{
  max-width: 12px;
  object-fit: contain;
  margin-left: 6px;
}
.sw-content-area .custom-btn{
  padding: 12px 18px;
  border: 1px solid var(--yellow-color);
  background-color: var(--yellow-color);
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  border-radius: 50px;
  color: var(--black-color);
  text-decoration: none;
}
.sw-content-area .custom-btn:hover{
  background: none;
  color: var(--yellow-color);
}
.sw-content-area .custom-btn:hover > img{
  filter: invert(94%) sepia(48%) saturate(4950%) hue-rotate(322deg) brightness(101%) contrast(100%);
}
.sw-content-area .custom-btn > img{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}
.step-header .arrow-icon, .step-prev .arrow-icon{
  max-width: 21px;
  width: 100%;
  z-index: 2;
}
.step-header .step-title{
  font-size: 17px;
  line-height: 22px;
  font-weight: bold;
  /* margin-right: -21px; */
}
.multisteps-form__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  height: 16px;
}
.multisteps-form__progress-btn {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  position: relative;
  color: var(--dark-gray-color);
  text-indent: -9999px;
  border: none;
  background-color: transparent;
  outline: none !important;
}
.multisteps-form__progress-btn:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 13px;
  height: 13px;
  content: '';
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  border: 2px solid var(--dark-gray-color);
  border-radius: 50%;
  background-color: var(--dark-gray-color);
  box-sizing: border-box;
  z-index: 3;
}
.multisteps-form__progress-btn:after {
  position: absolute;
  top: 5px;
  right: calc(-50% - 13px / 2);
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  background-color: currentColor;
  z-index: 1;
}
.multisteps-form__progress-btn:first-child:after {
  display: none;
}
.multisteps-form__progress-btn.active {
  color: var(--light-purple-color);
}
.multisteps-form__progress-btn.active:before {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--light-purple-color);
  border-color: var(--light-purple-color);
}
.step-area .step-desc{
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 26px;
}
.step-form .form-control {
  padding: 12px 20px;
  border: 1px solid var(--dark-gray-color);
  background: none;
  color: var(--black-color);
  font-size: 17px;
  line-height: 22px;
  font-weight: bold;
  border-radius: 6px;
}
.global-btn{
  padding: 12px 20px;
  border: 1px solid var(--light-purple-color);
  background: var(--light-purple-color);
  font-size: 17px;
  line-height: 22px;
  font-weight: bold;
  color: var(--white-color);
  border-radius: 6px;
}
.global-btn:hover{
  background: none;
  color: var(--light-purple-color);
}
.global-btn.dark-btn{
  background-color: var(--dark-purple-color);
  border-color: var(--dark-purple-color);
}
.global-btn.dark-btn:hover{
  background: none;
  color: var(--dark-purple-color);
}
.step-item .step-check-box{
  /* padding: 14px 18px;
  background-color: #ededf1;
  border-radius: 6px; */
  cursor: pointer;
}
.step-item .step-check-box *{
  cursor: pointer;
}
.step-item .step-check-box label > input[type="checkbox"]{
  width: 24px;
  height: 24px;
  border: 1px solid #b3b3b7;
  border-radius: 3px;
}
.step-item .step-check-box label > input[type="checkbox"]:focus{
  box-shadow: none;
}
.step-item .step-check-box label > input[type="checkbox"]:checked{
  background-color: var(--light-purple-color);
}
.step-item .step-check-box label > span{
  font-size: 17px;
  line-height: 22px;
  color: var(--black-color);
  font-weight: 400;
  text-align: center !important;
  width: calc(100% - 32px);
  padding-right: 30px;
}
.advise-sec{
  background-color: #d4d2eb;
}
.advise-img{
  max-width: 62px;
  object-fit: contain;
}
.advise-content{
  font-size: 26px;
  line-height: 40px;
  color: var(--black-color);
  font-weight: 400;
}

.multisteps-form__form {
  position: relative;
}
 
.multisteps-form__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.multisteps-form__panel.active {
  height: auto;
  opacity: 1;
  visibility: visible;
}
.step-prev.js-btn-prev{
  width: 21px;
  padding: 0;
  border: none;
  background: none;
  position: absolute;
  top: -115px;
  right: 0;
}

label.form-check-label.d-flex.w-100.align-items-center {
  padding: 14px 18px;
  background-color: #ededf1;
  border-radius: 6px;
}