/* Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@font-face {
  font-family: "Baloo Bhaijaan";
  font-style: normal;
  src: url("https://fonts.gstatic.com/s/baloobhaijaan/v3/RWmRoKCU5fcqq8fOWNzFLqSjx7EFLGQ.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* End */

body{
  z-index: -1;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
}

.whiteBrand{
  color:  rgba(0, 0, 0, 0.8);
  margin-top: 50px;
  font-size: 50px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  transition: .6s ease;
}

.blackBrand {
  color:  rgba(255, 255, 255, 1.0);
  font-size: 90px;
  padding-top: -100px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  transition: .6s ease;
}

.whiteBrand:hover{
  color:  rgba(0, 0, 0, 0.8);
  cursor: pointer;
      text-shadow: 0px 0px 3px #f5f5f5;
}

a, a:hover , a:focus{
  text-decoration: none;
}

.menu{
    margin: 0px;
    padding: 0px;
    margin-top: 59px;
    cursor: pointer;
    margin-left: 15px;
    z-index: 10;
}

.bar1, .bar2, .bar3{
width: 35px;
height: 5px;
background-color: rgba(0, 0, 0, 0.8);
margin: 6px 0;
transition: .3s all ease;
}

.bar3{
  margin: 0px;
}

.menu-onClick {
  height: 100vh;
  background-position: center center;
  background-size: cover;
	background: rgba(52, 152, 219,1.0);
  margin: 0;
  padding: 0;
  border: 0;
  align-items: center;
  opacity: 1;
}

.logo{
  border-radius: 300px;
  margin-top: 15px;
}

.menu-items{
  list-style: none;
  font-size: 25px;
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

.item{
  display: inline-block;
  margin: 0px;
  padding: 0px;
  margin-left: 30px;
  margin-right: 30px;
  font-size: 40px;
  font-family: Baloo Bhaijaan;
  -webkit-animation-name: slideInLeft;
  animation-name: fadeIn;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  color: white;
  transition: .6s all ease;
}


.item-on{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: rgba(0,0,0,0.3);
  border-radius: 3px;
}

.item:hover{
    text-shadow: 0px 0px 3px #f5f5f5;
    cursor: pointer;
}

.op1{
  opacity: 0;
}

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.4;
  transition: .3s all ease;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}


.menu-onClick h1{
  margin:0px;
  padding: 0px;
  margin: 0px 100px;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.rotbar1{
  width: 35px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 6px 0;
  transition: .3s all ease;
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.rotbar2{
  width: 35px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 6px 0;
  transition: .3s all ease;
  opacity: 0;
}

.rotbar3{
  width: 35px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 6px 0;
  transition: .3s all ease;
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}


@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
    opacity: -8;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;

}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


@keyframes fade {
  0%, 65% {
      opacity: 0;
      transform: translateY(50px);
  }
}


.header {
	height: 50%;
	height: 83vh;
	min-height: 50%;
	min-height: 83vh;
	background: linear-gradient(to bottom right, rgba(206, 214, 224,1.0), rgba(223, 228, 234,1.0));
	width:  100%;
	position: relative;
}

.header::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to bottom right, rgba(206, 214, 224,1.0), rgba(223, 228, 234,1.0));
	z-index: -1;
	bottom: 0;
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	transform-origin: right bottom;
	-moz-transform: skewY(-4.4deg);
	-o-transform: skewY(-4.4deg);
	-ms-transform: skewY(-4.4deg);
	transform: skewY(-4.4deg);
}

.about{
  margin-top: 50px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 300;
}

.whiteBrand:focus , .whiteBrand:enabled , .whiteBrand:disabled ,.whiteBrand:target{
  background: rgba(0,0,0,0.8);
  color: rgba(255,255,255,0.8);
}

.main-features{
  padding-top: 150px;
}


.main-features h1{
  color: white;
  z-index: -1;
  margin-left: -4px;
  font-family: 'Montserrat', sans-serif;
}

.hr{
  max-width: 10px;
  border-radius: 50px;
  background-color: #0984e3;
  max-height: 10px;
  z-index: 1;
  padding: 10px;
}

.featureItem{
  padding: 30px;
  width: 300px;
  border-top: 3px solid #d63031;
  text-align: center;
  justify-content: center;
  margin: 0px;
  margin-top: 40px;
  background: #ecf0f1;
  margin-bottom: 30px;
  -webkit-box-shadow: 1px 5px 20px 4px rgba(0,0,0,0.4);
  box-shadow: 1px 5px 20px 4px rgba(0,0,0,0.4);
  transition: .3s all ease;
  margin-left: 40px;
  margin-right: 40px;
}

.gold{
  background-color: #f39c12;
}

.main-how{
  padding-top: 55px;
}

.main-how h1{
  color: white;
  z-index: -1;
  margin-left: -8px;
  font-family: 'Montserrat', sans-serif;
}

.fa-lightbulb{
  font-size: 120px;
}

.fa-briefcase{
    font-size: 120px;
}

.fa-burn{
  font-size: 120px;
}

.featureHeader h1{
  color: rgba(0,0,0,0.8);
  font-family: "Montserrat", sans-serif;
  padding-top: 15px;
}

.main-how p{
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-family: "Montserrat", sans-serif;
  padding-top: 12px;
  margin: 0px;
}

.fa-bolt{
  color: white;
  font-size: 250px;
  margin-top: 15px;
  margin-left: 80px;
}

.btn-primary{
  width: 180px;
  color: rgba(255,255,255,0.8);
  background: linear-gradient(#8e44ad ,#6c5ce7 );
  border: none;
  text-align: center;
  padding: 0.675rem 0.145rem;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  margin-top: 6px;
}

.btn{
  border-radius: none;
}

.wave{
  width: 100%;
  overflow: hide;
  margin-top: 100px;
}

@-webkit-keyframes hvr-hang {
    0% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
    50% {
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    }
    100% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
  }
  @keyframes hvr-hang {
    0% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
    50% {
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    }
    100% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
  }
  @-webkit-keyframes hvr-hang-sink {
    100% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
  }
  @keyframes hvr-hang-sink {
    100% {
      -webkit-transform: translateY(8px);
      transform: translateY(8px);
    }
  }
  .hvr-hang-mod {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-animation-name: hvr-hang-sink, hvr-hang;
    animation-name: hvr-hang-sink, hvr-hang;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
  }

.main-white{
    background: white;
    margin-top: 2px;
    padding-bottom: 250px;
}

.title h1{
  font-family: "Montserrat", sans-serif;
  margin-top: 100px;
}

.slideTextShow{
  margin-top: 30px;
  font-size: 30px;
      font-family: "Josefin sans", sans-serif;
}

footer{
  margin: 0px;
  padding: 0px;
  padding: 30px;
  background: white;
  color: rgba(0,0,0,0.8);
}

.Copyright ,.Copyright p, .Copyright .fa-copyright{
  margin: 0px;
  padding: 0px;
  font-size: 17px;
  font-weight: 500;
}

.f{
  justify-content: flex-end;
  display: flex;
  align-items: flex-end;
}

.footer-icon1{
  font-size: 30px;
  margin-top: -31px;
}

.fa-phone, .fa-shopping-bag, .fa-discord{
  margin-left: 14px;
  margin-right: 14px;
}

a{
  color: rgba(0,0,0,0.8);
  transition: .6s all ease;
}

a:hover{
  color: rgba(0,0,0,0.7)
}

.item-1,
.item-2,
.item-3 {
    position: absolute;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: rgba(0,0,0,0.8);
    font-size: 25px;
    margin: 0px;
    padding:0px;
	   animation-duration: 30s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    margin-left: 20px;
}

.item-1{
    animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
    animation-name: anim-3;
}

@keyframes anim-1 {
	0%, 8.3% {  opacity: 0; }
  8.3%,25% {  opacity: 1; }
  33.33%, 100% {  opacity: 0; }
}

@keyframes anim-2 {
	0%, 33.33% {  opacity: 0; }
  41.63%, 58.29% { opacity: 1; }
  66.66%, 100% { opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% {opacity: 0; }
  74.96%, 91.62% { opacity: 1; }
  100% {  opacity: 0; }
}

.header-plans{
  width: 100%;
  background: rgba(0,0,0,0.8);
  padding: 5px;
}

@media (max-width:720px) {
  .blackBrand{
    display: none;
  }
  .item{
    display: block;
    margin: 0px;
  }

  .menu-items{
    margin: 0px;
    padding:0px;
    justify-content: center;
    text-align: center;
  }
  .hide{
    display: block;
  }
  .cross-row{
    display: block;
    justify-content: center;
  }
  .header {
  	height: 50%;
  	height: 130vh;
  	min-height: 50%;
  	min-height: 130vh;
  	background: linear-gradient(to bottom right, rgba(206, 214, 224,1.0), rgba(223, 228, 234,1.0));
  	width:  100%;
  	position: relative;
  }


  .header::after {
    content: '';
  	width: 100%;
  	height: 100%;
  	position: absolute;
  	background: linear-gradient(to bottom right, rgba(206, 214, 224,1.0), rgba(223, 228, 234,1.0));
  	z-index: -1;
  	bottom: 0;
  	-webkit-transform-origin: right bottom;
  	-moz-transform-origin: right bottom;
  	-ms-transform-origin: right bottom;
  	-o-transform-origin: right bottom;
  	transform-origin: right bottom;
  	-moz-transform: skewY(-4.4deg);
  	-o-transform: skewY(-4.4deg);
  	-ms-transform: skewY(-4.4deg);
  	transform: skewY(-4.4deg);
  }
  .hr{
    border-radius: 50px;
    background-color: #0984e3;
    z-index: 1;
    padding: 5px 20px 5px 20px;
    margin-bottom: 5px;
  }
  .resizeH1Features{
    justify-content: center;
    display: block;
    text-align: center;
  }
  .wave{
    display: none;
  }
  .fa-bolt{
    display: none;
  }
  .main-white{
    padding-bottom: 260px;
  }
  .item-1,.item-2,.item-3{
    margin-left: -21px;
  }
}