/* reset & base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    padding: 0;
    margin: 0;
  }
  

      /*hero section cube animation  */
  .cube {
    position: absolute;
    top: -100px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 5rem;
    height: 5rem;
    margin: auto;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-animation: 20s cube-rotate linear infinite;
            animation: 20s cube-rotate linear infinite;
  }
  .cube .cube__face {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
  }
  .cube .cube__face.cube__face--front-side {
    background-color: #b4b6c6;
    transform: translateZ(3rem);
    -webkit-animation: 5s unfold-front linear infinite;
            animation: 5s unfold-front linear infinite;
  }
  .cube .cube__face.cube__face--back-side {
    background-color: #9799b0;
    transform: translateZ(-3rem);
    -webkit-animation: 5s unfold-back linear infinite;
            animation: 5s unfold-back linear infinite;
  }
  .cube .cube__face.cube__face--left-side {
    background-color: #7a7d9a;
    transform: translateX(-3rem) rotateY(90deg);
    -webkit-animation: 5s unfold-left linear infinite;
            animation: 5s unfold-left linear infinite;
  }
  .cube .cube__face.cube__face--right-side {
    background-color: #616480;
    transform: translateX(3rem) rotateY(90deg);
    -webkit-animation: 5s unfold-right linear infinite;
            animation: 5s unfold-right linear infinite;
  }
  .cube .cube__face.cube__face--top-side {
    background-color: #4b4d63;
    transform: translateY(-3rem) rotateX(90deg);
    -webkit-animation: 5s unfold-top linear infinite;
            animation: 5s unfold-top linear infinite;
  }
  .cube .cube__face.cube__face--bottom-side {
    background-color: #353746;
    transform: translateY(3rem) rotateX(90deg);
    -webkit-animation: 5s unfold-bottom linear infinite;
            animation: 5s unfold-bottom linear infinite;
  }
  
  @-webkit-keyframes unfold-top {
    0%, 100% {
      transform: translateY(-3rem) rotateX(90deg);
    }
    50% {
      transform: translateY(-10rem) rotateX(90deg);
    }
  }
  
  @keyframes unfold-top {
    0%, 100% {
      transform: translateY(-3rem) rotateX(90deg);
    }
    50% {
      transform: translateY(-10rem) rotateX(90deg);
    }
  }
  @-webkit-keyframes unfold-bottom {
    0%, 100% {
      transform: translateY(3rem) rotateX(90deg);
    }
    50% {
      transform: translateY(10rem) rotateX(90deg);
    }
  }
  @keyframes unfold-bottom {
    0%, 100% {
      transform: translateY(3rem) rotateX(90deg);
    }
    50% {
      transform: translateY(10rem) rotateX(90deg);
    }
  }
  @-webkit-keyframes unfold-front {
    0%, 100% {
      transform: translateZ(3em);
    }
    50% {
      transform: translateZ(10rem);
    }
  }
  @keyframes unfold-front {
    0%, 100% {
      transform: translateZ(3rem);
    }
    50% {
      transform: translateZ(10rem);
    }
  }
  @-webkit-keyframes unfold-back {
    0%, 100% {
      transform: translateZ(-3rem);
    }
    50% {
      transform: translateZ(-10rem);
    }
  }
  @keyframes unfold-back {
    0%, 100% {
      transform: translateZ(-3rem);
    }
    50% {
      transform: translateZ(-10rem);
    }
  }
  @-webkit-keyframes unfold-right {
    0%, 100% {
      transform: translateX(3rem) rotateY(90deg);
    }
    50% {
      transform: translateX(10rem) rotateY(90deg);
    }
  }
  @keyframes unfold-right {
    0%, 100% {
      transform: translateX(3rem) rotateY(90deg);
    }
    50% {
      transform: translateX(10rem) rotateY(90deg);
    }
  }
  @-webkit-keyframes unfold-left {
    0%, 100% {
      transform: translateX(-3rem) rotateY(90deg);
    }
    50% {
      transform: translateX(-10rem) rotateY(90deg);
    }
  }
  @keyframes unfold-left {
    0%, 100% {
      transform: translateX(-3rem) rotateY(90deg);
    }
    50% {
      transform: translateX(-10rem) rotateY(90deg);
    }
  }
  @-webkit-keyframes cube-rotate {
    100% {
      transform: rotateY(360deg) rotateX(720deg) rotateZ(1080deg);
    }
  }
  @keyframes cube-rotate {
    100% {
      transform: rotateY(360deg) rotateX(720deg) rotateZ(1080deg);
    }
  }