@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
body{font-family: 'Tajawal', sans-serif; }
/****************** Header **********************/
.nomargin { margin: auto;}
.nopadding { padding: 0px;}
h2{
color: #87786C;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;}
.pad-44 { padding: 44px 0px;}
.pad-32 { }
.m-44 { margin-bottom: 44px;}
.no-pc { display: none;}
.flexzo { display: flex;}
/*******************************************************/
.cart-section {background-color:#FFF8F6;}
.cart-empty { padding-bottom: 44px;}
.cart-head {padding: 56px 0px 32px 0px;}
.cart-section h1 {
color: #87786C;
text-align: center;
font-size: 44px;
font-style: normal;
font-weight: 700;
line-height: 156.5%; /* 68.86px */
text-transform: capitalize;}
.cart-empty img { max-width: 162px; padding-bottom: 32px;}
.cart-body {background-color: #fff; text-align: center; padding: 124px 0px 32px 0px;}
.cart-empty h3 { 
color: #87786C;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 156.5%; /* 50.08px */
text-transform: capitalize;}
/*************************************************/
.cart-body-list {background-color: #fff; text-align: center; padding: 44px 0px 0px 0px;;}
.list-group {
    list-style: none !important;
    width: 1024px;
    margin: auto;
}
.cart-list { padding:0px;  padding-top: 32px;}
.cart-item-title { margin-bottom: 8px;}
.cart-item-sub-title { margin-bottom: 16px;}
.cart-item{
	padding: 16px 44px;
border-radius: 16px;
border: 1px solid rgba(242, 101, 48, 0.27);
background: #FFF8F6;
	margin-bottom: 32px;
}
.cart-item h2{color: #F26530;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 36.696px */
text-transform: capitalize;
width: auto;
padding: 0px;
	margin: 0px;
display: list-item;}
.cart-item p{
color: #87786C;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 156.5%; /* 31.3px */
text-transform: capitalize;
display: list-item;
    width: auto; margin-bottom: 0px; padding: 0px;}
.cart-item texteare{
border-radius: 12.221px;
border: 1.528px solid #E6E1DE;
background: #FFF;
color: #6C727F;
padding: 12px;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 27.522px */
text-transform: capitalize;}
.cart-item label{
color: #87786C;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 156.5%; /* 50.08px */
text-transform: capitalize;}
.cart-item-title,.cart-item-sub-title  {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;}
hr {
    color: inherit;
    border: 0;
    border-top: 2px solid;
    opacity: 0.25;
    width: 80%;
    margin: auto;
}
.cart-list-total{background: #FFF8F6; padding: 12px;}
.cart-list-total h2{
	width: inherit;
	color: #87786C;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 156.5%; /* 50.08px */
text-transform: capitalize;}
.cart-list-total span{color: #685A4D;}
.remem .login-check-input {
    float: right;
    margin-right: 10px;
}
/*********************** Payment ***********************/
.cart-payment { background-color: #fff; padding-top: 56px !important;}
.pay-tab-sec { margin: auto; margin-bottom: 72px;}
.pay-tab-sec ul li { width: 50%; text-align: center;
border-top:  3px solid rgba(242, 101, 48, 0.48);
border-right:  3px solid rgba(242, 101, 48, 0.48);
border-left:  3px solid rgba(242, 101, 48, 0.48);}
.pay-tab-sec .nav-link{ width: 100%; margin: auto;
color: #6C727F;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 150%;
padding: 18.2px 0px; 
background-color: #fff}
/*.form-check { padding-right: 0px;}*/
.pay-tab-sec ul li:first-child {border-radius: 0px; border-top-right-radius: 27px;border-left:  1.5px solid rgba(242, 101, 48, 0.48); }
.pay-tab-sec ul li:last-child {border-radius: 0px; border-top-left-radius: 27px;border-right:  1.5px solid rgba(242, 101, 48, 0.48);}
.pay-tab-sec ul li:first-child button{border-radius: 0px; border-top-right-radius: 24px}
.pay-tab-sec ul li:last-child button{border-radius: 0px; border-top-left-radius: 24px}
.pay-tab-sec .nav-link.active, .pay-tab-sec .nav-item.show .nav-link {
    color: #FFF;background-color: #F16531;font-size: 24px;font-style: normal;font-weight: 700;line-height: 150%;;}
.pay-tab-sec ul li button.active{color:#fff;background-color: #F16531;}
.pay-tab-content{border-radius: 0px 0px 24px 24px;
border: 3px solid rgba(242, 101, 48, 0.48);
background: #FFF;
padding: 44px 32px 64px 32px;}
.payment-method{
color: #87786C;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;}

.pay-fees a{ color:#848484;margin-right: 10px;padding-top: 5px; }
.pay-fees label{color: #6C727F;
text-align: center;
font-family: Tajawal;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
padding-right: 20px;
}
.mob-pay{
width: 55%;
margin: auto;
margin-bottom: 44px;
color: var(--tertiary, #6C727F);
text-align: right;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 36.696px */
text-transform: capitalize;}
.cart-item textarea{border-radius: 12.221px;
border: 1.528px solid #E6E1DE;
background: #FFF;color: #6C727F;
text-align: right;
font-family: Tajawal;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 27.522px */}
.pay-fees { width: 70%; margin: auto;  display: flex;align-items: center; justify-content: flex-start;}
.radios {
  width: 70%;
	margin: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.pay-option{ padding: 32px 0px;}
.radios img {height: 48px;}
.radio {background-color: #fff;padding: 16px 5px; border-radius: 12px;border: 1.4px solid #C5C3C2;height: 95px;width:288px;}
.radio input {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
}
.radio input:focus + label {
  background: #eeeeff;
}
.radio input:focus + label .checker {
  border-color: #F26530;
}
.radio input:checked + label .checker {
	background: #F26530;
  box-shadow: inset 0 0 0 6px #AFAFAF;
}
.radio label {
  display: flex;
  align-items: center;
	justify-content: space-between;
  height: 28px;
  border-radius: 14px;
  margin: 10px;
  padding: 0 8px 0 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.radio label:hover {
 
}
.radio label:hover .checker {
  box-shadow: inset 0 0 0 2px #F26530;
}
.radio .checker {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: inset 0 0 0 6px #ccc;
  transition: box-shadow 0.3s ease;
}
.submit-button{border-radius: 16px;
background: var(--primary, #F26530);
width: 500px;
padding: 16px 42px;
color: var(--white, #FFF);
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;
border-style: none;}
.submit-button:hover{
	background-color: #DF491B ;
}
.sublink { display: block;
	padding-top: 32px;
color: #F26530;
text-align: center;
font-family: Tajawal;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 152.9%;
text-decoration: none;}
.sublink:hover, .sublink:foucs { color: #F26530;}
.remem .login-check-input {  margin-right: 10px !important;}
.remem label {    padding-right: 5px;padding-top: 6px;}
.form-check label.login-check-label {color: #6C727F;}
/*******************************/
.pay-login-content {
    border-radius:24px;
    border: 3px solid rgba(242, 101, 48, 0.48);
    background: #FFF;
    padding: 44px 32px 64px 32px;
	margin: auto;
	margin-bottom: 95px;
}
.pay-fees i { font-size: 25px;}
/***********************   Responsive   *************************/
@media (max-width:1920px) {


}
@media (max-width:1800px) {

}
@media (max-width:1536px) {
.login-check-input {margin-right: 15px !important;}
	.radio { width: 262px;}
}
@media (max-width:1440px) {
	.cart-body-list { padding: 0px;}

	.cart-head {padding: 42px 0px 24px 0px;}
	.cart-section h1 {font-size: 33px;}
	.cart-empty img { max-width: 121px;padding-bottom: 24px;}
	.cart-empty h3 {font-size: 21px;}
	.cart-body {padding: 93px 0px 24px 0px;}
	.cart-item h2 { font-size: 18px; margin: 0px; padding: 0px;}
	.cart-item-title{ margin-bottom: 16px}
	.cart-item p {font-size: 15px;}
	.cart-item texteare { font-size: 13.5px;}
	.cart-item label { font-size: 24px;}
	.cart-list-total h2 {font-size: 24px;}
	.cart-payment { padding-top: 42px;}
	.pay-tab-sec .nav-link {font-size: 18px;}
	.pay-tab-sec .nav-link.active, .pay-tab-sec .nav-item.show .nav-link {font-size: 18px;}
	h2 { font-size: 24px;}
	.radios {width: 80%;}
	.pay-fees {width: 75%;}
	.radio {width: 252px;}
	.submit-button { font-size: 24px;}
	.pr-fee-cart{ padding-top: 17px;}
	.cart-item textarea {margin-top: 8px;}
	.form-control, input {height: 72px;}
	.form-check {padding-right: 30px;}
}
@media (max-width: 1100px) {
	.radio {width: 230px;}
	.radios img {height: 40px;}
}
@media (max-width:1024px) {
.cart-list-total{width: 100%;}
.radios { width: 100%;display: inherit;}
.radio {width: 100%; margin-bottom: 12px;}
.pay-fees {width: 100%;}
}

@media (max-width:1024px) {

.list-group {width: 95%;}
}
@media (max-width: 990){

}
@media (max-width:768px) {
	.no-mob { display: none}
	.no-pc { display: inline-flex; width: auto;}
	.mob-pay {width: 95%;}
	.cart-item-title { margin-bottom: 10px;}
	.cart-item textarea { margin-top: 4px; width: 100%;}
	.cart-item label {font-size: 21px;}
}
@media (max-width:767px) {

}

@media (max-width:550px) {
.cart-head {padding: 32px 0px 20px 0px;}
	.cart-section h1 {font-size: 18px;font-style: normal;font-weight: 800;}
	.cart-empty img { max-width: 96px;padding-bottom: 32px;}
	.cart-empty h3 {font-size: 16px;}
	.cart-body {padding: 93px 0px 32px 0px;}
	.submit-button { width: 100%; font-size: 16px;padding: 16px 5px;}
	
	.pay-tab-sec ul li:first-child button { border-top-right-radius: 12px;}
	.pay-tab-sec ul li:first-child { border-top-right-radius: 12px; border-left: 1px solid rgba(242, 101, 48, 0.48);}
	.pay-tab-sec ul li:last-child {border-top-left-radius: 12px;border-right: 1px solid rgba(242, 101, 48, 0.48);}
	.pay-tab-sec ul li:last-child button {border-top-left-radius: 12px;}
	.pay-tab-sec ul li {border-top: 1px solid rgba(242, 101, 48, 0.48);border-right: 1px solid rgba(242, 101, 48, 0.48);    border-left: 1px solid rgba(242, 101, 48, 0.48);}
	.cart-body-list {padding: 0px;}
	.cart-list {padding: 12px 0px 0px 0px;}
	.pay-tab-content {border: 1px solid rgba(242, 101, 48, 0.48);}
	h2 {font-size: 16px; font-weight: 700;}
	#register-tab-pane h2 { margin-bottom: 20px;}
	.pay-tab-content {padding: 24px 16px 32px 16px;}
	.p-44 {  padding-bottom: 0px;}
	.mob-pay { width: 92%;border-radius: 16px;border: 1.558px solid var(--input-fields-stroke, #E6E1DE);background: var(--white, #FFF);box-shadow: 0px 30px 0px rgba(0, 0, 0, 0.00);margin-bottom: 32px;color: var(--tertiary, #6C727F);text-align: right;font-family: Tajawal;font-size: 14px !important;}
	.pay-option {padding: 16px 0px 32px 0px ;}
	.form-check label {width: auto;}
	.pay-fees label {font-size: 16px;font-weight: 500;}
	.cart-item h2 {font-size: 16px;padding: 0px;margin: 0px;}
	.btn-close{box-sizing: inherit; width:15px; height:15px; }
	.cart-item-title{ margin-bottom: 8px;}
	.cart-item {padding: 12px; margin-bottom: 16px;}
	.cart-item textarea {margin-top: 8px;font-size: 15px;}
	.cart-item label {font-size: 18px;}
	hr { margin-bottom: 16px;}
	i.eye-pass { top: 23px; left: 20px}
	.payment-method {padding-top:  20px}
	.form-check {padding-right: 0px;}
	.pay-fees i { font-size: 21px;}
	.radio { padding: 6px; height: auto;}
	.radio .checker { width: 24px;height: 24px;box-shadow: inset 0 0 0 3px #ccc;}
	.radio input:checked + label .checker {;box-shadow: inset 0 0 0 3px #AFAFAF;}
	.sublink {padding-top: 18px;font-size: 14px;}
	.pr-fee-cart {padding-top: 0px;}
	.form-control, input { height: 54px;}
	.pay-login-content {
    border-radius: 12px;
    border: 1px solid rgba(242, 101, 48, 0.27);
    padding: 24px 16px 32px 16px;
    margin-bottom: 32px;
}
	.pay-login-content .payment-method {padding-top: 0px;}
	.pay-login-content .payment-method h2 {font-weight: 500; width: 90%;margin: auto;}
	.pay-login-content .payment-method .pay-option {padding: 20px 0px 32px 0px;}
	.pay-login-content .radio {margin-bottom: 12px;}
	.pay-login-content .radio:last-child {margin-bottom: 0px;}
}
@media (max-width:375px) {
	.radios img {
    height: 32px;
}
}
@media (max-width:320px) {
	.radios img {
    height: 25px;
}

}