:root {
    --primary-color: #04594D;
    --hov-primary-color: #03473d;
    --secondary-color: #F8F8FA;
    --hov-secondary-color: #dfdfe1;
    --warning-color: #DBAE4E;
    --hov-warning-color: #c59c46;
    --text-black:#4A4444;
    --text-light-black:#666;
    --light-bg:#f9f9f9;
    --dark-bg:#F1F1F1;
}
a , .wrap-cycle:hover {
    transition: all .3s ease-in-out;
}
/*Bootstrap customization*/
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    background-color: var(--hov-primary-color);
    border-color: var(--hov-primary-color);
}
/*
.btn-secondary {
    background-color: #F8F8FA;
    border-color: #F8F8FA;
}
.btn-secondary:hover {
    background-color: #dfdfe1;
    border-color: #dfdfe1;
}
*/
.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: #FFF;
}
.btn-warning:hover {
    background-color: var(--hov-warning-color);
    border-color: var(--hov-warning-color);
    color: #FFF;
    
}


/*Custom*/
.light-bg {
    background-color: var(--light-bg) !important;
}
.dark-bg {
    background-color: var(--dark-bg) !important;
}
body {
    font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: var(--text-black);
    background-color: var(--dark-bg);
}
.fw400 {
    font-weight: 400;
}
.fw500 {
    font-weight: 500;
}

.text-primary {
    color: #04594D !important;
}
.bg-primary {
    background-color: #04594D !important;
}
.bg-secondary {
    background-color: #F8F8FA !important;
}
.login-area a {
    font-size: 13px;
}
.header-social {
    list-style-type: none;
}
.header-social li {
    display: inline-block;
}
.header-social li a {
    display: block;
    margin: 0 16px;
}
.header-social li a:hover {}
.header-social li a i {
    color: #FFF;
}
.header-social li a:hover {}
.logo {
    width: 200px;
}
.bg-secondary-gradient {
    background: rgb(248,248,250);
    background: linear-gradient(90deg, rgba(248,248,250,1) 0%, rgba(248,248,250,1) 88%, rgba(255,255,255,1) 100%);
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #F8F8FA !important;
}


.zk-bg .header-bg {
    background: url(images/hero-bg.png) no-repeat center;
    background-size: cover;
    position: relative;
    top: -90px;
    padding-top: 150px;
    padding-bottom: 40px;
}
.about-home-title {}
.about-home-description {
    line-height: 2;
    text-align: justify;
}
.fslider {
    margin-top: 40px;
}
.bg-home-center {
    background: #f9f9f9 url(images/bghome.png) no-repeat bottom left;
    /* background-position-y: -29%; */
}

.owl-carousel .owl-nav{
    overflow: hidden;
    height: 0px;
  }

  .owl-theme .owl-dots .owl-dot.active span, 
  .owl-theme .owl-dots .owl-dot:hover span {
      background: #04594D;

  }

  .owl-theme .owl-dots .owl-dot.active span {
      background: #04594D;
       width: 20px; 
       height: 5px; 
  }

  .owl-carousel .item {
      text-align: center;
  }
  .owl-carousel .nav-btn{
      height: 30px;
      position: absolute;
      width: 30px;
      cursor: pointer;
      top: 50% !important;
      color: #04594D;
      background: #dee8e6;
      line-height: 1.6;
      border-radius: 50%;
      font-size: 20px;
  }

  .owl-carousel .owl-prev.disabled,
  .owl-carousel .owl-next.disabled{
    pointer-events: none;
    opacity: 0.2;
  }

  .owl-carousel .prev-nav{
      left: -8px;
  }
  .owl-carousel .next-nav{
      right: -8px;
  }
  .owl-carousel .prev-slide:hover{

}
  .owl-carousel .next-slide:hover{

}

  span.img-text {
    text-decoration: none;
    outline: none;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    cursor: pointer;
    width: 100%;
    font-size: 23px;
    display: block;
    text-transform: capitalize;
  }
  span.img-text:hover {
    color: #2caae1;
  }

  .owl-theme .owl-dots .owl-dot span {
    width: 5px;
    height: 5px;
    margin: 5px 2px;
}

.owl-theme .owl-dots {
    position: relative;
    bottom: 44px;
}
.cycle-home-title {
    position: relative;
}
.cycle-home-title::after {
    height: 1.5px;
    content: "";
    width: 122px;
    background: #DBAE4E;
    position: absolute;
    right: 0;
    bottom: -8px;
}
.cycle-home-title::before {
    height: 6px;
    content: "";
    width: 38px;
    background: #DBAE4E;
    position: absolute;
    right: 0;
    bottom: -10px;
}
.cycle-home-description {
    line-height: 2;
    text-align: justify;      
}
.update-cycle-home-title {
    position: relative;
}
.update-cycle-home-title::after {
    content: "";
    height: 2px;
    width: 164px;
    background: var(--primary-color);
    position: absolute;
    bottom: -25px;
    left:50%;
    transform:translate(-50%,-50%);
}

.circles-line {
    background-color: var(--primary-color);
    bottom: -34px;
}
.circles-line, .circles-line::before , .circles-line::after {
    display: block;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.circles-line:before {
    transform: translateX(-30px);
    background-color:var(--primary-color);
}
.circles-line:after {
    transform: translateX(30px);
    background-color: var(--primary-color);
}
.circles-line:before, .circles-line:after {
    position: absolute;
    content: "";
    bottom: 1px;
}
.circles-line:before {
    right: -16px;
    width: 8px;
    height: 8px;
}

.circles-line:after {
    left: -16px;
    width: 8px;
    height: 8px;
}
.teacher {
    font-size: 13px;
    font-weight: bold;
    /* float: left; */
    color: var(--primary-color);
}

.cycle-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
}

.teacher, .cycle-title a  {
    color: var(--primary-color) !important;
}

.teacher:hover, .cycle-title a:hover  {
    color: var(--primary-color);
}
.cycle-date, .cycle-date a {
    color: var(--warning-color) !important;
    
}
.wrap-cycle:hover {
    background-color: var(--hov-primary-color) !important;
}
.wrap-cycle:hover .teacher,.wrap-cycle:hover .cycle-desc, .wrap-cycle:hover .cycle-title a,.wrap-cycle:hover .cycle-date, .wrap-cycle:hover .cycle-date span, .wrap-cycle:hover .cycle-date svg  {
    color: #FFF !important;
}
.wrap-cycle:hover .cycle-join {
    background-color: #FFF;
    color: var(--primary-color);
}
.teacher-title {
    font-size: 14px;
    font-weight: bold;
}
.wrap-cycle:hover .teacher-title {
   color: #FFF; 
}
.ejaza-desc {
    color: #000;
}

.ejaza-home-title {
    position: relative;
}
.ejaza-home-title::after {
    height: 1.5px;
    content: "";
    width: 122px;
    background: #DBAE4E;
    position: absolute;
    right: 0;
    bottom: -8px;
}
.ejaza-home-title::before {
    height: 6px;
    content: "";
    width: 38px;
    background: #DBAE4E;
    position: absolute;
    right: 0;
    bottom: -10px;
}
.ejaza-home-description {
    line-height: 2;
    text-align: justify;      
}

.ajaza-home-bg {
    background: url(images/light-logo.png) top right no-repeat;
    background-position-y: 20px;
    background-position-x: 96%;
}
.ajaza-home-bg2 {
    background: url(images/ejaza-pattrn.png) bottom right no-repeat;
    background-size: contain;
    background-position-y: 170%;
}

.status-home-title {
    position: relative;
}

.status-home-title::after {
    content: "";
    height: 2px;
    width: 164px;
    background: var(--primary-color);
    position: absolute;
    bottom: -25px;
    left:50%;
    transform:translate(-50%,-50%);
}

.wrap-status {
    text-align: center;
    border: 1px solid var(--primary-color);
    box-shadow: 1px 2px 8px 0px var(--primary-color);
    height: 160px;
}
.wrap-status img {
    
width: 35px;
    
margin-bottom: 10px;
}
.status-countries {
    width: 29px;
}
.wrap-status h2 {

font-weight: 700;

font-size: 23px;

color: var(--primary-color);
}
.wrap-status h5 {

font-weight: 700;

font-size: 14px;
}


.wrap-blog-bg {
    background: url(images/blog-bg.png) no-repeat top center;
    height: 146px;
    background-size: contain;
    position: relative;
    top: -75px;
}


.carousel-indicators button.thumbnail {
    width: 100px;
  }
  .carousel-indicators button.thumbnail:not(.active) {
    opacity: 0.7;
  }
  .carousel-indicators {
    position: static;
  }
  @media screen and (min-width: 992px) {
    .carousel {
      max-width: 70%;
      margin: 0 auto;
    }
  }
  
.footer-bg {
    background: url(images/footer-bg.png) no-repeat;
    height: 486px;
    background-size: contain;
}

ul.footer-menu {
    list-style-type: none;
}
ul.footer-menu li {
    display: inline;
    margin-left: 20px;
}
ul.footer-menu li a {
    text-decoration: none;
    color: var(--text-light-black);
    font-weight: bold;
}
ul.footer-menu li a:hover {}

.footer-contact {}
.footer-contact .contact-1 {}
.footer-contact .contact-1 i {
    background-color: rgba(255, 219, 245, 0.5);
    color: #F04AC5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 2.5;
    position: relative;
    top: 23px;
}
.footer-contact .contact-1 h4 {}
.footer-contact .contact-1 p {}
.footer-contact .contact-1 p a {}
.footer-contact .contact-1 p a:hover {}
.footer-contact .contact-1 {}
.footer-contact .contact-1 i {
    background-color: rgba(255, 219, 245, 0.5);
    color: #F04AC5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 2.5;
    position: relative;
    top: 23px;
}
.footer-contact .contact-1 h4 {}
.footer-contact .contact-1 p {}
.footer-contact .contact-1 p a {
    text-decoration: none;
    color: #000;
}
.footer-contact .contact-1 p a:hover {}

.footer-contact .contact-2 {}
.footer-contact .contact-2 i {
    background-color: rgba(193, 224, 246, 0.3);
    color: #4AAEE1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 2.5;
    position: relative;
    top: 23px;
}
.footer-contact .contact-2 h4 {}
.footer-contact .contact-2 p {}
.footer-contact .contact-2 p a {}
.footer-contact .contact-2 p a:hover {}

.footer-contact .contact-3 {}
.footer-contact .contact-3 i {
    background-color: rgba(219, 174, 77, 0.15);
    color: #DBAE4E;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 2.5;
    position: relative;
    top: 23px;
}
.footer-contact .contact-3 h4 {}
.footer-contact .contact-3 p {}
.footer-contact .contact-3 p a {}
.footer-contact .contact-3 p a:hover {}
.footer-social {
    text-align: center;
    list-style-type: none;
}
.footer-social {}
.footer-social li {
    display: inline-block;
    margin-left: 20px;
}
.footer-social li a {
    color: var(--primary-color);
    font-size: 20px;
}
.footer-social li a:hover {}
.footer-copyrights {
    color: var(--warning-color);
    font-size: 22px;
}
.jusoor {}
.jusoor a {
    text-decoration: none;
    color: #274f89;
    font-weight: 400;
}
.jusoor a:hover {}

.reg-pttrn {
    background: rgb(248,248,250);
}
.reg-pttrn .card-header {
    background: var(--primary-color);
    color: #FFF;
    font-weight: bold;    
}
.reg-pttrn .card-body {
    background: url(images/bghome-light.png) center no-repeat;
    background-size: cover;
}
.clink {color: var(--primary-color);text-decoration: none;}
.clink:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.cycle-info {
    list-style-type: none;
    bottom: 10px;
    left: -24px;
}
.cycle-info li {
    display: inline-block;
    margin-left: 5px;
}
.wcourses {
    top: -90px;
}
.top-menu {}
.top-menu .nav-item{}
.footer-logo {
    width: 300px;
}

@media only screen and (max-width: 600px) {
    .footer-bg {
        background: url(images/footer-bg.png) no-repeat;
        background-size: cover;
        height: auto;
        background-position: -151px;
    }
}