/* Brand Colors */
:root {
    --brand-orange: #FF6B00;
    --brand-orange-light: #FF8533;
    --brand-orange-dark: #CC5500;
    --brand-black: #1A1A1A;
    --brand-gray-dark: #333333;
}

/* Tailwind Extensions */
@layer components {
    /* Button Styles */
    .btn-primary {
        @apply inline-flex items-center justify-center px-6 py-3 border border-transparent 
               text-base font-medium rounded-md text-white bg-brand-orange 
               hover:bg-brand-orange-light transition-colors duration-300;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-3 border border-brand-orange 
               text-base font-medium rounded-md text-brand-orange bg-white 
               hover:bg-gray-50 transition-colors duration-300;
    }

    /* Card Styles */
    .feature-card {
        @apply relative group bg-white rounded-xl shadow-lg overflow-hidden 
               transform transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl;
    }

    .feature-card-image {
        @apply relative h-80 w-full overflow-hidden;
    }

    .feature-card-image img {
        @apply h-full w-full object-cover object-center transform transition-transform 
               duration-300 group-hover:scale-105;
    }

    .feature-card-content {
        @apply p-6;
    }

    /* Section Styles */
    .section-title {
        @apply text-3xl font-extrabold text-brand-black mb-4;
    }

    .section-subtitle {
        @apply mt-4 max-w-2xl mx-auto text-xl text-gray-600;
    }

    .section-padding {
        @apply py-16;
    }

    /* Container Styles */
    .container-custom {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    /* Grid Layouts */
    .grid-3-cols {
        @apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
    }

    .grid-4-cols {
        @apply grid gap-8 md:grid-cols-2 lg:grid-cols-4;
    }

    /* Animation Classes */
    .hover-lift {
        @apply transform transition-all duration-300 hover:-translate-y-2;
    }

    .hover-scale {
        @apply transform transition-all duration-300 hover:scale-105;
    }

    /* Text Styles */
    .heading-1 {
        @apply text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl;
    }

    .heading-2 {
        @apply text-3xl font-extrabold;
    }

    .heading-3 {
        @apply text-xl font-bold;
    }

    /* Stats Card */
    .stats-card {
        @apply text-center;
    }

    .stats-number {
        @apply text-4xl font-bold text-brand-orange;
    }

    .stats-label {
        @apply text-gray-600;
    }

    /* Navigation Styles */
    .nav-link {
        @apply py-4 px-2 text-gray-500 font-semibold hover:text-brand-orange transition duration-300;
    }

    .nav-link-active {
        @apply py-4 px-2 text-brand-orange font-semibold;
    }

    /* Footer Styles */
    .footer-heading {
        @apply text-lg font-semibold mb-4;
    }

    .footer-link {
        @apply text-gray-400 hover:text-brand-orange transition duration-300;
    }
}

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

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out;
}

/* AOS Custom Styles */
[data-aos] {
    pointer-events: none;
}
[data-aos].aos-animate {
    pointer-events: auto;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .container-custom {
        @apply px-4;
    }
    
    .heading-1 {
        @apply text-3xl sm:text-4xl;
    }
}