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

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

:root {
    --primary-color: #f96331;
}

body {
    font-family: 'Outfit', sans-serif;
    @apply text-gray-800 bg-white;
}

/* Custom Utilities for those hard-to-reach Tailwind spots */
.transition-300 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-header {
    @apply bg-white/95 backdrop-blur-md;
}

.nav-link-hover {
    @apply relative after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-[2px] after:bg-[#f96331] after:transition-all after:duration-300 hover:after:w-full hover:text-[#f96331];
}