main.css

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

.featureCard:hover .featureCardIcon {
  background-image: linear-gradient(30.55deg, #6ac7ff 11.05%, #148aff 90.09%);
  box-shadow: 0px 2px 22px rgb(202 202 202 / 25%);
}

.featureCard:hover .featureCardSVG {
  filter: drop-shadow(0px 2px 22px rgba(202, 202, 202, 0.25));
  stroke-opacity: 0 !important;
}
.featureCard:hover .featureCardBox {
  background-image: url("/Images/features-wave.svg");
  background-repeat: no-repeat;
  background-position: bottom 1rem right;
}

.featureCard2:hover .featureCardBox {
  background-image: url("/Images/features2-wave.svg");
  background-repeat: no-repeat;
  background-position: bottom 1rem right;
}

.featureCard2:hover .featureCardSVG {
  filter: drop-shadow(0px 2px 24px rgba(0, 0, 0, 0.4));
  stroke-opacity: 0 !important;
}

.featureCard2:hover .featureCardIcon {
  background-image: linear-gradient(
    188.57deg,
    #2095ff -16.05%,
    #6416ff 116.32%
  );
  box-shadow: 0px 2px 24px rgb(0 0 0 / 40%);
  transition: all 200ms ease-in-out;
}

.coreFeaturesBg {
  background-size: 2000px 100%;
  padding-top: 20rem;
  padding-bottom: 20rem;
}

@media screen and (min-width: 1000px) {
  .coreFeaturesBg {
    background-size: 100% 100%;
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
}

.compniesList {
  animation: 10s infinite linear moveCompany;
}

@keyframes moveCompany {
  0% {
    top: 0;
  }
  100% {
    top: -50%;
  }
}



.ctaBg {
  background-size: 200% 100%;
}

.ctaSection {
  min-height: 880px;
}

@media screen and (min-width: 1024px) {
  .ctaBg {
    background-size: 100% 100%;
  }

  .ctaSection {
    min-height: 530px;
  }
}

.newFeatureCard {
  box-shadow: 2px 4px 9px 1px hsla(0, 0%, 0%, 0.05);
}