.step-app > .step-steps {
  margin: 0;

  display: flex;
  flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  overflow: hidden;
	padding: 32px 0px;
}
.step-app > .step-steps > li {
  list-style: none;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
	height: 64px;
	width: 32%;
	
}
.step-app > .step-steps > li:hover {
  background-color: #ddd;
}
.step-app > .step-steps > li:last-child a {
  border: none;
}
.step-app > .step-steps > li.active {
  background-color: #32c5d2;
  color: #fff;
}
.step-app > .step-steps > li.error {
  background-color: #e7505a;
  color: #fff;
}
.step-app > .step-steps > li.done {
  background-color: #3cb371;
  color: #fff;
}
.step-app > .step-steps > li > .number {
  background: #fff;
  padding: 0 8px;
  display: inline-block;
  text-align: center;
  margin-right: 15px;
  border-radius: 3px;
  color: #333;
}
.step-app > .step-content {
  padding: 10px;
  border-top: 0;
}
.step-app > .step-content > .step-tab-panel {
  display: none;
}
.step-app > .step-content > .step-tab-panel.active {
  display: block;
}
.step-app > .step-footer {
  margin-top: 15px;
  margin-bottom: 72px;
	text-align: left;
	    position: relative;
    display: flow-root;
	    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
	list-style: none;
}
.step-app > .step-footer > .step-btn {
 	padding: 14px 24px;
	border-radius: 16px;
background: var(--primary, #F26530);
color: var(--white, #FFF);
text-align: center;
font-family: Tajawal;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;
  border: none;
  outline: none;
  cursor: pointer;
}
.step-app > .step-footer > .step-prev{
border-radius: 16px;
	width: 230px;
border: 4px solid var(--primary, #F26530);
background: #FFF;	
color: var(--primary, #F26530);
text-align: center;
font-family: Tajawal;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */	
}
/*# sourceMappingURL=jquery-steps.css.map */
.step-app > .step-steps > li{
	color: var(--secondary, #87786C);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;
}
.step-app > .step-steps > li.active {
	color: var(--primary, #F26530);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;}
.step-app > .step-steps > li.done {
color: #FFF;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;}

/************step1*********/
.step-app > .step-steps > li.ste1.active {background: url("../img2/tabs/tab1-a.svg") no-repeat right !important; background-size: 519px 64px !important;}
.step-app > .step-steps > li.ste1.done {background: url("../img2/tabs/tab1-d.svg") no-repeat right !important; background-size: 511px 64px !important;}
/************step2*********/
.step-app > .step-steps > li.ste2 { background: url("../img2/tabs/tab2-n.svg") no-repeat center !important; background-size: 519px 64px !important;}
.step-app > .step-steps > li.ste2.active { background: url("../img2/tabs/tab2-a.svg") no-repeat center !important; background-size: 519px 64px !important;}
.step-app > .step-steps > li.ste2.done { background: url("../img2/tabs/tab2-d.svg") no-repeat center !important; background-size: 519px 64px !important;}
/*********step3*************/
.step-app > .step-steps > li.ste3 {background: url("../img2/tabs/tab3-n.svg") no-repeat left !important; background-size: 519px 64px !important;}
.step-app > .step-steps > li.ste3.active {background: url("../img2/tabs/tab3-a.svg") no-repeat left !important; background-size: 519px 64px !important;}
.step-app > .step-steps > li.ste3.done {background: url("../img2/tabs/tab3-d.svg") no-repeat left !important; background-size: 519px 64px !important;}
/*********************************/
@media (max-width:1580px) {
	.step-app > .step-steps > li{background-size: 500px 64px !important;}
}

@media (max-width:1536px) {
	.step-app > .step-steps > li.ste1.active,.step-app > .step-steps > li.ste1.done,.step-app > .step-steps > li.ste2,.step-app > .step-steps > li.ste2.active, .step-app > .step-steps > li.ste2.done,.step-app > .step-steps > li.ste3,.step-app > .step-steps > li.ste3.active, .step-app > .step-steps > li.ste3.done {background-size: 444px 48px !important;}
	.step-app > .step-steps > li.ste1.done {    background-size: 430px 48px !important;}
	.step-app > .step-steps > li, .step-app > .step-steps > li.active, .step-app > .step-steps > li.done  {font-size: 24px;padding: 15px;}
	.step-app > .step-footer > .step-btn {font-size: 24px; width: 275px;height: 72px;}
	
}
 @media (max-width:1280px) {
	.step-app > .step-steps > li.ste1.active,.step-app > .step-steps > li.ste1.done,.step-app > .step-steps > li.ste2,.step-app > .step-steps > li.ste2.active, .step-app > .step-steps > li.ste2.done,.step-app > .step-steps > li.ste3,.step-app > .step-steps > li.ste3.active, .step-app > .step-steps > li.ste3.done {  background-size: 330px 39px !important;}
	 .step-app > .step-steps > li, .step-app > .step-steps > li.active, .step-app > .step-steps > li.done {
    font-size: 21px; padding: 19px;}
	 .step-app > .step-steps > li {width: 26%;}

}
@media (max-width: 1100px){
.step-app > .step-steps > li {
    width: 30%;
}}

 @media (max-width:991px) {

/************step1*********/
.step-app > .step-steps > li.ste1.active {background: url("../img2/tabs/tab1-tt-a.svg") no-repeat center!important; background-size: 200px 61px !important;}
.step-app > .step-steps > li.ste1.done {background: url("../img2/tabs/tab1-tt-d.svg") no-repeat center !important; background-size: 200px 61px !important;}
/************step2*********/
.step-app > .step-steps > li.ste2 { background: url("../img2/tabs/tab2-tt-n.svg") no-repeat center !important; background-size: 200px 61px !important;}
.step-app > .step-steps > li.ste2.active { background: url("../img2/tabs/tab2-tt-a.svg") no-repeat center !important; background-size: 200px 61px   !important;}
.step-app > .step-steps > li.ste2.done { background: url("../img2/tabs/tab2-tt-d.svg") no-repeat center !important; background-size: 200px 61px !important;}
/*********step3*************/
.step-app > .step-steps > li.ste3 {background: url("../img2/tabs/tab3-tt-n.svg") no-repeat center !important; background-size: 200px 61px !important;}
.step-app > .step-steps > li.ste3.active {background: url("../img2/tabs/tab3-tt-a.svg") no-repeat center !important; background-size: 200px 61px !important;}
.step-app > .step-steps > li.ste3.done {background: url("../img2/tabs/tab3-tt-d.svg") no-repeat center !important; background-size: 200px 61px  !important;}
/*********************************/
	 .step-app > .step-steps > li { width: 25% !important;}
}
@media (max-width:786px) {
		 .step-app > .step-steps > li { width: 28% !important;}
}
@media (max-width:700px) {
.step-app > .step-steps > li.ste1.active,.step-app > .step-steps > li.ste1.done,.step-app > .step-steps > li.ste2,.step-app > .step-steps > li.ste2.active, .step-app > .step-steps > li.ste2.done,.step-app > .step-steps > li.ste3,.step-app > .step-steps > li.ste3.active, .step-app > .step-steps > li.ste3.done {
	background-size: 157px 61px !important;}
	.step-app > .step-steps > li, .step-app > .step-steps > li.active, .step-app > .step-steps > li.done {
    font-size: 16px;
    padding: 19px;
}
}
 @media (max-width:550px) {

/************step1*********/
.step-app > .step-steps > li.ste1.active {background: url("../img2/tabs/tab1-tt-aa.svg") no-repeat center!important; background-size: 116px 61px !important;}
.step-app > .step-steps > li.ste1.done {background: url("../img2/tabs/tab1-tt-dd.svg") no-repeat center !important; background-size: 116px 61px !important;}
/************step2*********/
.step-app > .step-steps > li.ste2 { background: url("../img2/tabs/tab2-tt-nn.svg") no-repeat center !important; background-size: 116px 61px !important;}
.step-app > .step-steps > li.ste2.active { background: url("../img2/tabs/tab2-tt-aa.svg") no-repeat center !important; background-size: 116px 61px   !important;}
.step-app > .step-steps > li.ste2.done { background: url("../img2/tabs/tab2-tt-dd.svg") no-repeat center !important; background-size: 116px 61px !important;}
/*********step3*************/
.step-app > .step-steps > li.ste3 {background: url("../img2/tabs/tab3-tt-nn.svg") no-repeat center !important; background-size: 116px 61px !important;}
.step-app > .step-steps > li.ste3.active {background: url("../img2/tabs/tab3-tt-aa.svg") no-repeat center !important; background-size: 116px 61px !important;}
.step-app > .step-steps > li.ste3.done {background: url("../img2/tabs/tab3-tt-dd.svg") no-repeat center !important; background-size: 116px 61px  !important;}
/*********************************/
	 .step-app > .step-steps > li { width: 25% !important;}
	 .step-app > .step-steps > li, .step-app > .step-steps > li.active, .step-app > .step-steps > li.done {
    font-size: 16px;
    padding: 12px;
}
}
@media (max-width:550px) {
	.step-app > .step-steps > li { width: 22% !important;}
}
@media (max-width:505px) {
	.step-app > .step-steps > li { width: 25% !important;}
}

@media (max-width:375px){
	.step-app > .step-steps > li.ste1.active,.step-app > .step-steps > li.ste1.done,.step-app > .step-steps > li.ste2,.step-app > .step-steps > li.ste2.active, .step-app > .step-steps > li.ste2.done,.step-app > .step-steps > li.ste3,.step-app > .step-steps > li.ste3.active, .step-app > .step-steps > li.ste3.done {  background-size: 95px 61px !important;}
	.step-app > .step-steps > li.active {line-height: 120%;}
	.step-app > .step-steps > li {line-height: 120%;}
}
@media (max-width:440px) {
	.step-app > .step-steps > li { width: 30% !important;}
}