p{padding: 0; margin: 0;}
body {
    background: #F6F7FA;
    margin: 0; 
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

#regForm {
    /*background-color: #ffffff;*/
    margin: 0px auto;
    font-family: 'Poppins', sans-serif;
    /*padding: 40px;*/
    border-radius: 10px;
   /* max-width:750px; */
    height: auto;
   
}
.brands h1{margin-top: 0; color: #008ec2;font-weight: bold; font-size: 28px; padding: 30px 0;}
#register {
    color: #008ec2;
    font-size: 28px;    
    font-weight: 500;
    margin-bottom: 40px;
}

h1 {
    text-align: center;
   /* margin-top:20px;*/
}

input[type=text] {
    padding: 10px;
    width: 100%;
    font-size: 17px;
   font-family: 'Poppins', sans-serif;
    border: 1px solid #aaaaaa;
    border-radius: 10px;
    -webkit-appearance: none
}

.tab input:focus {
    border: 1px solid #008ec2 !important;
    outline: none
}

input.invalid {
    border: 1px solid #e03a0666
}

.tab {
    display: none
}
.tab h6{font-size: 22px; font-weight: normal; max-width: 540px; margin: 0 auto; text-align: center; line-height: 33px; color: #181C32;}
button {
    background-color: #008ec2;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    padding: 10px 20px;
    font-size: 17px;
   font-family: 'Poppins', sans-serif;
    cursor: pointer
}

button:hover {
    opacity: 0.8
}

button:focus {
    outline: none !important
}

#prevBtn {
    background-color: #008ec1;
}

.all-steps {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    display: inline-flex;
    justify-content: center
}

.step {
    height: 40px;
    width: 40px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #6a1b9a;
    opacity: 0.5
}

.step.active {
    opacity: 1
}

.step.finish {
    color: #fff;
    background: #6a1b9a;
    opacity: 1
}

.all-steps {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px
}

.thanks-message {
    display: none
}
.tophead{background-color: #fff; margin-bottom: 119px; display: block; height: 100px;}
 .users img{width: 100px; height: 100px; object-fit: contain; border-radius: 100%; display: block; margin: 0 auto; position: absolute; left: 0; right: 0;  top: -50px;}
.footer{position: relative;background-color: #008ec2;padding: 30px 0 0;}
.footarea{text-align: center; margin-bottom: 30px;}
.footarea i{font-size: 40px; color: #fff; display: block; text-align: center;}
.footarea a{text-decoration: none; color: #fff; font-size: 16px; }
.bottomfoot{padding: 10px 0; border-top:1px solid #0080ae;}
.bottomfoot p{color: #fff; font-size: 16px; }
.thanks-message i{font-size: 30px; color: #008ec2;}
.all-steps{margin: 0px;}
.all-steps span{display: none;}

/* Radio Box Css */
.rb-box { 
  height: auto;  
  margin: 0px auto;
  padding-top: 1.3em;
  background: #fff;
  border-radius: .75em;
  /*-webkit-filter: drop-shadow(1px 2px 5px rgba(0,0,0,.3));
  filter: drop-shadow(1px 2px 5px rgba(0, 0, 0, 0.3));
box-shadow: 0 2px 2px rgba(64, 49, 243, 0.5), 0 0px 5px rgba(49, 170, 243, 0.15), 0 0px 4px rgba(0,0,0,.35), 0 5px 20px rgba(49, 179, 243, 0.25), 0 15px 50px rgba(30, 17, 181, 0.75), inset 0 0 15px rgba(255,255,255,.05);
*/}

/* Custom Radio Button */
p {
  font-size: .9em;
}

.rb {
  padding: 16px 0;
  text-align: center;
  background: rgba(255,255,255,.03);
  border-radius: .3em;
}

.rb-tab {
  display: inline-block;
  position: relative;
  /*width: 8%;*/
  width: 19%;
padding: 30px 0;
background-color: #fff;
border-radius: 10px;
}

.rb-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #008ec2;
}
.col-auto #inlineFormInputGroup{width: 93%; border-radius: 0 10px 10px 0;}
#customer_phone{width: 90%; border-radius: 0 5px 5px 0; background-color: #e9ecef; border:none; height: 50px;}
.input-group-text{border:none; position: relative; border-radius: 5px 0 0 5px;}
.input-group-text::after{content: ''; background-color: #868181; height: 50%; width: 1px; position: absolute; right: 5px;}
.rb-spot {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 2px solid #008ec2;
  border-radius: 100%;
  cursor: pointer;
  transition: ease .5s;
}

.rb-tab-active .rb-spot {
  /*background: rgba(0,0,0,.35);*/
  background-color: #008ec2;
  border: 2px solid #008ec2;
  color: #fff;
}
.rb-tab-active .rb-txt{color: #fff;}

/* Submit Button */
.button-box {
  padding: 10px 0;
  text-align: center;
}
.thanks-message{max-width: 605px; margin: 0 auto; background-color: #ffffff; padding: 0px 20px 30px; border-radius: 10px; box-shadow: 0px 8px 24px #021B7529;}
.stape01{max-width: 605px; margin: 0 auto; background-color: #ffffff; padding: 40px; border-radius: 10px;box-shadow: 0px 8px 24px #021B7529;}
.stape02{max-width: 750px; margin: 0 auto; background-color: #ffffff; padding: 40px; border-radius: 10px;box-shadow: 0px 8px 24px #021B7529;}
#customer_feedback { width: 580px; border-radius: 10px; padding: 4px 10px;}
.form-gray label{background-color: #E6E9F0; height: 50px; width: 96px; border-radius: 10px;display: flex; align-items: center; margin: 10px; padding: 10px 20px;}
.form-check-label{padding: 0 25px; font-size: 18px;}
.form-check-label input{margin-right: 10px; position: inherit; vertical-align: inherit;}
.tab.stape02{padding: 40px 85px; margin-top: -45px;}
.rb-box.input-group{max-width: 480px;}
.stape01 select,.stape01 input,.input-group-text{background-color: #E6E9F0!important; height: 50px; border:none;}
.stape01 input:focus{outline: none; border:none!important;}
.stape01 textarea{background-color: #E6E9F0; border:none; height: 100px;}
.thanks-message img{width: 160px;}
.thanks-message h2{font-size: 48px; font-weight: bold; color: #008EC2;}
.thanks-message h3{font-size: 22px; font-weight: 400; color: #181C32;}
.thanks-message p{font-size: 18px; font-weight: 400; color: #7E8299;}
.thanks-message .bluebtn{width: 207px; height: 45px; border-radius: 10px; text-align: center; background-color: #008EC2; display: block; color: #fff!important;padding-top: 9px;
margin: 26px auto; text-decoration: none;}
.nextPrevBTN{background-color: #fff;margin-top: 119px; max-width: 1246px; height: 65px; display: flex;  justify-content: space-between; padding: 10px 12px;}
.nextPrevBTN #nextBtns{height: 45px; max-width: 207px; width: 100%; font-size: 10px; border-radius: 10px;}
.nextPrevBTN #nextBtns img{margin-left: 15px;}
.nextPrevBTN #prevBtn{height: 45px; width: 60px; border-radius: 10px; background-color:#E6E9F0; padding: 3px}
.progress{width: 100%;margin: 23px 15px; height: 3px; overflow: visible;}
.progress-bar{width: 2%; height: 6px; position: relative; top: -2px; overflow: visible;}
.progress-bar::before{content: ''; background-color: #007bff; height: 15px; width: 15px;border-radius: 100%; position: absolute; top: -5px; left: 100%;}
.form-gray input[type="radio"] {
  display: none;
}
.form-gray label {
  display: inline-block;
  padding: 14px 26px;
  cursor: pointer;
  position: relative;
  top: 6px;
}
 .form-gray span:before,
.form-gray label span:after {
  content: '';
}
.form-gray label span {
  position: relative;
  line-height: 22px;
  right: -15px;
  color: #7E8299;
}
.form-gray label span:before {
  border: 1px solid #7E8299;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  left: -20px;
 top: 4px;
}

.form-gray label span:after {
  background-color: #008ec2;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 1px;
  left: -20px;
  transition: 300ms;
  opacity: 0;
  border-radius: 3px;
  background:url(../images/check.png) no-repeat;
  background-size: 100%;
}
.form-gray label input:checked+span:after {
  opacity: 1;
  
}
#other-material{max-width: 480px;}
#other-material input{border-radius: 5px;}
.form-gray label.actives{background-color: #008EC2; color: #fff;}
.form-gray label.actives span{background-color: #008EC2; color: #fff;}
.images{position: relative;}
.images::before{content: ''; background:url(../images/imag.png) no-repeat; width: 355px; height: 308px; position: absolute; left: 0; bottom: 0; z-index: -1;}
/*Responsive*/

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url(../images/arrows.png) white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
/*For IE*/
select::-ms-expand { display: none; }
.nextPrevBTN #nextBtns{font-size: 14px;text-transform: uppercase; font-weight: 600;}

@media (max-width: 767px){ 
  .tophead{margin-bottom: 90px;}
  .rb-box{padding: 6px;}
  .rb-tab{width: 18%;}
  #register{font-size: 20px;margin-top: 0px;font-weight: bold; margin-bottom: 10px;}
  .tab h6{font-size: 17px; text-align: center; margin-bottom: 18px; line-height: 26px; }
  .col-auto #inlineFormInputGroup{width: 85%; border-radius: 0 10px 10px 0;}
#customer_phone{width: 86%; border-radius: 0 10px 10px 0;}
.col-auto #inlineFormInputGroup{width: 83%; }
#customer_feedback{width: 100%;}
.stape01{padding:30px 20px;}
.tab.stape02{padding: 40px 15px;}
.d-flex.justify-content-between.flex-wrap{max-width: 232px; margin: 0 auto;}
.stape01 select, .stape01 input, .input-group-text{border-radius: 10px;}
.thanks-message{padding: 10px 20px 30px;}
.thanks-message h2{font-size: 32px;}
.thanks-message h3{font-size: 14px;}
.thanks-message p{font-size: 13px; color: #7E8299;}
.thanks-message .bluebtn{margin: 14px auto;}
.rb-box.input-group{width: 303px; margin: 0 auto;}
.stape01 .col-auto{padding: 0;}
.col-auto #inlineFormInputGroup{width: 86%;}
.nextPrevBTN{position: relative; background:transparent; padding: 0}
.progress{position: absolute;top: -25px;left: 0;right: 0;margin: 0 auto;}
.thanks-message img{width: 90px;}
.images{margin-top: 140px;}
.images::before {left: -10px; width: 165px; height: 138px; background-size: cover;}
.nextPrevBTN{margin-top: 70px;}


}