@font-face {
    font-family: Golos;
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Regular.eot);
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Regular.eot#iefix) format("embedded-opentype"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Regular.woff2) format("woff2"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Regular.woff) format("woff"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Golos;
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Medium.eot);
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Medium.eot#iefix) format("embedded-opentype"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Medium.woff2) format("woff2"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Medium.woff) format("woff"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Golos;
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Bold.eot);
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Bold.eot#iefix) format("embedded-opentype"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Bold.woff2) format("woff2"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Bold.woff) format("woff"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Golos;
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_DemiBold.eot);
    src: url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_DemiBold.eot#iefix) format("embedded-opentype"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_DemiBold.woff2) format("woff2"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_DemiBold.woff) format("woff"), url(https://testpro.io/wp-content/themes/testpro/assets/fonts/Golos-Text_DemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

body {
    font-family: Nunito Sans, sans-serif;
    font-size: 1.8rem;
    color: #001b37;
    font-weight: 400;
    line-height: normal
}

h1, h2, h3, h4, h5, h6, th {
    font-family: Golos, sans-serif;
    color: #001b37;
    font-weight: 700;
    -webkit-font-smoothing: antialiased !important
}

b {
    font-weight: 700
}

h1 {
    line-height: 3rem
}

h1, h3 {
    font-size: 2.4rem
}

h3 {
    line-height: 3.2rem
}

h4 {
    font-size: 1.6rem;
    line-height: 2.4rem
}

p {
    font-family: Nunito Sans, sans-serif;
    font-size: 1.8rem;
    line-height: 2.5rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased !important
}

p.lg {
    font-size: 2rem;
    line-height: 2.8rem
}

p.sm {
    font-size: 1.6rem;
    line-height: 2.4rem
}

.btn {
    -webkit-box-align: center;
    -ms-flex-align: center;
    width: 100%;
    height: 56px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 1.6rem;
    font-family: Golos, sans-serif;
    padding: 0;
    line-height: 56px;
    max-width: 170px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.btn, .btn:active, .btn:focus, .btn:hover, .btn:visited {
    color: #fff;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important
}

.btn:active, .btn:focus, .btn:hover, .btn:visited {
    opacity: .9
}

.btn-primary {
    background: #f55;
    border-color: transparent;
    color: #fff;
    float: right
}

.btn-primary img {
    margin-left: 10px
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-primary:visited {
    background: #f55;
    border-color: transparent
}

.btn-secondary {
    background: transparent;
    border-color: transparent;
    color: #f55;
    float: left;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    padding: 16px 0;
    width: auto;
    outline: none !important
}

.btn-secondary img {
    margin-right: 10px
}

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover, .btn-secondary:visited {
    background: transparent;
    border-color: transparent;
    color: #f55;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 1
}

html {
    scroll-behavior: smooth;
    font-size: 62.5% !important
}

@media (max-width: 576px) {
    html {
        font-size: 57.25% !important
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #3f3f3f;
    scroll-behavior: smooth
}

blockquote, dd, div, dl, dt, form, li, ol, pre, td, th, ul {
    margin: 0;
    padding: 0
}

.container {
    width: 100%;
    max-width: 1440px
}

@media (max-width: 1300px) {
    br {
        display: none
    }

    br.mobile {
        display: block
    }
}

.hero {
    padding: 0;
    margin: 0
}

.hero .left-bar {
    background: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff)), #fafaff;
    background: linear-gradient(0deg, #fff, #fff), #fafaff;
    min-height: 100vh;
    height: 100%
}

@media (max-width: 767px) {
    .hero .left-bar {
        min-height: auto;
        height: auto
    }
}

.hero .form-steps {
    padding: 64px 48px;
    border-radius: 30px
}

.hero .form-steps .d-flex {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.hero .form-steps h1 {
    margin-left: 20px
}

.hero .form-steps h3 {
    color: #939598;
    margin-top: 40px;
    text-transform: unset;
    font-weight: 600
}

.hero .form-steps h3 span {
    color: #3d4ed7
}

.hero .form-steps p.help-txt {
    margin-top: 24px;
    color: #001b37;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 4px
}

.hero .form-steps .steps-indicator {
    width: 100%;
    gap: 4px
}

.hero .form-steps .steps-indicator div {
    width: 25%;
    height: 5px;
    background: rgba(147, 149, 152, .4);
    border-radius: 6px
}

.hero .form-steps .steps-indicator div.dark {
    background: #3d4ed7
}

.hero .form-steps ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.hero .form-steps ul li {
    background: rgba(147, 149, 152, .1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #939598;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    font-family: Nunito Sans, sans-serif;
    margin-bottom: 10px
}

.hero .form-steps ul li.active {
    background: #3d4ed7;
    color: #fff;
    font-weight: 700;
    background-image: url(../img/white-arrow-icon.svg);
    background-repeat: no-repeat;
    background-position: 96%
}

.hero .form-steps ul li.done {
    background: #e1e2f9;
    color: #001b37;
    background-image: url(../img/blue-check-icon.svg);
    background-repeat: no-repeat;
    background-position: 96%
}

.hero .form-content {
    padding: 64px 68px;
    background: #fafaff;
    min-height: 100vh;
    height: 100%
}

.hero .form-content .rating-icons {
    max-width: 746px;
    padding: 0 40px;
    margin-left: -60px
}

.hero .form-content .rating-icons div {
    width: 25%;
    text-align: center
}

.hero .form-content .rating-icons div img {
    margin: auto
}

.hero .form-content .rating-icons.last {
    max-width: 810px;
    margin-left: -30px
}

.hero .form-content .hubspot-box {
    min-width: 745px;
    min-height: 550px;
    width: 100%;
    height: 100%;
    background: #fff;
    margin-top: 40px
}

.hero .form-content .iti {
    display: block;
    margin-bottom: 24px
}

.hero .form-content .iti .iti__arrow {
    margin-left: 3px
}

.hero .form-content .iti input.form-control {
    padding-left: 50px
}

.hero .form-content .iti label.error {
    top: -24px
}

.hero .form-box {
    margin-top: 64px;
    max-width: 746px;
    padding-top: 40px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative
}

.hero .form-box.last {
    text-align: center;
    margin-top: 0;
    max-width: 810px;
    padding: 40px 0
}

.hero .form-box.last p.lg {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 0
}

.hero .form-box.last p.desc {
    font-weight: 600;
    font-size: 18px;
    line-height: 28px
}

.hero .form-box.last h2 {
    font-size: 28px;
    line-height: 36px;
    color: #3d4ed7;
    margin-bottom: 32px
}

.hero .form-box.last .last-stepper {
    width: 810px;
    margin: auto auto 40px
}

.hero .form-box.last .last-stepper div.step {
    width: 190px
}

.hero .form-box.last .last-stepper div.step .number {
    position: relative;
    background: #f55;
    border-radius: 48px;
    width: 48px;
    height: 48px;
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 47px;
    font-family: Golos, sans-serif;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto auto 12px
}

.hero .form-box.last .last-stepper div.step .number img {
    position: absolute;
    width: 36px;
    height: 36px;
    top: -10px;
    right: -15px
}

.hero .form-box.last .last-stepper div.step p {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px
}

.hero .form-box.last .last-stepper div.separator {
    width: 120px;
    padding-top: 24px
}

.hero .form-box.last .last-stepper div.separator div {
    background-image: url(../img/thankyou-progressbar.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    height: 10px
}

.hero .form-box h3 {
    width: auto;
    background: #f7fafd;
    display: initial;
    padding-right: 12px;
    position: absolute;
    top: -16px;
    left: 0;
    font-weight: 600
}

.hero .form-box h3 span {
    color: #3d4ed7
}

.hero .form-box h4 {
    font-size: 3.2rem;
    line-height: 3.8rem;
    margin-bottom: 24px
}

.hero .form-box h5, .hero .form-box p {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px
}

.hero .form-box p {
    font-weight: 400;
    color: #030c1f;
    font-family: Nunito Sans, sans-serif
}

.hero .form-box p.w-space-btm {
    margin-bottom: 49px
}

.hero .form-box p.w-space {
    margin-top: 40px
}

.hero .form-box form .form-group {
    position: relative
}

.hero .form-box form label, .hero .form-box form p,
.hero .form-box form label.error {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #030c1f;
    margin-bottom: 4px
}

.hero .form-box form label span, .hero .form-box form p span {
    color: #ff2020
}

.hero .form-box form label.error, .hero .form-box form p.error {
    text-align: right;
    width: 100%;
    right: 0;
    display: block;
    color: #e30707;
    font-size: 13px;
    position: absolute;
    top: 0
}

.hero .form-box form p {
    margin-bottom: 16px
}

.hero .form-box form p.sm {
    font-size: 1.4rem
}

.hero .form-box form p.th {
    font-weight: 400
}

.hero .form-box form input.form-control {
    background: #fff;
    border: 1.5px solid #bcbcbc;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 48px;
    font-family: Nunito Sans, sans-serif;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.hero .form-box form input.form-control::-webkit-input-placeholder {
    color: #bcbcbc;
    font-size: 16px
}

.hero .form-box form input.form-control::-moz-placeholder {
    color: #bcbcbc;
    font-size: 16px
}

.hero .form-box form input.form-control:-ms-input-placeholder {
    color: #bcbcbc;
    font-size: 16px
}

.hero .form-box form input.form-control::-ms-input-placeholder {
    color: #bcbcbc;
    font-size: 16px
}

.hero .form-box form input.form-control::placeholder {
    color: #bcbcbc;
    font-size: 16px
}

.hero .form-box form input.form-control.valid {
    background-image: url(../img/check-mark-icon.original.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 100%;
    background-position-x: calc(100% - 3px);
    border: 1px solid #0c8d0c !important;
    padding-left: 15px;
    padding-right: 25px
}

.hero .form-box form input.form-control.error {
    border: 1px solid #e30707 !important
}

.hero .form-box form h4 {
    margin-bottom: 16px
}

.hero .form-box form .form-check {
    margin-bottom: 15px
}

.hero .form-box form .form-check label {
    font-weight: 400;
    font-family: Nunito Sans, sans-serif
}
.hero .form-box form .form-check label.error {
    font-weight: 700;
    width: fit-content;
    padding: 0 0 0 32px;
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0) 0%, rgb(250 250 255) 18%);
}

.hero .form-box form .form-check .form-check-input:disabled {
    background: hsla(0, 0%, 73.7%, .5);
    border-color: hsla(0, 0%, 73.7%, .5)
}

.hero .form-box form .form-check.selected label {
    font-weight: 500
}

.hero .form-box form .form-check-input[type=radio] {
    height: 22px;
    width: 22px;
    min-width: 22px;
    min-height: 22px;
    top: -3px;
    position: relative;
    margin-right: 12px
}

.hero .form-box form .form-check-input:checked[type=radio] {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important
}

.hero .form-box form .form-check-input[type=checkbox] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    position: relative;
    top: -3px;
    border-radius: 4px;
    margin-right: 12px
}

.hero .form-box form .form-check-input:checked[type=checkbox] {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important
}

.hero .form-box form .d-flex .form-check {
    width: 185px;
    margin-bottom: 0
}

.hero .form-box form .d-flex label {
    font-weight: 400 !important;
    line-height: 2rem
}

.hero .form-box form .d-flex .form-check-input[type=checkbox] {
    width: 22px;
    height: 22px;
    margin-bottom: 16px
}

.hero .form-box form .d-flex input.form-control {
    top: -12px;
    position: relative
}

.hero .form-box form .form-group.d-flex {
    margin-top: 16px;
    margin-bottom: 64px
}

.hero .form-box form .form-group.d-flex label {
    width: 300px
}

.hero .form-box form .btn-box {
    margin-top: 65px
}

.hero .form-box form .btn-box .col-md-6:first-child {
    text-align: left
}

.hero .form-box form .btn-box .col-md-6:last-child {
    text-align: right
}

.hero .form-box form .btn-box.single .btn-primary {
    float: left;
    margin-top: 40px;
    margin-bottom: 12px;
    border-radius: 5px;
    width: 254px;
    max-width: 100%
}
.form-box p strong {
    color: #f55;
}
select.form-select-lg {
    height: 48px;
    font-weight: 400;
    font-size: 16px;
}

@media (max-width: 1199px) {
    .hero .form-steps {
        padding: 40px 10px
    }

    .hero .form-steps h1 {
        font-size: 20px;
        line-height: 1.2
    }

    .hero .form-content {
        padding: 24px
    }

    .hero .form-content .rating-icons {
        padding: 0 20px;
        gap: 24px;
        margin: auto
    }

    .hero .form-content .rating-icons div img {
        width: 100% !important;
        height: auto !important;
        margin: auto
    }

    .hero .form-content .form-box .form-check {
        margin-left: 15px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media (max-width: 767px) {
    .hero {
        margin-bottom: 0;
        padding-bottom: 0
    }

    .hero .col-sm-12 {
        padding: 0
    }

    .hero .form-steps {
        padding: 32px 16px 20px;
        min-height: auto;
        height: auto
    }

    .hero .form-steps h1 {
        font-size: 22px;
        line-height: 24px;
        margin-left: 12px
    }

    .hero .form-steps h3 {
        margin-top: 24px
    }

    .hero .form-steps img {
        width: 46.67px;
        height: 40px
    }

    .hero .form-steps p {
        font-family: Golos, sans-serif;
        font-weight: 500;
        padding-bottom: 8px
    }

    .hero .form-steps p span {
        color: #030c1f
    }

    .hero .form-steps .mob-steps {
        width: 100%;
        margin-top: 8px
    }

    .hero .form-steps .mob-steps div {
        width: 50%;
        font-size: 12px;
        line-height: 16px;
        font-family: Nunito Sans, sans-serif
    }

    .hero .form-steps .mob-steps div:first-child {
        text-align: left;
        color: #3d4ed7;
        font-weight: 700
    }

    .hero .form-steps .mob-steps div:last-child {
        text-align: right;
        color: #939598;
        font-weight: 600
    }

    .hero .form-content {
        margin-bottom: 0;
        padding: 12px 16px 10px;
        min-height: auto;
        height: auto
    }

    .hero .form-content .rating-icons, .hero .form-content .rating-icons.last {
        padding: 0 15px;
        max-width: 320px;
        margin-left: auto
    }

    .hero .form-content .hubspot-box {
        min-width: 100%;
        min-height: 300px;
        width: 100%;
        height: 100%
    }

    .hero .form-content .form-box {
        margin-top: 30px;
        margin-bottom: 0;
        padding: 24px 0 0
    }

    .hero .form-content .form-box h3 {
        font-size: 18px;
        line-height: 32px
    }

    .hero .form-content .form-box p {
        margin-bottom: 16px
    }

    .hero .form-content .form-box p.w-space {
        margin-top: 16px
    }

    .hero .form-content .form-box .form-check {
        margin-left: 15px
    }

    .hero .form-content .form-box form p.sm {
        font-size: 1.6rem
    }

    .hero .form-content .form-box form .d-flex {
        display: block !important
    }

    .hero .form-content .form-box form .d-flex .form-check {
        margin-bottom: 20px
    }

    .hero .form-content .form-box form .d-flex input.form-control {
        top: 8px
    }

    .hero .form-content .form-box .form-group.d-flex {
        margin-bottom: 40px
    }

    .hero .form-content .form-box .btn-box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin-top: 40px
    }

    .hero .form-content .form-box .btn-box.single {
        -webkit-box-orient: unset;
        -webkit-box-direction: unset;
        -ms-flex-direction: unset;
        flex-direction: unset
    }

    .hero .form-content .form-box .btn-box.single p {
        text-align: center;
        font-size: 16px;
        line-height: 20px;
        color: #030c1f;
        font-family: Golos, sans-serif
    }

    .hero .form-content .form-box .btn-box .btn {
        width: 100% !important;
        max-width: 100%;
        text-align: center;
        float: none !important;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-bottom: 8px;
        font-size: 18px
    }

    .hero .form-content .form-box.last {
        max-width: none;
        margin-top: 0
    }

    .hero .form-content .form-box.last p.lg {
        font-size: 18px;
        line-height: 28px
    }

    .hero .form-content .form-box.last p.desc {
        font-size: 16px;
        line-height: 24px;
        max-width: 800px;
        margin: auto
    }

    .hero .form-content .form-box.last h2 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 20px
    }

    .hero .form-content .form-box.last .last-stepper {
        margin-top: 50px;
        max-width: 100%;
        width: 100%
    }

    .hero .form-content .form-box.last .last-stepper div.step {
        width: 100%;
        margin-bottom: 28px
    }

    .hero .form-content .form-box.last .last-stepper div.step p {
        font-size: 16px;
        line-height: 24px
    }
}