@font-face {
  font-family: Raleway;
  src: url(../font/Raleway-Regular.otf);
  font-family: Tajwal;
  src: url(../font/Tajawal-Black.otf);
}
body {
  background-image: url(../img/bghome.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  font-family: Raleway, Tajwal;
  overflow-x: hidden;
}

.image-responsive {
  width: 100%;
  height: auto;
}

@media (min-width: 1536px) {
  .container {
    max-width: 1250px !important;
    width: 1250px !important;
  }
}
@media (min-width: 1720px) {
  .container {
    max-width: 1560px !important;
    width: 1560px !important;
  }
}
@media (min-width: 2400px) {
  .container {
    width: 1920px !important;
    max-width: 1920px !important;
  }
}
.header-section1,
.header-section2 {
  position: fixed;
  width: 100vw;
  top: 0;
  z-index: 1030;
  min-height: 8vh;
  background-color: #fff;
  box-shadow: 0px 9px 8px -7px rgba(0, 0, 0, 0.4);
}

#imgWhoWeAre {
  width: 100%;
  height: auto;
}

.mouse, .content {
  padding-top: 13vh;
}

.item-client, .view-img, .item-third-carousel, .advantages, .services, .title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-section2 {
  display: block;
}

#header {
  display: none;
}

.navbar {
  box-shadow: inset 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
  padding: 0.5rem 0rem;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.navbar-collapse {
  background: #fff;
  text-align: center;
}

.navbar {
  position: fixed;
}

.nav-ar span {
  color: #3aa4dd !important;
}

.navbar-nav {
  margin-left: 100px;
}
.navbar-nav a {
  color: #6c6c6c;
}
.navbar-nav a:active {
  color: #fb9b2b;
}
.navbar-nav a:focus {
  color: #fb9b2b !important;
}
.navbar-nav a:hover {
  color: #fb9b2b;
}
.navbar-nav a span {
  color: #6c6c6c;
}
.navbar-nav .active {
  color: #fb9b2b !important;
  text-decoration: none;
}

a span.en,
a:hover span.mi {
  display: inline;
}

a:hover span.en,
a span.mi {
  display: none;
  margin-left: -5px;
}

.navbar-expand-lg .navbar-nav .nav-link {
  font-weight: 700;
  font-size: 1rem;
}

.hr {
  display: none;
}

#home {
  height: 100vh;
}
#home .content {
  padding-top: 24vh;
}
#home .h3Home {
  color: #249ad9;
  font-weight: bold;
  line-height: 1.7;
  font-size: 1.5rem;
}

#infoHome {
  display: flex;
  justify-content: center;
  align-items: center;
}

#spanHomeYellow {
  color: #fa9b2b;
}

#spanHomeGreen {
  color: #4e8e0a;
}

#first {
  font-size: 2rem;
  text-transform: uppercase;
}

#second {
  font-size: 1.7rem !important;
  font-weight: 900 !important;
}

#pargraph {
  font-size: 1rem;
  color: #6d6e71 !important;
}

.mouse {
  display: flex;
  justify-content: center;
}

#who-we-are .content {
  padding-top: 26vh;
}

.text-WhoWeAre {
  text-align: justify;
}

.infoWhoWeAre {
  line-height: 2;
  color: #6c6c6c;
  font-size: 1.3rem;
}

#imgWhoWeAre {
  padding-top: 7vh;
}

.img-our {
  padding: 20px !important;
  -moz-padding-end: inherit;
  -moz-padding-start: inherit;
}

.info-our {
  padding: 0 2vw;
  border-right: 1px solid #d7e3ea;
  color: #6c6c6c;
  line-height: 2;
}

.info-our:last-child {
  border-right: none;
}

.title h5 {
  margin-bottom: 0px;
}

#who-we-are2 {
  height: 85vh;
}

.p-section2 {
  font-size: 1.3rem;
  text-align: justify;
}

.icon-who-we-are {
  padding: 2%;
  display: block;
  text-align: center;
  border: 1px solid #d7e3ea;
  border-left: 0;
}

.icon-who-we-are:last-child {
  border-right: 0;
}

.svg-image {
  width: 20%;
}

.h5-icon {
  color: #219fdc;
  font-weight: 600;
  font-size: 1.3rem;
  padding: 2%;
  text-transform: uppercase;
  margin-bottom: 0px;
}

.h6-icon {
  color: #219fdc;
  font-weight: 400;
  font-size: 1.3rem;
}

.img-section4 {
  padding: 0;
}

.title-what-we-can-do {
  color: #fff;
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.services {
  flex-direction: column;
  display: none;
}

.img-services {
  width: 120px;
}

#what-we-can-do .content {
  padding-top: 8vh;
}

.title-services {
  color: #6c6c6c;
  padding-top: 15px;
  text-align: center;
  font-weight: 600;
}

.button span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #259ad9;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.button:hover {
  color: #fff;
  cursor: pointer;
}

.button:hover span {
  width: 225%;
  height: 562.5px;
}

.button:active {
  background-color: #259ad9;
}

.button {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid currentColor;
  margin: 30px;
  padding: 7px 20px;
  font-weight: 700;
  font-family: Raleway;
  background-color: transparent;
  color: #259ad9;
  border: 1px solid #259ad9;
  border-radius: 4px;
}

.image-section5 {
  background-color: #f7f8f8;
  height: 92vh;
}

.img-slider-section-5 {
  height: 75%;
}

.flex-cv {
  text-align: center;
}

.icon-section5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20%;
  color: #6c6c6c !important;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  text-align: center;
}
.icon-section5:hover {
  text-decoration: none;
  outline: none;
}
.icon-section5:focus {
  outline: none;
}
.icon-section5:active {
  outline: none;
}

.modal .button:hover {
  color: #259ad9;
}
.modal .button-close {
  background-color: #fff;
  border: 1px solid #9e9e9e;
}
.modal .error {
  color: #FF0000;
}

#our-product .owl-carousel .owl-item img {
  display: inline;
  width: auto;
}
#our-product .content {
  padding-top: 8vh;
}
#our-product .lsms-bg {
  display: none;
}
#our-product .sms-bg {
  display: none;
}
#our-product .tidans-bg {
  display: none;
}
#our-product .pob-bg {
  display: none;
}

.owl-carousel button.owl-dot {
  background: #858584;
  border: none;
  padding: 0 !important;
  margin: 1.7%;
  font: inherit;
  width: 14px;
  height: 14px;
  border-radius: 12px;
  position: absolute;
  position: relative;
  top: 2vh;
  left: 20vw;
  outline: none;
}

button.owl-dot.active {
  background-color: #33a1dd;
}

.advantages {
  text-align: center;
}
.advantages p {
  font-weight: 500;
}

.paragraph {
  padding: 20px;
  color: #6c6c6c;
  line-height: 1.5;
  font-size: 1.4rem;
  text-align: left;
  text-align: justify;
}

.h3-title {
  color: #3aa4dd;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
}

.h4-title {
  color: #6c6c6c;
  font-size: 1.5rem;
}

#our-work .owl-carousel button.owl-dot {
  background: #858584;
  border: none;
  padding: 0 !important;
  margin: 1.7%;
  font: inherit;
  width: 18px;
  height: 18px;
  border-radius: 12px;
  position: absolute;
  position: relative;
  top: 0vh;
  left: 37vw;
  outline: none;
}
#our-work .owl-carousel button.owl-dot.owl-dot.active {
  background-color: #33a1dd;
}

.item-third-carousel {
  flex-direction: column;
}

.view-img {
  border-top: 1px solid #7cc2e8;
  padding-top: 3vh;
  font-size: 1.5rem;
}

.under-view-img {
  border-bottom: 1px solid #7cc2e8;
  padding-top: 3vh;
}

.img-wrap {
  position: relative;
}

.div-layout {
  display: none;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(-34deg, rgba(176, 227, 122, 0.8) 0%, rgba(37, 154, 217, 0.8) 50%);
  color: #fff;
}

.img-wrap:hover .div-layout {
  display: block;
}

h4.h4-img-wrap {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 1.5rem;
}

h5.h5-img-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 1rem;
}

.imgAttachment {
  width: auto !important;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.camira {
  width: 5vw;
}

.item-client {
  min-height: 150px;
  display: none;
}

#responsive-client {
  display: none;
}

.big-client {
  display: block;
}

#career .button {
  margin: 0px;
}
#career .image-responsive {
  width: auto;
  height: auto;
  top: 21vh;
  position: relative;
  z-index: 100;
}

.border-gray {
  background-color: #ebebeb;
  height: 17vh;
  margin-top: 12vh;
}

.table {
  margin-top: 11vh;
}
.table th {
  font-size: 1.2rem;
  font-weight: 600;
  color: #6c6c6c;
}
.table td {
  width: 1px;
  color: #6c6c6c;
  font-size: 1rem;
  line-height: 2;
}

#contact {
  background-image: url(../img/bgsection9.png);
  background-repeat: no-repeat;
  background-position: center;
}
#contact .h3-title {
  text-align: center;
}
#contact .content {
  padding-top: 19vh;
}

.input-contact {
  border: none;
  border-bottom: 1px solid #6c6c6c;
  border-radius: 0;
  margin: 43px 0;
  background: transparent;
}

.button-contact {
  background-color: #3aa4dd;
  color: #fff;
  border: none;
  box-shadow: 10px 10px 5px 0px #ececec;
  margin-top: 43px;
  cursor: pointer;
}

.contact-us {
  background-color: #3aa4dd;
  min-height: 88px;
  margin-top: 4.5vh;
}

.info-contact {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.info-contact p {
  margin-top: 16px;
}
.info-contact .email {
  color: #fff;
}

.img-contact {
  padding: 2vh;
  -moz-padding-end: initial;
  -moz-padding-start: initial;
}

.footer {
  padding-top: 1vh;
}
.footer p {
  color: #6c6c6c;
}

.footer-nav {
  list-style: none;
  padding-left: 0;
  padding-top: 2vh;
}
.footer-nav li {
  float: left;
}
.footer-nav li a {
  color: #6c6c6c;
  font-weight: 800;
}

.footer-social {
  list-style: none;
}
.footer-social li {
  float: left;
  color: #6c6c6c;
}

.blue {
  background-color: #00adee !important;
  height: 5px;
}

.yellow {
  background-color: #fa9b2b !important;
  height: 5px;
}

.green {
  background-color: #80b039 !important;
  height: 5px;
}

.footer .nav-link.nav-ar {
  padding: 0;
  width: 50px;
}

.tooltip {
  opacity: 1;
  background-color: transparent;
  padding: 3px 10px;
  border-radius: 5px;
  right: 25vw;
  color: #6c6c6c;
  text-transform: capitalize;
  font-weight: 600;
  display: none;
}

@media (max-width: 768px) {
  .navbar-toggler {
    border: none;
    background-color: #259ad9 !important;
    padding: 0px;
    border-radius: 5px;
    position: relative;
    right: 11px;
  }
  .navbar-toggler:hover {
    background: #259ad9 !important;
  }
  .navbar-toggler .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 6% 340%;
  }
  .navbar-toggler .middle-bar {
    opacity: 0;
  }
  .navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: -9% -300%;
  }
  .navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
  }
  .navbar-toggler.collapsed .middle-bar {
    opacity: 1;
  }
  .navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
  }

  body {
    background-image: url(../img/bghome2.png);
    background-size: contain;
    font-family: Raleway;
  }

  #logo1 {
    display: none;
  }

  #home {
    padding-top: 11vh;
  }

  #header {
    display: block;
  }

  .header-section1 {
    display: block !important;
    min-height: 11vh;
  }

  .header-section2 {
    min-height: 11vh;
  }

  .navbar {
    width: 98%;
  }

  .navbar-nav {
    margin-left: 0px;
  }

  .hr {
    width: 35vw;
    margin-top: 1rem;
    display: block;
  }

  .navbar-toggler-icon {
    display: flex;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    margin: 8px 14px;
    vertical-align: middle;
    content: "";
    background-color: #fff !important;
    background-size: 100% 100%;
  }

  .span-nav {
    display: none;
  }

  #home #infoHome {
    order: 2;
  }

  img#img-logo {
    width: 73%;
    padding: 4%;
  }

  .mouse {
    display: none;
  }

  .info-our {
    padding: 0 6vw;
  }

  #what-we-can-do .button {
    margin: 10px;
  }

  #who-we-are {
    height: auto;
  }
  #who-we-are .content {
    padding-top: 10vh;
  }

  #who-we-are2 {
    height: auto;
  }
  #who-we-are2 .content {
    padding-top: 2vh;
  }
  #who-we-are2 .h5-icon {
    font-size: 1rem;
  }
  #who-we-are2 .h6-icon {
    font-size: 0.8rem;
  }

  .services {
    display: flex;
  }

  .img-services {
    width: 100px;
  }

  .icon-who-we-are:last-child {
    border-right: 1px solid #d7e3ea;
  }

  #img-what-we-can-do {
    padding-bottom: 3vh;
  }

  .title-what-we-can-do {
    font-size: 1.5rem;
  }

  .title-services {
    font-size: 1rem;
  }

  #our-product .owl-carousel button.owl-dot {
    top: 35vh;
    left: 32vw;
  }
  #our-product .paragraph {
    font-size: 1rem;
  }
  #our-product .image-section5 {
    top: -2.5vh;
    height: 25vh;
    order: 2;
  }
  #our-product .image-responsive {
    width: 100%;
    height: 68%;
  }
  #our-product .flex-cv {
    padding-top: 2vh;
    text-align: center;
  }

  #our-work .owl-carousel button.owl-dot {
    top: -2vh;
    left: 33vw;
    width: 12px;
    height: 12px;
  }
  #our-work .camira {
    width: 11vw;
  }

  .h3-title {
    font-size: 2rem;
  }

  .h4-title {
    font-size: 1rem;
  }

  #responsive-client {
    display: block;
  }

  #client .content {
    padding-top: 18vh;
    min-height: 100vh;
  }

  .big-client {
    display: none;
  }

  #career .image-responsive {
    top: 15vh;
    width: 100%;
  }
  #career .bgsection8 {
    order: 2;
    bottom: 20vh;
  }
  #career .border-gray {
    margin-top: -8vh;
  }
  #career .content {
    padding-top: 15vh;
  }
  #career .table {
    margin-top: 5vh;
  }
  #career .button {
    margin: 0px 4px;
    padding: 3px 10px;
  }

  .info-contact {
    justify-content: left;
  }

  .row-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer-nav {
    display: none;
  }

  .footer-social {
    padding-left: 0px;
  }
  .footer-social li:first-child {
    padding: 0 !important;
  }

  .advantages {
    display: none;
    margin: 10px;
  }
  .advantages p {
    margin: 25px;
  }
}
@media (min-width: 992px) and (max-width: 1025px) {
  .header-section1, .header-section2 {
    min-height: 13vh;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
    font-size: 0.7rem;
  }

  .navbar-nav {
    margin-left: 0px;
  }

  .nav-smoth .pl-4 {
    padding-left: 1rem !important;
  }

  .info-contact p {
    font-size: 12px;
  }

  #career .image-responsive {
    top: 68vh;
  }

  .footer-nav li a {
    font-size: 0.7rem;
  }

  .footer-social {
    padding-left: 0px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }
}
@media (min-width: 1026px) and (max-width: 1366px) {
  img#logo1 {
    width: 18%;
  }

  img#img-logo {
    width: 80%;
  }

  .navbar {
    padding: 0.5rem 0rem;
  }

  .navbar-nav {
    margin-left: 50px;
  }

  #first {
    font-size: 1.7rem !important;
    text-transform: uppercase;
  }

  #second {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
  }

  #pargraph {
    font-size: 1rem !important;
    color: #6d6e71 !important;
  }

  img.mouse-img {
    width: 70%;
  }

  .p-section2 {
    font-size: 1rem;
  }

  .info-our {
    line-height: 1.5;
  }

  .h5-icon {
    font-size: 1rem;
  }

  .h6-icon {
    font-size: 1rem;
  }

  .icon-who-we-are {
    padding: 1.5%;
  }

  .header-section2 {
    height: 11vh !important;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
    font-size: 0.8rem;
  }

  .nav-item {
    font-size: 0.8rem;
  }

  .infoWhoWeAre {
    line-height: 1.5;
    font-size: 1rem;
  }

  #what-we-can-do .img-services {
    width: 90px;
  }
  #what-we-can-do .button {
    margin: 15px;
  }
  #what-we-can-do .title-services {
    font-size: 1rem;
  }
  #what-we-can-do .content {
    padding-top: 11vh;
  }

  #our-product .image-section5 {
    height: 92vh;
  }
  #our-product .image-section5 .image-responsive {
    width: 100%;
    height: 70%;
  }

  .flex-cv {
    padding-top: 10vh;
  }

  .icon-section5 {
    padding: 12%;
  }

  .paragraph {
    font-size: 1rem;
  }

  .h3-title {
    font-size: 2rem;
  }

  .h4-title {
    font-size: 1rem;
  }

  #our-work .content {
    padding-top: 11vh;
  }
  #our-work .item-third-carousel {
    padding: 15px;
  }

  #career .content {
    padding-top: 15vh;
  }
  #career .image-responsive {
    top: 28vh;
    width: 100%;
  }
  #career .border-gray {
    margin-top: 8vh;
  }

  .table th {
    font-size: 1rem;
  }
  .table td {
    font-size: 0.8rem;
  }

  .footer-nav .pl-4 {
    padding-left: 1.3rem !important;
  }
}
@media (min-width: 1367px) and (max-width: 1440px) {
  .navbar {
    padding: 1.5rem 0rem;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.4rem;
    padding-left: 0.4rem;
    font-size: 0.9rem;
  }

  .navbar-nav {
    margin-left: 0px;
  }

  .header-section2 {
    height: 10vh;
  }

  #who-we-are .content {
    padding-top: 12vh;
  }

  .content {
    padding-top: 10vh;
  }

  .info-our {
    line-height: 1.5;
  }

  .infoWhoWeAre {
    line-height: 1.5;
  }

  #what-we-can-do .content {
    padding-top: 10vh;
  }

  .paragraph {
    font-size: 1.2rem;
  }

  .icon-section5 {
    padding: 10%;
  }

  .img-slider-section-5 {
    height: 75%;
  }

  .h3-title {
    font-size: 2rem;
  }

  #career .image-responsive {
    width: 100%;
    top: 27vh;
  }

  .border-gray {
    margin-top: 3vh;
  }

  .h4-title {
    font-size: 1.1rem;
  }

  .table {
    margin-top: 5vh;
  }
}
@media (min-width: 1441px) and (max-width: 1537px) {
  .navbar-nav {
    margin-left: 0px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    font-size: 1rem;
  }

  .header-section2 {
    min-height: 10vh;
  }

  .footer-nav .pl-4 {
    padding-left: 1rem;
  }

  .footer-social {
    padding: 0px;
  }

  .footer-social .pl-4 {
    padding-left: 1rem;
  }

  .footer-nav li a {
    font-size: 1rem;
  }

  .border-gray {
    margin-top: 0;
  }
}
@media (min-width: 1538px) and (max-width: 1920px) {
  #career .image-responsive {
    top: 21vh !important;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem !important;
    padding-left: 0.9rem !important;
    font-size: 1.2rem !important;
  }

  .navbar {
    padding: 0.5rem 0rem;
  }
}

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