.wrapper-body-membership{
	text-align: center;
	padding-bottom: 90px;
}

.membership-row{
	width: 1075px;
	left: 0;
	right: 0;
	margin: auto; 
	position: relative;
    top: -66px;
}
.membership-cards{
	width: 306px;
	height: 570px;
	color: #66757f;
	padding: 0;
	border-radius: 8px;
	text-align: left;
	background-color: white;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
	margin: 0 24px;
	overflow: hidden;
	float: right;
}
.membership-cards-1 {
	width: 100%;
	height: 114.8px;
	border-radius: 8px;
	position: relative;
	left: initial;
	margin: auto;
	color: white;
}

.membership-cards-2 {
    padding-top: 50px;
}

.card1{
	background-image: linear-gradient(108deg, #0a1f38, #22386c);
    box-shadow: 0 10px 20px 0 rgba(102, 117, 127, 0.25);
}

.card2{
	background-image: linear-gradient(245deg, #ab8522, #efe491);
	box-shadow: 0 10px 20px 0 rgba(246, 188, 0, 0.25);
}

.card3{
    background-image: linear-gradient(245deg, #565454, #d0c9c9);
    box-shadow: 0 10px 20px 0 rgba(34, 56, 108, 0.25);
}

.card3-section p{
    margin-bottom: 16px !important;
    line-height: 16px !important;
}

.membership-cards h3{
	font-size: 24px;
	line-height: 44px;
	font-family: 'NotoKufiArabic-Regular', sans-serif;
	text-align: center;
	margin-top: 10px;
    margin-bottom: 0;
}
.membership-cards h4{
	font-size: 14px;
    line-height: 44px;
    font-family: 'NotoKufiArabic-Regular', sans-serif;
    text-align: center;
    margin-top: 0;
}
.membership-cards p{
	font-size: 12px;
    font-family: 'NotoKufiArabic-Regular', sans-serif;
    text-align: right;
    margin-bottom: 15px;
    line-height: 20px;
}

.etape-bulle {
	height: 66px;
	opacity: 1;
	border-radius: 3px;
	float: right;
	line-height: 66px;
	margin-bottom: 45px;
	text-align: right;
	padding-top: 80px;
	padding-right: 115px;
}

.etape-bulle span {
    color: #d6dbe0;
    padding: 5px;
}

.bulle-selected {
    color: #ab8522 !important;
}

.membership-types-row{
	width: 950px;
	left: 0;
	right: 0;
	margin: auto; 
}

.bg-card {
    border-radius: 15px;
    position: absolute;
    right: -80px;
    top: -117px;
    width: 90%;
}

.the-card {
	width: 306.4px;
	height: 177px;
	object-fit: contain;
	position: absolute;
	top: 230px;
	left: 40px;
}

.membership-types{
	text-align: center;
	padding-bottom: 90px;
}

.membership-type-right h3{
  height: 66px;
  font-family: 'NotoKufiArabic-Regular', sans-serif;
  font-size: 38px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;	
  line-height: 1.38;
  letter-spacing: normal;
  text-align: right;
  color: #333333;
  margin-top: 45px;
}

.membership-type-right > .check{
  width: 19px;
  height: 19px;
  background-color: #ffffff;
  background-color: var(--white);
  border: solid 1px #ab8522;
  border: solid 1px var(--copper);
}

.card-type{
	text-align: right;
}
.card-type li{ 
	font-family: 'NotoKufiArabic-Regular', sans-serif;
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.36;
	letter-spacing: normal;
	text-align: right;
	color: #66757f;
	display: inline-block;
	margin-right: 5px;
	border-radius: 3px;
	text-align: center;
	padding: 6px 10px;
	cursor: pointer;
}

.card-type li.active{ 
	background-color: #ab8522;
    color: white;
    box-shadow: 0 10px 20px 0 rgba(171, 133, 34, 0.25);
}

.details-card li{
	font-family: 'NotoKufiArabic-Regular', sans-serif;
	font-size: 14px;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	letter-spacing: normal;
	text-align: right;
	color: #66757f;
	margin-bottom: 25px;
	line-height: 20px;
}

.details-card img{
	margin-left: 10px;
}

.membership-type-right button{
	height: 47px;
	text-transform: uppercase;
	font-family: 'NotoKufiArabic-Regular', sans-serif;
	font-size: 11px;
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.33;
	letter-spacing: normal;
	text-align: center;
	border: 0;
	border-radius: 3px 12px 3px 12px;
	position: relative;
	top: 17px;
	outline: none;
	background-image: linear-gradient(40deg, #CDB55A, #AF8A28) !important;
	box-shadow: 0 8px 18px 0 rgba(34, 56, 108, 0.25) !important;
	color: white !important;
	background-position: 0 !important;
	padding: 0 30px !important;
	float: right;
}

.wrapper-body-tarif{
	text-align: center;
	padding-top: 90px;
	padding-bottom: 90px;
}

.tarif-row{
	width: 1140px;
	left: 0;
	right: 0;
	margin: auto; 
}
.tarif-cards{
	width: 262px;
	height: 580px;
	color: white;
	padding: 0;
	border-radius: 5px;
	text-align: center;
	background-color: white;
	margin-right: 30px;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    padding-bottom: 20px;
    overflow: hidden;
}
.tarif-cards h2{
  height: 44px;
  font-size: 32px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.38;
  letter-spacing: normal;
  text-align: center;
  color: #0a1f38;
  font-family: 'NotoKufiArabic-Regular', sans-serif;
}
.dollar{
  text-align: center;
  height: 25px;
  font-family: 'NotoKufiArabic-Regular', sans-serif;
  font-size: 18px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.39;
  letter-spacing: normal;
  text-align: left;
  color: #66757f;
  position: relative;
  top: -6px;
  padding: 0 5px;
}
.plus-card{
	font-weight: 700 !important;
    color: #22396c !important;
    cursor: pointer !important;
}
.type-tarif{
	height: 25px;
	font-family: 'NotoKufiArabic-Regular', sans-serif;
	font-size: 15px;
	font-weight: 900;
	font-style: normal;
	font-stretch: normal;
	line-height: 1.39;
	letter-spacing: normal;
	text-align: center;
	width: 100%;
	color: #66757f;
	position: relative;
	top: -15px;
}
.prix{
  width: 43px;
  height: 98px;
  font-family: 'NotoKufiArabic-Regular', sans-serif;
  font-size: 36px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.36;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}
.tarif-cards h3{
	font-size: 25px;
	line-height: 44px;
	font-family: 'NotoKufiArabic-Regular', sans-serif;
	text-align: center;
}
.tarif-cards h4{
  height: 17px;
  font-family: 'NotoKufiArabic-Regular', sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ab8522;
}
.tarif-cards p{
	font-family: 'NotoKufiArabic-Regular', sans-serif;
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: right;
    color: #66757f;
    padding: 0 12px;
    line-height: 23px;
}

.tarif-cards button{
  width: 173px;
  height: 49px;
  border-radius: 25px;
  text-align: center;
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  margin: auto;
}


.flag-card{
  width: 100%;
  height: 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.bg-card1{
	background-color: #5f5f5f;
	border: 1px solid #5f5f5f;
}
.bg-card2{
	background-color: #ab8522;
	border: 1px solid #ab8522;
}
.bg-card3{
	background-color: #9e9e9e;
	border: 1px solid #9e9e9e;
}
.bg-card4{
	background-color: #22386c;
	border: 1px solid #22386c;
}

.flag-card1{
	background-image: linear-gradient(to right, #a4a3a3, #454445);
}
.flag-card2{
	background-image: linear-gradient(to right, #efe491, #ab8522);
}
.flag-card3{
	background-image: linear-gradient(to right, #b2b2b2, #706f6f);
}
.flag-card4{
	background-image: linear-gradient(to right, #304e93, #0a1f38);
}
.wrapper-body-head{padding-top:162px;padding-bottom:40px;background-image: linear-gradient(108deg, #0a1f38, #22386c);width: 1366px;height: 456px;color: white}
.wrapper-body-head p {width: 258px;height: 38px;border-radius: 20px;background-color: #dbb34c;}
@media screen and (max-width: 740px) {

	.membership-row{
		width: 94% !important;
		top: -196px !important;
	}
	.membership-types-row{
		width: 100% !important;
	}
	.tarif-row{
		width: 320px !important;
	}
	.tarif-cards{
		width: 320px !important;
		height: initial !important;
		margin-top: 40px !important;
		margin-right: 0px !important;
		left:0;
		right:0;
		margin: auto;
	}
	.wrapper-body-head{
		padding-top: 102px !important
	}
	.membership-cards{
		width: 100% !important;
		padding: 0 !important;
		text-align: center !important;
		margin-top: 100px !important;
		margin-bottom: 10px !important;
		height: 100% !important;
		margin: 0 !important;
		margin-top: 95px !important;
	}
	.wrapper-body-tarif{
		padding-top: 40px !important;
	}
	.membership-cards h3 {
        font-size: 26px;
	    line-height: 47px;
	}
	.membership-cards p {
	    font-size: 14px;
	    line-height: 30px;
	}
	.membership-cards-2{
		padding-top: 86px
	}
	.wrapper-body-membership{
		padding-top: 26px !important;
	}
	.card-type{
		text-align: center !important;
	}
	.card-type li{
		font-size: 18px !important;
	}
	.membership-type-right h3{
		text-align: center !important;
		font-size: 35px !important;
		margin: 40px 0 !important;
	}
	.details-card li{
		font-size: 15px !important;
		line-height: 25px !important;
	}
	.membership-type-right button{
		text-align: center;
		font-size: 15px;
		float: initial !important;
	}
	.etape-bulle{
		text-align: center !important;
		padding-left: 0 !important;
	}
	.the-card {
	    position: relative !important; 
	    top: 30px !important;
	    left: 0 !important;
	}
	.membership-cards-1{
		left: 0 !important;
		right: 0 !important;
	}
	.wrapper-body-head{
		width: 100%;
	}
	.wrapper-body-head p{
		width: 250px !important
	}
		.respo{
				width: 100% !important;
				left: 0 !important;
			}
		.top{
			top: -840px !important;
		    }
		.bottom{
			top:  -10px !important;
		}    

}