body {
    /* direction: ltr; */
  }

  .tajawal-extralight {
      font-family: "Tajawal", serif !important;
      font-weight: 200;
      font-style: normal;
    }

    .tajawal-light {
      font-family: "Tajawal", serif;
      font-weight: 300;
      font-style: normal;
    }

    .tajawal-regular {
      font-family: "Tajawal", serif;
      font-weight: 400;
      font-style: normal;
    }

    .tajawal-medium {
      font-family: "Tajawal", serif;
      font-weight: 500;
      font-style: normal;
    }

    .tajawal-bold {
      font-family: "Tajawal", serif;
      font-weight: 700;
      font-style: normal;
    }

    .tajawal-extrabold {
      font-family: "Tajawal", serif;
      font-weight: 800;
      font-style: normal;
    }

    .tajawal-black {
      font-family: "Tajawal", serif;
      font-weight: 900;
      font-style: normal;
    }

    html[dir="rtl"]{
      font-family: "Tajawal", serif;
  }
  /*  login form */

  .nav-desktop {
    height:70px
  }


  .login-container {
  position: relative;
  width: 100%;

  }

  .logo-login {
    width: 300px;
  }

  .english-btn {
    background-color: #e4990f;
    color: #fff;
    cursor: pointer;
     border: none;
  }

  .social-nav {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    margin-top: 10px;
    justify-content: flex-end;
  }

  .form-wrapper.login, .form-wrapper.sing-up {
      background: rgba(252, 252, 252, 0.772);
      padding: 15px;
      border-radius: 15px;
  }

  .form-login,
  .sign-up-form  {
      display: flex;
      flex-direction: column;
  }

  .form-login .input-group ,
  .sign-up-form .input-group {
    margin: 20px 0;
  }

  .input-group input:focus~label, .input-group input:valid~label, .input-group input:focus~.icon, .input-group input:valid~.icon {
      top: -16px;
      color: #009d0d;
  }



  .sign-up-form .accept {
    margin: 10px 0;

  }

  .sign-up-form .accept label {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
  }

  .siginup {
       display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 8px;
  }

  .siginup a {
    display: inline-flex;
    color: #e29520;
  }


  .forms .wrapper {
      margin-top: 150px !important;
  }

  .mission .video {
    height: 100%;
  }



  .nav-login {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .logo-login {
    width: 200px;
  }

  @media (max-width:991px) {

  .nav-login .logo-login {
    width: 200px;
    height: auto;
  }
  .nav-login .social-nav{
    margin-top: 0;
    height: 100%;
  }

  .nav-login .social-nav .nav {
  flex-wrap: nowrap;
  }
  /*  navbar */

  /* .contact_information {
    display: none !important;

  } */

   .nav-mobile   .logo2 {
          display: none !important;
          width: 70px !important;
          height: 70px !important;
          object-fit: cover;
      }


  .container-fluid.about-overlay ,
  .container-fluid.event-section,
  .container-fluid.causes-overlay ,
  .container-fluid.contacts-overlay,
  .container-fluid.donate-overlay,
  .container-fluid.faq-overlay,
  .container-fluid.volunteerRegester,
  .container-fluid.gallery-overlay,
  .container-fluid.news-overlay,
  .container-fluid.singel_new-overlay,
  .container-fluid.single_event-overlay,
  .container-fluid.volanteer-overlay,
  .container-fluid.single-event,
  .container-fluid.our-team
  {
  padding: 0;
  }

  .navbar-collapse .login_button {
      display:flex;
       flex-direction:column;
       gap:10px;
  }

  .navbar-collapse .login_button a ,
  .navbar-collapse .login_button button ,
  .navbar-collapse  .donates {
    margin:0 !important;
    margin-left:0 !important;
    width:100% !important;

  }

  .navbar-collapse {
      padding: 10px  0;
  }

  .navbar {
    width: 100% !important;
    left: 0;
    right: 0;
  }
  .nav-mobile {
      position: relative;
      overflow: hidden;
  width: 100%;
  max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px;
  }

     .nav-mobile .logo4 {
          display: block !important;
          width: 200px !important;
          height: auto !important;
          object-fit: cover;
      }



    .wrapper {
      width: 100%;
    }
    .title-login::before ,
    .title-login::after{
      width: 100px;
      }

  .social-nav {
    justify-content: center;
  }

  .logo-login {
      height: 68px;
      width: 100%;
  }
  .logo-login .logo4 {
          display: block !important;
          width: 200px !important;
          height: auto !important;
          object-fit: cover;
      }

  .logo-login img {
      max-width: 100%;
      height: inherit;
  }


  .sign-up-form .input-group >div {
     width: 100% ;
  }

     .sign-up-form .input-group #phone {
          width: 100% ;
      }

      .news-section .container-sm-sm,
       .news .discription  {
        padding:0 20px
      }
      .news-section .container-sm-sm .side-par {
         margin:0 !important;
      }



  footer {
      padding-top: 60px;
      padding-bottom: 60px;
      padding-left: 20px;
      padding-right: 20px;
  }

  footer .sub {width:100% !important}

  .up_coming_event .card .nots {
      position: relative;
      right: 0;
      top: 0;
      width: 100%;
      max-width: 100%;
      margin-top: 10px;
      }
  .up_coming_event .card-body {
      display: flex;
      flex-direction: column;
  }
  }


  @media (min-width:767px) and (max-width:991px) {

    .title-login::before ,
    .title-login::after{
      width: 200px;
      }
  }


  /*  rtl style */


  html[dir="rtl"] .float-end {
      float: left !important;
  }

  html[dir="rtl"] .navbar-collapse .donates {
      margin-left: 0;
  }


  html[dir="rtl"] .navbar-dark .navbar-nav .nav-link::before
  {
      right:0;
      left: inherit;
  }


  html[dir="rtl"] .dropdown-menu
  {
      right:0;
      left: inherit;
      text-align:right;
  }

  @media (min-width: 975px) {
      html[dir="rtl"] .dropend:hover>.dropdown-menu {
       left: inherit;
          right: 100%;
          margin-left: 0;
          margin-right: .125rem;
      }
  }


  html[dir="rtl"] .ps-2 {
      padding-right: .5rem !important;
      padding-left: 0 !important;
  }


  html[dir="rtl"] .fa-heart.ms-2 {
      margin-right: .5rem !important;
  }

  html[dir="rtl"] .hero .card .hopes::before {
      right: -30px;
      left: inherit;

  }

  html[dir="rtl"] .hero .card .hopes  .h2::before {
      right: -30px;
      left: inherit;

  }

  html[dir="rtl"] .hero .card .hopes {
      margin-right: 10px;
      padding-right: 40px;
  }


  html[dir="rtl"] .aboutus .aboutus-info .h2::before {
     left: inherit;
      right: 0;
  }

  html[dir="rtl"] .mission .h2::before ,
  html[dir="rtl"] .support-us .h3::before ,
  html[dir="rtl"] .support-us .h1::before,
  html[dir="rtl"] .about-before::before,
  html[dir="rtl"] .causes-before::before,
  html[dir="rtl"] .side-par .h4::before
  {
      left: inherit;
      right: 0px;
  }

  html[dir="rtl"] .what_we_do .h1::before  {
      right:12px;
      left:inherit;
  }

  html[dir="rtl"] .up_coming_event .h1::before  {
      right:10px;
      left:inherit;
  }

  html[dir="rtl"] .up_coming_event .card .nots {
  left:20px;
      right:inherit;
  }


  html[dir="rtl"] .me-4 {
      margin-left: 1.5rem !important;
      margin-right: 0 !important;
  }


  html[dir="rtl"] .nav {
      padding-top: 0px;
      padding-right: 0;
  }

  html[dir="rtl"] footer .nav .nav-item .nav-link .find_us,
  html[dir="rtl"] .nav .nav-item .nav-link .find_us {
  margin-left:10px;
      margin-right: 0;
  }

  html[dir="rtl"] .progress-container .progress-bars span,
  html[dir="rtl"] .faq-overlay .faq-before::before,
  html[dir="rtl"] .contact-before::before,
  html[dir="rtl"] .team-before::before,
  html[dir="rtl"] .about-before::before,
  html[dir="rtl"] .causes-before::before ,
  html[dir="rtl"] .contacts-us .h1::before,
  html[dir="rtl"] .contacts-us .h3::before,
  html[dir="rtl"] .event .card .card-body .card-title::before,
  html[dir="rtl"] .faq-help .faq-support .h3::before,
  html[dir="rtl"] .faq-help .h4::before,
  html[dir="rtl"] .faq-help .h2::before,
  html[dir="rtl"] .profile .h3::before ,
  html[dir="rtl"] .eventDiscription::before
   {
      right:0;
      left:inherit;
  }


  html[dir="rtl"] .navbar-dark  {
  right:0 !important;
      left:inherit;
  }

  html[dir="rtl"] .sidemenu-wrapper.show .sidemenu-content {
    left: 0;
    right: inherit;
  }

  html[dir="rtl"] .navbar-collapse .navbar-nav {
    padding:0;
  }

  html[dir="rtl"] .email-contact {
          text-align: right;
      }


  @media(max-width:991px){
  html[dir="rtl"] .navbar-dark .navbar-nav .nav-link {
  padding-left: 0;
      padding-right: 0;
  }

  html[dir="rtl"] .news-section .col-md-8 ,
  html[dir="rtl"] .single-new .card .card-body,
  html[dir="rtl"] .singleEventInfo ,
  html[dir="rtl"] .TeamProfile
  {
      position: relative;
      overflow: hidden;
  }

  html[dir="rtl"] .singleEvent .singleEventInfo p {
      margin-right: 0;
  }

  }


  @media (max-width: 1299px) {
     html[dir="rtl"]  footer .quick_link {
          margin-right: 0 !important;
        padding-right: 0 !important;

      }
  }

  html[dir="rtl"] .pay .payment {
      margin-left: 0;
      margin-right: inherit;
  }

  /*html[dir='rtl'].stitics , html[dir='rtl'].home_associates_sec {*/
  /*    position: relative;*/
  /*    overflow: hidden;*/
  /*}*/

  @media(max-width:991px){
      html[dir="rtl"]   .stitics ,
      html[dir="rtl"]   .home_associates_sec ,
      html[dir="rtl"]  .aboutus
      {
        position: relative;
        overflow: hidden;
      }
  }
.donate_by a {
    background-color : #e4990f;
    text-align: left;
}
.donate_by a .payment {
   padding-right: 15px;

}
  html[dir="rtl"] .donate_by a {
    text-align: right;
  }
  html[dir="rtl"] .donate_by  a .payment {
    padding-left: 15px;
  }