: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;

        /* calendar var*/
    --calendar-bg-color: #FFFFFF;
    --calendar-font-color: #000000;
    --weekdays-border-bottom-color: #404040;
    --calendar-date-hover-color: #505050;
    --calendar-current-date-color: #CCCCCC;
    --calendar-today-color: #9C3020 /*linear-gradient(to bottom, #03a9f4, #2196f3);*/ ;
    --calendar-today-innerborder-color: transparent;
    --calendar-nextprev-bg-color: transparent;
    --next-prev-arrow-color : #000000;
    --calendar-border-radius: 16px;
    --calendar-prevnext-date-color: #9A9A9A;


}

/*-------------first block-------------------------------start-------------------------------------*/

 /*-------big img---start--*/
 
.gradient-style::after
{
   content: '';
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   /* background-image: linear-gradient(45deg , rgb(195, 0, 255) , red); */
   background-image: linear-gradient(45deg , rgb(0, 0, 0) , black);
   opacity: 0.4;
   border-radius:10px ;
}
.pading-space-rigth 
{
   padding-right: 2rem;
}
.img-border
{
   border-radius: 10px;
}

.card-img-top
{
   border-radius: 7px;
}

.last-news-btn
     {
        color: var(--white-color);
        background-color:var(--green-color);
        border-color:var(--green-color);
        border-radius: 16px;
         font-size: 10px;
         font-family: 'Tajawal-Bold',sans-serif;
     }
     .last-news-btn:hover
     {
      color: white;
     }

     .news-text-style , .news-text-style:hover
     {
        font-size: 24px;
        font-family:'Tajawal-Bold',sans-serif;
        color: var(--white-color);
       
         display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
       overflow: hidden;
     }



     .last-news-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;
    }
     
     .last-news-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;
    
     }
     
     .news-btn-left:hover ,
     .news-btn-right:hover
     {
        color: var(--white-color);
     }
     .last-news-btn-left:hover ,
     .last-news-btn-right:hover
     {
        color: var(--white-color);
     }
     .news-btn-spaces
     {
     
         padding-right: 2.4rem;
      }

       
      .carousel-control-next, .carousel-control-prev 
      {     z-index: 0; 
         top: 50%;
         bottom: 50%;
 
          
      }

      .calendar-btns
      {
         position: absolute;
         left: 4%;
      }
      .carousel-control-next-calendar
      { 
          z-index: 0; 
          /* top: 81%; */
          /* position: absolute; */
          /* left: 12%; */
          border: unset;
          background-color: unset;
        
      }
     
      
     .carousel-control-prev-calendar 
     {
      /* position: absolute; */
      z-index: 0; 
      /* top: 81%; */
      border: unset;
      background-color: unset;
      margin-left: .5rem;
     /* left: 5%; */
     }
     
     /*-------big img---end----------*/



/*-------------first block--------------------------------------end------------------------------*/




/*-------------------------------------------------second block-------------------------------start-----------------------*/

   /* news-text class in first blok (repeating)*/

   
   
  .card-shadow:hover
   {
    box-shadow: 0px 3px 6px #00000029;
      transition: box-shadow .3s;
       
   }
 

.font-style
   {
      font-size: 12px;
      
   }
   .font-style-first
   {
    font-size: 11px;
    font-family: 'Tajawal-Regular',sans-serif;
    color: #283945;
    padding: 2px;
   }
   .font-style-second
   {
      font-size: 14px;
      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;
       height: 35px;
   }
   .font-style-third
   {
      font-size: 12px;
      font-family: 'Tajawal-Regular',sans-serif;
      text-decoration: unset;
      color: #283945;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow-y: hidden;
      height: 34px;

   }

 .first-nav-pills-width
 {
    width: 100%;
    flex-direction: inherit;
 }

/*------------------------------------------------second block-------------------------------end-----------------------*/
.mydate-padbing
{
width: 150px;
height: 16px;
margin-right: 1500px;
padding-bottom: 10px;
}



.line{
  border-left: 1px  var(--orange-color) ;
  display: inline;
}
.more-btn-style
{
   background-color: var(--white-color);
   border-color: #D8D9D1;
   border-width: 1px;
   border-radius: 10px;
   margin-left: 4px;
   height: 38px;
   
   
}
.bosition-value
{
   bottom: 7%;
   right: 2px;
   width: 33%;
}
.pading-left
{
   padding-left: 30px;
}
.more-btn-style:hover
{
    
   border-color:#9C3020;
   border-width: 1px;
   box-shadow: none;
   
   
}
.more-btn-style:hover #more-id
{
   color: #9C3020;
}
.book-bordr
{  margin-top: 1.44rem;
   border-radius: 7px;
   background-color: white; 
   min-height: 90px;
   border: 1px solid #D8D9D1;
}
.tag-book-limit
{
   height: 25px;
   overflow: hidden;
}
.nav-pills .nav-link {
   background: 0 0;
   border: 0;
   border-radius: unset;
}
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link
{
   color: black;
   font-size: 13px;
   font-family: 'Tajawal-Medium',sans-serif;
   border: none;
 
}
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link.active {
   background-color: var(--red-color);
   color: var(--white-color);
   font-size: 13px;
   font-family: 'Tajawal-Bold',sans-serif;
   border-top-right-radius: 10px ;
   border-top-left-radius: 10px ;
   white-space: nowrap;
   padding-right: 2rem!important;
   padding-left: 2rem!important;
}
.nav-pills
{
   
   padding-left: 0;
    margin-left: 10px;
   margin-right: 0;
    padding-right: 0;
    border-bottom: 1px solid rgb(222 226 230);
    
}
.arrow-pading
{
    padding-top: 0.4rem; 
}
.btn-p
{
   margin-bottom: 3px;
   margin-top: 3px;
   padding-top: 0.15rem;
   padding-bottom: 0.25rem;

}
.gradient-style-2::after
{
   content: '';
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   background: transparent linear-gradient(180deg, #00000000 0%, #0000008E 70%, #000000 100%) 0% 0% no-repeat padding-box;
   opacity: 1;
  
   
    
}

.gradient1-border-value::after
{
    border-radius: 5px 0px 0px 5px;
}
.gradient2-border-value::after
{
    border-radius: 0px 0px 5px 0px;
}
.gradient3-border-value::after
{
    border-radius: 0px 5px 0px 0px;
}
 
 
.gradient-style-6::after
{
   content: '';
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   background: transparent linear-gradient(45deg, var(--brown-color)0%, var(--red-color)  100%) 0% 0% no-repeat padding-box;
   opacity: 68%;
   border-radius: 5px 0px 0px 5px;
}

.conference-first-img-border
{
      border-radius: 0px 5px 0px 0px;
}
.conference-second-img-border
{
    border-radius: 0px 0px 5px 0px;
}
.conference-third-img-border
{
    border-radius: 5px 0px 0px 5px;
}
 .hover-zoomin img ,
 .hover-zoomin-calendar img
  {
   width: 100%;
   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;
   
 }
 .hover-zoomin:hover img {
    
    filter: brightness(60%);
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 
   
 }

 .hover-zoomin-calendar:hover img
 {
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
 }
 
 .hover-zoomin:hover .gradient-style-2
 {
   background: transparent linear-gradient(180deg, #00000000 0%, #0000008E 100%, #000000 100%) 0% 0% no-repeat padding-box;
   transition-duration: .5s;
 }
 

  
 .book-style
 {
   font-size: 12px;
   font-family: 'Tajawal-Bold',sans-serif;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
    overflow: hidden;
    color:#000000 ;
 }
 .news-btn-2
 {
   font-size: 9px;
   font-family: 'Tajawal-Medium',sans-serif;
   background-color: #F4F5EF;
    border-radius: 13px;
    padding: 0.2rem 0.45rem
 }
 .pading-style
 {
   padding-right: 96px;
 }
  
 
.pading-value 
{
padding-top: 0.1rem;
  
} 
/* .margin-value
{
margin-bottom: .86rem;
} */

.mada-text-size
{
font-size: 16px;
font-family: 'Tajawal-Medium',sans-serif;
}
.tab-font
{
font-size: 14px;
}
/************************first**************************************/

.example {
position: relative;
padding: 0;
width: 100%;
display: block;
cursor: pointer;
overflow: hidden;
}

.fixd3-text-style
{
    font-size: 12px;
   font-family: 'Tajawal-Medium';
}
.fixd3-text-style.text3
{
   height: 18px;
   overflow-y: hidden;
}
.text-3
{
opacity: 1;
font-size: 13px;
font-family: 'Tajawal-Bold',sans-serif;
color: white;
position: absolute;
top: 80%;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;
}
.text-3 p
{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
 overflow: hidden;
}
.fixd-3 p
{
 display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 overflow: hidden;
}
.fixd-3 ,.fixd-mobile-3
{
opacity: 0;

color: white;
position: absolute;
top: 78px;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;
padding-left: 1.5rem;
font-weight: 100;
}

.example .content:hover .fixd-3 ,
.example .content:hover .fixd-mobile-3 
{
opacity: 1;
} 
.example .content .text-3
{
height: 0;
opacity: 1;
transition-delay: 0s;
transition-duration: 0.4s;
}
.example .content:hover .text-3 {
opacity: 1;
transform: translateY(-75px);

} 

/******************************************************************second***********************************/
.text-2
{
 opacity: 1;
font-size: 12px; 
font-family: 'Tajawal-Bold',sans-serif;
color: white;
position: absolute;
top: 68%;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;

}
.img-btn-text-style.text2
{
   height: 37px;
    overflow: hidden;
}
.img-btn-text-style.text1
{
   height: 58px;
    overflow: hidden;
}
.img-btn-text-style.text3
{
   height: 22px;
    overflow: hidden;
}
.fixd2-text-style
{
    font-size: 12px;
    font-family: 'Tajawal-Medium',sans-serif;
}
.fixd2-text-style.text2
{
   height: 53px;
   overflow: hidden;
}
.fixd-2 , .fixd-mobile-2
{
opacity: 0;
 
color: white;
position: absolute;
top: 44%;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;
padding-left: 0.5rem;
 
}
.example .content:hover .fixd-2 ,
.example .content:hover .fixd-mobile-2 
{
opacity: 1;
} 

.example .content .text-2
{
height: 0;
opacity: 1;
transition-delay: 0s;
transition-duration: 0.4s;
}
.example .content:hover .text-2 {
opacity: 1;
transform: translateY(-85px);
 
} 
/************************third**************************************/


.fixd ,.fixd-mobile
{
opacity: 0;
 
color: white;
position: absolute;
top: 72%;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;
padding-left: 0.5rem;
font-weight: 100;

}
.fixd-text-style
{
    font-size: 12px;
    font-family: 'Tajawal-Medium',sans-serif;
}
.fixd-text-style.text1
{
   height: 53px;
   overflow: hidden;
}
.text  
{
opacity: 1;
font-size: 13px;
font-family: 'Tajawal-Bold',sans-serif;
position: absolute;
top: 78%;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;
 
font-weight: 250;
 color: white;

}


.content {


position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;
}

/* .example:hover #grid-color {
background-image: linear-gradient(45deg , var(--pink-color),var(--light-blue-color));
opacity: 50%;
}*/
.example .content:hover .fixd ,
.example .content:hover .fixd-mobile 
{
opacity: 1;
} 



.example .content .text {
height: 0;
opacity: 1;
transition-delay: 0s;
transition-duration: 0.4s;
}
.example .content:hover .text {
opacity: 1;
transform: translateY(-92px);
 
} 

.second-nav-pills-width
{
width: 100%;
}

.more-firsttap-pading
{
    left: 0;
    bottom: 0;
    color: var(--red-color);
    font-size: 13px;
}
.more-firsttap-pading:hover
{
    color: var(--red-color);
}

/********************************************************fourth block*******************************************************/
 
 
.more-secondtap-pading
{
    padding-right: 5.75rem;
    color: var(--red-color);
    font-size: 13px;
}
.second-more-text-style
{
    margin-bottom: 3px;
    margin-top: 3px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.more-secondtap-pading:hover
{
    color: var(--red-color);
}
.video-BigBtn-style
 {
   color: var(--white-color);
   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #C7A8A1 0% 0% no-repeat padding-box;

   border-radius: 60px;
   
   
   padding: 0rem 0rem;
  
 }


 .video-SmalBtn-style
 {
   color: var(--white-color);
   width: 30px;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #C7A8A1 0% 0% no-repeat padding-box;

   border-radius: 60px;
   
   
   padding: 0rem 0rem;
 }
 .video-pading-pills
 {
   padding-left: 2rem;
   padding-right: 2rem;
 }


 .video-BigBtn-style:hover ,
 .video-SmalBtn-style:hover
 {
   background: #9C3020 0% 0% no-repeat padding-box;
 }
  .big-img-hover-style:hover .video-BigBtn-style
  {
   background: #9C3020 0% 0% no-repeat padding-box;
  }
 .video-player-icon-style
  {
   width: 20px;
   height: 20px;
  }   
  .video-player-Smalicon-style
  {
   width: 10px;
   height: 10px;
  }
  .close-btn-style
  {
    
   width: 30px;
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #2C30331A 0% 0% no-repeat padding-box;
   
   border-radius: 25px;
   
   padding: 0rem 0rem;
  }
  .modal-content 
  
  {
   border-radius: 25px;
  }
  .modal-img-porder
  {
   border-radius: 10px;
  }
.img-posetion-2 
{
top: 43%;
left: 0%;
}
.news-btn-video
{
color: var(--white-color);
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #9C3020 0% 0% no-repeat padding-box;
box-shadow: 0px 8px 20px #00000090;
border-radius: 60px;


padding: 0rem 0rem;

}
.video-firsttext-style
{
font-size: 17px;
color: #2C3033;
font-family: 'Tajawal-Bold',sans-serif;
}
.video-secondtext-style
{
font-size: 14px;
font-family: 'Tajawal-Regular',sans-serif;
color: #2C3033;
 

}
.card-style
{
background-color:var(--gray-color);
border: unset;
}

.card-style:hover .video-SmalBtn-style 

{ 
background: #9C3020 0% 0% no-repeat padding-box;
}
.card-style:hover .my-card-text
{
    color: #9C3020;
}
.my-card-text
{
color: #2C3033;
font-family: 'Tajawal-Medium',sans-serif;
font-size: 11px;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 overflow: hidden;

}
.myBig-card-text
{
color: #2C3033;
font-family: 'Tajawal-Medium',sans-serif;
font-size: 13px;
margin-bottom: 0.25rem;
}

.card-body-pading
{
padding: 5px 5px;
}




 .student-div-style
{   
border-radius: 7px;
background-color: white; 

border: 1px solid #D8D9D1;
}


.student-first-text-style
 {
   font-size: 15px;
   font-family: 'Tajawal-Bold',sans-serif;
 }
 .subject-style
 {
   font-size: 12px;
   font-family: 'Tajawal-Medium',sans-serif;
 }
 .student-margin-value
 {
   margin-bottom: 0.52rem;
   padding-top: 0.25rem;
   padding-bottom: .25rem;
   min-height: 87px;
   align-items: center;
 }
 .student-img-border
 {
   border-radius: 43px;
 }

 .modal-header  
 {
   border-bottom: unset;
 }
 .close-btn-style
 {
   background-color: #2C30331A;
   border-radius: 25px;
   width: 2rem;
   height: 2rem;
 }

 .video-big-img-style
 {
   border-radius: 10px;
 }

 .video-social-icon-style
 {
   width: 15px;
   height: 15px;
 }
 .video-social-icon-style2
 {
   width: 20px;
   height: 20px;
 }
 .third-nav-pills-width
 {
   width:100%;
 }
.border-unset
{
   border: unset;
   background-color: #F4F5EF;
}

.studennt-title-text
{
    display: flex;
    justify-content: center;
    align-items: center;
}


.div-student-style
{
    
    background-color: #9C3020;
    /* margin-top: .25rem; */
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dark-bold
{
   color: white;
   font-size: 25px;
   font-family: 'Tajawal-Bold',sans-serif;
   display: table-caption;
}
.div-center
{
   text-align: -webkit-center;
}
/************************************************************************************************************/
  
 

 .accordion {
   max-width: 990px;
   
   height: 272px;
  
   display: flex;
   
   flex-direction: row;
   cursor: pointer;
   border-radius: 5px 5px 5px 5px;
    
}
.accordion-ex {
position: relative;
padding: 0;
width: 100%;
display: block;
cursor: pointer;
overflow: hidden;
}
.box {
   position: relative;
   height: 100%;
   flex: 1;
   background-position: left;
   background-size: cover;
   transition: .7s;
   width: 100%;
}
/* .box:hover 
  {
   flex: 3;
  } */


.a1 {
   background-color: #EEE7E0;
   /* opacity: 7%; */
   border-radius: 0px 5px 5px 0px;
}
.a2 {
   background-color: #E9DDD6;
   /* opacity: 12%; */
}
/* .a3 {
  background-color: #859D9B;
   color: #fff;
} */
.a4 {
   background-color: #E5D4CC;
   /* opacity: 17%; */
   color: #fff;
   border-radius: 5px 0px 0px 5px;

}
.accordion-text {
opacity: 1;
bottom: 0;
font-size: 11px;
color: white;
position: absolute;
left: 0;
text-align: start;
font-family: 'Tajawal-Medium',sans-serif;
letter-spacing: 0px;
opacity: 1;
width: 100%;
 
 
}

.accordion-content {


position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

text-align: start;
/* padding-right: 1rem; */
transition: .7s;
}

.fixd-accordion-text
{
opacity: 1;


position: absolute;
top: 45%;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
text-align: start;
padding-right: 1rem;
padding-left: 1rem;


}

 
.fixd-accordion-text-style
{
font-size: 13px;
color: white;
font-family: 'Tajawal-Bold',sans-serif;
position: relative;
padding-left: 5px;
padding-right: 5px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

}


.fixd-accordion-text-style:before,
.fixd-accordion-text-style:after {
height: 10px;
width: 20px;
position: absolute;
content: '';
} 

.fixd-accordion-text-style:before {
right: 0;
top: 0;
border-right: 2px solid #9C3020;
border-top: 2px solid #9C3020;
}

.fixd-accordion-text-style:after {
left: 0;
bottom: 0;
border-left: 2px solid #9C3020;
border-bottom: 2px solid #9C3020;
}


.news-btn-blue
{
color: #007EFF;
padding: 0.2rem 0.75rem;
background-color: #DBE9F1  ;
border-color:#DBE9F1 ;
border-radius: 13px;
font-size: 10px;
font-family: 'Tajawal-Medium',sans-serif;


}
.news-btn-blue:hover
{
color: #007EFF;
}

 
/**********************************************************************************************************/
 

.calenar-bg-style
{
background-color: white;
height: 370px;
}

.calendar {

position: relative;
height: 100%;
perspective: 1000;
transition: .9s;
transform-style: preserve-3d;
width: 100%;
box-sizing: border-box;
overflow: hidden;


}

.calendar-container
{
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 600px;
width: 100%;

}

.front
{

position: relative;

background: var(--calendar-bg-color);
color: var(--calendar-font-color);
/* margin: 20px auto;*/
box-sizing: border-box;
overflow: hidden;
font-weight: normal;
border-radius: var(--calendar-border-radius);
transform: rotateY(0deg);

}

.front .calendar-inner {
padding: 10px 10px;
}




.front .calendar-inner .calendar-body {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
direction: ltr;
padding-top: 1.7rem;

}

.front .calendar-inner .calendar-body div {
padding: 4px;
min-height: 30px;
line-height: 30px;
border: 1px solid transparent;
margin: 0px 1rem ;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%!important;
}

/*
.front .calendar-inner .calendar-body div:nth-child(-n+7) {
/* border: 1px solid transparent;
border-bottom: 1px solid var(--weekdays-border-bottom-color);
}

.front .calendar-inner .calendar-body div:nth-child(-n+7):hover {
/* border: 1px solid transparent;
border-bottom: 1px solid var(--weekdays-border-bottom-color);
}
 */

.front .calendar-inner .calendar-body div>a {
color: var(--calendar-font-color);
text-decoration: none;
display: flex;
justify-content: center;
}

.front .calendar-inner .calendar-body div:hover {
border: 1px solid var(--calendar-date-hover-color);
border-radius: 25px;
}

.front .calendar-inner .calendar-body div.empty-dates:hover {
border: 1px solid transparent;
}

.front .calendar-inner .calendar-controls {
display: flex;
justify-content: space-between;

grid-template-columns: repeat(3, 1fr);
}

.front .calendar-inner .calendar-today-date {
display: grid;
text-align: center;
cursor: pointer;
margin: 3px 0px;
background: var(--calendar-current-date-color);
padding: 8px 0px;
border-radius: 10px;
width: 80%;
margin: auto;
}

.front .calendar-inner .calendar-controls .calendar-year-month {
display: flex;
min-width: 100px;
justify-content: space-evenly;
align-items: center;
}
.calendar-year-month
{
margin-left: 9px;
}

.front.calendar-inner .calendar-controls .calendar-next {
text-align: right;

}
.calendar-next
{
position: absolute;

right: 76px;
}
.front .calendar-inner .calendar-controls .calendar-prev {
text-align: center;
padding-right: 1.5rem;

}



.front .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label,
.front .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label {
font-weight: 500;
font-size: 20px;
}

.front .calendar-inner .calendar-body .calendar-today {
background: var(--calendar-today-color);
border-radius: 25px;

}

.front .calendar-inner .calendar-body .calendar-today:hover {
border: 1px solid transparent;
border-radius: 25px;
}

.front .calendar-inner .calendar-body .calendar-today a {
outline: 2px solid var(--calendar-today-innerborder-color);
}

.front .calendar-inner .calendar-controls .calendar-next a ,
.front .calendar-inner .calendar-controls .calendar-prev a {
 
color: white;
background-color: var(--red-color);
border-radius: 25px;
border: none;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;




}

.front .calendar-inner .calendar-controls .calendar-next a svg,
.front .calendar-inner .calendar-controls .calendar-prev a svg {
height: 20px;
width: 20px;
}

.front .calendar-inner .calendar-controls .calendar-next a svg path,
.front .calendar-inner .calendar-controls .calendar-prev a svg path{
fill: var(--next-prev-arrow-color);
}

.front .calendar-inner .calendar-body .prev-dates,
.front .calendar-inner .calendar-body .next-dates {
color: var(--calendar-prevnext-date-color);
}

.front .calendar-inner .calendar-body .prev-dates:hover,
.front .calendar-inner .calendar-body .next-dates:hover {
border: 1px solid transparent;
pointer-events: none;
}

.calendar-img-firsttext p:first-child
{
color: white;
font-size: 16px!important;
font-family: 'Tajawal-Bold',sans-serif!important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.calendar-img-secondtext p:not(:first-child) 
{
color: white;
font-size: 14px;
font-family: 'Tajawal-Medium',sans-serif;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.news-btn-prev
{
color: var(--white-color);
width: 55px;
height: 55px;

justify-content: center;
align-items: center;
background: #9C3020 0% 0% no-repeat padding-box;
box-shadow: 0px 8px 20px #00000090;
border-radius: 60px;
position: fixed;
bottom:40px;
right: 6;
padding: 0rem 0rem;

}


.mydate .mydate-inner .mydate-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.mydate .mydate-inner .mydate-today-date {
display: grid;
text-align: center;
cursor: pointer;
margin: 3px 0px;
background: var(--calendar-current-date-color);
padding: 8px 0px;
border-radius: 10px;
width: 80%;
margin: auto;
}

.mydate .mydate-inner .mydate-controls .mydate-year-month {
display: flex;
min-width: 100px;
justify-content: space-evenly;
align-items: center;
}



.mydate .mydate-inner .mydate-controls .mydate-year-month .mydate-year-label,
.mydate .mydate-inner .mydate-controls .mydate-year-month .mydate-month-label {
font-weight: 500;
font-size: 20px;
}

.mydate .mydate-inner .mydate-body .mydate-today {
background: var(--calendar-today-color);
border-radius: 4px;
}

 
.news-btn-left-calendar
{
color: var(--red-color);
background-color: white;
border-radius: 25px;
border: none;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.news-btn-right-calendar
{
color: var(--red-color);
background-color: white;
border-radius: 25px;
border: none;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.news-btn-left-calendar:hover,
.news-btn-right-calendar:hover
{
color: var(--red-color);
}
   

 

.calendar-date
{
font-size: 15px;
font-family: 'Tajawal-Medium',sans-serif;
color: white;
margin-bottom: 56%;
z-index: 9;
}

.calendar_outer
{
   position: absolute;
   z-index: 9;
   bottom: 7%;
   /* right: 21px; */
   width: 100%;
}

.event {
	position: relative;
}

.event:after {
	content: '•';
	color: #9C3020;
	font-size: 1em;
	position: absolute;
	right: 0px;
	top: 10px;
}


.calendar-pading-space-rigth
{
padding-right: 2rem;
}
.pading-calendar-img
{
padding-left: 0;
padding-right: 0;
}

/**************************************************************************/
 



/*************************************************************************/

 /* *********************************************media**********************************************************************/
 @media (min-width: 1400px)
 {
    
  .book-style
  {
   font-size: 13px;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
  overflow: hidden;
  }
  .book-bordr 
  {
   min-height: 100px;  
  }
 .news-btn-2 
 {
font-size: 12px;
 }
 .pading-value 
 {
   padding-top: 1.5rem;
 }
 /* .news-text 
 {
   font-size: 18px;
 } */
 

 .text   
 {
   font-size: 16px;
   top: 76%;
   padding-right: .5rem;
 }
 .fixd 
 {
 
   
   top: 71%;
   padding-right: .5rem;
 } 
 .fixd-text-style 
 {
    font-size: 13px;
 }
 .example .content:hover .text 
 {
   opacity: 1;
   transform: translateY(-110px);
    
 } 
 .text-2   
 {
   font-size: 15px;
   top: 66%;
   padding-right: .5rem;
 }
 .read-more-btn 
 {
   font-size: 13px;
 }
 .fixd-2 
 {
 
    
   top: 44%;
   padding-right: .5rem;
 } 
 .fixd2-text-style
{
    font-size: 13px;
    
}
 .example .content:hover .text-2 
 {
   opacity: 1;
   transform: translateY(-100px);
    
 } 
 .text-3 
 {
   
   font-size: 16px;
   top: 147px;
 }
 .fixd-3 
 {
   
   
   top: 98px;
 }
 .fixd3-text-style
 {
    font-size: 14px;
 }
 .bg-nav-color
 { 
   
   padding-right: 1rem;

}
.accordion {
    
    height: 317px;
}
/* .carousel-control-next-calendar ,
.carousel-control-prev-calendar 
{
    /* top: 84%; */
} */
.more-secondtap-pading
{
    padding-right: 13rem;
}
 
.fixd-accordion-text-style
{
    font-size: 15px;
}
.accordion-text
{
    font-size: 12px;
}
.accordion-btn-text-style
{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 205px;
}
.fixd-accordion-text-style:after {
    
    border-left: 3px solid #9C3020;
    border-bottom: 3px solid #9C3020;
}
.fixd-accordion-text-style:before {
   
    border-right: 3px solid #9C3020;
    border-top: 3px solid #9C3020;
}
.border-student-text-style:after {
    
    border-left: 3px solid #345C59;
    border-bottom: 3px solid #345C59;
}
.border-student-text-style::before {
    
    border-right: 3px solid #345C59;
    border-top: 3px solid #345C59;
}
 


/************************************************************************************/

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

 { 
  
    .text-style-mada
    {
        font-size: 9px;
    }
   .book-style 
   {
      font-size: 10px;
      white-space: nowrap;
   }
   .news-btn-2
   {
    font-size: 8px;
   }
  .text-style
   {
   font-size: 8px;
   }
   /* .bosition-value 
   {
      bottom: 8px;
      right: -14px;
      width: 110px;
  } */
  .pading-style 
  {
   padding-right: 84px;
   padding-top: 1rem;
   padding-bottom: 1rem;
  }
  
   .tag-book-limit {
      height: 21px;
      overflow: hidden;
  }
  .book-bordr {
 
    min-height: 83px;
    margin-top: .7rem;
      
}
   .pading-value
   {
      padding-top: 0.2rem;
   }
   
   
   /* .news-text 
   {
      font-size: 18px;
   } */
   .text-news 
   {
      font-size: 12px;
   }
   .news-btn 
   {
      font-size: 8px;
   }
   
 
 
    .news-text-style 
      {
      font-size: 18px;
      
      } 
      .read-more-btn
      {
         font-size: 8px;
      }
      .text
      {
        font-size: 12px;
        /* top: 203px; */
        padding-right: .5rem;
      } 
      .fixd {
         
         top: 164px;
         padding-right: .5rem;
         font-size: 10px;
      }

      .text-2
      {
         font-size: 10px;
        
         padding-right: 0.5rem
     
      } 
      .fixd-2
       {
         
         top: 56px;
         padding-right: 0.5rem;
         
      }
      .fixd2-text-style
       {
          font-size: 8px;
     
       }

      .example .content:hover .text-2 {
         opacity: 1;
         transform: translateY(-70px);
          
       } 
       .text-3 
       {
        font-size: 11px;
         padding-right: .5rem;
         
       }

       .fixd-3 
       {
        
         padding-right: .5rem;
         top: 63px;
       }
       .fixd3-text-style
        {
            font-size: 10px;
        }
       .example .content:hover .text-3 {
         opacity: 1;
         transform: translateY(-58px);
          
       } 
       .footer-extra
       {
         bottom: 382px;
       }
       
     
     

     .my-card-text
     {
      font-size: 10px;

     }
     .myBig-card-text
     {
        font-size: 12px;
     }
    
     .accordion
     {
      height: 229px;
     }
   
     .fixd-accordion-text-style
     {
      font-size: 11px;
     }
  
     .more-secondtap-pading
     {
        padding-right: 0rem;
     }
     
     .front .calendar-inner .calendar-body
     {
        padding-top: 0rem;
     }
     .front .calendar-inner .calendar-body div
     {
        margin: -2px 0rem;
     }

}


/************************************************************************************/
@media (max-width: 991px)
{
.accordion-btn-text-style
{
      display:none;
}
.calenar-bg-style
{
   height: auto;
}
   .dropdown-menu 
{
   background-color:  var(--gray-color);
   border: none;
} 
   .pading-style
   {
      padding-right: 138px;
   }
   .dropdown-menu[data-bs-popper] {
      
      margin-top: 0.3rem;
  }
  .pading-space 
  {
   padding-bottom: 40px;
   }
.pading-space-rigth {
padding-right: 0.7rem;
}

.bosition-value {
   bottom: 7%;
   right: 2px;
   width: 22%;
}
.nav-pills .nav-item.show .nav-link, .nav-pills .nav-link
{
   border: 1px solid #D8D9D1;
    border-radius: 10px;
    margin-bottom: 1rem;
    margin-left: 1rem;
}
}



 @media (max-width: 991px) and (min-width: 768px) 
  {
   
   .text {
       
      font-size: 18px;
   
      top: 77%;
   }

   .fixd {
      
      font-size: 14px;
      
      top: 66%;
   }

   .example .content:hover .text {
       
      transform: translateY(-125px);
       
    } 

    .text-2 {
       
      font-size: 16px;
      

    }

    .fixd-2 
    {
       
     
      top: 95px;
   
  }
  .fixd2-text-style
{
    font-size: 14px;
}
.fixd-text-style 
{
    font-size: 15px;
 }
     
  .example .content:hover .text-2 {
   opacity: 1;
   transform: translateY(-95px);
    
 } 

 .text-3 {
   
   font-size: 17px;
   top: 80%;
}
.fixd-3 {
    
    
   top: 116px;
}
.fixd3-text-style
{
    font-size: 14px;
}
.text-news 
{
   font-size: 18px;
}
.news-btn 
{
   font-size: 12px;
}
.text-style 
{
font-size: 14px;
}
.modal-dialog 
{
margin-top: 6.5rem;
}
.my-card-text
{
font-size: 12px;
}
.myBig-card-text
     {
        font-size: 14px;
     }
 
.calendar-pading-space-rigth
{
padding-right: 2.7rem;
}
 
 

  }

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

     
   .nav-pills {
      margin-right: 0px;
      padding-right: 12px;
   }
   .news-text-style 
   {
   font-size: 18px;
    
   } 
   .pading-space-rigth 
   {
      padding-right: 1rem;
  }

  .carousel-control-next, .carousel-control-prev {
  
   top: 117px;
   
    } 
     .news-text-style{
      display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
    overflow: hidden;
   }

   /* .text {
       
      top: 234px;
  } */

  .text-2
   {
    
   top: 90px;
  }
  /* .text-3 {
   
   top: 125px;
}  */
.news-btn-up
 {
width: 45px;
 height: 45px;
 }
 .modal-dialog 
 {
   margin-top: 10.8rem;
}
 
 
 
  
}

@media (max-width: 575px)  
{

/* .first-nav-pills-width
{
   flex-direction: column;
}
.second-nav-pills-width
{
   flex-direction: column;
}
.third-nav-pills-width
{
   flex-direction: column;
} */
.nav-pills 
   {
      margin-right: 0px;
      /* padding-right: 12px; */
   }

   
   .news-text-style
   {
      font-size: 14px;
      display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
       overflow: hidden;
        
   }

   .news-btn-up
   {
      width: 40px;
      height: 40px;
  }
  .modal-dialog 
  {
    margin-top: 10.8rem;
}

.accordion 
{
     
    height: 447px;
    flex-direction: column;
     
}
.fixd-accordion-text
{
   top: 4%;
}
 .box{
   height: 27%;
 }
.a1 {
    
    border-radius: 5px 5px 0px 0px;
 }
 .a4 
 {
    
    border-radius: 0px 0px 5px 5px;
 
 } 
}



  @media (max-width: 575px) and  (min-width: 539px)
  {
   
      
      .pading-style 
      {
         padding-right: 200px;
      }
    
       
       
  .text {
    font-size: 12px;
      top: 81%;
  }

  .text-2
   {
    
   top: 62%;
  }
  .text-3 {
   
   top: 81%;
} 

.fixd-mobile
{
   top: 88%;
}
.fixd-mobile-2
{
  
   top: 74%;
}
.fixd-mobile-3
{
   top: 73%;
}
.example .content:hover .fixd ,
.example .content:hover .fixd-2,
.example .content:hover .fixd-3
{
 opacity: 0;
} 
.example .content:hover .fixd-mobile
{
 display: block;
 opacity: 1;

} 

.example .content:hover .fixd-mobile-2
{
display: block;
opacity: 1;

} 
.example .content:hover .fixd-mobile-3
{
display: block;
opacity: 1;
} 
}
@media (max-width: 538px) and (min-width: 431px)
  {
    

   .mada-text-size
   {
      white-space: nowrap;
   }
   
   .pading-space-rigth {
      padding-right: 0.4rem;
  }

  .img-btn-text-style
{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
   .text 
   {
      top: 80%;
      
      /* white-space: nowrap;
      padding-right: .2rem; */
       
   }
     
  .text-2
   {
    
   top: 62%;
   /* white-space: nowrap;
   padding-right: 0.2rem; */
  }
  .text-3 {
   
   top: 62%;
   /* white-space: nowrap;
   padding-right: 0.2rem; */
} 

.fixd-mobile
{
   top: 88%;
   
}
.fixd-mobile .read-more-btn 
{
   font-size: 8px;
}
.fixd-mobile-2
{
  
   top: 74%;
}
.fixd-mobile-3
{
   top: 73%;
}
.example .content:hover .fixd ,
.example .content:hover .fixd-2,
.example .content:hover .fixd-3
{
 opacity: 0;
 
} 
.example .content:hover .fixd-mobile
{
 display: block;
 opacity: 1;
 padding-right: 0.1rem;
} 

.example .content:hover .fixd-mobile-2
{
display: block;
opacity: 1;
padding-right: 0.1rem;
} 


.example .content:hover .fixd-mobile-3
{
display: block;
opacity: 1;
padding-right: 0.1rem;

} 
 
.example .content:hover .img-btn-text-style
{
    display: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
     overflow: visible;
 
}
.example .content:hover .text 
{
       
transform: translateY(-120px);
 
} 
.example .content:hover .text-2 
{
       
    transform: translateY(-70px);
     
    } 

 .example .content:hover .text-3 
 {
       
   transform: translateY(-60px);
         
  } 
    

 
 
.fixd-accordion-text-style
{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* .accordion-btn-text-style
{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
} */

.front .calendar-inner .calendar-body div 
{
     
    margin: 0px 0rem;
}


  }


  @media (max-width: 430px)
  {
   .mada-text-size
   {
      white-space: nowrap;
   }

   .img-btn-text-style
   {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
   }

   .example .content:hover .img-btn-text-style
   {
       display: unset;
       -webkit-line-clamp: unset;
       -webkit-box-orient: unset;
        overflow: visible;
    
   }
   .example .content:hover .text 
   {
          
   transform: translateY(-120px);
    
   } 
   .example .content:hover .text-2 
   {
          
       transform: translateY(-70px);
        
       } 
   
    .example .content:hover .text-3 
    {
          
      transform: translateY(-60px);
            
     } 
   .text 
   {
      top: 78%;
      /* white-space: nowrap;
      padding-right: .2rem; */
      font-size: 11px;
       
   }
     
  .text-2
   {
    
   top: 56%;
   /* white-space: nowrap;
   padding-right: 0.2rem; */
   font-size: 10px;
  }
  .text-3 {
   
   top: 60%;
   /* white-space: nowrap;
   padding-right: 0.2rem; */
   font-size: 11px;
} 

.fixd-mobile
{
   top: 81%;
   
}
.fixd-mobile .read-more-btn ,
.fixd-mobile-2 .read-more-btn ,
.fixd-mobile-3 .read-more-btn
{
   font-size: 7px;
}
.fixd-mobile-2
{
  
   top: 63%;
}
.fixd-mobile-3
{
   top: 64%;
}
.example .content:hover .fixd ,
.example .content:hover .fixd-2,
.example .content:hover .fixd-3
{
 opacity: 0;


} 

.example .content:hover .fixd-mobile
{
 display: block;
 opacity: 1;
 padding-right: 0.1rem;
} 

.example .content:hover .fixd-mobile-2
{
display: block;
opacity: 1;
padding-right: 0.1rem;
} 


.example .content:hover .fixd-mobile-3
{
display: block;
opacity: 1;
padding-right: 0.1rem;
} 
.example .content:hover .text,
.example .content:hover .text-2, 
.example .content:hover .text-3 
{
 white-space: unset;
 
} 
.example .content:hover .text {
       
transform: translateY(-120px);
 
} 

.example .content:hover .text-2 {
       
transform: translateY(-55px);
 
} 
.example .content:hover .text-3 {
       
transform: translateY(-55px);
 
} 
.subscripe-text
{
font-size: 18px;
}
 
 
.fixd-accordion-text-style
{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* .accordion-btn-text-style
{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
} */
.front .calendar-inner .calendar-body div 
{
     
    margin: 0px 0rem;
}
.front .calendar-inner .calendar-controls .calendar-prev 
{
    
    padding-right: 0.5rem;
}
 
 .calendar-date 
 {
    
    margin-bottom: 52%;
}
  }