*{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}
.banner{
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(0,0,0,0.40),rgba(0,0,0,0.40));
  background-position: center;
  background-size: center;
}
.navbar {
	font-family: Verdana, Geneva, Tahoma, sans-serif ;
	position: fixed;
	width: 90%;
	padding: 5px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
  z-index: 99999;
  }
  
  .logo {
	width: 160px;
	margin-left: 100px;
	margin-top: -10px;
	cursor: pointer;
  }
  
  .navbar ul li {
	list-style: none;
	display: inline-block;
	margin: 20px;
  }
  
  .navbar ul li a {
	text-decoration: none;
	text-transform: uppercase;
	color: white;
	font-weight: 600;
	padding: 15px;
  }
  
  li a:hover {
	background: white;
	transition: 0.5s;
  }
  
  .navbar a:hover {
	color: black;
  }
  
  .content {
	width: 100%;
	position: absolute;
	color: white;
	top: 45%;
	transform: translateY(-50%);
	text-align: center;
  }
  
  .content h1 {
	margin-top: 80px;
	font-size: 90px;
	font-weight: 800;
  }
  
  h1 {
	color: #000000;
	position: left;
	left: 50px;
  }

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
body{
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1.7;
	color: #ffffff;
	background-image: linear-gradient(90deg, #343434 5%, #000000 100%);
}
a:hover {
	text-decoration: none;
}
.link {
  color: #ffffff;
}
.link:hover {
  color: #c4c3ca;
}
p {
  font-weight: 500;
  font-size: 14px;
}
h4 {
  font-weight: 600;
}
h6 span{
  padding: 0 20px;
  font-weight: 700;
}
.section{
  position: relative;
  width: 100%;
  display: block;
}
.full-height{
  min-height: 100vh;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
display: none;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
  position: relative;
  display: block;
  text-align: center;
  width: 60px;
  height: 16px;
  border-radius: 8px;
  padding: 0;
  margin: 10px auto;
  cursor: pointer;
  background-color: #ffffff;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before{
  position: absolute;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #ffffff;
  background-color: #020305;
  font-family: 'unicons';
  content: '\eb4f';
  z-index: 20;
  top: -10px;
  left: -10px;
  line-height: 36px;
  text-align: center;
  font-size: 24px;
  transition: all 0.5s ease;
}
.checkbox:checked + label:before {
  transform: translateX(44px) rotate(-270deg);
}
.card-3d-wrap {
  position: relative;
  width: 440px;
  max-width: 100%;
  height: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 800px;
  margin-top: 60px;
}
.card-3d-wrapper {
  width: 100%;
  height: 100%;
  position:absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 600ms ease-out; 
}
.card-front, .card-back {
  width: 100%;
  height: 100%;
  background-color: #2b2e38;
  background-image: url('/img/pattern_japanese-pattern-2_1_2_0-0_0_1__ffffff00_000000.png');
  position: absolute;
  border-radius: 6px;
  -webkit-transform-style: preserve-3d;
}
.card-back {
  transform: rotateY(180deg);
}
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
  transform: rotateY(180deg);
}
.center-wrap{
  position: absolute;
  width: 100%;
  padding: 0 35px;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 35px) perspective(100px);
  z-index: 20;
  display: block;
}
.form-group{ 
  position: relative;
  display: block;
    margin: 0;
    padding: 0;
}
.form-style {
  padding: 13px 20px;
  padding-left: 55px;
  height: 48px;
  width: 100%;
  font-weight: 500;
  border-radius: 4px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.5px;
  outline: none;
  color: #c4c3ca;
  background-color: #1f2029;
  border: none;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.form-style:focus,
.form-style:active {
  border: none;
  outline: none;
  box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);
}
.input-icon {
  position: absolute;
  top: 0;
  left: 18px;
  height: 48px;
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  -webkit-transition: all 200ms linear;
   transition: all 200ms linear;
}
.btn{  
  border-radius: 4px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition : all 200ms linear;
  transition: all 200ms linear;
  padding: 0 30px;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  color: #000000;
}
.btn:hover{  
  background-color: #000000;
  color: #ffffff;
  box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);
}
.logo2{
  height:150px;
  width: 480px;
  cursor: pointer;
  margin-top: 350px;
  margin-right: 900px;
  }

  /*navbar*/
  

html {
	font-size: 10px;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
}
a {
	text-decoration: none;
}
.container {
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
img {
	height: 100%;
	width: 100%;
	object-fit:content;
}

p {
	color: black;
	font-size: 1.4rem;
	margin-top: 5px;
	line-height: 2.5rem;
	font-weight: 300;
	letter-spacing: 0.05rem;
}
.section-title {
	font-size: 4rem;
	font-weight: 300;
	color: black;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	text-align: center;
}
.section-title span {
	color: crimson;
}

.cta {
	display: inline-block;
	padding: 10px 30px;
	color: white;
	background-color: transparent;
	border: 2px solid crimson;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	margin-top: 30px;
	transition: 0.3s ease;
	transition-property: background-color, color;
}
.cta:hover {
	color: white;
	background-color: crimson;
}

  /*end navbar*/
  /* Logo */
  .logo-size {
    height: 8%;
    width: 11%;
  }
/*end logo*/
html, body, footer{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  }
  html {
    font-size: 10px;
    scroll-behavior: smooth;
    }
    
    a {
    text-decoration: none;
    }
    header {
    background-image: linear-gradient(90deg, #000000 , #000000 );
    }
    .background {
      width: 100vw;
      height: 100vh;
      min-height: 350px;
      margin: 0;
      position: relative;
      background-color: #111;
      background-image: linear-gradient(to top, #222 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #222, #2e2e2e 5%, transparent 5%), linear-gradient(to right, transparent 6%, #222 6%, #2e2e2e 9%, transparent 9%), linear-gradient(to right, transparent 27%, #222 27%, #2e2e2e 34%, transparent 34%), linear-gradient(to right, transparent 51%, #222 51%, #2e2e2e 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #222 42%, #2e2e2e 44%, transparent 44%), linear-gradient(to right, transparent 45%, #222 45%, #2e2e2e 47%, transparent 47%), linear-gradient(to right, transparent 48%, #222 48%, #2e2e2e 50%, transparent 50%), linear-gradient(to right, transparent 87%, #222 87%, #2e2e2e 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #222 14%, #2e2e2e 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #222 10%, #2e2e2e 13%, transparent 13%), linear-gradient(to right, transparent 21%, #222 21%, #1a1a1a 25%, transparent 25%), linear-gradient(to right, transparent 58%, #222 58%, #2e2e2e 64%, transparent 64%), linear-gradient(to right, transparent 92%, #222 92%, #2e2e2e 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #222 96%, #1a1a1a 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #222 35%, #2e2e2e 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #333 78%, #333 80%, transparent 80%, transparent 82%, #333 82%, #333 83%, transparent 83%), linear-gradient(to right, transparent 66%, #222 66%, #2e2e2e 85%, transparent 85%);
      background-size: 300px 150px;
      background-position: center bottom;
  }
  .background:before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #111;
      background-image: linear-gradient(to top, #d2b48c 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #b22222, #871a1a 5%, transparent 5%), linear-gradient(to right, transparent 6%, #ff6347 6%, #ff3814 9%, transparent 9%), linear-gradient(to right, transparent 27%, #556b2f 27%, #39481f 34%, transparent 34%), linear-gradient(to right, transparent 51%, #fa8072 51%, #f85441 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #008080 42%, #004d4d 44%, transparent 44%), linear-gradient(to right, transparent 45%, #008080 45%, #004d4d 47%, transparent 47%), linear-gradient(to right, transparent 48%, #008080 48%, #004d4d 50%, transparent 50%), linear-gradient(to right, transparent 87%, #789 87%, #4f5d6a 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #bdb76b 14%, #989244 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #808000 10%, #4d4d00 13%, transparent 13%), linear-gradient(to right, transparent 21%, #8b4513 21%, #5e2f0d 25%, transparent 25%), linear-gradient(to right, transparent 58%, #8b4513 58%, #5e2f0d 64%, transparent 64%), linear-gradient(to right, transparent 92%, #2f4f4f 92%, #1c2f2f 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #2f4f4f 96%, #1c2f2f 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #cd5c5c 35%, #bc3a3a 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #bc8f8f 78%, #bc8f8f 80%, transparent 80%, transparent 82%, #bc8f8f 82%, #bc8f8f 83%, transparent 83%), linear-gradient(to right, transparent 66%, #a52a2a 66%, #7c2020 85%, transparent 85%);
      background-size: 300px 150px;
      background-position: center bottom;
      clip-path: circle(150px at center center);
      animation: flashlight 5000ms infinite;
  }
  .background:after {
      content: '';
      width: 25px;
      height: 10px;
      position: absolute;
      left: calc(50% + 59px);
      bottom: 100px;
      background-repeat: no-repeat;
      background-image: radial-gradient(circle, #fff 50%, transparent 50%), radial-gradient(circle, #fff 50%, transparent 50%);
      background-size: 10px 10px;
      background-position: left center, right center;
      animation: eyes 5000ms infinite;
  }
   @-moz-keyframes flashlight {
      0%, 9% {
         opacity: 0;
         clip-path: circle(150px at 45% 10%);
     }
      10%, 15%, 85% {
         opacity: 1;
     }
      50% {
         clip-path: circle(150px at 60% 20%);
     }
      54%, 100% {
         clip-path: circle(150px at 55% 92%);
     }
      88%, 100% {
         opacity: 0;
     }
  }
   @-webkit-keyframes flashlight {
      0%, 9% {
         opacity: 0;
         clip-path: circle(150px at 45% 10%);
     }
      10%, 15%, 85% {
         opacity: 1;
     }
      50% {
         clip-path: circle(150px at 60% 20%);
     }
      54%, 100% {
         clip-path: circle(150px at 55% 92%);
     }
      88%, 100% {
         opacity: 0;
     }
  }
   @-o-keyframes flashlight {
      0%, 9% {
         opacity: 0;
         clip-path: circle(150px at 45% 10%);
     }
      10%, 15%, 85% {
         opacity: 1;
     }
      50% {
         clip-path: circle(150px at 60% 20%);
     }
      54%, 100% {
         clip-path: circle(150px at 55% 92%);
     }
      88%, 100% {
         opacity: 0;
     }
  }
   @keyframes flashlight {
      0%, 9% {
         opacity: 0;
         clip-path: circle(150px at 45% 10%);
     }
      10%, 15%, 85% {
         opacity: 1;
     }
      50% {
         clip-path: circle(150px at 60% 20%);
     }
      54%, 100% {
         clip-path: circle(150px at 55% 92%);
     }
      88%, 100% {
         opacity: 0;
     }
  }
   @-moz-keyframes eyes {
      0%, 52% {
         opacity: 0;
     }
      53%, 87% {
         opacity: 1;
     }
      64% {
         transform: scaleY(1);
     }
      67% {
         transform: scaleY(0);
     }
      70% {
         transform: scaleY(1);
     }
      88%, 100% {
         opacity: 0;
     }
  }
   @-webkit-keyframes eyes {
      0%, 52% {
         opacity: 0;
     }
      53%, 87% {
         opacity: 1;
     }
      64% {
         transform: scaleY(1);
     }
      67% {
         transform: scaleY(0);
     }
      70% {
         transform: scaleY(1);
     }
      88%, 100% {
         opacity: 0;
     }
  }
   @-o-keyframes eyes {
      0%, 52% {
         opacity: 0;
     }
      53%, 87% {
         opacity: 1;
     }
      64% {
         transform: scaleY(1);
     }
      67% {
         transform: scaleY(0);
     }
      70% {
         transform: scaleY(1);
     }
      88%, 100% {
         opacity: 0;
     }
  }
   @keyframes eyes {
      0%, 52% {
         opacity: 0;
     }
      53%, 87% {
         opacity: 1;
     }
      64% {
         transform: scaleY(1);
     }
      67% {
         transform: scaleY(0);
     }
      70% {
         transform: scaleY(1);
     }
      88%, 100% {
         opacity: 0;
     }
  }