@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-taxi-yellow { background-color: #FFCC00; }
    .bg-taxi-dark { background-color: #1A1A1A; }
    .text-taxi-yellow { color: #FFCC00; }
    .text-taxi-dark { color: #1A1A1A; }
    .border-taxi-yellow { border-color: #FFCC00; }
    
    .btn-taxi {
        @apply inline-flex items-center justify-center bg-[#FFCC00] text-[#1A1A1A] font-sans font-bold uppercase tracking-wider py-4 px-8 rounded-lg shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300;
    }
    
    .btn-taxi-dark {
        @apply inline-flex items-center justify-center bg-[#1A1A1A] text-white font-sans font-bold uppercase tracking-wider py-4 px-8 rounded-lg shadow-lg hover:bg-black transition-all duration-300;
    }
    
    .nav-link {
        @apply text-white hover:text-[#FFCC00] font-sans font-semibold text-sm transition-colors duration-300;
    }
    .nav-link.active {
        @apply text-[#FFCC00];
    }
    
    .service-card {
        @apply bg-white rounded-xl shadow-md p-8 border-t-4 border-[#FFCC00] hover:shadow-2xl hover:-translate-y-2 transition-all duration-300;
    }
}