html {
  scroll-behavior: smooth;
}

#wrapper-canvas {
  display: block;
}
#wrapper-canvas canvas {
  max-width: 100%;
}
#wrapper-canvas canvas {
    height: 100vh !important;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-shadow {
  box-shadow: 0 0 20px rgba(227, 69, 182, 0.5);
}

.dark .carousel-shadow {
  box-shadow: 0 0 20px rgba(23, 136, 174, 0.5);
}

.swiper-button-next,.swiper-button-prev {
  color: #e345b6 !important;
}

.dark .swiper-button-next,.dark .swiper-button-prev {
  color: #1788ae !important;
}
.swiper-pagination-bullet{
  background-color: #26bcee !important;
}

.modal-logo-g {
    stroke: url(#logoGradientModalLight);
}

.dark .modal-logo-g {
    stroke: url(#logoGradientModal);
}

@media(max-width:900px){
  .model_flex_box{
    flex-direction: column-reverse;
  }
  .mern_text{
    display: flex;
    text-align: center;
    justify-content: center;
  }
}
/* main logo coding */
@keyframes flip-main_logo {
  0% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  13.33% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }
  16.67% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }
  26.67% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
  33.33% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  }
}

.animate-main-logo {
  animation: flip-main_logo 3s infinite;
}

/* model logo coding */
@keyframes flip-with-delay {
  0% {
    transform: perspective(1800px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }
  13.33% {
    transform: perspective(1800px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }
  16.67% {
    transform: perspective(1800px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }
  26.67% {
    transform: perspective(1800px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
  33.33% {
    transform: perspective(1800px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(1800px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  }
}

.animate-flip-delayed {
  animation: flip-with-delay 3s infinite;
}


@keyframes color-change {
  0%, 12.9% {
    stroke: url(#logoGradientModalLight);
  }
  13%, 37.9% {
    stroke: url(#logoGradientModal);
  }
  38%, 62.9%{
    stroke: url(#logoGradientModal);
  }
  63%,87.9%{
    stroke: url(#logoGradientModalLight);
  }
  100% {
    stroke: url(#logoGradientModalLight);
  }
}

.animate-color-change {
  animation: color-change 6s infinite;
}