.header{
  position: relative;
  z-index: 0;
  overflow: hidden;
  
}
/* .header::before {
  content: "";
    width: 70vmin;
    height: 70vmin;
    position: absolute;
    background: rgba(79, 190, 206, 0.3);
    left: 20vmin;
    top: 10vmin;
    animation: fluidrotate 15s ease 0s infinite, spin 25s linear infinite;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 20% 20%;
    pointer-events: none;
    transition : .7s;
}
.header:hover::before {
  background: rgba(209, 49, 59, 0.5);
}
.header::after {
  
  content: "";
  width: 53vmax;
  height: 53vmax;
  left: auto;
  top: auto;
  right: -10vmin;
  bottom: -20vmin;
    position: absolute;
    background: rgba(79, 190, 206, 0.3);

    animation: fluidrotate 15s ease 0s infinite, spin 20s linear infinite;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none;
    transition : .7s;
}
.header:hover::after {
  background: rgba(209, 49, 59, 0.5);
} */
.back-fluid1{
  width: 50vmin;
    height: 50vmin;
    position: absolute;
    left: 20vmin;
    top: 10vmin;
    animation: fluidrotate 15s ease 0s infinite, spin 25s linear infinite;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 20% 20%;
}
.back-fluid-inner1{
  transition : .7s;
  width: 50vmin;
    height: 50vmin;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(79, 190, 206, 0.3);
}
.back-fluid-inner1:hover{
  width: 60vmin;
  height: 60vmin;
  background: rgba(209, 49, 59, 0.5);
}


.back-fluid2{
  width: 43vmax;
  height: 43vmax;
  left: auto;
  top: auto;
  right: -10vmin;
  bottom: -20vmin;
  position: absolute;

  animation: fluidrotate 15s ease 0s infinite, spin 20s linear infinite;
  z-index: 1;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
}
.back-fluid-inner2{
  transition : .7s;
  width: 43vmax;
  height: 43vmax;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(79, 190, 206, 0.3);
}
.back-fluid-inner2:hover{
  width: 50vmax;
  height: 50vmax;
  background: rgba(149, 148, 148, 0.5);
  animation: mt 15s ease 0s infinite;
}

.fluid1 {
  width:30%;
  height: 100%;
  animation: fluidrotate 15s ease 0s infinite;
  position: absolute;
  top: -50%;
  left: 0%;
}
.fluid1-inner{
  transition : .7s;
  width:60%;
  height: 60%;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(79, 190, 206, 0.5);
}
.fluid1-inner:hover{
  background: rgba(209, 49, 59, 0.5);
  width:80%;
  height: 100%;

}
.fluid2 {
  width:40%;
  height: 100%;
  animation: fluidrotate 25s ease 0s infinite;
  position: absolute;
  top: 90%;
  right: 0%;
}
.fluid2-inner{
  transition : .7s;
  width:40%;
  height: 100%;
  animation: fluidrotate 25s ease 0s infinite;
  background:rgba(79, 190, 206, 0.7);
}
.fluid2-inner:hover{
  background: rgba(149, 148, 148, 0.7);
  width:60%;
  height: 50%;

}
.fluid3 {
  width:40%;
  height: 80%;
  animation: fluidrotate 20s ease 0s infinite;
  position: absolute;
  top: 10%;
  left: 80%;
}
.fluid3-inner{
  transition : .7s;
  width:40%;
  height: 80%;
  animation: fluidrotate 20s ease 0s infinite;
  background:rgba(79, 190, 206, 0.6);
}
.fluid3-inner:hover{
  background: rgba(209, 49, 59, 0.6);
  width:60%;
  height: 120%;

}
.fluid4 {
  width:70%;
  height: 80%;
  animation: fluidrotate 30s ease 0s infinite;
  position: absolute;
  top: 110%;
  left: 5%;
}
.fluid4-inner{
  transition : .7s;
  width:70%;
  height: 80%;
  animation: fluidrotate 30s ease 0s infinite;
  background:rgba(79, 190, 206, 0.4);
}
.fluid4-inner:hover{
  background: rgba(216, 224, 100, 0.4);
  width:90%;
  height: 50%;

}
.fluid5 {
  width:60%;
  height: 100%;
  animation: fluidrotate 25s ease 0s infinite;
  position: absolute;
  top: -110%;
  left: 25%;
}
.fluid5-inner{
  transition : .7s;
  width:60%;
  height:100%;
  animation: fluidrotate 25s ease 0s infinite;
  background:rgba(79, 190, 206, 0.3);
}
.fluid5-inner:hover{
  background: rgba(216, 224, 100, 0.3);
  width:100%;
  height: 140%;

}
.fluid6 {
  width:50%;
  height: 70%;
  animation: fluidrotate 15s ease 0s infinite;
  position: absolute;
  top: -60%;
  left: 70%;
  z-index: 1000;
}
.fluid6-inner{
  transition : .7s;
  width:50%;
  height: 70%;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(79, 190, 206, 0.9);
}
.fluid6-inner:hover{
  background: rgba(79, 190, 206, 0.5);
  width:40%;
  height: 100%;

}


.fluid7 {
  width:40vh;
  height: 40vh;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(255, 255, 255, 0.3);
  position: absolute;
  top: -11%;
  left: 0;
  z-index: 2;
}
.fluid8 {
  width:40vh;
  height: 40vh;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(255, 255, 255, 0.5);
  position: absolute;
  top: -2%;
  left: 15%;
  z-index: 2;
}
.fluid9 {
  width:60vh;
  height: 60vh;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 2%;
  left: 60%;
  z-index: 2;
}
.fluid10 {
  width:50vh;
  height: 60vh;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 14%;
  left: 28%;
  z-index: 2;
}
.fluid11 {
  width:30vh;
  height: 40vh;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 25%;
  left: 60%;
  z-index: 2;
}
.fluid12 {
  width:40vh;
  height: 30vh;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 2;
}
.fluid13 {
  width:50vh;
  height: 50vh;
  animation: fluidrotate 15s ease 0s infinite;
  background:rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 57%;
  left: 7%;
  z-index: 2;
}




@media (max-width: 1200px){
  .fluid4{
    width:35vh;
    height: 25vh;
    top: -80%;
    left: 70%;
  }
  .fluid4-inner{
    width:35vh;
    height: 25vh;
  }
.fluid5{
    width:25vh;
    height: 20vh;
  }
  .fluid5-inner{
    width:25vh;
    height: 20vh;
  }
.fluid6{
    width:30vh;
    height: 20vh;
    top: 90%;
    left: 6%;
  }
  .fluid6-inner{
    width:30vh;
    height: 20vh;
  }
  .fluid7 {
    width:30vh;
    height: 30vh;
    top: -9%;
    left: 2%;
  }
  .fluid8 {
    width:40vh;
    height: 30vh;
    top: -2%;
    left: 15%;
  }
  .fluid9 {
    width:40vh;
    height: 40vh;
    top: 2%;
    left: 63%;
  }
  .fluid10 {
    width:40vh;
    height: 50vh;
    top: 14%;
    left: 28%;
  }
  .fluid11 {
    width:30vh;
    height: 40vh;
    top: 25%;
    left: 60%;
  }
  .fluid12 {
    width:40vh;
    height: 30vh;
    top: 40%;
    left: 30%;
  }
  .fluid13 {
    width:40vh;
    height: 40vh;
    top: 57%;
    left: 12%;
  }
}
@media (max-width: 992px){
  .back-fluid1 {
      width: 40vmin;
      height: 40vmin;
      left:10vmin;
      top: 10vmin;
  }
  .back-fluid-inner1 {
      width: 40vmin;
      height: 40vmin;
  }
  .back-fluid2 {
    width: 40vmax;
    height: 40vmax;
    left: auto;
    right: -20vmin;
    top: auto;
    bottom:10vmin;
  }
  .back-fluid-inner2 {
    width: 40vmax;
    height: 40vmax;
  }
  .fluid1{
    top: -90%;
  }
  .fluid2{
    right: 0;
  }
  .fluid3{

  }
  .fluid4{
    width:35vh;
    height: 25vh;
    top: -115%;
    left: 57%;
  }
  .fluid4-inner{
    width:35vh;
    height: 25vh;
  }
.fluid5{
  width:15vh;
  height: 10vh;
  top: -10%;

  }
  .fluid5-inner{
    width:15vh;
    height: 10vh;
  }
.fluid6{
    width:30vh;
    height: 20vh;
    top: 100%;
    left: 10%;
  }
  .fluid6-inner{
    width:30vh;
    height: 20vh;
  }
  .fluid7 {
    width:30vh;
    height: 30vh;
    top: -13%;
    left: 2%;
  }
  .fluid8 {
    width:40vh;
    height: 30vh;
    top: -2%;
    left: 53%;
  }
  .fluid9 {
    width:30vh;
    height: 30vh;
    top: 7%;
    left: 20%;
  }
  .fluid10 {
    width:30vh;
    height: 40vh;
    top: 15%;
    left: 50%;
  }
  .fluid11 {
    width:30vh;
    height: 40vh;
    top: 30%;
    left: 60%;
    display: none;
  }
  .fluid12 {
    width:40vh;
    height: 30vh;
    top: 50%;
    left: 10%;
    display: none;
  }
  .fluid13 {
    width:40vh;
    height: 40vh;
    top: 65%;
    left: 12%;
    display: none;
  }
}
@media (max-width: 768px){
  .fluid1{
    width:20vh;
    height: 20vh;
    top: -70%;
  }
  .fluid1-inner{
    width:20vh;
    height: 20vh;
  }
  .fluid2{
    width:30vh;
    height: 60vh;
    right: 0;
  }
  .fluid2-inner{
    width:30vh;
    height: 60vh;
  }
  .fluid3{
    width:15vh;
    height: 15vh;
  }
  .fluid3-inner{
    width:15vh;
    height: 15vh;
  }
  .fluid4{
    width:35vh;
    height: 25vh;
    top: -130%;
    left: 43%;
  }
  .fluid4-inner{
    width:35vh;
    height: 25vh;
  }
.fluid5{
  width:15vh;
  height: 10vh;
  top: -10%;

  }
  .fluid5-inner{
    width:15vh;
    height: 10vh;
  }
.fluid6{
    width:20vh;
    height: 15vh;
    top: 100%;
    left: 10%;
  }
  .fluid6-inner{
    width:20vh;
    height: 15vh;
  }
  .fluid7 {
    width:20vh;
    height: 20vh;
    top: -15%;
    left: 2%;
  }
  .fluid8 {
    width:30vh;
    height: 20vh;
    top: -3%;
    left: 51%;
  }
  .fluid9 {
    width:20vh;
    height: 20vh;
    top: 7%;
    left: 20%;
  }
  .fluid10 {
    width:30vh;
    height: 40vh;
    top: 13%;
    left: 50%;
  }
  .fluid11 {
    width:30vh;
    height: 40vh;
    top: 30%;
    left: 60%;
  }
  .fluid12 {
    width:40vh;
    height: 30vh;
    top: 50%;
    left: 10%;
  }
  .fluid13 {
    width:40vh;
    height: 40vh;
    top: 65%;
    left: 12%;
  }
}
@media (max-width: 575px){
  .back-fluid1 {
    width: 50vmin;
    height: 50vmin;
    left: 20vmin;
    top: 10vmin;
}
  .back-fluid-inner1{
    width: 50vmin;
    height: 50vmin;
}
.back-fluid-inner1:hover{
  width: 60vmin;
  height: 60vmin;
}

.back-fluid2 {
  width: 25vmax;
  height: 25vmax;
  right: -10vmin;
  bottom: 30vmin;
}
.back-fluid-inner2 {
  width: 25vmax;
  height: 25vmax;
}
.back-fluid-inner2:hover{
  width: 30vmax;
  height: 30vmax;
}

  .fluid1{
    width:20vh;
    height: 10vh;
    top: -40%;
  }
  .fluid1-inner{
    width:20vh;
    height: 10vh;
  }
  .fluid2{
    width:20vh;
    height: 40vh;
    right: 0;
  }
  .fluid2-inner{
    width:20vh;
    height: 40vh;
  }
  .fluid3{
display: none;
  }
  .fluid4{
    width:25vh;
    height: 15vh;
    top: -100%;
    left: 30%;
  }
  .fluid4-inner{
    width:25vh;
    height: 15vh;
  }
.fluid5{
  width:15vh;
  height: 15vh;
  top: 5%;
  right: 6%;

  }
  .fluid5-inner{
    width:15vh;
    height: 15vh;
  }
.fluid6{
    width:20vh;
    height: 15vh;
    top: 100%;
    left: 0%;
  }
  .fluid6-inner{
    width:20vh;
    height: 15vh;
  }

  .fluid7 {
    width:20vh;
    height: 20vh;
    top: -9%;
    left: 6%;
  }

  .fluid8 {
    width:20vh;
    height: 20vh;
    top: -4%;
    left: 45%;
  }
  .fluid9 {
    width:30vh;
    height: 30vh;
    top: 11%;
    left: 35%;
  }
  .fluid10 {
    width:30vh;
    height: 40vh;
    top: 37%;
    left: 40%;
  }
  
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}
@keyframes mt {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
    border-radius: 90% 10% 10% 90% / 20% 10% 90% 80%;
}
28% {
    border-radius: 60% 40% 39% 61% / 27% 11% 89% 73%;
}
42% {
    border-radius: 20% 80% 90% 10% / 90% 90% 10% 10%;
}
56% {
    border-radius: 90% 10% 10% 90% / 80% 90% 10% 20%;
}
70% {
    border-radius: 60% 40% 39% 61% / 27% 11% 89% 73%;
}
84% {
    border-radius:  90% 10% 10% 90% / 20% 10% 90% 80%;
}
	  
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}