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

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

@layer components {
    .btn {
        @apply inline-block px-6 py-3 rounded-lg font-semibold text-center transition duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
    }
    .btn-lg {
        @apply px-8 py-4 text-lg;
    }
    .btn-primary {
        @apply bg-gradient-to-r from-orange-500 to-red-500 text-white;
    }
    .btn-secondary {
        @apply bg-white text-orange-600 border border-orange-500 hover:bg-orange-50;
    }
    .btn-light {
        @apply bg-white text-orange-600 hover:bg-gray-100;
    }

    .nav-link {
        @apply text-gray-600 font-medium hover:text-orange-600 transition duration-300;
    }
    .nav-link.active {
        @apply text-orange-600 font-bold;
    }
    .dropdown-link {
        @apply block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-orange-600;
    }
    .footer-link {
        @apply text-gray-400 hover:text-white transition duration-300;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }
    .form-input {
        @apply block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500 transition;
    }

    .solution-card {
        @apply bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
    }
    
    .solution-link-card {
        @apply block bg-white p-8 rounded-lg shadow-lg transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
    }
    
    .capability-card {
        @apply bg-white p-8 rounded-lg shadow-lg text-center transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
    }
    
    .process-step-card {
        @apply bg-white p-6 rounded-lg shadow-lg text-center border-t-4 border-orange-500 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
    }

    .process-step-card .step-number {
        @apply h-12 w-12 flex items-center justify-center bg-orange-100 text-orange-600 font-bold text-xl rounded-full mx-auto mb-4;
    }

    .industry-tag {
        @apply bg-gray-200 text-gray-700 px-4 py-2 rounded-full font-medium text-sm;
    }

    .page-hero {
        @apply py-16 md:py-24 bg-white;
    }

    .product-card {
        @apply bg-white p-6 rounded-lg shadow-lg flex flex-col md:flex-row items-start md:items-center gap-6;
    }
    .product-icon {
        @apply h-16 w-16 rounded-full flex-shrink-0 flex items-center justify-center;
    }
    .product-icon i {
        @apply h-8 w-8;
    }
    .product-details {
        @apply flex-grow;
    }
    .product-title {
        @apply text-2xl font-bold mb-1;
    }
    .product-summary {
        @apply text-gray-600 mb-4;
    }
    .product-features {
        @apply mb-4;
    }
    .product-ideal-for {
        @apply text-sm text-gray-500;
    }
    .product-cta {
        @apply mt-4 md:mt-0 md:ml-6 flex-shrink-0;
    }
    
    .job-opening-card {
        @apply bg-gray-50 p-6 rounded-lg shadow-md flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 transition-all duration-300 hover:shadow-lg hover:bg-orange-50;
    }

    .industry-section {
        @apply grid md:grid-cols-2 gap-8 md:gap-12 items-center;
    }
    .industry-content { @apply md:order-first; }
    .industry-icon { @apply h-12 w-12 mb-4; }
    .industry-title { @apply text-3xl font-bold; }
    .industry-subtitle { @apply text-lg font-semibold text-gray-600 mb-4; }
    .industry-description { @apply text-gray-600; }
    .industry-list { @apply list-disc list-inside space-y-1 text-gray-600; }
    .industry-image-container { @apply h-80; }
    
    .process-timeline-item {
        @apply relative flex items-center mb-12;
    }
    .process-timeline-icon {
        @apply h-16 w-16 rounded-full flex items-center justify-center shadow-lg z-10;
    }
    .process-timeline-content {
        @apply w-full md:w-5/12 bg-white p-6 rounded-lg shadow-lg;
    }
    .process-timeline-content.left { @apply md:ml-12; }
    .process-timeline-content.right { @apply md:ml-auto md:mr-12 md:text-right; }
    @media (max-width: 767px) {
      .process-timeline-content { @apply ml-12; }
      .process-timeline-content.right { @apply ml-12 text-left; }
    }
    .process-phase-number { @apply text-sm font-bold text-orange-600 uppercase; }
    .process-phase-title { @apply text-2xl font-bold mt-1; }
    .process-phase-subtitle { @apply text-md font-semibold text-gray-600 mb-2; }
    .process-phase-body { @apply text-gray-600 mb-3; }
    .process-phase-deliverable { @apply text-sm text-gray-500; }
}

.text-gradient {
  background-image: linear-gradient(to right, #F97316, #EF4444);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient {
    background-image: linear-gradient(to right, #F97316, #EF4444);
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
}

.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}