/* ============================================
   Global Web Page Styles
   Based on About Us page styling patterns
   ============================================ */

/* ============================================
   Header Height Variable
   ============================================ */
:root {
    --header-height: 176px; /* Top bar (~40px) + Navigation (~136px with logo) */
}

@media (max-width: 768px) {
    :root {
        --header-height: 120px; /* Smaller on mobile */
    }
}

/* Ensure body accounts for fixed header */
body {
    padding-top: 0; /* Header is fixed, content starts below */
}

/* Hero section spacing to account for fixed header */
.hero-spacing {
    padding-top: calc(var(--header-height) + 2rem);
}

@media (min-width: 768px) {
    .hero-spacing {
        padding-top: calc(var(--header-height) + 3rem);
    }
}

/* ============================================
   Animations
   ============================================ */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes blob {
    0%, 100% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-gradient {
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* ============================================
   Background Patterns
   ============================================ */
.bg-grid-pattern {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

.bg-dot-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ============================================
   Card Styles
   ============================================ */
.job-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1;
}

.category-card {
    @apply bg-white dark:bg-gray-800/90 backdrop-blur-sm rounded-2xl p-6 border-2 border-gray-200 dark:border-white/10 hover:border-blue-500/50 hover:shadow-2xl transition-all duration-300 hover:-translate-y-2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.95) 100%);
}

.dark .category-card {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.95) 100%);
}

.stat-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-200 dark:border-white/10 hover:shadow-lg transition-all duration-300;
}

.service-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2;
}

.contact-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2;
}

.partner-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2;
}

.testimonial-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2;
}

.blog-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
}

.pricing-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2;
}

.country-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400;
}

/* ============================================
   Button Styles
   ============================================ */
.btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200;
}

.btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200;
}

.btn-gradient {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
}

/* ============================================
   Form Styles
   ============================================ */
.form-input {
    @apply w-full px-5 py-4 bg-white dark:bg-gray-800/90 border-2 border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300 text-gray-900 dark:text-white text-base;
    backdrop-filter: blur(10px);
}

.form-input:hover {
    @apply border-gray-300 dark:border-gray-600;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.form-select {
    @apply w-full pl-4 pr-10 py-3 bg-white dark:bg-gray-800/50 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 appearance-none bg-no-repeat bg-right-2 text-gray-900 dark:text-white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.form-textarea {
    @apply w-full px-5 py-4 bg-white dark:bg-gray-800/90 border-2 border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300 text-gray-900 dark:text-white min-h-[150px] resize-y text-base;
    backdrop-filter: blur(10px);
}

.form-textarea:hover {
    @apply border-gray-300 dark:border-gray-600;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.form-textarea:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

/* Legacy form class support */
.input {
    @apply form-input;
}

.label {
    @apply block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2;
}

/* ============================================
   Icon Styles
   ============================================ */
.service-icon {
    @apply w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white text-2xl mb-6 shadow-lg;
}

.contact-icon {
    @apply w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white text-xl mb-4 shadow-lg;
}

.category-icon {
    @apply w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center text-white text-2xl mb-4 shadow-lg;
}

.country-flag {
    @apply w-16 h-12 rounded shadow-md mb-4 object-cover;
}

/* ============================================
   FAQ Styles
   ============================================ */
.faq-item {
    @apply mb-4 overflow-hidden transition-all duration-300;
}

.faq-question {
    @apply w-full text-left px-6 py-4 font-semibold flex justify-between items-center bg-white dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-white/10 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-300 text-gray-900 dark:text-white;
}

.faq-answer {
    @apply px-6 py-4 border-l-2 border-blue-500 ml-6 mt-2 text-gray-700 dark:text-gray-300;
}

.faq-answer.show {
    @apply block animate-fadeIn;
}

.faq-icon {
    @apply transition-transform duration-300;
}

.faq-icon.rotated {
    @apply transform rotate-180;
}

/* ============================================
   Breadcrumb Styles
   ============================================ */
.breadcrumb {
    @apply flex items-center py-4 text-sm font-medium text-gray-500 dark:text-gray-400;
}

.breadcrumb-link {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors duration-200;
}

.breadcrumb-separator {
    @apply flex-shrink-0 mx-2 h-5 w-5 text-gray-300 dark:text-gray-600;
}

.breadcrumb-current {
    @apply text-gray-600 dark:text-gray-300;
}

/* ============================================
   Section Styles
   ============================================ */
.section-gradient-light {
    @apply bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-gray-800;
}

.section-gradient-blue {
    @apply bg-gradient-to-r from-blue-600 to-indigo-700;
}

.section-gradient-purple {
    @apply bg-gradient-to-r from-blue-700 to-purple-700;
}

/* ============================================
   Badge Styles
   ============================================ */
.badge-modern {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-sm;
}

.badge-blue {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300;
}

.badge-green {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
}

.badge-red {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300;
}

/* ============================================
   Map Container
   ============================================ */
.map-container {
    @apply rounded-2xl overflow-hidden shadow-2xl border border-gray-200 dark:border-gray-700;
    height: 400px;
}

/* ============================================
   Form Success/Error Messages
   ============================================ */
.form-success {
    @apply bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-500/30 text-green-700 dark:text-green-300 p-4 rounded-lg mb-6;
}

.form-error {
    @apply bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-500/30 text-red-700 dark:text-red-300 p-4 rounded-lg mb-6;
}

/* ============================================
   Blog Post Styles
   ============================================ */
.post-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
}

.blog-image {
    @apply w-full h-64 object-cover transition-transform duration-700 group-hover:scale-105;
}

.post-image {
    @apply w-full h-48 object-cover transition-transform duration-700 group-hover:scale-105;
}

.blog-category-badge {
    @apply px-3 py-1 bg-blue-500/20 dark:bg-blue-500/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-semibold border border-blue-400/30;
}

.category-badge {
    @apply px-3 py-1 bg-blue-500/20 dark:bg-blue-500/30 text-blue-700 dark:text-blue-300 rounded-full text-xs font-semibold border border-blue-400/30;
}

/* ============================================
   Pricing Styles
   ============================================ */
.price-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2;
}

.price-card.featured {
    @apply bg-gradient-to-br from-blue-600/20 via-purple-600/20 to-blue-800/20 border-blue-500/30 scale-105 hover:scale-[1.06];
}

.pricing-feature-item {
    @apply flex items-start space-x-3 text-gray-700 dark:text-gray-300;
}

.price-feature {
    @apply flex items-start space-x-3 text-gray-300 dark:text-gray-400;
}

.price-feature svg {
    @apply w-5 h-5 text-green-400 mt-0.5 flex-shrink-0;
}

.pricing-feature-check {
    @apply w-5 h-5 text-green-400 mt-0.5 flex-shrink-0;
}

.pricing-featured {
    @apply bg-gradient-to-br from-blue-600/20 via-purple-600/20 to-blue-800/20 border-blue-500/30 scale-105 hover:scale-[1.06];
}

.payment-method-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm border border-gray-200 dark:border-white/10 rounded-xl p-6 cursor-pointer transition-all duration-300 hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:border-blue-500/50;
}

.payment-method-card.selected {
    @apply bg-blue-500/20 dark:bg-blue-500/30 border-blue-500/50;
}

.invoice-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-xl transition-all duration-300;
}

.status-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm;
}

.bank-details-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-200 dark:border-white/10 shadow-sm;
}

.detail-row {
    @apply flex justify-between items-center py-3 border-b border-gray-200 dark:border-gray-700 last:border-0;
}

/* ============================================
   Job Detail Styles
   ============================================ */
.job-header-gradient {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.dark .job-header-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.apply-button {
    transition: all 0.3s ease;
}

.apply-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.job-tag {
    @apply px-3 py-1 rounded-full text-sm font-medium transition-colors duration-200 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300;
}

.job-detail-item {
    @apply flex items-start space-x-3 py-3 border-b border-gray-100 dark:border-gray-700 last:border-0;
}

.job-detail-icon {
    @apply flex-shrink-0 h-5 w-5 text-blue-500 dark:text-blue-400 mt-0.5;
}

/* ============================================
   Partner/Company Styles
   ============================================ */
.partner-feature {
    @apply flex items-start space-x-4 p-6 rounded-xl transition-all duration-300 hover:bg-white/5 dark:hover:bg-gray-700/50;
}

.partner-feature-icon {
    @apply w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white text-xl flex-shrink-0 shadow-lg;
}

.partner-item {
    @apply flex items-start space-x-4 p-6 rounded-xl transition-all duration-300 hover:bg-white/5 dark:hover:bg-gray-700/50;
}

.partner-icon {
    @apply w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white text-xl flex-shrink-0 shadow-lg;
}

/* ============================================
   Testimonial Styles
   ============================================ */
.testimonial-avatar {
    @apply w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 flex items-center justify-center text-white text-2xl font-bold shadow-lg;
}

.rating {
    @apply flex items-center mb-4;
}

.rating svg {
    @apply w-5 h-5 text-yellow-400;
}

.testimonial-rating {
    @apply flex items-center mb-4;
}

.testimonial-star {
    @apply w-5 h-5 text-yellow-400;
}

.testimonial-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
}

/* ============================================
   Prose/Typography Styles
   ============================================ */
.prose {
    @apply text-gray-700 dark:text-gray-300;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    @apply text-gray-900 dark:text-white font-semibold mt-8 mb-4;
}

.prose p {
    @apply mb-5 leading-relaxed;
}

.prose a {
    @apply text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline;
}

.prose ul,
.prose ol {
    @apply mb-5 pl-6;
}

.prose li {
    @apply mb-2;
}

.prose blockquote {
    @apply border-l-4 border-blue-500 pl-4 italic my-6 text-gray-600 dark:text-gray-400;
}

.prose code {
    @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm;
}

.prose pre {
    @apply bg-gray-900 dark:bg-gray-950 p-4 rounded-lg overflow-x-auto mb-6;
}

.prose img {
    @apply rounded-lg shadow-lg my-6;
}

.prose table {
    @apply w-full border-collapse mb-6;
}

.prose th,
.prose td {
    @apply border border-gray-300 dark:border-gray-700 px-4 py-2;
}

.prose th {
    @apply bg-gray-100 dark:bg-gray-800 font-semibold;
}

.article-content {
    position: relative;
}

.article-content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

/* ============================================
   Utility Classes
   ============================================ */
.blob {
    filter: blur(60px);
    opacity: 0.2;
}

.gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-effect {
    @apply bg-white/10 dark:bg-gray-800/50 backdrop-blur-md border border-white/20 dark:border-white/10;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Modern Card (from modern-enhancements.css) */
.modern-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Modern Input (from modern-enhancements.css) */
.modern-input {
    border-radius: 0.75rem;
    border: 2px solid #e5e7eb;
    padding: 0.875rem 1rem;
    transition: all 0.3s ease;
}

.modern-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Feature Card (from modern-enhancements.css) */
.feature-card {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Section Gradients (from modern-enhancements.css) */
.section-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Pulse Animation (from modern-enhancements.css) */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Smooth Scroll (from modern-enhancements.css) */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar (from modern-enhancements.css) */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Enhanced Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.dark .glass-card {
    background: rgba(17, 24, 39, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Futuristic Button Styles */
.btn-futuristic {
    @apply relative inline-flex items-center justify-center px-8 py-4 text-base font-bold rounded-xl overflow-hidden transition-all duration-300;
    color: #ffffff !important;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
    background-size: 200% 200%;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    animation: gradient 3s ease infinite;
}

.btn-futuristic * {
    color: #ffffff !important;
}

.btn-futuristic::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.btn-futuristic:hover::before {
    left: 100%;
}

.btn-futuristic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Enhanced Card Hover Effects */
.job-card:hover,
.category-card:hover,
.service-card:hover,
.contact-card:hover,
.partner-card:hover,
.testimonial-card:hover,
.blog-card:hover,
.pricing-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Gradient Backgrounds */
.bg-gradient-radial {
    background: radial-gradient(circle, var(--tw-gradient-stops));
}

/* Enhanced Text Contrast */
.text-contrast {
    @apply text-gray-900 dark:text-white;
}

.text-contrast-light {
    @apply text-gray-700 dark:text-gray-300;
}

/* Section Spacing */
.section-spacing {
    @apply py-16 md:py-24;
}

/* Hero Section Enhancements */
.hero-search-form {
    @apply bg-white/95 dark:bg-gray-900/95 backdrop-blur-md rounded-2xl shadow-2xl overflow-hidden border-2 border-white/20 dark:border-white/10;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.hero-search-input {
    @apply w-full px-4 py-4 bg-transparent border-0 focus:ring-0 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 text-base font-medium;
    transition: all 0.3s ease;
}

.hero-search-input:focus {
    @apply outline-none;
    background: rgba(255, 255, 255, 0.1);
}

.hero-search-input::placeholder {
    @apply text-gray-500 dark:text-gray-400;
    font-weight: 400;
}

.hero-search-form select.hero-search-input {
    @apply cursor-pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
    appearance: none;
}

/* Statistics Section */
.stat-number {
    @apply text-5xl md:text-6xl font-bold text-white mb-2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.stat-label {
    @apply text-blue-100 text-lg font-medium;
}

/* Step Cards */
.step-card {
    @apply relative pt-10 pb-8 px-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300;
}

.step-number {
    @apply absolute -top-6 left-1/2 transform -translate-x-1/2 w-12 h-12 rounded-full bg-gradient-to-r from-blue-600 to-purple-600 text-white flex items-center justify-center text-xl font-bold shadow-lg;
}

/* Testimonial Enhancements */
.testimonial-card {
    @apply bg-white dark:bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow duration-300;
}

/* CTA Section */
.cta-section {
    @apply relative py-20 bg-gradient-to-br from-blue-600 to-blue-800 overflow-hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 20px 20px;
    opacity: 0.1;
}

/* Social Media Icons */
.social-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:shadow-lg;
}

/* Form Enhancements */
.form-label {
    @apply block text-sm font-bold text-gray-800 dark:text-gray-200 mb-3 uppercase tracking-wide;
    letter-spacing: 0.05em;
}

.form-label-required::after {
    content: ' *';
    @apply text-red-500 ml-1;
    font-weight: 700;
}

/* Map Container Enhancements */
.map-container iframe {
    @apply w-full h-full border-0 rounded-2xl;
}

/* Contact Card Enhancements */
.contact-info-item {
    @apply flex items-start space-x-4 p-4 rounded-xl transition-all duration-300 hover:bg-white/5 dark:hover:bg-gray-700/50;
}

/* Popular Searches */
.popular-search-link {
    @apply text-sm font-semibold text-white/90 hover:text-white transition-all duration-200 px-3 py-1.5 rounded-lg hover:bg-white/10 backdrop-blur-sm;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.popular-search-link:hover {
    transform: translateY(-1px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.popular-search-separator {
    @apply text-white/40 mx-1;
}

/* Enhanced Hero Search Form */
.hero-search-form-enhanced {
    @apply bg-white/98 dark:bg-gray-900/98 backdrop-blur-xl rounded-3xl shadow-2xl overflow-hidden border-2 border-white/30 dark:border-white/10;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 100px rgba(59, 130, 246, 0.1);
    animation: float 6s ease-in-out infinite;
}

.hero-search-input-enhanced {
    @apply w-full px-5 py-5 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 rounded-xl border-2 border-gray-200 dark:border-gray-700 focus:border-blue-500 focus:ring-4 focus:ring-blue-500/20 transition-all duration-300 text-lg font-medium;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.hero-search-input-enhanced:hover {
    @apply border-gray-300 dark:border-gray-600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.hero-search-input-enhanced:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 8px 20px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.hero-search-form-enhanced select.hero-search-input-enhanced {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 1.25rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 3.5rem;
    appearance: none;
}

.btn-hero-search {
    @apply relative inline-flex items-center justify-center px-10 py-5 text-lg font-bold text-white rounded-xl overflow-hidden transition-all duration-300;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
    background-size: 200% 200%;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    animation: gradient 3s ease infinite;
}

.btn-hero-search:hover {
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    transform: translateY(-2px) scale(1.02);
}

.popular-search-link-enhanced {
    @apply relative text-sm font-bold text-white/95 hover:text-white transition-all duration-300 px-4 py-2 rounded-xl;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.popular-search-link-enhanced:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.popular-search-separator-enhanced {
    @apply text-white/50 mx-1 text-lg;
}

/* Enhanced Category Cards */
.category-card-enhanced {
    @apply bg-white dark:bg-gray-800/90 backdrop-blur-sm rounded-2xl p-8 border-2 border-gray-200 dark:border-white/10 hover:border-blue-500/50 hover:shadow-2xl transition-all duration-300 hover:-translate-y-3;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.dark .category-card-enhanced {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%);
}

.category-card-enhanced:hover {
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.category-icon-enhanced {
    position: relative;
}

.category-icon-enhanced::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.category-card-enhanced:hover .category-icon-enhanced::before {
    opacity: 1;
}

/* Enhanced Contact Form */
.form-group-enhanced {
    @apply relative;
}

/* Enhanced Form Styles */
.form-group-enhanced {
    @apply mb-6;
}

.form-label-enhanced {
    @apply block text-sm font-bold text-gray-800 dark:text-gray-200 mb-3 flex items-center;
    letter-spacing: 0.025em;
}

.form-label-enhanced svg {
    @apply flex-shrink-0;
}

.form-label-required::after {
    content: ' *';
    @apply text-red-500 ml-1;
    font-weight: 700;
}

.form-input-enhanced {
    @apply w-full px-6 py-4 bg-white dark:bg-gray-800/90 border-2 border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-300 text-gray-900 dark:text-white text-base font-medium;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-input-enhanced:hover {
    @apply border-gray-300 dark:border-gray-600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.form-input-enhanced:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 8px 20px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.form-textarea-enhanced {
    @apply w-full px-6 py-4 bg-white dark:bg-gray-800/90 border-2 border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-4 focus:ring-blue-500/20 focus:border-blue-500 transition-all duration-300 text-gray-900 dark:text-white min-h-[180px] resize-y text-base font-medium;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-textarea-enhanced:hover {
    @apply border-gray-300 dark:border-gray-600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.form-textarea-enhanced:focus {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 8px 20px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.btn-contact-submit {
    @apply relative inline-flex items-center justify-center px-12 py-5 text-lg font-bold text-white rounded-xl overflow-hidden transition-all duration-300;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
    background-size: 200% 200%;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    animation: gradient 3s ease infinite;
}

.btn-contact-submit:hover {
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    transform: translateY(-2px) scale(1.02);
}

.btn-contact-submit * {
    color: #ffffff !important;
}

/* Button text colors for light/dark theme */
.btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white dark:text-white font-semibold px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300;
}

.btn-secondary {
    @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white border-2 border-gray-300 dark:border-gray-600 font-semibold px-6 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-300;
}

/* Ensure buttons have visible text */
button[class*="bg-white"],
button[class*="bg-gray-50"],
a[class*="bg-white"] {
    @apply text-gray-900 dark:text-gray-100;
}

button[class*="bg-blue"],
button[class*="bg-purple"],
button[class*="bg-gradient"],
a[class*="bg-blue"],
a[class*="bg-purple"],
a[class*="bg-gradient"] {
    @apply text-white;
}

/* Job filter improvements */
.job-filter-card {
    @apply bg-white dark:bg-gray-800/90 backdrop-blur-sm border-2 border-gray-200 dark:border-gray-700 rounded-2xl shadow-lg p-6;
}

.job-filter-section {
    @apply space-y-4 pb-6 border-b border-gray-200 dark:border-gray-700 last:border-0 last:pb-0;
}

.job-filter-label {
    @apply block text-sm font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2;
}

.job-filter-input {
    @apply w-full px-4 py-3 bg-white dark:bg-gray-700/50 border-2 border-gray-200 dark:border-gray-600 rounded-xl text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300;
}

.job-filter-select {
    @apply w-full px-4 py-3 bg-white dark:bg-gray-700/50 border-2 border-gray-200 dark:border-gray-600 rounded-xl text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300;
}

/* Social icons */
.social-icon {
    @apply w-12 h-12 rounded-full flex items-center justify-center text-white text-lg transition-all duration-300 hover:scale-110 hover:shadow-lg;
}

/* ============================================
   Responsive Grid Adjustments
   ============================================ */
@media (max-width: 768px) {
    .testimonial-grid {
        @apply grid-cols-1;
    }
    
    .pricing-featured {
        @apply scale-100;
    }
}