@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almarai&display=swap');
body {
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-family: 'Tajawal',  Geneva, Verdana, sans-serif;
  line-height: 150%;
}

.top-par{background-color: black;}
.top-par a{color: #fff;}
.top-par a:hover{color: rgb(143, 142, 142); text-decoration-style:dotted;}
.line_height {line-height: 150%;}
.index-title {position: relative; overflow: hidden; padding: 30px 0;margin-bottom: 20px; text-align: right;}
.index-en-title {position: relative; overflow: hidden; padding: 30px 0; margin-bottom: 20px; text-align: left;}
.footer{border-top: 1px #D6D6D6 solid; padding: 15px; font-size: larger;}

.hrline{border-bottom: 1px solid #000;padding: 10px}
.title-color{color: green; font-family: 'Almarai'}

/* Animation */
.rtl-move { position: relative; animation: rtl-move 2s normal; }
  @keyframes rtl-move {
    0%   {left:200px; top:0px; opacity: 0;}
    100% {left:0px; top:0px; opacity: 1;}
  }

  .ltr-move { position: relative; animation: ltr-move 2s normal; }
  @keyframes ltr-move {
    0%   {right:200px; top:0px; opacity: 0;}
    100% {right:0px; top:0px; opacity: 1;}
  }

  .move-to-up { position: relative; animation: move-up 2s normal; }
  @keyframes move-up {
    0%   {right:0px; top:100px; opacity: 0;}
    100% {right:0px; top:0; opacity: 1;}
  }

  .move-to-bottom { position: relative; animation: move-bottom 2s normal; }
  @keyframes move-bottom {
    0%   {right:0px; top:-100px; opacity: 0;}
    100% {right:0px; top:0; opacity: 1;}
  }