.text-anime {
    position: absolute;
    font-size: 80px;
    left: -500%; /* Start off-screen */
    white-space: nowrap;
    opacity: 0; 
    transition: opacity 0.5s; /* Fade effect */
    color: beige;
}


/* animated hero svg */
                   .cls-1 {
                                    fill: url(#linear-gradient-12);
                                  }
                                  .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-19, .cls-20, .cls-21, .cls-22, .cls-23, .cls-24, .cls-25, .cls-26, .cls-27, .cls-28, .cls-29, .cls-30, .cls-31, .cls-32, .cls-33, .cls-34, .cls-35, .cls-36, .cls-37, .cls-38, .cls-40, .cls-41, .cls-42, .cls-43, .cls-44, .cls-45, .cls-46, .cls-47, .cls-48, .cls-49, .cls-50, .cls-51, .cls-52, .cls-53, .cls-54, .cls-55, .cls-56, .cls-57, .cls-58, .cls-59, .cls-60, .cls-61, .cls-62, .cls-63, .cls-64, .cls-65, .cls-66, .cls-67, .cls-68, .cls-69, .cls-70, .cls-71, .cls-72, .cls-73, .cls-74, .cls-75, .cls-76, .cls-77, .cls-78, .cls-79, .cls-80, .cls-81, .cls-82, .cls-83 {
                                    stroke-width: 0px;
                                  }
                                  .cls-39{
                                    fill: #38383a !important;
                                  }
                                  .cls-2 {
                                    fill: #090955;
                                  }
                                  .cls-3 {
                                    fill: url(#linear-gradient-17);
                                  }
                                  .cls-4 {
                                    fill: url(#linear-gradient-19);
                                  }
                                  .cls-5 {
                                    fill: url(#linear-gradient-33);
                                  }
                                  .cls-6 {
                                    fill: #b2b2b2;
                                  }
                                  .cls-7 {
                                    fill: #685eef;
                                  }
                                  .cls-84 {
                                    font-size: 3.23px;
                                  }
                                  .cls-84, .cls-85, .cls-39, .cls-86, .cls-87, .cls-88, .cls-89, .cls-90, .cls-91 {
                                    fill: #fff;
                                  }
                                  .cls-84, .cls-86, .cls-87, .cls-88, .cls-92, .cls-89, .cls-93, .cls-90, .cls-91 {
                                    font-family: Raleway-Regular, 'Raleway Regular';
                                  }
                                  .cls-8 {
                                    fill: #2f96c9;
                                  }
                                  .cls-9 {
                                    fill: #eaeaea;
                                  }
                                  .cls-9, .cls-78 {
                                    mix-blend-mode: multiply;
                                  }
                                  .cls-10 {
                                    fill: url(#linear-gradient-21);
                                  }
                                  .cls-11 {
                                    fill: url(#linear-gradient-6);
                                  }
                                  .cls-12 {
                                    fill: url(#linear-gradient);
                                  }
                                  .cls-12, .cls-15, .cls-30, .cls-37, .cls-49, .cls-51, .cls-52, .cls-75, .cls-77, .cls-80 {
                                    opacity: .8;
                                  }
                                  .cls-94 {
                                    opacity: .6;
                                  }
                                  .cls-13 {
                                    fill: #ff6e94;
                                  }
                                  .cls-14 {
                                    fill: #8c8c8c;
                                  }
                                  .cls-15 {
                                    fill: url(#linear-gradient-24);
                                  }
                                  .cls-95 {
                                    isolation: isolate;
                                  }
                                  .cls-16 {
                                    fill: #58e0a9;
                                  }
                                  .cls-17 {
                                    fill: #e5e5e5;
                                  }
                                  .cls-85 {
                                    font-family: Raleway-Bold, Raleway;
                                    font-size: 6.75px;
                                    font-weight: 700;
                                  }
                                  .cls-96 {
                                    font-family: Bebas, Bebas;
                                    font-size: 2.79px;
                                  }
                                  .cls-96, .cls-92, .cls-93, .cls-79 {
                                    fill: #fcfcfc;
                                  }
                                  .cls-18 {
                                    fill: #49a3db;
                                  }
                                  .cls-19 {
                                    fill: #24a2e0;
                                  }
                                  .cls-20 {
                                    fill: url(#linear-gradient-15);
                                  }
                                  .cls-21 {
                                    fill: #7dd6f9;
                                  }
                                  .cls-22 {
                                    fill: #cc75db;
                                  }
                                  .cls-23 {
                                    fill: #81eac2;
                                  }
                                  .cls-24 {
                                    fill: url(#linear-gradient-5);
                                  }
                                  .cls-25 {
                                    fill: #9958cc;
                                  }
                                  .cls-26 {
                                    fill: #da8ce5;
                                  }
                                  .cls-27 {
                                    fill: url(#linear-gradient-31);
                                  }
                                  .cls-28 {
                                    fill: url(#linear-gradient-34);
                                  }
                                  .cls-29 {
                                    fill: #3324a0;
                                  }
                                  .cls-30 {
                                    fill: url(#linear-gradient-4);
                                  }
                                  .cls-31 {
                                    fill: #e53c70;
                                  }
                                  .cls-32 {
                                    fill: #bcbcc4;
                                  }
                                  .cls-33 {
                                    fill: #2d2d2d;
                                  }
                                  .cls-34 {
                                    fill: url(#linear-gradient-13);
                                  }
                                  .cls-35 {
                                    fill: #7f7f7f;
                                  }
                                  .cls-36 {
                                    fill: #7777fc;
                                  }
                                  .cls-37 {
                                    fill: url(#linear-gradient-3);
                                  }
                                  .cls-38 {
                                    fill: url(#linear-gradient-16);
                                  }
                                  .cls-40 {
                                    fill: url(#linear-gradient-35);
                                  }
                                  .cls-41 {
                                    fill: #4b37db;
                                  }
                                  .cls-42 {
                                    fill: url(#linear-gradient-32);
                                  }
                                  .cls-43 {
                                    fill: url(#linear-gradient-20);
                                  }
                                  .cls-44 {
                                    fill: url(#linear-gradient-14);
                                  }
                                  .cls-45 {
                                    fill: #020457;
                                  }
                                  .cls-86 {
                                    font-size: 2.61px;
                                  }
                                  .cls-46 {
                                    fill: #a7fcdf;
                                  }
                                  .cls-47 {
                                    fill: #0c0e6e;
                                  }
                                  .cls-48 {
                                    fill: url(#linear-gradient-7);
                                  }
                                  .cls-49 {
                                    fill: url(#linear-gradient-23);
                                  }
                                  .cls-50 {
                                    fill: #4cc194;
                                  }
                                  .cls-51 {
                                    fill: url(#linear-gradient-22);
                                  }
                                  .cls-52 {
                                    fill: url(#linear-gradient-26);
                                  }
                                  .cls-53 {
                                    fill: #b26abf;
                                  }
                                  .cls-54 {
                                    fill: #2d1baa;
                                  }
                                  .cls-55 {
                                    fill: url(#linear-gradient-9);
                                  }
                                  .cls-87 {
                                    font-size: 4.72px;
                                  }
                                  .cls-56 {
                                    fill: url(#linear-gradient-11);
                                    opacity: .5;
                                  }
                                  .cls-88 {
                                    font-size: 3.14px;
                                  }
                                  .cls-57 {
                                    fill: #f5a856;
                                  }
                                  .cls-58 {
                                    fill: #f4f4f4;
                                  }
                                  .cls-59 {
                                    fill: #c58cea;
                                  }
                                  .cls-92 {
                                    font-size: 1.54px;
                                  }
                                  .cls-89 {
                                    font-size: 2.84px;
                                  }
                                  .cls-93 {
                                    font-size: 2.56px;
                                  }
                                  .cls-60 {
                                    fill: #caffeb;
                                  }
                                  .cls-61 {
                                    fill: url(#linear-gradient-8);
                                  }
                                  .cls-62 {
                                    fill: #ff5a85;
                                  }
                                  .cls-63 {
                                    fill: url(#linear-gradient-18);
                                  }
                                  .cls-64 {
                                    fill: #ff7694;
                                  }
                                  .cls-65 {
                                    mix-blend-mode: overlay;
                                  }
                                  .cls-65 {
                                    fill: #ec9955c0;
                                  }
                                  .cls-78 {
                                    fill: #1d1768;
                                  }
                                  .cls-90 {
                                    font-size: 3.82px;
                                  }
                                  .cls-66 {
                                    fill: #3626b2;
                                  }
                                  .cls-67 {
                                    fill: url(#linear-gradient-30);
                                  }
                                  .cls-68 {
                                    fill: #e8e8e8;
                                  }
                                  .cls-69 {
                                    fill: #33aa79;
                                  }
                                  .cls-70 {
                                    fill: url(#linear-gradient-29);
                                  }
                                  .cls-71 {
                                    fill: #1e1596;
                                  }
                                  .cls-72 {
                                    fill: #ff9fb8;
                                  }
                                  .cls-73 {
                                    fill: url(#linear-gradient-28);
                                  }
                                  .cls-74 {
                                    fill: url(#linear-gradient-10);
                                  }
                                  .cls-75 {
                                    fill: url(#linear-gradient-27);
                                  }
                                  .cls-76 {
                                    fill: #1d1d1b;
                                  }
                                  .cls-77 {
                                    fill: url(#linear-gradient-25);
                                  }
                                  .cls-80 {
                                    fill: url(#linear-gradient-2);
                                  }
                                  .cls-91 {
                                    font-size: 5.39px;
                                  }
                                  .cls-81 {
                                    fill: #010233;
                                  }
                                  .cls-82 {
                                    fill: #3523b5;
                                  }
                                  .cls-83 {
                                    fill: #010233;
                                  }
                                  .shake-animation {
                                    display: inline-block;
                                    animation: shake 9s ease-in-out infinite; /* Animation duration is 2 seconds, easing function is 'ease-in-out', and it repeats infinitely */
                                  }
                                  @keyframes shake {
                                    0%,
                                    100% {
                                      transform: rotate(0deg);
                                      transform-origin: 50% 100%;
                                    }
                                  
                                    10% {
                                      transform: rotate(.05deg);
                                    }
                                  
                                    20%,
                                    40%,
                                    60% {
                                      transform: rotate(-.2deg);
                                    }
                                  
                                    30%,
                                    50%,
                                    70% {
                                      transform: rotate(.2deg);
                                    }
                                  
                                    80% {
                                      transform: rotate(-.1deg);
                                    }
                                  
                                    90% {
                                      transform: rotate(.1deg);
                                    }
                                  }

                                  @keyframes upDown {
                                    0% {
                                      transform: translateY(0);
                                    }
                                    50% {
                                      transform: translateY(-5px); /* Move up by 20px */
                                    }
                                    100% {
                                      transform: translateY(0); /* Move back to the original position */
                                    }
                                  }
                                  @keyframes sideX {
                                    0% {
                                      transform: translateX(0);
                                    }
                                    50% {
                                      transform: translateX(-5px); /* Move up by 20px */
                                    }
                                    100% {
                                      transform: translateX(0); /* Move back to the original position */
                                    }
                                  }
                                  .sideX-animation {
                                    display: inline-block;
                                    animation: sideX 2s ease-in-out infinite; /* Animation duration is 2 seconds, easing function is 'ease-in-out', and it repeats infinitely */
                                  }
                                  
                                  
                                  .up-down-animation {
                                    display: inline-block;
                                    animation: upDown 2s ease-in-out infinite; /* Animation duration is 2 seconds, easing function is 'ease-in-out', and it repeats infinitely */
                                  }
                                  
                                  .up-down-animation1 {
                                    display: inline-block;
                                    animation: upDown 3s ease-in-out infinite alternate-reverse; /* Animation duration is 2 seconds, easing function is 'ease-in-out', and it repeats infinitely */
                                  }
                                  @keyframes fadeIn {
                                    0% {
                                      opacity: 0;
                                    }
                                    100% {
                                      opacity: 1;
                                    }
                                  }
                                  
                                  .fade-in-animation {
                                    opacity: 0; /* Ensure the element is initially hidden */
                                    animation: fadeIn 1s ease-in forwards; /* Animation duration is 2 seconds, easing function is 'ease-in', and the animation stops at 100% */
                                  }
                                  

                                  
#laptop {
    width: 100%;
  
  
  }
  #laptop g {
    perspective: 150px;
  }
  #laptop .mob {
    transform: translate3d(40%, -40%, 0);
    opacity: 0;
    animation: go 1.5s cubic-bezier(0.32, 1.04, 1, 1) forwards;
    transform-style: preserve-3d;
  }
  #laptop .mob_shadow {
    transform-style: preserve-3d;
    transform: translate3d(9%, -5%, 0);
    opacity: 0;
    animation: go 1.6s cubic-bezier(0.32, 1.04, 1, 1) forwards;
  }
  #laptop .float_up {
    transform: translate3d(20px, -15%, 0);
    transform-style: preserve-3d;
    animation: go 1s cubic-bezier(0.32, 1.04, 1, 1) forwards 1.5s;
    opacity: 0;
  }
  #laptop .float_down {
    transform: translate3d(0px, 3%, 0);
    transform-style: preserve-3d;
    animation: go 1s cubic-bezier(0.32, 1.04, 1, 1) forwards 1.5s;
    opacity: 0;
  }
  #laptop .zoom_in {
    transform: scale(0);
    animation: go 0.8s cubic-bezier(0.32, 1.04, 1, 1) forwards 1.6s;
  }
  #laptop .scale_y {
    transform: scaleY(0);
    transform-origin: top;
    animation: go 1s ease-out forwards 1.7s;
  }
  #laptop .clock {
    opacity: 0;
  }
  #laptop .clock:nth-child(1) {
    animation: show 1s ease-out forwards 0.9s;
  }
  #laptop .clock:nth-child(2) {
    animation: show 1s ease-out forwards 1.3s;
  }
  #laptop .clock:nth-child(3) {
    animation: show 1s ease-out forwards 1.7s;
  }
  #laptop .clock:nth-child(4) {
    animation: show 1s ease-out forwards 2.1s;
  }
  #laptop .clock:nth-child(5) {
    animation: show 1s ease-out forwards 2.5s;
  }
  #laptop .float_h {
    opacity: 0;
    transform: translate3d(-10%, -10%, 0);
    animation: go 1s ease-out forwards 1.6s;
  }
  #laptop .float_h:nth-child(odd) {
    transform: translate3d(10%, 10%, 0);
  }
  #laptop .lines g, #laptop .lines path {
    opacity: 0;
  }
  #laptop .lines g:nth-child(1), #laptop .lines path:nth-child(1) {
    animation: show 1s ease-out forwards 0.9545454545s infinite alternate;
  }
  #laptop .lines g:nth-child(2), #laptop .lines path:nth-child(2) {
    animation: show 1s ease-out forwards 1.4090909091s infinite alternate;
  }
  #laptop .lines g:nth-child(3), #laptop .lines path:nth-child(3) {
    animation: show 1s ease-out forwards 1.8636363636s infinite alternate;
  }
  #laptop .lines g:nth-child(4), #laptop .lines path:nth-child(4) {
    animation: show 1s ease-out forwards 2.3181818182s infinite alternate;
  }
  #laptop .lines g:nth-child(5), #laptop .lines path:nth-child(5) {
    animation: show 1s ease-out forwards 2.7727272727s infinite alternate;
  }
  #laptop .lines g:nth-child(6), #laptop .lines path:nth-child(6) {
    animation: show 1s ease-out forwards 3.2272727273s infinite alternate;
  }
  #laptop .lines g:nth-child(7), #laptop .lines path:nth-child(7) {
    animation: show 1s ease-out forwards 3.6818181818s infinite alternate;
  }
  #laptop .lines g:nth-child(8), #laptop .lines path:nth-child(8) {
    animation: show 1s ease-out forwards 4.1363636364s infinite alternate;
  }
  #laptop .lines g:nth-child(9), #laptop .lines path:nth-child(9) {
    animation: show 1s ease-out forwards 4.5909090909s infinite alternate;
  }
  #laptop .lines g:nth-child(10), #laptop .lines path:nth-child(10) {
    animation: show 1s ease-out forwards 5.0454545455s infinite alternate;
  }
  #laptop .lines g:nth-child(11), #laptop .lines path:nth-child(11) {
    animation: show 1s ease-out forwards 5.5s infinite alternate;
  }
  #laptop .lines g:nth-child(12), #laptop .lines path:nth-child(12) {
    animation: show 1s ease-out forwards 5.9545454545s infinite alternate;
  }
  #laptop .lines g:nth-child(13), #laptop .lines path:nth-child(13) {
    animation: show 1s ease-out forwards 6.4090909091s infinite alternate;
  }
  #laptop .lines g:nth-child(14), #laptop .lines path:nth-child(14) {
    animation: show 1s ease-out forwards 6.8636363636s infinite alternate;
  }
  #laptop .charts g {
    opacity: 0;
  }
  #laptop .charts g:nth-child(1) {
    animation: show 1s ease-out forwards 1.4545454545s;
  }
  #laptop .charts g:nth-child(2) {
    animation: show 1s ease-out forwards 1.9090909091s;
  }
  #laptop .charts g:nth-child(3) {
    animation: show 1s ease-out forwards 2.3636363636s;
  }
  #laptop .charts g:nth-child(4) {
    animation: show 1s ease-out forwards 2.8181818182s;
  }
  #laptop .charts g:nth-child(5) {
    animation: show 1s ease-out forwards 3.2727272727s;
  }
  #laptop .charts g:nth-child(6) {
    animation: show 1s ease-out forwards 3.7272727273s;
  }
  #laptop .charts g:nth-child(7) {
    animation: show 1s ease-out forwards 4.1818181818s;
  }
  #laptop .charts g:nth-child(8) {
    animation: show 1s ease-out forwards 4.6363636364s;
  }
  #laptop .charts g:nth-child(9) {
    animation: show 1s ease-out forwards 5.0909090909s;
  }
  #laptop .charts g:nth-child(10) {
    animation: show 1s ease-out forwards 5.5454545455s;
  }
  #laptop .charts g:nth-child(11) {
    animation: show 1s ease-out forwards 6s;
  }
  #laptop .charts g:nth-child(12) {
    animation: show 1s ease-out forwards 6.4545454545s;
  }
  #laptop .charts g:nth-child(13) {
    animation: show 1s ease-out forwards 6.9090909091s;
  }
  #laptop .charts g:nth-child(14) {
    animation: show 1s ease-out forwards 7.3636363636s;
  }
  @keyframes go {
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 1;
    }
  }
  @keyframes show {
    100% {
      opacity: 1;
    }
  }










  
                                  
#c3 {
  width: 100%;


}
#c3  g {
  perspective: 150px;
}
#c3  .mob {
  transform: translate3d(40%, -40%, 0);
  opacity: 0;
  animation: go 1.5s cubic-bezier(0.32, 1.04, 1, 1) forwards;
  transform-style: preserve-3d;
}
#c3  .mob_shadow {
  transform-style: preserve-3d;
  transform: translate3d(9%, -5%, 0);
  opacity: 0;
  animation: go 1.6s cubic-bezier(0.32, 1.04, 1, 1) forwards;
}
#c3  .float_up {
  transform: translate3d(20px, -15%, 0);
  transform-style: preserve-3d;
  animation: go 1s cubic-bezier(0.32, 1.04, 1, 1) forwards 1.5s;
  opacity: 0;
}
#c3  .float_down {
  transform: translate3d(0px, 3%, 0);
  transform-style: preserve-3d;
  animation: go 1s cubic-bezier(0.32, 1.04, 1, 1) forwards 1.5s;
  opacity: 0;
}
#c3  .zoom_in {
  transform: scale(0);
  animation: go 0.8s cubic-bezier(0.32, 1.04, 1, 1) forwards 1.6s;
}
#c3  .scale_y {
  transform: scaleY(0);
  transform-origin: top;
  animation: go 1s ease-out forwards 1.7s;
}
#c3  .clock {
  opacity: 0;
}
#c3  .clock:nth-child(1) {
  animation: show 1s ease-out forwards 0.9s;
}
#c3  .clock:nth-child(2) {
  animation: show 1s ease-out forwards 1.3s;
}
#c3  .clock:nth-child(3) {
  animation: show 1s ease-out forwards 1.7s;
}
#c3  .clock:nth-child(4) {
  animation: show 1s ease-out forwards 2.1s;
}
#c3  .clock:nth-child(5) {
  animation: show 1s ease-out forwards 2.5s;
}
#c3  .float_h {
  opacity: 0;
  transform: translate3d(-10%, -10%, 0);
  animation: go 1s ease-out forwards 1.6s;
}
#c3  .float_h:nth-child(odd) {
  transform: translate3d(10%, 10%, 0);
}
#c3  .lines g, #c3  .lines path {
  opacity: 0;
}
#c3  .lines g:nth-child(1), #c3 .lines path:nth-child(1) {
  animation: show 1s ease-out forwards 0.9545454545s infinite alternate;
}
#c3  .lines g:nth-child(2),#c3  .lines path:nth-child(2) {
  animation: show 1s ease-out forwards 1.4090909091s infinite alternate;
}
#c3  .lines g:nth-child(3), #c3  .lines path:nth-child(3) {
  animation: show 1s ease-out forwards 1.8636363636s infinite alternate;
}
#c3  .lines g:nth-child(4),#c3  .lines path:nth-child(4) {
  animation: show 1s ease-out forwards 2.3181818182s infinite alternate;
}
#c3  .lines g:nth-child(5), #c3  .lines path:nth-child(5) {
  animation: show 1s ease-out forwards 2.7727272727s infinite alternate;
}
#c3  .lines g:nth-child(6), #c3  .lines path:nth-child(6) {
  animation: show 1s ease-out forwards 3.2272727273s infinite alternate;
}
#c3  .lines g:nth-child(7), #c3  .lines path:nth-child(7) {
  animation: show 1s ease-out forwards 3.6818181818s infinite alternate;
}
#c3  .lines g:nth-child(8), #c3  .lines path:nth-child(8) {
  animation: show 1s ease-out forwards 4.1363636364s infinite alternate;
}
#c3  .lines g:nth-child(9), #c3  .lines path:nth-child(9) {
  animation: show 1s ease-out forwards 4.5909090909s infinite alternate;
}
#c3  .lines g:nth-child(10), #c3  .lines path:nth-child(10) {
  animation: show 1s ease-out forwards 5.0454545455s infinite alternate;
}
#c3  .lines g:nth-child(11), #c3  .lines path:nth-child(11) {
  animation: show 1s ease-out forwards 5.5s infinite alternate;
}
#c3  .lines g:nth-child(12), #c3  .lines path:nth-child(12) {
  animation: show 1s ease-out forwards 5.9545454545s infinite alternate;
}
#c3  .lines g:nth-child(13), #c3  .lines path:nth-child(13) {
  animation: show 1s ease-out forwards 6.4090909091s infinite alternate;
}
#c3  .lines g:nth-child(14), #c3  .lines path:nth-child(14) {
  animation: show 1s ease-out forwards 6.8636363636s infinite alternate;
}
#c3  .charts g {
  opacity: 0;
}
#c3  .charts g:nth-child(1) {
  animation: show 1s ease-out forwards 1.4545454545s;
}
#c3  .charts g:nth-child(2) {
  animation: show 1s ease-out forwards 1.9090909091s;
}
#laptop .charts g:nth-child(3) {
  animation: show 1s ease-out forwards 2.3636363636s;
}
#c3  .charts g:nth-child(4) {
  animation: show 1s ease-out forwards 2.8181818182s;
}
#c3  .charts g:nth-child(5) {
  animation: show 1s ease-out forwards 3.2727272727s;
}
#c3  .charts g:nth-child(6) {
  animation: show 1s ease-out forwards 3.7272727273s;
}
#c3  .charts g:nth-child(7) {
  animation: show 1s ease-out forwards 4.1818181818s;
}
#c3  .charts g:nth-child(8) {
  animation: show 1s ease-out forwards 4.6363636364s;
}
#c3  .charts g:nth-child(9) {
  animation: show 1s ease-out forwards 5.0909090909s;
}
#laptop .charts g:nth-child(10) {
  animation: show 1s ease-out forwards 5.5454545455s;
}
#c3  .charts g:nth-child(11) {
  animation: show 1s ease-out forwards 6s;
}
#c3  .charts g:nth-child(12) {
  animation: show 1s ease-out forwards 6.4545454545s;
}
#c3  .charts g:nth-child(13) {
  animation: show 1s ease-out forwards 6.9090909091s;
}
#c3  .charts g:nth-child(14) {
  animation: show 1s ease-out forwards 7.3636363636s;
}


.rotate {
  animation: hero-circle-1 10s linear 0s infinite;
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}
@keyframes hero-circle-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/* fade-in and fade-out animation */
.fade-in {
  animation: fadeIn ease 5s;
  -webkit-animation: fadeIn ease 5s;
  -moz-animation: fadeIn ease 5s;
  -o-animation: fadeIn ease 5s;
  -ms-animation: fadeIn ease 5s;
}
.fade-out {
  animation: fadeOut ease 5s;
  -webkit-animation: fadeOut ease 5s;
  -moz-animation: fadeOut ease 5s;
  -o-animation: fadeOut ease 5s;
  -ms-animation: fadeOut ease 5s;
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-moz-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}

@-o-keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}




.waviy {
  position: relative;
  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
  font-size: 40px;

}
.waviy span {

  position: relative;
  display: inline-block;

  text-transform: uppercase;
  animation: waviy 1s infinite;
  animation-delay: calc(.1s * var(--i));
  
}

@keyframes waviy {
  0%,40%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-2px)
  }
}


/*===========================================================
04: keyframes CSS
=============================================================*/

/* // 4.1: mymove */
@keyframes mymove {
  0% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  100% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
/* // 4.2: circle */
@keyframes circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* // 4.3: marquee */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* // 4.4: marquee-2 */
@keyframes marquee-2 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/* // 4.5: spin */
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* // 4.6: circle-animation */
@keyframes circle-animation {
  0% {
    stroke-dashoffset: 314.16;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* // 4.7: rotate */
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* // 4.8: rotateReverse */
@keyframes rotateReverse {
  to {
    transform: rotate(-360deg);
  }
}

/* // 4.9: pulse-border */
@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

/* // 4.10: fadeInUp */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}




.shine {
  position: relative;
  overflow: hidden;
  transition: all 400ms ease;
  border-radius: 24px;
  
}
.shine img{
width: 100% !important;
}


  .shine::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    content: "";
    display: block;
    height: 100%;
    left: -50%;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 2;
    overflow: hidden;
  }
  .shine:hover::before, .shine:focus::before {
    animation: shine 0.85s;
    transition: all 400ms ease;
  }
  @keyframes shine {
  
  
    100% {
      left: 45%;
    }
  }
  


  .nice-shine img{
    --a: 1deg; /* control the angle of rotation (the smaller, the better) */

    aspect-ratio: 1;
    border-radius: 20px;
    transform: perspective(400px) rotate3d(var(--r,1,-1),0,calc(var(--i,1)*var(--a)));
    -webkit-mask: 
      linear-gradient(135deg,rgba(0, 0, 0, 0.932) 40%,#000,rgba(0, 0, 0, 0.822) 60%)
      100% 100%/250% 250%;
    transition: .4s;
    cursor: pointer;
  }
  .nice-shine.alt {
    --r: 1,1;
    -webkit-mask: 
      linear-gradient(45deg,#000c 40%,#000,#000c 60%)
      0 100%/250% 250%;
  }
  .nice-shine img:hover {
    --i: -1;
    -webkit-mask-position: 0 0;
  }
  .nice-shine .alt:hover {
    -webkit-mask-position: 100% 0;
  }
  
  .nice-shine1 img{
    --a: -2deg; /* control the angle of rotation (the smaller, the better) */

    aspect-ratio: 1;
    border-radius: 20px;
    transform: perspective(400px) rotate3d(var(--r,1,-1),0,calc(var(--i,1)*var(--a)));
    -webkit-mask: 
      linear-gradient(135deg,rgba(0, 0, 0, 0.938) 40%,#000,rgba(0, 0, 0, 0.788) 60%)
      100% 100%/250% 250%;
    transition: .4s;
    cursor: pointer;
  }
  .nice-shine1.alt {
    --r: 1,1;
    -webkit-mask: 
      linear-gradient(45deg,#000c 40%,#000,#000c 60%)
      0 100%/250% 250%;
  }
  .nice-shine1 img:hover {
    --i: -1;
    -webkit-mask-position: 0 0;
  }
  .nice-shine1 .alt:hover {
    -webkit-mask-position: 100% 0;
  }