/* @font-face {
  font-family: "Tajawal";
  src: url(../font/Tajawal-Regular.ttf) format("truetype");
}
* {
  font-family: "Tajawal", sans-serif;
  }
  body{overflow-x:hidden ;  font-family: "Tajawal", sans-serif; scroll-behavior: smooth;} */
html {
    scroll-behavior: smooth;
}
.w-border-100{width: 100px;}
.w-400{max-width: 400px;}
.small-font {
    font-size: 90%;
}
.wpwl-wrapper > .wpwl-icon {
    position: absolute;
    left: .5625em;
    top: 0.25em;
    border: none;
    right: auto;
}
.link-disabled {
    pointer-events: none;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
    filter: grayscale();
}
iframe#challengeFrame {
    width: 500px !important;
    border: none !important;
}


@media (max-width: 779px) {

    iframe#challengeFrame {
        width: auto !important;
    }
}
.btn-light-custom, .btzn-light-custom:active, .btzn-z-sec:focus {
    background-color: #eeeeee !important;
    color: #00928f !important;
    --bs-btn-disabled-color: #000;
    transition: .5s;
}

.btn-z-sec:hover {
    background-color: #e0e0e0 !important;
    color: #193763;
}
@font-face {
    font-family: "IBMPlexSansArabic";
    src: url(../fontibm/IBMPlexSansArabic-Regular.ttf) format("truetype");
}
/* @font-face {
    font-family: "IBMPlexSansArabic-medium";
    src: url(../font/IBMPlexSansArabic-Medium.ttf) format("truetype");
  } */
* {
    font-family: "IBMPlexSansArabic", sans-serif;
}

body {
    overflow-x: hidden;
    font-family: "IBMPlexSansArabic", sans-serif;
    scroll-behavior: smooth;
}

.body-top {
    padding-top: 6.1rem;
}
  
  .starActive {
    color: orange !important;
}
.h-486 {
    height: 486px;
}
.bg-business {
    background-color: #f3f3f3;
}

.business-title {
    top: -40px;
    position: relative;
    text-align: right;
    right: 10px;
}
a{text-decoration: none; color: #1a4e9b;}
a:hover, a:focus{color: #00928f;}
.content-max-w {
    max-width: 1000px;
}
.iframe-w {
    width: 100%;
    height: 100vh; /* Full height of the viewport */
    border: none; /* Remove iframe border */
}
/*profile-----------------------------*/
.right-0.show {
  left: auto;
}
  /*start-------------------*/
  .bg-z-sec{background-color: #00928f;}
  .bg-z-sec-light{background-color: #edfcff;}
  .bg-z{background-color: #193763;}
  .fs-7{font-size: 1rem;}
  .max-w-200{max-width: 150px;}
  .size-36{width: 36px;height: 36px;}
  .navbar-nav .nav-link.active{color: #1a4e9b;font-weight: bold;}
  .navbar-nav .nav-link:focus{color: #1a4e9b !important;font-weight: bold;}
  .navbar-nav .nav-link:hover{color: #1a4e9b !important;}
    .navbar-nav .nav-link{color: rgb(0 0 0 / 80%);}
    .text-z{color: #193763 !important;}
    .text-z-sec{color: #00928f !important;}
    .link-z{text-decoration: none; color: #1a4e9b !important;}
    .link-z:hover, a:focus{color: #00928f !important;}
    .w-cal-200 {width: calc(100% - 200px);}
    .w-cal-150 {width: calc(100% - 150px);}
  .w-cal-130 {width: calc(100% - 0px);}
.hr-z{border-top: 1px solid #193763 !important;}
.btn-z, .btzn-z:active, .btzn-z:focus{background-color:#193763 !important;color: #fff !important;--bs-btn-disabled-color: #000;transition: .5s;}
 .btn-z:hover {background-color: #00928f !important;color: #fff;}
 .btn-z-sec, .btzn-z-sec:active, .btzn-z-sec:focus{background-color:#00928f !important;color: #fff !important;--bs-btn-disabled-color: #000;transition: .5s;}
 .btn-z-sec:hover {background-color: #193763 !important;color: #fff;}

 .btn-outline-z {
  --bs-btn-color: #00928f;
  --bs-btn-border-color: #00928f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00928f;
  --bs-btn-hover-border-color: #00928f;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00928f;
  --bs-btn-active-border-color: #00928f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #00928f;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #00928f;
  --bs-gradient: none;
}
 .custom-divider {margin: 1.5rem 0;color: transparent;}
 .custom-divider-sm {margin: 1rem 0;color: transparent;}
.scrollarea{overflow-y:auto;height: calc(100vh - 6.5rem);}
.scrollarea-content{overflow-y:auto;height: calc(100vh - 8rem);}
.w-300{width: 300px;}
.w-310{width: 310px;}
.course-logo-w{max-width: 150px;}
.module .list-group-item{border:none}
.sub-module.list-group-item.active{color: #193763 !important;background-color: #f7f7f7 !important;z-index: auto;border-right: 4px solid #193763;border-radius: 0;}

.prog-items > .active{color: #193763 !important;background-color: #f7f7f7 !important;z-index: auto;border-left: 4px solid #193763;border-radius: 0;}
.acc-z.accordion-button:not(.collapsed){background-color: #f7f7f7 !important;margin-bottom:10px;}
.acc-z.accordion-button:focus{box-shadow:none;}
/*.acc-z .accordion-button:not(.collapsed){background-color: #eaeff8;}*/
.acc-content .accordion-button:not(.collapsed){background-color: transparent;}
.icon-position{top: 110px;position: fixed;left: 10px;}
.course-title-position{margin-left: 70px;}
.fa-duotone{color: #98c4cf;}
.top-position{top: 98px;}
.fa-circle-check{color:rgb(25 135 84)}
.fa-circle{color: #c1dde4;}
.position-lg-fixed{position: fixed;margin-left:10px}
.under-line{text-decoration: underline;}
.m-breadcrumb{margin: .3rem !important;}
.breadcrumb-item.active{font-weight: bold; color: black;}
.tab-content-custom.active{border: none;color: #00928f !important;font-weight: 500;}
.mt-lg-custom{margin-top: .8rem !important;}
.link-star{color: #98c4cf;}
.link-star:hover, .link-star:focus{color: orange;}
.note-w{width: 100px;}

.login-w{max-width: 600px;}
.btn-close-custom{ padding: calc(var(--bs-offcanvas-padding-y)* .5) calc(var(--bs-offcanvas-padding-x)* .5);
  margin: calc(-.5* var(--bs-offcanvas-padding-y)) calc(-.5* var(--bs-offcanvas-padding-x)) calc(-.5* var(--bs-offcanvas-padding-y)) auto;
  border: none;
  background: none;
  width: 100px;
}
.custom-nav{border-bottom: 1px solid #00928f;}
.nav-underline .nav-link {
  color:#1a4e9b !important; transition: 0.5s;
}
.nav-underline .nav-link.active{color:#1a4e9b;}
.overlay {
  position: absolute;
  top: 0;
  background: #193763;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity: 0;
}
.max-400{max-width: 400px;}
.course-height{min-height: 410px;}
.course-height-350{min-height: 350px;}
.course:hover .overlay{opacity: 1; background: rgba(25, 55, 99, .3);}
.langauge{width: 160px;
  background-color: transparent;
  color: white;
  border: none;
  --bs-form-select-bg-img:url(../../images/arrow-down.png)!important}
  .langauge option{color: #193763;}

.eye-icons {text-align: left;}
.eye-icons i {position: absolute;padding: 10px 10px 10px 0;text-align: center;margin-right:-35px;}
.between-line{line-height: 0.1em;margin: 10px 0 20px;}
.between-line span{background: #fff;padding:0 10px;}
.custom-tab{flex-wrap: nowrap;}
.tab-space {white-space: nowrap;}
.tab-space::-webkit-scrollbar{ height: 4px !important;background-color: #EBEAF0;}
.tab-space::-webkit-scrollbar-thumb{background-color: #adc3c8;}
.text-warning{color: rgb(255 156 7) !important;}
.transition-none{transition: none !important;}
.course-info.active {font-weight: 700; text-underline-offset: 0.8em !important;text-decoration: underline;}
.share-drop.dropdown-toggle::after{display: none;}
.share-drop.btn{color: #1a4e9b;}
.share-drop.btn:hover{color: #00928f;}
.share-cert.dropdown-toggle::after{display: none;}
.share-drop-menu{min-width: 2rem !important;background: rgba(0, 0, 0, .8);}
.share-cert-menu{min-width: 2rem !important;background: rgba(0, 146, 143, .8);}
.share-drop-item:focus, .share-drop-item:hover, .share-drop-item:active{background-color: #193763 !important;}
.space-between-titles{margin: 55px 0px;scroll-margin-top: 160px;}
.info-menu.sticky-top {top: 4.95em; z-index: 1000;}
.hiden-inroll{visibility: hidden; transition: .5s;}
.sticky{visibility: visible !important;}
.list-none{list-style: none;}
.height8{height: 8px;}
.w-70{width: 70% !important;}
.bgdots{background: url(../../images/bg2.png);}
.dropstart-custom.dropstart .dropdown-menu{top: 3px !important;left: 0 !important;}
.dropstart-custom-alert.dropstart .dropdown-menu{top: 4px !important;left: 0 !important;}
.drop-menu-custom.dropdown-item:focus, .dropdown-item:hover{background-color: #efefef;}
.boreder-top-color{border-top: 1px solid #e4e4e4 !important;}
.table-grade tr:last-child > td, tr:last-child > th{border-bottom: none;}
.qus-title li{margin-bottom: 2rem;}
.content-max-w{max-width: 1000px;}
.vh-80{height: 80vh;}
.quiz-info-w{max-width: 800px;}
.scroll-acc{max-height: 200px; overflow-y: auto;}
.scroll-acc::-webkit-scrollbar{ width: 8px;
  background-color: #EBEAF0;}
.scroll-acc::-webkit-scrollbar-thumb{background-color: #00928f;}
.max-w-100{max-width: 100px;}
.max-40{max-width: 40px;}
.w-h-80{width: 80px; height: 80px;}
.max-800{max-width: 800px;}
.course-shadow {
  box-shadow: rgb(0 0 0 / 5%) 0px 2px 1px;
  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1) 0s;
}
.course-shadow:hover, .course-shadow:focus {
  box-shadow: rgb(0 0 0 / 24%) 0px 0px 10px -8px, rgb(0 0 0 / 20%) 0px 0px 25px -16px;
  transform: scale3d(1.03, 1.03, 1.08) translate3d(0.1rem, -0.25rem, 20rem);
}
.categories-drop.dropdown-toggle::after{display: none;}
.dropdown-size{left: 250px !important;right: 250px !important;padding:20px;background: transparent;}
  .position-inherit{position: inherit;}
  .dropdown-hover:hover>.dropdown-menu {
    display: inline-block;
    }
    
    .dropdown-hover>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
    }

.form-check-input{border-color: #666666;}
.show-more {display: none;cursor: pointer;}

.active>.page-link, .page-link.active{background-color: #00928f;border-color:#00928f}
.page-link{color: #1a4e9b;}

/*search filter*/

.sidenav {
    
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
}

.open #mySidenav {
width:250px;  
}

.open #main {
margin-left:250px;
}
.pointer{cursor: pointer;}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  margin-left: 50px;
}
#main {
  transition: 0.5s;
  padding: 16px;
}

/*expand*/
.box_full {
  height: 100vh !important;
  width: 100vw !important;
  z-index: 9999;
  position: fixed; 
top: 0; 
left: 0; 
bottom: 0;
right:0;
}
.top-right {
  position: absolute;
  top: 3px;
  right: 20px;
}
.is_hidden {
  opacity: 0;
  visibility: hidden;
}

.is_visible {
  visibility: visible;
  opacity: 1;
}
/*------*/

.owl-next.disabled, .owl-prev.disabled{opacity: 0; cursor: default !important; transition: 1s;}
.vh-calc700{min-height: calc(100vh - 300px);}

/*k12---------------------------------------*/
.hr-width {width: 25px;color: #00928f;}
.owl-theme .owl-nav .disabled{display: none !important;}
.max-w-150{max-width: 150px !important;}
.list-style-none{list-style: none;}
.required:after {content:" *";color: red;}
.payment-bg {
    background: linear-gradient(to left, rgb(241 246 246) 50%, white 50%);
}

REPLACE
.inherit-color {
    color: inherit;
}
.min-h-500 {
    min-height: 500px;
}

.w-border-80 {
    width: 80px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
}
/*end search filter */
 .active>.page-link, .page-link.active{background-color: #00928f;border-color:#00928f}
 .page-link{color: #1a4e9b;}
 @media (min-width: 1600px){
  .calc100{margin-right:100px;}
 }
 
 @media (min-width: 1366px) and (max-width:1599px){
  .calc100{margin-left:240px;}
  body{font-size: .9rem;}
  h5,.fs-5{font-size: 1.1rem}
  h4,.fs-4{font-size: 1.3;}
  .fs-7{font-size: small;}
 }
@media (max-width: 768px) {
    .nav-item-mob {
        display: none;
    }
    .payment-bg {
        background: none;
    }
    .tab-content > .tab-pane-mob {
        display: block;
        border: none;
        padding: 10px;
    }

    .tab-pane-mob {
        opacity: 1 !important;
    }
}
 @media (min-width: 1366px){
  .calc300{margin-right:300px;}
  .lg-w300{width: 300px;}
  .w-310{width: auto;}
  .min-h{min-height: 450px;}
  .scrollarea{overflow-y:auto;height: calc(100vh - 14rem);}
  .scrollarea-content{overflow-y:auto;height: calc(100vh - 12rem);}
  .position-lg-fixed{position: fixed;margin-left:10px}
  .lg-body-w{width: calc(100% - 300px);}
.offcanvas.show-custom:not(.hiding){
    visibility: visible;transform: none;margin-top: 108px;width: 300px;
}
.offcanvas.show-custom-cat:not(.hiding){
  visibility: visible;transform: none;margin-top: 120px;width: 350px;border-right: none;z-index: 0;
}
.ms-xl-270{margin-left: 270px;}
.dropstart-custom-alert.dropstart .dropdown-menu{top: -3px !important;left: 0 !important;}

 }


 @media (max-width: 1000px) {
  .position-lg-fixed{position: relative;margin-left: auto;}
  .course-height{min-height: 470px;}
  .top-right {right: 3px;}
 }

  @media (max-width: 600px) {
    .body-top{padding-top: 9rem;}
    .search-width{width: calc(100% - 100px);}
    .w-sm-100{width: 100% !important;}
    .right-0.show {left: auto !important;right: 2px !important;}
    .w-300{width: auto;}
    .w-310{width: 100%;}
    .icon-position{top: 165px;position: fixed;left: 10px;}
    .top-position{top: 135px;}
    .position-lg-fixed{position: relative;margin-left: auto;}
    .show-custom,.show-custom-cat{width: 100% !important;}
    .px-xs-1{padding-right: .25rem!important; padding-left: .25rem!important;}
    .px-xs-2{padding-right: .50rem!important; padding-left: .50rem!important;}
    .p-xs-2{padding: .50rem!important;}
    .me-xs-1{margin-right: .25rem!important; margin-left: .25rem!important;}
    .me-xs-2{margin-right: .50rem!important; margin-left: .50rem!important;}
    .course-height{min-height: auto;}
    .sticky{display: none;}
    .max-w-200{max-width: 100px;}
    .info-menu.sticky-top {top: 3.9em; z-index: 1000;}
    .max-w-150-auto{max-width: 150px; margin: auto;}
    .max-w-150{max-width: 100px; margin: auto;}
    .top-right {right: 3px;}
  }
  @media (max-width: 400px) {
    .course-info{margin-right: auto;}
  }

#favorite-icon i {
    transition: color 0.3s ease;
    cursor: pointer;
}

.fa-heart.text-danger {
    color: #dc3545; /* Override for Bootstrap's red color */
}