﻿.fly {
  opacity: 0;
  position: relative; }

.land {
  opacity: 0;
  position: relative; }

.fade {
  opacity: 0; }

.to-right {
  right: 0 !important;
  opacity: 1;
  transition: all ease-out 1s; }

.fly-up {
  animation: fadeIn-animate ease-out 0.5s, top-animate ease-out 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  /*will-change: auto;*/ }

.item-desc-fly-up {
  animation: fadeIn-animate ease-out 0.2s, top-animate ease-out 0.2s;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
  will-change: auto; }

.fly-down {
  animation: fadeOut-animate ease-in-out 0.2s, down-animate ease-in-out 0.2s;
  animation-fill-mode: forwards;
  will-change: auto; }

.fadeIn {
  animation: fadeIn-animate forwards ease-out 0.5s;
  animation-fill-mode: forwards; }

.landing {
  animation: landing-animate ease-in-out 0.5s;
  animation-fill-mode: forwards; }

.scaleX-0 {
  transform: scaleX(0); }

.scale-up {
  transition-delay: 3s;
  transform: scale(1) !important; }

.dashoffset-animate {
  animation: dashoffset-animate ease-out forwards; }

.zoomIn-animate {
  animation: animateZoomIn ease-out forwards; }

.height-animate {
  animation: height-animate ease-out forwards; }

.width-animate {
  animation: width-animate ease-out forwards; }

.temp {
  transform: translateX(0) !important; }

@-moz-keyframes height-animate {
  from {
    transform: scaleY(0); }
  to {
    transform: scaleY(1); } }

@-webkit-keyframes height-animate {
  from {
    transform: scaleY(0); }
  to {
    transform: scaleY(1); } }

@keyframes height-animate {
  from {
    transform: scaleY(0); }
  to {
    transform: scaleY(1); } }

@keyframes animateZoomIn {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

@keyframes animateZoomOut {
  from {
    transform: scale(1); }
  to {
    transform: scale(0); } }

@-moz-keyframes dashoffset-animate {
  to {
    stroke-dashoffset: 0; } }

@-webkit-keyframes dashoffset-animate {
  to {
    stroke-dashoffset: 0; } }

@keyframes dashoffset-animate {
  to {
    stroke-dashoffset: 0; } }

@-moz-keyframes landing-animate {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    top: 0; } }

@-webkit-keyframes landing-animate {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    top: 0; } }

@keyframes landing-animate {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    top: 0; } }

@-moz-keyframes width-animate {
  0% {
    transform: scaleX(0); }
  100% {
    transform: scaleX(1) !important; } }

@-webkit-keyframes width-animate {
  0% {
    transform: scaleX(0); }
  100% {
    transform: scaleX(1) !important; } }

@keyframes width-animate {
  0% {
    transform: scaleX(0); }
  100% {
    transform: scaleX(1) !important; } }

@keyframes width-100-animate {
  0% {
    width: 0;
    /*transform: translateX(100%)*/ }
  100% {
    width: 100%;
    /*transform: translateX(100%)*/ } }

@keyframes top-animate {
  100% {
    top: 0; } }

@keyframes fadeIn-animate {
  100% {
    opacity: 1; } }

@keyframes down-animate {
  0% {
    top: 0px; }
  100% {
    top: -20px; } }

@keyframes fadeOut-animate {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes moving {
  0% {
    transform: translate(0, -12%) rotate(0deg); }
  50% {
    transform: translate(0, 12%) rotate(10deg); }
  100% {
    transform: translate(0, -12%) rotate(0deg); } }

@-webkit-keyframes moving {
  0% {
    transform: translate(0, -12%) rotate(0deg); }
  50% {
    transform: translate(0, 12%) rotate(10deg); }
  100% {
    transform: translate(0, -12%) rotate(0deg); } }

@keyframes moving {
  0% {
    transform: translate(0, -12%) rotate(0deg); }
  50% {
    transform: translate(0, 12%) rotate(10deg); }
  100% {
    transform: translate(0, -12%) rotate(0deg); } }

/*@font-face {
    font-family: Kohinoor-Arabic-Semibold;
    src: url('/Assets/Fonts/Kohinoor/Kohinoor-Arabic-Semibold.ttf') format('truetype');
}



@font-face {
    font-family: Kohinoor-Arabic-Medium;
    src: url('/Assets/Fonts/Kohinoor/Kohinoor-Arabic-Medium.ttf') format('truetype');
}

@font-face {
    font-family: Kohinoor-Arabic-Light;
    src: url('/Assets/Fonts/Kohinoor/Kohinoor-Arabic-Light.ttf') format('truetype');
}

*/
/*@font-face {
    font-family: Kohinoor-Arabic-Regular;
    src: url('/Assets/Fonts/IRYekan/Yekan_Regular.ttf') format('truetype');*/
/*font-family: Kohinoor-Arabic-Regular;*/
/*src: url('/Assets/Fonts/Kohinoor/Kohinoor-Arabic-Regular.ttf') format('truetype');
    src: url('/Assets/Fonts/Bahij/Bahij-Palatino-Sans-Arabic-Regular-new.otf') format('opentype');
}
*/
/*@font-face {
    font-family: Kohinoor-Arabic-Bold;
    src: url('/Assets/Fonts/IRYekan/Yekan_Bold.ttf') format('truetype');*/
/*font-family: Kohinoor-Arabic-Bold;*/
/*src: url('/Assets/Fonts/Kohinoor/Kohinoor-Arabic-Bold.ttf') format('truetype');
    src: url('/Assets/Fonts/Bahij/Bahij_Palatino_Sans_Arabic-Bold-new.otf') format('opentype');
}*/
@font-face {
  font-family: Kohinoor-Arabic-Bold;
  src: url("/Assets/Fonts/Kohinoor/Kohinoor-Arabic-Bold.ttf") format("truetype"); }

@font-face {
  font-family: Kohinoor-Arabic-Regular;
  src: url("/Assets/Fonts/Kohinoor/Kohinoor-Arabic-Regular.ttf") format("truetype"); }

@font-face {
  font-family: Helevetica25;
  src: url("/Assets/Fonts/Helevetica/HelveticaNeueLTCom-UltLt_2.ttf") format("truetype"); }

@font-face {
  font-family: HeleveticaRoman;
  src: url("/Assets/Fonts/Helevetica/Helevetica_Roman.ttf") format("truetype"); }

.Kohinoor-Arabic-Bold {
  font-family: Kohinoor-Arabic-Bold;
  /*font-family: Kohinoor-Arabic-Bold;*/ }

.Kohinoor-Arabic-Regular {
  font-family: Kohinoor-Arabic-Regular;
  /*font-family: Kohinoor-Arabic-Regular;*/ }

.Kohinoor-Semibold {
  font-family: Kohinoor-Arabic-Semibold; }

.Kohinoor-Regular {
  font-family: Kohinoor-Arabic-Regular; }

.Kohinoor-Light {
  font-family: Kohinoor-Arabic-Light; }

.Kohinoor-Medium {
  font-family: Kohinoor-Arabic-Medium; }

.Kohinoor-Bold {
  font-family: Kohinoor-Arabic-Bold; }

.Helevetica-25 {
  font-family: Helevetica25; }

.HeleveticaRoman {
  font-family: HeleveticaRoman; }

@media (min-width: 1600px) {
  h1 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 26px !important; }
  h2 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 26px !important; }
  h3 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 22px; }
  h4 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 12px; }
  h5 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 18px;
    text-align: right; }
  .body {
    font-size: 13px;
    font-family: Kohinoor-Arabic-Regular;
    text-align: right;
    line-height: 27px; } }

@media (min-width: 1200px) {
  h1 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 24px !important; }
  h2 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 24px !important; }
  h3 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 22px; }
  h4 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 12px; }
  h5 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 18px;
    text-align: right; }
  .body {
    font-size: 12px;
    font-family: Kohinoor-Arabic-Regular;
    text-align: right;
    line-height: 25px; } }

@media (min-width: 992px) and (max-width: 1199px) {
  h1 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h2 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h3 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 20px; }
  h4 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 10px; }
  h5 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 18px;
    text-align: right; }
  .body {
    font-size: 10px;
    font-family: Kohinoor-Arabic-Regular;
    text-align: right;
    line-height: 21px; } }

@media (min-width: 768px) and (max-width: 991px) {
  h1 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h2 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h3 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 20px; }
  h4 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 12px; }
  h5 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 16px;
    text-align: right; }
  .body {
    font-size: 12px;
    font-family: Kohinoor-Arabic-Regular;
    text-align: right;
    line-height: 25px; } }

@media (min-width: 576px) and (max-width: 991px) {
  h1 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h2 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h3 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 20px; }
  h4 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 12px; }
  h5 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 16px;
    text-align: right; }
  .body {
    font-size: 12px;
    font-family: Kohinoor-Arabic-Regular;
    text-align: right;
    line-height: 30px; } }

@media (max-width: 575px) {
  h1 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h2 {
    font-family: Kohinoor-Arabic-Bold !important;
    font-size: 22px !important; }
  h3 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 20px; }
  h4 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 12px; }
  h5 {
    font-family: Kohinoor-Arabic-Regular !important;
    font-size: 16px;
    text-align: right; }
  .body {
    font-size: 12px;
    font-family: Kohinoor-Arabic-Regular;
    text-align: right;
    line-height: 26px; } }

.Products-Banner {
  position: relative;
  overflow: hidden; }
  .Products-Banner .big-img {
    background-repeat: no-repeat;
    background-size: cover;
    width: 0;
    transition: all ease-out 1.5s;
    animation: width-100-animate ease-out 1.5s forwards; }
  .Products-Banner .text-container {
    background-color: #636466;
    transform-origin: top right;
    width: 100%;
    animation: width-animate ease-out 1.5s; }
  .Products-Banner .Products-Banner-Links {
    opacity: 0;
    width: 170px;
    margin: auto;
    display: table;
    position: relative; }
    .Products-Banner .Products-Banner-Links div {
      position: relative;
      margin-bottom: 10px;
      font-family: Kohinoor-Arabic-Regular;
      font-size: 12px;
      width: 100%;
      text-align: right;
      color: #2A2F35; }
      .Products-Banner .Products-Banner-Links div:hover span:after {
        transition: width ease-out 0.3s;
        width: 15%; }
      .Products-Banner .Products-Banner-Links div a {
        transition: all ease-out 0.3s;
        cursor: pointer;
        color: rgba(252, 252, 252, 0.5); }
        .Products-Banner .Products-Banner-Links div a:hover {
          text-decoration: none;
          color: #fcfcfc; }
        .Products-Banner .Products-Banner-Links div a span {
          width: 100%;
          height: 1px; }
          .Products-Banner .Products-Banner-Links div a span:after {
            border-top: 0.5px solid rgba(255, 255, 255, 0.3);
            display: block;
            height: 1px;
            content: " ";
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transition: width ease-out 1s; }
    .Products-Banner .Products-Banner-Links div.active span:after {
      width: 3%; }

.WorkingScopes {
  position: relative;
  overflow: hidden; }
  .WorkingScopes .big-title-container {
    float: right;
    position: relative; }
    .WorkingScopes .big-title-container .big-title {
      width: 1000px;
      position: relative;
      left: 50%;
      color: #EBEBEB;
      font-family: Helevetica25; }

.Banking {
  overflow: hidden;
  position: relative; }
  .Banking .bg-img {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center; }
  .Banking .big-title {
    color: white;
    font-family: Kohinoor-Arabic-Regular;
    width: 100%;
    text-align: right; }
  .Banking .banking-img {
    display: table;
    margin: auto; }
  .Banking .middle-title {
    color: #2A2F35;
    /*text-align: center;
        font-family: Kohinoor-Arabic-Bold;*/ }
  .Banking .middle-text {
    /*text-align: center;
        font-family: Kohinoor-Arabic-Regular;*/
    color: #2A2F35;
    /*font-size: 14px;
        line-height: 30px;*/ }
  .Banking .middle-menu {
    background-color: #FDB913; }

.SpecialOffer {
  position: relative;
  overflow: hidden; }
  .SpecialOffer .bg-img {
    background-repeat: no-repeat;
    background-size: cover; }
  .SpecialOffer .title {
    font-family: Kohinoor-Arabic-Regular;
    color: white;
    text-align: center;
    width: 100%; }
  .SpecialOffer .white-buy-btn {
    color: #2A2F35;
    background-color: white;
    vertical-align: middle;
    text-align: center;
    font-family: Kohinoor-Arabic-Regular;
    font-size: 38px;
    line-height: 40px;
    float: right;
    border: none;
    outline-width: 0;
    /*width: 16%;*/
    width: 100%;
    cursor: pointer;
    transition: all ease-out 0.5s; }
    .SpecialOffer .white-buy-btn:hover {
      background-color: #ebebeb; }

.Eng-Organ {
  position: relative;
  overflow: hidden; }
  .Eng-Organ .bg-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center; }
  .Eng-Organ .big-title {
    text-align: center;
    color: white;
    font-family: Kohinoor-Arabic-Regular;
    text-align: right;
    width: 100%; }
  .Eng-Organ .eng-img {
    display: table;
    margin: auto; }
  .Eng-Organ .text-container {
    position: relative; }
  .Eng-Organ .row.hidden-xs {
    background-color: #32406D; }
  .Eng-Organ .middle-title, .Eng-Organ .left.title, .Eng-Organ .middle-text {
    color: white; }
  .Eng-Organ .middle-menu {
    background-color: white; }
  .Eng-Organ .title.right {
    color: white; }

.Products-Links {
  width: 90%;
  /*margin: auto;
        display: table;*/
  float: left;
  position: relative; }
  .Products-Links div {
    position: relative;
    margin-bottom: 18px;
    font-family: Kohinoor-Arabic-Regular;
    font-size: 14px;
    width: 100%;
    text-align: right;
    opacity: 0.5; }
    .Products-Links div:hover span:after {
      width: 10%; }
    .Products-Links div a {
      cursor: pointer;
      color: #2A2F35;
      transition: all ease-in-out 0.2s; }
      .Products-Links div a:hover {
        text-decoration: none;
        color: #2A2F35; }
      .Products-Links div a span {
        width: 100%;
        height: 1px; }
        .Products-Links div a span:after {
          opacity: 0.2;
          border-top: 0.5px solid #2A2F35;
          display: block;
          height: 1px;
          content: " ";
          width: 100%;
          position: absolute;
          left: 0;
          top: 50%;
          transition: width ease-in-out 0.2s; }
  .Products-Links div.active span:after {
    width: 3%; }

.product-content {
  position: absolute;
  top: 0; }

.middle-title {
  text-align: center;
  font-family: Kohinoor-Arabic-Bold; }

.middle-text {
  text-align: center;
  font-family: Kohinoor-Arabic-Regular; }

.right.title {
  text-align: right; }

.right.Red-Button {
  float: right; }

.HowToBuy {
  position: relative;
  overflow: hidden; }
  .HowToBuy .blue-buy-btn {
    font-family: Kohinoor-Arabic-Regular;
    background-color: #32406D;
    color: #2A2F35;
    text-align: center;
    font-size: 25px;
    line-height: 28px;
    width: 98.2%;
    float: right;
    outline-width: 0;
    border: none;
    cursor: pointer;
    color: white;
    height: 190px;
    transition: all ease-in-out 0.2s; }
    .HowToBuy .blue-buy-btn:hover {
      background-color: #7C85A2; }
  .HowToBuy .buy-img {
    position: absolute;
    left: 0;
    top: 50px; }

/*@import "Responsive";*/
