/* Add custom styles here */
@keyframes wobble-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.animate-wobble-scale-once {
  animation: wobble-scale 0.7s ease-in-out 1;
}


.fade-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.show {
    opacity: 1;
    transform: translateX(0);
}

.logo-img {
  width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Arrow animation */
    .arrow-down {
      position: absolute;
      bottom: 40px;
      animation: bounce 2s infinite;
      cursor: pointer;
      z-index: 10;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      transition: all 0.3s ease;
    }
    
    .arrow-down:hover {
      background: rgba(255, 255, 255, 0.5);
      transform: scale(1.1);
    }
    
    .arrow-down i {
      color: #F97316;
      font-size: 24px;
    }
    
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-20px);
      }
      60% {
        transform: translateY(-10px);
      }
    }