@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;}
/*************************************************/
.volen-bg{background: url( "../img/header.png") no-repeat center top ;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:270px;}
.headz { height: 100%}
.qur-wqf{position: relative;  height: 95%;background: url(../img/quran.png) no-repeat left bottom ;z-index: 20!important;}
/*.qur-wqf img {position: absolute;left: 0;  bottom: 0; margin-bottom: 18px;}*/
.txt-wqf  {padding:66px 72px  0 0 ;}
.txt-wqf h2 {
color: #FFF;
text-align: right;
font-family: Tajawal;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: 156.5%; /* 100.16px */
text-transform: capitalize;
}
.txt-wqf h2>span {color: #F26530;}
.txt-wqf p {
margin-right: 0px;
width: 100%;
color: #FFF;

text-align: right;
font-family: Tajawal;
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 132%; /* 36.96px */
text-transform: capitalize;
}
p.p-zmall{ display: none;}
.notes_title span {color: var(--color, #F00);}
/****************************************************************/
.input-group-append {cursor: pointer;position: absolute;left: 10px;top: 18px;}
.input-group-text {background:transparent; border: 0px;}
/*******************************************************/

.cont-item{
	position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;}
.login-section {background-color:#FFFAF8; display: flex}
.login-tab-sec { margin: auto; margin-top: 72px;margin-bottom: 72px;}
.login-tab-sec ul li { 
border-radius: 16px;
border: 1px solid rgba(242, 101, 48, 0.27);
background: #FFF;
	padding: 20px 24px;
	list-style: none;
margin-bottom: 24px;
}
.form-control{box-shadow: 0px 4.074px 4.074px 0px rgba(0, 0, 0, 0.05);
}
.cont-feild { margin-bottom: 32px;}
.cont-feild-cap { margin-bottom: 56px;}
.cont-txt{ margin-right: 32px;	 }
.cont-txt h5{
color: #87786C;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 156.5%;
}
.form-area { height: 120px;}
.cont-txt p{
color: #F26530;
text-align: right;
font-family: Tajawal;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 156.5%; /* 37.56px */
text-transform: capitalize;}
.cont-txt a{
color: #F26530;
text-align: right;
font-size: 28px;
font-style: normal;
font-weight: 500;
line-height: 156.5%; /* 43.82px */
text-decoration:none;
text-transform: capitalize;
}
.cont-foll ul{ display: flex; flex-wrap: wrap; align-content: center; justify-content: space-around}
.cont-foll ul li{ list-style: none; border:none; padding: 0px; color: #87786C;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: 156.5%; /* 37.56px */
text-transform: capitalize;
background: transparent;}
.cont-foll ul li p{ padding-top: 10px;}
.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;
	margin-right: -25px !important;
}
.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: 25px;
    font-size: 20px;
    color: #6C727F;
}
/*************************************************/
.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: right;
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;
}
.cebe { display: none;}
/*********************************************/
.know-more { padding: 32px 0px; }
.know-more h2 {
    color: var(--secondary, #87786C);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 152.9%;
    text-transform: capitalize;
}
.accordion-body{ color:#363636;background: #fff;    padding-top: 0px;}

.accordion-button:focus {
    z-index: 3;
    border-color: #F26538;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 102, 51, 0);
	font-weight: 600 !important;
}
.know-more .accordion-button {
color: var(--tertiary, #6C727F);
background: #FFF;
font-size: 19.537px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 29.306px */}
.accordion-item { border-bottom: 0px;}
/*************************.  Sent ******************************/
.sentz { background: #fff;}
.sentz img { display: block; margin: auto; width: 400px;}
/*********************** page 2 *******************************/
.div-messe { background: url("../img/bg.png") no-repeat center top;padding: 10% 0px;}
.div-line{display: block; margin: auto; width: 670px;height: 337px; background-color: transparent; padding: 16px;  border-radius: 16px;
border: 3px solid #FFF;}
.div-box {width: 100%; height: 100%; border-radius: 16px;background: #FFF;display: flex;flex-direction: column;align-items: center;gap: 32px;    padding-top: 13%;}
a.baktoh {
display: block;
margin: auto;
margin-top: 44px;
width: 503px;
height: 74px;
padding: 16px 0px;
border-radius: 16px;
border: 3px solid #F26530;
background: rgba(255, 255, 255, 0.93);
color: #F26530;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 152.9%; /* 48.928px */
text-transform: capitalize;
text-decoration: none;
}
a.baktoh:hover, a.baktoh:active { background: var(--on_hover); color: #fff;}
/***********************   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;}
.volen-bg{background: url( "../img/header-1536.jpg") no-repeat center top ; height:203px;}
.txt-wqf {padding: 50px 32px 0 0;}
.txt-wqf h2 {font-size: 42px;}
.txt-wqf p {width: 70%;font-size: 18px;}
.qur-wqf{position: relative;  height: 95%;background: url(../img/quran-1536.png) no-repeat left bottom ;}
.submit-button	{width: 375.75px;height: 55.5px;padding: 12px 31.5px; border-radius: 12px;   font-size: 24px;}
a.baktoh { width: 377.25px;height: 55.5px;margin-top: 32px;padding: 12px;border-radius: 12px; border: 2.25px solid #F26530;font-size: 24px;}
	.cont-txt h5,.cont-txt p, .cont-txt a { font-size: 18px;}
	.cont-item img {width: 48px;height: 48px; }
	.has-float-label label, .has-float-label>span {font-size: 18px;}
.cont-foll ul li {font-size: 18px;}
	.login-tab-sec ul li { padding: 15px 10px}
	.cont-foll img {width: 43px; height: 43px;}
	.cont-txt { margin-right: 24px;}
}
@media (max-width:1440px) {
 .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {max-width: 1192.5px;}
.txt-wqf {padding: 50px 44px 0 0;}
.input-group-append {left: 10px; top: 9px;}
.qur-wqf{position: relative;  height: 95%;background: url(../img/quran-1440.png) no-repeat left bottom ;}
}
@media (max-width:1280px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
      max-width: 1192.5px;}
	      .volen-bg {height: 202px;}
	.txt-wqf h2 {font-size: 36px;}
      .qur-wqf{position: relative;  height: 95%;background: url(../img/quran-1280.png) no-repeat left bottom ;}
}
@media (max-width:1166px) {
	.cont-txt h5, .cont-txt p, .cont-txt a {font-size: 15px;}
	.login-tab-sec ul li {padding: 12px 10px;}
	.cont-foll ul li {font-size: 15px;}
	.cont-txt {margin-right: 8px;}

}
@media (max-width:1024px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width:960px;}
.volen-bg{background: url("../img/header-1024.png") no-repeat center top ;height:200px;}
.txt-wqf {padding: 60px 28px 0 0;}
	.txt-wqf h2 {
    font-size: 32px;
}
	.txt-wqf p {
    width: 76%;
    font-size: 16px;
}
.qur-wqf{position: relative;  height: 95%;background: url(../img/quran-1024.png) no-repeat left bottom ;}
.form-control {height: 3.7em;}
i.eye-pass {top: 20px;}
.forget {font-size: 21px;}
	.login-tab-sec {margin-top: 42px;}
	.login-tab-sec ul li {
    padding: 12px 6px;
}
}
@media (max-width: 990px){
	.txt-wqf p {
    width: 81%;
    font-size: 17px;
}
	.col-12 { width: 100%;}
	.submit-button{display: block; margin: auto;}
}
@media (max-width:768px) {
  .volen-bg{background: url(../img/header-768.png) no-repeat center top ;
        height:150px;}
	.txt-wqf p {
    width: 92%;
    font-size: 16px;
}
	.txt-wqf {
    padding: 24px 28px 0 0;
}
}
      
@media (max-width:767px) {
	#login-tab-pane h2 {font-size: 20px; padding-bottom: 20px;}
.forget { display: none}
	.forget2 { display: inline; font-size: 20px;}
}
@media (max-width:702px) {

    .qur-wqf { display: none;;}
    .txt-wqf{ width: 100%;}
    .txt-wqf p {  font-size: 18px;  width: 84%;}
    .shar-fee {  margin-right: 83%;}
}
@media (max-width:640px) {
.volen-bg {
    background: url( "../img/header-640.png") no-repeat center top;height: 271px;}
    .qur-wqf { display: none;;}
    .txt-wqf{ width: 100%;}
    .txt-wqf p {  font-size: 16px;  width: 89%;    text-align: center;}
.div-line {width: 400px;height: 210px;}
	.div-box img { max-width: 90%;}
	a.baktoh {
    width: 300.25px;
    height: 48.5px;
    margin-top: 24px;
    padding: 12px;
  	border-radius: 16px;
	border: 3px solid #F26530;
    font-size: 18px;
}
	 .txt-wqf h2 { text-align: center}
	
}
@media (max-width:550px) {
	.p-44 {padding-bottom: 0px;}
	.login-tab-sec {margin: 32px 16px;}
	.cont-feild-cap {margin-bottom: 28px;}
	.notes_title span {color: var(--color, #F00);font-size: 18px;padding-left: 5px;}

	.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: 20px; font-weight: 700;}
	.has-float-label{ font-weight: 700;}
	.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;}
	.div-rememb { padding-bottom: 20px;}
	
	.submit-button { width: 90%;font-size: 20px;font-style: normal;font-weight: 500;line-height: 152.9%; /* 30.58px */}
	.forget2 { font-size: 14px;}
	.form-check label {padding-top: 8px;}
	.form-check label.login-check-label{ font-size: 14px;}
	#register-tab-pane h3 {font-size: 14px;font-weight: 500; padding: 0px; margin-bottom: 24px;}
	.reg-message { font-size: 14px; padding-top: 10px;}
	.cebe { display: block;width: 50%; margin: auto;padding-bottom: 20px;}
	.h-marg h3 { margin-top: 24px;    font-weight: 400;}
	.accordion-body {FONT-SIZE:14px;    padding-top: 0px;}
	.txt-wqf p {
    font-size: 16px;
    width: 100%;}
	.txt-wqf {padding: 24px 0px 0 0;width: 95%;margin: auto;}
	.know-more h2 {font-size: 18px; margin-bottom: 16px;}
	.accordion-header { margin-bottom: 0px !important;}
	.know-more .accordion-button {font-size: 16px;}
	/******************page2******************/
	.sentz img {width: 200px;}
}
@media (max-width:450px) {
.div-line {width: 290px;height: 130px;border: 1.5px solid #FFF;    padding: 8px;}
.div-box {padding-top: 10%;}
a.baktoh { width: 259.25px;  height: 48.5px;margin-top: 16px;}
.login-tab-sec ul li:first-child {width: 100%; padding-bottom: 0px;margin-bottom: 12px;    padding: 12px 6px;}
	.login-tab-sec ul li {margin-bottom: 12px;  }
.cont-img{width: 20%;}
.cont-txt{width: 75%;}	
}
@media (max-width:375px) {
.volen-bg {
    background: url( "../img/header-375.png") no-repeat center top;height: 180px;}
    .qur-wqf { display: none;;}
    .txt-wqf h2 {font-size: 21px; text-align: center}
}
@media (max-width:320px) {
.txt-wqf p {
    width: 97%;
}
}

