.panda {
    background-image: url('../images/content/panda-section-top.svg');
    width: 100%;
    height: 466px;
    background-repeat: no-repeat;
    background-color: #E5EAEB;
    background-position: center;
}

.panda__top {
    background-image: url('../images/content/panda-section-midlesvg.svg');
    width: 100%;
    height: 500px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
}
.panda__bottom {
    width: 100%;
    height: 560px;
    background-image: url('../images/content/panda-section-bottom.svg');
    position: absolute;
    background-position: center;
    z-index: 0;
    background-repeat: no-repeat;
}

.panda__bamboo {
    width: 130px;
    height: 230px;
    position: absolute;
    left: 11%;
    top: 9%;
}
.tree-one {
    position: absolute;
    left: 20%;
}

.bamboo-panda {
    position: absolute;
    left: 54%;
    top: 25%;
}
.panda-icon {
    position: absolute;
    left: 50%;
    top: 40%;
}
.small-tree {
    position: absolute;
    left: 43%;
    top: 18%;
}
.tree-two {
    position: absolute;
    left: 77%;
    top: 30%;
}
.panda__big-tree {
    width: 130px;
    height: 230px;
}

.panda__panda {
    width: 163px;
    height: 155px;
}
.panda__small-tree {
    width: 90px;
    height: 160px;
}


.panda__big-tree,
.panda__small-tree{
  animation: treeMove 6s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes treeMove{
  0%,100%{
    transform: rotate(0deg) translateY(0);
  }
  50%{
    transform: rotate(1.5deg) translateY(-5px);
  }
}

.panda__bamboo{
  animation: bambooSwing 4s ease-in-out infinite;
  transform-origin: bottom center;
}

.bamboo-one{
  animation-delay: 0s;
}

.bamboo-panda{
  animation-delay: .5s;
}

@keyframes bambooSwing{
  0%,100%{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(3deg);
  }
}

.panda__panda{
  animation: pandaBreath 3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pandaBreath{
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.02);
  }
}

@media screen and (max-width: 1920px) {
    .panda__bamboo {
        left: 0;
    }
    .tree-one {
        left: 12%;
    }
    .bamboo-panda {
        left: 55%;
    }
    .tree-two {
        left: 84%;
    }
}

@media screen and (max-width: 1440px) {
    .bamboo-one {
        display: none;
    }
    .tree-one {
        left: 2%;
    }
    .tree-two {
        left: 88%;
    }
}

@media screen and (max-width: 1200px) {
    .tree-two {
        display: none;
    }
    .tree-one {
        left: 0;
    }
}

@media screen and (max-width: 1024px) {
   .tree-one {
    display: none;
   }
}

@media screen and (max-width: 768px) {
   .small-tree {
    left: 20%;
   }
   .bamboo-panda {
    left: 62%;
   }
}

@media screen and (max-width: 640px) {
    .bamboo-panda {
        left: 67%;
    }
}