@font-face { font-family: 'diodum'; font-style: normal; font-weight: 400; src: url(../fonts/DiodrumLight.woff2) format('woff2'); }
/* @font-face { font-family: 'diodum'; font-style: bold; font-weight: 400; src: url(../fonts/diodrum.woff2) format('woff2'); }
@font-face { font-family: 'diodum'; font-style: bolder; font-weight: 400; src: url(../fonts/DiodrumSemibold.woff2) format('woff2'); } */
/* fallback */
@font-face { font-family: 'mi'; font-style: normal; font-weight: 400; src: url(../fonts/materialIcons.woff2) format('woff2'); }
::-moz-selection{ color: white; background: rgba(0,180,180,0.5);}
::selection { color: white; background: rgba(0,180,180,0.5); }
* {padding: 0;margin: 0;box-sizing: border-box;}
html{scroll-behavior: smooth;font-family: 'diodum';direction: rtl;}
body{background:transparent;line-height: 1.4;/*background-image: url(img/bg.svg);background-attachment: fixed;*/}
mainloading {display: table;position: fixed; background: rgba(255,255,255,0.95); width: 100%; height: 100%; z-index: 999999999999999;}
mainloading > inner {display: table-cell; vertical-align: middle;}
.loading,loading { display: block;width: 200px;height: 200px;background: url(../../img/loading.svg);background-size: contain; margin: auto;}
mi,.mi{ font-family: 'mi'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; vertical-align: middle;}
body::before{display: block;content: '';top:0;width: 100%;height: 100vh;position: fixed;background:transparent;background-image: url(../../img/bg.svg);background-attachment: fixed;z-index: 1;background-size: auto 100%; opacity: .3;}
::-webkit-scrollbar { width: 6px;height: 6px;}
::-webkit-scrollbar-track { background:rgba(171, 171, 171, 0.1); border: 0px solid white; -webkit-border-radius: 10px; border-radius: 10px; }
::-webkit-scrollbar-thumb { -webkit-border-radius: 6px; border-radius: 6px; background: #ccc; border: 0px solid white; }
::-webkit-scrollbar-thumb:window-inactive { background: #ddd; }
slid{display: table;height: 100vh;width: 100%;}
slid>inner{display: table-cell;vertical-align: middle;text-align: center;z-index: 2; position: relative;padding: 10px 0;padding-top: 70px;}
slid>inner>p,slid inner wrap{display: block;max-width: 1100px; margin: auto;}
slid>inner img { max-width: 100%; }
slid H1{margin-bottom: 20px; font-size: 30px;}
slid.cover{background-image: url(https://haseib.com/images/mockup.jpg);background-position: center;background-size: cover;}
[inboard],[onboard]{position: relative;}
[onboard] h1{color: white;}
[onboard]::after{ content: ''; background:darkcyan; height: 60%; left: 0; position: absolute; top: 0; width: 100%; border-radius: 10px; box-shadow: 0 5px 5px -6px black; z-index: -999; }
[inboard]::after { content: ''; background: darkcyan; height: 60%; left: 0; position: absolute; margin-top: 27%; width: 100%; border-radius: 10px; box-shadow: 0 5px 5px -6px black; z-index: -999; }
card{ display: block;background: white; box-shadow: 0 1px 4px -3px black; border-radius: 5px;padding: 10px;}
card > p{ height:180px;overflow: auto;}
a{text-decoration: none;cursor: pointer;}
.nxtPg{position: absolute; bottom: 0; background: white; display: inline-block; padding: 0 10px; border-top-left-radius: 7px; border-top-right-radius: 7px; box-shadow: 0 -10px 9px -8px; padding-bottom: 10px; font-size: 25px; line-height: .7; z-index: 999999; margin: auto; right: calc( 50% - 19px);color: black;}
wlogo,logo{display: inline-block; width: 250px;max-width: 100%;height: 150px; background-repeat: no-repeat; background-size: contain;background-position: center;}
wlogo{
  background-image: url(https://haseib.com/images/logo.png);
}
logo{width: 100px; height: 60px; margin: 8px;float: left;
  background-image: url(https://haseib.com/images/logo.png);
}
header { display: none; height: 80px; width: 100%;z-index: 999999999;position: fixed;}
header>inner{ display: block; width: 1200px; max-width: 100%;margin: auto;padding: 0 10px;}
header logo { transform: translate(-10px, -20px); background-color: white; box-shadow: 0 0 5px -2px; border-radius: 12px; height: 91px; background-size: 80%; }
header mainmenu { display: block;/*background: white; box-shadow: 0 0 5px -2px black;*/ border-radius: 11px; margin-top: 20px; height: 40px;  }
header.active{top: 0;display: block;}
header mainmenu > a { float: right; margin: 5px 0; margin-right: 15px;display: inline-block; color: black; position: relative;background: white; padding: 5px 10px; border-radius: 9px; box-shadow: 0 6px 6px -5px;filter: drop-shadow(0px 0px 2px rgba(0,0,0,.1));}
header mainmenu > a.active::after,header > a:hover::after{display: block; content: ''; position: absolute; bottom: -10px; width: 100%; background: black; height: 6px; border-radius: 10px;}
header mainmenu > bars{display: none; float: right;font-family: 'mi';margin:10px; font-size: 49px; line-height: 0.5; text-indent: -1px; width: 27px;}
.btn{
  border: 0; font-family: inherit; font-weight: bold;font-size: inherit;
  display: inline-block; background: #00b4b4; padding: 5px; border-radius: 9px; box-shadow: 0 6px 6px -5px rgba(0, 0, 0, 0.5); filter: drop-shadow(0px 0px 2px rgba(0,0,0,.1)); color: white;outline: 0}
@media (max-width:450px) {
  header mainmenu > a{display: none;}
  header mainmenu > bars{display: inline-block;}
  .expand mainmenu > a{display: block; width: 96%; padding: 10px; background: rgba(255,255,255,.9); box-shadow: 0 0 2px; margin: 4px 2%; border-radius: 9px;}
  header.expand mainmenu > a.active::after, header.expand > a:hover::after{bottom: 1px; right: 1%; width: 98%;}
}
.right{text-align: right;}
.left{text-align: left;}
iframe{border: 0; border-radius: 10px; box-shadow: 0 0 5px -2px; width: 90vw; max-width: 100%;}
.clear::after{content: '';display: block;clear: both;}
flex{display: flex;gap: 10px;}
label{ display: flex;margin-bottom: 10px;white-space: nowrap;line-height: 40px; }
label > input{ margin-right: 10px;font-family: inherit; }
input[type=radio],input[type=checkbox]{height: 25px; width: 25px;margin: 0;margin-left: 10px;vertical-align: middle;align-self: center;}
input[type=text],input[type=number],input[type=email],input[type=tel],select{
  width: 100%;
  border: 0;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  box-shadow: 0 1px 5px -2px black;
  -webkit-box-shadow: 0 1px 5px -2px black;
  padding: 0 10px;
  font-size: inherit;
  outline: 0;
  font-family: inherit;
}
alert,.alert { display: block; position: relative; background: rgba(255, 202, 0, 0.14); padding: 5px; padding-right: 30px; box-shadow: 0 0 3px rgba(185, 128, 0, 0.38); margin: 10px 0; border-radius: 5px; position: relative;color:#b98000; }
.alert::before,alert::before{content: "😦";display: block;position: absolute;right: 5px;top:5px;color:#b98000;font-weight: bolder;}
succ,.succ { display: block; position: relative; background: rgba(205, 245, 201, 0.45); padding: 5px; padding-right: 30px; box-shadow: 0 0 3px rgb(180, 204, 175); margin: 10px 0; border-radius: 5px; position: relative;color:#8ec384; }
.succ::before,succ::before{content: "👍";display: block;position: absolute;right: 5px;top:5px;color:#8ec384;font-weight: bolder;}
error { display: block; position: relative; background: rgba(255, 0, 0, 0.14); padding: 5px; padding-right: 30px; box-shadow: 0 0 3px rgba(185, 0, 0, 0.38); margin: 10px 0; border-radius: 5px; position: relative;color:#a22814; }
error::before{content: "😡";display: block;position: absolute;right: 5px;top:5px;color:#b98000;font-weight: bolder;}

.b{font-weight: bold;}
.fs28{font-size: 28px;}.fs25{font-size:25px;}.fs20{font-size:20px;}.fs18{font-size:18px;}.fs15{font-size:15px;}.fs13{font-size:13px;}
.w10, .w20, .w30, .w40, .w50, .w60, .w70, .w80, .w90, .w100 {float: right;}
.w10 {width: 10%;} .w15 {width: 15%;}
.w20 {width: 20%;} .w25 {width: 25%;}
.w30 {width: 30%;} .w35 {width: 35%;}
.w40 {width: 40%;} .w45 {width: 45%;}
.w50 {width: 50%;} .w55 {width: 55%;}
.w60 {width: 60%;} .w65 {width: 65%;}
.w70 {width: 70%;} .w75 {width: 75%;}
.w80 {width: 80%;} .w85 {width: 85%;}
.w90 {width: 90%;} .w95 {width: 95%;}
.w100 {width: 100%;}
.block{display: block;}
.inline-block{display: inline-block;}
[class*="pc-"],[class*="mob-"]{ float: right; padding: 5px;}
[class*="pc-"]>.box,[class*="mob-"]>.box{ margin: 0;}
@media (max-width: 751px) {
    [class*="pc-"]{ width: 100%; }
    .mob-auto{width:auto;}
    .mob-10 {width: 10%;} .mob-15 {width: 15%;}
    .mob-20 {width: 20%;} .mob-25 {width: 25%;}
    .mob-30 {width: 30%;} .mob-35 {width: 35%;}
    .mob-40 {width: 40%;} .mob-45 {width: 45%;}
    .mob-50 {width: 50%;} .mob-55 {width: 55%;}
    .mob-60 {width: 60%;} .mob-65 {width: 65%;}
    .mob-70 {width: 70%;} .mob-75 {width: 75%;}
    .mob-80 {width: 80%;} .mob-85 {width: 85%;}
    .mob-90 {width: 90%;} .mob-95 {width: 95%;}
    .mob-100 {width: 100%;}
    .mob_hide{display: none !important;}
    .mob-flex{display: flex;}
}
@media (min-width: 750px) {
  [class*="mob-"]{ width: auto; }
  .pc-auto{width:auto;}
  .pc-10 {width: 10%;} .pc-15 {width: 15%;}
  .pc-20 {width: 20%;} .pc-25 {width: 25%;}
  .pc-30 {width: 30%;} .pc-35 {width: 35%;}
  .pc-40 {width: 40%;} .pc-45 {width: 45%;}
  .pc-50 {width: 50%;} .pc-55 {width: 55%;}
  .pc-60 {width: 60%;} .pc-65 {width: 65%;}
  .pc-70 {width: 70%;} .pc-75 {width: 75%;}
  .pc-80 {width: 80%;} .pc-85 {width: 85%;}
  .pc-90 {width: 90%;} .pc-95 {width: 95%;}
  .pc-100 {width: 100%;}
  .pc_hide{display: none !important;}
  .pc-flex{display: flex;}
}
span.validate-msg {
  background: rgba(255, 244, 107, 0.25);
  padding: 7px 7px;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
  float: none;
  margin-left: 2px;
  line-height: inherit;
  font-weight: unset;
}
.flex{display: flex;}
.flex span.validat-msg{
    position: absolute;
    bottom: 100%;
    left: 0;
}
input[type=range]{ -webkit-appearance: none; width: 100%; margin: 15px 10px; height: 10px;background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;border-radius: 50px; }
input[type=range]:hover{  opacity: 1;}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: #00b4b4; cursor: pointer;border-radius: 50px;box-shadow: 0 0 15px -5px black;}
input[type=range]::-moz-range-thumb { width: 25px; height: 25px; background: #00b4b4; cursor: pointer; }
footer { display: block;text-align: center;background: darkcyan; left: 0; position: absolute; width: 100%; border-radius: 10px; box-shadow: 0 5px 5px -6px black; min-height: 50px; padding: 10px;color: #fff;}
zakatseal {display: inline-block; background: url(../../img/zakatSeal.svg) no-repeat center center; background-size: contain; width: 450px ; height: 80px ; margin: 5px auto;max-width: 100%;}
.swiper-container{width: 100%;}