:root {
  --bodyFont: "Inter", sans-serif;
  --titleFont: "Hind", sans-serif;
  --transition: 0.3s;
  --primaryColor: #553CDF;
  --secondaryColor: #1F1F25;
  --whiteColor: #ffffff;
  --titleColor: #110C2D;
  --hoverColor: #553CDF;
  --bodyColor: #737477;
  --btnColor: #553CDF;
  --blackColor2: #191B1E;
  --darkdeep4: #949392;
  --darkblack: #0C0E2B;
  --naveBlue: #17093e;
}

.react-image {
  position: relative;
  width: 100%;
  height: 100%;
  width: -moz-fit-content;
  width: fit-content;
}
.react-image .image-rotate {
  width: -moz-fit-content;
  width: fit-content;
}
.react-image .image-rotate::after {
  content: "";
  display: block;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(245, 245, 245, 0);
  position: absolute;
  transform: scale(0.5);
  left: 0;
  top: 0;
  transform: translate(0px, 0px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.1215686275);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  z-index: -1;
}
.react-image.yes .veritcal {
  animation-name: veritcal;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  position: absolute;
  right: 0;
  top: -150px;
}
@keyframes veritcal {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 30px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.react-image.yes .veritcal_two {
  animation-name: veritcal_two;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@keyframes veritcal_two {
  0% {
    transform: translateY(100px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}
.react-image.yes .horizontal {
  animation-name: horizontal;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@keyframes horizontal {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
.react-image.yes .rotated_style {
  animation: rotate1 30s linear infinite;
  -webkit-animation: rotate1 30s linear infinite;
}
@keyframes rotate1 {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

.image-rotate {
  animation: rotation infinite 14s linear;
}

/* Rotation frame*/
@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}
.reveal-item {
  position: relative;
  display: block;
  overflow: hidden;
}

.reveal-item .reveal-animation {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101%;
  background: var(--primaryColor);
}

.reveal-item .reveal-animation::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition-property: transform;
  transition-duration: 1s;
}

.reveal-animation.reveal-primary::before {
  background: #0c0c0a;
}

.reveal-animation.reveal-dark::before {
  background: #000;
}

.reveal-animation.reveal-white::before {
  background: #000;
}

.reveal-animation.reveal-top.aos-animate::before,
.reveal-animation.reveal-bottom.aos-animate::before {
  transform: scaleY(1);
}

.reveal-animation.reveal-start.aos-animate::before,
.reveal-animation.reveal-end.aos-animate::before {
  transform: scaleX(1);
}

.reveal-animation.reveal-top::before {
  transform: scaleY(0);
  transform-origin: 0% 100%;
}

.reveal-animation.reveal-start::before {
  transform: scaleX(0);
  transform-origin: 100% 0%;
}

.reveal-animation.reveal-end::before {
  transform: scaleX(0);
  transform-origin: 0% 100%;
}

.reveal-animation.reveal-bottom::before {
  transform: scaleY(0);
  transform-origin: 100% 0%;
}

[data-aos=reveal-top],
[data-aos=reveal-start],
[data-aos=reveal-end],
[data-aos=reveal-bottom] {
  transition-property: transform;
  transition-delay: 1s;
}

[data-aos=reveal-top] {
  transform: scaleY(1);
}

[data-aos=reveal-top].aos-animate {
  transform: scaleY(0);
  transform-origin: 100% 0%;
}

[data-aos=reveal-start] {
  transform: scaleX(1);
}

[data-aos=reveal-start].aos-animate {
  transform: scaleX(0);
  transform-origin: 0% 100%;
}

[data-aos=reveal-end] {
  transform: scaleX(1);
}

[data-aos=reveal-end].aos-animate {
  transform: scaleX(0);
  transform-origin: 100% 0%;
}

[data-aos=reveal-bottom] {
  transform: scaleY(1);
}

[data-aos=reveal-bottom].aos-animate {
  transform: scaleY(0);
  transform-origin: 0% 100%;
}

[data-aos=reveal-item] {
  visibility: hidden;
  transition-property: visibility;
  transition-duration: 0s;
}

[data-aos=reveal-item].aos-animate {
  visibility: visible;
}/*# sourceMappingURL=image.css.map */