/** Animation CSS Start **/
/* .in-view {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

[data-scroll] {
  opacity: 0;
  transform: translateY(40px);
} */

/* .hero-content {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.hero-content.in-view {
  opacity: 1;
  transform: translateY(0);
} */
.c-scrollbar {
  z-index: 1;
}
.main-white-color {
  background-color: #ffffff;
  z-index: 1;
  display: inline-flex;
  width: 100%;
  position: relative;
  align-items: center;
}

/* .has-scroll-smooth [data-scroll-container]{
    background-color: #ffffff;
  } */

.scale {
  opacity: 0;
  transform: scale(0.5);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scale.is-inview {
  opacity: 1;
  transform: scale(1);
}


/* 4. Slide Up Animation */
.text-slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.text-slide-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}



/* Slide UP animation */
.slide-up {
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s ease;
}

.slide-up.is-inview {
  opacity: 1;
  transform: translateY(0);
}
  

/* Stagger Animation */
.stagger-item {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.stagger-item.is-inview {
  opacity: 1;
  transform: translateY(0);
}


 /*  Text Rotate Animation */
 .text-rotate {
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: center;
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.text-rotate.is-inview {
  opacity: 1;
  transform: rotateX(0deg);
}

/* Rotate Y Animation */
.rotate-y {
  opacity: 0;
  transform: rotateY(90deg);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rotate-y.is-inview {
  opacity: 1;
  transform: rotateY(0);
}
/** Animation CSS End **/