@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;
font-family: Tajawal;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 150%;
text-align: center;}
form-control, input {
    height: 72px;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00) !important;
    border-radius: 12px !important;
}
/*******************************************************/
.mres { max-width: 165px !important; margin:auto; display: block}
.notz {color: #87786C;
text-align: center;
font-family: Tajawal;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 150%;
padding-top: 16px;}
/*******************************************************/
.radios {
  width: 70%;
	margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.methodz-option{padding: 22px 10px 0px 10px;}
.radios img {height: 48px;}
.radio {padding: 16px 5px;}
.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;
}
.radios label {
  display: flex;
  align-items: center;
	justify-content: space-between;
color: var(--secondary, #87786C);
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 36.696px */

}
.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-left: 16px;
  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;}






/*****************************************/
.pass-ask{
border-radius: 24px;
border: 3px solid rgba(242, 101, 48, 0.48);
background: #FFF;
	padding: 44px;
	margin: 72px 0px 72px 0px;
}
.login-tab-sec { margin: auto; margin-top: 72px;margin-bottom: 72px;}
.login-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);}
.login-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}
.login-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); }
.login-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);}
.login-tab-sec ul li:first-child button{border-radius: 0px; border-top-right-radius: 24px}
.login-tab-sec ul li:last-child button{border-radius: 0px; border-top-left-radius: 24px}
.login-tab-sec .nav-link.active, .login-tab-sec .nav-item.show .nav-link {
    color: #FFF;background-color: #F16531;font-size: 24px;font-style: normal;font-weight: 700;line-height: 150%;;}
.login-tab-sec ul li button.active{color:#fff;background-color: #F16531;}
.login-tab-content{border-radius: 0px 0px 24px 24px;
border: 3px solid rgba(242, 101, 48, 0.48);
background: #FFF;
padding: 44px 32px 64px 32px;}
#login-tab-pane h2{
	text-align: center;
color: #87786C;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 150%;
margin: auto;}
.forget { 
text-align: left;
color: #F26530;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 36.696px */
text-transform: capitalize;
	text-decoration: none;
}
.forget2{ 
	display: none;
	color: #F26530;
text-align: right;
font-family: Tajawal;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 152.9%;
text-decoration: none;}
.form-check label.login-check-label{
color: #F26530;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */}
.login-check-input {
    width: 24px;
    height: 24px;
    border-radius: 0px !important;
    border: 2px solid #F26530;
}
.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 ;
}
i.eye-pass {
    left: 40px;
    cursor: pointer;
    position: absolute;
    top: 14px;
    font-size: 20px;
    color: #6C727F;
}
.pass-ask img { max-width: 320px;}
/*************************************************/
.h-marg{margin: 0 15px;}
#register-tab-pane h3{ 
color: #F08C68;
text-align: right;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 152.9%; /* 36.696px */
text-transform: capitalize;
border-bottom: 1.2px solid rgba(0, 0, 0, 0.18);
padding: 11px 24px 13px 0px;
background: #FFF;
}
#register-tab-pane h3 i{ padding-left: 12px; }
.reg-message{color: #87786C;
text-align: center;
font-family: Tajawal;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */}
was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: #F16531;
}
.up-all{
display: none;	
color: var(--secondary, #87786C);
text-align: center;
font-family: Tajawal;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 24.464px */
text-transform: capitalize;	
 margin-borrom:14px; 	
}
/***********************   Responsive   *************************/
@media (max-width:1920px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {max-width: 1590px;}

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

}
@media (max-width:1536px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {max-width: 1294px;}

}
@media (max-width:1440px) {
 .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {max-width: 1192.5px;}

}
@media (max-width:1200px) {
	.up-all{display: block}
	.l-all { display: none !important;}
}
@media (max-width:1024px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width:960px;}
.form-control {height: 3.7em;}
i.eye-pass {top: 20px;}
.forget {font-size: 21px;}

}
@media (max-width: 990){
.txt-wqf p {width: 95%;}
}
@media (max-width:768px) {
 
}
@media (max-width:767px) {
 h2 {font-size: 20px; padding-bottom: 20px !important;}
	.p-56{ padding: 0px;}
	.p-32 {padding: 0px;}
.has-float-label{ padding-bottom: 32px;}
.forget { display: none}
	.forget2 { display: inline; font-size: 20px;}
	.methodz-option {
    padding: 0px;
    padding-bottom: 32px;
}
	.up-all { font-size: 20px;}
	.radios label { font-size: 20px;}	
	.radios {width: 100%;	}
}

@media (max-width:550px) {
	.mres { max-width: 92px !important;}
	.login-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);}
	.login-tab-sec ul li:first-child button { border-top-right-radius: -1px;}
	.login-tab-sec ul li:first-child { border-top-right-radius: 12px;}
	.login-tab-sec ul li:last-child {border-top-left-radius: 12px;}
	.login-tab-sec ul li:last-child button {border-top-left-radius: 10px;}
	.login-tab-sec ul li:first-child button {border-top-right-radius: 11px;}
	.login-tab-sec ul li:first-child {border-left: .5px solid rgba(242, 101, 48, 0.48);}
	.login-tab-sec ul li:last-child {border-right: .5px solid rgba(242, 101, 48, 0.48);}
	.login-tab-content {border: 1px solid rgba(242, 101, 48, 0.48);}
	.login-tab-content {padding: 24px 16px 32px 16px;}
.login-tab-sec .nav-link.active, .login-tab-sec .nav-item.show .nav-link {font-size: 16px;line-height: 152.9%;}
 .login-tab-sec .nav-link { font-size: 16px;line-height: 152.9%;} 
	#login-tab-pane h2 {font-size: 16px; padding-bottom: 16px;}
	.has-float-label{ padding-bottom: 21px;}
	.has-float-label label, .has-float-label>span { font-size: 16px;font-style: normal;font-weight: 500;line-height: 152.9%;}
	.form-control, input {box-shadow: 0px 3.11579px 3.11579px rgba(0, 0, 0, 0.00) !important;height: 54px;}
	i.eye-pass {  top: 17px;}
	.p-32{ padding-bottom: 0px;}
	.submit-button { width: 90%;font-size: 20px;font-style: normal;font-weight: 500;line-height: 152.9%; /* 30.58px */}
	.methodz-option { padding: 0px; padding-bottom: 26px;}
	.forget2 { font-size: 14px;}
	.form-check label {padding-top: 8px;}
	.form-check label.login-check-label{ font-size: 18px;}
	#register-tab-pane h3 {font-size: 14px;font-weight: 500;}
	.reg-message { font-size: 14px;}
	.up-all { font-size: 16px;}
	.radios label { font-size: 16px;}
	h2{ font-size: 16px;}
	.sublink{ font-size: 16px;}
	.pass-ask {
    border-radius: 12px;
	border: 1px solid rgba(242, 101, 48, 0.48);
    background: #FFF;
    padding: 32px 16px 32px 16px;
    margin: 32px 0px 32px 0px;
}
	.pass-ask h2{ font-weight: 700;}
	.radio .checker { width: 32px;height: 32px;}
	.notz { font-size: 14px;font-style: normal;font-weight: 500;line-height: 140.5%; /* 19.67px */}
}
@media (max-width:375px) {
	.radio .checker { width: 28px;height: 28px;}
	.radio .checker {margin-left: 8px;}
	.radio {padding: 16px 0px;}
}
@media (max-width:320px) {

}