* {
  font-family: "Nunito", sans-serif !important;
}

body {
  color: rgb(var(--foreground-rgb));
  font-family: "Nunito", sans-serif !important;
  /* background: linear-gradient(to bottom,
      transparent,
      rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); */
}

.custom-hero {
  position: relative;
  overflow: hidden;
  background-color: #ca232693;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231973d4' fill-opacity='0.52' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.stripes {
  /* background: linear-gradient(150deg, yellow 15%, blue 70%, #7a0047 94%); */
  height: 100%;
  width: 100%;
  display: flex;
  transform: skewY(-10deg);
  transform-origin: 0;
  position: absolute;
  top: 50%;
  left: 0;
  opacity: 0.8;
  background: linear-gradient(50deg, #2275b2 15%, #508eba 70%, #2275b2 94%)
}

@keyframes moveLeftRightTopBottom {
  0% {
    transform: translate(-30px, 0);
  }

  25% {
    transform: translate(0, -30px);
  }

  50% {
    transform: translate(30px, 0);
  }

  75% {
    transform: translate(0, 30px);
  }

  100% {
    transform: translate(-30px, 0);
  }
}

/* Apply the animation to your element */
.four-move {
  animation: moveLeftRightTopBottom 4s infinite;
}


.up-down {
  position: relative;
  -webkit-animation: glide 4s ease-in-out alternate infinite;
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.animated-image {
  position: relative;
  animation: moveUpDown 6s ease-in-out alternate infinite;
  -webkit-animation: moveUpDown 6s ease-in-out alternate infinite;
}

@-webkit-keyframes glide {
  from {
    left: 0px;
    top: 70px;
  }

  to {
    left: 0px;
    top: 100px;
  }

}


@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}

@media (min-width: 540px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-right: 45px;
    padding-left: 45px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding-right: 5rem;
    padding-left: 5rem;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
    padding-right: 13rem;
    padding-left: 13rem;
  }
}

@media screen and (max-width: 600px) {
  body {
    /*background-color: red;*/
    overflow-x: hidden !important;
  }
}