@layer components {
  .gradient-text {
    @apply bg-gradient-to-r from-cyan-500 to-pink-500 bg-clip-text text-transparent inline-block;
  }

  .phone-frame {
    @apply relative mx-auto border-8 border-gray-900 bg-gray-900 rounded-3xl h-96 w-72 shadow-2xl;
  }

  .phone-frame::before {
    content: '';
    @apply absolute top-0 left-1/2 transform -translate-x-1/2 w-32 h-7 bg-gray-900 rounded-b-3xl z-10;
  }

  .phone-content {
    @apply w-full h-full bg-gradient-to-br from-blue-100 to-pink-100 rounded-2xl flex items-center justify-center text-6xl;
  }
}

/* Animações customizadas */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

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

.animate-slide-up {
  animation: slideInUp 0.8s ease-out;
}

.animate-slide-left {
  animation: slideInLeft 0.8s ease-out;
}

.animate-slide-right {
  animation: slideInRight 0.8s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.8s ease-out;
}

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

/* .whatsapp {
  width: 50px;
  right: 55px;
  position: fixed!important;
  bottom: 95px;
}

#whatsapp-box-text {
  background: #fff;
  color: #333;
  position: fixed!important;
  width: 130px;
  bottom: 55px;
  right: 122px;
  font-size: 16px;
  line-height: 15px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
  visibility: hidden;
} */