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

@layer base {
  html {
    scroll-behavior: smooth;
    font-family: gilroyMedium;
  }

  @font-face {
    font-family: gilroyMedium;
    src: url("../fonts/gilroy-medium.ttf") format("truetype");
  }

  @font-face {
    font-family: gilroyRegular;
    src: url("../fonts/gilroy-regular.ttf") format("truetype");
  }

  @font-face {
    font-family: gilroyBold;
    src: url("../fonts/gilroy-bold.ttf") format("truetype");
  }

  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
  }

  ::-webkit-scrollbar-track {
    box-shadow: none;
    background: #f1f1f1;
  }

  ::selection {
    background-color: #000000;
    color: #fff;
  }

  input[type="number"] {
    -moz-appearance: none;
    margin: 0;
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

.active {
  color: #fff !important;
}

/* .active {
  @apply font-semibold rounded-md lg:rounded-none w-full bg-[#171717] lg:bg-transparent inline-block py-1 lg:py-0;
} */

.active {
  @apply font-semibold;
}

.active_bar {
  @apply lg:hidden w-7 h-1 bg-[#fff] inline-flex mr-3 rounded-sm;
}

.nav-link {
  @apply text-graphite capitalize lg:text-[15px] text-2xl font-gilroyMedium w-full inline-flex items-center;
}

.btn-track {
  @apply text-white text-base capitalize p-[9px] border min-w-[120px] inline-block text-center rounded-lg hover:bg-gradient-to-br from-[#114FEE]
 to-[#FF0066] hover:border-black;
}

.btn-login {
  @apply text-black bg-white text-base capitalize p-[9px] border min-w-[120px] inline-block text-center rounded-lg hover:bg-gradient-to-br from-[#FF0066] to-[#114FEE] hover:border-black hover:text-white;
}

.iMockup {
  @apply w-64;
}

/* Text Animated Gradient */

.animate-gradient {
  background-size: 300%;
  -webkit-animation: animatedgradient 6s ease infinite alternate;
  -moz-animation: animatedgradient 6s ease infinite alternate;
  animation: animatedgradient 6s ease infinite alternate;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Text Animated Gradient */

/* SVG Animated Gradient */

@keyframes gradientAnimationSVG_process_automation {
  0% {
    stop-color: #114fee;
  }
  50% {
    stop-color: #ff0066;
  }
  100% {
    stop-color: #ffff00;
  }
}

@keyframes gradientAnimationSVG_logistics_learning {
  0% {
    stop-color: #ff0066;
  }
  50% {
    stop-color: #114fee;
  }
  100% {
    stop-color: #ffff00;
  }
}

@keyframes gradientAnimationSVG_predictive_analysis {
  0% {
    stop-color: #ffff00;
  }
  50% {
    stop-color: #ff0066;
  }
  100% {
    stop-color: #114fee;
  }
}

#logistics_learning_0 stop,
#logistics_learning_1 stop {
  animation: gradientAnimationSVG_logistics_learning 6s infinite alternate;
}

#predictive_analysis_0 stop {
  animation: gradientAnimationSVG_predictive_analysis 6s infinite alternate;
}

#process_automation_0 stop,
#process_automation_1 stop,
#process_automation_2 stop,
#process_automation_3 stop,
#process_automation_4 stop,
#process_automation_5 stop {
  animation: gradientAnimationSVG_process_automation 6s infinite alternate;
}

/* SVG Animated Gradient */

.roll-in-left {
  -webkit-animation: roll-in-left 0.6s ease-out both;
  animation: roll-in-left 0.6s ease-out both;
}

@-webkit-keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.roll-in-right {
  -webkit-animation: roll-in-right 0.6s ease-out both;
  animation: roll-in-right 0.6s ease-out both;
}

@-webkit-keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-right {
  0% {
    -webkit-transform: translateX(800px) rotate(540deg);
    transform: translateX(800px) rotate(540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.gradient-bg {
  background-image: url("/assets/images/gradient-1.svg");
}

.gradient-bg_2 {
  background-image: url("/assets/images/gradient-22.svg");
  background-repeat: no-repeat;
  background-position: center right;
}

.gradient-bg_3 {
  background-image: url("/assets/images/gradient-2.svg");
  background-repeat: no-repeat;
  background-position: bottom right;
}

.gradient-bg_4 {
  background-image: url("/assets/images/gradient-4.svg");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 668px;
}

.gradient-bg_5 {
  background-image: url("/assets/images/gradient-222.svg");
  background-repeat: no-repeat;
  background-position: top right;
}

.gradient-bubble-bg_1 {
  background-image: url("/assets/images/gradient-bubble-1.svg");
  /* background-repeat: no-repeat; */
  /* background-position: bottom right; */
  /* background-size: 458px; */
}

.gradient-bubble-bg_2 {
  background-image: url("/assets/images/gradient-bubble-2.svg");
  /* background-repeat: no-repeat; */
  /* background-position: bottom left; */
  /* background-size: 608px; */
}