@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-color: #1e40af; /* blue-800 */
  --secondary-color: #f97316; /* orange-500 */
}

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

.btn-primary {
  @apply bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-8 rounded-lg transition duration-300;
}

.btn-secondary {
  @apply bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 text-white font-medium py-3 px-8 rounded-lg transition duration-300;
}

.section-title {
  @apply text-3xl font-bold text-gray-900 mb-12 text-center;
}

.card {
  @apply bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:shadow-lg hover:-translate-y-1;
}

.process-step {
  @apply text-center p-6;
}

.process-number {
  @apply mx-auto bg-blue-100 text-blue-800 rounded-full w-12 h-12 flex items-center justify-center mb-4 font-bold;
}

.benefit-item {
  @apply flex items-start mb-6;
}

.benefit-icon {
  @apply flex-shrink-0 mt-1;
}

.benefit-content {
  @apply ml-4;
}

.sector-list {
  @apply space-y-4 text-gray-700;
}

.sector-item {
  @apply flex items-center;
}

.sector-check {
  @apply text-green-500 mr-2;
}

.contact-form {
  @apply space-y-6;
}

.form-group {
  @apply mb-4;
}

.form-label {
  @apply block text-sm font-medium mb-1;
}

.form-input {
  @apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500;
}

.form-select {
  @apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500;
}

.form-textarea {
  @apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500;
}

.submit-btn {
  @apply w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-8 rounded-lg transition duration-300;
}

.contact-info {
  @apply mt-12 text-center;
}
.contact-link {
  @apply text-orange-400 hover:text-orange-300;
}
/* Shake animation for images on load */
.vibrated-element {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -20px, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(0, 20px, 0); }
}

/* Floating animation for drone images */
.floating-element {
  animation: float 3s ease-in-out infinite;
  transition: all 0.3s ease;
}

.hovered-element {
  transition: transform 0.3s ease;
}

.hovered-element:hover {
  transform: scale(1.05) translateY(-5px);
}

@keyframes float {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) translateX(5px) rotate(2deg);
  }
  50% {
    transform: translateY(0px) translateX(10px) rotate(0deg);
  }
  75% {
    transform: translateY(10px) translateX(5px) rotate(-2deg);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
}

/* Animated drone styles */
#animated-drone {
  animation: fly 40s infinite linear;
  transform-origin: center;
}
@keyframes fly {
  0% {
    top: 10%;
left: -5%;
    transform: rotate(0deg) scale(0.6) translateX(0);
  }
  5% {
    top: 20%;
    left: 5%;
    transform: rotate(5deg) scale(0.6) translateX(2px);
  }
  10% {
    top: 15%;
    left: 15%;
    transform: rotate(-5deg) scale(0.6) translateX(-2px);
  }
  15% {
    top: 25%;
    left: 25%;
    transform: rotate(10deg) scale(0.6) translateX(3px);
  }
  20% {
    top: 10%;
    left: 35%;
    transform: rotate(-10deg) scale(0.6) translateX(-3px);
  }
  25% {
    top: 30%;
    left: 45%;
    transform: rotate(15deg) scale(0.6) translateX(2px);
  }
  30% {
    top: 20%;
    left: 55%;
    transform: rotate(-15deg) scale(0.6) translateX(-2px);
  }
  35% {
    top: 35%;
    left: 65%;
    transform: rotate(20deg) scale(0.6) translateX(1px);
  }
  40% {
    top: 15%;
    left: 75%;
    transform: rotate(-20deg) scale(0.6) translateX(-1px);
  }
  45% {
    top: 25%;
    left: 85%;
    transform: rotate(10deg) scale(0.6) translateX(2px);
  }
  50% {
    top: 20%;
    left: 95%;
    transform: rotate(-10deg) scale(0.6) translateX(-2px);
  }
  55% {
    top: 30%;
    left: 85%;
    transform: rotate(5deg) scale(0.6) translateX(1px);
  }
  60% {
    top: 10%;
    left: 75%;
    transform: rotate(-5deg) scale(0.6) translateX(-1px);
  }
  65% {
    top: 20%;
    left: 65%;
    transform: rotate(10deg) scale(0.6) translateX(3px);
  }
  70% {
    top: 15%;
    left: 55%;
    transform: rotate(-10deg) scale(0.6) translateX(-3px);
  }
  75% {
    top: 25%;
    left: 45%;
    transform: rotate(15deg) scale(0.6) translateX(2px);
  }
  80% {
    top: 30%;
    left: 35%;
    transform: rotate(-15deg) scale(0.6) translateX(-2px);
  }
  85% {
    top: 20%;
    left: 25%;
    transform: rotate(20deg) scale(0.6) translateX(1px);
  }
  90% {
    top: 15%;
    left: 15%;
    transform: rotate(-20deg) scale(0.6) translateX(-1px);
  }
  95% {
    top: 25%;
    left: 5%;
    transform: rotate(10deg) scale(0.6) translateX(2px);
  }
  100% {
    top: 10%;
    left: -5%;
    transform: rotate(0deg) scale(0.6) translateX(0);
  }
}