/* Custom CSS for codercrew Hero Section */

/* Root Variables for Dark/Light Mode */
:root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-cyan: #06b6d4;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-glow: rgba(59, 130, 246, 0.3);
}

/* Light Mode Variables */
.light {
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --glass-bg: rgba(0, 0, 0, 0.1);
    --glass-border: rgba(0, 0, 0, 0.2);
    --shadow-glow: rgba(59, 130, 246, 0.2);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    /* Unified elegant background for entire website */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #111827 50%, #1e293b 75%, #0f172a 100%);
    background-size: 400% 400%;
    animation: subtle-gradient-flow 30s ease infinite;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Subtle background animation */
@keyframes subtle-gradient-flow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Elegant floating background elements */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
    pointer-events: none !important;
    z-index: -1;
}

/* FORCE: All background elements should not block clicks */
.particles-container,
.particles-container *,
.morph-shape,
[class*="animate-float"],
[class*="animate-pulse-slow"],
.fixed.inset-0.-z-10,
.fixed.inset-0.-z-10 * {
    pointer-events: none !important;
}

/* Glassmorphism Effects */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Navigation Styles */
#main-header {
    background: rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#main-header.scrolled {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(30px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-link {
    position: relative;
    padding: 0.5rem 0;
}

.nav-indicator {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    transition: width 0.3s ease;
}

.nav-link:hover .nav-indicator,
.nav-link.active .nav-indicator {
    width: 100%;
}

/* Hamburger Menu Animation */
.hamburger {
    width: 20px;
    height: 16px;
    position: relative;
    cursor: pointer;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: white;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 0px;
}

.hamburger span:nth-child(2) {
    top: 7px;
}

.hamburger span:nth-child(3) {
    top: 14px;
}

.hamburger.active span:nth-child(1) {
    top: 7px;
    transform: rotate(135deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.hamburger.active span:nth-child(3) {
    top: 7px;
    transform: rotate(-135deg);
}

/* Mobile Menu Animation */
#mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
}

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

@keyframes float-particle {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-15px) scale(1.2);
        opacity: 1;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-12deg);
    }
    100% {
        transform: translateX(200%) skewX(-12deg);
    }
}

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

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

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 20px var(--shadow-glow);
    }
    100% {
        box-shadow: 0 0 30px var(--shadow-glow), 0 0 40px var(--shadow-glow);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
    }
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* Typing Effect */
.typing-container {
    position: relative;
    display: inline-block;
}

.typing-text {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 3s steps(30, end), blink 1s infinite;
}

.typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
    color: var(--accent-blue);
}

/* Gradient Text Effects */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 3s ease infinite;
}

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

/* Button Hover Effects */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

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

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

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}

/* CTA Button Specific Styles */
#contact-btn {
    min-height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#contact-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
}

#contact-btn i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure proper spacing on mobile */
@media (max-width: 640px) {
    #contact-btn {
        min-height: 3.25rem;
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
    }

    #contact-btn span {
        gap: 0.375rem;
    }

    #contact-btn i {
        font-size: 0.8rem;
    }
}

/* Parallax Elements */
.parallax-element {
    transition: transform 0.1s ease-out;
}

/* Service Cards Hover Effects */
.service-card {
    transition: all 0.3s ease;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.service-card:hover {
    transform: translateY(-3px) scale(1.03);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.service-card:active {
    transform: translateY(-1px) scale(1.01);
}

/* Scroll Indicator */
.scroll-indicator {
    animation: bounce 2s infinite;
}

/* Theme Toggle Button */
#theme-toggle {
    transition: all 0.3s ease;
}

#theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.3);
}

/* Background Patterns */
.bg-pattern {
    background-image: 
        radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 75px 75px, rgba(255, 255, 255, 0.05) 2px, transparent 2px);
    background-size: 100px 100px;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Navigation Mobile */
    #main-header {
        background: rgba(17, 24, 39, 0.95);
        backdrop-filter: blur(20px);
        height: 4rem; /* Fixed height for mobile */
    }

    .nav-link {
        font-size: 0.9rem;
    }

    /* Logo improvements for mobile */
    #main-header .flex.items-center.space-x-2 {
        gap: 0.5rem;
    }

    #main-header h1 {
        font-size: 1.125rem !important;
        font-weight: 700;
        line-height: 1.2;
    }

    #main-header img {
        height: 2rem !important;
        width: auto;
    }

    /* Hero Section Mobile */
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 2rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        margin-bottom: 3rem;
    }

    .service-card {
        margin-bottom: 0.75rem;
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Hide complex animations on mobile for performance */
    .floating-shapes {
        display: none;
    }

    .particles-container {
        display: none;
    }

    /* Service pills mobile optimization */
    .service-pill {
        margin-bottom: 0.75rem;
        padding: 3px; /* Extra space for glow effects */
    }

    .service-pill span {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* Ensure container has enough space for effects */
    .services-container {
        padding: 1rem;
        overflow: visible;
    }

    /* CTA Button mobile optimization */
    #contact-btn {
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
        min-height: 3.5rem;
        width: auto;
        max-width: 90vw;
    }

    #contact-btn span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    /* Service buttons mobile spacing */
    .services-container {
        gap: 0.75rem;
        padding: 0 1rem;
    }

    .services-container span {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(50vw - 1rem);
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        line-height: 1.4;
        padding: 0 0.5rem;
    }

    .container {
        padding: 0 1rem;
    }

    /* Extra small screens optimization */
    #contact-btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.9rem;
        min-height: 3.25rem;
    }

    .services-container span {
        font-size: 0.8rem;
        padding: 0.625rem 0.875rem;
        max-width: calc(100vw - 3rem);
    }

    /* Improve text contrast on small screens */
    .text-gray-200 {
        color: #f9fafb !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .text-gray-300 {
        color: #f3f4f6 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* Enhanced mobile readability */
    h1, h2, h3 {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* Service cards mobile enhancement - Professional & Subtle */
    .service-card {
        background: rgba(255, 255, 255, 0.18) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Mobile card hover effects - Subtle and professional */
    .service-card:hover,
    .service-card:active {
        background: rgba(255, 255, 255, 0.25) !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.25),
            0 2px 8px rgba(59, 130, 246, 0.1);
        transform: translateY(-2px) scale(1.01);
    }

    /* Core services cards in hero section - Mobile enhancement */
    .grid.grid-cols-2.md\\:grid-cols-4 > div {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
        will-change: transform, box-shadow;
    }

    .grid.grid-cols-2.md\\:grid-cols-4 > div:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow:
            0 6px 16px rgba(0, 0, 0, 0.2),
            0 2px 6px rgba(59, 130, 246, 0.15);
    }

    /* Icon animation enhancement for mobile */
    .grid.grid-cols-2.md\\:grid-cols-4 > div .w-12.h-12 {
        transition: all 0.3s ease;
    }

    .grid.grid-cols-2.md\\:grid-cols-4 > div:hover .w-12.h-12 {
        transform: scale(1.15) rotate(5deg);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

/* Additional mobile-specific improvements */
@media (max-width: 375px) {
    /* iPhone SE and smaller screens */
    .hero-title {
        font-size: 1.75rem;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.3;
    }

    #contact-btn {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
        min-height: 3rem;
    }

    .services-container span {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* Extra small screens logo */
    #main-header h1 {
        font-size: 1rem !important;
    }

    #main-header img {
        height: 1.75rem !important;
    }

    #main-header .flex.items-center.space-x-2 {
        gap: 0.375rem;
    }
}

/* Loading Animation */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}

/* Intersection Observer Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Performance-optimized scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 4px;
    will-change: auto;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-purple);
}

/* Smooth scrolling optimizations */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 80px; /* Account for fixed header */
}

/* Performance optimizations for all elements */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* GPU acceleration for animated elements */
.animate-slide-up,
.animate-fade-in,
.animate-slide-right,
.elegant-card,
.service-card {
    will-change: transform, opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Optimize for compositing */
    isolation: isolate;
}

/* Optimize sections for better scrolling performance */
section {
    contain: layout style paint;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Optimize body for smooth scrolling */
body {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* Performance Optimizations */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus States */
button:focus,
a:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --glass-bg: rgba(255, 255, 255, 0.3);
        --glass-border: rgba(255, 255, 255, 0.5);
    }
}

/* Advanced Hover Effects */
.hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Magnetic Button Effect */
.magnetic-btn {
    position: relative;
    transition: all 0.3s ease;
}

.magnetic-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
    background-size: 400% 400%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: gradient-rotate 3s ease infinite;
    z-index: -1;
}

.magnetic-btn:hover::before {
    opacity: 1;
}

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

/* Text Reveal Animation */
.text-reveal {
    overflow: hidden;
    position: relative;
}

.text-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #1f2937, transparent);
    transform: translateX(-100%);
    animation: text-reveal 2s ease-in-out;
}

@keyframes text-reveal {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* Particle System */
.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float 8s linear infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Advanced Loading States */
.skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Morphing Shapes */
.morph-shape {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* Enhanced Button Effects */
.bg-size-200 {
    background-size: 200% 200%;
}

.bg-pos-100 {
    background-position: 100% 0;
}

.animate-shimmer {
    animation: shimmer 1.5s ease-in-out;
}

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

/* Particles System */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(59, 130, 246, 0.6);
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float 8s linear infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Service Pills Enhanced Effects - Fixed */
.service-pill {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    overflow: visible !important; /* Allow effects to show */
    padding: 4px; /* Space for glow effects */
    margin: 2px; /* Extra margin for effects */
}

.service-pill:hover {
    transform: translateY(-3px) scale(1.02);
}

.service-pill span {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    border-radius: 9999px;
    overflow: hidden; /* Contain content within button */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.service-pill:hover span {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Glow effect behind the button */
.service-pill > div {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    z-index: 1;
    filter: blur(8px);
    transition: opacity 0.3s ease;
}

/* Container for service pills to prevent clipping */
.services-container {
    overflow: visible !important;
    padding: 1rem;
}

/* Ensure parent containers don't clip effects */
.animate-slide-up {
    overflow: visible !important;
}

/* Fix for mobile service pills container */
@media (max-width: 768px) {
    .services-container {
        padding: 1.5rem 1rem;
        gap: 1rem !important;
    }

    .service-pill {
        padding: 4px;
        margin: 0.25rem;
    }
}

/* Enhanced Glow Effects */
.animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }
    to {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 40px rgba(139, 92, 246, 0.6);
    }
}

/* Text Glow Effect */
.text-glow {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Magnetic Button Effect Enhanced */
.magnetic-btn {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.magnetic-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
    background-size: 400% 400%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: gradient-rotate 3s ease infinite;
    z-index: -1;
    filter: blur(8px);
}

.magnetic-btn:hover::before {
    opacity: 0.7;
}

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

/* 3D Transform Effects */
.transform-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.rotate-y-6 {
    transform: rotateY(6deg);
}

.rotate-x-6 {
    transform: rotateX(6deg);
}

/* Glassmorphism Enhanced */
.glass-enhanced {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Neon Border Effect */
.neon-border {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(45deg, #1f2937, #374151) padding-box,
                linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4) border-box;
}

.neon-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(10px);
}

.neon-border:hover::before {
    opacity: 0.8;
}

/* Animation Classes - Fixed */
.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

.animate-slide-up {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: visible;
    will-change: transform, opacity;
}

.animate-slide-up.animate-in,
.animate-slide-up.visible {
    opacity: 1 !important;
    transform: translateY(0) translateZ(0) !important;
    visibility: visible !important;
    will-change: auto !important; /* Remove will-change after animation */
}

.animate-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
    visibility: visible;
}

.animate-fade-in.animate-in,
.animate-fade-in.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure critical elements are always visible */
#contact-btn,
img[alt="codercrew Logo"],
h1 {
    opacity: 1 !important;
    visibility: visible !important;
}

/* CTA Button z-index fix */
#contact-btn {
    position: relative;
    z-index: 50;
}

/* Ensure proper stacking order */
.fixed {
    z-index: 40;
}

/* Contact Modal Mobile Optimizations */
@media (max-width: 768px) {
    #contact-modal {
        padding: 0;
    }

    #modal-content {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        margin: 0;
        min-height: 60vh;
        max-height: 95vh;
        width: 100% !important;
        max-width: none !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #modal-content.translate-y-0 {
        transform: translateY(0) !important;
    }

    /* Form improvements for mobile */
    #contact-form input,
    #contact-form select,
    #contact-form textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 1rem !important;
        border-radius: 0.75rem;
    }

    #contact-form label {
        font-size: 0.875rem;
        font-weight: 500;
    }

    /* Submit button mobile */
    #submit-btn {
        padding: 1rem !important;
        font-size: 1rem !important;
        font-weight: 600;
        border-radius: 0.75rem;
        min-height: 3.5rem;
    }

    /* Modal header mobile */
    #contact-modal h3 {
        font-size: 1.25rem !important;
        margin-top: 1rem;
    }

    /* Drag indicator */
    #contact-modal .absolute.top-2 {
        top: 0.75rem;
    }

    /* Prevent text selection during drag */
    #modal-content.dragging {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Safe area for iPhone X and newer */
    #modal-content {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Desktop modal improvements */
@media (min-width: 769px) {
    #modal-content {
        transform: scale(0.95) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #modal-content.scale-100 {
        transform: scale(1) !important;
    }

    /* Form grid for desktop */
    #contact-form .md\\:grid {
        display: grid;
    }
}

/* Focus states for form elements */
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
    ring-width: 2px;
    ring-color: rgb(59 130 246);
    border-color: transparent;
    outline: none;
}

/* Improved select styling */
#contact-form select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
}

/* ===================================
   SERVICES SECTION STYLES
   =================================== */

/* Elegant Card Effect - Professional & Clean */
.elegant-card {
    background: rgba(31, 41, 55, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(75, 85, 99, 0.5);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.elegant-card:hover {
    background: rgba(31, 41, 55, 0.6);
    border-color: rgba(107, 114, 128, 0.5);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

/* Service Card - Clean & Professional */
.service-card {
    position: relative;
    transition: all 0.3s ease;
}

/* Icon Container - Simple & Elegant */
.service-card .w-16.h-16 {
    transition: all 0.3s ease;
}

/* Text Gradient - Subtle & Professional */
.text-gradient-animated {
    background: linear-gradient(
        135deg,
        #3b82f6,
        #8b5cf6,
        #06b6d4
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Clean Hover States */
.service-card:hover h3 {
    color: inherit;
    transition: color 0.3s ease;
}

/* Services Section Responsive Design */
@media (max-width: 768px) {
    #services {
        padding: 4rem 0;
    }

    .elegant-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem;
        /* Enhanced mobile card effects */
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
        will-change: transform, box-shadow;
    }

    /* Mobile elegant card hover effects */
    .elegant-card:hover {
        transform: translateY(-4px) scale(1.015);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.3),
            0 4px 12px rgba(59, 130, 246, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        background: rgba(31, 41, 55, 0.7) !important;
        border-color: rgba(107, 114, 128, 0.6) !important;
    }

    .elegant-card h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .elegant-card:hover h3 {
        transform: translateY(-1px);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .elegant-card p {
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
    }

    .elegant-card:hover p {
        transform: translateY(-1px);
    }

    .w-16.h-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    .w-16.h-16 i {
        font-size: 1.25rem !important;
    }

    /* Mobile grid adjustments */
    #services .grid {
        gap: 1.5rem;
    }

    /* Section header mobile */
    #services h2 {
        font-size: 2.5rem !important;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    #services .text-xl {
        font-size: 1.125rem !important;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .elegant-card {
        padding: 1.25rem !important;
        /* Enhanced effects for very small screens */
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
    }

    .elegant-card:hover {
        transform: translateY(-3px) scale(1.01);
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.25),
            0 3px 8px rgba(59, 130, 246, 0.15);
    }

    .elegant-card h3 {
        font-size: 1.375rem !important;
        transition: all 0.3s ease;
    }

    .elegant-card:hover h3 {
        transform: translateY(-1px);
    }

    .elegant-card p {
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    .elegant-card:hover p {
        transform: translateY(-1px);
    }

    .w-16.h-16 {
        width: 3rem !important;
        height: 3rem !important;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateZ(0);
    }

    .w-16.h-16 i {
        font-size: 1rem !important;
        transition: all 0.3s ease;
    }

    /* Icon hover effects for mobile cards */
    .elegant-card:hover .w-16.h-16 {
        transform: scale(1.1) rotate(3deg) translateZ(0);
        box-shadow:
            0 6px 16px rgba(0, 0, 0, 0.25),
            0 2px 8px rgba(59, 130, 246, 0.2);
    }

    .elegant-card:hover .w-16.h-16 i {
        transform: scale(1.05);
        filter: brightness(1.1);
    }

    /* Technology tags mobile - Enhanced with subtle effects */
    .elegant-card .flex.flex-wrap span {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .elegant-card:hover .flex.flex-wrap span {
        transform: translateY(-1px) scale(1.02);
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.15),
            0 1px 3px rgba(59, 130, 246, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* Staggered animation for technology tags */
    .elegant-card:hover .flex.flex-wrap span:nth-child(1) {
        transition-delay: 0ms;
    }
    .elegant-card:hover .flex.flex-wrap span:nth-child(2) {
        transition-delay: 50ms;
    }
    .elegant-card:hover .flex.flex-wrap span:nth-child(3) {
        transition-delay: 100ms;
    }
}

/* Dark mode enhancements with professional effects */
@media (prefers-color-scheme: dark) {
    .elegant-card {
        background: rgba(17, 24, 39, 0.6);
        border-color: rgba(75, 85, 99, 0.4);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
    }

    .elegant-card:hover {
        background: rgba(17, 24, 39, 0.8);
        border-color: rgba(107, 114, 128, 0.6);
        transform: translateY(-4px) scale(1.015);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.4),
            0 4px 12px rgba(59, 130, 246, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Dark mode service cards */
    .service-card {
        background: rgba(17, 24, 39, 0.5) !important;
        border-color: rgba(75, 85, 99, 0.4) !important;
    }

    .service-card:hover {
        background: rgba(17, 24, 39, 0.7) !important;
        border-color: rgba(107, 114, 128, 0.6) !important;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(59, 130, 246, 0.15);
    }
}

/* Reduced motion preferences and performance optimizations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .service-card,
    .elegant-card,
    .text-gradient-animated,
    .animate-slide-up,
    .animate-fade-in {
        animation: none !important;
        /* Keep subtle transitions for accessibility */
        transition: opacity 0.2s ease, background-color 0.2s ease !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Maintain basic hover feedback for reduced motion users */
    .service-card:hover,
    .elegant-card:hover {
        opacity: 0.9;
        background-color: rgba(31, 41, 55, 0.7) !important;
    }
}

/* Performance optimizations for low-end devices */
@media (max-width: 768px) and (max-resolution: 150dpi) {
    .animate-slide-up,
    .animate-fade-in,
    .elegant-card,
    .service-card {
        transition-duration: 0.3s !important;
        will-change: auto !important;
        /* Simplified effects for low-end devices */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Simplified hover effects for low-end mobile */
    .elegant-card:hover,
    .service-card:hover {
        transform: translateY(-1px) translateZ(0);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        background: rgba(31, 41, 55, 0.6) !important;
    }

    /* Disable expensive effects on low-end mobile */
    .elegant-card::before,
    .service-card::before {
        display: none !important;
    }
}

/* High contrast mode with enhanced accessibility */
@media (prefers-contrast: high) {
    .elegant-card {
        background: rgba(0, 0, 0, 0.9);
        border: 2px solid #ffffff;
        transition: all 0.3s ease;
        transform: translateY(0);
    }

    .elegant-card:hover {
        background: rgba(0, 0, 0, 0.95);
        border: 3px solid #ffffff;
        transform: translateY(-2px) scale(1.01);
        box-shadow:
            0 8px 16px rgba(255, 255, 255, 0.1),
            0 4px 8px rgba(255, 255, 255, 0.05);
    }

    .elegant-card h3,
    .elegant-card p {
        color: #ffffff !important;
        transition: all 0.3s ease;
    }

    .elegant-card:hover h3,
    .elegant-card:hover p {
        transform: translateY(-1px);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
    }

    /* High contrast service cards */
    .service-card {
        background: rgba(0, 0, 0, 0.9) !important;
        border: 2px solid #ffffff !important;
    }

    .service-card:hover {
        background: rgba(0, 0, 0, 0.95) !important;
        border: 3px solid #ffffff !important;
        transform: translateY(-2px) scale(1.01);
    }
}

/* Service Card Entrance Animations */
.service-card.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Touch-specific enhancements for mobile devices */
@media (hover: none) and (pointer: coarse) {
    /* Touch device optimizations */
    .service-card,
    .elegant-card {
        /* Enhanced touch feedback */
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
        tap-highlight-color: rgba(59, 130, 246, 0.1);
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Active state for touch */
    .service-card:active,
    .elegant-card:active {
        transform: translateY(-1px) scale(0.98);
        background: rgba(31, 41, 55, 0.8) !important;
        border-color: rgba(107, 114, 128, 0.6) !important;
        transition: all 0.1s ease;
    }

    /* Touch-friendly button sizes */
    .service-card .flex.items-center,
    .elegant-card .flex.items-center {
        min-height: 44px; /* iOS recommended touch target size */
        padding: 0.75rem 0.5rem;
    }

    /* Enhanced icon touch feedback */
    .service-card .w-16.h-16,
    .elegant-card .w-16.h-16,
    .service-card .w-12.h-12 {
        transition: all 0.2s ease;
    }

    .service-card:active .w-16.h-16,
    .elegant-card:active .w-16.h-16,
    .service-card:active .w-12.h-12 {
        transform: scale(0.95);
    }
}

/* Technology Tags - Clean Style with enhanced mobile effects */
.elegant-card .flex.flex-wrap span {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.elegant-card:hover .flex.flex-wrap span {
    background: rgba(var(--tag-color), 0.15);
    border-color: rgba(var(--tag-color), 0.3);
    transform: translateY(-1px) scale(1.02);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Light mode card enhancements */
@media (prefers-color-scheme: light) {
    .service-card,
    .elegant-card {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        color: #1f2937 !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .service-card:hover,
    .elegant-card:hover {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: rgba(59, 130, 246, 0.3) !important;
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.1),
            0 2px 8px rgba(59, 130, 246, 0.15);
    }

    .service-card h3,
    .elegant-card h3 {
        color: #1f2937 !important;
    }

    .service-card p,
    .elegant-card p {
        color: #4b5563 !important;
    }
}

/* Learn More Button Enhancement - Mobile optimized with accessibility */
.service-card .flex.items-center.cursor-pointer,
.elegant-card .flex.items-center {
    padding: 0.5rem 0;
    border-radius: 0.5rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.service-card .flex.items-center.cursor-pointer:hover,
.elegant-card:hover .flex.items-center {
    background: rgba(255, 255, 255, 0.08);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    transform: translateX(2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Focus states for accessibility */
.service-card:focus-within,
.elegant-card:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2),
        0 0 0 4px rgba(59, 130, 246, 0.1);
}

.service-card .flex.items-center:focus,
.elegant-card .flex.items-center:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 0.5rem;
}

/* Arrow animation enhancement */
.service-card .flex.items-center i.fa-arrow-right,
.elegant-card .flex.items-center i.fa-arrow-right {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover .flex.items-center i.fa-arrow-right,
.elegant-card:hover .flex.items-center i.fa-arrow-right,
.service-card:focus-within .flex.items-center i.fa-arrow-right,
.elegant-card:focus-within .flex.items-center i.fa-arrow-right {
    transform: translateX(4px) scale(1.1);
    filter: brightness(1.2);
}

/* ===== MOBILE CARD PERFORMANCE OPTIMIZATIONS ===== */

/* GPU acceleration for all card elements */
.service-card,
.elegant-card,
.service-card *,
.elegant-card * {
    will-change: transform, opacity, box-shadow;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Reset will-change after animations complete */
.service-card:not(:hover):not(:focus-within),
.elegant-card:not(:hover):not(:focus-within) {
    will-change: auto;
}

/* Smooth scrolling for card containers */
.grid {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Prevent layout shifts during animations */
.service-card,
.elegant-card {
    contain: layout style paint;
}

/* Optimize repaints for mobile */
@media (max-width: 768px) {
    .service-card,
    .elegant-card {
        /* Reduce complexity on mobile */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .service-card:hover,
    .elegant-card:hover {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* Intersection Observer optimization for card animations */
.service-card[data-aos],
.elegant-card[data-aos] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card[data-aos].aos-animate,
.elegant-card[data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* Preload hover states for better performance */
.service-card::before,
.elegant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}

.service-card:hover::before,
.elegant-card:hover::before {
    background: rgba(59, 130, 246, 0.02);
}

/* Performance Optimizations */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* Smooth Transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced Focus States */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Loading States */
.loading {
    pointer-events: none;
    opacity: 0.7;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== METHOD TIMELINE DESIGN - تصميم التايم لاين الجديد ===== */
.method-timeline-container {
    padding: 80px 0;
    position: relative;
    /* Mobile performance optimizations */
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

.method-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Timeline Line */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(59, 130, 246, 0.3) 10%,
        rgba(59, 130, 246, 0.8) 50%,
        rgba(139, 92, 246, 0.8) 80%,
        transparent 100%);
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
}

.timeline-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

/* Timeline Items - Mobile optimized */
.timeline-item {
    position: relative;
    margin-bottom: 80px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Mobile performance optimizations */
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.timeline-item.animate {
    opacity: 1;
    transform: translateY(0);
    /* Reset will-change after animation */
    will-change: auto;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-left: 0;
    margin-right: calc(50% + 40px);
    text-align: right;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: calc(50% + 40px);
    margin-right: 0;
    text-align: left;
}

/* Timeline Marker */
.timeline-marker {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.timeline-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 3px solid;
    border-image: linear-gradient(135deg, #3b82f6, #8b5cf6) 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: white;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.timeline-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    transition: all 0.4s ease;
}

.timeline-item:hover .timeline-number {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.3);
}

.timeline-item:hover .timeline-icon {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
}

/* Timeline Content */
.timeline-content {
    max-width: 500px;
    position: relative;
}

.timeline-card {
    background: rgba(17, 24, 39, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.timeline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        rgba(59, 130, 246, 0.05) 0%,
        rgba(139, 92, 246, 0.05) 50%,
        rgba(6, 182, 212, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.timeline-item:hover .timeline-card::before {
    opacity: 1;
}

.timeline-item:hover .timeline-card {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 25px 50px rgba(59, 130, 246, 0.15);
}

/* Card Header */
.card-header {
    margin-bottom: 0;
}

.step-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 4s ease infinite;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}

.step-description {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 0;
}

/* Card Features */
.card-features {
    display: grid;
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.feature-item:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
}

.feature-content h4 {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.feature-content p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Gradient Animation */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== RESPONSIVE DESIGN - التصميم المتجاوب ===== */

/* Tablet Design */
@media (max-width: 1024px) {
    .method-timeline-container {
        padding: 60px 0;
    }

    .timeline-item {
        margin-bottom: 100px;
    }

    .timeline-card {
        padding: 2rem;
    }

    .step-title {
        font-size: 1.8rem;
    }

    .timeline-number {
        width: 55px;
        height: 55px;
        font-size: 1.1rem;
    }

    .timeline-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
}

/* Mobile Design - Performance Optimized */
@media (max-width: 768px) {
    /* Minimize La Méthode section on mobile devices - keep structure but hide content */
    #methode {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        overflow: hidden;
    }

    /* Hide method section completely on mobile */
    #methode {
        display: none !important;
    }

    /* Hide Méthode navigation links on mobile */
    .mobile-nav-link[href="#methode"] {
        display: none !important;
    }

    /* Hide Méthode footer link on mobile */
    footer a[href="#methode"] {
        display: none !important;
    }

    /* Hide all Méthode navigation links on mobile (desktop nav and mobile nav) */
    .nav-link[href="#methode"] {
        display: none !important;
    }

    .method-timeline {
        padding: 0 15px;
        /* Optimize for mobile scrolling */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        max-width: 100%;
        margin: 0 auto;
    }

    /* Mobile Timeline Line - Simplified for performance */
    .timeline-line {
        left: 25px;
        width: 2px;
        /* Reduce GPU usage */
        will-change: auto;
        transform: translateZ(0);
    }

    .timeline-line::before,
    .timeline-line::after {
        left: 50%;
        width: 8px;
        height: 8px;
        /* Disable expensive effects on mobile */
        box-shadow: none;
        animation: none;
    }

    /* Mobile Timeline Items - Performance focused */
    .timeline-item {
        margin-bottom: 40px;
        /* Optimize animations for mobile */
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Faster transitions on mobile */
        transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    }

    .timeline-item:nth-child(even) .timeline-content,
    .timeline-item:nth-child(odd) .timeline-content {
        margin-left: 70px;
        margin-right: 0;
        text-align: left;
        /* Optimize for mobile rendering */
        transform: translateZ(0);
    }

    /* Mobile Timeline Marker - Simplified */
    .timeline-marker {
        left: 25px;
        flex-direction: row;
        gap: 12px;
        /* Reduce repaints */
        will-change: auto;
    }

    .timeline-number {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
        /* Disable hover effects on mobile for performance */
        transition: none;
    }

    .timeline-icon {
        width: 25px;
        height: 25px;
        font-size: 0.7rem;
        /* Disable hover effects on mobile for performance */
        transition: none;
    }

    /* Mobile Timeline Card - Performance optimized */
    .timeline-card {
        padding: 1.2rem;
        border-radius: 12px;
        /* Optimize backdrop-filter for mobile */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        /* Reduce shadow complexity on mobile */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        /* Optimize for mobile scrolling */
        transform: translateZ(0);
        will-change: auto;
        /* Ensure full width on mobile */
        width: 100%;
        max-width: calc(100vw - 120px);
        box-sizing: border-box;
    }

    .step-title {
        font-size: 1.4rem;
        margin-bottom: 0.8rem;
        /* Optimize text rendering */
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
        line-height: 1.3;
    }

    /* Disable expensive hover effects on mobile */
    .timeline-item:hover .timeline-number,
    .timeline-item:hover .timeline-icon,
    .timeline-item:hover .timeline-card {
        transform: none;
        box-shadow: inherit;
    }

    .timeline-item:hover .timeline-card::before {
        opacity: 0;
    }

    /* Optimize gradients for mobile */
    .timeline-card::before {
        display: none; /* Remove gradient overlay on mobile for performance */
    }

    /* Reduce animation complexity on mobile */
    .timeline-marker.pulse .timeline-number,
    .timeline-marker.pulse .timeline-icon {
        animation: none;
    }

    .step-description {
        font-size: 1rem;
        line-height: 1.5;
        color: rgba(209, 213, 219, 0.9);
    }

    /* Additional mobile performance optimizations */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }

    /* Allow text selection for content */
    .timeline-card p,
    .timeline-card h3,
    .timeline-card li {
        -webkit-user-select: text;
        -moz-user-select: text;
        user-select: text;
    }

    /* Optimize scrolling performance */
    .method-timeline-container {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Reduce repaints and reflows */
    .timeline-item,
    .timeline-card,
    .timeline-marker {
        contain: layout style paint;
    }
}

/* ===== ENGAGEMENTS SECTION STYLES ===== */
#engagements {
    position: relative;
    /* Contain all effects within section */
    overflow: hidden;
    isolation: isolate;
    padding: 5rem 0;
}

/* Container for engagement cards */
#engagements .container {
    position: relative;
    z-index: 1;
}

#engagements .elegant-card {
    position: relative;
    overflow: hidden !important; /* Force hide overflow */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* Enhanced glassmorphism effect */
    background: rgba(31, 41, 55, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(75, 85, 99, 0.6) !important;
    /* Contain effects within card */
    contain: layout style paint;
    isolation: isolate;
}

#engagements .elegant-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    border-radius: inherit;
}

#engagements .elegant-card:hover::before {
    left: 100%;
}

#engagements .elegant-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(59, 130, 246, 0.2);
    /* Ensure effects stay within bounds */
    z-index: 10;
    position: relative;
}

/* Icon hover effects */
#engagements .elegant-card .w-20.h-20 {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#engagements .elegant-card:hover .w-20.h-20 {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Text visibility enhancements */
#engagements .elegant-card h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-weight: 700 !important;
}

#engagements .elegant-card p {
    color: #d1d5db !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.6 !important;
}

/* Grid layout for engagement cards */
#engagements .grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
}

/* Ensure cards have proper dimensions */
#engagements .elegant-card {
    min-height: 280px !important;
    height: auto !important;
    width: 100% !important;
    max-width: none !important;
}

/* Ensure content appears above effects */
#engagements .elegant-card > div {
    position: relative;
    z-index: 2;
}

/* Fix for mobile responsiveness */
@media (max-width: 768px) {
    #engagements .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    #engagements .elegant-card {
        min-height: 250px !important;
        padding: 1.5rem !important;
        /* Enhanced mobile engagement card effects */
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0) scale(1);
        will-change: transform, box-shadow;
    }

    /* Mobile engagement card hover effects */
    #engagements .elegant-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.35),
            0 5px 15px rgba(59, 130, 246, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    /* Icon effects for engagement cards on mobile */
    #engagements .elegant-card .w-20.h-20 {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    #engagements .elegant-card:hover .w-20.h-20 {
        transform: scale(1.15) rotate(8deg);
        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.3),
            0 3px 10px rgba(59, 130, 246, 0.2);
    }
}

/* ===== MODAL FIXES - CONFLICT RESOLUTION ===== */
.codercrew-modal {
    z-index: 9999 !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Ensure modal is above all other elements */
    isolation: isolate;
}

.codercrew-modal.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.codercrew-modal:not(.hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.codercrew-modal-content {
    position: relative !important;
    z-index: 10000 !important;
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Prevent conflicts with other animations */
    isolation: isolate;
    contain: layout style paint;
}

.codercrew-modal-header {
    position: relative !important;
    z-index: 10001 !important;
}

.codercrew-close-btn {
    position: relative !important;
    z-index: 10002 !important;
    cursor: pointer !important;
}

.codercrew-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(1.1) !important;
}

.codercrew-contact-form {
    position: relative !important;
    z-index: 10001 !important;
}

.codercrew-submit-btn {
    position: relative !important;
    z-index: 10001 !important;
    cursor: pointer !important;
}

.codercrew-submit-btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.codercrew-form-message {
    position: relative !important;
    z-index: 10001 !important;
}

/* Mobile Modal Optimizations */
@media (max-width: 768px) {
    .codercrew-modal-content {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        margin: 0 !important;
        min-height: 60vh !important;
        max-height: 95vh !important;
        width: 100% !important;
        max-width: none !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .codercrew-modal-content.codercrew-modal-open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }

    .codercrew-drag-indicator {
        display: block !important;
        top: 0.75rem !important;
    }

    .codercrew-modal-title {
        margin-top: 1rem !important;
        font-size: 1.25rem !important;
    }
}

/* Desktop Modal Optimizations */
@media (min-width: 769px) {
    .codercrew-modal-content {
        transform: scale(0.95) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .codercrew-modal-content.codercrew-modal-open {
        transform: scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
    }

    .codercrew-drag-indicator {
        display: none !important;
    }
}

/* CTA Button Fixes */
.codercrew-cta-btn,
.codercrew-final-cta-btn {
    position: relative !important;
    z-index: 50 !important;
    cursor: pointer !important;
    isolation: isolate;
}

.codercrew-cta-btn:hover,
.codercrew-final-cta-btn:hover {
    transform: scale(1.05) translateY(-2px) !important;
}

/* ===== FINAL CTA SECTION STYLES ===== */
#final-cta {
    position: relative;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.6) 100%);
}

#final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.codercrew-final-cta-btn {
    position: relative;
    overflow: hidden;
}

.codercrew-final-cta-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.codercrew-final-cta-btn:hover::before {
    width: 300px;
    height: 300px;
}

/* ===== ADDITIONAL CONFLICT FIXES ===== */

/* Ensure body scroll lock works properly */
body.codercrew-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* FORCE MODAL CONTENT TO BE VISIBLE WHEN OPEN */
.codercrew-modal:not(.hidden) .codercrew-modal-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
}

.codercrew-modal:not(.hidden) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
}

/* Prevent animation conflicts */
.codercrew-modal * {
    animation-play-state: running !important;
}

/* Form input focus states */
.codercrew-contact-form input:focus,
.codercrew-contact-form select:focus,
.codercrew-contact-form textarea:focus {
    outline: none !important;
    ring-width: 2px !important;
    ring-color: rgb(59 130 246) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}

/* Prevent text selection during modal transitions */
.codercrew-modal-content.codercrew-transitioning {
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: none !important;
}

.codercrew-modal-content.codercrew-transitioning * {
    pointer-events: none !important;
}

/* Ensure proper stacking context */
.codercrew-modal,
.codercrew-modal-content,
.codercrew-modal-header,
.codercrew-contact-form {
    isolation: isolate !important;
}

/* Loading state for submit button */
.codercrew-submit-btn.loading {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.codercrew-submit-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Accessibility improvements */
.codercrew-modal[aria-hidden="true"] {
    display: none !important;
}

.codercrew-modal[aria-hidden="false"] {
    display: flex !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .codercrew-modal-content {
        background: rgba(0, 0, 0, 0.95) !important;
        border: 2px solid #ffffff !important;
    }

    .codercrew-close-btn {
        background: rgba(255, 255, 255, 0.2) !important;
        border: 1px solid #ffffff !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .codercrew-modal,
    .codercrew-modal-content {
        transition: none !important;
        animation: none !important;
    }

    .codercrew-modal-content {
        transform: none !important;
    }
}

/* Print styles */
@media print {
    .codercrew-modal {
        display: none !important;
    }
}

/* ===== FOOTER STYLES ===== */
footer {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
}

/* Footer column headers */
footer h3 {
    position: relative;
    padding-bottom: 0.75rem;
}

footer h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
    border-radius: 1px;
}

/* Footer links hover effects */
footer a {
    position: relative;
    transition: all 0.3s ease;
}

footer a:hover {
    transform: translateX(4px);
}

/* Newsletter form styles */
#newsletter-form input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

#newsletter-form input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

#newsletter-form button {
    position: relative;
    overflow: hidden;
}

#newsletter-form button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

#newsletter-form button:hover::before {
    left: 100%;
}

/* Social media icons */
footer .w-10.h-10 {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

footer .w-10.h-10:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Copyright section */
footer .border-t {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== ANIMATION CLASSES FOR NEW SECTIONS ===== */
.animate-slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.animate-slide-up[data-delay="100"] {
    transition-delay: 100ms;
}

.animate-slide-up[data-delay="200"] {
    transition-delay: 200ms;
}

.animate-slide-up[data-delay="300"] {
    transition-delay: 300ms;
}

.animate-slide-up[data-delay="400"] {
    transition-delay: 400ms;
}

/* ========================================
   ✨ NEW CTA BUTTON 2024 - ISOLATED
   ======================================== */
.wf-simple-cta-btn-2024 {
    /* Reset all styles */
    all: initial;

    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;

    /* Sizing */
    padding: 1rem 2rem !important;
    min-height: 3.5rem !important;

    /* Typography */
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;

    /* Background */
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #3b82f6 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;

    /* Border & Shape */
    border: none !important;
    border-radius: 9999px !important;

    /* Effects */
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3) !important;
    cursor: pointer !important;

    /* Transitions */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* Positioning - FORCE HIGH Z-INDEX */
    position: relative !important;
    z-index: 999999 !important;

    /* Ensure clickability - FORCE */
    pointer-events: auto !important;
    user-select: none !important;

    /* Isolation */
    isolation: isolate !important;
    contain: layout style paint !important;
}

/* Force parent container to be clickable */
.wf-simple-cta-btn-2024:before {
    content: '' !important;
    position: absolute !important;
    inset: -10px !important;
    z-index: -1 !important;
    pointer-events: auto !important;
}

/* CRITICAL: Ensure button and its children are clickable */
#wf-cta-btn-2024,
#wf-cta-btn-2024 *,
.wf-simple-cta-btn-2024,
.wf-simple-cta-btn-2024 * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.wf-simple-cta-btn-2024:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.4) !important;
}

.wf-simple-cta-btn-2024:active {
    transform: translateY(0) scale(0.98) !important;
}

.wf-simple-cta-btn-2024 i {
    font-size: 1rem !important;
    transition: transform 0.3s ease !important;
}

.wf-simple-cta-btn-2024:hover i:first-child {
    transform: scale(1.2) rotate(10deg) !important;
}

.wf-simple-cta-btn-2024:hover i:last-child {
    transform: translateX(4px) !important;
}

@media (max-width: 768px) {
    .wf-simple-cta-btn-2024 {
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        min-height: 3.25rem !important;
    }
}

/* ========================================
   ✨ NEW MODAL 2024 - COMPLETELY ISOLATED
   Namespace: wf-modal-2024
   ======================================== */

/* ========================================
   MODAL 2024 - EXACT COPY FROM ECOMMERCE PAGE
   ======================================== */

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
}

/* ========================================
   🎯 MODAL OVERLAY - ALWAYS CENTERED
   ======================================== */
.codercrew-ecommerce-modal {
    /* Fixed positioning - stays in viewport */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    /* Full viewport coverage */
    width: 100vw !important;
    height: 100vh !important;

    /* Highest z-index */
    z-index: 99999 !important;

    /* Flexbox layout for centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    /* Smooth transitions */
    transition: opacity 0.3s ease, visibility 0.3s ease !important;

    /* Background overlay */
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    /* Padding for breathing room */
    padding: 20px !important;

    /* Prevent scrolling issues */
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Reset margins */
    margin: 0 !important;
}

/* Active state - show modal */
.codercrew-ecommerce-modal.codercrew-modal-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ========================================
   📦 MODAL CONTAINER - WRAPPER
   ======================================== */
.codercrew-ecommerce-modal-container {
    /* Relative positioning for content */
    position: relative !important;

    /* Full width and height for perfect centering */
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;

    /* Flexbox centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* No padding - handled by parent */
    padding: 0 !important;

    /* High z-index */
    z-index: 100000 !important;

    /* Allow clicks to pass through to content */
    pointer-events: none !important;

    /* Center horizontally */
    margin: 0 auto !important;
}

/* ========================================
   🎨 MODAL CONTENT - THE ACTUAL MODAL BOX
   ======================================== */
.codercrew-ecommerce-modal-content {
    /* Positioning */
    position: relative !important;

    /* Size constraints - CRITICAL FOR CENTERING */
    width: 100% !important;
    max-width: 600px !important;
    max-height: 90vh !important;

    /* Styling */
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(31, 41, 55, 0.98) 100%) !important;
    border-radius: 24px !important;
    border: 2px solid rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;

    /* Scrolling */
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Animation - starts small */
    transform: scale(0.9) !important;
    opacity: 0.8 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* Interaction */
    pointer-events: auto !important;
    visibility: visible !important;

    /* Centering */
    margin: auto !important;
}

/* Active state - full size */
.codercrew-ecommerce-modal.codercrew-modal-active .codercrew-ecommerce-modal-content {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Ensure modal is always on top and clickable when active */
.codercrew-ecommerce-modal {
    pointer-events: none !important;
}

.codercrew-ecommerce-modal.codercrew-modal-active {
    pointer-events: auto !important;
}

.codercrew-ecommerce-modal-container {
    pointer-events: auto !important;
}

.codercrew-ecommerce-modal-content {
    pointer-events: auto !important;
}

.codercrew-ecommerce-modal-content * {
    pointer-events: auto !important;
}

/* Removed duplicate - already defined above */

/* ========================================
   🎯 CENTERING FIX - ABSOLUTE POSITIONING FALLBACK
   ======================================== */
.codercrew-ecommerce-modal-content {
    /* Fallback centering using absolute positioning */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform-origin: center center !important;
}

/* Ensure modal content is never off-screen */
.codercrew-ecommerce-modal-container {
    box-sizing: border-box !important;
}

.codercrew-ecommerce-modal-content * {
    box-sizing: border-box !important;
}

/* Modal Header - FORCE DISPLAY WITH !important */
.codercrew-ecommerce-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 32px 32px 24px !important;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%) !important;
    border-radius: 24px 24px 0 0 !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

.codercrew-ecommerce-modal-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.codercrew-ecommerce-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(147, 51, 234, 0.2) 100%);
    border: 2px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.codercrew-ecommerce-modal-title h3 {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.codercrew-ecommerce-modal-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 18px;
    font-weight: bold;
    z-index: 100001;
}

.codercrew-ecommerce-modal-close:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
    color: #ffffff;
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.codercrew-ecommerce-modal-close:active {
    transform: scale(0.95) rotate(90deg);
}

.codercrew-ecommerce-modal-body {
    padding: 32px !important;
    background: rgba(17, 24, 39, 0.5) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    max-height: 60vh !important;
    position: relative !important;
}

/* Scrollbar for modal body */
.codercrew-ecommerce-modal-body::-webkit-scrollbar {
    width: 8px;
}

.codercrew-ecommerce-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.codercrew-ecommerce-modal-body::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 10px;
}

.codercrew-ecommerce-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.7);
}

.codercrew-ecommerce-btn {
    width: 100%;
    padding: 18px 28px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.codercrew-ecommerce-btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.codercrew-ecommerce-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}

.codercrew-ecommerce-btn-primary:active {
    transform: translateY(-1px);
}

/* Removed duplicate - already defined above */

/* ========================================
   📱 MOBILE RESPONSIVE - PERFECT CENTERING
   ======================================== */
@media (max-width: 768px) {
    .codercrew-ecommerce-modal {
        /* Smaller padding on mobile */
        padding: 10px !important;
    }

    .codercrew-ecommerce-modal-container {
        /* No padding - let parent handle it */
        padding: 0 !important;
        /* Ensure centering */
        align-items: center !important;
        justify-content: center !important;
    }

    .codercrew-ecommerce-modal-content {
        /* Almost full height on mobile */
        max-height: 95vh !important;
        /* Smaller border radius */
        border-radius: 16px !important;
        /* Full width minus padding */
        max-width: calc(100vw - 20px) !important;
        width: 100% !important;
        /* Center it */
        margin: auto !important;
    }

    .codercrew-ecommerce-modal-header {
        /* Smaller padding */
        padding: 20px 20px 15px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .codercrew-ecommerce-modal-title h3 {
        /* Smaller title */
        font-size: 20px !important;
    }

    .codercrew-ecommerce-modal-icon {
        /* Smaller icon */
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    .codercrew-ecommerce-modal-close {
        /* Smaller close button */
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }

    .codercrew-ecommerce-modal-body {
        /* Smaller padding */
        padding: 20px !important;
        /* Limit body height */
        max-height: 65vh !important;
    }

    .grid.md\\:grid-cols-2 {
        /* Single column on mobile */
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   📱 SMALL MOBILE - EXTRA SMALL SCREENS
   ======================================== */
@media (max-width: 480px) {
    .codercrew-ecommerce-modal {
        padding: 5px !important;
    }

    .codercrew-ecommerce-modal-content {
        max-height: 98vh !important;
        max-width: calc(100vw - 10px) !important;
        border-radius: 12px !important;
    }

    .codercrew-ecommerce-modal-header {
        padding: 15px !important;
    }

    .codercrew-ecommerce-modal-body {
        padding: 15px !important;
        max-height: 70vh !important;
    }
}

/* OLD BUTTON - Keep for backward compatibility */
.simple-cta-btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    /* Sizing */
    padding: 1rem 2rem;
    min-height: 3.5rem;

    /* Typography */
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;

    /* Background */
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #3b82f6 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;

    /* Border & Shape */
    border: none;
    border-radius: 9999px;

    /* Effects */
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
    cursor: pointer;

    /* Transitions */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Positioning */
    position: relative;
    z-index: 100;

    /* Ensure clickability */
    pointer-events: auto !important;
    user-select: none;
}

/* Hover Effect */
.simple-cta-btn:hover {
    background-position: 100% 0%;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.4);
}

/* Active/Click Effect */
.simple-cta-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

/* Icon Animations */
.simple-cta-btn i:first-child {
    transition: transform 0.3s ease;
}

.simple-cta-btn:hover i:first-child {
    transform: scale(1.2) rotate(10deg);
}

.simple-cta-btn i:last-child {
    transition: transform 0.3s ease;
}

.simple-cta-btn:hover i:last-child {
    transform: translateX(4px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .simple-cta-btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        gap: 0.5rem;
        min-height: 3.25rem;
    }

    .simple-cta-btn i {
        font-size: 0.875rem;
    }
}

/* Focus State for Accessibility */
.simple-cta-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Loading State (optional) */
.simple-cta-btn.loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}

.simple-cta-btn.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 2px solid transparent;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   MODAL 2024 - FORM STYLES
   ======================================== */

#wf-modal-2024 .wf-modal-2024-form {
    display: block;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#wf-modal-2024 .wf-modal-2024-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    #wf-modal-2024 .wf-modal-2024-row {
        grid-template-columns: 1fr;
    }
}

#wf-modal-2024 .wf-modal-2024-field {
    display: block;
    margin-bottom: 1rem;
}

#wf-modal-2024 .wf-modal-2024-field label {
    display: block;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

#wf-modal-2024 .wf-modal-2024-field input,
#wf-modal-2024 .wf-modal-2024-field select,
#wf-modal-2024 .wf-modal-2024-field textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#wf-modal-2024 .wf-modal-2024-field input:focus,
#wf-modal-2024 .wf-modal-2024-field select:focus,
#wf-modal-2024 .wf-modal-2024-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

#wf-modal-2024 .wf-modal-2024-field input::placeholder,
#wf-modal-2024 .wf-modal-2024-field textarea::placeholder {
    color: #6b7280;
    opacity: 1;
}

#wf-modal-2024 .wf-modal-2024-field textarea {
    resize: vertical;
    min-height: 120px;
}

#wf-modal-2024 .wf-modal-2024-field select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

#wf-modal-2024 .wf-modal-2024-field select option {
    background: #1e293b;
    color: #ffffff;
}

#wf-modal-2024 .wf-modal-2024-submit-btn {
    width: 100%;
    padding: 18px 28px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 18px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    margin-top: 0.5rem;
    box-sizing: border-box;
}

#wf-modal-2024 .wf-modal-2024-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
}

#wf-modal-2024 .wf-modal-2024-submit-btn:active {
    transform: translateY(-1px);
}

#wf-modal-2024 .wf-modal-2024-submit-btn i {
    font-size: 18px;
}

/* Pulse animation for icons */
@keyframes icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.icon-pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

/* Gradient text animation */
@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.text-gradient-animated {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #3b82f6);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 3s ease infinite;
}

/* ===== RESPONSIVE STYLES FOR NEW SECTIONS ===== */
@media (max-width: 768px) {
    /* Engagements mobile */
    #engagements .elegant-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem;
    }

    /* Additional mobile card enhancements for better UX */

    /* Stats cards in hero section - Enhanced Mobile effects */
    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
        padding: 1.25rem;
        border-radius: 1rem;
        background: rgba(31, 41, 55, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(75, 85, 99, 0.4);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    /* Gradient overlay for stats cards */
    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
        transition: left 0.6s ease;
        z-index: 1;
    }

    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div:hover::before {
        left: 100%;
    }

    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div:hover {
        transform: translateY(-4px) scale(1.03);
        background: rgba(31, 41, 55, 0.6);
        border-color: rgba(107, 114, 128, 0.6);
        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.25),
            0 4px 12px rgba(59, 130, 246, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    /* Number animation in stats - Enhanced */
    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div .text-3xl {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        position: relative;
        z-index: 2;
    }

    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div:hover .text-3xl {
        transform: scale(1.1) translateY(-2px);
        text-shadow:
            0 4px 12px rgba(0, 0, 0, 0.4),
            0 0 20px currentColor;
        filter: brightness(1.1);
    }

    /* Label animation in stats */
    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div .text-gray-400 {
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
    }

    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div:hover .text-gray-400 {
        transform: translateY(-1px);
        color: #d1d5db;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* CTA buttons enhancement for mobile - Professional effects */
    .wfx-contact-btn,
    .codercrew-cta-btn {
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0) scale(1);
        will-change: transform, box-shadow;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Shimmer effect for CTA buttons */
    .wfx-contact-btn::before,
    .codercrew-cta-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
        z-index: 1;
    }

    .wfx-contact-btn:hover::before,
    .codercrew-cta-btn:hover::before {
        left: 100%;
    }

    .wfx-contact-btn:hover,
    .codercrew-cta-btn:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow:
            0 12px 28px rgba(0, 0, 0, 0.3),
            0 6px 16px rgba(59, 130, 246, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        filter: brightness(1.05);
    }

    .wfx-contact-btn:active,
    .codercrew-cta-btn:active {
        transform: translateY(-1px) scale(1.01);
        transition-duration: 0.1s;
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.2),
            0 2px 6px rgba(59, 130, 246, 0.3);
    }

    /* Button text and icon effects */
    .wfx-contact-btn span,
    .codercrew-cta-btn span {
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
    }

    .wfx-contact-btn:hover span,
    .codercrew-cta-btn:hover span {
        transform: translateY(-1px);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* Icon bounce effect */
    .wfx-contact-btn:hover i,
    .codercrew-cta-btn:hover i {
        animation: iconBounce 0.6s ease;
    }

    @keyframes iconBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-2px); }
    }

    /* Technology badges enhancement for mobile */
    .flex.flex-wrap.justify-center.items-center.gap-4 > div {
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        background: rgba(31, 41, 55, 0.3);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid rgba(75, 85, 99, 0.2);
        cursor: pointer;
    }

    .flex.flex-wrap.justify-center.items-center.gap-4 > div:hover {
        transform: translateY(-2px) scale(1.05);
        background: rgba(31, 41, 55, 0.5);
        border-color: rgba(107, 114, 128, 0.4);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.2),
            0 2px 6px rgba(59, 130, 246, 0.1);
        opacity: 1 !important;
    }

    /* Technology icons animation */
    .flex.flex-wrap.justify-center.items-center.gap-4 > div i {
        transition: all 0.3s ease;
    }

    .flex.flex-wrap.justify-center.items-center.gap-4 > div:hover i {
        transform: scale(1.2) rotate(5deg);
        filter: brightness(1.2);
    }

    /* Technology text animation */
    .flex.flex-wrap.justify-center.items-center.gap-4 > div span {
        transition: all 0.3s ease;
    }

    .flex.flex-wrap.justify-center.items-center.gap-4 > div:hover span {
        color: #ffffff !important;
        transform: translateX(2px);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Staggered animation for technology badges */
    .flex.flex-wrap.justify-center.items-center.gap-4 > div:nth-child(1) {
        transition-delay: 0ms;
    }
    .flex.flex-wrap.justify-center.items-center.gap-4 > div:nth-child(2) {
        transition-delay: 50ms;
    }
    .flex.flex-wrap.justify-center.items-center.gap-4 > div:nth-child(3) {
        transition-delay: 100ms;
    }
    .flex.flex-wrap.justify-center.items-center.gap-4 > div:nth-child(4) {
        transition-delay: 150ms;
    }
    .flex.flex-wrap.justify-center.items-center.gap-4 > div:nth-child(5) {
        transition-delay: 200ms;
    }
    .flex.flex-wrap.justify-center.items-center.gap-4 > div:nth-child(6) {
        transition-delay: 250ms;
    }

/* ===== FINAL MOBILE CARD ENHANCEMENTS ===== */

/* Responsive card scaling for different screen sizes */
@media (max-width: 480px) {
    /* Extra small screens - Subtle effects */
    .service-card:hover,
    .elegant-card:hover {
        transform: translateY(-2px) scale(1.01) !important;
        transition-duration: 0.3s;
    }

    .service-card .w-16.h-16:hover,
    .elegant-card .w-16.h-16:hover {
        transform: scale(1.05) rotate(2deg) !important;
    }

    /* Reduce animation complexity on very small screens */
    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div:hover {
        transform: translateY(-2px) scale(1.01) !important;
    }

    .grid.grid-cols-2.md\\:grid-cols-4.gap-6 > div:hover .text-3xl {
        transform: scale(1.05) !important;
    }
}

/* Medium screens - Enhanced effects */
@media (min-width: 481px) and (max-width: 768px) {
    .service-card:hover,
    .elegant-card:hover {
        transform: translateY(-3px) scale(1.015);
    }

    .service-card .w-16.h-16:hover,
    .elegant-card .w-16.h-16:hover {
        transform: scale(1.08) rotate(3deg);
    }
}

/* Large screens - Full effects */
@media (min-width: 769px) {
    .service-card:hover,
    .elegant-card:hover {
        transform: translateY(-4px) scale(1.02);
    }

    .service-card .w-16.h-16:hover,
    .elegant-card .w-16.h-16:hover {
        transform: scale(1.1) rotate(5deg);
    }
}

/* Smooth transitions for all interactive elements */
.service-card,
.elegant-card,
.service-card *,
.elegant-card *,
.wfx-contact-btn,
.codercrew-cta-btn,
.grid.grid-cols-2 > div,
.grid.grid-cols-4 > div {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure consistent hover states across all cards */
.service-card:hover,
.elegant-card:hover,
.grid > div:hover {
    z-index: 10;
    position: relative;
}

/* Final performance optimization */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .service-card,
    .elegant-card {
        /* Enable hardware acceleration */
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
}

    #engagements .w-20.h-20 {
        width: 4rem !important;
        height: 4rem !important;
    }

    #engagements .w-20.h-20 i {
        font-size: 1.5rem !important;
    }

    /* Final CTA mobile */
    #final-cta h2 {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    #final-contact-btn {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }

    /* Footer mobile */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    footer .flex.flex-col.md\\:flex-row {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem;
    }

    footer .flex.space-x-6 {
        justify-content: center;
    }
}




/* Print Styles */
@media print {
    .fixed,
    .particles-container,
    .floating-shapes,
    #theme-toggle,
    #mobile-menu-btn {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .bg-gradient-to-r {
        background: #3b82f6 !important;
        -webkit-print-color-adjust: exact;
    }
}

/* ========================================
   FORCE MODAL TO DISPLAY CORRECTLY
   Fix for Tailwind CSS conflicts
   ======================================== */

/* Removed duplicate - already defined above */

.codercrew-ecommerce-modal-header h3,
.codercrew-ecommerce-modal-header p,
.codercrew-ecommerce-modal-header i {
    display: inline-block !important;
}

/* Fix for Tailwind reset */
.codercrew-ecommerce-modal * {
    box-sizing: border-box !important;
}

/* Ensure modal content doesn't overflow */
.codercrew-ecommerce-modal-content > * {
    flex-shrink: 0 !important;
}