.how-refer {position: relative;min-height: 100%;}
.how-refer:before {content: '';position: absolute;top: 0;right: -15px;bottom: 0;background: rgba(197, 237, 221, 0.6);left: -2000px;z-index: -1;display: none;}
.section--how-do-refer .container{background-color: rgba(232, 239, 249, 1);}
.how-refer ol {list-style: none;counter-reset: my-awesome-counter;padding: 0;}
.how-refer ol li {color: #0E1122;margin-top: 5rem;counter-increment: my-awesome-counter;display: flex;list-style: none;margin-bottom: 0;font-size: 20px;position: relative;padding: 0 0.5rem 1.5rem 4.5rem;max-width: 420px;}
.how-refer ol li::before {content: counter(my-awesome-counter) ". ";font-size: 60px;font-weight: 700;font-family: 'Abril Display';line-height: 1.2;position: absolute;top: 0;left: 0;}
@media (max-width: 991.98px) {
    .how-refer:before {right: -100px}
    .form .back {display: block;text-align: center;}
}

.form-control, .form-select {font-size: 1em;font-family: 'Poppins', sans-serif;font-weight: 300;line-height: 160%;border: none;padding-left: 0;height: auto;border-radius: 0;background-color: transparent;border-bottom: 1px solid rgba(22, 32, 91, 0.6);outline: none;box-shadow: none;margin-bottom: 2rem;}
.form-control:hover, .form-control:active, .form-control:focus, .form-control:focus:active, .form-control.active {border-color: rgba(22, 32, 91, 1);outline: none;box-shadow: none;}
.form .btn {margin-top: 1rem;margin-bottom: 1rem;}
.form-control::-webkit-input-placeholder {color:#6e6e6e;}
.form-control::-moz-placeholder          {color:#6e6e6e;}
.form-control:-moz-placeholder           {color:#6e6e6e;}
.form-control:-ms-input-placeholder      {color:#6e6e6e;}
.form-file {margin-bottom: 26px;}
.form-note {font-size: 12px;text-align: center; color: #868890;}
.form .back {font-size: 18px;color:#0e1122;letter-spacing: normal;text-transform: capitalize;font-weight: 600;}
@media (max-width: 767px) {
    .form-control, .form-select {margin-bottom: 40px;}
}

.section--how-do-refer .form .btn {
	font-size: 16px !important;	
	min-width: 171px !important;

}
.section--how-do-refer a {
	color: #4c57ff;
}
.section--how-do-refer a:hover {
	text-decoration: none;
}
.how-do-refer__row > *:first-child {
	order: -2;
}
.how-do-refer__row:before {
	content: '';
	display: block; 
	order: -1;
	border-top: 1px solid #4C57FF;
}

@media screen and (max-width: 991px) {
	.how-do-refer__row:before {
		margin: 0 auto;
		width: 70%;
	}
}
@media screen and (min-width: 992px) {
	.how-do-refer__row:before {
		width: 0; 
		box-shadow: 0 0 0 1px #4C57FF;
		margin: 4rem 0 5rem;
		border: none;
	}

}

@media screen and (min-width: 1400px) {
	.how-do-refer__row {
		max-width: 1060px;
		margin: 0 auto;
	}
}

.form-control, .form-select {
	padding-left: 8px;
	padding-right: 8px;
}
.form-control:focus {
	background-color: transparent;
}


.section--how-do-refer form {
  display: flex;
  flex-direction: column;
}

.section--how-do-refer form > * {
  width: 100%;
}

.section--how-do-refer form .form-note {
  order: 1;
}

.section--how-do-refer .back {
  text-align-last: left !important;
}

.section--how-do-refer h3,
.section--how-do-refer .h3 {
  font-size: 24px;
}

.section--how-do-refer .wpcf7-response-output {
  background: #dae6ff;
  border-radius: 8px;
  min-height: 56px;
  border-color: #dae6ff !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 12px;
  color: #0e1122;
  width: auto;
  padding: 8px 12px  8px 14px !important;
  display: flex;
  align-items: center;
  gap: 18px;
  line-height: 1.6;
  min-width: auto !important;
}

.section--how-do-refer form.invalid .wpcf7-response-output,
.section--how-do-refer form.spam .wpcf7-response-output {
  max-width: 237px;
  width: 100%;
}

.section--how-do-refer form.invalid .wpcf7-response-output:before,
.section--how-do-refer form.spam .wpcf7-response-output:before {
  content: '' !important;
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: block !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 2.25a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5zM.25 10.5C.25 5.115 4.615.75 10 .75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S.25 15.885.25 10.5zM10 6.15a.75.75 0 0 1 .75.75v3.6a.75.75 0 0 1-1.5 0V6.9a.75.75 0 0 1 .75-.75zm-.75 7.95a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5H10a.75.75 0 0 1-.75-.75z' fill='%23F66C6C'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.section--how-do-refer form.sent .wpcf7-response-output {
  padding: 18px !important;
}

.section--how-do-refer form.sent .wpcf7-response-output:before {
  content: '' !important;
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: block !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 1.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5zM.25 10C.25 4.615 4.615.25 10 .25s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S.25 15.385.25 10z' fill='%2306937A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.827 6.466a.75.75 0 0 1 .007 1.06l-5.912 6a.75.75 0 0 1-1.069 0L5.166 10.8a.75.75 0 1 1 1.068-1.053l2.154 2.185 5.378-5.457a.75.75 0 0 1 1.06-.008z' fill='%2306937A'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

@media screen and (min-width: 576px) {
  .section--how-do-refer .wpcf7-response-output {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
}

@media screen and (min-width: 768px) {
  .section--how-do-refer h3,
  .section--how-do-refer .h3 {
    font-size: 32px;
  }
}

@media screen and (max-width: 767px) {
  .section--how-do-refer .how-refer ol li {
    font-size: 16px;
    padding-left: 50px;
  }

  .section--how-do-refer .how-refer ol li::before {
    font-size: 48px;
  }

  .section--how-do-refer h3,
  .section--how-do-refer .h3 {
    margin-top: 0 !important;
  }
}


.section--how-do-refer .wpcf7-form-control-wrap {
  flex-direction: column;
  margin-bottom: 2rem;
}

.section--how-do-refer .wpcf7-form-control-wrap .form-control {
  margin-bottom: 0;
}

.section--how-do-refer .wpcf7-form-control-wrap .form-control:focus::placeholder,
.section--how-do-refer .wpcf7-form-control-wrap .form-control:not(:placeholder-shown) {
  color: #0E1122 !important;
}

.section--how-do-refer .wpcf7-form-control-wrap .wpcf7-not-valid,
.section--how-do-refer .wpcf7-form-control-wrap .wpcf7-not-valid::placeholder {
  color: #868890;
}
  
.section--how-do-refer .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  margin-top: 6px;
}