:root
 {
    --dark-color: #2C3033;
    --red-color: #9C3020 ;
    --gray-color: #F4F5EF;
    --white-color: white;
    --orange-color: #FF4E00;
    --light-gray-color: #D8D9D1;
    --shadow-gray: #00000029;
    --gray2-color: #CCCCCC;
    --green-color: #00AD50;
    --yellow-color:#FFA800;
    --light-blue-color:#007EFF;
    --purple-color:#A800FF;
    --pink-color:#FF00A8;
    --brown-color:#4E1810;
 }
/* @font-face
{
    font-family: "Tajawal-Bold";
    src: url("../../fonts/Tajawal/Tajawal-Bold.ttf");
} */


@font-face
{
    font-family: 'Tajawal-Bold';
    src: url("../../fonts/Tajawal/Tajawal-Bold.ttf");
}
 
@font-face
{
    font-family: 'Tajawal-Medium';
    src: url("../../fonts/Tajawal/Tajawal-Medium.ttf");
}

@font-face
{
    font-family: 'Tajawal-Regular';
    src: url("../../fonts/Tajawal/Tajawal-Regular.ttf");
}

*,:before, ::after  
{
    margin:0;
    padding: 0;
}
.z-index9{z-index: 9;}
html, body
{
   
   width: 100%;  
   background-color: #F4F5EF;
  font-family: 'Tajawal','Tajawal-Medium';
  position: relative;
}
a
{
    text-decoration: unset; color: var(--red-color);
}
 .text-right
 {
    text-align: right!important;
 }
 
.btn-check:focus+.btn, .btn:focus
{
    outline: unset;
    box-shadow: none;
}
.white-space
{
  white-space: nowrap;
}
.news-text
{
   font-size: 18px;
   font-family:  'Tajawal-Bold',sans-serif;
   white-space: nowrap;
  
}
.pading-space
 {
   padding-bottom: 120px;
 }
 .most-read-btn-left
 {
    color: var(--white-color);
 
    border-radius: 25px;
    border: none;
    width: 30px;
    height: 30px;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
}
 
 .most-read-btn-right
 {
    color: var(--white-color);
    
    border-radius: 25px;
    border: none;
    width: 30px;
    height: 30px;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
 }
.carousel-control-next-news
{ 
    z-index: 0; 
    /* bottom: 103%; */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    position: absolute;
    left: 0px;
    border: unset;
    background-color: unset;
    display: flex;
    justify-content: center;
    align-items: center;
  
    
}


.news-btn-left
{
   color: var(--white-color);

   border-radius: 25px;
   border: none;
   width: 36px;
   height: 36px;
   position: relative;
   justify-content: center;
   align-items: center;
   display: flex;
}

.news-btn-right
{
   color: var(--white-color);
   
   border-radius: 25px;
   border: none;
   width: 36px;
   height: 36px;
   position: relative;
   justify-content: center;
   align-items: center;
   display: flex;

}

.carousel-control-prev-news 
{
position: absolute;
z-index: 0; 
/* bottom: 103%; */
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border: unset;
background-color: unset;
left: 40px;
display: flex;
justify-content: center;
align-items: center;
}



.tabs-control-next-news
{ 
    z-index: 0; 
    left: 0px;
    border: unset;
    background-color: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
  
    
}
.tabs-control-prev-news 
{
 
      z-index: 0; 
      border: unset;
      background-color: unset;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 30px;
}
.tabs-btn-left
{
   color: var(--white-color);

   border-radius: 25px;
   border: none;
   width: 30px;
   height: 30px;
   position: relative;
   justify-content: center;
   align-items: center;
   display: flex;
}

.tabs-btn-right
{
   color: var(--white-color);
   
   border-radius: 25px;
   border: none;
   width: 30px;
   height: 30px;
   position: relative;
   justify-content: center;
   align-items: center;
   display: flex;

}

#myTab .nav-link.active, .nav-pills .show>.nav-link, #routes .nav-link.active, .nav-pills .show>.nav-link

{
  background-color: #9C3020!important;
  color: white!important;
  font-size: 15px;
  font-family:  'Tajawal-Bold' ,sans-serif;
  border-radius: 10px;
}

#myTab .nav-link, #routes .nav-link
{
  color: black;
  font-size: 15px;
  font-family:  'Tajawal-Medium' ,sans-serif;
}

#myTab
{
  overflow-x: scroll;
  white-space: nowrap;
  flex-wrap: nowrap;

}
#myTab::-webkit-scrollbar {display:none }
.line-1  
{
  height: 3px;
  width: 43px;
  /* margin-top: 17px; */
}

.dark-orange
{
  background: #FF4E00 0% 0% no-repeat padding-box;
}
.light-blue
{
  background: #00DEFF 0% 0% no-repeat padding-box;
}

 .pink
 {
  background: #FF00A8 0% 0% no-repeat padding-box;
 }
 .light-red
{
    background:#FF0000 0% 0% no-repeat padding-box;
}
.dark-red
{
    background: #9C3020 0% 0% no-repeat padding-box;
}
.purple
{
    background: #A800FF 0% 0% no-repeat padding-box;
}
.orange
{
    background: #FFA800 0% 0% no-repeat padding-box;
}

.green
{
    background: #00D381 0% 0% no-repeat padding-box;
}
.gray
{
   background-color: var(--gray2-color);
}
.gray:hover  
{
  color: white;
  
}
.dark-blue
{
    background: #007EFF 0% 0% no-repeat padding-box;
}
.red
 {
   background-color: var(--red-color);
   color: white;
 }
 .red:hover  
 {
   color: white;
   
 }
 .text-red
 {
  color: var(--red-color);
 }
 .dark-gray
 {
   background-color: #212527; 
 }
 .white
 {
   background-color: white;
   color: black;
 }

 .programs-Green1
 {
    background: #D6DEDE 0% 0% no-repeat padding-box;
 }
 .programs-Green2
 {
    background: #ADBEBC 0% 0% no-repeat padding-box;
 }
 .programs-Green3
 {
    background: #859D9B 0% 0% no-repeat padding-box;
 }
 .programs-Green4
 {
    background: #5C7C7A 0% 0% no-repeat padding-box; 
 }
 .programs-Green5
 {
    background: #566f6e 0% 0% no-repeat padding-box; 
 }

 .blue-hover
  {
    
    background: white;
  }
  .lightBlue-hover
  {
    background: white;
  }
   .red-hover
  {
    background: white;
  }
  .black-dark , .black-dark:hover
  {
    color: #000000;
  }
 .black
  {
    filter: invert(0%) sepia(23%) saturate(21%) hue-rotate(257deg) brightness(96%) contrast(100%);
  }
 .multi-hover
  {
    background: white;
  }

     /*----small img & text---start--*/
  .text-news, .text-news:hover
  {

    display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
    overflow: hidden;
    font-size:14px ;
    font-family:  'Tajawal-Medium' ,sans-serif;
    color: #000000;
     
  }   

  .text-style
  {
     font-size: 10px;
     font-family:  'Tajawal-Medium' ,sans-serif;
     color:#2C3033B3
  }

  .news-btn
    {   font-family:'Tajawal-Medium',sans-serif;
       color: black;
       padding: 0.2rem 0.45rem;
       background-color:var(--light-gray-color);
       border-color:var(--light-gray-color);
       border-radius: 13px;
       font-size: 10px;  
    }
   .char_clamp
   {
    /* width: 48px; */
    white-space: nowrap;
    overflow-x: hidden;
    
   }
   .hide-tags
   {
    height: 26px;
    overflow-y: hidden;
   }
   .line_clamp1
   {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
   }
    .margin-value
    {
      margin-bottom: .86rem;
    }
 
     .text-style-mada
     {
        font-size: 12px;
        font-family:  'Tajawal-Medium' ,sans-serif;
        color:#2C3033B3
     }
   
     
     .small-img-border
     {
         border-radius: 7px;
     }
     
     .line-2 
     {
      height: 3px;
      width: 43px;
      background: #FF4E00 0% 0% no-repeat padding-box;
      margin-top: 16px;
    }
   
      /*----small img & text---end--*/
 
      .line-3 
      {
       height: 5px;
       width: 43px;
       background: white;
       margin-top: 16px;
     }  
     .dote 
     {
      height: 5px;
      width: 5px;
      background: white;
      margin-top: 16px;
    } 
 /*******red and white btn with arrow****start***/
 .read-more-btn  
 {
    
   
   border-radius: 28px;
   font-family: 'Tajawal-Medium',sans-serif;
   font-size: 10px;
   position: relative;
   outline: none;
   overflow: hidden;
   transition: 400ms;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0.3rem 0.75rem;
 }
 .read-more-btn.position
 {
  position: absolute !important;
  bottom: 56%;

 }
 .read-more-btn.position2
 {
  position: absolute !important;
  bottom: 49%;

 }
 .read-more-btn.position3
 {
  position: absolute !important;
  bottom: 74%;

 }
 .read-more-btn.position-red
 {
  bottom: 3%;
  position: absolute;
 }
 .read-more-btn:hover
 {
   padding-left: 19px;
   transition-duration: 0.3s;
 }
 .most-readCardText-first
 {
  font-size: 12px;
  font-family: 'Tajawal-Regular',sans-serif;
  color: #283945;
 }
 .most-readCardText-second
 {
    font-size: 13px;
    font-family: 'Tajawal-Bold',sans-serif;
    margin-bottom: 0.1rem;
    text-decoration: unset;
    color: black;
    display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 .most-readCardText-third
 {
    font-size: 11px;
    font-family: 'Tajawal-Regular',sans-serif;
    text-decoration: unset;
    color: #283945;
    display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
  

 }
 .read-more-btn:active
 {
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 .white:hover  
 {

   color:black;
   
 }

 .read-more-btn #fas
 {
    position: absolute;

    margin-right: 82%;
    transform: translateX(-50%);
    opacity: 0;
    display: flex;
    justify-content: center;
    align-content: center;
 
 }
 .read-more-btn:hover #fas
 {
    opacity: 1;
    transform: rotateX(0);


 }
 .more_style
 {
  position: absolute;
  bottom: 4%;
 }
 .agenda-btn
{
  height: 20px;
}
  /*******red and white btn with arrow****end***/
  
  .card-title 
  {
    margin-bottom: .2rem;
  }
     
  .card-body 
  {
    padding: 0.5rem 0.5rem;
  }
  .card-img-top-border
  {
    border-radius: 12px;
  }
  .card-style-fill
 {
  background: #fff;
  width: 100%;
  height: 100%;
  border: 1px solid #D8D9D1;
  border-radius: 7px;
 
 }
 .card-hight
 {
  min-height: 341px;
  height: 100%;
 }
 .card-hight-video
 {
  min-height: 254px;
 }
 /*****programs divs groupe****start*/
 .border-programs-text-style
{
    font-size: 15px;
    font-family: 'Tajawal-Bold',sans-serif;
    color: var(--red-color);
    position: relative;
    padding: 3px;

}

.border-programs-text-style:before,
.border-programs-text-style:after
 {
height: 12px;
width: 25px;
position: absolute;
content: '';
} 

.border-programs-text-style:before 
{
right: -4px;
top: 0;
border-right: 2px solid #345C59;
border-top: 2px solid #345C59;
}

.border-programs-text-style:after 
{
left: -4px;
bottom: -3px;
border-left: 2px solid #345C59;
border-bottom: 2px solid #345C59;
}

 .programs-groupe
{
    

/* margin-top: .25rem; */
border-radius: 7px;
display: flex;
justify-content: center;
align-items: center;
}
 /*****programs divs groupe****end*/



 .follow-border
 {
 /* margin-top: .25rem; */
 border-radius: 10px;
  
 }
 .follow-social-border
 {
 /* margin-top: .25rem; */
 border-radius: 15px;
 
 border: 1px solid #D8D9D1;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 50px;
 height: 50px ;
  
 }
/* 
 .follow-social-border .hover img:last-child {
    display: none;  
  }
  .follow-social-border .hover:hover img:last-child {
    display: flex;  
  }
  .follow-social-border .hover:hover img:first-child {
    display: none;  
  } */
  .blue-hover:hover .hover ,
  .lightBlue-hover:hover .hover ,
  .red-hover:hover .hover ,
  .multi-hover:hover .hover
  { 
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(123deg) brightness(248%) contrast(214%);
  }

  .blue-hover:hover
  { 
    background: #4267B2 0% 0% no-repeat padding-box;
  }
  
  .lightBlue-hover:hover
  {
    background: #1DA1F2 0% 0% no-repeat padding-box;
  }
  
 .red-hover:hover
  {
    background: #DB4437 0% 0% no-repeat padding-box;
  }
  .multi-hover:hover
  {
    background: transparent linear-gradient(137deg, #405DE6 0%, #833AB4 32%, #E1306C 54%, #FD1D1D 79%, #FCAF45 100%) 0% 0% no-repeat padding-box;
  }
  
  .pages-titles, .pages-titles_style h1, .pages-titles_style h2
  {
    font-size: 18px;
    font-family: 'Tajawal-Medium',sans-serif;
    color: #9C3020;
    border-right: 5px solid #9C3020;
    padding-right: .5rem;
  }
   
  .pages-titles-small
  {
    font-size: 14px;
    font-family: 'Tajawal-Medium',sans-serif;
    color: #2C3033;
 
  }
  .news-description-text p:last-child 
  {
    margin-bottom: 0;
  }
  .news-description-text p, .news-description-text:hover p ,  .news-description-text a
  {
    font-size: 16px;
    color: #283945;
    font-family: 'Tajawal-Regular',sans-serif;
  } 
 .news-description-text a {color: var(--red-color);}
  .news-description-text.margin-p p
  {
    margin-bottom: .5rem!important;
  }
  .news-description-text.color a
  {
    font-size: 16px;
    color: #9C3020;
    font-family: 'Tajawal-Regular',sans-serif;
  } 
  .news-description-text img
  {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    margin-top: 1rem;
    border-radius: 10px;
  }
  .news-description-text td
  {
    padding-left: 3rem;
  }
  .news-description-text tr
  {
    margin-bottom: 3rem;
  }
  .mada-programs-field, .mada-programs-field-text h3
  {
    font-size: 17px;
    color: #9C3020;
    font-family: 'Tajawal-Medium',sans-serif;
  }
/****************mada staff cards************************/
.card-staff
{
    background-color: #F4F5EF;
    border: unset;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Cardbody-width
{
  width: 198px;
  height: 240px;
}
.staff-img-border
{
    width: 65%;
    border-radius: 89px;
    padding: .2rem;
    background: transparent linear-gradient(180deg, #9C3020 0%, #580D02 100%) 0% 0% no-repeat padding-box;
 
}
.staff-img-border-card
{
     
    border-radius: 89px;
    padding: .2rem;
    background: transparent linear-gradient(180deg, #9C3020 0%, #580D02 100%) 0% 0% no-repeat padding-box;
 
}
.staff-img-pading
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5rem;
    margin-bottom: 0;
}
.card-staff .card-body .card-text-name, 
.text-member p
{
    font-size: 16px;
    color: #2C3033;
    font-family: 'Tajawal-Medium',sans-serif;
    margin-bottom: 0;
}
.text-member p
{
    margin-bottom: .5rem;
}
.card-staff .card-body
{
    padding-left: 0;
    padding-right: 0;
}
.card-staff .card-body .card-text-job
{
    font-size: 13px;
    color: #283945;
    font-family: 'Tajawal-Regular',sans-serif;
}
.card-staff:hover .card-body .card-text-name
{
    color: #9C3020;
}
.hover-zoomin-staff , .hover-zoomin-staff:hover
{
    content: '';
    /* position: absolute; */
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    overflow: hidden;
    border-radius: 89px;
}
.hover-zoomin-staff img   
{

height: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
transform: scale(1);  
display: block;
}
.hover-zoomin-staff:hover  img 
{

-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);


}
.staff-member-description, .staff-member-description p
{
    font-size: 16px;
    color: #283945;
    font-family: 'Tajawal-Regular',sans-serif;
}
/****************mada staff cards**************end**********/

.archives-drop
{
    border: 1px solid #D8D9D1;
    border-radius: 10px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    padding: 0.375rem 0.75rem;
 
}

.archives-text
{
    font-size: 16px;
    color: black;
    font-family: 'Tajawal-Medium',sans-serif;
}

.dropdown-menu[data-popper-placement]#menuDate ,
.dropdown-menu[data-popper-placement]#menuCategories
{
     
   padding: 0.5rem 0;
   margin: 0;
   font-size: 13px;
   color: #212529;
   text-align: right;
   background-color: #fff;
   background-clip: padding-box;
   width: 100%;
   border-radius: 0.25rem;
   box-shadow: 0px 8px 20px #00000017;
   max-height: 252px;
   overflow-y: scroll;

}

#menuDate::-webkit-scrollbar ,
#menuCategories::-webkit-scrollbar
{
    width: 7px;
}

#menuDate::-webkit-scrollbar-track ,
#menuCategories::-webkit-scrollbar-track
{
 
border-radius: 10px;
background: white;
}

#menuDate::-webkit-scrollbar-thumb ,
#menuCategories::-webkit-scrollbar-thumb
{
background:#D8D9D1; 
border-radius: 10px;
}

.archives-drop#prog-form
{
    padding: 0rem 0.75rem;
}
/* #menuDate::-webkit-scrollbar-thumb:hover {
background:#D8D9D1; 
}
  */

/*************pagination************************/
.page-link, .page-link:focus, .page-link:hover{
    box-shadow: none;
    font-style: normal;
    font-family:'Tajawal-Regular',sans-serif;
    color: #000000;
    position: relative;
    display: flex;
    margin-left: -1px;
    background-color: rgb(255 255 255);
    border: 1px solid #D8D9D1!important;
    border-radius: 35%!important;
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-right: 10px;
}

.page-item.active .page-link
{
    background: #D8D9D1 0% 0% no-repeat padding-box;
    color: black;
} 

/*************************programs pages forms****************************/
.forms
{
    width: 100%;
    min-height: 476px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #D8D9D1;
    border-radius: 10px;
    position: relative;
}

.smallForm
{
    min-height:285px;
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #D8D9D1;
    border-radius: 10px;
    position: relative;
}
.forms#educate
{
    height:100%;
}

.Prog-forms-text
{
    font-size: 12px;
    color: black;
    font-family: 'Tajawal-Medium',sans-serif;
}

.more-forms
{
    border: 1px solid #D8D9D1;
    border-radius: 10px;
    background: #F4F5EF 0% 0% no-repeat padding-box;
}
.show-more
{
    bottom: 1%;
    position: absolute;
    width: 100%;

}
.sub-tittles
{
  font-size: 12px;
  font-family: 'Tajawal-Medium',sans-serif;
  display: flex;
  align-items: center;
} 

.more-style
{

    color: var(--red-color);
    font-size: 13px;
}

.more-style:hover
{
    color: var(--red-color);
}

/**************aboute & puplications*****************/

.reports-btn, .publications-btn
{
    border-bottom: 1px solid #CED0CC; 
    outline: none;
}
.reports-text p
{
    font-size: 18px;
    font-family:  'Tajawal-Medium',sans-serif;
    color: #2C3033; 
    display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
    text-align: right;
}
.reports-btn:hover .reports-text p, .publications-btn:hover .reports-text p
{
    color: #9C3020;
}
.reports-btn:hover .dark-gray, .publications-btn:hover .dark-gray
{
    background-color: #9C3020;
}
.reports-btn .most-read-btn-right, .publications-btn .most-read-btn-right
{
    width: 27px;;
    height: 27px;
}

/***********collapse **********/

.card-body#collapseBody
{
  background-color: #F4F5EF;
  border: unset;
}


.fa-solid#arrow-rotate{ 
  font-size: 1rem; 
  
  -webkit-transition: 0.6s ease-out;
  -moz-transition:  0.6s ease-out;
  transition:  0.6s ease-out;
}

.publications-btn:hover .fa-solid 

{   color: white;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.publications-btn .btn[aria-expanded="true"] .fa-solid
{
  color: white;
  -webkit-transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}


.search-hide
{
  width: 625px;
  overflow: hidden;
}

/******************* BASIC STYLING **********************/








/***************************media*********************************/
  @media (min-width: 1400px)
  {

    .text-news, .text-news:hover
     {
       font-size: 16px;
     }
     .text-style 
     {
       font-size: 13px;
     }
     .margin-value 
     {
       margin-bottom: 1rem;
     }
 

  }
  @media (max-width: 1199px) and (min-width: 992px) 

   { 
    .text-news, .text-news:hover
    {
       font-size: 12px;
    }
    .news-btn {
        font-size: 8px;
    }
    .text-style {
        font-size: 8px;
    }
    .margin-value
    {
    margin-bottom: .59rem;
    }
    .card-hight
    {
      min-height: 309px;
    }
  }
  @media (max-width: 991px) and (min-width: 768px) 
  {
    .card-hight
    {
      min-height: 328px;

    }
  }
  @media (max-width: 767px)
  { 
    .card-hight
    {
      min-height: auto;

    }
    .read-more-btn.position-red
    {
      position: unset;
    }
  
  }