@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

body{
  margin:0;
}

.logo {
    width: 70px;
    left: 15px;
    top: 25px;
    float: left;
    position: fixed;
}
.background {
    width: 100%;
    top: 0;
    left: 0;
background: radial-gradient(circle at top, #000000 , #1c1c1c);
    overflow: hidden;
    padding: 8rem 0;
}

.background span {
    width: 1vmin;
    height: 1vmin;
    border-radius: 1vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 11;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #ff4266;
    top: 26%;
    left: 57%;
    animation-duration: 291s;
    animation-delay: -61s;
    transform-origin: 13vw -7vh;
    box-shadow: -2vmin 0 0.3621180032366964vmin currentColor;
}
.background span:nth-child(1) {
    color: #ff4266;
    top: 72%;
    left: 26%;
    animation-duration: 26s;
    animation-delay: -378s;
    transform-origin: -16vw -16vh;
    box-shadow: -2vmin 0 0.5496445055151711vmin currentColor;
}
.background span:nth-child(2) {
    color: #ffbd31;
    top: 2%;
    left: 54%;
    animation-duration: 362s;
    animation-delay: -21s;
    transform-origin: -17vw -1vh;
    box-shadow: -2vmin 0 0.9601634633031926vmin currentColor;
}
.background span:nth-child(3) {
    color: #9966ff;
    top: 19%;
    left: 12%;
    animation-duration: 381s;
    animation-delay: -377s;
    transform-origin: 12vw -5vh;
    box-shadow: 2vmin 0 0.5217951087707255vmin currentColor;
}
.background span:nth-child(4) {
    color: #3db4fc;
    top: 48%;
    left: 20%;
    animation-duration: 255s;
    animation-delay: -283s;
    transform-origin: 17vw 7vh;
    box-shadow: -2vmin 0 0.762370579939381vmin currentColor;
}
.background span:nth-child(5) {
    color: #9966ff;
    top: 55%;
    left: 22%;
    animation-duration: 122s;
    animation-delay: -325s;
    transform-origin: -16vw 23vh;
    box-shadow: 2vmin 0 0.7572966054831296vmin currentColor;
}
.background span:nth-child(6) {
    color: #ffbd31;
    top: 9%;
    left: 67%;
    animation-duration: 211s;
    animation-delay: -362s;
    transform-origin: 4vw 20vh;
    box-shadow: 2vmin 0 0.6564927240922867vmin currentColor;
}
.background span:nth-child(7) {
    color: #3db4fc;
    top: 44%;
    left: 61%;
    animation-duration: 16s;
    animation-delay: -158s;
    transform-origin: -3vw -13vh;
    box-shadow: -2vmin 0 0.7905143320850114vmin currentColor;
}
.background span:nth-child(8) {
    color: #ff4266;
    top: 84%;
    left: 18%;
    animation-duration: 287s;
    animation-delay: -351s;
    transform-origin: 8vw 15vh;
    box-shadow: -2vmin 0 0.8387907693744039vmin currentColor;
}
.background span:nth-child(9) {
    color: #9966ff;
    top: 51%;
    left: 47%;
    animation-duration: 35s;
    animation-delay: -162s;
    transform-origin: -21vw -12vh;
    box-shadow: -2vmin 0 0.3070347753396798vmin currentColor;
}
.background span:nth-child(10) {
    color: #ff4266;
    top: 95%;
    left: 10%;
    animation-duration: 70s;
    animation-delay: -127s;
    transform-origin: -19vw 16vh;
    box-shadow: 2vmin 0 0.5070037327930585vmin currentColor;
}
.background span:nth-child(11) {
    color: #3db4fc;
    top: 47%;
    left: 47%;
    animation-duration: 246s;
    animation-delay: -133s;
    transform-origin: -3vw 11vh;
    box-shadow: 2vmin 0 0.7701107706578352vmin currentColor;
}
.background span:nth-child(12) {
    color: #ffbd31;
    top: 74%;
    left: 32%;
    animation-duration: 203s;
    animation-delay: -67s;
    transform-origin: 18vw -19vh;
    box-shadow: 2vmin 0 1.1791868367762774vmin currentColor;
}

.menu {
  z-index:999;
  position:fixed;
  top:30%;
  left:35px;
  background:#1f1f1f;
  padding-bottom:30px;
  width:30px;
  border-radius:50px;
  opacity:0.7;
  
}

.dot {
  height: 15px;
  width: 15px;
  margin-top:30px;
  background-color: #bbb;
  border-radius: 50%;
  margin-left:7.5px;
  transition:0.5s;
}

.dot:hover{
  background:#ffbd31;
  transition:0.5s;
}

.label{
  z-index:999;
  position:fixed;
  top:30%;
  left:70px;
  padding-bottom:30px;
  width:30px;
  border-radius:50px;
  opacity:0.7;
}

.menulabel{
  color:white;
  height:15px;
  width:200px;
  margin-top:29px;
  font-family:Poppins;
  margin-left:7.5px;
  transition:0.5s;
}

#home, #whoweare, #whatwedo, #contact{
  opacity:0;
}

#whoweare-back{

background: #010101;
background: -webkit-radial-gradient(center, #010101, #1C1C1C);
background: -moz-radial-gradient(center, #010101, #1C1C1C);
background: radial-gradient(ellipse at center, #010101, #1C1C1C);
    overflow: hidden;

}

#sectionwhat{
/* Created with https://www.css-gradient.com */
/* Created with https://www.css-gradient.com */
background: #010101;
background: -webkit-radial-gradient(center, #010101, #1C1C1C);
background: -moz-radial-gradient(center, #010101, #1C1C1C);
background: radial-gradient(ellipse at center, #010101, #1C1C1C);
    overflow: hidden;
    padding: 8rem 0;
}

.whatwedo{
   padding: 8rem 0;

}

h1{
    color: #d8d8d8;
    font-family: Poppins;
    font-size:  4rem;
    text-align: center;
}

h2{
    color: #d8d8d8;
    font-family: Poppins;
    font-size:  1rem;
    text-align: center;
    font-weight: normal;
}

.heading {

    position: relative;
    top: 100px;
}


.parallax-mouse{
  width: 100%;
  height: 600px;
  display: block;
  position: relative;
  overflow: hidden;
}
.parallax-mouse .parallax-element{
  position: absolute;
}
#square-1 {
    margin-left: 0px;
    width: 100%;
    height: 300px;
}

.container {
  position: relative;
  height: 100vh;
}

.contents {
  top: 0;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  width: 200px;
  height: 40px;
  margin: auto;
}

.btn {
  position: relative;
  width: 200px;
  height: 40px;
  margin: 0 auto;
  top: 10vh;
  line-height: 40px;
  text-align: center;
  font-family: Poppins;
}

.btn p{
    font-size: 40px;
}

.btn::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  width: 1px;
  height: 80px;
  margin: auto;
  background: #fff;
  visibility: hidden;
  opacity: 0;
}

.btn:hover::before {
  animation: sword .5s;
}

@keyframes sword {
  0% {top: -100px; visibility: hidden; opacity: 0;}
  20% {visibility: visible; opacity: 1;}
  100% {top: 100px; visibility: hidden; opacity: 0;}
}

.btn a {
  display: block;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  z-index: 999;
}

.btn a::before,
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 38px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transition: all .5s 0s;
}

.btn a::before {
  left: 0;
  border-left: 1px solid #fff;
}

.btn a::after {
  right: 0;
  border-right: 1px solid #fff;
}

.btn a:hover::before {
  left: -20px;
  transition: all .5s .2s;
  opacity: 0;
}

.btn a:hover::after {
  right: -20px;
  transition: all .5s .2s;
  opacity: 0;
}


.boxwho{
    width: 60%;
    border:  1px solid #d8d8d8;
    padding: 40px;
    margin: auto;
    color: #d8d8d8;
    font-size: 24px;
    font-family: Poppins;
    font-weight: 300;
    text-align: center;
}


.animated-box {
      font-family: Poppins,sans-serif;
    font-size: 12px;
    line-height: 30px;
    font-weight: 300;
    position: relative;
  color: #ffffff;
  padding: 30px;
  text-align: center;
  border-radius: 4px;
box-shadow: -4px 29px 36px 4px rgba(0,0,0,0.75);
-webkit-box-shadow: -4px 29px 36px 4px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 29px 36px 4px rgba(0,0,0,0.75);

}

.animated-box h1 {
  font-weight: 300!important;
  font-size: 40px;
  text-transform: uppercase;
}

.animated-box p {
  font-weight: 300!important;
  font-size: 16px!important;
}

/* The animation starts here */
.animated-box {
  position: relative;
  width: 50%;
  margin: auto;
}

.animated-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(120deg, #f2be00, #e60562, #7f00f2);
  background-size: 300% 300%;
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}

.animated-box.in:after {
  animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}

/* motion */
@keyframes gradient-animation {
  0% {
    background-position: 15% 0%;
  }
  50% {
    background-position: 85% 100%;
  }
  100% {
    background-position: 15% 0%;
  }
}

@keyframes frame-enter {
  0% {
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
  }
}

.whoweare p{
    font-size: 24px;
    letter-spacing: 1px;
}

p{
    font-size: 24px;
    letter-spacing: 1px;
    color: #d8d8d8;
    font-family: Poppins;
}


a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
overflow: hidden;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
 
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
overflow: hidden;
  
}

/* Styles the close link, adds the slide down transition */

a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;overflow: hidden;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
overflow: hidden;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);overflow: hidden;
}

/* Provides part of the "X" to eliminate an image from the close link */

a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);overflow: hidden;
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
  overflow:scroll;
}

.lightbox-target:target img {
max-height: 100%;
max-width: 100%;overflow: hidden;
}

.lightbox-target:target a.lightbox-close {
top: 0;overflow: hidden;
}


.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 70px;
grid-row-gap: 70px;
width: 80%;
margin: auto;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 2; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 4 / 1 / 5 / 2; }
.div8 { grid-area: 4 / 2 / 5 / 3; }


video{
  height: 515;
  width: 80%;
}