.animate-elements {
  /* padding-bottom: 40px; */
  position: relative;
}

.animate-element--box {
  border-radius: 5px;
  box-shadow: 0 12px 44px 0 rgba(158, 202, 236, 0.41);
  background-color: #e9f7fd;
  display: block;
  margin: 0 auto;
  float: none;
}

.animate-element--back {
  position: absolute;
  opacity: 0;
}
.desktop--animate-element--back{
  top: -35px;
  transform: scale(0);
}
.animate-elements--fl {
  display: flex;
  justify-content: center;
  position: relative;
}

.animate-elements--item {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  max-width: 495px;
  margin: 0 auto;
  /* margin-top: 76px; */
  border-radius: 5px;
}

.animate-elements--item::before,
.animate-elements--item::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

.anim-element--body:nth-child(3n + 1) {
  order: 1;
}

.anim-element--body:nth-child(3n + 2) {
  order: 2;
}

.anim-element--body:nth-child(3n) {
  order: 3;
}

.anim-element--body {
  position: relative;
  margin: 0 12.5px;
}

.anim-element--body-content {
  width: 140px;
}

.anim-element--item {
  border-radius: 17px;
  box-shadow: 0 12px 44px 0 rgba(158, 202, 236, 0.41);
  background-color: #f8fcff;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.animate-element--box .anim-element--item {
  box-shadow: 0 4px 24px 0 rgba(158, 202, 236, 0.41);
}

.anim-element--item>img {
  height: auto;
}

.anim-element--text {
  opacity: 1;
  text-align: center;
}

.scrollmagic-pin-spacer {
  padding-top: 25px;
  padding-bottom: 45px;
  min-height: 560px;
}

.anim-element--body:nth-child(1) {
  left: -360px;
  top: -60px;
  transform: rotate(-10deg);
}

.anim-element--body:nth-child(2) {
  left: -360px;
  top: 86px;
  transform: rotate(-10deg);
}

.anim-element--body:nth-child(3) {
  left: 433px;
  top: -108px;
  transform: rotate(-5deg);
}

.anim-element--body:nth-child(4) {
  left: -266px;
  top: 7px;
  transform: rotate(-5deg);
}

.anim-element--body:nth-child(5) {
  left: -263px;
  top: 86px;
  transform: rotate(2deg);
}

.anim-element--body:nth-child(6) {
  left: 536px;
  top: -89px;
  transform: rotate(-7deg);
}

.anim-element--body:nth-child(7) {
  left: 344px;
  top: -75px;
  transform: rotate(10deg);
}

.anim-element--body:nth-child(8) {
  top: -181px;
  left: 92px;
  transform: rotate(5deg);
}

html[lang="ar"] .desktop--animate-elements--item {
  direction: ltr;
}

@media (min-width: 1200px) {
  .mob--animate-element--back {
    display: none;
  }

  .mob--animate-elements--item {
    display: none;
  }

  .desktop--animate-elements--item {
    display: flex;    
  }

  .scrollmagic-pin-spacer {
    padding-top: 32px;
  }
}

@media (max-width: 1200px) {
  .animate-elements{
    min-height: 473px;
    max-height: 478px;
  }
  html[lang="ar"] .animate-elements {
    direction: ltr;
  }
  .scrollmagic-pin-spacer {
    padding-top: 24px;
  }
  .mob--animate-elements--item {
    display: flex;
    max-width: 297px;
    margin-top: 5px;
  }
  .desktop--animate-elements--item{
    display: none;
  }

  .scrollmagic-pin-spacer {
    min-height: 473px;
    max-height: 478px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .desktop--animate-element--back {
    display: none;
  }

  .mob--animate-elements--item .anim-element--body-content {
    width: 95px;
  }

  .mob--animate-elements--item .anim-element--item {
    height: 95px;
    box-shadow: 0 12px 16px 0 rgba(158, 202, 236, 0.35);
  }

  .mob--animate-element--back {
    top: -18px;
    margin-top: 300px;
  }

  .mob--animate-elements--item .anim-element--body:nth-child(1) {
    left: 90px;
    top: 72px;
    transform: rotate(-4deg);
  }

  .mob--animate-elements--item .anim-element--body:nth-child(2) {
    left: -39px;
    top: -92px;
    transform: rotate(-5deg);
  }

  .mob--animate-elements--item .anim-element--body:nth-child(3) {
    left: 207px;
    top: -140px;
    transform: rotate(10deg);
  }

  .mob--animate-elements--item .anim-element--body:nth-child(4) {
    left: -171px;
    top: -7px;
  }

  .mob--animate-elements--item .anim-element--body:nth-child(5) {
    left: -158px;
    top: 59px;
    transform: rotate(-6deg);
  }

  .mob--animate-elements--item .anim-element--body:nth-child(6) {
    left: -34px;
    top: -242px;
    transform: rotate(5deg);
  }

  .mob--animate-elements--item .anim-element--body:nth-child(7) {
    left: 225px;
    top: -92px;
  }

  .mob--animate-elements--item .anim-element--body:nth-child(8) {
    left: 213px;
    top: -162px;
  }
}

@media(max-width: 375px){
  .scrollmagic-pin-spacer .container-fluid,
  .scrollmagic-pin-spacer .animate-elements{
    padding-left: 0;
    padding-right: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .animate-elements--fl{
    display: block;
  }
}