@tailwind base;
@tailwind components;
@tailwind utilities;

#root {
  /* max-width: 1280px; */
  margin: 0 auto;
  text-align: center;
}

.hero{
  background-image: url("../grd.svg");
  background-position: top;
  background-size: 185%;
  background-repeat: no-repeat;
  /* animation: bgmove 30s ease infinite; */
}

@media screen and (min-width: 640px){
  .hero{
    background-size: 85%;
    background-position: 5rem;
  }
}

.getRouteImg{
  background-image: url("../public/img.png");
}

::-webkit-scrollbar{
  width: 8px;
  height: 0px;
  background-color: #d2d2d2;
}

::-webkit-scrollbar-thumb{
  background-color: #373737;
  border-radius: 50px;
}

/* .moving-grid-background {
  will-change: transform;
  background-size: 2rem 2rem;
  background-image: linear-gradient(to right, rgba(0, 98, 255, 0.381) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.199) 1px, transparent 1px);
  animation: movingbackground 50s linear infinite !important;
} */

@keyframes movingbackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -50%);
  }
}

.animated-feature-cards::before {
  @apply pointer-events-none absolute select-none rounded-3xl opacity-0 transition-opacity duration-300 hover:opacity-100;
  background: radial-gradient(
    1000px circle at var(--x) var(--y),
    #f05ce6 0,
    #f28e15 25%,
    rgba(255, 255, 255, 0) 50%,
    transparent 80%
  );
  z-index: -1;
  content: '';
  inset: -1px;
}
