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

::-webkit-scrollbar-track{
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb{
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #555;
}

body {
  overflow-x: hidden;
}


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

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .hover-float:hover {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .animate-fadeIn {
    animation-name: fadeIn;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-10px) translateX(5px); }
  }

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

  @keyframes moveRight {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }

  .animate-slider {
    animation: moveRight 20s linear infinite;
  }

  .grayscale-hover img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
  }

  .grayscale-hover img:hover {
    filter: grayscale(0%);
  }

 /* Initial state */
 .aoe-text {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.aoe-image {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.aoe-image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: width 0.8s ease-out, height 0.8s ease-out, opacity 0.8s ease-out;
}

.aoe-image img {
  transition: transform 0.5s ease;
}

/* Visible state */
.aoe-text.visible {
  opacity: 1;
  transform: scale(1);
}

.aoe-image.visible {
  opacity: 1;
  transform: scale(1);
}

.aoe-image.visible::before {
  width: 150%;
  height: 150%;
  opacity: 0;
}

.aoe-image:hover img {
  transform: scale(1.03);
}


        /* Initial state */
        .aoe-text {
          opacity: 0;
          transform: scale(0.95);
          transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      
      .aoe-card {
          opacity: 0;
          transform: translateY(20px) scale(0.98);
          transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          position: relative;
          overflow: hidden;
      }
      
      .aoe-image-container {
          position: relative;
          display: inline-block;
      }
      
      .aoe-image {
          transition: all 0.4s ease;
          transform: scale(0.9);
          opacity: 0;
      }
      
      .aoe-card::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: rgba(74, 222, 128, 0.1);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          z-index: 0;
          transition: all 0.8s ease-out;
      }
      
      /* Visible state */
      .aoe-text.visible {
          opacity: 1;
          transform: scale(1);
      }
      
      .aoe-card.visible {
          opacity: 1;
          transform: translateY(0) scale(1);
      }
      
      .aoe-card.visible::before {
          width: 300%;
          height: 300%;
          opacity: 0;
      }
      
      .aoe-card.visible .aoe-image {
          transform: scale(1);
          opacity: 1;
      }
      
      /* Hover effects */
      .aoe-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
      }
      
      .aoe-card:hover .aoe-image {
          transform: scale(1.05);
      }