* {
  box-sizing: border-box;
  margin-top: 0%;
}
:root {
 background-color:  rgba(6, 9, 11, 06);
  --min-size: 200px;
}
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  background-size: cover;
 
 
}

/* -----------------------------------overlay---------------------------- */

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0a2e36;
    top: 0%;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Work Sans', sans-serif;
    padding-top: 20%;
  }
  
  .overlay h1 {
    font-size: 60px;
       margin-top: 20%;
        -webkit-text-stroke: .1px black; 
   
  }
  
  .overlay span {
    font-size: 40px;
    letter-spacing: 1px;
    font-weight: 600;
    margin-top: -10px;
     
  }

  .logo-img {
    width: 70px;
    height: 70px;
    padding: 10px;

  
  }
  
  .logo-img1 {
    width: 120px;
    height: 120px;
    padding: 10px;
  margin-bottom: -20%;
  align-items: center;
   
  
  }

  .logo ul{
   
   padding: 0%;
  }
  
  
  .logo {
  
    position: fixed;
    display: flex;
    flex-direction: row;
    left: 0;
    top: 0;
  text-decoration: none;
    height: 100px;
    width: 100%;
    font-family: 'Lexend Deca', sans-serif;
    padding: 10px;
  animation-delay: 5s;
    z-index: 10;
    background-color: rgba(3, 35, 53, 0.8);
    border-bottom: rgb(252, 148, 56) 2px solid;
    
  
  }
  
  .logo li {
    list-style: none;
    display: flex;
    flex-direction:row;
    color: #5E8D7F;
    padding-left: 10px;
    
  
  }
  
  
  .logo h1 {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 25px;
   padding: 0;
   margin: 0;
   margin-bottom: -10px;
   text-shadow:
   -.03em -.03em .03em #080706,
   .03em .03em .02em white;
  }
  
  .logo h2 {
    font-size: 22px;
    padding-top: -110;
    padding: 0%;
    font-family: 'Archivo Narrow', sans-serif;
    color: rgb(252, 148, 56);
    text-shadow:
    -.03em -.03em .03em #080706,
    .03em .03em .02em white;
    
    
  
  }
  

  /* ---------------------------end overlay---------------- */
.drag-proxy {
  visibility: hidden;
  position: absolute;
}
.controls {
  position: absolute;
  top: calc(50% + clamp(var(--min-size), 20vmin, 20vmin));
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  display: flex;
  justify-content: space-between;
  min-width: var(--min-size);
  height: 44px;
  width: 20vmin;
  z-index: 300;
}
button {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: absolute;
  top: 0%;
  outline: transparent;
  cursor: pointer;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  transition: transform 0.1s;
  transform: translate(0, calc(var(--y, 0)));
}
button:before {
  border: 2px solid rgb(252, 148, 56);
  background: linear-gradient(rgba(7, 49, 28, 0.65), rgb(0, 0, 0)) #000;
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
button:active:before {
  background: linear-gradient(#000, rgba(204,204,204,0.65)) #000;
}
button:nth-of-type(1) {
  right: 100%;
}
button:nth-of-type(2) {
  left: 100%;
}
button span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
button:hover {
  --y: -5%;
}
button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) translate(2%, 0);
  height: 30%;
  fill: #e6e6e6;
}
button:nth-of-type(1) svg {
  transform: translate(-50%, -50%) rotate(180deg) translate(2%, 0);
}
.scroll-icon {
  height: 30px;
  position: fixed;
  top: 1rem;
  right: 1rem;
  color: #e6e6e6;
  -webkit-animation: action 4s infinite;
          animation: action 4s infinite;
}
.boxes {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: absolute;
  transform-style: preserve-3d;
  perspective: 800px;
  touch-action: none;
}
.box {
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 35vmin;
  width:35vmin;
  min-height: var(--min-size);
  min-width: var(--min-size);
  display: none;
  margin-top:-50px ;
}
.box:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background-image: var(--src);
  background-size: cover;
  transform: translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin);
  opacity: 0.75;
}
.box:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background: linear-gradient(var(--bg) 50%, transparent);
  transform: translate(-50%, -50%) rotate(180deg) translate(0, -100%) translate(0, -0.5vmin) scale(1.01);
  z-index: 2;
}
.box img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

@supports (-webkit-box-reflect: below) {
  .box {
    -webkit-box-reflect: below 0.5vmin linear-gradient(transparent 0 50%, #fff 100%);
  }
  .box:after,
  .box:before {
    display: none;
  }
}
@-webkit-keyframes action {
  0%, 25%, 50%, 100% {
    transform: translate(0, 0);
  }
  12.5%, 37.5% {
    transform: translate(0, 25%);
  }
}
@keyframes action {
  0%, 25%, 50%, 100% {
    transform: translate(0, 0);
  }
  12.5%, 37.5% {
    transform: translate(0, 25%);
  }
}
span{
  color: white;
  font-size: 25px;
  text-align: center;
  margin: auto;
  padding-left: 44px;
}



/* AOS------------------------- */


.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
.div{
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
  height: 300px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
     color: white;
  margin: 100px 0;
  border-radius: 7px;
}


li{
  list-style: none;
  font-size: 15px;
  padding: 0%;
  margin-left: -10px;
}
i{
padding: 0px;
}


#contact{
  position: fixed;
  width: 100%;
 bottom: 0;
 height: 100px;
 float: right;
 padding: 10px;
 display: flex;
 flex-direction: row;
 align-items: center;
 text-align: center;
 padding: 10px;
 padding-top: 20px;
 
 

}


/* ---------------bubble------------ */
.canvas {
height: 100vh;
width: 100vw;
background: linear-gradient(to bottom, #043b20 0%, #010429 100%);
position: relative;
overflow: hidden;
z-index: -100;
position: fixed;
}
.bubble {
display: block;
border-radius: 100%;
opacity: 0.8;
position: absolute;
}
.bubble:nth-child(1) {
background: radial-gradient(ellipse at center, #256161 0%, #195d6e 46%, #061118 100%);
width: 10px;
height: 10px;
left: 98vw;
bottom: 19vh;
-webkit-animation: move1 infinite 7s;
        animation: move1 infinite 7s;
}
@-webkit-keyframes move1 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(126px, 0);
  opacity: 0;
}
}
@keyframes move1 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(126px, 0);
  opacity: 0;
}
}
.bubble:nth-child(2) {
background: radial-gradient(ellipse at top right, #0a0c0c 0%, #123942 46%, #082333 100%);
width: 33px;
height: 33px;
left: 89vw;
bottom: 66vh;
-webkit-animation: move2 infinite 6s;
        animation: move2 infinite 6s;
}
@-webkit-keyframes move2 {
0% {
  bottom: -100px;
}
100% {
  bottom: 97vh;
  transform: translate(-64px, 0);
  opacity: 0;
}
}
@keyframes move2 {
0% {
  bottom: -100px;
}
100% {
  bottom: 97vh;
  transform: translate(-64px, 0);
  opacity: 0;
}
}
.bubble:nth-child(3) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 18px;
height: 18px;
left: 56vw;
bottom: 46vh;
-webkit-animation: move3 infinite 9s;
        animation: move3 infinite 9s;
}
@-webkit-keyframes move3 {
0% {
  bottom: -100px;
}
100% {
  bottom: 37vh;
  transform: translate(167px, 0);
  opacity: 0;
}
}
@keyframes move3 {
0% {
  bottom: -100px;
}
100% {
  bottom: 37vh;
  transform: translate(167px, 0);
  opacity: 0;
}
}
.bubble:nth-child(4) {
background: radial-gradient(ellipse at top right, #1c3838 0%, #0f3741 46%, #08141b 100%);
width: 26px;
height: 26px;
left: 87vw;
bottom: 28vh;
-webkit-animation: move4 infinite 10s;
        animation: move4 infinite 10s;
}
@-webkit-keyframes move4 {
0% {
  bottom: -100px;
}
100% {
  bottom: 6vh;
  transform: translate(165px, 0);
  opacity: 0;
}
}
@keyframes move4 {
0% {
  bottom: -100px;
}
100% {
  bottom: 6vh;
  transform: translate(165px, 0);
  opacity: 0;
}
}
.bubble:nth-child(5) {
background: radial-gradient(ellipse at center, #3d4949 0%, #122f36 46%, #063350 100%);
width: 13px;
height: 13px;
left: 36vw;
bottom: 3vh;
-webkit-animation: move5 infinite 5s;
        animation: move5 infinite 5s;
}
@-webkit-keyframes move5 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(9px, 0);
  opacity: 0;
}
}
@keyframes move5 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(9px, 0);
  opacity: 0;
}
}
.bubble:nth-child(6) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 5px;
height: 5px;
left: 50vw;
bottom: 79vh;
-webkit-animation: move6 infinite 14s;
        animation: move6 infinite 14s;
}
@-webkit-keyframes move6 {
0% {
  bottom: -100px;
}
100% {
  bottom: 46vh;
  transform: translate(192px, 0);
  opacity: 0;
}
}
@keyframes move6 {
0% {
  bottom: -100px;
}
100% {
  bottom: 46vh;
  transform: translate(192px, 0);
  opacity: 0;
}
}
.bubble:nth-child(7) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 26px;
height: 26px;
left: 30vw;
bottom: 34vh;
-webkit-animation: move7 infinite 10s;
        animation: move7 infinite 10s;
}
@-webkit-keyframes move7 {
0% {
  bottom: -100px;
}
100% {
  bottom: 68vh;
  transform: translate(8px, 0);
  opacity: 0;
}
}
@keyframes move7 {
0% {
  bottom: -100px;
}
100% {
  bottom: 68vh;
  transform: translate(8px, 0);
  opacity: 0;
}
}
.bubble:nth-child(8) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 15px;
height: 15px;
left: 97vw;
bottom: 64vh;
-webkit-animation: move8 infinite 9s;
        animation: move8 infinite 9s;
}
@-webkit-keyframes move8 {
0% {
  bottom: -100px;
}
100% {
  bottom: 57vh;
  transform: translate(95px, 0);
  opacity: 0;
}
}
@keyframes move8 {
0% {
  bottom: -100px;
}
100% {
  bottom: 57vh;
  transform: translate(95px, 0);
  opacity: 0;
}
}
.bubble:nth-child(9) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 7px;
height: 7px;
left: 76vw;
bottom: 51vh;
-webkit-animation: move9 infinite 9s;
        animation: move9 infinite 9s;
}
@-webkit-keyframes move9 {
0% {
  bottom: -100px;
}
100% {
  bottom: 24vh;
  transform: translate(35px, 0);
  opacity: 0;
}
}
@keyframes move9 {
0% {
  bottom: -100px;
}
100% {
  bottom: 24vh;
  transform: translate(35px, 0);
  opacity: 0;
}
}
.bubble:nth-child(10) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 14px;
height: 14px;
left: 88vw;
bottom: 51vh;
-webkit-animation: move10 infinite 8s;
        animation: move10 infinite 8s;
}
@-webkit-keyframes move10 {
0% {
  bottom: -100px;
}
100% {
  bottom: 12vh;
  transform: translate(-55px, 0);
  opacity: 0;
}
}
@keyframes move10 {
0% {
  bottom: -100px;
}
100% {
  bottom: 12vh;
  transform: translate(-55px, 0);
  opacity: 0;
}
}
.bubble:nth-child(11) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 23px;
height: 23px;
left: 46vw;
bottom: 65vh;
-webkit-animation: move11 infinite 8s;
        animation: move11 infinite 8s;
}
@-webkit-keyframes move11 {
0% {
  bottom: -100px;
}
100% {
  bottom: 3vh;
  transform: translate(5px, 0);
  opacity: 0;
}
}
@keyframes move11 {
0% {
  bottom: -100px;
}
100% {
  bottom: 3vh;
  transform: translate(5px, 0);
  opacity: 0;
}
}
.bubble:nth-child(12) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 10px;
height: 10px;
left: 97vw;
bottom: 7vh;
-webkit-animation: move12 infinite 15s;
        animation: move12 infinite 15s;
}
@-webkit-keyframes move12 {
0% {
  bottom: -100px;
}
100% {
  bottom: 95vh;
  transform: translate(-80px, 0);
  opacity: 0;
}
}
@keyframes move12 {
0% {
  bottom: -100px;
}
100% {
  bottom: 95vh;
  transform: translate(-80px, 0);
  opacity: 0;
}
}
.bubble:nth-child(13) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 7px;
height: 7px;
left: 91vw;
bottom: 34vh;
-webkit-animation: move13 infinite 3s;
        animation: move13 infinite 3s;
}
@-webkit-keyframes move13 {
0% {
  bottom: -100px;
}
100% {
  bottom: 35vh;
  transform: translate(-71px, 0);
  opacity: 0;
}
}
@keyframes move13 {
0% {
  bottom: -100px;
}
100% {
  bottom: 35vh;
  transform: translate(-71px, 0);
  opacity: 0;
}
}
.bubble:nth-child(14) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 33px;
height: 33px;
left: 42vw;
bottom: 25vh;
-webkit-animation: move14 infinite 3s;
        animation: move14 infinite 3s;
}
@-webkit-keyframes move14 {
0% {
  bottom: -100px;
}
100% {
  bottom: 38vh;
  transform: translate(-69px, 0);
  opacity: 0;
}
}
@keyframes move14 {
0% {
  bottom: -100px;
}
100% {
  bottom: 38vh;
  transform: translate(-69px, 0);
  opacity: 0;
}
}
.bubble:nth-child(15) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 9px;
height: 9px;
left: 76vw;
bottom: 62vh;
-webkit-animation: move15 infinite 13s;
        animation: move15 infinite 13s;
}
@-webkit-keyframes move15 {
0% {
  bottom: -100px;
}
100% {
  bottom: 93vh;
  transform: translate(46px, 0);
  opacity: 0;
}
}
@keyframes move15 {
0% {
  bottom: -100px;
}
100% {
  bottom: 93vh;
  transform: translate(46px, 0);
  opacity: 0;
}
}
.bubble:nth-child(16) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 9px;
height: 9px;
left: 5vw;
bottom: 32vh;
-webkit-animation: move16 infinite 15s;
        animation: move16 infinite 15s;
}
@-webkit-keyframes move16 {
0% {
  bottom: -100px;
}
100% {
  bottom: 56vh;
  transform: translate(119px, 0);
  opacity: 0;
}
}
@keyframes move16 {
0% {
  bottom: -100px;
}
100% {
  bottom: 56vh;
  transform: translate(119px, 0);
  opacity: 0;
}
}
.bubble:nth-child(17) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 3px;
height: 3px;
left: 67vw;
bottom: 50vh;
-webkit-animation: move17 infinite 12s;
        animation: move17 infinite 12s;
}
@-webkit-keyframes move17 {
0% {
  bottom: -100px;
}
100% {
  bottom: 14vh;
  transform: translate(115px, 0);
  opacity: 0;
}
}
@keyframes move17 {
0% {
  bottom: -100px;
}
100% {
  bottom: 14vh;
  transform: translate(115px, 0);
  opacity: 0;
}
}
.bubble:nth-child(18) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 9px;
height: 9px;
left: 38vw;
bottom: 27vh;
-webkit-animation: move18 infinite 3s;
        animation: move18 infinite 3s;
}
@-webkit-keyframes move18 {
0% {
  bottom: -100px;
}
100% {
  bottom: 47vh;
  transform: translate(195px, 0);
  opacity: 0;
}
}
@keyframes move18 {
0% {
  bottom: -100px;
}
100% {
  bottom: 47vh;
  transform: translate(195px, 0);
  opacity: 0;
}
}
.bubble:nth-child(19) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 22px;
height: 22px;
left: 51vw;
bottom: 43vh;
-webkit-animation: move19 infinite 10s;
        animation: move19 infinite 10s;
}
@-webkit-keyframes move19 {
0% {
  bottom: -100px;
}
100% {
  bottom: 83vh;
  transform: translate(120px, 0);
  opacity: 0;
}
}
@keyframes move19 {
0% {
  bottom: -100px;
}
100% {
  bottom: 83vh;
  transform: translate(120px, 0);
  opacity: 0;
}
}
.bubble:nth-child(20) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 38px;
height: 38px;
left: 78vw;
bottom: 86vh;
-webkit-animation: move20 infinite 7s;
        animation: move20 infinite 7s;
}
@-webkit-keyframes move20 {
0% {
  bottom: -100px;
}
100% {
  bottom: 12vh;
  transform: translate(169px, 0);
  opacity: 0;
}
}
@keyframes move20 {
0% {
  bottom: -100px;
}
100% {
  bottom: 12vh;
  transform: translate(169px, 0);
  opacity: 0;
}
}
.bubble:nth-child(21) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 10px;
height: 10px;
left: 27vw;
bottom: 50vh;
-webkit-animation: move21 infinite 9s;
        animation: move21 infinite 9s;
}
@-webkit-keyframes move21 {
0% {
  bottom: -100px;
}
100% {
  bottom: 39vh;
  transform: translate(120px, 0);
  opacity: 0;
}
}
@keyframes move21 {
0% {
  bottom: -100px;
}
100% {
  bottom: 39vh;
  transform: translate(120px, 0);
  opacity: 0;
}
}
.bubble:nth-child(22) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 4px;
height: 4px;
left: 48vw;
bottom: 46vh;
-webkit-animation: move22 infinite 12s;
        animation: move22 infinite 12s;
}
@-webkit-keyframes move22 {
0% {
  bottom: -100px;
}
100% {
  bottom: 95vh;
  transform: translate(196px, 0);
  opacity: 0;
}
}
@keyframes move22 {
0% {
  bottom: -100px;
}
100% {
  bottom: 95vh;
  transform: translate(196px, 0);
  opacity: 0;
}
}
.bubble:nth-child(23) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 9px;
height: 9px;
left: 51vw;
bottom: 56vh;
-webkit-animation: move23 infinite 15s;
        animation: move23 infinite 15s;
}
@-webkit-keyframes move23 {
0% {
  bottom: -100px;
}
100% {
  bottom: 57vh;
  transform: translate(-80px, 0);
  opacity: 0;
}
}
@keyframes move23 {
0% {
  bottom: -100px;
}
100% {
  bottom: 57vh;
  transform: translate(-80px, 0);
  opacity: 0;
}
}
.bubble:nth-child(24) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 4px;
height: 4px;
left: 89vw;
bottom: 40vh;
-webkit-animation: move24 infinite 14s;
        animation: move24 infinite 14s;
}
@-webkit-keyframes move24 {
0% {
  bottom: -100px;
}
100% {
  bottom: 44vh;
  transform: translate(161px, 0);
  opacity: 0;
}
}
@keyframes move24 {
0% {
  bottom: -100px;
}
100% {
  bottom: 44vh;
  transform: translate(161px, 0);
  opacity: 0;
}
}
.bubble:nth-child(25) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 9px;
height: 9px;
left: 70vw;
bottom: 43vh;
-webkit-animation: move25 infinite 6s;
        animation: move25 infinite 6s;
}
@-webkit-keyframes move25 {
0% {
  bottom: -100px;
}
100% {
  bottom: 16vh;
  transform: translate(-37px, 0);
  opacity: 0;
}
}
@keyframes move25 {
0% {
  bottom: -100px;
}
100% {
  bottom: 16vh;
  transform: translate(-37px, 0);
  opacity: 0;
}
}
.bubble:nth-child(26) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 29px;
height: 29px;
left: 56vw;
bottom: 67vh;
-webkit-animation: move26 infinite 9s;
        animation: move26 infinite 9s;
}
@-webkit-keyframes move26 {
0% {
  bottom: -100px;
}
100% {
  bottom: 76vh;
  transform: translate(112px, 0);
  opacity: 0;
}
}
@keyframes move26 {
0% {
  bottom: -100px;
}
100% {
  bottom: 76vh;
  transform: translate(112px, 0);
  opacity: 0;
}
}
.bubble:nth-child(27) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 6px;
height: 6px;
left: 64vw;
bottom: 8vh;
-webkit-animation: move27 infinite 16s;
        animation: move27 infinite 16s;
}
@-webkit-keyframes move27 {
0% {
  bottom: -100px;
}
100% {
  bottom: 33vh;
  transform: translate(71px, 0);
  opacity: 0;
}
}
@keyframes move27 {
0% {
  bottom: -100px;
}
100% {
  bottom: 33vh;
  transform: translate(71px, 0);
  opacity: 0;
}
}
.bubble:nth-child(28) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 2px;
height: 2px;
left: 1vw;
bottom: 67vh;
-webkit-animation: move28 infinite 15s;
        animation: move28 infinite 15s;
}
@-webkit-keyframes move28 {
0% {
  bottom: -100px;
}
100% {
  bottom: 99vh;
  transform: translate(-6px, 0);
  opacity: 0;
}
}
@keyframes move28 {
0% {
  bottom: -100px;
}
100% {
  bottom: 99vh;
  transform: translate(-6px, 0);
  opacity: 0;
}
}
.bubble:nth-child(29) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 10px;
height: 10px;
left: 86vw;
bottom: 96vh;
-webkit-animation: move29 infinite 44s;
        animation: move29 infinite 44s;
}
@-webkit-keyframes move29 {
0% {
  bottom: -100px;
}
100% {
  bottom: 96vh;
  transform: translate(82px, 0);
  opacity: 0;
}
}
@keyframes move29 {
0% {
  bottom: -100px;
}
100% {
  bottom: 96vh;
  transform: translate(82px, 0);
  opacity: 0;
}
}
.bubble:nth-child(30) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 28px;
height: 28px;
left: 5vw;
bottom: 7vh;
-webkit-animation: move30 infinite 22s;
        animation: move30 infinite 22s;
}
@-webkit-keyframes move30 {
0% {
  bottom: -100px;
}
100% {
  bottom: 60vh;
  transform: translate(-81px, 0);
  opacity: 0;
}
}
@keyframes move30 {
0% {
  bottom: -100px;
}
100% {
  bottom: 60vh;
  transform: translate(-81px, 0);
  opacity: 0;
}
}
.bubble:nth-child(31) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 19px;
height: 19px;
left: 27vw;
bottom: 34vh;
-webkit-animation: move31 infinite 3s;
        animation: move31 infinite 3s;
}
@-webkit-keyframes move31 {
0% {
  bottom: -100px;
}
100% {
  bottom: 92vh;
  transform: translate(83px, 0);
  opacity: 0;
}
}
@keyframes move31 {
0% {
  bottom: -100px;
}
100% {
  bottom: 92vh;
  transform: translate(83px, 0);
  opacity: 0;
}
}
.bubble:nth-child(32) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 20px;
height: 20px;
left: 56vw;
bottom: 38vh;
-webkit-animation: move32 infinite 23s;
        animation: move32 infinite 23s;
}
@-webkit-keyframes move32 {
0% {
  bottom: -100px;
}
100% {
  bottom: 99vh;
  transform: translate(117px, 0);
  opacity: 0;
}
}
@keyframes move32 {
0% {
  bottom: -100px;
}
100% {
  bottom: 99vh;
  transform: translate(117px, 0);
  opacity: 0;
}
}
.bubble:nth-child(33) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 17px;
height: 17px;
left: 24vw;
bottom: 70vh;
-webkit-animation: move33 infinite 25s;
        animation: move33 infinite 25s;
}
@-webkit-keyframes move33 {
0% {
  bottom: -100px;
}
100% {
  bottom: 6vh;
  transform: translate(167px, 0);
  opacity: 0;
}
}
@keyframes move33 {
0% {
  bottom: -100px;
}
100% {
  bottom: 6vh;
  transform: translate(167px, 0);
  opacity: 0;
}
}
.bubble:nth-child(34) {
background: radial-gradient(ellipse at center, #061616 0%, #0d2a31 46%, #050c11 100%);
width: 13px;
height: 13px;
left: 76vw;
bottom: 49vh;
-webkit-animation: move34 infinite 5s;
        animation: move34 infinite 5s;
}
@-webkit-keyframes move34 {
0% {
  bottom: -100px;
}
100% {
  bottom: 82vh;
  transform: translate(167px, 0);
  opacity: 0;
}
}
@keyframes move34 {
0% {
  bottom: -100px;
}
100% {
  bottom: 82vh;
  transform: translate(167px, 0);
  opacity: 0;
}
}
.bubble:nth-child(35) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 17px;
height: 91px;
left: 3vw;
bottom: 52vh;
-webkit-animation: move35 infinite 22s;
        animation: move35 infinite 22s;
}
@-webkit-keyframes move35 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(130px, 0);
  opacity: 0;
}
}
@keyframes move35 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(130px, 0);
  opacity: 0;
}
}
.bubble:nth-child(36) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 27px;
height: 27px;
left: 19vw;
bottom: 20vh;
-webkit-animation: move36 infinite 23s;
        animation: move36 infinite 23s;
}
@-webkit-keyframes move36 {
0% {
  bottom: -100px;
}
100% {
  bottom: 32vh;
  transform: translate(39px, 0);
  opacity: 0;
}
}
@keyframes move36 {
0% {
  bottom: -100px;
}
100% {
  bottom: 32vh;
  transform: translate(39px, 0);
  opacity: 0;
}
}
.bubble:nth-child(37) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 27px;
height: 27px;
left: 41vw;
bottom: 44vh;
-webkit-animation: move37 infinite 24s;
        animation: move37 infinite 24s;
}
@-webkit-keyframes move37 {
0% {
  bottom: -100px;
}
100% {
  bottom: 11vh;
  transform: translate(-72px, 0);
  opacity: 0;
}
}
@keyframes move37 {
0% {
  bottom: -100px;
}
100% {
  bottom: 11vh;
  transform: translate(-72px, 0);
  opacity: 0;
}
}
.bubble:nth-child(38) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #103842 46%, #051ce9 100%);
width: 29px;
height: 29px;
left: 6vw;
bottom: 37vh;
-webkit-animation: move38 infinite 17s;
        animation: move38 infinite 17s;
}
@-webkit-keyframes move38 {
0% {
  bottom: -100px;
}
100% {
  bottom: 32vh;
  transform: translate(-90px, 0);
  opacity: 0;
}
}
@keyframes move38 {
0% {
  bottom: -100px;
}
100% {
  bottom: 32vh;
  transform: translate(-90px, 0);
  opacity: 0;
}
}
.bubble:nth-child(39) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 10px;
height: 10px;
left: 99vw;
bottom: 2vh;
-webkit-animation: move39 infinite 20s;
        animation: move39 infinite 20s;
}
@-webkit-keyframes move39 {
0% {
  bottom: -100px;
}
100% {
  bottom: 12vh;
  transform: translate(151px, 0);
  opacity: 0;
}
}
@keyframes move39 {
0% {
  bottom: -100px;
}
100% {
  bottom: 12vh;
  transform: translate(151px, 0);
  opacity: 0;
}
}
.bubble:nth-child(40) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 12px;
height: 12px;
left: 7vw;
bottom: 2vh;
-webkit-animation: move40 infinite 10s;
        animation: move40 infinite 10s;
}
@-webkit-keyframes move40 {
0% {
  bottom: -100px;
}
100% {
  bottom: 89vh;
  transform: translate(54px, 0);
  opacity: 0;
}
}
@keyframes move40 {
0% {
  bottom: -100px;
}
100% {
  bottom: 89vh;
  transform: translate(54px, 0);
  opacity: 0;
}
}
.bubble:nth-child(41) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 5px;
height: 5px;
left: 24vw;
bottom: 61vh;
-webkit-animation: move41 infinite 12s;
        animation: move41 infinite 12s;
}
@-webkit-keyframes move41 {
0% {
  bottom: -100px;
}
100% {
  bottom: 52vh;
  transform: translate(25px, 0);
  opacity: 0;
}
}
@keyframes move41 {
0% {
  bottom: -100px;
}
100% {
  bottom: 52vh;
  transform: translate(25px, 0);
  opacity: 0;
}
}
.bubble:nth-child(42) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 21px;
height: 21px;
left: 70vw;
bottom: 20vh;
-webkit-animation: move42 infinite 14s;
        animation: move42 infinite 14s;
}
@-webkit-keyframes move42 {
0% {
  bottom: -100px;
}
100% {
  bottom: 54vh;
  transform: translate(132px, 0);
  opacity: 0;
}
}
@keyframes move42 {
0% {
  bottom: -100px;
}
100% {
  bottom: 54vh;
  transform: translate(132px, 0);
  opacity: 0;
}
}
.bubble:nth-child(43) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 27px;
height: 27px;
left: 67vw;
bottom: 73vh;
-webkit-animation: move43 infinite 4s;
        animation: move43 infinite 4s;
}
@-webkit-keyframes move43 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(34px, 0);
  opacity: 0;
}
}
@keyframes move43 {
0% {
  bottom: -100px;
}
100% {
  bottom: 7vh;
  transform: translate(34px, 0);
  opacity: 0;
}
}
.bubble:nth-child(44) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 31px;
height: 31px;
left: 39vw;
bottom: 97vh;
-webkit-animation: move44 infinite 11s;
        animation: move44 infinite 11s;
}
@-webkit-keyframes move44 {
0% {
  bottom: -100px;
}
100% {
  bottom: 40vh;
  transform: translate(108px, 0);
  opacity: 0;
}
}
@keyframes move44 {
0% {
  bottom: -100px;
}
100% {
  bottom: 40vh;
  transform: translate(108px, 0);
  opacity: 0;
}
}
.bubble:nth-child(45) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 32px;
height: 32px;
left: 68vw;
bottom: 9vh;
-webkit-animation: move45 infinite 13s;
        animation: move45 infinite 13s;
}
@-webkit-keyframes move45 {
0% {
  bottom: -100px;
}
100% {
  bottom: 83vh;
  transform: translate(-11px, 0);
  opacity: 0;
}
}
@keyframes move45 {
0% {
  bottom: -100px;
}
100% {
  bottom: 83vh;
  transform: translate(-11px, 0);
  opacity: 0;
}
}
.bubble:nth-child(46) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 45px;
height: 45px;
left: 52vw;
bottom: 91vh;
-webkit-animation: move46 infinite 7s;
        animation: move46 infinite 7s;
}
@-webkit-keyframes move46 {
0% {
  bottom: -100px;
}
100% {
  bottom: 85vh;
  transform: translate(104px, 0);
  opacity: 0;
}
}
@keyframes move46 {
0% {
  bottom: -100px;
}
100% {
  bottom: 85vh;
  transform: translate(104px, 0);
  opacity: 0;
}
}
.bubble:nth-child(47) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 36px;
height: 36px;
left: 68vw;
bottom: 65vh;
-webkit-animation: move47 infinite 17s;
        animation: move47 infinite 17s;
}
@-webkit-keyframes move47 {
0% {
  bottom: -100px;
}
100% {
  bottom: 11vh;
  transform: translate(161px, 0);
  opacity: 0;
}
}
@keyframes move47 {
0% {
  bottom: -100px;
}
100% {
  bottom: 11vh;
  transform: translate(161px, 0);
  opacity: 0;
}
}
.bubble:nth-child(48) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 40px;
height: 40px;
left: 13vw;
bottom: 21vh;
-webkit-animation: move48 infinite 14s;
        animation: move48 infinite 14s;
}
@-webkit-keyframes move48 {
0% {
  bottom: -100px;
}
100% {
  bottom: 68vh;
  transform: translate(104px, 0);
  opacity: 0;
}
}
@keyframes move48 {
0% {
  bottom: -100px;
}
100% {
  bottom: 68vh;
  transform: translate(104px, 0);
  opacity: 0;
}
}
.bubble:nth-child(49) {
background: radial-gradient(ellipse at center, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 74px;
height: 74px;
left: 8vw;
bottom: 7vh;
-webkit-animation: move49 infinite 4s;
        animation: move49 infinite 4s;
}
@-webkit-keyframes move49 {
0% {
  bottom: -100px;
}
100% {
  bottom: 95vh;
  transform: translate(-18px, 0);
  opacity: 0;
}
}
@keyframes move49 {
0% {
  bottom: -100px;
}
100% {
  bottom: 95vh;
  transform: translate(-18px, 0);
  opacity: 0;
}
}
.bubble:nth-child(50) {
background: radial-gradient(ellipse at top right, #b8c6c6 0%, #30b3d3 46%, #20628c 100%);
width: 78px;
height: 78px;
left: 43vw;
bottom: 47vh;
-webkit-animation: move50 infinite 13s;
        animation: move50 infinite 13s;
}
@-webkit-keyframes move50 {
0% {
  bottom: -100px;
}
100% {
  bottom: 93vh;
  transform: translate(139px, 0);
  opacity: 0;
}
}
@keyframes move50 {
0% {
  bottom: -100px;
}
100% {
  bottom: 93vh;
  transform: translate(139px, 0);
  opacity: 0;
}
}
p{
color: white;
margin-top: 50px;
justify-content: center;
text-align: center;
margin-left: 35px;
}
footer{
  background-color: rgba(3, 35, 53, 0.8);
    position: fixed;
    width: 100%;
   bottom: 0;
   height: 80px;
   border-top: rgb(252, 148, 56) 2px solid;
   justify-content: center;
   
  
  
  }
  
  footer ul{
    justify-content: center;
    
    padding-top: 50px;
  }
  footer li{
    padding-left: -10px;
  }