body {
      font-family: 'Inter', sans-serif;
    }

    @keyframes fadeUp {
      0% {
        opacity: 0;
        transform: translateY(40px);
      }

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

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .animate-title {
      animation: fadeUp 1s ease forwards;
    }

    .animate-text {
      animation: fadeUp 1.2s ease forwards;
    }

    .animate-btn {
      animation: fadeUp 1.4s ease forwards;
    }

    .animate-bg {
      animation: fadeIn 2s ease forwards;
    }

    .letter {
      display: inline-block;
      transition: transform 0.15s ease, color 0.15s ease;
      cursor: default;
    }

    .letter:hover {
      animation: letterWobble 0.4s ease forwards;
      color: #1156ea;
    }

    @keyframes letterWobble {
      0% {
        transform: translateY(0) rotate(0deg);
      }

      25% {
        transform: translateY(-8px) rotate(-5deg);
      }

      50% {
        transform: translateY(2px) rotate(3deg);
      }

      75% {
        transform: translateY(-4px) rotate(-2deg);
      }

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



    /*       

      @keyframes slide {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-50%);
        }
      }


      
      @keyframes slide {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-50%);
        }
      }

      @keyframes rotate3d {
        from {
          transform: perspective(1000px) rotateY(0deg);
        }

        to {
          transform: perspective(1000px) rotateY(360deg);
        }
      }

     */
    /* 
    .carousel-3d {
      transform-style: preserve-3d;
      animation: rotate 20s linear infinite;
    }

    .carousel-item {
      position: absolute;
      top: 0;
      left: 0;
    }

    @keyframes rotate {
      from {
        transform: perspective(1000px) rotateY(0deg);
      }

      to {
        transform: perspective(1000px) rotateY(360deg);
      }
    } */