@import url("https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap");
@font-face {
  font-family: 'Gill Sans';
  src: url("../fonts/GillSans.woff2") format("woff2"), url("../fonts/GillSans.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Copperplate';
  src: url("../fonts/CopperplateGothicBold.eot");
  src: local("Copperplate Bold"), local("CopperplateGothicBold"), url("../fonts/CopperplateGothicBold.eot?#iefix") format("embedded-opentype"), url("../fonts/CopperplateGothicBold.woff2") format("woff2"), url("../fonts/CopperplateGothicBold.woff") format("woff"), url("../fonts/CopperplateGothicBold.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Tajawal Light"), local("Tajawal-Light"), url(../fonts/Tajawal-Light.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Tajawal Light"), local("Tajawal-Light"), url(../fonts/Tajawal-Light.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Tajawal"), local("Tajawal-Regular"), url(../fonts/Tajawal-Regular.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Tajawal"), local("Tajawal-Regular"), url(../fonts/Tajawal-Regular.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Tajawal Medium"), local("Tajawal-Medium"), url(../fonts/Tajawal-Medium.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Tajawal Medium"), local("Tajawal-Medium"), url(../fonts/Tajawal-Medium.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Tajawal Bold"), local("Tajawal-Bold"), url(../fonts/Tajawal-Bold.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Tajawal Bold"), local("Tajawal-Bold"), url(../fonts/Tajawal-Bold.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.bx-wrapper {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  margin: 0;
  height: 100%;
}

.bx-viewport {
  height: 100% !important;
}

.bx-wrapper .bx-controls-direction a {
  text-indent: 0;
  background: none;
  color: #fff;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  font-family: 'Gill Sans';
  font-size: 19px;
  color: #9B989D;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Gill Sans';
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  text-decoration: none;
}

ul.none {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards {
  background: #fff;
  -webkit-box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.08);
  box-shadow: 0px 4px 16px rgba(69, 91, 99, 0.08);
  width: 100%;
  text-align: center;
}

#header {
  padding: 10px 24px;
  background: #FFF;
  -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}

#header .title {
  text-align: center;
  font-family: Copperplate;
  font-size: 25px;
  font-weight: 500;
  color: #B5B0B7;
}

#header .back {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  position: absolute;
  top: 0;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#header .back i {
  margin-right: 13px;
}

#navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background: #FFFFFF;
  padding: 25px;
}

#navigation ul li a {
  width: 45px;
  height: 45px;
  display: block;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
}

#navigation ul li a .current {
  fill: #0F2D4B;
}

#navigation ul li a .current-stroke {
  stroke: #0F2D4B;
}

#navigation ul li.active a {
  background: #0F2D4B;
}

#navigation ul li.active a .current {
  fill: #fff;
}

#navigation ul li.active a .current-stroke {
  stroke: #0F2D4B;
}

#body {
  padding: 65px 0 95px;
  height: 100vh;
  overflow-y: auto;
  background: #fff;
  position: relative;
  z-index: 1;
}

.home {
  height: 100vh;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-top: -65px;
  margin-bottom: -95px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.home .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.home .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#0B1E31), color-stop(50%, #354555), to(#BEC3C8));
  background-image: -o-linear-gradient(bottom, #0B1E31 0%, #354555 50%, #BEC3C8 100%);
  background-image: linear-gradient(to top, #0B1E31 0%, #354555 50%, #BEC3C8 100%);
  opacity: .91;
}

.home .contents {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-item-align: center;
  align-self: center;
  z-index: 3;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #fff;
}

.home .contents img {
  max-width: 210px;
  margin-bottom: 60px;
}

.home .contents h2 {
  font-size: 25px;
  font-weight: 500;
}

.home .contents h3 {
  font-size: 15px;
  font-weight: 100;
  margin-bottom: 45px;
}

.home .contents ul.lang li {
  margin: 0 7px;
}

.home .contents ul.lang li a {
  border: 2px solid #fff;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  padding: 12px 40px;
  border-radius: 4px;
}

.home .contents ul.lang li.active a {
  background: #fff;
  color: #0F2D4B;
}

body.ltr .home .lang li:not(.active) a {
  font-family: Tajawal;
  font-size: 14px;
}

.about h1 {
  font-size: 33px;
  font-weight: bold;
  color: #DBDBDB;
}

.about img {
  max-height: 68px;
}

.clients li {
  margin-bottom: 50px;
  padding: 12px 0;
}

.services li {
  margin-bottom: 16px;
  padding: 25px 0;
}

.services li h2 {
  color: #8D8D8D;
  font-family: 'Copperplate';
  font-size: 18px;
  font-weight: bold;
}

.services li p {
  font-size: 14px;
}

.contact {
  height: 100%;
  direction: ltr;
}

.contact .slider {
  height: 100%;
}

.contact .country {
  position: relative;
  height: 100%;
  width: 100%;
}

.contact .country img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.contact .country .mask {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.contact .country .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 100%;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.contact .country .info-wrapper {
  background: #fff;
  border-radius: 15px;
  padding-bottom: 30px;
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 4;
  text-align: center;
}

.contact .country .transition {
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
}

.contact .country.expanded .title {
  display: none;
}

.contact .country.expanded .hide {
  display: block;
}

.contact .country.expanded .show {
  display: none;
}

.contact .country.expanded .info-wrapper {
  bottom: -20px;
}

.contact .country:not(.expanded) .info-wrapper {
  bottom: -200px;
}

.contact .country:not(.expanded) .hide {
  display: none;
}

.contact .country:not(.expanded) .show {
  display: block;
}

.contact .country a.expand {
  background: #AC0F16;
  border-radius: 15px;
  padding: 5px 25px;
  color: #fff;
  max-width: 72px;
  margin: -20px auto 0;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
}

.contact .country .info {
  margin-top: 20px;
}

.contact .country .info h2 {
  color: #0F2D4B;
  font-family: Copperplate;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0;
}

.contact .country .info small {
  font-size: 10px;
  color: #A09C9C;
}

.contact .country .info .address {
  text-align: left;
  font-size: 15px;
  color: #8D8D8D;
  padding: 0 1em;
}

.contact .country .info .actions {
  padding: 0 1em;
}

.contact .country .info .actions a {
  color: #AC0F16;
  font-size: 15px;
  font-weight: 300;
  text-decoration: underline;
}

.request .form-control {
  margin-bottom: 50px;
  border: 1px solid #DBDBDB;
  border-radius: 4px;
  -webkit-box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.06);
  box-shadow: -6px 6px 10px rgba(0, 0, 0, 0.06);
}

.request textarea {
  min-height: 200px;
}

.request .btn {
  color: #fff;
  background: #AC0F16;
  border-radius: 0px;
  padding: 20px 0;
}

#navigation.request {
  background: none;
  padding: 0;
}

.rtl {
  font-family: Tajawal !important;
  direction: rtl;
  text-align: right;
}

.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6 {
  font-family: Tajawal !important;
}

.rtl #header .title {
  font-family: Tajawal !important;
}

.rtl .contact .country {
  direction: rtl;
}

.rtl .contact .country .address {
  text-align: right;
}