body {
  width: "100v";
  overflow-x: hidden;
  font-family: "Work Sans", sans-serif;
}

.visible {
  animation: fadeIn 1.5s ease-out both;

}

.anim_from_left {
  animation: movFromLeft 1.5s ease-out both;

}

.anim_from_right {
  animation: movFromRight 1.5s ease-out both;

}

.anim_from_top {
  animation: movFromTop 1.5s ease-out both;
}

.anim_from_bottom {
  animation: movFromBottom 1.5s ease-out both;
}


.anim_logo {
  animation: movLogo 1.5s ease-out both
}


.anim_godown {
  animation: godown 2s ease-out infinite;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes movFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes movFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes movFromBottom {
  from {
    opacity: 0;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(-50px);
  }
}

@keyframes movFromTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes movLogo {
  from {
    transform: translate(20px, -20px);
    scale: 2;
    rotate: 90deg;
  }

  to {
    transform: translate(0, 0);
    rotate: 0deg;
  }
}

@keyframes godown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(10px);
    opacity: 0.7;
  }

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


.parallax {
  background-image: url("./assets/mosaic.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}




/* Scrollbar para navegadores WebKit (Chrome, Edge, Safari) */
.scroll-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: #f4f4f5;
  /* gris muy claro */
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  /* gris medio (cool) */
  border-radius: 10px;
  border: 2px solid #f4f4f5;
  /* efecto de espacio alrededor */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
  /* un poco más oscuro al pasar el mouse */
}

/* Firefox */
.scroll-container {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f4f4f5;
}