/* ARIJ core style sheet version 1.0.0.1    Dec 02 2019  */


/* ==========================================================================
   Fonts and main styles 
   ========================================================================== */
 
   /* Google fonts  */
   /* @import url('https://fonts.googleapis.com/css?family=Tajawal:200,300,400,500,700,900&display=swap&subset=arabic');
   @import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,900&display=swap');
 */
  
   @font-face {
    font-family: Tajawal-Black;
    src: url('../fonts/Tajawal-Black.ttf');
    }
    @font-face {
      font-family: Tajawal;
      src: url('../fonts/Tajawal-Regular.ttf');
      }@font-face {
          font-family: Tajawal-Light;
          src: url('../fonts/Tajawal-Light.ttf');
          }@font-face {
              font-family: SymbioARLTBold;
              src: url('../fonts/SymbioARLTBold.ttf');
              }@font-face {
                  font-family: Tajawal-Bold;
                  src: url('../fonts/Tajawal-Bold.ttf');
                  }
   :root {
       --font-ar: 'Tajawal', sans-serif;
       --font-en: 'Montserrat', sans-serif; 
   }


   .font-ar { font-family: var(--font-ar) !important; }
   .font-en { font-family: var(--font-en) !important; }
   

   /* base for arabic stories  */


   body {
       font-size: 12px; 
       font-family: Tajawal;
       color: var(--grey-dark);}
   

   h1 { font-size: 5.25rem; 
        line-height: 8.5rem;
        font-weight: 200; 
        transition: 0.3s;}
   
   h2 { font-size: 6.66rem; 
        line-height: 10.5rem;
        font-weight: 700;
        text-transform: uppercase;  
        transition: 0.3s;}

    h3 { font-size: 4.15rem; 
         line-height: 6.8rem;
         font-weight: 300;  
         transition: 0.3s;}
       
    h4 { font-size: 2.6rem; 
        line-height: 4rem;
        font-weight: 700; 
        transition: 0.3s;}

    h5 { font-size: 4.15rem; 
        line-height: 6.8rem;
        font-weight: 700;
        text-transform: uppercase; 
       transition: 0.3s;}

    h6 { font-size: 2rem; 
        line-height: 3.25rem;
        font-weight: 900; 
       transition: 0.3s;}
                
    p { font-size: 1.25rem; 
        line-height: 2.16rem;
        font-weight: 300; 
      transition: 0.3s;}

    .body-large { font-size: 2rem;
                  line-height: 3.25rem;
                  font-weight: 300;  }

    .lead { font-size: 2.58rem;
            line-height: 4rem;
            font-weight: 300; }
    

    .caption { font-size: 1.58rem;
               line-height: 2.58rem;
               font-weight: 500;
               text-transform: uppercase; }

    .body-tiny { font-size: 1rem;
                line-height: 1.75rem; 
                font-weight: 300;}


    .numbers-large { font-size: 8.5rem;
                    line-height: 13.25rem;
                    font-weight: 200; }
   
    .numbers-medium { font-size: 5.25rem; 
                      line-height: 8.5rem;
                      font-weight: 200;  }


   /* font sizes helper classes */
  .font-size-1 { font-size: 1.25rem; line-height: 2.15rem; transition: 0.3s; }
  .font-size-2 { font-size: 1.58rem; line-height: 2.6rem; transition: 0.3s; }
  .font-size-3 { font-size: 2rem; line-height: 3.25rem; transition: 0.3s; }
  .font-size-4 { font-size: 2.6rem; line-height: 4rem; transition: 0.3s; }
  .font-size-5 { font-size: 3.25rem; line-height: 5rem; transition: 0.3s; }
  .font-size-6 { font-size: 4.15rem; line-height: 6.8rem; transition: 0.3s; }
  .font-size-7 { font-size: 5.25rem; line-height: 8.5rem; transition: 0.3s; }
  .font-size-8 { font-size: 6.67rem; line-height: 10.5rem; transition: 0.3s; }
  .font-size-9 { font-size: 8.5rem; line-height: 13.25rem; transition: 0.3s; }


  /*font weight*/
  .font-weight-200 {font-weight: 200 !important; }
  .font-weight-300 {font-weight: 300 !important; }
  .font-weight-400 {font-weight: 400 !important; }
  .font-weight-500 {font-weight: 500 !important; }
  .font-weight-600 {font-weight: 600 !important; }
  .font-weight-700 {font-weight: 700 !important; }
  .font-weight-900 {font-weight: 900 !important; }


@media (max-width: 780px) {
    
h1  {font-size: 3.25rem; line-height: 5rem; font-weight: 200;  transition: 0.3s; }
h2 { font-size: 3.25rem; line-height: 5rem; font-weight: 700; text-transform: uppercase; transition: 0.3s;}
h3 { font-size: 2.6rem; line-height: 4rem; font-weight: 300; transition: 0.3s;  }
h4 { font-size: 1.58rem; line-height: 2.6rem; font-weight: 700; transition: 0.3s; }
h5 { font-size: 2.6rem; line-height: 4rem; font-weight: 700; text-transform: uppercase; transition: 0.3s; }
h6 { font-size: 1.58rem; line-height: 2.6rem; font-weight: 900; transition: 0.3s; }          
p { font-size: 1rem; line-height: 1.25rem; font-weight: 300; transition: 0.3s; }

.body-large { font-size: 1.58rem; line-height: 2.6rem; font-weight: 300;  transition: 0.3s; }
.lead { font-size: 2rem; line-height: 3.25rem; font-weight: 300; transition: 0.3s; }
.caption { font-size: 1.25rem; line-height: 2.15rem; font-weight: 500; text-transform: uppercase; transition: 0.3s; }
.body-tiny { font-size: 0.9rem; line-height: 1rem; font-weight: 300;transition: 0.3s; }
.number-large { font-size: 5.25rem; line-height: 8.5rem; font-weight: 200; transition: 0.3s; }
.numbers-medium { font-size: 3.25rem; line-height: 5rem; font-weight: 200;  transition: 0.3s; }


.font-size-1 { font-size: 1rem; line-height: 1.58rem; transition: 0.3s; }
.font-size-2 { font-size: 1.25rem; line-height: 2.15rem; transition: 0.3s; }
.font-size-3 { font-size: 1.58rem; line-height: 2.6rem; transition: 0.3s; }
.font-size-4 { font-size: 2rem; line-height: 3.25rem; transition: 0.3s; }
.font-size-5 { font-size: 2.6rem; line-height: 4rem; transition: 0.3s; }
.font-size-6 { font-size: 3.25rem; line-height: 5rem; transition: 0.3s; }
.font-size-7 { font-size: 4.15rem; line-height: 6.8rem; transition: 0.3s; }
.font-size-8 { font-size: 5.25rem; line-height: 8.5rem; transition: 0.3s; }
.font-size-9 { font-size: 6.67rem; line-height: 10.5rem; transition: 0.3s;  }

  } 


/* ==========================================================================
   Colors Set
   ========================================================================== */
 
   :root {
       --grey-light: #C3C3C3;
       --grey-medium: #06181f;
       --grey1: #564c4c; 
       --grey-dark: #020a0d;
   
       --red-main: #A20014;
       --red-light: #e30521;
   
       --ext-red1: #e71d36; 
       --ext-red2: #fe5f55; 
       --ext-red3: #e38983;
       --ext-red4: #efc7c2; 
   
       --ext-yellow-dark: #dcc48e;
       --ext-yellow-ligh: #ffe1a8; 
       --ext-green-dark: #c9cba3; 
       --ext-green-light: #eff7cf; 
       --ext-blue-dark: #8da7be;
       --ext-blue-light: #cde6f5; 
       --ext-purple-dark: #3d2b3d; 
       --ext-purple-light: #987284; 
   }
   
   
   /* Color Class  */
   
   /* main colors  */
   .color-white {color: #fff !important; }
   .color-grey-light {color: var(--grey-light) !important;}
   .color-grey-medium {color: var(--grey-medium) !important;}
   .color-grey {color: var(--grey1) !important;}
   .color-grey-dark {color: var(--grey-dark) !important;}
   
   .color-red-main {color: var(--red-main) !important;}
   .color-red-light {color: var(--red-light) !important;}
   
   
   /* extended colors  */
   .color-red1 {color: var(--red1) !important;}
   .color-red2 {color: var(--red2) !important;}
   .color-red3 {color: var(--red3) !important;}
   .color-red4 {color: var(--red4) !important;}
   
   .color-yellow-dark {color: var(--yellow-dark) !important;}
   .color-yellow-light {color: var(--yellow-light) !important;}
   .color-green-dark {color: var(--green-dark) !important;}
   .color-green-light {color: var(--green-light) !important;}
   .color-blue-dark {color: var(--blue-dark) !important;}
   .color-blue-light {color: var(--blue-light) !important;}
   .color-purple-dark {color: var(--purple-dark) !important;}
   .color-purple-light {color: var(--purple-light) !important;}
   
   
   
   /* background Class  */
   
   /* main colors  */
   .bg-white {background-color: #fff !important; }
   .bg-light-grey {background-color: var(--light-grey) !important;}dark
   .bg-medium-grey {background-color: var(--medium-grey) !important;}
   .bg-grey {background-color: var(--grey1) !important;}
   .bg-dark-grey {background-color: var(--dark-grey) !important;}
   
   .bg-red-main {background-color: var(--red-main) !important;}
   .bg-red-light {background-color: var(--red-light) !important;}
   
   
   /* extended colors  */
   .bg-red1 {background-color: var(--red1) !important;}
   .bg-red2 {background-color: var(--red2) !important;}
   .bg-red3 {background-color: var(--red3) !important;}
   .bg-red4 {background-color: var(--red4) !important;}
   
   .bg-yellow-dark {background-color: var(--yellow-dark) !important;}
   .bg-yellow-light {background-color: var(--yellow-light) !important;}
   .bg-green-dark {background-color: var(--green-dark) !important;}
   .bg-green-light {background-color: var(--green-light) !important;}
   .bg-blue-dark {background-color: var(--blue-dark) !important;}
   .bg-blue-light {background-color: var(--blue-light) !important;}
   .bg-purple-dark {background-color: var(--purple-dark) !important;}
   .bg-purple-light {background-color: var(--purple-light) !important;}
   
     

/* ==========================================================================
  helper classes 
   ========================================================================== */
  
  .border-box {
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 30px; }
  
  .border-left {
    border-left: 1px solid #eee; }
  
  .border-top {
    border-top: 1px solid #eee; }
  
  .border-right {
    border-width: 0 1px 0 0;
    border-color: #eee;
    border-style: solid; }
  
  .border-bottom {
    border-bottom: 1px solid #eee; }
  
  .border-dotted {
    border-style: dotted; }
  
  .slider-size-half {
    max-height: 560px; }
  
  .no-margin {
    margin: 0px !important; }
  
  .m-b-0 {
    margin-bottom: 0px !important; }
  
  .m-b-5 {
    margin-bottom: 5px !important; }
  
  .m-b-10 {
    margin-bottom: 10px !important; }
  
  .m-b-15 {
    margin-bottom: 15px !important; }
  
  .m-b-20 {
    margin-bottom: 20px !important; }
  
  .m-b-25 {
    margin-bottom: 25px !important; }
  
  .m-b-30 {
    margin-bottom: 30px !important; }
  
  .m-b-35 {
    margin-bottom: 35px !important; }
  
  .m-b-40 {
    margin-bottom: 40px !important; }
  
  .m-b-50 {
    margin-bottom: 50px !important; }
  
  .m-b-60 {
    margin-bottom: 60px !important; }
  
  .m-b-70 {
    margin-bottom: 70px !important; }
  
  .m-b-80 {
    margin-bottom: 80px !important; }
  
  .m-b-90 {
    margin-bottom: 90px !important; }
  
  .m-b-100 {
    margin-bottom: 100px !important; }
  
  .m-b-150 {
    margin-bottom: 150px !important; }
  
  .m-b-200 {
    margin-bottom: 200px !important; }
  
  .m-t-0 {
    margin-top: 0px !important; }
  
  .m-t-5 {
    margin-top: 5px !important; }
  
  .m-t-10 {
    margin-top: 10px !important; }
  
  .m-t-15 {
    margin-top: 15px !important; }
  
  .m-t-20 {
    margin-top: 20px !important; }
  
  .m-t-25 {
    margin-top: 25px !important; }
  
  .m-t-30 {
    margin-top: 30px !important; }
  
  .m-t-35 {
    margin-top: 35px !important; }
  
  .m-t-40 {
    margin-top: 40px !important; }
  
  .m-t-50 {
    margin-top: 50px !important; }
  
  .m-t-60 {
    margin-top: 60px !important; }
  
  .m-t-70 {
    margin-top: 70px !important; }
  
  .m-t-80 {
    margin-top: 80px !important; }
  
  .m-t-90 {
    margin-top: 90px !important; }
  
  .m-t-100 {
    margin-top: 100px !important; }
  
  .m-l-0 {
    margin-left: 0px !important; }
  
  .m-l-5 {
    margin-left: 5px !important; }
  
  .m-l-10 {
    margin-left: 10px !important; }
  
  .m-l-15 {
    margin-left: 15px !important; }
  
  .m-l-20 {
    margin-left: 20px !important; }
  
  .m-l-25 {
    margin-left: 25px !important; }
  
  .m-l-30 {
    margin-left: 30px !important; }
  
  .m-l-35 {
    margin-left: 35px !important; }
  
  .m-l-40 {
    margin-left: 40px !important; }
  
  .m-l-50 {
    margin-left: 50px !important; }
  
  .m-l-60 {
    margin-left: 60px !important; }
  
  .m-l-70 {
    margin-left: 70px !important; }
  
  .m-l-80 {
    margin-left: 80px !important; }
  
  .m-l-90 {
    margin-left: 90px !important; }
  
  .m-l-100 {
    margin-left: 100px !important; }
  
  .m-r-0 {
    margin-right: 0px !important; }
  
  .m-r-5 {
    margin-right: 5px !important; }
  
  .m-r-10 {
    margin-right: 10px !important; }
  
  .m-r-15 {
    margin-right: 15px !important; }
  
  .m-r-20 {
    margin-right: 20px !important; }
  
  .m-r-25 {
    margin-right: 25px !important; }
  
  .m-r-30 {
    margin-right: 30px !important; }
  
  .m-r-35 {
    margin-right: 35px !important; }
  
  .m-r-40 {
    margin-right: 40px !important; }
  
  .m-r-50 {
    margin-right: 50px !important; }
  
  .m-r-60 {
    margin-right: 60px !important; }
  
  .m-r-70 {
    margin-right: 70px !important; }
  
  .m-r-80 {
    margin-right: 80px !important; }
  
  .m-r-90 {
    margin-right: 90px !important; }
  
  .m-r-100 {
    margin-right: 100px !important; }
  
  .m-0 {
    margin: 0px !important; }
  
  .m-5 {
    margin: 5px !important; }
  
  .m-10 {
    margin: 10px !important; }
  
  .m-15 {
    margin: 15px !important; }
  
  .m-20 {
    margin: 20px !important; }
  
  .m-25 {
    margin: 25px !important; }
  
  .m-30 {
    margin: 30px !important; }
  
  .m-35 {
    margin: 35px !important; }
  
  .m-40 {
    margin: 40px !important; }
  
  .m-50 {
    margin: 50px !important; }
  
  .m-60 {
    margin: 60px !important; }
  
  .m-70 {
    margin: 70px !important; }
  
  .m-80 {
    margin: 80px !important; }
  
  .m-90 {
    margin: 90px !important; }
  
  .m-100 {
    margin: 100px !important; }
  
  /*Margins*/
  .col-no-margin {
    padding: 0 !important; }

  .col-no-margin [class^="col-"] {
      margin: 0 !important;
      padding: 0 !important; }
  
  .row.col-no-margin {
    margin: 0 !important;
    padding: 0 !important; }
  
  .no-padding-top {
    padding-top: 0 !important; }
  
  .no-padding-bottom {
    padding-bottom: 0 !important; }
  
  .no-padding {
    padding: 0 !important; }
  
  .p-0 {
    padding: 0px !important; }
  
  .p-5 {
    padding: 5px !important; }
  
  .p-10 {
    padding: 10px !important; }
  
  .p-15 {
    padding: 15px !important; }
  
  .p-20 {
    padding: 20px !important; }
  
  .p-25 {
    padding: 25px !important; }
  
  .p-30 {
    padding: 30px !important; }
  
  .p-35 {
    padding: 35px !important; }
  
  .p-40 {
    padding: 40px !important; }
  
  .p-50 {
    padding: 50px !important; }
  
  .p-60 {
    padding: 60px !important; }
  
  .p-70 {
    padding: 70px !important; }
  
  .p-80 {
    padding: 80px !important; }
  
  .p-90 {
    padding: 90px !important; }
  
  .p-100 {
    padding: 100px !important; }
  
  .p-150 {
    padding: 150px !important; }
  
  .p-200 {
    padding: 200px !important; }
  
  .p-b-0 {
    padding-bottom: 0px !important; }
  
  .p-b-5 {
    padding-bottom: 5px !important; }
  
  .p-b-10 {
    padding-bottom: 10px !important; }
  
  .p-b-15 {
    padding-bottom: 15px !important; }
  
  .p-b-20 {
    padding-bottom: 20px !important; }
  
  .p-b-25 {
    padding-bottom: 25px !important; }
  
  .p-b-30 {
    padding-bottom: 30px !important; }
  
  .p-b-35 {
    padding-bottom: 35px !important; }
  
  .p-b-40 {
    padding-bottom: 40px !important; }
  
  .p-b-50 {
    padding-bottom: 50px !important; }
  
  .p-b-60 {
    padding-bottom: 60px !important; }
  
  .p-b-70 {
    padding-bottom: 70px !important; }
  
  .p-b-80 {
    padding-bottom: 80px !important; }
  
  .p-b-90 {
    padding-bottom: 90px !important; }
  
  .p-b-100 {
    padding-bottom: 100px !important; }
  
  .p-b-110 {
    padding-bottom: 110px !important; }
  
  .p-b-120 {
    padding-bottom: 120px !important; }
  
  .p-b-130 {
    padding-bottom: 130px !important; }
  
  .p-b-140 {
    padding-bottom: 140px !important; }
  
  .p-b-150 {
    padding-bottom: 150px !important; }
  
  .p-b-200 {
    padding-bottom: 200px !important; }
  
  .p-t-0 {
    padding-top: 0px !important; }
  
  .p-t-5 {
    padding-top: 5px !important; }
  
  .p-t-10 {
    padding-top: 10px !important; }
  
  .p-t-15 {
    padding-top: 15px !important; }
  
  .p-t-20 {
    padding-top: 20px !important; }
  
  .p-t-25 {
    padding-top: 25px !important; }
  
  .p-t-30 {
    padding-top: 30px !important; }
  
  .p-t-35 {
    padding-top: 35px !important; }
  
  .p-t-40 {
    padding-top: 40px !important; }
  
  .p-t-50 {
    padding-top: 50px !important; }
  
  .p-t-60 {
    padding-top: 60px !important; }
  
  .p-t-70 {
    padding-top: 70px !important; }
  
  .p-t-80 {
    padding-top: 80px !important; }
  
  .p-t-90 {
    padding-top: 90px !important; }
  
  .p-t-100 {
    padding-top: 100px !important; }
  
  .p-t-110 {
    padding-top: 110px !important; }
  
  .p-t-120 {
    padding-top: 120px !important; }
  
  .p-t-130 {
    padding-top: 130px !important; }
  
  .p-t-140 {
    padding-top: 140px !important; }
  
  .p-t-150 {
    padding-top: 150px !important; }
  
  .p-t-200 {
    padding-top: 200px !important; }
  
  .p-r-0 {
    padding-right: 0px !important; }
  
  .p-r-5 {
    padding-right: 5px !important; }
  
  .p-r-10 {
    padding-right: 10px !important; }
  
  .p-r-15 {
    padding-right: 15px !important; }
  
  .p-r-20 {
    padding-right: 20px !important; }
  
  .p-r-25 {
    padding-right: 25px !important; }
  
  .p-r-30 {
    padding-right: 30px !important; }
  
  .p-r-35 {
    padding-right: 35px !important; }
  
  .p-r-40 {
    padding-right: 40px !important; }
  
  .p-r-50 {
    padding-right: 50px !important; }
  
  .p-r-60 {
    padding-right: 60px !important; }
  
  .p-r-70 {
    padding-right: 70px !important; }
  
  .p-r-80 {
    padding-right: 80px !important; }
  
  .p-r-90 {
    padding-right: 90px !important; }
  
  .p-r-100 {
    padding-right: 100px !important; }
  
  .p-l-0 {
    padding-left: 0px !important; }
  
  .p-l-5 {
    padding-left: 5px !important; }
  
  .p-l-10 {
    padding-left: 10px !important; }
  
  .p-l-15 {
    padding-left: 15px !important; }
  
  .p-l-20 {
    padding-left: 20px !important; }
  
  .p-l-25 {
    padding-left: 25px !important; }
  
  .p-l-30 {
    padding-left: 30px !important; }
  
  .p-l-35 {
    padding-left: 35px !important; }
  
  .p-l-40 {
    padding-left: 40px !important; }
  
  .p-l-50 {
    padding-left: 50px !important; }
  
  .p-l-60 {
    padding-left: 60px !important; }
  
  .p-l-70 {
    padding-left: 70px !important; }
  
  .p-l-80 {
    padding-left: 80px !important; }
  
  .p-l-90 {
    padding-left: 90px !important; }
  
  .p-l-100 {
    padding-left: 100px !important; }
  
  .b-r-2 {
    border-radius: 2px !important; }
  
  .b-r-3 {
    border-radius: 3px !important; }
  
  .b-r-4 {
    border-radius: 4px !important; }
  
  .b-r-5 {
    border-radius: 5px !important; }
  
  .b-r-6 {
    border-radius: 6px !important; }
  
  .b-r-7 {
    border-radius: 7px !important; }
  
  .b-r-8 {
    border-radius: 8px !important; }
  
  .b-r-9 {
    border-radius: 9px !important; }
  
  .b-r-10 {
    border-radius: 10px !important; }
  
  .b-radius {
    border-radius: 50% !important; }
  



    .text-center {
        text-align: center !important; }
      
      .text-left {
        text-align: left !important; }
      
      .text-right {
        text-align: right !important; }
      
      .left {
        float: left !important; }
      
      .right {
        float: right !important; }
      
      .center {
        float: none !important;
        margin: 0 auto; }
         


/*  Block Helpers  */

.hidden {
    display: none; }
  
  .visible {
    opacity: 1; }
  
  .block {
    display: block; }
  
  .align-center {
    display: inline-flex;
    text-align: center; }
  
  .vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none; }
  
  .vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }
  
  .text-middle {
    display: table-cell;
    vertical-align: middle;
    margin: auto;
    position: relative; }
  
  .text-bottom {
    display: table-cell;
    vertical-align: bottom;
    margin: auto;
    position: relative; }