.user_form h6 {
    font-size  : 22px;
    font-weight: 600;
    line-height: 32.78px;
    color      : #E55C28;
}

.user_form p {
    font-size  : 14px;
    font-weight: 500;
    line-height: 24.5px;
    color      : #323232;
}

/*form styles*/
.active {
    background-color: unset !important;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}

#msform input,
#msform textarea {
    padding: 15px;

    border-radius: 6px;
    margin-bottom: 10px;
    width        : 100%;
    box-sizing   : border-box;
    font-family  : montserrat;
    color        : #2C3E50;
    font-size    : 13px;
    border       : none;
}

/*#msform .action-button {
     width          : 100px;
     background     : #27AE60;
     font-weight    : bold;
     color          : white;
     border         : 0 none;
     border-radius  : 1px;
     cursor         : pointer;
     padding        : 10px;
     margin         : 10px 5px;
     text-decoration: none;
     font-size      : 14px;
}*/

.step-2 {
    width: 100% !important;
}

.fs-title {
    font-size     : 15px;
    text-transform: uppercase;
    color         : #2C3E50;
    margin-bottom : 10px;
}

.fs-subtitle {
    font-weight  : normal;
    font-size    : 13px;
    color        : #666;
    margin-bottom: 20px;
}

#progressbar {

    overflow       : hidden;
    counter-reset  : step;
    padding-top    : 20px;
    display        : flex;
    justify-content: center;
    text-align     : center;
    width          : 96%;
    margin-bottom  : 0px;
}

li {
    list-style: none;
}

#progressbar li {
    list-style-type: none;
    color          :
        #C6C6C6 !important;
    text-transform: uppercase;
    font-size     : 12px;
    width         : 15%;
    float         : left;
    position      : relative;
    font-weight   : 700;
}

#progressbar li:before {
    content          : counter(step);
    counter-increment: step;
    width            : 31px;
    line-height      : 31px;
    display          : block;
    font-size        : 10px;
    color            : #333;
    background       : white;
    border-radius    : 3px;
    margin           : -5px auto 5px auto;
    text-align       : center;
}

#progressbar li:after {
    content   : '';
    width     : 100%;
    height    : 2px;
    background: rgb(122, 122, 122);
    position  : absolute;
    left      : -50%;
    top       : 9px;
    z-index   : -1;
}

#progressbar li:first-child:after {
    content: none;
}

#progressbar li.active:before,
#progressbar li.active:after {
    background   : black;
    color        : white;
    border-radius: 50%;
    font-size    : 14px;

}



.customer {
    font-size  : 18px;
    font-weight: 600;
}

.mail-phone li {
    font-size  : 16px !important;
    font-weight: 600 !important;
    line-height: 30px;
    display    : flex;
}

.mail-phone li p {
    font-size  : 16px !important;
    font-weight: 600 !important;
    line-height: 30px;
}

/*  secornd step */

#progressbar1 li:before {
    content          : counter(step);
    counter-increment: step;
    width            : 31px;
    line-height      : 31px;
    display          : block;
    font-size        : 10px;
    color            : #333;
    background       : white;
    border-radius    : 50%;

    text-align: center;
}

#progressbar1 li {
    list-style-type: none;
    display        : flex;
    text-transform : uppercase;
    font-size      : 13px;
    align-items    : baseline;
    margin-bottom  : 62px;
    position       : relative;
}

#progressbar1 li:after {
    content   : '';
    width     : 2px;
    height    : 52px;
    background: rgb(234 226 226);
    position  : absolute;
    left      : 2%;
    top       : 10px;
    z-index   : -1;
}

#progressbar1 li:first-child:after {
    content: none;
}

#progressbar1 li p {
    display    : inline-block;
    color      : white;
    margin-left: 20px;
}

#progressbar1 li.active:before,
#progressbar1 li.active:after {
    background   : #E55C28;
    color        : white;
    border-radius: 50%;
    font-size    : 14px;

}

#progressbar1 {
    overflow     : hidden;
    counter-reset: step;
    margin-top   : 40px;

    justify-content: center;
}

.first {
    position        : relative;
    top: -100px;
    left: 38%;
    background-color: #E55C28;
    color           : #fff;
    width           : 180px;
    height          : 50px;
    margin-top      : 20px;
    border          : none;
    border-radius   : 7px;
}
fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    min-height: 500px;
}
.progress-first h2 {
    font-size  : 20px;
    font-weight: 700;
}

fieldset button,
fieldset .submit1 {
    background-color: #E55C28;
    color           : #fff;
    width           : 180px;
    height          : 50px;
    margin-top      : 20px;
    border          : none;
    border-radius   : 7px;

}

fieldset .submit1 {
    background-color: #E55C28;
    color           : #fff;
    width           : 180px;
    height          : 50px;
    margin-top      : 20px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    border          : none;
    border-radius   : 7px;

}

/*  step process */

.card0 {
    background-color: #F5F5F5;
    border-radius   : 8px;
    z-index         : 0
}

.card00 {
    z-index: 0
}

.card1 {
    margin-left : 140px;
    z-index     : 0;
    border-right: 1px solid #F5F5F5
}

.card2 {
    display: none
}

.card2.show {
    display: block
}

.social {
    border-radius   : 50%;
    background-color: #FFCDD2;
    color           : #E53935;
    height          : 47px;
    width           : 47px;
    padding-top     : 16px;
    cursor          : pointer
}

.progress-first input,
select {
    padding       : 2px;
    border-radius : 0px;
    box-sizing    : border-box;
    color         : #9E9E9E;
    border        : 1px solid #BDBDBD;
    font-size     : 16px;
    letter-spacing: 1px;
    height        : 50px !important
}

select {
    width        : 100%;
    margin-bottom: 85px
}

input:focus,
select:focus {
    -moz-box-shadow   : none !important;
    -webkit-box-shadow: none !important;
    box-shadow        : none !important;
    border            : 1px solid #E53935 !important;
    outline-width     : 0 !important
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #E53935
}

.form-group {
    position     : relative;
    margin-bottom: 1.5rem;
    width        : 77%
}

.form-control-placeholder {
    position  : absolute;
    top       : 0px;
    padding   : 12px 2px 0 2px;
    transition: all 300ms;
    opacity   : 0.5
}

.form-control:focus+.form-control-placeholder,
.form-control:valid+.form-control-placeholder {
    font-size       : 95%;
    top             : 10px;
    transform       : translate3d(0, -100%, 0);
    opacity         : 1;
    background-color: #fff
}

.next-button {
    width           : 18%;
    height          : 50px;
    background-color: #BDBDBD;
    color           : #fff;
    border-radius   : 6px;
    padding         : 10px;
    cursor          : pointer
}



.get-bonus {
    margin-left: 154px
}

.pic {
    width : 230px;
    height: 110px
}

#progressbar1 {
    position: absolute;
    left    : 35px;
    overflow: hidden;
    color   : #E53935
}

#progressbar1 li {
    list-style-type: none;
    font-size      : 8px;
    font-weight    : 400;
    margin-bottom  : 75px
}

#progressbar1 li:nth-child(3) {
    margin-bottom: 88px
}

#progressbar1 .step0:before {
    content: "";
    color  : #fff
}

#progressbar1 li:before {
    width          : 40px;
    height         : 40px;
    line-height    : 30px;
    display        : flex;
    font-size      : 20px;
    background     : #fff;
    border         : 2px solid #E53935;
    border-radius  : 50%;
    margin         : auto;
    justify-content: space-around;
    align-items    : center;
}

#progressbar1 li:last-child:before {
    width : 40px;
    height: 40px
}

#progressbar1 li:after {
    content      : '';
    width        : 2px;
    height       : 75px;
    background   : #ccc;
    position     : absolute;
    left         : 19px;
    top          : -85px;
    z-index      : 0;
    border-radius: 0;
}

#progressbar1 li:last-child:after {
    top   : 147px;
    height: 75px
}

#progressbar1 li:nth-child(3):after {
    top: -75px
}

#progressbar1 li:nth-child(2):after {
    top: -75px
}

#progressbar1 li:first-child:after {
    position: absolute;
    top     : -81px
}

#progressbar1 li.active:after {
    background: #E53935
}

#progressbar1 li.active:before {
    background : #E53935;
    font-family: FontAwesome;
    content    : "\f00c"
}

.tick {
    width : 100px;
    height: 100px
}

.prev {
    display      : block;
    color        : #fff;
    width        : 180px !important;
    height       : 50px;
    margin-top   : 20px;
    border       : none;
    border-radius: 7px;
    margin-left  : 35px;
    left         : 200px;
    top          : 20px;
    cursor       : pointer
}



@media screen and (max-width: 912px) {
    .card00 {
        padding-top: 30px
    }

    .card1 {
        border     : none;
        margin-left: 50px
    }

    .card2 {
        border-bottom: 1px solid #F5F5F5;
        margin-bottom: 25px
    }

    .social {
        height     : 30px;
        width      : 30px;
        font-size  : 15px;
        padding-top: 8px;
        margin-top : 7px
    }

    .get-bonus {
        margin-top : 40px !important;
        margin-left: 75px
    }

    #progressbar1 {
        left: -25px
    }
}

.last:active .first {
    display: none !important;
}

.progress-first div {
    width  : 48%;
    display: inline-block;

}

.progress-first input {
    width: 90% !important;
}


.flex-column-reverse {
    height       : 440px;
    display      : flex;
    border-radius: 10px;
    width        : 90%;
}

.card1 p {
    position     : relative;
    top          : 46px;
    left         : -16px;
    color        : #fff;
    margin-bottom: 92px !important;
}

.left-black {
    background-color:
        #0F1111;
    color        : #fff;
    width        : 37%;
    height       : 485px;
    border-radius: 0px 10px 10px 0px;

    position: relative;
}

.progress-first {
    margin-left: 25px;
    margin-top : 10px;
}

.right-color {
    background-color:
        #F4F4F4;
    height: 485px;
}

.card {
    height: 485px;
}

.but-next {

    background-color: #E55C28;
    color           : #fff;
    width           : 180px !important;
    height          : 50px;
    margin-top      : 20px;
    border          : none;
    border-radius   : 7px;
    margin-left     : 35px;
}

.right-color a {
    font-size       : 12px;
    background-color: #0F1111;
    color           : #fff !important;
    line-height     : 17px;
    border-radius   : 5px;
    padding         : 8px 15px;
    text-decoration : none;
}

.right-color label {
    font-size: 14px;
}






/* resiove */

@media screen and (max-width: 960px) {
    .card1 p {
        position     : relative;
        top          : 46px;
        left         : -19px;
        color        : #fff;
        margin-bottom: 92px !important;
    }

    .right-color a {
        font-size       : 12px;
        background-color: #0F1111;
        color           : #fff !important;
        line-height     : 17px;
        border-radius   : 5px;
        padding         : 8px 0px;
        text-decoration : none;
    }


}

@media screen and (max-width: 915px) {
    .card1 p {
        position     : relative;
        top          : 46px;
        left         : 8px;
        color        : #fff;
        margin-bottom: 92px !important;
    }

    .right-color a {
        font-size       : 12px;
        background-color: #0F1111;
        color           : #fff !important;
        line-height     : 17px;
        border-radius   : 5px;
        padding         : 8px 0px;
        text-decoration : none;
    }


}

@media screen and (max-width: 760px) {
    .card1 p {
        position     : relative;
        top          : 46px;
        left         : 8px;
        color        : #fff;
        margin-bottom: 92px !important;
    }

    .right-color a {
        font-size       : 12px;
        background-color: #0F1111;
        color           : #fff !important;
        line-height     : 17px;
        border-radius   : 5px;
        padding         : 8px 16px;
        text-decoration : none;
    }

    .right-color {
        background-color: #F4F4F4;
        height          : 485px;


        width: 100% !important;
    }

    .left-black {
        background-color: #0F1111;
        color           : #fff;
        width           : 100%;
        height          : 485px;
        display         : none;
        border-radius   : 0px 10px 10px 0px;
        position        : relative;
    }

    #progressbar li {
        list-style-type: none;
        color          : #C6C6C6;
        text-transform : uppercase;
        font-size      : 12px;
        width          : 20%;
        float          : left;
        position       : relative;
        font-weight    : 700;
    }
}

@media screen and (max-width:500px) {
    .right-color a {
        font-size       : 12px;
        background-color: #0F1111;
        color           : #fff !important;
        line-height     : 17px;
        border-radius   : 5px;
        padding         : 8px 8px !important;
        text-decoration : none;
    }
}

@media screen and (max-width:700px) {
    .progress-first div {
        width  : 100%;
        display: inline-block;
    }
}

@media screen and (max-width: 500px) {
    #progressbar li {
        list-style-type: none;
        color          : #C6C6C6;
        text-transform : uppercase;
        font-size      : 8px;
        width          : 26%;
        float          : left;
        position       : relative;
        font-weight    : 700;
    }

    .user_form h6 {
        padding-top: 27px;
        font-size  : 20px;
    }

    .user_form p {
        font-size  : 12px;
        font-weight: 500;
        line-height: 24.5px;
        color      : #323232;
    }

    .customer {
        font-size  : 16px;
        font-weight: 600;
    }

    .mail-phone li {
        font-size: 14px !important;
    }
}