.elementor-15345 .elementor-element.elementor-element-301ecf3{padding:200px 0px 30px 0px;}.elementor-15345 .elementor-element.elementor-element-5898674{padding:0px 0px 50px 0px;}.elementor-15345 .elementor-element.elementor-element-95dbcb7 .title{color:var( --e-global-color-primary );font-family:"iransansdn", Sans-serif;font-size:30px;font-weight:700;}.elementor-15345 .elementor-element.elementor-element-2e6d163 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-15345 .elementor-element.elementor-element-e60c8c6{--spacer-size:5px;}.elementor-15345 .elementor-element.elementor-element-805d8f1 .title{color:var( --e-global-color-primary );font-family:"iransansdn", Sans-serif;font-size:30px;font-weight:700;}/* Start custom CSS for html, class: .elementor-element-6af8a4d */.scene {
  perspective: 400px;
   display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.box {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: 0.3s;
  animation-name: rotateAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.box__face {
  position: absolute;
  width: 200px;
  height: 200px;
  font-size: 120px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  border: 1px solid #e22d2d;
}
.box__face.front {
  transform: rotateY(0deg) translateZ(100px);
  background: #e22d2d;
}
.box__face.back {
  transform: rotateY(90deg) translateZ(100px);
  background: #d81e1e;
}
.box__face.right {
  transform: rotateY(180deg) translateZ(100px);
  background: #c11b1b;
}
.box__face.left {
  transform: rotateY(-90deg) translateZ(100px);
  background: #ab1818;
}
.box__face.top {
  transform: rotateX(90deg) translateZ(100px);
  background: #d81e1e;
}
.box__face.bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background: #941515;
}

@keyframes rotateAnimation {
  25% {
    transform: translateZ(-100px) rotateY(-90deg);
  }
  50% {
    transform: translateZ(-100px) rotateY(-180deg);
  }
  75% {
    transform: translateZ(-100px) rotateX(-90deg);
  }
  85% {
    transform: translateZ(-100px) rotateX(-90deg);
  }
}
.shadow {
  position: absolute;
  z-index: -1;
  left: 40%;
  right: 40%;
  top: 100%;
  width: 20%;
  height: 30px;
  border-radius: 50%;
  background: #000;
  filter: blur(20px);
}/* End custom CSS */