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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.8) 50%,
        rgba(0, 0, 0, 0.95) 100%
    );
}

/* Navigation Styles */
.navbar {
    @apply fixed top-0 left-0 right-0 z-50 transition-all duration-300;
}

.navbar-content {
    @apply backdrop-blur-xl bg-black/70 border-b border-white/10
           transition-all duration-300;
}

.navbar.scrolled .navbar-content {
    @apply bg-black/90 shadow-lg shadow-black/30;
}

/* Desktop Navigation */
.nav-link {
    @apply relative px-4 py-2 text-gray-300 hover:text-white 
           text-sm font-medium transition-all duration-200;
}

.nav-link::after {
    content: '';
    @apply absolute left-0 -bottom-[1.5px] h-[2px] w-0 
           bg-gradient-to-r from-red-500 to-red-600
           transition-all duration-300;
}

.nav-link:hover::after,
.nav-link.active::after {
    @apply w-full;
}

.nav-link.active {
    @apply text-white;
}

/* Search Animation */
.search-wrapper {
    @apply relative hidden sm:block;
}

.search-input {
    @apply w-64 bg-white/10 text-white pl-10 pr-4 py-2.5 rounded-xl
           border border-white/10 focus:border-red-500 
           focus:ring-1 focus:ring-red-500 focus:outline-none
           placeholder-gray-400 transition-all duration-300;
}

.search-input:focus {
    @apply bg-white/20 border-red-500;
}

.search-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2 text-gray-400
           transition-colors duration-200 pointer-events-none;
}

/* Button Styles */
.btn-primary {
    @apply bg-gradient-to-r from-red-600 to-red-700 
           hover:from-red-700 hover:to-red-800
           text-white rounded-xl px-6 py-2.5 font-medium
           transition-all duration-300 hover:scale-[1.02]
           focus:outline-none focus:ring-2 focus:ring-red-500 
           focus:ring-offset-2 focus:ring-offset-black
           shadow-lg shadow-red-700/30;
}

/* Mobile Menu */
.mobile-menu-btn {
    @apply sm:hidden relative z-50 w-10 h-10 flex items-center 
           justify-center rounded-full bg-white/10 
           hover:bg-white/20 transition-colors duration-200;
}

.mobile-menu {
    @apply fixed inset-0 bg-black/95 backdrop-blur-xl 
           transform transition-transform duration-300 ease-in-out
           flex flex-col items-center justify-center gap-8
           sm:hidden;
}

.mobile-menu.hidden {
    @apply translate-x-full;
}

.mobile-link {
    @apply text-2xl font-medium text-gray-300 hover:text-white
           transition-all duration-200 hover:scale-110
           transform hover:translate-x-2;
}

/* Hero Section Animation */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
/* </style> */