/* Msamy - 16/3/2022 - Adding Almarai font-face (Bold & regular) */
@font-face {
    font-family: Almarai Bold;
    src: url(/Portals/0/fonts/ar/Almarai-Bold.ttf);
}

@font-face {
    font-family: Almarai;
    src: url(/Portals/0/fonts/ar/Almarai-Regular.ttf);
}

/* Msamy - 16/3/2022 - Adding Inter font-face (Bold & regular) */
@font-face {
    font-family: Inter Bold;
    src: url(/Portals/0/fonts/en/Inter-Bold.ttf);
}

@font-face {
    font-family: Inter;
    src: url(/Portals/0/fonts/en/Inter-Regular.ttf);
}

/* Msamy - 16/3/2022 - Adding Almarai font-family to arabic */
[lang|="ar"] *:not(.fab, .fa, .far, .fas, .dnni) {
    font-family: Almarai !important;
}

/* Msamy - 16/3/2022 - Adding Inter font-family to english */
[lang|="en"] *:not(.fab, .fa, .far, .fas, .dnni) {
    font-family: Inter !important;
}

/* Msamy - 16/3/2022 - Adding direction and text-alignment to arabic body*/
[lang|="ar"] body {
    direction: rtl;
    text-align: justify;
}
.fa{
    font-family: "Font Awesome 5 Free";
}
.table td, .table th{
    border-top: none;
}
.eds_container.container-fluid{
    padding: 0 !important;
}
.eds_containers_Galore.eds_templateGroup_box{
    border-radius: 0;
}
/* Msamy - 16/3/2022 - Adding direction left to navbar list in arabic */
[lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper>ol {
    text-align: left;
}

/* Msamy - 16/3/2022 - increase minimum width enough words in ar-en */
.EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper ol li:hover>div {
    min-width: 250px;
}

/* Msamy - 16/3/2022 - change direction of div list when appear(hover) on (ar)*/
[lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper ol li:hover>div {
    right: -10px;
    text-align: right;
    left: 0;
}

/* Msamy - 16/3/2022 - make a child of div list show far right on (ar)*/
[lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper ol li>div .edsmm_menuListsContainer>ol li.edsmm_hasChild>div {
    right: 100%;
    left: 0;
}

/* Msamy - 16/3/2022 - replace arrow left by right on navbar menu on (ar) */
[lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5 .raMenuWrapper ol li>div .edsmm_menuListsContainer>ol li.edsmm_hasChild>span::after {
    content: "\f104";
    left: 8px;
    right: inherit;
}
/* Msamy - 23/3/2022 - change background nav menu on hover */
.EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5 .raMenuWrapper ol li > div .edsmm_menuListsContainer > ol li.edsmm_active{
   background-color: #0b519f;
}
/* Msamy - 23/3/2022 - change font size menu nav */
.EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper ol li > div .edsmm_menuListsContainer > ol > li > span .edsmm_itemContainer{
   font-size: 17px;
}
/* Msamy - 23/3/2022 - change color on active */
.EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5 .raMenuWrapper ol li > div .edsmm_menuListsContainer > ol li.edsmm_active > span .edsmm_itemContainer,.EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5 .raMenuWrapper ol li>div .edsmm_menuListsContainer>ol li.edsmm_hasChild>span::after{
   color: #fff !important;
}

/* Msamy - 16/3/2022 - change background to default when menu active */
.EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5 .raMenuWrapper>ol>li.edsmm_active {
    background-color: initial;
}

/* Msamy - 16/3/2022 - enhance a margin of login on (ar) */
[lang|="ar"] .EasyDNNSkin_Galore .eds_headerContainer .eds_fixedHeader .eds_headerBackground .eds_header .eds_userLogin .loginGroup {
    margin-right: 26px;
    margin-left: 0px;
}

/* Msamy - 16/3/2022 - enhance a padding of login (icon) on (ar) */
[lang|="ar"] .EasyDNNSkin_Galore .eds_fixedHeader.eds_headerStyle5 .eds_headerBackground .eds_header .eds_userLogin .loginGroup a::before,
.EasyDNNSkin_Galore .eds_fixedHeader.eds_headerStyle5 .eds_headerBackground .eds_header .eds_userLogin .registerGroup>ul li.userDisplayName a::before {
    padding-left: 5px;
    padding-right: 0;
}

/* Msamy - 16/3/2022 - change direction of transition bg animation on (ar) */
[lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5 .raMenuWrapper ol li>div .edsmm_menuListsContainer>ol li::before {
    transition: left 100ms linear;
}

/* Msamy - 16/3/2022 - enhance padding and line height and wrap menu nav text */
.EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper ol li>div .edsmm_menuListsContainer>ol>li>span .edsmm_itemContainer {
    line-height: 25px;
    padding: 10px;
    white-space: initial;
}

/* Msamy - 16/3/2022 - hide search */
.EasyDNNSkin_Galore .eds_fixedHeader.eds_headerStyle5 .eds_headerBackground .eds_header .eds_logoMenuSearchContainer>div.eds_searchButtonContainer {
    display: none;
}

/* Msamy - 16/3/2022 - change alignment right logo on (ar)*/
[lang|="ar"] .EasyDNNSkin_Galore .eds_fixedHeader.eds_headerStyle5 .eds_headerBackground .eds_header .eds_logo {
    text-align: right;
}
[lang|="en"] .first-section .slogan h1{
    line-height: 95px !important;
    font-size: 53px !important;
    text-align: left !important;
}
/* Msamy - 16/3/2022 - Create media query */
@media handheld,
only screen and (max-width: 992px),
only screen and (max-device-width: 992px) {

    /* Msamy - 16/3/2022 - hide 'menu' text by size '0' */
    .EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5 .raMenuTriggerWrapper .raMenuTrigger {
        margin-right: 0;
        font-size: 0;
    }

    /* Msamy - 16/3/2022 - increase a burger icon size */
    .EasyDNNSkin_Galore .responsAbilityMenu .raMenuTriggerWrapper .raMenuTrigger::after {
        font-size: 43px;
    }

    /* Msamy - 16/3/2022 - enhance dir of burger icon on (ar) */
    [lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuTriggerWrapper .raMenuTrigger::after {
        float: left;
        margin-left: 0;
    }

    /* Msamy - 16/3/2022 - enhance navbar on mobile */
    .EasyDNNSkin_Galore .eds_fixedHeader.eds_headerStyle5 .eds_headerBackground .eds_header .eds_logoMenuSearchContainer {
        border-bottom: 1px solid #ddd;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* Msamy - 16/3/2022 - change dir of logo container on (ar) mobile */
    [lang|="ar"] .EasyDNNSkin_Galore .eds_fixedHeader.eds_headerStyle5 .eds_headerBackground .eds_header .eds_logoMenuSearchContainer>div.eds_logoContainer {
        float: right;
    }

    /* Msamy - 16/3/2022 - change alignment of list  on (ar) mobile */
    [lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu.raMenuOpened .raMenuWrapper>ol {
        text-align: right;
    }

    /* Msamy - 16/3/2022 - restore bg color theme default on mobile after i inherit it on web */
    .EasyDNNSkin_Galore .responsAbilityMenu.eds_menuType5.raMenuOpened .raMenuWrapper>ol>li.edsmm_active {
        background-color: #187cc2;
    }

    /* Msamy - 16/3/2022 - change margin dir of list container */
    [lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper>ol>li>span .edsmm_itemContainer {
        margin-right: 0;
        margin-left: 80px;
    }

    /* Msamy - 16/3/2022 - change absolute left  on (ar) */
    [lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu.raMenuOpened .raMenuWrapper ol li.edsmm_hasChild>span>.edsmm_childIndicator {
        left: 5px;
        right: inherit;
    }

    /* Msamy - 16/3/2022 - alignment right of list when open */
    [lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu.raMenuOpened .raMenuWrapper ol li>div .edsmm_menuListsContainer>ol>li {
        text-align: right;
    }
     [lang|="en"] .EasyDNNSkin_Galore .responsAbilityMenu.raMenuOpened .raMenuWrapper ol li>div .edsmm_menuListsContainer>ol>li {
        text-align: left;
    }
    /* Msamy - 20/3/2022 - change order home cover */
    .first-section .slogan{
        order: 2;
        margin-top: 15px !important;;
        text-align: center;
    }
    /* Msamy - 20/3/2022 - enhance header size */
   [lang|="ar"] .first-section .slogan h1{
        line-height: 60px !important;
        font-size: 45px !important;
        text-align: center !important;
        margin: auto;
    }
    /* Msamy - 20/3/2022 - change order home cover */
    .first-section .image-block{
        order: 1;
        padding: 0;
    }
    /* Msamy - 20/3/2022 - enhance img width and hight on cover */
     [lang|="ar"] .first-section .image-block img{
        /*width: 100%;
        height: 100%;*/
        margin-right: 0;
    }
}

/* MAH - 2022-03-17 - Reset Logo width in Mobile view */
@media handheld,
only screen and (max-width: 480px),
only screen and (max-device-width: 480px) {
    .EasyDNNSkin_Galore .eds_fixedHeader.eds_headerStyle5 .eds_headerBackground .eds_header .eds_logo {
        max-width: unset;
    }
}

/* MAH - 2022-03-17 - Increase NavBar Font Size in Arabic Interface Language */
[lang|="ar"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper>ol>li>span .edsmm_itemContainer {
    font-size: 23px;
}
/* Msamy - 20/3/2022 - overlay on images */
#overlay {
    position: absolute;
    width: 100%; 
    height: 100%; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26,51,78,0.5);;
    z-index: 2; 
    cursor: pointer;
}
/* Msamy - 20/3/2022 - Increase paragraph size and line height sectors */
.EasyDNNSkin_Galore .eds_animatedTumbnail.eds_style3:hover .eds_thCaption > .eds_thDescription{
        line-height: 30px;
        font-size: 14px;
}
/* Msamy - 20/3/2022 - Increase bottom description on sectors */
.EasyDNNSkin_Galore .eds_animatedTumbnail.eds_style3 .eds_thCaption > .eds_thDescription{
    bottom: inherit;
    top: 80px;
}

/* MAH - 2022-03-21 - Correct Layout of "Add Module Dialog" in Ar Interface */
.dnnModuleDialog {
	direction: ltr;
	text-align: left;
}

/* MAH - 2022-03-21 - Correct Layout of " Login Dialog" in Ar Interface */
.dnnLogin {
	direction: ltr;
	text-align: left;
}

/* MAH - 2022-03-21 - Correct Layout of " Action Menu" in Ar Interface */
.dnnEditState .actionMenu {
	direction: ltr;
	text-align: initial;
}


/* MAH - 2022-03-21 - Correct Layout of "EasyDNN news Categories Menu" in Ar Interface */
.DnnModule-EasyDNNnewsCategoriesMenu {
	direction: ltr;
	text-align: initial;
}


/*******services************/
[lang|="ar"] .services .head {
      font-size: 25px;
      background-image: url(/Portals/0/Images/arrow.png);
      background-repeat: no-repeat;
      background-position: top right;
      background-size: 40px;
      padding-right: 42px;
 }
  [lang|="ar"] .services .head{
      margin-right: -17px;
  }
  [lang|="en"] .services .head {
      font-size: 25px;
      background-image: url(/Portals/0/Images/arrow-l.png);
      background-repeat: no-repeat;
      background-position: top left;
      background-size: 40px;
      padding-left: 42px;
 }
  [lang|="en"] .services .head{
      margin-left: -17px;
  }
  .services p {
      font-size: 20px;
 }
  .box {
      width: 38%;
      padding-bottom: 10px;
      border-radius: 15px;
      position: relative;
      z-index: 99;
      box-shadow: 0 0px 8px 7px #e5e5e5;
 }
  .box.cent {
      margin: 135px auto -110px;
 }
  .box h3 {
      color: #000;
      background-color: #fff;
      padding: 15px 10px 15px;
      font-size: 20px;
      font-weight: bold;
      border-top-right-radius: 15px;
      border-top-left-radius: 15px;
 }
  .box img {
      padding-top: 12px;
      padding-bottom: 12px;
 }
  .chart-gif{
      display: none 
 }
  .guid {
      margin-top: 50px;
      opacity: 0;
      animation: arr 3s 8s;
      animation-fill-mode: forwards;
 }
  @keyframes arr {
      80% {
          opacity: 0;
     }
      100% {
          opacity: 1;
     }
 }
  .guid .color{
      display: inline-block;
      margin: 15px;
 }
  .guid .color span {
      width: 80px;
      height: 8px;
      background-color: #fff;
      display: inline-block;
 }
  .guid .color .red {
      border: 5px dashed #f00;
 }
  .guid .color .blue {
      border: 5px dashed blue;
 }
  .guid .title {
      font-weight: bold;
      margin-right: 5px;
      display: inline-block;
 }
 [lang|="en"] .guid .title{
    margin-left: 5px;
    margin-right: 0;
 }
  .cent.financ {
      animation: cssAnimation .5s .5s forwards;
      opacity: 0;
      background-image: linear-gradient(45deg, #aab4bd, #2b383f);
      border: 2px solid #707374;
 }
  .cent.distribution {
      animation: cssAnimation .5s 1s forwards;
      opacity: 0;
      background-image: linear-gradient(45deg, #372413, #796b52);
      border: 2px solid #796b52;
 }
  .fst.financ {
      animation: cssAnimation .5s 1.5s forwards;
      opacity: 0;
      background-image: linear-gradient(45deg, #7cadca, #19547c);
      border: 2px solid #396f93;
 }
  .fst.distribution {
      animation: cssAnimation .5s 2s forwards;
      opacity: 0;
      background-image: linear-gradient(45deg, #81d0d0, #225554);
      border: 2px solid #225554;
 }
  .lst.financ {
      animation: cssAnimation .5s 2.5s forwards;
      opacity: 0;
      background-image: linear-gradient(45deg, #bd9e64, #62470c);
      border: 2px solid #ad8224;
 }
  .lst.distribution {
      animation: cssAnimation .5s 3s forwards;
      opacity: 0;
      background-image: linear-gradient(45deg, #b9a2d1, #470890);
      border: 2px solid #470890;
 }
  @keyframes cssAnimation {
      50% {
          opacity: .5;
     }
      100% {
          opacity: 1;
     }
 }
  [lang|="ar"] .line_1 {
      height: 0;
      -webkit-animation: increase 2s 5s;
      -moz-animation: increase 2s 5s;
      -o-animation: increase 2s 5s;
      animation: increase 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      margin-top: -90px;
      border-top: 6px dashed #f00;
      opacity: 0;
      position: absolute;
      margin-right: 142px;
      border-left: 6px dashed #f00;
 }
 [lang|="en"] .line_1 {
      height: 0;
      -webkit-animation: increase 2s 5s;
      -moz-animation: increase 2s 5s;
      -o-animation: increase 2s 5s;
      animation: increase 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      margin-top: -90px;
      border-top: 6px dashed #f00;
      opacity: 0;
      position: absolute;
      margin-left: 142px;
      border-right: 6px dashed #f00;
 }
  [lang|="ar"] .line_1:after {
      content: '\25BC';
      color: red;
      font-size: 40px;
      float: left;
      margin-left: -23px;
      margin-top: 20px;
 }
 [lang|="en"] .line_1:after {
      content: '\25BC';
      color: red;
      font-size: 40px;
      float: right;
      margin-right: -23px;
      margin-top: 20px;
 }
  [lang|="ar"] .line_2 {
      height: 0;
      -webkit-animation: increase 2s 5s;
      -moz-animation: increase 2s 5s;
      -o-animation: increase 2s 5s;
      animation: increase 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      margin-top: -90px;
      border-top: 6px dashed #f00;
      opacity: 0;
      position: absolute;
      margin-left: 142px;
      border-right: 6px dashed #f00;
 }
 [lang|="en"] .line_2 {
      height: 0;
      -webkit-animation: increase 2s 5s;
      -moz-animation: increase 2s 5s;
      -o-animation: increase 2s 5s;
      animation: increase 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      margin-top: -90px;
      border-top: 6px dashed #f00;
      opacity: 0;
      position: absolute;
      margin-right: 142px;
      border-left: 6px dashed #f00;
 }
  [lang|="ar"] .line_2:after {
      content: '\25BC';
      color: red;
      font-size: 40px;
      float: right;
      margin-right: -23px;
      margin-top: 20px;
 }
 [lang|="en"] .line_2:after {
      content: '\25BC';
      color: red;
      font-size: 40px;
      float: left;
      margin-left: -23px;
      margin-top: 20px;
 }
  @keyframes increase {
      5% {
          height: 45px;
          opacity: 1;
          margin-bottom: 70px;
     }
      100% {
          height: 45px;
          width: 380px;
          opacity: 1;
     }
 }
  [lang|="ar"] .line_3 {
      height: 0;
      border-right: 6px dashed #f00;
      -webkit-animation: increase_v 2s 5s;
      -moz-animation: increase_v 2s 5s;
      -o-animation: increase_v 2s 5s;
      animation: increase_v 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      margin-right: 73px;
      width: 0;
      margin-top: 350px;
      border-top: 6px dashed #f00;
      opacity: 0;
 }
 [lang|="en"] .line_3 {
      height: 0;
      border-left: 6px dashed #f00;
      -webkit-animation: increase_v 2s 5s;
      -moz-animation: increase_v 2s 5s;
      -o-animation: increase_v 2s 5s;
      animation: increase_v 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      margin-left: 73px;
      width: 0;
      margin-top: 350px;
      border-top: 6px dashed #f00;
      opacity: 0;
 }
  [lang|="ar"] .line_3:after {
      content: '\25C4';
      color: red;
      font-size: 40px;
      float: left;
      margin-left: -30px;
      margin-top: -30px;
 }
 [lang|="en"] .line_3:after {
      content: '\25BA';
      color: red;
      font-size: 40px;
      float: right;
      margin-right: -30px;
      margin-top: -30px;
 }
  [lang|="ar"] .line_4 {
      height: 0;
      border-left: 6px dashed #f00;
      -webkit-animation: increase_v 2s 5s;
      -moz-animation: increase_v 2s 5s;
      -o-animation: increase_v 2s 5s;
      animation: increase_v 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      margin-left: 73px;
      width: 0;
      margin-top: 350px;
      border-top: 6px dashed #f00;
      opacity: 0;
 }
 [lang|="en"] .line_4 {
      height: 0;
      border-right: 6px dashed #f00;
      -webkit-animation: increase_v 2s 5s;
      -moz-animation: increase_v 2s 5s;
      -o-animation: increase_v 2s 5s;
      animation: increase_v 2s 5s;
      animation-fill-mode: forwards;
      text-align: center;
      margin-right: 73px;
      width: 0;
      margin-top: 350px;
      border-top: 6px dashed #f00;
      opacity: 0;
 }
  [lang|="ar"] .line_4:after {
      content: '\25BA';
      color: red;
      font-size: 40px;
      float: right;
      margin-right: -30px;
      margin-top: -30px;
 }
 [lang|="en"] .line_4:after {
      content: '\25C4';
      color: red;
      font-size: 40px;
      float: left;
      margin-left: -30px;
      margin-top: -30px;
 }
  @keyframes increase_v {
      5% {
          height: 220px;
          opacity: 1;
          margin-top: 65px;
     }
      100% {
          height: 220px;
          width: 380px;
          opacity: 1;
          margin-top: 65px;
     }
 }
  [lang|="ar"] .line_5 {
      height: 0;
      -webkit-animation: increase-vi 2s 7s;
      -moz-animation: increase-vi 2s 7s;
      -o-animation: increase-vi 2s 7s;
      animation: increase-vi 2s 7s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      border-bottom: 6px dashed blue;
      opacity: 0;
      position: absolute;
      margin-left: 156px;
      border-right: 6px dashed blue;
      margin-bottom: -10px;
      margin-top: -90px;
 }
 [lang|="en"] .line_5 {
      height: 0;
      -webkit-animation: increase-vi 2s 7s;
      -moz-animation: increase-vi 2s 7s;
      -o-animation: increase-vi 2s 7s;
      animation: increase-vi 2s 7s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      border-bottom: 6px dashed blue;
      opacity: 0;
      position: absolute;
      margin-right: 156px;
      border-left: 6px dashed blue;
      margin-bottom: -10px;
      margin-top: -90px;
 }
  [lang|="ar"] .line_5:after {
      content: '\25B2';
      color: blue;
      font-size: 40px;
      float: right;
      margin-right: -22px;
      margin-top: -40px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
 [lang|="en"] .line_5:after {
      content: '\25B2';
      color: blue;
      font-size: 40px;
      float: left;
      margin-left: -22px;
      margin-top: -40px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
  [lang|="ar"] .line_5:before {
      content: '\25C4';
      color: blue;
      font-size: 40px;
      float: left;
      margin-top: 21px;
      margin-left: -18px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
 [lang|="en"] .line_5:before {
      content: '\25BA';
      color: blue;
      font-size: 40px;
      float: right;
      margin-top: 21px;
      margin-right: -18px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
  [lang|="ar"] .line_6 {
      height: 0;
      -webkit-animation: increase-vi 2s 7s;
      -moz-animation: increase-vi 2s 7s;
      -o-animation: increase-vi 2s 7s;
      animation: increase-vi 2s 7s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      border-bottom: 6px dashed blue;
      opacity: 0;
      position: absolute;
      margin-right: 156px;
      border-left: 6px dashed blue;
      margin-bottom: -10px;
      margin-top: -90px;
 }
 [lang|="en"] .line_6 {
      height: 0;
      -webkit-animation: increase-vi 2s 7s;
      -moz-animation: increase-vi 2s 7s;
      -o-animation: increase-vi 2s 7s;
      animation: increase-vi 2s 7s;
      animation-fill-mode: forwards;
      text-align: center;
      width: 0;
      border-bottom: 6px dashed blue;
      opacity: 0;
      position: absolute;
      margin-left: 156px;
      border-right: 6px dashed blue;
      margin-bottom: -10px;
      margin-top: -90px;
 }
  [lang|="ar"] .line_6:after {
      content: '\25B2';
      color: blue;
      font-size: 40px;
      float: left;
      margin-left: -22px;
      margin-top: -40px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
 [lang|="en"] .line_6:after {
      content: '\25B2';
      color: blue;
      font-size: 40px;
      float: right;
      margin-right: -22px;
      margin-top: -40px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
  [lang|="ar"] .line_6:before {
      content: '\25BA';
      color: blue;
      font-size: 40px;
      float: right;
      margin-top: 21px;
      margin-right: -18px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
 [lang|="en"] .line_6:before {
      content: '\25C4';
      color: blue;
      font-size: 40px;
      float: left;
      margin-top: 21px;
      margin-left: -18px;
      opacity: 0;
      animation: arr 3s 7s;
      animation-fill-mode: forwards;
 }
  @keyframes arr {
      80%{
          opacity: 0;
     }
      100% {
          opacity: 1;
     }
 }
  @keyframes increase-vi {
      5% {
          height: 50px;
          opacity: 1;
     }
      100% {
          height: 50px;
          width: 370px;
          opacity: 1;
     }
 }
 /*****************/
 h2.eds_bottomBorder {
     padding: 15px 10px !important;
 }
 h2 .eds_containerTitle{
   font-size: 30px !important;  
 }
  .services li a {
      font-size: 32px;
      font-weight: bold;
      color: #fff;
      background-color: #3a9ad9 
 }
  .services li a.active {
      color: #3a9ad9;
 }

  .services a:hover {
      color: #3a9ad9;
      background-color: #fff 
 }
  .tab-content > .active {
      border: 2px solid #3a9ad9;
 }
  .tab-content .head{
      width: 100%;
 }
  .collapsed-tab {
      width: 100%;
      margin-top: 25px;
 }
  .collapsed-tab button {
      background-color: #3a9ad9;
      font-size: 24px;
      border-radius: 0;
      width: 100%;
 }
  [lang|="ar"] .collapsed-tab button{
     text-align: right;
     box-shadow: none;
 }
 [lang|="en"] .collapsed-tab button{
     text-align: left;
     box-shadow: none;
 }
 [lang|="en"] .CatExpander{
    font-weight: bold;
      float: right;
      background-color: #fff;
      color: #3a9ad9;
      height: 40px;
      padding-right: 15px;
      padding-left: 15px;
 }
  [lang|="ar"] .CatExpander {
      font-weight: bold;
      float: left;
      background-color: #fff;
      color: #3a9ad9;
      height: 40px;
      padding-right: 15px;
      padding-left: 15px;
 }
 .services .eds_Tabs .eds_tabsNav > li{
    font-size: 21px;
    padding: 12px 25px;
 }
  .play-icon{
      height: 100px;
      line-height: 111px;
      width: 100px;
      background-color: #fff;
      border-radius: 50%;
      margin: -50px auto;
 }
  .play-btn{
      line-height: 15;
      margin: auto;
      z-index: 500;
 }
  .play-btn {
      position: relative;
      display: inline-block;
      height: 100px;
      width: 100px;
      background-color: #fff;
      border-radius: 50%;
 }
  .btn-circle {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7);
 }
  .play-icon {
      font-size: 22px;
      color: #33acde;
      position: absolute;
      top: 100%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
 }
  @-webkit-keyframes grow {
      from {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 1;
     }
      to {
          -webkit-transform: scale(1.5);
          transform: scale(1.5);
          opacity: 0;
     }
 }
  @keyframes grow {
      from {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 1;
     }
      to {
          -webkit-transform: scale(1.5);
          transform: scale(1.5);
          opacity: 0;
     }
 }
  .play-animation {
      -webkit-animation: grow 3s infinite;
      animation: grow 3s infinite;
 }
  .animation-short {
      -webkit-animation-delay: .5s;
      animation-delay: .5s;
 }
  @keyframes grow {
      from {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 1;
     }
      to {
          -webkit-transform: scale(1.5);
          transform: scale(1.5);
          opacity: 0;
     }
 }
  .play-animation {
      -webkit-animation: grow 3s infinite;
      animation: grow 3s infinite;
 }
  .ic-video{
      margin-top: -15px;
 }
  iframe{
      vertical-align: middle;
 }
  .services .modal-dialog{
      margin-top: 120px;
 }
 /* smart phone and tablets screen */
  @media (max-width: 767px) {
      .chart-code {
          display: none 
     }
      .chart-gif {
          display: block 
     }
      .guid .title {
          font-size: 16px;
     }
      .services p {
          font-size: 16px;
     }
      .tab-content .head {
          font-size: 22px;
     }
      .tab-content > .active{
          margin-top: 45px;
     }
      .CatExpander {
          float: left;
          color: #fff;
          background-color: inherit;
          padding: 0;
          height: auto;
     }
      .collapsed-tab button{
          font-size: 18px;
     }
      .tab-content{
          margin-top: 75px;
     }
     .docs-info .fontIcon:first-child{
        margin-bottom: 30px;
    }
    .services .card {
    padding: 0;
    }
    .services .collapse p{
        font-size: 14px;
        padding-right: 5px;
        padding-left: 5px;
    }
    .edsTabulator_active .container{
        padding-left: 0;
        padding-right: 0;
    }
    [lang|="ar"].services .collapse .head{
        padding-right: 40px;
    }
    [lang|="en"].services .collapse .head{
        padding-left: 40px;
    }
    .eds_Tabs .edsTabulator_tabsWrapper{
        padding: 10px;
    }
    [lang|="ar"] .services .head{
        text-align: right;
    }
    .eds_animatedTumbnail.eds_style3 .eds_thCaption > .eds_thTitle{
        text-align: center;
    }
    .eds_animatedTumbnail.eds_style3 .eds_thCaption > .eds_thDescription{
        display: none;
    }
    [lang|="en"] .first-section .slogan h1{
        line-height: 60px !important;
        font-size: 45px !important;
        text-align: center !important;
        margin: auto;
    }
    [lang|="ar"] .eds_pageDetails.eds_pageDetails1 .eds_pageTitle,
    [lang|="ar"] .eds_pageDetails.eds_pageDetails4 .eds_pageTitle{
      text-align: right;
   }
   [lang|="ar"] .eds_pageDetails.eds_pageDetails1 .eds_pageTitle > span,
    [lang|="ar"] .eds_pageDetails.eds_pageDetails4 .eds_pageTitle > span{
      font-size: 28px;
        line-height: 1.5;
   }
   [lang|="en"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper > ol{
        margin-right: 0 !important;
    }
    .eds_animatedTumbnail{
        width: 100%
    }
 }
 /* small screen */
  @media (min-width: 768px) and (max-width: 991px) {
    [lang|="ar"] .first-section .slogan{
        margin-top: 205px !important;
        order: 1;
    }
    [lang|="en"] .first-section .slogan{
        margin-top: 150px !important;
        order: 1;
    }
    [lang|="en"] .first-section .slogan h1{
        line-height: 50px !important;
        font-size: 34px !important;
    }
    .eds_animatedTumbnail.eds_style3 .eds_thCaption > .eds_thDescription {
        display: none;
    }
      .services p{
          font-size: 16px;
     }
      .services li a{
          font-size: 16px;
     }
      .box{
          width: 50% 
     }
      .box h3 {
          font-size: 18px;
          padding: 7px 10px 14px;
     }
      .box img {
          padding-top: 10px;
          padding-bottom: 10px;
          width: 35px;
     }
      .line_1, .line_2, .line_3, .line_4, .line_5, .line_6 {
          border-width: 3px 
     }
      .line_1 {
          margin-right: 108px;
     }
      .line_2 {
          margin-left: 108px;
     }
      .line_3 {
          margin-right: 50px;
     }
      .line_4 {
          margin-left: 50px;
     }
      .line_5 {
          margin-left: 120px;
     }
      .line_6 {
          margin-right: 120px;
     }
      .line_6:before{
          margin-top: -5px;
          margin-right: -14px;
     }
      .line_5:before{
          margin-top: -5px;
          margin-left: -14px;
     }
      @keyframes increase {
          5% {
              height: 20px;
              opacity: 1;
              margin-bottom: 70px;
         }
          100% {
              height: 20px;
              width: 210px;
              opacity: 1;
         }
     }
      @keyframes increase_v {
          5% {
              height: 180px;
              opacity: 1;
              margin-top: 85px;
         }
          100% {
              height: 180px;
              width: 210px;
              opacity: 1;
              margin-top: 85px;
         }
     }
      @keyframes increase-vi {
          5% {
              height: 30px;
              opacity: 1;
         }
          100% {
              height: 30px;
              width: 200px;
              opacity: 1;
         }
     }
      .guid .title {
          font-size: 22px;
     }
      .services p {
          font-size: 22px;
     }
      .tab-content .head {
          font-size: 32px;
     }
     .eds_Tabs .edsTabulator_tabsWrapper{
        padding: 10px;
    }
 }
 /* Medium screen */
  @media (min-width: 992px) and (max-width: 1199px){
      .services p{
          font-size: 18px;
     }
      .services li a{
          font-size: 18px;
     }
      .box{
          width: 40% 
     }
      .box h3 {
          font-size: 22px;
          padding: 7px 10px 14px;
     }
      .box img {
          padding-top: 10px;
          padding-bottom: 10px;
          width: 40px;
     }
      .line_1, .line_2, .line_3, .line_4, .line_5, .line_6 {
          border-width: 3px 
     }
      .line_1 {
          margin-right: 120px;
     }
      .line_2 {
          margin-left: 120px;
     }
      .line_3 {
          margin-right: 55px;
     }
      .line_4 {
          margin-left: 55px;
     }
      .line_5 {
          margin-left: 130px;
     }
      .line_6 {
          margin-right: 130px;
     }
      .line_6:before{
          margin-top: -5px;
          margin-right: -14px;
     }
      .line_5:before{
          margin-top: -5px;
          margin-left: -14px;
     }
      @keyframes increase {
          5% {
              height: 20px;
              opacity: 1;
              margin-bottom: 70px;
         }
          100% {
              height: 20px;
              width: 310px;
              opacity: 1;
         }
     }
      @keyframes increase_v {
          5% {
              height: 180px;
              opacity: 1;
              margin-top: 85px;
         }
          100% {
              height: 180px;
              width: 310px;
              opacity: 1;
              margin-top: 85px;
         }
     }
      @keyframes increase-vi {
          5% {
              height: 30px;
              opacity: 1;
         }
          100% {
              height: 30px;
              width: 310px;
              opacity: 1;
         }
     }
 }
 .docs-info{
    background-image: url(/Portals/0/Images/default.jpg);
    background-size: cover;
}
.services .docs-info a:hover{
    background-color: inherit
}
.services  .docs-info .fontIcon > span{
    font-size: 42px;
    line-height: 85px;
    padding: 0;
}
.services  .docs-info  .fontIcon > h3{
    color: #fff;
}
.img-style {
    border: 1px solid #187cc2;
    box-shadow: 0px 0px 7px 1px #ddd;
    padding: 4px;
}
[lang|="ar"] .EasyDNNSkin_Galore ul.eds_listChevronCircle > li::before{
    content: "\f137";
    left: inherit;
    right: 0;
}
[lang|="ar"] .EasyDNNSkin_Galore ul.eds_listChevronCircle > li{
    padding: 0 20px 0 0;
}
.eds_containers_Galore.eds_titleSeparator.eds_centerTitle > h2{
    border-bottom: none;
    padding: 50px 0 0;
}
.eds_containers_Galore.eds_titleSeparator.eds_centerTitle > h2 span{
    color: #187cc2;
    padding-bottom: 0;
}
.eds_containers_Galore.eds_titleSeparator.eds_centerTitle > h2 .eds_containerTitle::after{
    display: none;
}
.EasyDNNSkin_Galore .edsFooterBackground.eds_footer2 + .edsCopyrightBg .edsCopyright{
    padding-top: 35px !important;
    padding-bottom: 15px !important;
}
.EasyDNNSkin_Galore .edsCopyrightBg .edsCopyright > div{
    text-align: center;
}
@keyframes MoveUpDown {
  0%, 100% {
    margin-top: 85px;
  }
  50% {
    margin-top: 95px;
  }
}
[lang|="ar"] .first-section img{
    margin-right: 75px;
    margin-top: 95px;
    /*animation: MoveUpDown 1.1s linear infinite;*/
    /*overflow: hidden;*/
   /* position: absolute;*/
    /*left: 50px;*/
}

/*MAH: 2022-04-05 - Remove RTL style from Easy DNN News Admin Panel */
#EDNadmin {
	direction: initial;
	text-align: initial;
}

[lang|="ar"] .eds_news_Nova.eds_subCollection_news .edn_article.edn_classicDetails .edn_articleTitle {
	font-size: 25px;
}
/*MAH: 2022-04-06 - Remove RTL style from Easy DNN News Admin Panel  */
.edNews_adminWrapper.mainContentWrapper,.news .edn_userDashboard,.edn_adminActions{
    direction: ltr;
    text-align: initial !important;
}
/*MAH: 2022-04-06 - Remove RTL style from Easy DNN News Admin Panel  */
.mainContentWrapper .contentSection > .titleWrapper .edNews_adminNavigationMenu{
    float: initial !important;
}
[lang|="ar"] .services ul.disc li:before {
    content: "·";
    color: #187cc2;
    position: absolute;
    font-size: 80px;
    margin-top: -40px;
}
[lang|="en"] .services ul.disc li:before {
    content: "·";
    color: #187cc2;
    position: absolute;
    font-size: 80px;
    margin-top: -47px;
}
[lang|="ar"] .services li p{
    padding-right: 20px;
}
[lang|="en"] .services li p{
    padding-left: 20px;
}

.services ul.disc li{
    margin-bottom: 25px;
}
.eds_currentDate{
    display: none;
}
[lang|="ar"] .eds_breadcrumbSeparator:before{
    content: "\f053" !important;
}
[lang|="en"] .EasyDNNSkin_Galore .responsAbilityMenu .raMenuWrapper > ol{
    margin-right: 110px;
}
[lang|="en"] .eds_backToTop{
    right: auto;
    left: 50px;
}
.eds_pageDetails.eds_pageDetails1 .eds_pageDescription > span{
    line-height: 1.5 !important;
}
[lang|="ar"] .formError{
    left: 0 !important;
}
[lang|="ar"] .formError .formErrorArrow{
    width: 25px !important;
    margin: -4px 0 0 13px !important;
}
[lang|="en"] .formError{
    right: 0 !important;
    left: inherit !important;
}
[lang|="ar"] header .edn_articleTitle {
    padding: 7px 0px 15px 0 !important;
}
.Theme_Group_Default legend{
    float: inherit;
}

.collapse:not(.show){
    display: inherit;
}

/**Articles**/
.edn_article a,
.edn_article p,
.edn_article span {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.edn_article img{
    max-width:100%;
    height:auto !important;
    margin: auto !important;
}
/*.edn_article table{
    display:block;
    width:100%;
    overflow-x:auto;
}*/

.edn_article table{
    display:block;
    max-width:100%;
    overflow-x:auto;
}

.edn_article img{
    max-width:100%;
    height:auto;
}

.edn_article td,
.edn_article th{
    white-space:nowrap;
}