/* Custom styles that complement Tailwind */
body {
    font-family: 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;
}

@layer components {
    .btn {
        @apply transition-all duration-300 ease-in-out transform hover:scale-105;
    }

    .service-card {
        @apply bg-gray-700 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300;
    }

    .service-icon {
        @apply w-12 h-12 bg-red-600 rounded-full flex items-center justify-center text-white;
    }

    /* Smooth scrolling for anchor links */
    html {
        scroll-behavior: smooth;
    }

    /* Hero section overlay */
    #hero::before {
        content: '';
        @apply absolute inset-0 bg-black bg-opacity-40 -z-10;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
    @apply bg-red-600 rounded-full;
}

/* Animation for service cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.service-card {
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
}

/* Delay animations for each card */
.service-card:nth-child(1) {
    animation-delay: 0.1s;
}

.service-card:nth-child(2) {
    animation-delay: 0.2s;
}

.service-card:nth-child(3) {
    animation-delay: 0.3s;
}

.service-card:nth-child(4) {
    animation-delay: 0.4s;
}

.service-card:nth-child(5) {
    animation-delay: 0.5s;
}

.service-card:nth-child(6) {
    animation-delay: 0.6s;
}