@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Light.ttf) format("truetype");
  font-weight: 200; }
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Regular.ttf) format("truetype");
  font-weight: 400; }
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Medium.ttf) format("truetype");
  font-weight: 500; }
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-SemiBold.ttf) format("truetype");
  font-weight: 600; }
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Bold.ttf) format("truetype");
  font-weight: 700; }
@font-face {
  font-family: Montserrat;
  src: url(../fonts/Montserrat-Black.ttf) format("truetype");
  font-weight: 900; }
@font-face {
  font-family: Almarai;
  src: url(../fonts/Almarai-Light.ttf) format("truetype");
  font-weight: 200; }
@font-face {
  font-family: Almarai;
  src: url(../fonts/Almarai-Regular.ttf) format("truetype");
  font-weight: 400; }
@font-face {
  font-family: Almarai;
  src: url(../fonts/Almarai-Bold.ttf) format("truetype");
  font-weight: 600; }
@font-face {
  font-family: Almarai;
  src: url(../fonts/Almarai-ExtraBold.ttf) format("truetype");
  font-weight: 700; }
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-warning:before {
  content: "\e90a";
  color: #f7706d; }

.icon-lock:before {
  content: "\e90b";
  color: #fff; }

.icon-lock-open:before {
  content: "\e90c";
  color: #fff; }

.icon-direction:before {
  content: "\e90d";
  color: #fff; }

.icon-check:before {
  content: "\e90e";
  color: #fff; }

.icon-arrow-down:before {
  content: "\e90f";
  color: #fff; }

.icon-down:before {
  content: "\e900";
  color: #5a5a5e; }

.icon-close:before {
  content: "\e901";
  color: #5a5a5e; }

.icon-back:before {
  content: "\e902";
  color: #5a5a5e; }

.icon-delete:before {
  content: "\e903";
  color: #5a5a5e; }

.icon-credit-card:before {
  content: "\e904";
  color: #5a5a5e; }

.icon-edit:before {
  content: "\e905";
  color: #5a5a5e; }

.icon-projects:before {
  content: "\e906";
  color: #5a5a5e; }

.icon-notifications:before {
  content: "\e907";
  color: #5a5a5e; }

.icon-settings:before {
  content: "\e908";
  color: #5a5a5e; }

.icon-users:before {
  content: "\e909";
  color: #5a5a5e; }

body {
  font-family: Montserrat;
  background: #f3f9fd;
  background: linear-gradient(180deg, #f3f9fd 0%, white 100%);
  height: 100vh;
  overflow: hidden; }
  body.lang-ar {
    text-align: right;
    direction: rtl;
    font-family: Almarai; }
    body.lang-ar header .lang a {
      font-size: 18px;
      font-family: Montserrat; }
      body.lang-ar header .lang a span {
        margin-right: 0px;
        margin-left: 8px; }
    body.lang-ar .wrapper {
      direction: ltr; }
      body.lang-ar .wrapper .companies-info .company-con .company-card:first-child {
        left: auto;
        right: 0; }
      body.lang-ar .wrapper .companies-info .company-con .company-card:last-child {
        left: 0;
        right: auto; }
      body.lang-ar .wrapper .companies-info .company-con .company-card .arrow {
        transform: rotate(180deg);
        line-height: 36px; }
      body.lang-ar .wrapper .companies-info .company-con .company-card.active {
        direction: rtl;
        text-align: right; }
        body.lang-ar .wrapper .companies-info .company-con .company-card.active .company-desc p {
          line-height: 28px; }
        body.lang-ar .wrapper .companies-info .company-con .company-card.active .company-desc a img {
          transform: rotate(180deg); }
        body.lang-ar .wrapper .companies-info .company-con .company-card.active .arrow {
          left: auto;
          right: 20px;
          transform: rotate(0deg);
          line-height: 40px; }
        body.lang-ar .wrapper .companies-info .company-con .company-card.active:last-child {
          left: 0;
          right: auto; }
        body.lang-ar .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p {
          padding-left: 0;
          padding-right: 40px; }
          body.lang-ar .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p img {
            left: auto;
            right: 0; }
          body.lang-ar .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p:nth-child(2) img {
            right: 4px; }
          body.lang-ar .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p:last-child img {
            right: 3px; }

header {
  padding-top: 24px;
  padding-bottom: 24px; }
  header .logo a:hover {
    text-decoration: none; }
  header .logo a img {
    max-width: 180px; }
  header .lang a {
    font-size: 20px;
    color: #414042; }
    header .lang a span {
      display: inline-block;
      margin-right: 8px; }

.wrapper {
  position: relative; }
  .wrapper .section-bg {
    height: 240px;
    width: 100%;
    background-color: #1481FF;
    border-radius: 40px;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: rgba(20, 129, 255, 0.3) 0px 25px 25px; }
    .wrapper .section-bg::after {
      content: "";
      width: 100%;
      height: 240px;
      background-image: url(../images/circle-bg.svg);
      background-repeat: no-repeat;
      background-position: 50% 130%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .6; }
  .wrapper .companies-info {
    margin-top: 42px;
    position: relative; }
    .wrapper .companies-info .company-con .company-card {
      background-color: #fff;
      width: 242px;
      height: 242px;
      border-radius: 40px;
      overflow: hidden;
      text-align: center;
      line-height: 242px;
      box-shadow: rgba(85, 116, 129, 0.13) 0px 8px 20px;
      margin-bottom: 32px;
      position: absolute;
      transition: all .6s ease-in-out; }
      .wrapper .companies-info .company-con .company-card:first-child {
        left: 0; }
      .wrapper .companies-info .company-con .company-card:nth-child(2) {
        left: calc(50% - 121px); }
      .wrapper .companies-info .company-con .company-card:last-child {
        right: 0; }
      .wrapper .companies-info .company-con .company-card .company-desc {
        display: none; }
      .wrapper .companies-info .company-con .company-card .arrow {
        position: absolute;
        background-color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        bottom: -40px;
        left: 102px;
        line-height: 40px;
        transition: all .6s ease-in-out;
        cursor: pointer; }
      .wrapper .companies-info .company-con .company-card .img-container img {
        max-width: 100%; }
      .wrapper .companies-info .company-con .company-card.contact {
        background-color: #1481FF;
        line-height: 66px; }
        .wrapper .companies-info .company-con .company-card.contact .img-container {
          margin-top: 72px;
          margin-bottom: 8px;
          transition: all .4s ease-in-out; }
        .wrapper .companies-info .company-con .company-card.contact h3 {
          font-size: 22px;
          font-weight: 600;
          color: #fff;
          line-height: 27px; }
        .wrapper .companies-info .company-con .company-card.contact .contact-info {
          display: none; }
      .wrapper .companies-info .company-con .company-card:hover {
        line-height: 200px; }
        .wrapper .companies-info .company-con .company-card:hover .arrow {
          bottom: 40px;
          background-color: #1481FF;
          box-shadow: rgba(20, 129, 255, 0.3) 0px 4px 25px; }
        .wrapper .companies-info .company-con .company-card:hover.contact {
          line-height: 66px; }
          .wrapper .companies-info .company-con .company-card:hover.contact .img-container {
            margin-top: 52px;
            margin-bottom: 8px; }
          .wrapper .companies-info .company-con .company-card:hover.contact .arrow {
            background-color: #fff; }
      .wrapper .companies-info .company-con .company-card.active {
        left: 0;
        top: 0;
        width: 100%;
        height: 516px;
        display: flex;
        line-height: normal;
        padding: 60px 80px;
        text-align: left;
        transition: all .8s ease-in-out;
        z-index: 99; }
        .wrapper .companies-info .company-con .company-card.active .img-container {
          width: 260px; }
        .wrapper .companies-info .company-con .company-card.active .company-desc {
          display: block;
          width: calc(100% - 260px); }
          .wrapper .companies-info .company-con .company-card.active .company-desc h2 {
            font-size: 36px;
            font-weight: 600;
            color: #1481FF;
            margin-bottom: 24px; }
          .wrapper .companies-info .company-con .company-card.active .company-desc p {
            font-size: 18px;
            font-weight: 200;
            color: #889DA7;
            margin-bottom: 24px; }
          .wrapper .companies-info .company-con .company-card.active .company-desc a {
            display: inline-block;
            font-size: 18px;
            font-weight: 400;
            background-color: #1481FF;
            color: #fff;
            padding: 18px 34px;
            border-radius: 40px; }
        .wrapper .companies-info .company-con .company-card.active .arrow {
          bottom: auto;
          left: 20px;
          top: -40px;
          transform: rotate(180deg);
          line-height: 34px;
          text-align: center; }
        .wrapper .companies-info .company-con .company-card.active.contact {
          background-color: #fff;
          line-height: normal; }
          .wrapper .companies-info .company-con .company-card.active.contact .contact-desc {
            display: none; }
          .wrapper .companies-info .company-con .company-card.active.contact .contact-info {
            display: block; }
            .wrapper .companies-info .company-con .company-card.active.contact .contact-info .map {
              height: 100%; }
              .wrapper .companies-info .company-con .company-card.active.contact .contact-info .map iframe {
                width: 100%;
                height: 100%;
                border-radius: 24px; }
            .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information h3 {
              font-size: 24px;
              color: #1481FF;
              font-weight: 600;
              margin-bottom: 28px; }
            .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p {
              font-size: 18px;
              color: #557481;
              margin-bottom: 20px;
              padding-left: 40px;
              position: relative; }
              .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p img {
                display: inline-block;
                position: absolute;
                left: 0;
                top: 4px; }
              .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p:nth-child(2) img {
                left: 4px;
                top: 0px; }
              .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p:last-child {
                margin-bottom: 0; }
                .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information p:last-child img {
                  left: 3px;
                  top: 0px; }
          .wrapper .companies-info .company-con .company-card.active.contact .arrow {
            background-color: #1481FF; }
        .wrapper .companies-info .company-con .company-card.active:hover .arrow {
          top: 20px; }
    .wrapper .companies-info .company-con:first-child .company-card.active:last-child {
      right: 0;
      left: auto; }
    .wrapper .companies-info .company-con:last-child .company-card {
      top: 274px; }
      .wrapper .companies-info .company-con:last-child .company-card.active {
        bottom: 0;
        top: 0; }
        .wrapper .companies-info .company-con:last-child .company-card.active:last-child {
          right: 0;
          left: auto; }

/* media query */
@media (max-width: 1199.98px) {
  body.lang-ar .wrapper .companies-info .company-con .company-card.active .company-desc h2 {
    font-size: 28px; }

  .wrapper .section-bg {
    height: 210px; }
  .wrapper .companies-info .company-con .company-card {
    width: 210px;
    height: 210px;
    line-height: 210px;
    padding-left: 24px;
    padding-right: 24px; }
    .wrapper .companies-info .company-con .company-card .arrow {
      left: 80px; }
    .wrapper .companies-info .company-con .company-card.contact .img-container {
      margin-top: 52px; }
    .wrapper .companies-info .company-con .company-card:hover {
      line-height: 180px; }
      .wrapper .companies-info .company-con .company-card:hover .arrow {
        bottom: 24px; }
      .wrapper .companies-info .company-con .company-card:hover.contact .img-container {
        margin-top: 30px; }
    .wrapper .companies-info .company-con .company-card:nth-child(2) {
      left: calc(50% - 105px); }
    .wrapper .companies-info .company-con .company-card.active {
      line-height: normal;
      padding: 80px 62px;
      height: 452px; }
      .wrapper .companies-info .company-con .company-card.active:nth-child(2) {
        left: 0; }
  .wrapper .companies-info .company-con:last-child .company-card {
    top: 232px; } }
@media (max-width: 991.98px) {
  .wrapper .companies-info .company-con .company-card.active {
    padding: 62px 52px; }
    .wrapper .companies-info .company-con .company-card.active.contact {
      padding: 102px 52px; } }
@media (max-width: 575.98px) {
  body {
    overflow: auto;
    background-repeat: no-repeat; }
    body.lang-ar .wrapper .companies-info .company-con .company-card.active {
      text-align: center; }
      body.lang-ar .wrapper .companies-info .company-con .company-card.active .company-desc h2 {
        font-size: 24px;
        margin-bottom: 16px; }
      body.lang-ar .wrapper .companies-info .company-con .company-card.active .company-desc p {
        margin-bottom: 16px !important; }
      body.lang-ar .wrapper .companies-info .company-con .company-card.active.contact {
        text-align: right; }

  .wrapper .section-bg {
    display: none; }
  .wrapper .companies-info {
    margin-top: 24px; }
    .wrapper .companies-info .company-con .company-card {
      width: 100%;
      position: relative; }
      .wrapper .companies-info .company-con .company-card:nth-child(2) {
        left: 0; }
      .wrapper .companies-info .company-con .company-card .arrow {
        left: calc(50% - 20px); }
      .wrapper .companies-info .company-con .company-card.active {
        padding: 32px;
        display: block;
        text-align: center;
        height: auto; }
        .wrapper .companies-info .company-con .company-card.active .img-container {
          width: 100%;
          margin-bottom: 24px; }
        .wrapper .companies-info .company-con .company-card.active .company-desc {
          width: 100%; }
        .wrapper .companies-info .company-con .company-card.active.contact {
          padding: 62px 42px;
          text-align: left; }
          .wrapper .companies-info .company-con .company-card.active.contact .contact-info .information h3 {
            margin-top: 24px;
            margin-bottom: 24px; }
    .wrapper .companies-info .company-con:last-child .company-card {
      top: 0; } }

/*# sourceMappingURL=main.css.map */