/* General Styles */
        .lazy-image {
  opacity: 0; /* Start invisible */
  transition: opacity 1s ease-in-out; /* Smooth fade-in */
}

.lazy-image.loaded {
  opacity: 1; /* Fully visible when loaded */
}
        /* Background */
        .background {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* Floating animation */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
            will-change: transform;
        }

        .delay-200 {
            animation-delay: 0.8s;
        }

        /* Gradient animation */
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .animate-gradient {
            background-size: 200% 200%;
            animation: gradient 10s ease infinite;
        }

        /* Sticky menu */
        .sticky-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(22, 22, 22, 0.9); /* bg-stone-900 con opacidad */
            backdrop-filter: blur(10px); /* Efecto de desenfoque */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para destacar el menú */
            transition: background-color 0.3s ease, height 0.3s ease, padding 0.3s ease;
        }

        /* Logo más pequeño en sticky */
        .sticky-menu .logo img {
            width: 80px; /* Tamaño reducido del logo */
            transition: width 0.3s ease; /* Transición suave */
        }

        /* Floating arrows */
        @keyframes moveUp {
            0% {
                transform: translateY(100vh);
                opacity: 0;
            }
            20% {
                opacity: 1;
            }
            100% {
                transform: translateY(-10vh);
                opacity: 0;
            }
        }

        .arrow {
            position: absolute;
            width: 30px;
            height: 30px;
            animation: moveUp linear infinite;
            will-change: transform, opacity;
        }

        #hamburger {
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 20px;
			z-index: 999;
        }

        #hamburger div {
            width: 100%;
            height: 3px;
            background-color: white;
            transition: all 0.3s ease;
			
        }

        #hamburger.open div:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        #hamburger.open div:nth-child(2) {
            opacity: 0;
        }

        #hamburger.open div:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        #mobileMenu {
            position: absolute;
            top: 100;
            left: 0;
            width: 100%;
            background-color: rgba(22, 22, 22, 0.9);
            transform: translateY(-100%);
            opacity: 0;
            transition: transform 0.5s ease, opacity 0.5s ease;
            z-index: 80;
        }

        #mobileMenu.menu-open {
            transform: translateY(0);
            opacity: 1;
        }

        .overflow-hidden {
            overflow: hidden;
        }

 
/*Transitions hero*/
 
    /* Title transitions */
    .title {
      transition: all 0.5s ease-in-out;
    }

    .title:hover {
      transform: scale(1.05);
      color: #fbbf24; /* Golden color */
    }
      
    /* Button transitions */
    button {
      transition: all 0.3s ease-in-out;
    }

    button:hover {
      transform: scale(1.1);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    }

    button:active {
      transform: scale(0.95);
    }

    /* Fade-in animation */
   .fade-in {
	  opacity: 1; /* Asegura que el texto sea visible inmediatamente */
	  animation: fadeIn 1s ease-in-out 0.5s; /* Aplica la animación después de 0.5s */
	}

	@keyframes fadeIn {
	  from {
		opacity: 0;
	  }
	  to {
		opacity: 1;
	  }
	}

    /* Background transitions */
    .background {
      transition: opacity 1s ease, transform 1s ease;
    }

    .background:hover {
      opacity: 0.3;
      transform: scale(1.1);
    }

  /* Animation for infinite scrolling */
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    .scrolling-logos {
      display: flex;
      animation: scroll 40s linear infinite;
    }
@media (max-width:768px){
	.scrolling-logos {
       
      animation: scroll 10s linear infinite;
    }
}