:root {
  --primary-color: #4fd9d9;
  --priamry-dark: #299EA1; 
  --white: #ffffff;
  --dark: #161B3B;
  --bg-light: #fafafa;
  --bg-dark: #232323;
  --bg-default: #161B3B;
  --path: rgba(255, 255, 255, 0.50);
}
/* 
::-webkit-scrollbar{width:2px;height:2px;}
::-webkit-scrollbar-button{width:2px;height:2px;} */



p{
  text-align: justify;
}

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

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

.star-background{
  background-color: var(--bg-default);
  background-image: url("../images/stars.png");
  background-size: cover;
  /* background-repeat: repeat; */
}

body {
  margin: 0;
  padding: 0;
}

.jh-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 3.2em;
}

.h-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 2em;
  line-height: 1.3em;
}

.sh-font{
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
  font-size: 1.4em;
  line-height: .8em;
}

.sm-font{
  font-size: 0.875em;
}

.alert{
  margin-left: auto !important;
  margin-right: auto !important;
}

.hide-alert{
  display: none;
}

/* custom grid */
/* .main-container{
  padding: 20vh 10vw 0vh 10vw;
  width: 82%
}

.c-1{
  width: 8.33%;
}

.c-2{
  width: 16.66%;
}

.c-3{
  width: 25%;
}

.c-4{
  width: 33.32%;
}

.c-5{
  width: 41.65%;
}

.c-6{
  width: 50%;
}

.c-7{
  width: 58.33%;
}

.c-8{
  width: 66.66%;
}

.c-9{
  width: 75%;
}

.c-10{
  width: 83.33%;
}

.c-11{
  width: 91.66%;
}

.c-12{
  width: 100%;
} */

/* custome grid end */

/* Flight Animation */

.flight-animate{
  overflow: -moz-hidden-unscrollable;
  overflow: hidden;
}

#source-planet {
  position: relative;
  transform: translate(16px, 0px);
  width: 64px;
  height: 64px;
  -webkit-animation-name: planet-exit; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: planet-exit;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

#m-source-planet {
  position: relative;
  transform: translate(16px, 0px);
  width: 64px;
  height: 64px;
  -webkit-animation-name: planet-exit; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: planet-exit;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes planet-exit {
  0%   {left:16px;display:block;}
  10%   {left:16px;}
  20%  {left:-500px;}
  21%  {left:-500px; display: none;}
  100% {left:-500px;}
}

/* Standard syntax */
@keyframes planet-exit {
  0%   {left:16px; display: block;}
  10%  {left:16px;}
  20%  {left: -500px;}
  21%  {left:-500px; display: none;}
  100% {left:-500px;}
}

#spaceship-departure {
  position: relative;
  transform: translate(24px, 0px);
  height: 16px;
  -webkit-animation-name: spaceship-departure; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: spaceship-departure;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

#m-spaceship-departure {
  position: relative;
  transform: translate(24px, 0px);
  height: 16px;
  -webkit-animation-name: spaceship-departure; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: spaceship-departure;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes spaceship-departure {
  0%   {left:20px;display:block;}
  15%  {left:20px;}
  20%  {left:100%;}
  25%  {left:100%;display:none;}
  100% {left:100%;}
}

/* Standard syntax */
@keyframes spaceship-departure {
  0%   {left:20px;display:block;}
  15%  {left:20px;}
  20%  {left:100%;}
  25%  {left:100%;display:none;}
  100% {left:100%;}
}

#wormhole-entrance {
  position: relative;
  transform: translate(16px, 0px);
  float: right;
  height: 72px;
  -webkit-animation-name: wormhole-entrance; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: wormhole-entrance;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

#m-wormhole-entrance {
  position: relative;
  transform: translate(16px, 0px);
  float: right;
  height: 72px;
  -webkit-animation-name: wormhole-entrance; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: wormhole-entrance;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes wormhole-entrance {
  0%   {right:0px;display:block;}
  10%  {right:0px;}
  20%  {right:14px;}
  30%  {right:14px;}
  40%  {right:0px;}
  41%  {right:0px;display:none;}
  100% {right:0px;}
}

/* Standard syntax */
@keyframes wormhole-entrance {
  0%   {right:0px;display:block;}
  10%  {right:0px;}
  20%  {right:14px;}
  30%  {right:14px;}
  40%  {right:0px;}
  41%  {right:0px;display:none;}
  100% {right:0px;}
}

#wormhole-exit {
  position: relative;
  transform: translate(-16px, 0px);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  float: left;
  height: 72px;
  -webkit-animation-name: wormhole-exit; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: wormhole-exit;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

#m-wormhole-exit {
  position: relative;
  transform: translate(-16px, 0px);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  float: left;
  height: 72px;
  -webkit-animation-name: wormhole-exit; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: wormhole-exit;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes wormhole-exit {
  0%   {left:-16px;display:none;}
  42%  {left:-16px;display:block;}
  50%  {left:0px;}
  70%  {left:0px;}
  80%  {left:-16px;}
  100% {left:-16px;display:none;}
}

/* Standard syntax */
@keyframes wormhole-exit {
  0%   {left:-16px;display:none;}
  42%  {left:-16px;display:block;}
  50%  {left:0px;}
  70%  {left:0px;}
  80%  {left:-16px;}
  100% {left:-16px;display:none;}
}

#spaceship-arrival {
  position: relative;
  transform: translate(0px, 25px);
  height: 16px;
  float: right;
  -webkit-animation-name: spaceship-arrival; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: spaceship-arrival;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

#m-spaceship-arrival {
  position: relative;
  transform: translate(0px, 25px);
  height: 16px;
  float: right;
  -webkit-animation-name: spaceship-arrival; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: spaceship-arrival;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes spaceship-arrival {
  0%   {right:100vw;display:none;}
  50%  {right:100vw;display:block;}
  60%  {right:0px;}
  80%  {right:0px;}
  100% {right:-300px;display:none;}
}

/* Standard syntax */
@keyframes spaceship-arrival {
  0%   {right:100vw;display:none;}
  50%  {right:100vw;display:block;}
  60%  {right:0px;}
  80%  {right:0px;}
  100% {right:-300px;display:none;}
}

#destination-planet {
  position: relative;
  transform: translate(155px, 0px);
  height: 64px;
  float: right;
  /* height: 16px; */
  -webkit-animation-name: destination-planet; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: destination-planet;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

#m-destination-planet {
  position: relative;
  transform: translate(155px, 0px);
  height: 64px;
  float: right;
  /* height: 16px; */
  -webkit-animation-name: destination-planet; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: destination-planet;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes destination-planet {
  0%   {right:0px;display:block;}
  50%   {right:0px;}
  60% {right:155px;}
  80% {right:155px;}
  100% {right:0px;display:none;}
}

/* Standard syntax */
@keyframes destination-planet {
  0%   {right:0px;display:block;}
  50%   {right:0px;}
  60% {right:155px;}
  80% {right:155px;}
  100% {right:-200px;display:none;}
}

.space-out{
  margin-top: 3rem;
}

.m-space-out{
  margin-top: -3rem;
}

/* Flight Animation End */

.wrapper {
  display: flex;
  flex-direction: row;
  width: 600vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.slide {
  width: 100vw;
  height: 100vh;
}

.m-nav-bg{
  background-color: #101010;
}

.one {
  background-size: auto 100vh;
  background: transparent linear-gradient(90deg, #B8A3E466 0%, #9383B466 8%, #23232300 50%, #23232300 100%) 0% 0% no-repeat padding-box;
}

.two {
  background-size: auto 100vh;
  background: linear-gradient(90deg, #161B3B66 0%, #171C3966 10%, #22222566 35%, #232323ff 100%) 0% 0% no-repeat padding-box;
}

.three {
  background-size: cover;
  background-color: rgba(11, 14, 33, 1);
  background-image: url("../images/wormhole_bg.gif");
  background-repeat: no-repeat;
  background-position: center;
}

.m-three{
  background-color: rgba(11, 14, 33, 1);
  margin: 100px 0 0 0;
}

/* .four {
  background-size: auto 100vh;
  background: linear-gradient(270deg, #161B3B66 0%, #171C3966 10%, #22222566 35%, #232323ff 100%) 0% 0% no-repeat padding-box;
} */

.four {
  background-size: auto 100vh;
  background: transparent linear-gradient(270deg, #3EB2B566 0%, #3EB2B566 8%, #23232300 100%) 0% 0% no-repeat padding-box;
}

.m-five{
  background-color: #3EB2B5;
}

.five {
  /* background-size: auto 100vh; */
  background-color: #3EB2B5;
  height: 100vh;
}

.m-footer{
  background-color: #2B9C9F;
  font-weight: 700;
}

/* 
.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
} */


#more1{
  display: none;
}

#more2{
  display: none;
}

#more3{
  display: none;
}

#more4{
  display: none;
}

#more5{
  display: none;
}

.show-hide-btn{
  font-size: .875em;
}

.show-hide-btn:hover{

}

.desc{
  max-height: 120px;
}

.spaceship{
  height: 20px;
  width: 120px;
  z-index: 990;
  position: relative;
  left: 10%;
}

.wormhole-left{
  float: left;
  margin-top: -58px;
  margin-left: -18px;
}

.wormhole-right{
  float: right;
  margin-top: -58px;
  margin-right: -18px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.wormhole-start{
  margin-top: -100px;
  width: 100%;
}

.wormhole-end{
  margin-bottom: -100px;
  width: 100%;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.wormhole-container{
  margin: 64px 0;
}

.activated{
  color: var(--primary-color) !important;
}

.activated2{
  color: var(--dark) !important;
}

/* .nav-active{
  color: var(--primary-color) !important;
} */

.nav-inactive{
  color: var(--white);
  font-weight: 700;
}

.navigation{
  text-align: center;
  font-weight: 800;
  margin-top: -5px;
}

/* .nav-item a{
  color: var(--white) !important;
} */

/* .nav-item:hover{
  color: var(--primary-color) !important;
} */

.navigation-link:hover{
  text-decoration: none;
}

.navigation-link span{
  color: var(--white);
  font-family: 'Fira Sans', sans-serif;
}

.navigation-link span:hover{
  color: var(--primary-color);
  text-decoration: none;
}

.ship-path{
  border-top: 1px dashed var(--path);
}

.m-section-spacing{
  padding-top: 100px;
}

.vertical-center{
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.initial-planet{
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
}

.m-initial-planet{
  margin-top: -30px;
}

.destination-planet{
  position: absolute;
  right: 0;
  top: 0;
  height: 100vh;
}

.highlight{
  color: var(--primary-color);
  font-weight: 800;
}

.dark-font{
  color: var(--dark);
}

.section-shadow{
  box-shadow: 0px 1px 6px rgba(0, 0, 0, .25);
}

.profile-pic{
  /* background-size: cover; */
  background-color: #2D175A;
  /* height: 250px; */
  background-position: center;
  border-radius: 10px;
}

.designation{
  font-size: .75em;
}

::placeholder {
  color: var(--white) !important;
  opacity: 0.5 !important; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: var(--white) !important;
 opacity: 0.5 !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: var(--white) !important;
 opacity: 0.25 !important;
}

.sub-header{
  font-size: 1.4em;
  font-weight: 800;
}

.form-bg{
  border: 2px solid var(--primary-color);
  border-radius: 25px;
  background-color: var(--bg-default);
  width: 100%;
}

.form-group label{
  color: var(--primary-color);
  font-size: .85em;
  font-weight: 800;
}

.input-btn{
  color: var(--dark);
  background-color: var(--primary-color);
  border-radius: 5px;
  width: 100%;
  font-weight: 800;
  font-size: 0.875em;
}

.input-btn:hover{
  color: var(--dark);
  background-color: var(--priamry-dark);
  font-weight: 800;
  font-size: 0.875em;
}

.input{
  border: 2px solid var(--primary-color);
  background-color: var(--bg-default);
  border-radius: 5px;
  color: var(--white) !important;
}

.input:focus{
  border: 1px solid var(--primary-color);
  background-color: var(--bg-default);
}

.dark-blur-bg{
  background-color: #0B0E21;
  opacity: .9;
  padding: 2em;
}

.dark-bg{
  background-color: #0B0E21;
}

::-webkit-scrollbar {
  display:none;
}

/*
Extra small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap
*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 100px) {
  
  #vertical{
    display: block;
    overflow: auto;
  }

  #horizontal{
    display: none;
  }

  .star-background{
    background-size: contain;
    background-attachment: fixed;
  }

  .wormhole-start{
    margin-top: -50px;
  }

  .wormhole-end{
    margin-bottom: -50px;
  }

  .m-initial-planet{
    margin-top: -90px;
  }

  .jh-font{
    font-size: 2em;
  }

  .h-font{
    font-size: 1.6em;
  }

  .form-bg{
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    background-color: var(--bg-default);
    width: 100%;
  }
  
  ::-webkit-scrollbar {
    display:block;
  }

}

@media (min-width: 330px) {
  
  .m-initial-planet{
    margin-top: -40px;
  }

}

@media (min-width: 576px) {
  
  #vertical{
    display: block;
    overflow: auto;
  }

  #horizontal{
    display: none;
  }

  .star-background{
    background-size: contain;
    background-attachment: fixed;
  }

  .wormhole-start{
    margin-top: -70px;
  }

  .wormhole-end{
    margin-bottom: -70px;
  }

  .m-initial-planet{
    margin-top: -40px;
  }

  .jh-font{
    font-size: 2em;
  }

  .h-font{
    font-size: 1.6em;
  }

  .form-bg{
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    background-color: var(--bg-default);
    width: 100%;
  }
  
  ::-webkit-scrollbar {
    display:block;
  }


}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  
  #vertical{
    display: block;
    overflow: auto;
  }

  #horizontal{
    display: none;
  }

  .star-background{
    background-size: contain;
    background-attachment: fixed;
  }

  .wormhole-start{
    margin-top: -90px;
  }

  .wormhole-end{
    margin-bottom: -90px;
  }

  .m-initial-planet{
    margin-top: -70px;
  }

  .jh-font{
    font-size: 2em;
  }

  .h-font{
    font-size: 1.6em;
  }

  .form-bg{
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    background-color: var(--bg-default);
    width: 100%;
  }
  
  ::-webkit-scrollbar {
    display:block;
  }


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  #vertical{
    display: block;
    overflow: auto;
  }

  #horizontal{
    display: none;
  }

  .star-background{
    background-size: contain;
    background-attachment: fixed;
  }

  .wormhole-start{
    margin-top: -120px;
  }

  .wormhole-end{
    margin-bottom: -120px;
  }

  .m-initial-planet{
    margin-top: -150px;
  }

  .jh-font{
    font-size: 2em;
  }

  .h-font{
    font-size: 1.6em;
  }

  .form-bg{
    border: 2px solid var(--primary-color);
    border-radius: 16px;
    background-color: var(--bg-default);
    width: 100%;
  }
  
  ::-webkit-scrollbar {
    display:block;
  }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  #vertical{
    display: none;
  }

  #horizontal{
    display: block;
  }

  .jh-font{
    font-size: 3.2em;
  }

  .h-font{
    font-size: 2em;
  }
    
  .alert{
    position: absolute !important;
    bottom: 30px;
    left: 30px;
    z-index: 999;
  }

}