@import url(../css/vendor/normalize.min.css);
@import url(../css/vendor/animate.css);
@import url(../css/vendor/owl.carousel.css);
@import url(../css/vendor/owl.theme.default.css);
/* Neo Sans */
@font-face {
  font-family: 'Neo Sans';
  src: url("../fonts/Neo-Sans/neo-sans-arabic-regular.ttf") format("truetype");
}

/* Avenir */
@font-face {
  font-family: 'Lato';
  src: url("../fonts/Avenir/Avenir-Heavy.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Lato */
@font-face {
  font-family: 'Lato';
  src: url("../fonts/Lato/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url("../fonts/Lato/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url("../fonts/Lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url("../fonts/Lato/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url("../fonts/Lato/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

/* GE-SS-Two */
@font-face {
  font-family: 'GE SS Two';
  src: url("../fonts/GE-SS-Two/GE-SS-Two-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'GE SS Two';
  src: url("../fonts/GE-SS-Two/GE-SS-Two-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'GE SS Two';
  src: url("../fonts/GE-SS-Two/GE-SS-Two-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@keyframes pulse {
  /* line 7, ../sass/_animations.scss */
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }

  /* line 11, ../sass/_animations.scss */
  25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
  }

  /* line 15, ../sass/_animations.scss */
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
  }

  /* line 19, ../sass/_animations.scss */
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }

  /* line 23, ../sass/_animations.scss */
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}

@keyframes move-wave-left {
  /* line 30, ../sass/_animations.scss */
  0% {
    background-position-x: 0;
  }

  /* line 33, ../sass/_animations.scss */
  100% {
    background-position-x: 1900px;
  }
}

@keyframes move-ship {
  /* line 39, ../sass/_animations.scss */
  0% {
    transform: rotate(0deg);
  }

  /* line 42, ../sass/_animations.scss */
  5% {
    transform: rotate(1deg);
  }

  /* line 45, ../sass/_animations.scss */
  50% {
    transform: rotate(0deg);
  }

  /* line 48, ../sass/_animations.scss */
  95% {
    transform: rotate(-2deg);
  }

  /* line 51, ../sass/_animations.scss */
  100% {
    transform: rotate(0deg);
  }
}

@keyframes show-ship-smoke {
  /* line 57, ../sass/_animations.scss */
  0% {
    top: 300px;
    opacity: 0;
    transform: scale(0.5);
  }

  /* line 62, ../sass/_animations.scss */
  15% {
    top: 230px;
    opacity: 1;
    transform: scale(1);
  }

  /* line 67, ../sass/_animations.scss */
  30% {
    opacity: 0;
  }
}

@keyframes logo-pulse {
  /* line 73, ../sass/_animations.scss */
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  /* line 78, ../sass/_animations.scss */
  5% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  /* line 83, ../sass/_animations.scss */
  7% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/* line 14, ../sass/main.scss */
html {
  font-size: 62.5%;
  overflow: hidden;
}

/* line 19, ../sass/main.scss */
body {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  font-family: 'Neo Sans', 'GE SS Two', sans-serif;
  font-size: 2.1rem;
  touch-action: none;
}

/* line 32, ../sass/main.scss */
.logo {
  float: right;
  max-width: 320px;
  padding: 60px 60px 0 0;
}
/* line 37, ../sass/main.scss */
.logo.animated-logo {
  animation: logo-pulse 10s ease infinite;
}
/* line 41, ../sass/main.scss */
.logo img {
  width: 100%;
}

/* line 46, ../sass/main.scss */
.heading {
  text-transform: uppercase;
}
/* line 49, ../sass/main.scss */
.heading.animated-logo {
  animation: logo-pulse 10s ease infinite;
}
/* line 52, ../sass/main.scss */
.heading.animated-logo.js-animate {
  opacity: 1;
}

/* line 58, ../sass/main.scss */
.app {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  margin: auto;
  overflow: hidden;
}

/* line 67, ../sass/main.scss */
.page {
  position: relative;
  width: 100%;
  height: 100%;
}

/* line 73, ../sass/main.scss */
.btn {
  outline: none;
  cursor: pointer;
  border: none;
}

/* line 80, ../sass/main.scss */
.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 15px;
}

/* line 83, ../sass/main.scss */
.owl-theme .owl-dots .owl-dot {
  outline: 0 !important;
}

/* line 84, ../sass/main.scss */
.owl-theme .owl-dots .owl-dot span {
  background: #fae7f0;
  width: 16px;
  height: 16px;
}

/* line 89, ../sass/main.scss */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #8f2054;
}

/* line 93, ../sass/main.scss */
.js-animate {
  opacity: 0;
}

/* line 98, ../sass/main.scss */
.lang-ar h1, .lang-ar h3, .lang-ar p {
  direction: rtl;
}

/* line 103, ../sass/main.scss */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

/* line 107, ../sass/main.scss */
#SwitchToReadingMode-Small14 {
  display: none;
}

/* line 1, ../sass/_page1.scss */
.page--1 {
  background-color: #8f2054;
  opacity: 0;
}
/* line 5, ../sass/_page1.scss */
.page--1 h1.heading {
  margin: 0;
  padding: 220px 0 88px 100px;
  color: #ffffff;
  font-size: 116px;
  font-weight: 400;
  line-height: 113px;
}
/* line 13, ../sass/_page1.scss */
.page--1 h1.heading span {
  display: block;
  color: #C8C9CB;
}
/* line 20, ../sass/_page1.scss */
.page--1 .wave,
.page--1 .ship {
  position: absolute;
}
/* line 24, ../sass/_page1.scss */
.page--1 .wave--2 {
  width: 100%;
  height: 193px;
  background: url("../img/wave-2.svg") repeat-x 0 0;
  background-size: contain;
  left: 0;
  bottom: 110px;
}
/* line 32, ../sass/_page1.scss */
.page--1 .wave--2.animate-wave {
  animation: move-wave-left 40s linear;
  animation-iteration-count: infinite;
}
/* line 38, ../sass/_page1.scss */
.page--1 .wave--3 {
  width: 100%;
  height: 192px;
  background: url("../img/wave-3.svg") repeat-x 0 0;
  background-size: contain;
  left: 0;
  bottom: 0;
}
/* line 46, ../sass/_page1.scss */
.page--1 .wave--3.animate-wave {
  animation: move-wave-left 20s linear;
  animation-iteration-count: infinite;
}
/* line 52, ../sass/_page1.scss */
.page--1 .wave--small {
  right: -2px;
  bottom: 150px;
}
/* line 57, ../sass/_page1.scss */
.page--1 .ship--1 {
  right: -10px;
  bottom: 180px;
  opacity: 0;
}
/* line 62, ../sass/_page1.scss */
.page--1 .ship--1.animate-ship--1 {
  opacity: 1;
  animation: move-ship 10s linear;
  animation-iteration-count: infinite;
}
/* line 67, ../sass/_page1.scss */
.page--1 .ship--1.animate-ship--1.fadeOutRight {
  opacity: 0;
}
/* line 73, ../sass/_page1.scss */
.page--1 .ship__smoke {
  right: -20px;
  top: 230px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #C9D1CB;
  opacity: 0;
}
/* line 82, ../sass/_page1.scss */
.page--1 .ship__smoke.animate-ship__smoke {
  animation: show-ship-smoke 6s linear;
  animation-iteration-count: infinite;
}
/* line 86, ../sass/_page1.scss */
.page--1 .ship__smoke.animate-ship__smoke.fadeOutRight {
  opacity: 0;
}

/* line 93, ../sass/_page1.scss */
.btn--start {
  position: relative;
  z-index: 2;
  width: 310px;
  height: 117px;
  margin-left: 60px;
  background-color: white;
  color: #8f2054;
  font-size: 31px;
  font-weight: 600;
  border-radius: 61px;
  box-shadow: 0 5px 0 0 #BBC6BE;
  transition: 0.4s all ease;
}
/* line 107, ../sass/_page1.scss */
.btn--start.btn-start-en {
  margin-left: 96px;
}
/* line 112, ../sass/_page1.scss */
.btn--start:hover, .btn--start:focus {
  background-color: #E74545;
  color: white;
}

/* line 2, ../sass/_page2.scss */
.page--2 h1.heading {
  margin: 0;
  padding: 220px 0 88px 100px;
  color: #ffffff;
  font-size: 116px;
  font-weight: 400;
  line-height: 113px;
}
/* line 10, ../sass/_page2.scss */
.page--2 h1.heading span {
  display: block;
  color: #C8C9CB;
}
/* line 16, ../sass/_page2.scss */
.page--2 .language-switcher {
  position: relative;
  top: 64px;
  left: 74px;
  float: left;
  width: 268px;
  height: 92px;
  padding: 14px 16px;
  background-color: #7F8084;
  border-radius: 116px;
  box-sizing: border-box;
  cursor: pointer;
}
/* line 29, ../sass/_page2.scss */
.page--2 .language-switcher > span {
  display: inline-block;
  width: 115px;
  height: 65px;
  padding-top: 14px;
  text-align: center;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 38px;
  font-weight: 300;
  box-sizing: border-box;
}
/* line 41, ../sass/_page2.scss */
.page--2 .language-switcher > span.active {
  background-color: #8f2054;
  border-radius: 80px;
}
/* line 50, ../sass/_page2.scss */
.page--2 .waves,
.page--2 .wave,
.page--2 .ship {
  position: absolute;
}
/* line 54, ../sass/_page2.scss */
.page--2 .wave {
  width: 1940px;
  left: -11px;
}
/* line 59, ../sass/_page2.scss */
.page--2 .wave--1 {
  top: 311px;
  height: 280px;
  background: url("../img/wave-1b.svg") repeat-x 0 0;
  background-size: contain;
}
/* line 65, ../sass/_page2.scss */
.page--2 .wave--1.animate-wave {
  animation: move-wave-left 60s linear;
  animation-iteration-count: infinite;
}
/* line 71, ../sass/_page2.scss */
.page--2 .wave--2 {
  top: 458px;
  height: 196px;
  background: url("../img/wave-2.svg") repeat-x 0 0;
  background-size: contain;
}
/* line 77, ../sass/_page2.scss */
.page--2 .wave--2.animate-wave {
  animation: move-wave-left 35s linear;
  animation-iteration-count: infinite;
}
/* line 83, ../sass/_page2.scss */
.page--2 .wave--3 {
  top: 530px;
  height: 236px;
  background: url("../img/wave-3.svg") repeat-x 0 0;
  background-size: contain;
}
/* line 89, ../sass/_page2.scss */
.page--2 .wave--3.animate-wave {
  animation: move-wave-left 35s linear;
  animation-iteration-count: infinite;
}
/* line 95, ../sass/_page2.scss */
.page--2 .wave-4 {
  top: 660px;
}
/* line 99, ../sass/_page2.scss */
.page--2 .ship {
  top: 66px;
  left: 534px;
  animation: move-ship 8s linear;
  animation-iteration-count: infinite;
}
/* line 107, ../sass/_page2.scss */
.page--2 .menu {
  position: absolute;
  left:40px;
  bottom: 0px;
}
/* line 111, ../sass/_page2.scss */
.page--2 .menu .menu-item {
  position: relative;
  display: inline-block;
  width: 300px;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
}
/* line 119, ../sass/_page2.scss */
.page--2 .menu .menu-item::after {
  content: '';
  position: absolute;
  top: 30px;
  right: 50px;
  z-index: 1;
  display: block;
  width: 224px;
  height: 218px;
  background-color: #C8C9CB;
  border-radius: 50%;
}
/* line 132, ../sass/_page2.scss */
.page--2 .menu .menu-item .icon {
  position: relative;
  z-index: 2;
}
/* line 137, ../sass/_page2.scss */
.page--2 .menu .menu-item + .menu-item {
  margin-left: 30px;
}
/* line 142, ../sass/_page2.scss */
.page--2 .menu .menu-item:hover .menu-item__window {
  transform: rotate(180deg);
}
/* line 146, ../sass/_page2.scss */
.page--2 .menu .menu-item:hover .menu-item__icon {
  transform: translate(-50%, -50%) scale(1.2);
}
/* line 150, ../sass/_page2.scss */
.page--2 .menu .menu-item:hover h3 {
  transform: scale(1.2);
}
/* line 155, ../sass/_page2.scss */
.page--2 .menu .menu-item > * {
  transition: 0.4s all ease;
}
/* line 160, ../sass/_page2.scss */
.page--2 .menu .menu-item__icon {
  position: absolute !important;
  top: 105px;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* line 167, ../sass/_page2.scss */
.page--2 .menu h3 {
  padding-top: 8px;
  font-size: 28px;
  color: #8f2054;
}
/* line 172, ../sass/_page2.scss */
.page--2 .menu h3 > span {
  color: #7F8084;
}

/* line 179, ../sass/_page2.scss */
.modals {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: none;
}
/* line 188, ../sass/_page2.scss */
.modals.show {
  display: block;
}
/* line 192, ../sass/_page2.scss */
.modals .modal__overlay {
  width: 100%;
  height: 100%;
  background-color: #3B4E64;
  opacity: 0;
  transition: 0.4s all ease;
}
/* line 199, ../sass/_page2.scss */
.modals .modal__overlay.show {
  opacity: 0.9;
}
/* line 204, ../sass/_page2.scss */
.modals .modal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1386px;
  height: 779px;
  margin-top: -389px;
  margin-left: -693px;
  padding: 50px 50px 50px 100px;
  background-color: #ffffff;
  border-radius: 25px;
  box-sizing: border-box;
  overflow: hidden;
  display: none;
  transition: all 0.3s ease-in;
}
/* line 220, ../sass/_page2.scss */
.modals .modal.show {
  display: block;
}
/* line 224, ../sass/_page2.scss */
.modals .modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  display: block;
  width: 37px;
  height: 100%;
  background-color: #8f2054;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
/* line 238, ../sass/_page2.scss */
.modals .modal h1,
.modals .modal h2 {
  color: #8f2054;
  font-size: 40px;
  font-weight: 800;
}
/* line 244, ../sass/_page2.scss */
.modals .modal h2 {
  text-align: center;
}
/* line 248, ../sass/_page2.scss */
.modals .modal h3 {
  font-size: 35px;
  color: #8f2054;
}
/* line 253, ../sass/_page2.scss */
.modals .modal p {
  color: #7F8084;
  font-size: 32px;
  line-height: 48px;
  font-weight: 200;
}
/* line 260, ../sass/_page2.scss */
.modals .modal iframe {
  width: 100%;
  height: 100%;
}
/* line 267, ../sass/_page2.scss */
.modals .modal--2 img {
  width: 100%;
}
/* line 271, ../sass/_page2.scss */
.modals .modal--2 .item {
  text-align: center;
}
/* line 276, ../sass/_page2.scss */
.modals .modal--4 {
  padding: 0px 4px 0 34px;
}
/* line 280, ../sass/_page2.scss */
.modals .modal--5 {
  height: 875px;
  padding: 0px 0px 0 34px;
}
/* line 285, ../sass/_page2.scss */
.modals .modal__content {
  height: 600px;
  padding: 0 50px 30px 0;
  overflow-y: scroll;
  box-sizing: border-box;
}
/* line 292, ../sass/_page2.scss */
.modals .close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  margin-right: 20px;
  margin-left: 20px;
  background: url(../img/close-btn.svg) no-repeat;
  background-size: contain;
  cursor: pointer;
}
/* line 305, ../sass/_page2.scss */
.modals .refresh {
  position: absolute;
  top: 20px;
  right: 100px;
  z-index: 3;
  width: 70px;
  height: 70px;
  margin-right: 20px;
  margin-left: 20px;
  border-radius: 100px;
  background: url(../img/btn-refresh.svg) no-repeat;
  background-size: contain;
  cursor: pointer;
}
/* line 320, ../sass/_page2.scss */
.modals .icon {
  position: relative;
  z-index: 5;
  display: inline-block;
  width: 62px;
  height: 62px;
  margin-right: 20px;
  background: url("../img/ship-page-2-window-2.svg") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
/* line 332, ../sass/_page2.scss */
.modals .icon > img {
  position: absolute;
  top: 41%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
}
/* line 341, ../sass/_page2.scss */
.modals .icon-craft {
  display: inline-block;
  width: 57px;
  height: 57px;
  border-radius: 50%;
  border: 2px solid #8f2054;
  background: url("../img/ico-small-craft.svg") 50% 50% no-repeat;
  background-size: 73%;
  margin-right: 20px;
  vertical-align: middle;
}
/* line 353, ../sass/_page2.scss */
.modals .icon-craft--small {
  background: url("../img/ico-small-craft.svg") 50% 50% no-repeat;
}
/* line 357, ../sass/_page2.scss */
.modals .icon-craft--big {
  background: url("../img/ico-big-craft.svg") 50% 50% no-repeat;
}
/* line 361, ../sass/_page2.scss */
.modals .shipping-content {
  width: 100%;
  height: 100%;
}
/* line 365, ../sass/_page2.scss */
.modals .shipping-content.shipping-content--en {
  background: url("../img/shipping/map-en.jpg") no-repeat;
  background-size: cover;
}
/* line 370, ../sass/_page2.scss */
.modals .shipping-content.shipping-content--ar {
  background: url("../img/shipping/map-ar.jpg") no-repeat;
  background-size: cover;
}

/* line 377, ../sass/_page2.scss */
.lang-ar .modals .icon {
  margin-left: 20px;
}

/* line 1, ../sass/_page3.scss */
.page--3 {
  background: url("../img/bg-page3.svg") 50% 50% no-repeat;
  background-size: cover;
}

/* line 14, ../sass/_page3.scss */
.port {
  position: relative;
  width: 100%;
  height: 100%;
}
/* line 19, ../sass/_page3.scss */
.port .port__img {
  position: absolute;
}
/* line 23, ../sass/_page3.scss */
.port .port__btn-home {
  position: absolute;
  bottom: 30px;
  right: 60px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 5px 0 0 #000000;
  cursor: pointer;
  transition: 0.4s all ease;
}
/* line 35, ../sass/_page3.scss */
.port .port__btn-home img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.4s all ease;
}
/* line 44, ../sass/_page3.scss */
.port .port__btn-home:hover, .port .port__btn-home:focus {
  background: #E74545;
}
/* line 47, ../sass/_page3.scss */
.port .port__btn-home:hover img, .port .port__btn-home:focus img {
  transform: translate(-50%, -50%) rotate(360deg);
}
/* line 53, ../sass/_page3.scss */
.port .port__number {
  position: absolute;
}
/* line 56, ../sass/_page3.scss */
.port .port__number .dot {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background-color: #222222;
  z-index: 10;
  text-align: center;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  padding-top: 8px;
  cursor: pointer;
  transition: 0.4s all ease;
}
/* line 73, ../sass/_page3.scss */
.port .port__number .dot:hover, .port .port__number .dot.selected {
  background-color: #e22371;
}
/* line 76, ../sass/_page3.scss */
.port .port__number .dot:hover + .pulse, .port .port__number .dot.selected + .pulse {
  border-color: #e22371;
}
/* line 87, ../sass/_page3.scss */
.port .port__number .pulse {
  position: absolute;
  top: -22px;
  left: -22px;
  z-index: 1;
  opacity: 0;
  height: 70px;
  width: 70px;
  border: 10px solid white;
  background: transparent;
  border-radius: 60px;
}
/* line 99, ../sass/_page3.scss */
.port .port__number .pulse.animation-pulse {
  animation: pulse 2s ease-out;
  animation-iteration-count: infinite;
}

/* line 107, ../sass/_page3.scss */
.port__modal {
  position: absolute;
  top: 74px;
  right: 69px;
  z-index: 10;
  width: 638px;
  height: 833px;
  background: white;
  padding: 30px 30px 60px 60px;
  box-sizing: border-box;
  border-radius: 20px;
  display: none;
  opacity: 0;
  transition: 0.4s all ease;
}
/* line 122, ../sass/_page3.scss */
.port__modal.show {
  display: block;
  opacity: 1;
}
/* line 127, ../sass/_page3.scss */
.port__modal .port__modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  background: url(../img/close-btn.svg) no-repeat;
  background-size: contain;
  cursor: pointer;
}
/* line 139, ../sass/_page3.scss */
.port__modal h1,
.port__modal h2 {
  max-width: 90%;
  color: #8f2054;
  font-size: 40px;
  font-weight: 800;
  text-transform: uppercase;
}
/* line 147, ../sass/_page3.scss */
.port__modal .port__modal__content {
  height: 80%;
  overflow-y: scroll;
  padding-right: 30px;
}
/* line 152, ../sass/_page3.scss */
.port__modal .port__modal__content p {
  font-size: 23px;
  line-height: 36px;
  color: #7F8084;
}
/* line 159, ../sass/_page3.scss */
.port__modal .port__modal__content img,
.port__modal .port__modal__content video {
  width: 100%;
}
/* line 164, ../sass/_page3.scss */
.port__modal .port__modal__pptx {
  width: 100%;
}