style.css

/* Base Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
}

/* Card Styles */
.service-card {
    @apply rounded-xl p-6 text-white shadow-md transition-all duration-300 hover:shadow-lg;
}

.service-card i {
    @apply w-12 h-12 p-3 bg-white bg-opacity-20 rounded-full mb-4;
}

.service-card h3 {
    @apply text-xl font-bold mb-2;
}

.service-card p {
    @apply text-white text-opacity-80;
}

/* Flow Diagram */
.flow-diagram {
    @apply flex flex-wrap justify-center items-center;
}

.flow-step {
    @apply flex flex-col items-center px-4 py-6 rounded-lg bg-indigo-50 mx-2 my-2;
    min-width: 150px;
}

.flow-icon {
    @apply w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3;
}

.flow-arrow {
    @apply text-gray-400 mx-2;
    display: none;
}

@media (min-width: 768px) {
    .flow-diagram {
        @apply flex-nowrap;
    }
    .flow-arrow {
        display: block;
    }
}

/* Custom infographic elements */
.highlight-box {
    @apply border-l-4 border-indigo-500 bg-indigo-50 pl-4 py-2 my-4;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .service-card {
        @apply p-4;
    }
}