.mouse_scroll {
  -webkit-animation: floating 2s infinite;
  animation: floating 2s infinite;
}

.header_gradient {
  background: linear-gradient(264deg, #7a1f42 20%, #e63365 100%);
}

.left_side :nth-child(1).side_design .demo,
.right_side :nth-child(1).side_design .demo{
-webkit-animation: demo-4 6s linear infinite;
  animation: demo-4 6s linear infinite;
  
}



.left_side :nth-child(2).side_design .demo,
.right_side :nth-child(2).side_design .demo{
  -webkit-animation: demo-3 8s linear infinite;
  animation: demo-3 8s linear infinite;
  
}

.left_side :nth-child(3).side_design .demo,
.right_side :nth-child(3).side_design .demo{
  -webkit-animation: demo-2 5s linear infinite;
  animation: demo-2 5s linear infinite;
  
}

.left_side :nth-child(4).side_design .demo,
.right_side :nth-child(4).side_design .demo{
  -webkit-animation: demo-1 6s linear infinite;
  animation: demo-1 6s linear infinite;
  
}

.left_side :nth-child(1).side_design ,
.right_side :nth-child(1).side_design{
  z-index: 1;
  
}

.left_side :nth-child(2).side_design ,
.right_side :nth-child(2).side_design{

  z-index: 2;
}
.left_side :nth-child(3).side_design ,
.right_side :nth-child(3).side_design{
  
  z-index: 3;
}

.left_side :nth-child(4).side_design ,
.right_side :nth-child(4).side_design{
  
  z-index: 4;
}





.demo {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


@-webkit-keyframes demo-1 {
  0%,
  100% {
    -webkit-transform: translateY(35px);
    transform: translateY(35px);
  }
  25% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  50% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  75% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
}
@keyframes demo-1 {
  0%,
  100% {
    -webkit-transform: translateY(35px);
    transform: translateY(35px);
  }
  25% {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
  }
  50% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  75% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
}

@-webkit-keyframes demo-2 {
  0%,
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  25%,
  75% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
  }
}
@keyframes demo-2 {
  0%,
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  25%,
  75% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
  }
}


@-webkit-keyframes demo-3 {
  0%,
  50%,
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  25% {
    -webkit-transform: translateY(-110px);
    transform: translateY(-110px);
  }
  75% {
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px);
  }
}

@keyframes demo-3 {
  0%,
  50%,
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
  25% {
    -webkit-transform: translateY(-110px);
    transform: translateY(-110px);
  }
  75% {
    -webkit-transform: translateY(-80px);
    transform: translateY(-80px);
  }
}


@-webkit-keyframes demo-4 {
  0%,
  100% {
    -webkit-transform: translateY(-180px);
    transform: translateY(-180px);
  }
  25% {
    -webkit-transform: translateY(-175px);
    transform: translateY(-175px);
  }
  50%,
  75% {
    -webkit-transform: translateY(-165px);
    transform: translateY(-165px);
  }
}

@keyframes demo-4 {
  0%,
  100% {
    -webkit-transform: translateY(-180px);
    transform: translateY(-180px);
  }
  25% {
    -webkit-transform: translateY(-175px);
    transform: translateY(-175px);
  }
  50%,
  75% {
    -webkit-transform: translateY(-165px);
    transform: translateY(-165px);
  }
}

.right_side .side_design,
.left_side .side_design {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.right_side .side_design {
  transform: perspective(1500px) rotateY(-30deg) rotateX(15deg);
}

.left_side .side_design {
  transform: perspective(1500px) rotateY(30deg) rotateX(15deg);
}
.right_side img,
.left_side img {
  box-shadow: 20px 0px 27px rgba(0, 0, 0, 30%);
  border-radius: 2rem;
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }

  50% {
    -webkit-transform: translateY(-0%);
    transform: translateY(-0%);
  }

  100% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
}
@keyframes floating {
  0% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }

  50% {
    -webkit-transform: translateY(-0%);
    transform: translateY(-0%);
  }

  100% {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
  }
}

@keyframes floating {
  0% {
    transform: translateY(0) rotate(6deg);
  }
  50% {
    transform: translateY(-18px) rotate(6deg);
  }
  100% {
    transform: translateY(0) rotate(6deg);
  }
}