/* Base styles and variables - Soft Modern Theme */
        :root {
            /* Soft Modern Paleta */
            --primary-color: #3b82f6;
            --primary-hover: #2563eb;
            --text-color: #1f2937;
            --text-light: #6b7280;
            --background-color: #f8fafc;
            --heading-font: 'Playfair Display', serif;
            --body-font: 'Source Sans Pro', sans-serif;
            --h1-size: 3rem;
            --h2-size: 2.25rem;
            --h3-size: 1.3rem;
            --body-size: 1rem;
            
            /* Soft Modern Boje */
            --soft-purple: #3b82f6;
            --soft-purple-dark: #2563eb;
            --soft-purple-light: #60a5fa;
            --soft-blue: #1d4ed8;
            --soft-green: #10b981;
            --soft-teal: #14b8a6;
            
            /* Soft Pozadine */
            --soft-bg-light: #e0f2fe;
            --soft-bg-medium: #b3e5fc;
            --soft-bg-card: rgba(224, 242, 254, 0.8);
            --soft-bg-overlay: rgba(224, 242, 254, 0.9);
            
            /* Soft Gradijenti */
            --gradient-primary: linear-gradient(135deg, #e0f2fe, #b3e5fc, #81d4fa);
            --gradient-secondary: linear-gradient(45deg, #3b82f6, #60a5fa, #93c5fd);
            --gradient-hero: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 50%, #81d4fa 100%);
            --gradient-text: linear-gradient(45deg, #3b82f6, #60a5fa);
            
            /* Soft Senke */
            --shadow-light: 0 2px 10px rgba(59, 130, 246, 0.1);
            --shadow-medium: 0 5px 20px rgba(59, 130, 246, 0.15);
            --shadow-heavy: 0 10px 30px rgba(59, 130, 246, 0.2);
            --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);
            
            /* Soft Fontovi */
            --font-display: 'Playfair Display', serif;
            --font-body: 'Source Sans Pro', sans-serif;
            
            /* Soft Ivice */
            --border-medium: 1px solid rgba(59, 130, 246, 0.3);
            
            /* Soft Animacije */
            --transition-medium: 0.3s ease;
        }
        
        /* ==========================================
           MOBILE VISIBILITY FIX - CRITICAL
           Ensures all content is visible on mobile devices
           ========================================== */
        @media (max-width: 1024px) {
            /* Force all images to be visible on mobile/tablet */
            img {
                opacity: 1 !important;
                visibility: visible !important;
            }
            
            /* Force all cards and containers to be visible */
            .project-card,
            .skill-card,
            .service-card,
            .pricing-card,
            .about-image,
            .project-image,
            .project-image img,
            .projects-section,
            .projects-grid,
            .project-info,
            .project-links {
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }
        }
        
        /* ==========================================
           PERFORMANCE OPTIMIZATION STYLES
           ========================================== */
        
        /* Lazy Loading - Image placeholder and fade-in */
        /* Only apply opacity:0 to images with data-src (JS lazy loading) - DESKTOP ONLY */
        @media (min-width: 1025px) {
            img[data-src]:not(.lazy-loaded) {
                opacity: 0;
                transition: opacity 0.4s ease-in-out;
            }
        }
        
        /* Native lazy loading should always be visible */
        img[loading="lazy"],
        img.lazy-loaded {
            opacity: 1 !important;
        }
        
        /* Reduce layout shift */
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        /* Skeleton loading for images - only for JS lazy loading */
        img[data-src]:not(.lazy-loaded) {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
        }
        
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* Hardware acceleration for smooth animations */
        .hero-image,
        .skill-card,
        .service-card,
        .project-card,
        .btn {
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }
        
        /* Optimize font rendering */
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        body {
            background: var(--gradient-primary);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            font-family: var(--font-body);
            font-size: var(--body-size);
            line-height: 1.6;
            transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }

        /* Custom Scrollbar Styling */
        /* Webkit browsers (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.3), rgba(179, 229, 252, 0.3));
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-purple-light));
            border-radius: 10px;
            border: 2px solid rgba(224, 242, 254, 0.3);
            transition: all 0.3s ease;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--soft-purple-dark), var(--soft-purple));
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }

        ::-webkit-scrollbar-thumb:active {
            background: var(--soft-blue);
        }

        /* Firefox */
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--soft-purple) rgba(224, 242, 254, 0.3);
        }

        /* Dark theme scrollbar */
        [data-theme="dark"] ::-webkit-scrollbar-track {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.5), rgba(30, 41, 59, 0.5));
        }

        [data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(96, 165, 250, 0.8));
            border-color: rgba(15, 23, 42, 0.5);
        }

        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-purple-light));
            border-color: rgba(59, 130, 246, 0.7);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
        }

        [data-theme="dark"] * {
            scrollbar-color: rgba(59, 130, 246, 0.8) rgba(15, 23, 42, 0.5);
        }

        /* Soft Pattern Background */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(96, 165, 250, 0.1) 0%, transparent 50%);
            background-size: 100px 100px;
            z-index: -1;
            animation: softFloat 12s ease-in-out infinite alternate;
            pointer-events: none;
        }

        @keyframes softFloat {
            0% { opacity: 0.3; transform: translateY(0px); }
            100% { opacity: 0.6; transform: translateY(-10px); }
        }

        /* Theme variations */
        body.light {
            background: var(--gradient-primary);
            color: var(--text-color);
        }

        body.dark {
            background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
            color: #f9fafb;
        }

        /* Dark theme styles */
        [data-theme="dark"] {
            --text-color: #f1f5f9;
            --text-light: #cbd5e1;
            --soft-bg-light: #1e293b;
            --soft-bg-medium: #0f172a;
            --soft-bg-card: rgba(15, 23, 42, 0.9);
            --gradient-primary: linear-gradient(135deg, #0f172a, #1e293b, #334155);
            --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.5);
            --shadow-medium: 0 5px 20px rgba(0, 0, 0, 0.7);
        }

        [data-theme="dark"] .navbar {
            background: var(--gradient-primary);
            border-bottom-color: rgba(59, 130, 246, 0.4);
        }

        [data-theme="dark"] .nav-menu {
            background: var(--gradient-primary);
        }

        [data-theme="dark"] .nav-link {
            color: #adb5bd;
        }

        [data-theme="dark"] .nav-link:hover {
            color: var(--soft-purple);
        }

        [data-theme="dark"] .nav-link.active {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(59, 130, 246, 0.4);
        }

        [data-theme="dark"] .theme-toggle,
        [data-theme="dark"] .lang-toggle {
            border-color: rgba(59, 130, 246, 0.4);
            color: var(--soft-purple);
        }

        [data-theme="dark"] .theme-toggle:hover,
        [data-theme="dark"] .lang-toggle:hover {
            background: rgba(59, 130, 246, 0.2);
        }

        [data-theme="dark"] .hamburger {
            background: var(--soft-purple);
        }

        [data-theme="dark"] .navbar.scrolled {
            background: rgba(52, 58, 64, 0.98);
            border-bottom-color: rgba(59, 130, 246, 0.4);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }

        /* Dark theme cards */
        [data-theme="dark"] .skill-card,
        [data-theme="dark"] .project-card,
        [data-theme="dark"] .service-card {
            background: linear-gradient(135deg, rgba(73, 80, 87, 0.9), rgba(52, 58, 64, 0.9));
            border-color: rgba(59, 130, 246, 0.3);
            color: #e9ecef;
        }

        [data-theme="dark"] .skill-card:hover,
        [data-theme="dark"] .project-card:hover,
        [data-theme="dark"] .service-card:hover {
            background: linear-gradient(135deg, rgba(52, 58, 64, 0.95), rgba(73, 80, 87, 0.95));
            border-color: rgba(59, 130, 246, 0.5);
        }

        [data-theme="dark"] .skill-card h3,
        [data-theme="dark"] .project-card h3,
        [data-theme="dark"] .service-card h3 {
            color: #e9ecef;
        }

        [data-theme="dark"] .skill-card p,
        [data-theme="dark"] .project-card p,
        [data-theme="dark"] .service-card p {
            color: #adb5bd;
        }

        [data-theme="dark"] .skill-card:hover h3,
        [data-theme="dark"] .project-card:hover h3,
        [data-theme="dark"] .service-card:hover h3 {
            color: var(--soft-purple);
        }

        [data-theme="dark"] .skill-card:hover p,
        [data-theme="dark"] .project-card:hover p,
        [data-theme="dark"] .service-card:hover p {
            color: var(--soft-purple);
        }

        /* Dark theme contact items */
        [data-theme="dark"] .contact-item {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
            border-color: rgba(59, 130, 246, 0.4);
            color: #f1f5f9;
        }
        
        /* Dark theme footer */
        [data-theme="dark"] .footer {
            background: var(--gradient-primary);
            color: #f1f5f9;
        }

        /* ============================= */
        /* Svilenkovic Says - Toasts     */
        /* ============================= */
        .sv-says-container {
            position: fixed;
            top: 1rem;
            right: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            z-index: 11000;
            pointer-events: none; /* allow clicks through when not hovered */
        }

        @media (max-width: 640px) {
            .sv-says-container {
                left: 1rem;
                right: 1rem;
                top: auto;
                bottom: 1rem;
            }
        }

        .sv-says {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.9rem 1rem;
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            border: 1px solid rgba(99, 102, 241, 0.2);
            box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2);
            border-radius: 0.75rem;
            min-width: 260px;
            max-width: min(92vw, 420px);
            color: var(--text-color);
            transform: translateY(-10px);
            opacity: 0;
            animation: svSaysIn 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            pointer-events: auto; /* enable clicks on toast itself */
        }

        .sv-says .sv-says-icon {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 14px;
            color: #fff;
        }

        .sv-says .sv-says-content {
            flex: 1;
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .sv-says .sv-says-close {
            background: transparent;
            border: none;
            color: var(--soft-text-muted);
            cursor: pointer;
            font-size: 1rem;
            line-height: 1;
        }

        .sv-says.info { border-left: 4px solid var(--soft-blue); }
        .sv-says.success { border-left: 4px solid var(--soft-green); }
        .sv-says.error { border-left: 4px solid #ef4444; }

        .sv-says.info .sv-says-icon { background: var(--soft-blue); }
        .sv-says.success .sv-says-icon { background: var(--soft-green); }
        .sv-says.error .sv-says-icon { background: #ef4444; }

        @keyframes svSaysIn {
            from { opacity: 0; transform: translateY(-8px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes svSaysOut {
            from { opacity: 1; transform: translateY(0) scale(1); }
            to { opacity: 0; transform: translateY(-6px) scale(0.98); }
        }

        /* Dark theme for toasts */
        [data-theme="dark"] .sv-says {
            background: linear-gradient(135deg, rgba(30,41,59,0.98), rgba(15,23,42,0.98));
            color: #f1f5f9;
            border-color: rgba(99, 102, 241, 0.35);
            box-shadow: 0 16px 40px rgba(0,0,0,0.5);
        }

        [data-theme="dark"] .sv-says .sv-says-close { color: #cbd5e1; }
        /* End Svilenkovic Says */
        
        [data-theme="dark"] .footer-section h3,
        [data-theme="dark"] .footer-section h4 {
            color: #3b82f6;
        }
        
        [data-theme="dark"] .footer-links li a {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .footer-links li a:hover {
            color: #3b82f6;
        }
        
        [data-theme="dark"] .contact-info-item {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .contact-info-item i {
            color: #3b82f6;
        }
        
        [data-theme="dark"] .footer-bottom-links a {
            color: #f1f5f9;
        }
        
        [data-theme="dark"] .footer-bottom-links a:hover {
            color: #3b82f6;
        }
        
        /* Dark theme hero image overlay */
        [data-theme="dark"] .hero-image-overlay {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
        }
        
        /* Dark theme footer copyright link */
        [data-theme="dark"] .footer-copyright-link {
            color: #3b82f6;
        }
        
        [data-theme="dark"] .footer-copyright-link:hover {
            color: #60a5fa;
        }

        /* Dark theme buttons */
        [data-theme="dark"] .btn-primary {
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
            color: white;
        }

        [data-theme="dark"] .btn-primary:hover {
            background: linear-gradient(135deg, var(--soft-purple-dark), var(--soft-blue));
            color: white;
        }

        [data-theme="dark"] .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: var(--soft-purple-light);
            border-color: var(--soft-purple);
        }

        [data-theme="dark"] .btn-secondary:hover {
            background: var(--soft-purple);
            color: white;
            border-color: var(--soft-purple-light);
        }

        /* Dark theme hero section */
        [data-theme="dark"] .page-hero-background {
            background: linear-gradient(135deg, 
                #0f172a 0%, 
                #1e293b 20%,
                #334155 40%, 
                #1e293b 60%,
                #0f172a 80%,
                #020617 100%);
        }
        
        [data-theme="dark"] .page-hero-overlay {
            background: 
                radial-gradient(ellipse at 20% 30%, rgba(59, 130, 246, 0.25) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 70%, rgba(96, 165, 250, 0.2) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(37, 99, 235, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 10% 80%, rgba(59, 130, 246, 0.2) 0%, transparent 40%),
                radial-gradient(circle at 90% 20%, rgba(96, 165, 250, 0.2) 0%, transparent 40%);
        }
        
        [data-theme="dark"] .page-hero::before {
            background: 
                radial-gradient(3px 3px at 20% 30%, rgba(96, 165, 250, 0.7), transparent),
                radial-gradient(2px 2px at 60% 70%, rgba(59, 130, 246, 0.6), transparent),
                radial-gradient(2px 2px at 50% 50%, rgba(147, 197, 253, 0.5), transparent),
                radial-gradient(3px 3px at 80% 10%, rgba(96, 165, 250, 0.7), transparent),
                radial-gradient(2px 2px at 90% 60%, rgba(59, 130, 246, 0.6), transparent),
                radial-gradient(3px 3px at 30% 80%, rgba(96, 165, 250, 0.7), transparent),
                radial-gradient(2px 2px at 15% 70%, rgba(147, 197, 253, 0.5), transparent),
                radial-gradient(3px 3px at 70% 30%, rgba(96, 165, 250, 0.7), transparent),
                radial-gradient(2px 2px at 40% 20%, rgba(59, 130, 246, 0.6), transparent),
                radial-gradient(3px 3px at 85% 85%, rgba(96, 165, 250, 0.7), transparent),
                radial-gradient(2px 2px at 25% 45%, rgba(147, 197, 253, 0.5), transparent),
                radial-gradient(3px 3px at 65% 90%, rgba(59, 130, 246, 0.6), transparent);
        }
        
        [data-theme="dark"] .page-hero-breadcrumb {
            background: rgba(15, 23, 42, 0.4);
            border: 1px solid rgba(59, 130, 246, 0.3);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(59, 130, 246, 0.2);
        }
        
        [data-theme="dark"] .page-hero-breadcrumb:hover {
            background: rgba(15, 23, 42, 0.6);
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(59, 130, 246, 0.3);
        }
        
        [data-theme="dark"] .page-hero-title {
            text-shadow: 
                0 2px 10px rgba(0, 0, 0, 0.5),
                0 10px 40px rgba(59, 130, 246, 0.3),
                0 0 80px rgba(59, 130, 246, 0.2);
        }
        
        [data-theme="dark"] .page-hero-title::after {
            background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.9), transparent);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
        }
        
        [data-theme="dark"] .page-hero-subtitle {
            background: linear-gradient(180deg, rgba(241, 245, 249, 1), rgba(203, 213, 225, 0.9));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: none;
        }

        /* Dark theme CTA section */
        [data-theme="dark"] .promo-cta-section {
            background: linear-gradient(135deg, #1e293b, #334155);
        }

        [data-theme="dark"] .contact-item:hover {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(51, 65, 85, 0.95));
            border-color: rgba(59, 130, 246, 0.6);
        }

        [data-theme="dark"] .contact-item h3 {
            color: #f1f5f9;
        }

        [data-theme="dark"] .contact-item p {
            color: #cbd5e1;
        }

        [data-theme="dark"] .contact-item:hover h3 {
            color: var(--soft-purple);
        }

        [data-theme="dark"] .contact-item:hover p {
            color: var(--soft-purple);
        }

        /* Dark theme contact form */
        [data-theme="dark"] .contact-form {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
            border: 1px solid rgba(59, 130, 246, 0.4);
        }

        [data-theme="dark"] .form-group input,
        [data-theme="dark"] .form-group textarea {
            border-color: rgba(59, 130, 246, 0.3);
            color: #f1f5f9;
        }

        [data-theme="dark"] .form-group input:focus,
        [data-theme="dark"] .form-group textarea:focus {
            border-color: var(--soft-purple);
        }

        [data-theme="dark"] .form-group label {
            color: #adb5bd;
        }

        [data-theme="dark"] .form-group input:focus + label,
        [data-theme="dark"] .form-group input:valid + label,
        [data-theme="dark"] .form-group textarea:focus + label,
        [data-theme="dark"] .form-group textarea:valid + label {
            background: rgba(52, 58, 64, 0.9);
        }

        /* Dark theme footer */
        [data-theme="dark"] .footer {
            background: linear-gradient(135deg, rgba(33, 37, 41, 0.95), rgba(52, 58, 64, 0.95));
        }

        [data-theme="dark"] .footer-bottom {
            border-top-color: rgba(59, 130, 246, 0.3);
        }

        [data-theme="dark"] .footer-nav-link {
            color: #adb5bd;
        }

        [data-theme="dark"] .footer-nav-link:hover {
            color: var(--soft-purple);
            background: rgba(59, 130, 246, 0.2);
        }

        [data-theme="dark"] .footer-contact-item {
            color: #adb5bd;
        }

        /* Typography styles */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-display);
            font-weight: 700;
            line-height: 1.2;
            margin: 0;
            color: var(--soft-purple);
            text-shadow: var(--shadow-glow);
            letter-spacing: 0.5px;
        }

        h1 {
            font-size: var(--h1-size);
            margin-bottom: 1.25rem;
        }

        h2 {
            font-size: var(--h2-size);
            margin-bottom: 1rem;
        }

        h3 {
            font-size: var(--h3-size);
            margin-bottom: 0.75rem;
        }

        p {
            margin-bottom: 1rem;
            color: var(--text-light);
        }

        a {
            color: var(--soft-purple);
            text-decoration: none;
            transition: var(--transition-medium);
        }

        a:hover {
            color: var(--soft-blue);
            text-shadow: var(--shadow-glow);
        }

        /* Stilovi za ikone */
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .contact-item img {
            margin-right: 15px;
        }
        
    


        /* Scroll behavior */
        html {
            scroll-behavior: smooth;
        }
        
        body {
            scroll-behavior: smooth;
        }
        
        
        /* Initial hidden state for animated elements */
        .hero-badge,
        .hero-title,
        .hero-description,
        .hero-stats,
        .hero-actions,
        .hero-image {
            opacity: 0;
        }
        
        /* Hero name always visible */
        .hero-name {
            opacity: 1 !important;
        }
        
        /* Staggered animations for elements - faster */
        .hero-badge {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
        }
        
        .hero-name {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
        }
        
        .hero-description {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
        }
        
        .hero-stats {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
        }
        
        .stat-item:nth-child(1) {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
        }
        
        .stat-item:nth-child(2) {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
        }
        
        .stat-item:nth-child(3) {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s both;
        }
        
        .hero-actions {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
        }
        
        .btn-primary {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s both;
        }
        
        .btn-secondary {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
        }
        
        .hero-image {
            animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
        }
        
        .hero-scroll {
            animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.1s both;
        }
        
        /* Section animations - will be triggered by scroll */
        .about-section,
        .skills-section,
        .services-section,
        .projects-section,
        .about-section.animate,
        .skills-section.animate,
        .services-section.animate,
        .projects-section.animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Card animations - will be triggered by scroll */
        .skill-card,
        .project-card,
        .service-card {
            opacity: 0;
            transform: translateY(1.5rem);
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .skill-card.animate,
        .project-card.animate,
        .service-card.animate {
            opacity: 1;
            transform: translateY(0);
        }
        





        
        
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(3rem) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(3rem) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }
        
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(2rem);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-2rem);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Stilovi za ikone */
        
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .contact-item img {
            margin-right: 15px;
        }
        
    


        /* Header Styles */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--gradient-primary);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(59, 130, 246, 0.2);
            transition: all var(--transition-medium);
        }

        .navbar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                rgba(59, 130, 246, 0.1) 0%, 
                transparent 50%, 
                rgba(59, 130, 246, 0.1) 100%);
            opacity: 0;
            transition: opacity var(--transition-medium);
            pointer-events: none;
        }

        .navbar:hover::before {
            opacity: 1;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
        }

        .nav-logo {
            display: flex;
            align-items: center;
        }

        .logo-link {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            color: var(--soft-purple);
            transition: var(--transition-medium);
        }

        .logo-link:hover {
            color: var(--soft-blue);
            text-shadow: var(--shadow-glow);
        }

        .logo-img {
            height: 40px;
            width: auto;
            filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));
            transition: var(--transition-medium);
        }

        .logo-link:hover .logo-img {
            filter: drop-shadow(0 0 15px rgba(29, 78, 216, 0.5));
        }

        .logo-text {
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .nav-menu {
            position: fixed;
            top: 70px;
            right: -100%;
            width: 100%;
            max-width: 400px;
            height: calc(100vh - 70px);
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.98), rgba(179, 229, 252, 0.98));
            backdrop-filter: blur(15px);
            transition: right var(--transition-medium);
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 998;
            border-left: 1px solid rgba(59, 130, 246, 0.2);
            box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        }

        /* Custom scrollbar for nav menu */
        .nav-menu::-webkit-scrollbar {
            width: 8px;
        }

        .nav-menu::-webkit-scrollbar-track {
            background: rgba(224, 242, 254, 0.3);
            border-radius: 10px;
        }

        .nav-menu::-webkit-scrollbar-thumb {
            background: var(--soft-purple);
            border-radius: 10px;
        }

        .nav-menu::-webkit-scrollbar-thumb:hover {
            background: var(--soft-purple-dark);
        }

        .nav-menu.active {
            right: 0;
        }

        .nav-list {
            flex-direction: column;
            padding: 30px 25px;
            gap: 0;
            list-style: none;
            margin: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .nav-item {
            width: 100%;
            margin-bottom: 15px;
            box-sizing: border-box;
        }

        .nav-link {
            width: 100%;
            padding: 18px 25px;
            justify-content: flex-start;
            border-radius: 12px;
            font-size: 1.1rem;
            color: var(--text-light);
            text-decoration: none;
            font-family: var(--font-body);
            font-weight: 500;
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            box-sizing: border-box;
        }

        .nav-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(59, 130, 246, 0.2), 
                transparent);
            transition: left var(--transition-medium);
        }

        .nav-link:hover::before {
            left: 100%;
        }


        .nav-link i {
            margin-right: 15px;
            font-size: 1.2rem;
            transition: var(--transition-medium);
            flex-shrink: 0;
            width: 20px;
            text-align: center;
        }
        
        .nav-link span {
            white-space: nowrap;
        }

        .nav-link:hover {
            color: var(--soft-purple);
            text-shadow: var(--shadow-glow);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(59, 130, 246, 0.2);
        }

        .nav-link:hover i {
            color: var(--soft-blue);
            transform: scale(1.1);
        }


        .nav-link.active {
            color: var(--soft-purple);
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.15));
            border: 1px solid rgba(59, 130, 246, 0.4);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
            transform: translateY(-2px);
        }

        .nav-link.active i {
            color: var(--soft-blue);
        }


        .nav-controls {
            display: flex;
            align-items: center;
            gap: 15px;
            position: relative;
            z-index: 1001;
        }

        .theme-toggle,
        .lang-toggle {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1));
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: var(--soft-purple);
            padding: 10px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition-medium);
            font-size: 0.9rem;
            position: relative;
            z-index: 1001;
            pointer-events: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-body);
            font-weight: 500;
        }

        .theme-toggle:hover,
        .lang-toggle:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.2));
            border-color: var(--soft-purple);
            color: var(--soft-blue);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            transform: translateY(-2px);
        }

        .control-text {
            font-size: 0.85rem;
            font-weight: 600;
            white-space: nowrap;
            font-family: var(--font-body);
            color: inherit;
            letter-spacing: 0.5px;
        }

        .nav-toggle {
            display: flex;
            flex-direction: column;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 5px;
        }

        .hamburger {
            width: 25px;
            height: 3px;
            background: var(--soft-purple);
            margin: 3px 0;
            transition: var(--transition-medium);
            border-radius: 2px;
        }

        .nav-toggle.active .hamburger:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px);
        }

        .nav-toggle.active .hamburger:nth-child(2) {
            opacity: 0;
        }

        .nav-toggle.active .hamburger:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
        }

        .nav-toggle:hover .hamburger {
            background: var(--soft-blue);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }

        /* Mobile controls */
        .mobile-controls {
            padding: 20px 25px;
            border-top: 1px solid rgba(59, 130, 246, 0.2);
            display: flex;
            gap: 15px;
            justify-content: center;
        }

        .mobile-theme-toggle,
        .mobile-lang-toggle {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1));
            border: 1px solid rgba(59, 130, 246, 0.3);
            color: var(--soft-purple);
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition-medium);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-body);
            font-weight: 500;
            flex: 1;
            justify-content: center;
        }

        .mobile-theme-toggle:hover,
        .mobile-lang-toggle:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.2));
            border-color: var(--soft-purple);
            color: var(--soft-blue);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            transform: translateY(-2px);
        }

        /* Dark theme mobile menu */
        [data-theme="dark"] .nav-menu {
            background: rgba(52, 58, 64, 0.98);
        }

        /* Dark theme nav-menu scrollbar */
        [data-theme="dark"] .nav-menu::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.5);
        }

        [data-theme="dark"] .nav-menu::-webkit-scrollbar-thumb {
            background: rgba(59, 130, 246, 0.8);
        }

        [data-theme="dark"] .nav-menu::-webkit-scrollbar-thumb:hover {
            background: var(--soft-purple);
        }

        [data-theme="dark"] .mobile-controls {
            border-top-color: rgba(59, 130, 246, 0.4);
        }

        [data-theme="dark"] .mobile-theme-toggle,
        [data-theme="dark"] .mobile-lang-toggle {
            border-color: rgba(59, 130, 246, 0.4);
            color: var(--soft-purple);
        }

        [data-theme="dark"] .mobile-theme-toggle:hover,
        [data-theme="dark"] .mobile-lang-toggle:hover {
            background: rgba(59, 130, 246, 0.2);
        }

        @media (max-width: 768px) {
            /* Show theme/lang controls on mobile as icon-only buttons */
            .theme-toggle,
            .lang-toggle {
                display: flex;
                padding: 8px;
                min-width: auto;
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }
            
            /* Keep nav-controls visible for all buttons */
            .nav-controls {
                display: flex;
                gap: 8px;
            }
            
            .mobile-controls {
                display: flex;
            }
            
            /* Hide text labels on mobile - show only icons */
            .control-text {
                display: none;
            }
            
            /* Make icons slightly larger on mobile */
            .theme-toggle i,
            .lang-toggle i {
                font-size: 1.1rem;
            }
            
            /* Mobile menu behavior */
            .nav-menu {
                position: fixed;
                right: -100%;
            }
            
            .nav-menu.active {
                right: 0;
            }
        }
        
        @media (min-width: 769px) {
            /* Keep mobile menu behavior on desktop too */
            .nav-menu {
                position: fixed;
                right: -100%;
                max-width: 450px;
            }
            
            .nav-menu.active {
                right: 0;
            }
            
            /* Hide mobile controls on desktop, use desktop controls instead */
            .mobile-controls {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .nav-container {
                padding: 0 10px;
            }
            
            .logo-link {
                gap: 0.75rem;
            }
            
            .logo-img {
                height: 35px;
            }
            
            .logo-text {
                font-size: 1.1rem;
            }
            
            .nav-controls {
                gap: 6px;
            }
            
            .theme-toggle,
            .lang-toggle {
                padding: 6px;
                width: 36px;
                height: 36px;
                font-size: 0.9rem;
            }
            
            .theme-toggle i,
            .lang-toggle i {
                font-size: 1rem;
            }
        }

        /* Scroll effect */
        .navbar.scrolled {
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.98), rgba(179, 229, 252, 0.98));
            border-bottom-color: rgba(59, 130, 246, 0.3);
            box-shadow: 0 2px 20px rgba(59, 130, 246, 0.1);
        }

        /* Animation for theme toggle */
        @keyframes themeSwitch {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .theme-toggle.switching i {
            animation: themeSwitch 0.5s ease-in-out;
        }

        /* Language toggle animation */
        @keyframes langSwitch {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        .lang-toggle.switching i {
            animation: langSwitch 0.3s ease-in-out;
        }
        
        /* Hero Section */
        .hero-section {
            min-height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 70px;
            overflow: hidden;
            z-index: 1;
        }
        
        .hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        
        .hero-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, rgba(59, 130, 246, 0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(96, 165, 250, 0.2), transparent),
                radial-gradient(1px 1px at 90px 40px, rgba(59, 130, 246, 0.4), transparent),
                radial-gradient(1px 1px at 130px 80px, rgba(96, 165, 250, 0.3), transparent);
            background-repeat: repeat;
            background-size: 200px 100px;
        }
        
        .hero-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
        }
        
        @keyframes particleFloat {
            0% { transform: translateY(0px) translateX(0px); }
            100% { transform: translateY(-100px) translateX(50px); }
        }
        
        @keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }
        
        /* Animacije samo za desktop */
        @media (min-width: 769px) {
            .hero-particles {
                animation: particleFloat 20s linear infinite;
            }
            
            .hero-grid {
                animation: gridMove 30s linear infinite;
            }
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            gap: 4rem;
        }
        
        .hero-left {
            flex: 1;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 10;
        }
        
        .hero-right {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .hero-image {
            width: 100%;
            max-width: 25rem;
            height: auto;
            border: 0.3rem solid var(--soft-purple);
            border-radius: 1.2rem;
            overflow: visible;
            transition: all 0.3s ease;
            position: relative;
            padding: 0;
        }
        
        .hero-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
            border-radius: 1.2rem;
            z-index: 1;
            pointer-events: none;
            display: none;
        }
        
        .hero-image img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            z-index: 0;
            margin-top: -20%;
            margin-left: -15%;
        }
        
        .hero-image:hover {
            transform: scale(1.02);
            box-shadow: 0 0.5rem 2rem rgba(59, 130, 246, 0.3);
        }
        
        .hero-image:hover img {
            transform: scale(1.01);
            filter: brightness(1.05) contrast(1.1);
        }
        
        
         .hero-badge {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1));
             border: 0.06rem solid rgba(59, 130, 246, 0.3);
             padding: 0.5rem 1rem;
             border-radius: 3rem;
             font-size: 0.9rem;
             color: var(--soft-purple);
             margin-bottom: 2rem;
             font-weight: 500;
             transition: all 0.3s ease;
         }
        
        .hero-badge:hover {
            transform: translateY(-0.2rem) scale(1.05);
            box-shadow: 0 0.5rem 1.5rem rgba(59, 130, 246, 0.3);
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
            color: white;
            border-color: transparent;
        }
        
        
        
        .hero-badge i {
            font-size: 0.8rem;
        }
        
         .hero-title {
             margin-bottom: 1.5rem;
             transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
             animation: slideInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
             cursor: pointer;
             position: relative;
         }
        
        .hero-title:hover {
            transform: scale(1.05) translateY(-0.2rem);
            text-shadow: 0 0 2rem rgba(59, 130, 246, 0.6);
            filter: brightness(1.2) saturate(1.3);
        }
        
        .hero-title::before {
            content: '';
            position: absolute;
            top: -0.5rem;
            left: -0.5rem;
            right: -0.5rem;
            bottom: -0.5rem;
            background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.1), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            border-radius: 1rem;
            filter: blur(0.5rem);
        }
        
        .hero-title:hover::before {
            opacity: 1;
        }
        
        
         .hero-name {
             display: block !important;
             font-size: clamp(2.5rem, 8vw, 4rem);
             font-weight: 700;
             color: #3b82f6 !important;
             margin-bottom: 0.5rem;
             line-height: 1.1;
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             cursor: pointer;
             position: relative;
             z-index: 10;
             opacity: 1 !important;
             visibility: visible !important;
         }
        
         .hero-name:hover {
             transform: scale(1.05) rotate(1deg) translateY(-0.1rem);
             color: #2563eb !important;
             filter: brightness(1.2) saturate(1.2);
             text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
         }
        
        .hero-name::before {
            content: '';
            position: absolute;
            top: -0.5rem;
            left: -0.5rem;
            right: -0.5rem;
            bottom: -0.5rem;
            background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.2), transparent);
            opacity: 0;
            transition: all 0.4s ease;
            pointer-events: none;
            border-radius: 1rem;
            filter: blur(1rem);
        }
        
        .hero-name:hover::before {
            opacity: 1;
            transform: scale(1.1);
        }
        
        .hero-name::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            transition: all 0.4s ease;
            pointer-events: none;
            border-radius: 50%;
        }
        
        .hero-name:hover::after {
            width: 20rem;
            height: 20rem;
        }
        
        @keyframes titleGlow {
            0%, 100% { filter: brightness(1) saturate(1); }
            50% { filter: brightness(1.1) saturate(1.2); }
        }
        
        
        
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        
         .hero-description {
             font-size: clamp(1rem, 2.5vw, 1.2rem);
             color: var(--text-light);
             line-height: 1.6;
             margin-bottom: 3rem;
             max-width: 80%;
             transition: all 0.3s ease;
             animation: slideInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
         }
        
        .hero-description:hover {
            transform: translateY(-0.1rem);
            color: var(--soft-purple);
        }
        
        
        .hero-stats {
            display: flex;
            justify-content: center;
            gap: clamp(1rem, 5vw, 3rem);
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }
        
         .stat-item {
             text-align: center;
             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             cursor: pointer;
             padding: 1rem;
             border-radius: 1rem;
             background: rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(10px);
             border: 1px solid rgba(59, 130, 246, 0.2);
         }
        
        .stat-item:hover {
            transform: translateY(-0.2rem) scale(1.05);
            background: rgba(59, 130, 246, 0.1);
            border-color: rgba(59, 130, 246, 0.4);
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
        }
        
        .stat-item::before {
            content: '';
            position: absolute;
            top: -0.5rem;
            left: -0.5rem;
            right: -0.5rem;
            bottom: -0.5rem;
            background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.2), transparent);
            opacity: 0;
            transition: all 0.4s ease;
            pointer-events: none;
            border-radius: 1.5rem;
            filter: blur(1rem);
        }
        
        .stat-item:hover::before {
            opacity: 1;
            transform: scale(1.1);
        }
        
        .stat-number {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            font-weight: 700;
            color: var(--soft-purple);
            line-height: 1;
            margin-bottom: 0.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            text-shadow: 0 0 1rem rgba(59, 130, 246, 0.3);
        }
        
        .stat-item:hover .stat-number {
            color: var(--soft-blue);
            text-shadow: 0 0 2rem rgba(59, 130, 246, 0.5);
            transform: scale(1.1);
            filter: brightness(1.2) saturate(1.2);
        }
        
        .stat-label {
            font-size: clamp(0.8rem, 2vw, 0.9rem);
            color: var(--text-light);
            font-weight: 500;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .stat-item:hover .stat-label {
            color: var(--soft-purple);
            text-shadow: 0 0 1rem rgba(59, 130, 246, 0.3);
            transform: translateY(-0.1rem);
        }
        
        
        .hero-actions {
            display: flex;
            justify-content: center;
            gap: clamp(1rem, 3vw, 1.5rem);
            margin-bottom: 4rem;
            flex-wrap: wrap;
        }
        
        .btn,
        button.btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: clamp(0.8rem, 2vw, 1.2rem) clamp(1.5rem, 4vw, 2.4rem);
            border-radius: 2rem;
            text-decoration: none;
            font-weight: 600;
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0.3rem 1.2rem rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            font-family: var(--font-body);
        }
        
        .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.3s ease;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn-primary,
        button.btn-primary {
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
            color: white;
            box-shadow: 0 0.25rem 1rem rgba(59, 130, 246, 0.3);
            border: 0.1rem solid transparent;
        }
        
        .btn-primary:hover,
        button.btn-primary:hover {
            background: linear-gradient(135deg, var(--soft-blue), var(--soft-purple-dark));
            color: white;
            transform: translateY(-0.1rem) scale(1.01);
            box-shadow: 0 0.5rem 2rem rgba(59, 130, 246, 0.4);
            border-color: rgba(255, 255, 255, 0.2);
        }
        
        .btn-secondary,
        button.btn-secondary {
            background: white;
            color: var(--soft-purple);
            border: 0.1rem solid var(--soft-purple);
            font-weight: 600;
        }
        
        .btn-secondary:hover,
        button.btn-secondary:hover {
            background: var(--soft-purple);
            color: white;
            transform: translateY(-0.1rem) scale(1.01);
            box-shadow: 0 0.5rem 2rem rgba(59, 130, 246, 0.4);
            border-color: var(--soft-purple-dark);
        }
        
        .hero-scroll {
            position: absolute;
            bottom: 0.6rem;
            left: 50%;
            transform: translateX(-50%);
        }
        
         .scroll-indicator {
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 0.5rem;
             color: var(--text-light);
             font-size: clamp(0.7rem, 2vw, 0.8rem);
             transition: all 0.3s ease;
             cursor: pointer;
         }
        
        .scroll-indicator:hover {
            color: var(--soft-purple);
            transform: scale(1.1);
        }
        
        .scroll-indicator i {
            font-size: clamp(1rem, 3vw, 1.2rem);
        }
        
        
        /* Page Hero Section - Enhanced modern hero for non-homepage pages */
        .page-hero {
            position: relative;
            padding: 12rem 2rem 8rem;
            background: var(--gradient-secondary);
            text-align: center;
            overflow: hidden;
            z-index: 1;
        }
        
        /* Animated gradient background */
        .page-hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, 
                #2563eb 0%, 
                #3b82f6 20%,
                #60a5fa 40%, 
                #3b82f6 60%,
                #2563eb 80%,
                #1e40af 100%);
            background-size: 400% 400%;
            animation: gradientMove 20s ease infinite;
            z-index: 0;
        }
        
        @keyframes gradientMove {
            0% { background-position: 0% 50%; }
            25% { background-position: 50% 25%; }
            50% { background-position: 100% 50%; }
            75% { background-position: 50% 75%; }
            100% { background-position: 0% 50%; }
        }
        
        .page-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(ellipse at 20% 30%, rgba(96, 165, 250, 0.3) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 50%, rgba(37, 99, 235, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 10% 80%, rgba(147, 197, 253, 0.25) 0%, transparent 40%),
                radial-gradient(circle at 90% 20%, rgba(59, 130, 246, 0.25) 0%, transparent 40%);
            animation: overlayPulse 8s ease-in-out infinite;
            z-index: 1;
        }
        
        @keyframes overlayPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* Floating geometric shapes */
        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(3px 3px at 20% 30%, rgba(255, 255, 255, 0.6), transparent),
                radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.5), transparent),
                radial-gradient(2px 2px at 50% 50%, rgba(255, 255, 255, 0.4), transparent),
                radial-gradient(3px 3px at 80% 10%, rgba(255, 255, 255, 0.6), transparent),
                radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.5), transparent),
                radial-gradient(3px 3px at 30% 80%, rgba(255, 255, 255, 0.6), transparent),
                radial-gradient(2px 2px at 15% 70%, rgba(255, 255, 255, 0.4), transparent),
                radial-gradient(3px 3px at 70% 30%, rgba(255, 255, 255, 0.6), transparent),
                radial-gradient(2px 2px at 40% 20%, rgba(255, 255, 255, 0.5), transparent),
                radial-gradient(3px 3px at 85% 85%, rgba(255, 255, 255, 0.6), transparent),
                radial-gradient(2px 2px at 25% 45%, rgba(255, 255, 255, 0.4), transparent),
                radial-gradient(3px 3px at 65% 90%, rgba(255, 255, 255, 0.5), transparent);
            background-size: 300% 300%;
            animation: particleFloat 25s ease-in-out infinite;
            z-index: 2;
        }
        
        .page-hero::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 150px;
            background: linear-gradient(to top, var(--background-color), transparent);
            z-index: 3;
        }
        
        [data-theme="dark"] .page-hero::after {
            background: linear-gradient(to top, #0f172a, transparent);
        }
        
        @keyframes particleFloat {
            0%, 100% { 
                background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 90% 60%, 30% 80%, 20% 70%, 70% 30%, 40% 20%, 85% 80%, 25% 45%, 65% 90%;
                transform: translateY(0);
            }
            25% {
                background-position: 25% 75%, 75% 25%, 60% 60%, 70% 30%, 80% 70%, 40% 70%, 30% 60%, 80% 40%, 50% 30%, 75% 90%, 35% 35%, 75% 80%;
                transform: translateY(-5px);
            }
            50% { 
                background-position: 100% 100%, 0% 0%, 80% 80%, 20% 80%, 10% 40%, 70% 20%, 80% 30%, 30% 70%, 60% 80%, 15% 20%, 45% 25%, 55% 70%;
                transform: translateY(0);
            }
            75% {
                background-position: 75% 25%, 25% 75%, 40% 40%, 30% 70%, 20% 30%, 60% 30%, 70% 40%, 20% 60%, 70% 70%, 25% 10%, 55% 65%, 45% 60%;
                transform: translateY(5px);
            }
        }
        
        .page-hero-content {
            position: relative;
            z-index: 4;
            max-width: 900px;
            margin: 0 auto;
        }
        
        /* Decorative elements around content */
        .page-hero-content::before,
        .page-hero-content::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            z-index: -1;
            animation: rotate 20s linear infinite;
        }
        
        .page-hero-content::before {
            top: -50px;
            left: -50px;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        
        .page-hero-content::after {
            bottom: -50px;
            right: -50px;
            border-left-color: transparent;
            border-top-color: transparent;
            animation-direction: reverse;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        [data-theme="dark"] .page-hero-content::before,
        [data-theme="dark"] .page-hero-content::after {
            border-color: rgba(59, 130, 246, 0.3);
        }
        
        [data-theme="dark"] .page-hero-content::before {
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        
        [data-theme="dark"] .page-hero-content::after {
            border-left-color: transparent;
            border-top-color: transparent;
        }
        
        .page-hero-breadcrumb {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 2.5rem;
            padding: 0.75rem 2rem;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 50px;
            font-size: 0.95rem;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }
        
        .page-hero-breadcrumb:hover {
            background: rgba(255, 255, 255, 0.35);
            transform: translateY(-2px);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }
        
        .page-hero-breadcrumb a {
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 600;
            position: relative;
        }
        
        .page-hero-breadcrumb a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: white;
            transition: width 0.3s ease;
        }
        
        .page-hero-breadcrumb a:hover::after {
            width: 100%;
        }
        
        .breadcrumb-separator {
            color: rgba(255, 255, 255, 0.7);
            font-weight: 300;
        }
        
        .page-hero-title {
            font-size: clamp(2.8rem, 7vw, 5rem);
            font-weight: 900;
            color: white;
            margin-bottom: 2rem;
            line-height: 1.1;
            text-shadow: 
                0 2px 10px rgba(0, 0, 0, 0.2),
                0 10px 40px rgba(0, 0, 0, 0.15),
                0 0 80px rgba(255, 255, 255, 0.1);
            animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
            letter-spacing: -0.02em;
            position: relative;
        }
        
        .page-hero-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
            border-radius: 2px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        }
        
        .page-hero-subtitle {
            font-size: clamp(1.15rem, 2.8vw, 1.5rem);
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.8;
            max-width: 750px;
            margin: 0 auto;
            padding-top: 1rem;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
            animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
            font-weight: 400;
            background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @media (max-width: 768px) {
            .page-hero {
                padding: 9rem 1.5rem 5rem;
            }
            
            .page-hero-title {
                font-size: 2.5rem;
            }
            
            .page-hero-subtitle {
                font-size: 1rem;
            }
        }
        
        /* About Section */
        .about-section {
            padding: clamp(4rem, 8vw, 6rem) 0;
            background: linear-gradient(135deg, var(--soft-bg-light), var(--soft-bg-medium));
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .about-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 80% 70%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        
        .about-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 4vw, 2rem);
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(2rem, 6vw, 4rem);
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .about-text h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: 1.5rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 700;
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGlow 4s ease-in-out infinite;
        }
        
        .about-text p {
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            line-height: 1.8;
            margin-bottom: 1.5rem;
            color: var(--text-light);
            transition: var(--transition-medium);
        }
        
        .about-text p:hover {
            color: var(--soft-purple);
            transform: translateX(0.2rem);
        }
        
        .about-image {
            text-align: center;
            position: relative;
            z-index: 2;
        }
        
        .about-image img {
            max-width: 100%;
            height: auto;
            border-radius: 1.5rem;
            box-shadow: var(--shadow-medium);
            border: 0.2rem solid var(--soft-purple);
            transition: var(--transition-medium);
        }
        
        .about-image img:hover {
            transform: scale(1.02) rotate(1deg);
            box-shadow: var(--shadow-heavy);
            border-color: var(--soft-blue);
        }
        
        /* Skills Section */
        .skills-section {
            padding: clamp(4rem, 8vw, 6rem) 0;
            background: linear-gradient(135deg, var(--soft-bg-medium), var(--soft-bg-light));
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .skills-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 20% 80%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        
        .skills-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 4vw, 2rem);
            text-align: center;
            position: relative;
            z-index: 2;
        }
        
        .skills-content h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: 3rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 700;
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGlow 4s ease-in-out infinite;
        }
        
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(1.5rem, 4vw, 2rem);
            margin-top: 3rem;
            padding: 1rem;
            margin: 3rem -1rem 0 -1rem;
        }
        
        .skill-card {
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(179, 229, 252, 0.9));
            padding: clamp(1.5rem, 4vw, 2rem);
            border-radius: 1.5rem;
            box-shadow: var(--shadow-light);
            transition: var(--transition-medium);
            border: 0.1rem solid rgba(59, 130, 246, 0.2);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
            z-index: 1;
            isolation: isolate;
        }
        
        .skill-card::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.5s ease;
        }
        
        .skill-card:hover::before {
            left: 100%;
        }
        
        .skill-card:hover {
            transform: translateY(-0.5rem) scale(1.02);
            box-shadow: var(--shadow-medium);
            background: linear-gradient(135deg, rgba(179, 229, 252, 0.95), rgba(129, 212, 250, 0.95));
            border-color: var(--soft-purple);
            z-index: 10;
        }
        
        .skill-card i {
            font-size: clamp(2.5rem, 5vw, 3rem);
            color: var(--soft-purple);
            margin-bottom: 1rem;
            transition: var(--transition-medium);
        }
        
        .skill-card:hover i {
            transform: scale(1.1) rotate(5deg);
            color: var(--soft-blue);
        }
        
        .skill-card h3 {
            font-size: clamp(1.1rem, 2.5vw, 1.3rem);
            margin-bottom: 1rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 600;
            transition: var(--transition-medium);
        }
        
        .skill-card:hover h3 {
            color: var(--soft-blue);
        }
        
        .skill-card p {
            color: var(--text-light);
            line-height: 1.6;
            font-size: clamp(0.9rem, 2vw, 1rem);
            transition: var(--transition-medium);
        }
        
        .skill-card:hover p {
            color: var(--soft-purple);
        }
        
        /* Projects Section */
        .projects-section {
            padding: clamp(4rem, 8vw, 6rem) 0;
            background: linear-gradient(135deg, var(--soft-bg-light), var(--soft-bg-medium));
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .projects-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 70% 80%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        
        .projects-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 4vw, 2rem);
            text-align: center;
            position: relative;
            z-index: 2;
        }
        
        .projects-content h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: 3rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 700;
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGlow 4s ease-in-out infinite;
        }
        
        /* Section icon in headings */
        .section-icon {
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-right: 0.5rem;
        }
        
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: clamp(1.5rem, 4vw, 2rem);
            margin-top: 3rem;
            padding: 1rem;
            margin-left: -1rem;
            margin-right: -1rem;
        }
        
        /* Single item grid - limit max width */
        .projects-grid-single {
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .project-card {
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(179, 229, 252, 0.9));
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: var(--transition-medium);
            border: 0.1rem solid rgba(59, 130, 246, 0.2);
            backdrop-filter: blur(10px);
            position: relative;
            display: block;
            text-decoration: none;
            color: inherit;
            z-index: 2;
        }
        
        .project-card::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.5s ease;
            z-index: 1;
        }
        
        .project-card:hover::before {
            left: 100%;
        }
        
        .project-card:hover {
            transform: translateY(-0.5rem) scale(1.02);
            box-shadow: var(--shadow-medium);
            background: linear-gradient(135deg, rgba(179, 229, 252, 0.95), rgba(129, 212, 250, 0.95));
            border-color: var(--soft-purple);
        }
        
        .project-image {
            width: 100%;
            height: auto;
            aspect-ratio: 1000 / 480; /* Exact aspect ratio for 1000x480 images */
            background: transparent; /* No background to avoid white lines */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: clamp(2rem, 5vw, 3rem);
            transition: var(--transition-medium);
            overflow: hidden;
            position: relative;
        }
        
        .project-image-link {
            display: block;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            line-height: 0; /* Remove any line-height spacing */
        }
        
        .project-image-link:hover .project-image::after {
            opacity: 1;
        }
        
        .project-image img {
            width: 101%; /* Slightly larger to eliminate any white gaps */
            height: 101%;
            object-fit: cover; /* Fill the space, crop if needed for better fit */
            object-position: center;
            transition: var(--transition-medium);
            display: block; /* Remove inline spacing */
            transform: scale(1.01); /* Extra zoom to ensure no white lines */
        }
        
        /* Fix for mobile - show full image */
        @media (max-width: 768px) {
            .project-image {
                aspect-ratio: 1000 / 480;
            }
            
            .project-image img {
                object-fit: cover;
                width: 100%;
                height: 100%;
                object-position: center;
                opacity: 1 !important;
                visibility: visible !important;
            }
            
            .project-card,
            .project-card * {
                opacity: 1 !important;
                visibility: visible !important;
            }
        }
        
        .project-card:hover .project-image::after {
            opacity: 1;
        }
        
        .project-image::after {
            content: attr(data-hover-text);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background: rgba(59, 130, 246, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: clamp(1rem, 2.5vw, 1.25rem);
            font-weight: 600;
            text-align: center;
            padding: 1rem;
            opacity: 0;
            transition: var(--transition-medium);
            z-index: 10;
        }
        
        .project-info {
            padding: clamp(1.5rem, 4vw, 2rem);
            position: relative;
            z-index: 2;
        }
        
        .project-info h3 {
            font-size: clamp(1.1rem, 2.5vw, 1.3rem);
            margin-bottom: 1rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 600;
            transition: var(--transition-medium);
        }
        
        .project-card:hover .project-info h3 {
            color: var(--soft-blue);
        }
        
        .project-info p {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            font-size: clamp(0.9rem, 2vw, 1rem);
            transition: var(--transition-medium);
        }
        
        .project-card:hover .project-info p {
            color: var(--soft-purple);
        }
        
        .project-links {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .project-link {
            padding: clamp(0.6rem, 1.5vw, 0.8rem) clamp(1rem, 3vw, 1.5rem);
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
            color: white;
            text-decoration: none;
            border-radius: 2rem;
            font-size: clamp(0.8rem, 1.8vw, 0.9rem);
            transition: var(--transition-medium);
            font-weight: 600;
            box-shadow: var(--shadow-light);
        }
        
        .project-link:hover {
            background: linear-gradient(135deg, var(--soft-blue), var(--soft-purple-dark));
            color: white !important;
            transform: translateY(-0.2rem) scale(1.02);
            box-shadow: var(--shadow-medium);
        }
        
        /* Portfolio Filter Section */
        .portfolio-nav-section {
            padding: 1.5rem 0;
            background: white;
            position: sticky;
            top: 70px;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .portfolio-nav-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .portfolio-filters {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem;
        }
        
        .filter-btn {
            padding: 0.75rem 1.5rem;
            background: white;
            border: 2px solid rgba(59, 130, 246, 0.3);
            border-radius: 2rem;
            color: var(--text-color);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-btn i {
            font-size: 0.9rem;
            color: var(--soft-purple);
        }
        
        .filter-btn:hover {
            background: rgba(59, 130, 246, 0.1);
            border-color: var(--soft-purple);
            transform: translateY(-2px);
        }
        
        .filter-btn.active {
            background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
            color: white;
            border-color: transparent;
            box-shadow: var(--shadow-medium);
        }
        
        .filter-btn.active i {
            color: white;
        }
        
        /* Hidden section for filter */
        .projects-section.section-hidden {
            display: none;
        }
        
        @media (max-width: 768px) {
            .portfolio-nav-section {
                top: 60px;
            }
            
            .portfolio-filters {
                gap: 0.5rem;
            }
            
            .filter-btn {
                padding: 0.5rem 0.85rem;
                font-size: 0.8rem;
            }
            
            .filter-btn i {
                display: none;
            }
        }
        
        /* Services Section */
        .services-section {
            padding: clamp(4rem, 8vw, 6rem) 0;
            background: linear-gradient(135deg, var(--soft-bg-medium), var(--soft-bg-light));
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .services-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 40% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 60% 80%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        
        .services-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 4vw, 2rem);
            text-align: center;
            position: relative;
            z-index: 2;
        }
        
        .services-content h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: 3rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 700;
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGlow 4s ease-in-out infinite;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(1.5rem, 4vw, 2rem);
            margin-top: 3rem;
            padding: 1rem;
            margin-left: -1rem;
            margin-right: -1rem;
        }
        
        .service-card {
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(179, 229, 252, 0.9));
            padding: clamp(2rem, 4vw, 2.5rem);
            border-radius: 1.5rem;
            box-shadow: var(--shadow-light);
            transition: var(--transition-medium);
            border: 0.1rem solid rgba(59, 130, 246, 0.2);
            text-align: left;
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
            z-index: 2;
        }
        
        .service-card::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.5s ease;
        }
        
        .service-card:hover::before {
            left: 100%;
        }
        
        .service-card:hover {
            transform: translateY(-0.5rem) scale(1.02);
            box-shadow: var(--shadow-medium);
            background: linear-gradient(135deg, rgba(179, 229, 252, 0.95), rgba(129, 212, 250, 0.95));
            border-color: var(--soft-purple);
        }
        
        .service-card i {
            font-size: clamp(2.5rem, 5vw, 3rem);
            color: var(--soft-purple);
            margin-bottom: 1.5rem;
            transition: var(--transition-medium);
        }
        
        .service-card:hover i {
            transform: scale(1.1) rotate(5deg);
            color: var(--soft-blue);
        }
        
        .service-card h3 {
            font-size: clamp(1.2rem, 2.5vw, 1.4rem);
            margin-bottom: 1rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 600;
            transition: var(--transition-medium);
        }
        
        .service-card:hover h3 {
            color: var(--soft-blue);
        }
        
        .service-card p {
            color: var(--text-light);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            font-size: clamp(0.9rem, 2vw, 1rem);
            transition: var(--transition-medium);
        }
        
        .service-card:hover p {
            color: var(--soft-purple);
        }
        
        .service-card ul {
            list-style: none;
            padding: 0;
        }
        
        .service-card li {
            color: var(--text-light);
            margin-bottom: 0.5rem;
            padding-left: 1.5rem;
            position: relative;
            font-size: clamp(0.8rem, 1.8vw, 0.9rem);
            transition: var(--transition-medium);
        }
        
        .service-card:hover li {
            color: var(--soft-purple);
        }
        
        .service-card li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--soft-purple);
            font-weight: bold;
            font-size: 1.2rem;
        }
        

        
        
        
        
        
        
        
        
        
        .contact-action-icon {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .contact-action-btn.primary .contact-action-icon {
            background: var(--soft-purple);
            color: white;
        }
        
        .contact-action-btn.secondary .contact-action-icon {
            background: var(--soft-green);
            color: white;
        }
        
        .contact-action-btn.info .contact-action-icon {
            background: var(--soft-teal);
            color: white;
        }
        
        .contact-action-icon i {
            font-size: 1.5rem;
        }
        
        .contact-action-content h3 {
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: var(--text-color);
            font-weight: 600;
        }
        
        .contact-action-content p {
            color: var(--text-light);
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        
        .contact-action-content span {
            color: var(--soft-purple);
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .contact-form-section {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        
        .contact-form-wrapper {
            background: var(--soft-bg-card);
            padding: 3rem;
            border-radius: 2rem;
            box-shadow: var(--shadow-light);
            border: 0.1rem solid rgba(59, 130, 246, 0.2);
            backdrop-filter: blur(10px);
        }
        
        .contact-form-wrapper h3 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: var(--text-color);
            text-align: center;
            font-family: var(--heading-font);
        }
        
        .contact-form-wrapper p {
            color: var(--text-light);
            text-align: center;
            margin-bottom: 2.5rem;
            font-size: 1rem;
        }
        
        .contact-form-modern {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        
        .form-field {
            position: relative;
        }
        
        .form-field.full-width {
            grid-column: 1 / -1;
        }
        
        .form-field input,
        .form-field textarea {
            width: 100%;
            padding: 1rem 1.5rem;
            border: 0.1rem solid rgba(59, 130, 246, 0.2);
            border-radius: 0.75rem;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-color);
            font-size: 1rem;
            transition: var(--transition-medium);
            backdrop-filter: blur(5px);
        }
        
        .form-field input:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: var(--soft-purple);
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.2);
        }
        
        .form-field label {
            position: absolute;
            top: 1rem;
            left: 1.5rem;
            color: var(--text-light);
            font-size: 1rem;
            transition: var(--transition-medium);
            pointer-events: none;
        }
        
        .form-field input:focus + label,
        .form-field input:valid + label,
        .form-field textarea:focus + label,
        .form-field textarea:valid + label {
            top: -0.5rem;
            left: 1rem;
            font-size: 0.8rem;
            color: var(--soft-purple);
            background: var(--soft-bg-card);
            padding: 0 0.5rem;
        }
        
        .contact-submit-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 1.25rem 2rem;
            background: var(--soft-purple);
            color: white;
            border: none;
            border-radius: 0.75rem;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-medium);
            margin-top: 1rem;
        }
        
        .contact-submit-btn:hover {
            background: var(--soft-purple-dark);
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 2rem rgba(59, 130, 246, 0.3);
        }
        
        .contact-description {
            text-align: center;
            font-size: 1.2rem;
            color: var(--text-light);
            margin-bottom: 3rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            margin-bottom: 3rem;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .contact-item i {
            font-size: 1.5rem;
            color: var(--soft-purple);
            margin-top: 0.5rem;
        }
        
        .contact-details h3 {
            margin-bottom: 0.5rem;
            color: var(--soft-purple);
        }
        
        .contact-details p {
            color: var(--text-light);
            margin: 0;
        }
        
        .contact-form {
            background: var(--soft-bg-card);
            padding: 2rem;
            border-radius: 1.5rem;
            box-shadow: var(--shadow-light);
        }
        
        .contact-form h3 {
            margin-bottom: 1.5rem;
            color: var(--soft-purple);
        }
        
        .form-group {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 1rem;
            border: 2px solid rgba(59, 130, 246, 0.2);
            border-radius: 0.5rem;
            background: transparent;
            color: var(--text-color);
            font-size: 1rem;
            transition: var(--transition-medium);
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--soft-purple);
        }
        
        .form-group label {
            position: absolute;
            top: 1rem;
            left: 1rem;
            color: var(--text-light);
            transition: var(--transition-medium);
            pointer-events: none;
        }
        
        .form-group input:focus + label,
        .form-group input:valid + label,
        .form-group textarea:focus + label,
        .form-group textarea:valid + label {
            top: -0.5rem;
            left: 0.5rem;
            font-size: 0.8rem;
            color: var(--soft-purple);
            background: var(--soft-bg-card);
            padding: 0 0.5rem;
        }
        
        /* Footer */
        .footer {
            background: var(--gradient-primary);
            color: var(--text-light);
            padding: 3rem 0 1rem;
            border-top: 1px solid rgba(59, 130, 246, 0.2);
            position: relative;
            z-index: 1;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }
        
        .footer-section h3,
        .footer-section h4 {
            color: var(--soft-purple);
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }
        
        .footer-section p {
            line-height: 1.6;
            margin-bottom: 1.5rem;
            color: var(--text-light);
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .footer-logo-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: inherit;
            transition: var(--transition-medium);
        }
        
        .footer-logo-link:hover {
            color: var(--soft-blue);
            text-shadow: var(--shadow-glow);
        }
        
        .footer-logo-link:hover .footer-logo-img {
            filter: drop-shadow(0 0 15px rgba(29, 78, 216, 0.5));
        }
        
        .footer-logo-img {
            height: 2.5rem;
            width: auto;
            transition: var(--transition-medium);
        }
        
        .footer-logo h3 {
            margin: 0;
            font-size: 1.5rem;
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .footer-links li {
            margin-bottom: 0.5rem;
        }
        
        .footer-links li a {
            color: var(--text-light);
            text-decoration: none;
            transition: var(--transition-medium);
            display: block;
            padding: 0.25rem 0;
        }
        
        .footer-links li a:hover {
            color: var(--soft-purple);
            transform: translateX(0.5rem);
        }
        
        .footer-contact {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .contact-info-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: var(--text-light);
        }
        
        .contact-info-item i {
            color: var(--soft-purple);
            width: 1.2rem;
            font-size: 1rem;
        }
        
        .footer-social {
            display: flex;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }
        
        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            background: var(--soft-purple);
            color: white;
            border-radius: 50%;
            text-decoration: none;
            transition: var(--transition-medium);
        }
        
        .social-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        /* Specific social link colors */
        .social-link.phone-link {
            background: linear-gradient(135deg, #10b981, #059669);
        }
        .social-link.phone-link:hover {
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }
        
        .social-link.viber-link {
            background: linear-gradient(135deg, #7360f2, #59267c);
        }
        .social-link.viber-link:hover {
            box-shadow: 0 4px 12px rgba(115, 96, 242, 0.4);
        }
        
        .social-link.whatsapp-link {
            background: linear-gradient(135deg, #25D366, #128C7E);
        }
        .social-link.whatsapp-link:hover {
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
        }
        
        .social-link.email-link {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        }
        .social-link.email-link:hover {
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(59, 130, 246, 0.2);
            margin-top: 2rem;
            padding-top: 1rem;
        }
        
        .footer-bottom-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-bottom-links {
            display: flex;
            gap: 1.5rem;
        }
        
        .footer-bottom-links a {
            color: var(--text-light);
            text-decoration: none;
            font-size: 0.9rem;
            transition: var(--transition-medium);
        }
        
        .footer-bottom-links a:hover {
            color: var(--soft-purple);
        }
        
        .footer-copyright-link {
            color: var(--soft-purple);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition-medium);
        }
        
        .footer-copyright-link:hover {
            color: var(--soft-blue);
            text-decoration: underline;
        }
        
        .contact-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
                        radial-gradient(circle at 30% 70%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }
        
        .contact-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 4vw, 2rem);
            text-align: center;
            position: relative;
            z-index: 2;
        }
        
        .contact-content h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: 3rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 700;
            background: var(--gradient-text);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: titleGlow 4s ease-in-out infinite;
        }
        
        .contact-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(1.5rem, 4vw, 2rem);
            margin-top: 3rem;
        }
        
        .contact-item {
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(179, 229, 252, 0.9));
            padding: clamp(2rem, 4vw, 2.5rem);
            border-radius: 1.5rem;
            box-shadow: var(--shadow-light);
            transition: var(--transition-medium);
            border: 0.1rem solid rgba(59, 130, 246, 0.2);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }
        
        .contact-item::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.5s ease;
        }
        
        .contact-item:hover::before {
            left: 100%;
        }
        
        .contact-item:hover {
            transform: translateY(-0.5rem) scale(1.02);
            box-shadow: var(--shadow-medium);
            background: linear-gradient(135deg, rgba(179, 229, 252, 0.95), rgba(129, 212, 250, 0.95));
            border-color: var(--soft-purple);
        }
        
        .contact-item i {
            font-size: clamp(2.5rem, 5vw, 3rem);
            color: var(--soft-purple);
            margin-bottom: 1rem;
            transition: var(--transition-medium);
        }
        
        .contact-item:hover i {
            transform: scale(1.1) rotate(5deg);
            color: var(--soft-blue);
        }
        
        .contact-item h3 {
            font-size: clamp(1.1rem, 2.5vw, 1.3rem);
            margin-bottom: 0.5rem;
            color: var(--soft-purple);
            font-family: var(--heading-font);
            font-weight: 600;
            transition: var(--transition-medium);
        }
        
        .contact-item:hover h3 {
            color: var(--soft-blue);
        }
        
        .contact-item p {
            color: var(--text-light);
            font-size: clamp(0.9rem, 2vw, 1rem);
            transition: var(--transition-medium);
        }
        
        .contact-item:hover p {
            color: var(--soft-purple);
        }
        
        /* Section Actions */
        .section-actions {
            text-align: center;
            margin-top: 3rem;
        }
        
        .section-actions .btn {
            margin: 0 0.5rem;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            /* Center all text sections on mobile */
            .about-content,
            .skills-content,
            .projects-content,
            .services-content,
            .contact-content {
                text-align: center;
            }
            
            .about-text,
            .about-text h2,
            .about-text p {
                text-align: center;
            }
            
            .about-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .about-text h2 {
                font-size: 2rem;
            }
            
            .skills-content h2,
            .projects-content h2,
            .contact-content h2,
            .services-content h2 {
                font-size: 2rem;
                text-align: center;
            }
            
            /* Center buttons on mobile */
            .about-text .btn,
            .about-text .hero-actions,
            .section-actions {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto !important;
            }
            
            .about-text .hero-actions {
                flex-direction: column;
                width: 100%;
                padding: 0 !important;
            }
            
            .about-text .btn,
            .about-text .hero-actions .btn {
                width: 85% !important;
                margin: 0 auto !important;
                padding: 3.5vw 5.5vw !important;
                font-size: 4.5vw !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
            }
            
            /* Center all grid items */
            .skills-grid,
            .services-grid,
            .projects-grid {
                text-align: center;
                justify-items: center !important;
            }
            
            .skill-card,
            .service-card,
            .project-card {
                text-align: center;
            }
            
            .project-card .project-info {
                text-align: center !important;
            }
            
            .project-card .project-link {
                margin: 0 auto !important;
                text-align: center !important;
            }
            
            .skill-card p,
            .service-card p {
                text-align: center;
            }
            
            /* Center contact items */
            .contact-grid {
                justify-content: center;
            }
            
            .contact-item {
                text-align: center;
            }
            
            .hero-content {
                flex-direction: column;
                text-align: center;
                gap: 0;
                padding: 0;
                align-items: center;
                justify-content: center;
                position: relative;
                min-height: 100vh;
            }
            
            .hero-left {
                text-align: center;
                width: 100%;
                max-width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                z-index: 3;
                padding: 2rem 1rem;
                margin: 1rem;
            }
            
            .hero-right {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }
            
            .hero-image {
                width: 100%;
                height: 100%;
                max-width: none;
                border: none;
                border-radius: 0;
                position: absolute;
                top: 0;
                left: 0;
                object-fit: contain;
            }
            
            .hero-image img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                margin: 0;
                border-radius: 0;
            }
            
            .hero-name {
                font-size: 2.5rem;
                text-align: center;
                color: white;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            }
            
            .hero-description {
                font-size: 1rem;
                text-align: center;
                max-width: 100%;
                padding: 0 1rem;
                margin-left: auto;
                margin-right: auto;
                color: rgba(255, 255, 255, 0.9);
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            }
            
            .hero-stats {
                justify-content: center;
                gap: 1.5rem;
            }
            
            .hero-actions {
                justify-content: center;
                flex-wrap: wrap;
                gap: 1rem;
            }
            
            .hero-badge {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                background: rgba(59, 130, 246, 0.8);
                color: white;
                border: 1px solid rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(5px);
                border-radius: 1rem;
                padding: 0.8rem 1.5rem;
            }
            
            .stat-item {
                background: rgba(0, 0, 0, 0.2);
                backdrop-filter: blur(5px);
                border-radius: 1rem;
                padding: 1rem;
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            
            .stat-number {
                color: white;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
                font-size: 2rem;
            }
            
            .stat-label {
                color: rgba(255, 255, 255, 0.9);
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            }
            
            .btn-primary {
                background: rgba(59, 130, 246, 0.9);
                border: 1px solid rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(5px);
                border-radius: 1.5rem;
            }
            
            .btn-secondary {
                background: rgba(255, 255, 255, 0.75);
                color: var(--soft-purple);
                border: 0.15rem solid var(--soft-purple);
                backdrop-filter: blur(10px);
                font-weight: 700;
            }
            
            .btn-secondary:hover {
                background: var(--soft-purple);
                color: white;
                transform: translateY(-0.1rem) scale(1.01);
                box-shadow: 0 0.5rem 2rem rgba(59, 130, 246, 0.3);
                border-color: transparent;
            }
            
            .hero-actions {
                flex-direction: column;
                gap: 1rem;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                padding: 0 !important;
                margin: 0 0 6rem 0 !important;
            }
            
            .btn,
            button.btn,
            .hero-actions .btn,
            .hero-actions button.btn {
                width: 85% !important;
                justify-content: center !important;
                margin: 0 auto !important;
                padding: 3.5vw 5.5vw !important;
                font-size: 4.5vw !important;
                display: flex !important;
                align-items: center !important;
                box-sizing: border-box !important;
            }
            
            .btn i,
            button.btn i {
                font-size: 4.5vw !important;
                margin-right: 0.5rem !important;
            }
            
            /* Add space between hero buttons and scroll indicator */
            .hero-actions {
                margin-bottom: 3rem !important;
            }
            
            /* Center hero scroll indicator on mobile */
            .hero-scroll {
                left: 50% !important;
                transform: translateX(-50%) !important;
                display: flex !important;
                justify-content: center !important;
                width: auto !important;
                margin-top: 5rem !important;
            }
            
            .scroll-indicator {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                margin: 0 auto !important;
            }
            
            /* Center section actions on mobile */
            .section-actions {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 1rem !important;
                margin: 3rem auto 0 auto !important;
                padding: 0 !important;
                width: 100% !important;
            }
            
            .section-actions .btn {
                width: 85% !important;
                margin: 0 auto !important;
                padding: 3.5vw 5.5vw !important;
                font-size: 4.5vw !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
            }
            
            
            .services-grid {
                grid-template-columns: 1fr;
            }
            
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .contact-form {
                padding: 1.5rem;
            }
            
            .contact-actions {
                grid-template-columns: 1fr;
                gap: 1rem;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                margin: 3rem auto 0 auto !important;
                padding: 0 !important;
            }
            
            .contact-action-btn {
                padding: 3.5vw 5.5vw !important;
                width: 85% !important;
                margin: 0 auto !important;
                font-size: 4.5vw !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
            }
            
            .contact-form-wrapper {
                padding: 2rem;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .contact-hero h2 {
                font-size: 2.5rem;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }
            
            .footer-section {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            
            .footer-contact {
                align-items: center;
            }
            
            .contact-info-item {
                justify-content: center;
            }
            
            .footer-social {
                justify-content: center;
            }
            
            .footer-logo {
                justify-content: center;
            }
            
            .footer-bottom-content {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }
            
            .footer-bottom-links {
                justify-content: center;
            }
            
            .hero-image-overlay {
                display: block;
            }
        }
        
        
        /* Promo CTA Section */
        .promo-cta-section {
            padding: clamp(4rem, 8vw, 6rem) 0;
            background: var(--gradient-secondary);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .promo-cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        
        .promo-cta-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3rem;
            position: relative;
            z-index: 2;
        }
        
        .promo-icon {
            flex-shrink: 0;
        }
        
        .promo-icon i {
            font-size: clamp(3rem, 8vw, 5rem);
            color: white;
            filter: drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.3));
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-1rem);
            }
        }
        
        .promo-text {
            flex: 1;
        }
        
        .promo-text h2 {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            color: white;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .promo-text p {
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.6;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        
        .promo-actions {
            display: flex;
            gap: 1.5rem;
            flex-shrink: 0;
        }
        
        @media (max-width: 968px) {
            .promo-cta-content {
                flex-direction: column;
                text-align: center;
                padding: 0 !important;
            }
            
            .promo-actions {
                flex-direction: column;
                width: 100% !important;
                max-width: none !important;
                margin: 3rem auto 0 auto !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 !important;
                gap: 1rem !important;
            }
            
            .promo-actions .btn {
                width: 85% !important;
                margin: 0 auto !important;
                padding: 3.5vw 5.5vw !important;
                font-size: 4.5vw !important;
                justify-content: center !important;
                display: flex !important;
                align-items: center !important;
                box-sizing: border-box !important;
            }
        }
        
        
        /* Floating Menu */
        .floating-menu {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }
        
        /* Floating Call Button */
        .floating-call-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 65px;
            height: 65px;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0.5rem 2rem rgba(34, 197, 94, 0.5);
            text-decoration: none;
            z-index: 1000;
            transition: all 0.3s ease;
            animation: pulse-call 2s infinite;
            overflow: hidden;
        }
        
        .floating-call-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.3s ease;
        }
        
        .floating-call-btn:hover::before {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .floating-call-btn i {
            color: white;
            font-size: 1.5rem;
            transition: all 0.3s ease;
            z-index: 1;
        }
        
        .floating-call-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0.75rem 3rem rgba(34, 197, 94, 0.7);
            animation: none;
        }
        
        .floating-call-btn:hover i {
            animation: shake 0.5s ease;
        }
        
        .floating-call-text {
            position: absolute;
            right: 75px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.9rem;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transform: translateX(10px);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .floating-call-btn:hover .floating-call-text {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }
        
        @keyframes pulse-call {
            0%, 100% {
                box-shadow: 0 0.5rem 2rem rgba(34, 197, 94, 0.5);
            }
            50% {
                box-shadow: 0 0.5rem 2.5rem rgba(34, 197, 94, 0.8);
            }
        }
        
        @keyframes shake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-15deg); }
            75% { transform: rotate(15deg); }
        }
        
        @media (max-width: 768px) {
            .floating-call-btn {
                width: 60px;
                height: 60px;
                bottom: 1.5rem;
                right: 1.5rem;
            }
            
            .floating-call-btn i {
                font-size: 1.3rem;
            }
            
            .floating-call-text {
                display: none;
            }
        }
        
        .floating-menu-toggle {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--soft-green), var(--soft-blue));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0.5rem 2rem rgba(34, 197, 94, 0.4);
            cursor: pointer;
            transition: var(--transition-medium);
            animation: pulse 2s infinite;
        }
        
        .floating-menu-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 0.75rem 3rem rgba(34, 197, 94, 0.6);
        }
        
        .floating-menu-toggle i {
            color: white;
            font-size: 1.5rem;
            transition: var(--transition-medium);
        }
        
        .floating-menu-toggle.active i {
            transform: rotate(45deg);
        }
        
        .floating-menu-items {
            position: absolute;
            bottom: 70px;
            right: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: var(--transition-medium);
        }
        
        .floating-menu.active .floating-menu-items {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .floating-menu-item {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
            text-decoration: none;
            transition: var(--transition-medium);
            position: relative;
            backdrop-filter: blur(10px);
        }
        
        .floating-menu-item:hover {
            transform: scale(1.1);
            box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
        }
        
        .floating-menu-item i {
            font-size: 1.2rem;
            transition: var(--transition-medium);
        }
        
        .floating-menu-item:nth-child(1) i {
            color: var(--soft-green);
        }
        
        .floating-menu-item:nth-child(2) i {
            color: var(--soft-blue);
        }
        
        .floating-menu-item:nth-child(3) i {
            color: #7B68EE;
        }
        
        .floating-menu-item:nth-child(4) i {
            color: #25D366;
        }
        
        .floating-menu-item:nth-child(5) i {
            color: var(--soft-purple);
        }
        
        .floating-menu-item:hover i {
            transform: scale(1.2);
        }
        
        .tooltip {
            position: absolute;
            right: 60px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition-medium);
            backdrop-filter: blur(10px);
        }
        
        .tooltip::after {
            content: '';
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            border: 5px solid transparent;
            border-left-color: rgba(0, 0, 0, 0.8);
        }
        
        .floating-menu-item:hover .tooltip {
            opacity: 1;
            visibility: visible;
        }
        
        /* Responsive floating menu */
        @media (max-width: 768px) {
            .floating-menu {
                bottom: 1rem;
                right: 1rem;
            }
            
            .floating-menu-toggle {
                width: 50px;
                height: 50px;
            }
            
            .floating-menu-toggle i {
                font-size: 1.2rem;
            }
            
            .floating-menu-item {
                width: 45px;
                height: 45px;
            }
            
            .floating-menu-item i {
                font-size: 1rem;
            }
            
            .tooltip {
                display: none;
            }
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0.5rem 2rem rgba(34, 197, 94, 0.4);
            }
            50% {
                box-shadow: 0 0.5rem 2rem rgba(34, 197, 94, 0.6), 0 0 0 1rem rgba(34, 197, 94, 0.1);
            }
            100% {
                box-shadow: 0 0.5rem 2rem rgba(34, 197, 94, 0.4);
            }
        }
        
        /* Responsive floating button */
        @media (max-width: 768px) {
            .floating-call-btn {
                bottom: 1rem;
                right: 1rem;
                width: 50px;
                height: 50px;
            }
            
            .floating-call-btn i {
                font-size: 1.2rem;
            }
        }

        /* Legal pages */
        .legal-page {
            position: relative;
            z-index: 1;
        }

        .legal-container {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .legal-hero {
            padding: 140px 0 80px;
            background: var(--gradient-hero);
            position: relative;
            overflow: hidden;
        }

        .legal-hero::before,
        .legal-hero::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2), transparent 60%);
            filter: blur(0px);
        }

        .legal-hero::before {
            width: 420px;
            height: 420px;
            top: -160px;
            right: -90px;
        }

        .legal-hero::after {
            width: 360px;
            height: 360px;
            bottom: -140px;
            left: -120px;
        }

        .legal-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 999px;
            background: rgba(59, 130, 246, 0.12);
            color: var(--soft-blue);
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 20px;
            border: 1px solid rgba(59, 130, 246, 0.2);
            backdrop-filter: blur(8px);
        }

        .legal-hero h1 {
            font-size: clamp(2.2rem, 4vw, 3.4rem);
            margin: 0 0 20px;
            line-height: 1.15;
            color: var(--text-color);
        }

        .legal-intro {
            font-size: clamp(1.05rem, 2vw, 1.2rem);
            max-width: 760px;
            color: var(--text-light);
            margin: 0;
        }

        .legal-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-top: 32px;
        }

        .legal-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            border-radius: 14px;
            background: var(--soft-bg-card);
            border: 1px solid rgba(59, 130, 246, 0.18);
            box-shadow: var(--shadow-light);
            color: var(--text-light);
            backdrop-filter: blur(10px);
        }

        .legal-meta-item i {
            color: var(--soft-purple);
        }

        .legal-section {
            padding: 80px 0 120px;
        }

        .legal-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 28px;
        }

        .legal-card {
            background: var(--soft-bg-card);
            border-radius: 20px;
            padding: 32px;
            border: 1px solid rgba(59, 130, 246, 0.2);
            box-shadow: var(--shadow-medium);
            backdrop-filter: blur(12px);
            transition: transform var(--transition-medium), box-shadow var(--transition-medium);
        }

        .legal-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 45px rgba(59, 130, 246, 0.18);
        }

        .legal-card h2 {
            font-size: clamp(1.35rem, 2.4vw, 1.65rem);
            margin-top: 0;
            margin-bottom: 18px;
            color: var(--soft-blue);
        }

        .legal-card p,
        .legal-card li {
            color: var(--text-light);
            font-size: 1rem;
            line-height: 1.7;
        }

        .legal-card ul {
            padding-left: 1.2rem;
            margin: 0;
            display: grid;
            gap: 10px;
        }

        .legal-card li::marker {
            color: var(--soft-purple);
        }

        .legal-card a {
            color: var(--soft-blue);
            font-weight: 600;
            text-decoration: none;
        }

        .legal-card a:hover {
            text-decoration: underline;
        }

        .legal-cta {
            margin-top: 70px;
            border-radius: 24px;
            padding: 48px 40px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.25));
            border: 1px solid rgba(59, 130, 246, 0.25);
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2);
        }

        .legal-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.25), transparent 55%);
            pointer-events: none;
        }

        .legal-cta-content {
            position: relative;
            z-index: 1;
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .legal-cta h3 {
            font-size: clamp(1.4rem, 2.6vw, 1.8rem);
            margin: 0;
            color: var(--text-color);
        }

        .legal-cta p {
            margin: 0;
            color: var(--text-light);
            font-size: 1rem;
        }

        .legal-cta .btn {
            align-self: center;
            padding: 14px 28px;
            font-size: 1rem;
        }

        .legal-card span[data-translate] {
            display: inline;
        }

        @media (max-width: 992px) {
            .legal-meta {
                gap: 14px;
            }
            
            .legal-meta-item {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .legal-hero {
                padding-top: 120px;
                padding-bottom: 60px;
            }
            
            .legal-card {
                padding: 24px;
            }
            
            .legal-cta {
                padding: 2rem 1.5rem;
                text-align: center;
            }
            
            .legal-cta-content {
                display: flex;
                flex-direction: column;
                align-items: center !important;
                justify-content: center !important;
                text-align: center;
                width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            .legal-cta .btn {
                width: 85% !important;
                margin: 3rem auto 0 auto !important;
                padding: 3.5vw 5.5vw !important;
                font-size: 4.5vw !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
            }
        }

        [data-theme="dark"] .legal-meta-item,
        [data-theme="dark"] .legal-card {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.92));
            border-color: rgba(96, 165, 250, 0.25);
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.6);
        }

        [data-theme="dark"] .legal-card h2 {
            color: #93c5fd;
        }

        [data-theme="dark"] .legal-card p,
        [data-theme="dark"] .legal-card li,
        [data-theme="dark"] .legal-meta-item {
            color: #e2e8f0;
        }

        [data-theme="dark"] .legal-cta {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.4), rgba(30, 41, 59, 0.7));
            border-color: rgba(96, 165, 250, 0.4);
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.75);
        }

        [data-theme="dark"] .legal-cta::before {
            background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.35), transparent 55%);
        }

        [data-theme="dark"] .legal-cta p {
            color: #cbd5e1;
        }
        
        [data-theme="dark"] .legal-hero {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
        }
        
        [data-theme="dark"] .legal-hero::before,
        [data-theme="dark"] .legal-hero::after {
            background: radial-gradient(circle at center, rgba(96, 165, 250, 0.28), transparent 60%);
        }
        
        [data-theme="dark"] .legal-tag {
            background: rgba(59, 130, 246, 0.2);
            border-color: rgba(96, 165, 250, 0.35);
            color: #bfdbfe;
        }
        
        [data-theme="dark"] .legal-intro {
            color: #cbd5e1;
        }
        
        [data-theme="dark"] .legal-meta-item {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
        }

        /* Maintenance page */
        .maintenance-hero {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(56, 189, 248, 0.25));
        }

        .maintenance-page .maintenance-icon {
            width: 90px;
            height: 90px;
            border-radius: 24px;
            background: rgba(59, 130, 246, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            border: 1px solid rgba(59, 130, 246, 0.25);
            box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25);
        }

        .maintenance-page .maintenance-icon i {
            font-size: 2rem;
            color: var(--soft-blue);
        }

        .maintenance-meta .legal-meta-item {
            background: rgba(255, 255, 255, 0.85);
        }

        .maintenance-grid {
            align-items: stretch;
        }

        .maintenance-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 20px;
        }

        .maintenance-actions .btn {
            min-width: 160px;
        }

        .maintenance-cta {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(34, 197, 94, 0.18));
            border-color: rgba(59, 130, 246, 0.28);
        }

        [data-theme="dark"] .maintenance-meta .legal-meta-item {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
        }

        [data-theme="dark"] .maintenance-page .maintenance-icon {
            background: rgba(59, 130, 246, 0.25);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.6);
        }

        [data-theme="dark"] .maintenance-cta {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.45), rgba(34, 197, 94, 0.22));
        }
    

/* ============================================
   PRICING SECTION STYLES
   ============================================ */

.pricing-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    z-index: 1;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 3rem auto 0;
}

.pricing-card {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    padding: 2.5rem;
    border: 2px solid #e2e8f0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: var(--soft-purple);
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.2);
    z-index: 10;
}

.pricing-card.featured {
    border-color: var(--soft-purple);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15);
    transform: scale(1.05);
}

.pricing-card.featured:hover {
    transform: translateY(-8px) scale(1.05);
}

.pricing-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-purple-dark));
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.pricing-card-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-purple-dark));
    border-radius: 50%;
    font-size: 1.8rem;
    color: white;
}

.pricing-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.pricing-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.pricing-price {
    text-align: center;
    padding: 2rem 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
}

.price-amount {
    font-size: 3rem;
    font-weight: 900;
    color: var(--soft-purple);
    display: block;
    line-height: 1;
}

.price-period {
    font-size: 0.95rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.5rem;
}

.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.feature-item i {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

.feature-item .fa-check {
    background: #10b981;
    color: white;
}

.feature-item.disabled {
    opacity: 0.4;
}

.feature-item.disabled .fa-times {
    background: #ef4444;
    color: white;
}

.pricing-card .btn {
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
    color: white;
    border: none;
}

.pricing-card .btn:hover {
    background: linear-gradient(135deg, var(--soft-blue), var(--soft-purple-dark));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Additional Services Section */
.additional-services-section {
    padding: 6rem 0;
    background: white;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: #f8fafc;
    padding: 2rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.service-card:hover {
    border-color: var(--soft-purple);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
}

.service-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-purple-dark));
    border-radius: 50%;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1.5rem;
}

.service-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.service-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.service-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--soft-purple);
}

/* ============================================
   CONTACT FORM STYLES
   ============================================ */

.contact-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    z-index: 1;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 3rem auto 0;
}

.contact-info-cards {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}

.contact-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--soft-bg-white);
    border-radius: 1rem;
    border: 2px solid var(--soft-bg-medium);
    transition: all 0.3s ease;
}

.contact-card:hover {
    border-color: var(--soft-purple);
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.1);
}

.contact-card-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-purple-dark));
    border-radius: 50%;
    font-size: 1.3rem;
    color: white;
}

.contact-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--soft-text-primary);
    margin-bottom: 0.5rem;
}

.contact-card-link {
    font-size: 1rem;
    font-weight: 600;
    color: var(--soft-purple);
    text-decoration: none;
    display: block;
    margin-bottom: 0.3rem;
}

.contact-card-link:hover {
    text-decoration: underline;
}

.contact-card-text {
    font-size: 0.9rem;
    color: var(--soft-text-muted);
}

.contact-social-links {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.contact-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 50%;
    color: var(--soft-purple);
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.contact-social-link:hover {
    background: var(--soft-purple);
    color: white;
    transform: translateY(-3px);
}

/* Contact Form */
.contact-form-wrapper {
    background: white;
    padding: 2.5rem;
    border-radius: 1.5rem;
    border: 2px solid #e2e8f0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--soft-text-primary);
    margin-bottom: 0.5rem;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-size: 1rem;
    border: 2px solid var(--soft-bg-medium);
    border-radius: 0.75rem;
    background: var(--soft-bg-white);
    color: var(--soft-text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--soft-purple);
    background: var(--soft-bg-white);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-checkbox-group {
    margin-top: 1rem;
}

.form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.form-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    cursor: pointer;
    accent-color: var(--soft-purple);
}

.btn-submit {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.form-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    display: none;
    font-size: 0.95rem;
}

.form-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
    display: block;
}

.form-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
    display: block;
}

/* FAQ Section */
.faq-section {
    padding: 6rem 0;
    background: white;
}

.faq-grid {
    max-width: 900px;
    margin: 3rem auto 0;
}

.faq-item {
    margin-bottom: 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    background: white;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--soft-purple);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--soft-purple);
}

.faq-question i {
    flex-shrink: 0;
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-answer p {
    padding: 0 1.5rem 1.5rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 968px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-8px) scale(1);
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 640px) {
    .pricing-card {
        padding: 2rem 1.5rem;
    }
    
    .price-amount {
        font-size: 2.5rem;
    }
    
    .contact-form-wrapper {
        padding: 1.5rem;
    }
}


/* ============================================
   GLOBAL MOBILE CENTERING & FIXES
   ============================================ */

@media (max-width: 768px) {
    /* Center all main sections on mobile */
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Center section headers */
    .section-header,
    .section-title,
    .section-subtitle {
        text-align: center !important;
    }
    
    /* Center hero content */
    .page-hero-content,
    .hero-content {
        text-align: center !important;
        align-items: center !important;
    }
    
    /* Center about section on mobile */
    .about-section {
        text-align: center !important;
    }
    
    .about-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 2rem !important;
    }
    
    .about-text {
        text-align: center !important;
    }
    
    .about-text h2,
    .about-text h3,
    .about-text p,
    .about-text ul {
        text-align: center !important;
    }
    
    .about-text .btn {
        margin: 0 auto !important;
        display: inline-block !important;
    }
    
    .about-text ul {
        list-style-position: inside !important;
        padding-left: 0 !important;
    }
    
    .about-image {
        order: -1;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    .about-image img {
        margin: 0 auto !important;
    }
    
    /* Center skills section */
    .skills-grid,
    .tech-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    .skill-category,
    .tech-category {
        text-align: center !important;
    }
    
    .skill-items,
    .tech-list {
        justify-content: center !important;
    }
    
    /* Center services */
    .services-grid,
    .service-categories {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    .service-card,
    .service-category-card {
        text-align: center !important;
    }
    
    /* Center portfolio/projects */
    .projects-grid,
    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
    
    .project-card,
    .portfolio-item {
        text-align: center !important;
    }
    
    .project-info,
    .project-content {
        text-align: center !important;
    }
    
    .project-tags,
    .tech-stack {
        justify-content: center !important;
    }
    
    /* Center pricing cards */
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }
    
    .pricing-card {
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 400px !important;
    }
    
    /* Center contact section */
    .contact-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    .contact-info,
    .contact-form-wrapper {
        text-align: center !important;
    }
    
    .contact-info-cards {
        text-align: left !important;
    }
    
    .contact-card {
        margin: 0 auto !important;
        max-width: 400px !important;
    }
    
    /* Center FAQ */
    .faq-grid {
        text-align: left !important;
    }
    
    /* Center CTA sections */
    .promo-cta-section {
        text-align: center !important;
    }
    
    .promo-cta-content {
        text-align: center !important;
    }
    
    .promo-cta-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    /* Center buttons */
    .btn-group,
    .button-group {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }
    
    /* Global button centering for mobile */
    .btn,
    button.btn,
    a.btn,
    .btn-primary,
    .btn-secondary {
        margin: 0 auto !important;
        padding: 3.5vw 5.5vw !important;
        font-size: 4.5vw !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure all buttons are centered in their containers */
    div > .btn,
    div > button.btn,
    div > a.btn {
        width: 85% !important;
    }
    
    /* Ensure all flex containers center on mobile */
    .flex-center-mobile {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Fix text alignment for all headings */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }
    
    /* Center navigation breadcrumbs */
    .page-hero-breadcrumb,
    .breadcrumb {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 640px) {
    /* Extra small screens - same button size as 768px */
    
    * {
        text-align: center !important;
    }
    
    /* But keep form inputs left-aligned for usability */
    input, textarea, select {
        text-align: left !important;
    }
    
    /* Keep lists readable */
    ul, ol {
        list-style-position: inside !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
    
    li {
        text-align: center !important;
    }
    
    /* Center all images */
    img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    /* Center all flex items */
    .flex, .d-flex, [class*="flex"] {
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Center grid items */
    [class*="grid"] {
        justify-items: center !important;
        text-align: center !important;
    }
    
    /* Project link buttons */
    .project-link {
        padding: 3.5vw 5.5vw !important;
        font-size: 4.5vw !important;
        min-width: auto !important;
        width: 85% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }
}

/* Very small phones (iPhone SE, small Androids) */
@media (max-width: 480px) {
    /* Same button sizes for consistency */
    
    .btn i,
    button.btn i {
        font-size: 4.5vw !important;
        margin-right: 0.25rem !important;
    }
    
    /* Tighter gaps */
    .hero-actions,
    .promo-actions,
    .section-actions,
    .contact-actions,
    .btn-group,
    .button-group {
        gap: 0.5rem !important;
    }
    
    /* Minimal padding on containers */
    .promo-cta-content {
        padding: 0 2% !important;
    }
    
    .legal-cta {
        padding: 1.5rem 1rem !important;
    }
    
    .hero-actions {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Ultra small phones (iPhone SE 1st gen, very small devices) */
@media (max-width: 375px) {
    /* Same button sizes everywhere */
    
    /* Very tight gaps */
    .hero-actions,
    .promo-actions,
    .section-actions,
    .contact-actions,
    .btn-group,
    .button-group {
        gap: 0.4rem !important;
    }
    
    /* Minimal container padding */
    .promo-cta-content {
        padding: 0 1% !important;
    }
    
    .legal-cta {
        padding: 1rem 0.5rem !important;
    }
}

/* ============================================
   NEW YEAR BANNER (Festive Strip)
   ============================================ */

.black-friday-banner {
    background: linear-gradient(135deg, #c41e3a, #8b0000, #c41e3a);
    padding: 1rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(196, 30, 58, 0.4);
    z-index: 1;
}

.black-friday-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    animation: bf-shine 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes bf-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.bf-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.bf-icon {
    font-size: 1.5rem;
    color: #ffd700;
    animation: bf-pulse 1s ease-in-out infinite;
}

@keyframes bf-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.bf-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .black-friday-banner {
        padding: 0.75rem 1rem;
    }
    
    .bf-text {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }
    
    .bf-icon {
        font-size: 1.2rem;
    }
}

/* ============================================
   NEW YEAR FLOATING POPUP (Compact)
   ============================================ */

.bf-popup {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bf-popup.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.bf-popup-content {
    background: linear-gradient(135deg, #1a1a2e, #0d3320, #1a1a2e);
    border: 3px solid #ffd700;
    border-radius: 1rem;
    padding: 1rem 1.5rem 1rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3), 0 0 60px rgba(196, 30, 58, 0.2);
    position: relative;
    animation: bf-popup-glow 2s ease-in-out infinite;
}

@keyframes bf-popup-glow {
    0%, 100% { box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3), 0 0 60px rgba(196, 30, 58, 0.2); }
    50% { box-shadow: 0 10px 50px rgba(255, 215, 0, 0.5), 0 0 80px rgba(196, 30, 58, 0.3); }
}

.bf-popup-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    background: #c41e3a;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.bf-popup-close:hover {
    transform: scale(1.15) rotate(90deg);
    background: #8b0000;
}

.bf-popup-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffd700;
    flex-shrink: 0;
    animation: bf-icon-bounce 1s ease-in-out infinite;
}

@keyframes bf-icon-bounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

.bf-popup-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.bf-popup-text strong {
    font-size: 1rem;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.bf-popup-text span {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
}

.bf-popup-btn {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.bf-popup-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(196, 30, 58, 0.6);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .bf-popup {
        bottom: 15px;
        left: 50%;
        width: calc(100% - 30px);
        max-width: 400px;
    }
    
    .bf-popup-content {
        padding: 0.85rem 1rem 0.85rem 0.85rem;
        gap: 0.75rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .bf-popup-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .bf-popup-text strong {
        font-size: 0.85rem;
    }
    
    .bf-popup-text span {
        font-size: 0.95rem;
    }
    
    .bf-popup-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   NEW YEAR CTA SECTION
   ============================================ */

.bf-cta-section {
    background: linear-gradient(135deg, #1a1a2e, #0d3320, #1a1a2e);
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    border-top: 3px solid #ffd700;
    border-bottom: 3px solid #ffd700;
}

.bf-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: bf-cta-shine 4s ease-in-out infinite;
}

@keyframes bf-cta-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.bf-cta-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.bf-cta-badge {
    display: inline-block;
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    animation: bf-badge-pulse 2s ease-in-out infinite;
}

@keyframes bf-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* BF CTA Countdown */
.bf-cta-countdown {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bf-countdown-item {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    min-width: 70px;
    text-align: center;
}

.bf-countdown-item span {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffd700;
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.bf-countdown-item small {
    font-size: 0.7rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .bf-cta-countdown {
        gap: 0.5rem;
    }
    
    .bf-countdown-item {
        padding: 0.5rem 0.75rem;
        min-width: 55px;
    }
    
    .bf-countdown-item span {
        font-size: 1.3rem;
    }
    
    .bf-countdown-item small {
        font-size: 0.6rem;
    }
}

.bf-cta-title {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.bf-cta-subtitle {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.bf-cta-prices {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.bf-cta-price-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    min-width: 140px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bf-cta-price-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transition: left 0.5s ease;
}

.bf-cta-price-item:hover::before {
    left: 100%;
}

.bf-cta-price-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.bf-cta-old-price {
    font-size: 1rem;
    color: #999;
    text-decoration: line-through;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.bf-cta-new-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.bf-cta-price-label {
    font-size: 0.8rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.bf-cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.bf-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(196, 30, 58, 0.4);
}

.bf-cta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(196, 30, 58, 0.6);
}

.bf-cta-btn-secondary {
    background: transparent;
    border: 2px solid #ffd700;
    color: #ffd700;
}

.bf-cta-btn-secondary:hover {
    background: rgba(255, 215, 0, 0.1);
}

@media (max-width: 768px) {
    .bf-cta-section {
        padding: 2rem 1rem;
    }
    
    .bf-cta-prices {
        gap: 1rem;
    }
    
    .bf-cta-new-price {
        font-size: 1.5rem;
    }
    
    .bf-cta-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   NEW YEAR - LIGHT THEME STYLES
   ============================================ */

/* Light theme - Popup */
[data-theme="light"] .bf-popup-content {
    background: linear-gradient(135deg, #ffffff, #f0fff0);
    border-color: #c41e3a;
    box-shadow: 0 5px 25px rgba(196, 30, 58, 0.25);
}

[data-theme="light"] .bf-popup-text strong {
    color: #c41e3a;
}

[data-theme="light"] .bf-popup-text span {
    color: #1f2937;
}

/* Light theme - CTA Section */
[data-theme="light"] .bf-cta-section {
    background: linear-gradient(135deg, #f0fff0, #e8f5e9, #c8e6c9);
    border-top-color: #c41e3a;
    border-bottom-color: #c41e3a;
}

[data-theme="light"] .bf-cta-section::before {
    background: linear-gradient(90deg, transparent, rgba(196, 30, 58, 0.2), transparent);
}

[data-theme="light"] .bf-cta-badge {
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    color: #fff;
}

[data-theme="light"] .bf-cta-title {
    color: #c41e3a;
    text-shadow: none;
}

[data-theme="light"] .bf-cta-subtitle {
    color: #1f2937;
}

[data-theme="light"] .bf-countdown-item {
    background: rgba(196, 30, 58, 0.1);
    border-color: rgba(196, 30, 58, 0.4);
}

[data-theme="light"] .bf-countdown-item span {
    color: #c41e3a;
    text-shadow: none;
}

[data-theme="light"] .bf-countdown-item small {
    color: #1f2937;
}

[data-theme="light"] .bf-cta-old-price {
    color: #6b7280;
}

[data-theme="light"] .bf-cta-new-price {
    color: #c41e3a;
    text-shadow: none;
}

[data-theme="light"] .bf-cta-price-label {
    color: #374151;
}

[data-theme="light"] .bf-cta-btn {
    background: linear-gradient(135deg, #c41e3a, #8b0000);
    color: #fff;
}

[data-theme="light"] .bf-cta-btn:hover {
    box-shadow: 0 8px 30px rgba(196, 30, 58, 0.4);
}

[data-theme="light"] .bf-cta-btn-secondary {
    background: transparent;
    border-color: #228b22;
    color: #228b22;
}

[data-theme="light"] .bf-cta-btn-secondary:hover {
    background: rgba(34, 139, 34, 0.1);
}

/* Light theme - New Year Banner */
[data-theme="light"] .black-friday-banner {
    background: linear-gradient(135deg, #c41e3a, #8b0000, #c41e3a);
}

[data-theme="light"] .black-friday-banner .bf-title {
    color: #ffd700;
}

[data-theme="light"] .black-friday-banner .bf-subtitle {
    color: #fff;
}

[data-theme="light"] .black-friday-banner .bf-btn {
    background: linear-gradient(135deg, #ffd700, #daa520);
    color: #1f2937;
}

[data-theme="light"] .black-friday-banner .bf-btn:hover {
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.5);
}

[data-theme="light"] .black-friday-banner .bf-text {
    color: #fff;
    text-shadow: none;
}

[data-theme="light"] .black-friday-banner .bf-icon {
    color: #ffd700;
}

/* ============================================
   NEW YEAR THEME - TEMPORARY HOLIDAY STYLES
   Remove this section after January 1st
   ============================================ */

/* New Year Banner Override */
.new-year-banner {
    background: linear-gradient(135deg, #1e3a5f, #0d4f4f, #1a472a, #8b0000) !important;
    box-shadow: 0 4px 20px rgba(30, 58, 95, 0.5) !important;
    position: relative;
}

.new-year-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 215, 0, 0.6), transparent),
        radial-gradient(1px 1px at 160px 30px, #fff, transparent);
    background-size: 200px 100px;
    animation: sparkle 4s linear infinite;
    pointer-events: none;
    opacity: 0.6;
}

@keyframes sparkle {
    0% { background-position: 0 0; }
    100% { background-position: 200px 100px; }
}

.new-year-banner .bf-text {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

.new-year-banner .bf-icon {
    color: #ffd700 !important;
}

.new-year-banner .bf-icon i {
    animation: snowflake-spin 3s linear infinite;
}

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

/* New Year CTA Section Theme */
.bf-cta-section.new-year-theme {
    background: linear-gradient(135deg, #0f2027, #203a43, #1a472a, #2c3e50) !important;
    position: relative;
    overflow: hidden;
}

.bf-cta-section.new-year-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(3px 3px at 10% 20%, #fff, transparent),
        radial-gradient(2px 2px at 30% 60%, rgba(255, 215, 0, 0.8), transparent),
        radial-gradient(3px 3px at 50% 10%, #fff, transparent),
        radial-gradient(2px 2px at 70% 80%, rgba(255, 215, 0, 0.6), transparent),
        radial-gradient(3px 3px at 90% 40%, #fff, transparent),
        radial-gradient(2px 2px at 15% 90%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 85% 15%, rgba(255, 215, 0, 0.9), transparent);
    animation: twinkle 5s ease-in-out infinite alternate;
    pointer-events: none;
    opacity: 0.5;
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { opacity: 0.4; }
}

.bf-cta-section.new-year-theme .bf-cta-badge {
    background: linear-gradient(135deg, #c41e3a, #8b0000) !important;
    color: #ffd700 !important;
    border: 2px solid #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: badge-glow 2s ease-in-out infinite alternate;
}

@keyframes badge-glow {
    0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
    100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); }
}

.bf-cta-section.new-year-theme .bf-cta-title {
    color: #ffd700 !important;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.bf-cta-section.new-year-theme .bf-cta-subtitle {
    color: #e8f5e9 !important;
}

.bf-cta-section.new-year-theme .bf-cta-btn {
    background: linear-gradient(135deg, #c41e3a, #8b0000) !important;
    border: 2px solid #ffd700 !important;
    color: #ffffff !important;
}

.bf-cta-section.new-year-theme .bf-cta-btn:hover {
    background: linear-gradient(135deg, #ffd700, #ffb300) !important;
    color: #1a1a2e !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.bf-cta-section.new-year-theme .bf-countdown-item {
    background: rgba(255, 215, 0, 0.1) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.bf-cta-section.new-year-theme .bf-countdown-item span {
    color: #ffd700 !important;
}

.bf-cta-section.new-year-theme .bf-cta-price-item {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.bf-cta-section.new-year-theme .bf-cta-new-price {
    color: #ffd700 !important;
}

/* Global New Year accents - subtle festive touches */
.new-year-theme .promo-icon i,
.new-year-accent {
    color: #c41e3a !important;
}

/* Snowfall animation for body (optional - remove if too distracting) */
body.new-year-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9999;
    background-image: 
        radial-gradient(4px 4px at 100px 50px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 200px 150px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(4px 4px at 300px 100px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 400px 200px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(5px 5px at 500px 80px, rgba(255, 255, 255, 0.6), transparent);
    background-size: 650px 650px;
    animation: snowfall 15s linear infinite;
    opacity: 0.4;
}

@keyframes snowfall {
    0% { background-position: 0 -650px; }
    100% { background-position: 0 650px; }
}

/* Light theme adjustments for New Year */
[data-theme="light"] .new-year-banner {
    background: linear-gradient(135deg, #c41e3a, #8b0000, #c41e3a) !important;
}

[data-theme="light"] .new-year-banner .bf-text {
    color: #fff !important;
}

[data-theme="light"] .new-year-banner .bf-icon {
    color: #ffd700 !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9, #a5d6a7) !important;
    border-color: #c41e3a !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-badge {
    background: linear-gradient(135deg, #c41e3a, #8b0000) !important;
    color: #fff !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-title {
    color: #c41e3a !important;
    text-shadow: none !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-subtitle {
    color: #1f2937 !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-btn {
    background: linear-gradient(135deg, #c41e3a, #8b0000) !important;
    color: #fff !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-btn:hover {
    background: linear-gradient(135deg, #8b0000, #5c0000) !important;
    box-shadow: 0 8px 30px rgba(196, 30, 58, 0.5) !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-btn-secondary {
    background: transparent !important;
    border-color: #228b22 !important;
    color: #228b22 !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-btn-secondary:hover {
    background: rgba(34, 139, 34, 0.1) !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-countdown-item {
    background: rgba(196, 30, 58, 0.1) !important;
    border-color: rgba(196, 30, 58, 0.4) !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-countdown-item span {
    color: #c41e3a !important;
    text-shadow: none !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-price-item {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(196, 30, 58, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-price-item:hover {
    border-color: rgba(196, 30, 58, 0.6) !important;
    box-shadow: 0 10px 30px rgba(196, 30, 58, 0.2) !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-new-price {
    color: #c41e3a !important;
    text-shadow: none !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-old-price {
    color: #666 !important;
}

[data-theme="light"] .bf-cta-section.new-year-theme .bf-cta-price-label {
    color: #374151 !important;
}

/* Light theme - New Year Popup */
[data-theme="light"] .new-year-popup .bf-popup-content {
    background: linear-gradient(135deg, #ffffff, #e8f5e9) !important;
    border-color: #c41e3a !important;
    box-shadow: 0 10px 40px rgba(196, 30, 58, 0.3) !important;
}

[data-theme="light"] .new-year-popup .bf-popup-icon {
    background: linear-gradient(135deg, #c41e3a, #8b0000) !important;
    color: #ffd700 !important;
}

[data-theme="light"] .new-year-popup .bf-popup-text strong {
    color: #c41e3a !important;
}

[data-theme="light"] .new-year-popup .bf-popup-text span {
    color: #1f2937 !important;
}

[data-theme="light"] .new-year-popup .bf-popup-btn {
    background: linear-gradient(135deg, #c41e3a, #8b0000) !important;
    color: #fff !important;
}

[data-theme="light"] .new-year-popup .bf-popup-close {
    background: #c41e3a !important;
    color: #fff !important;
}

/* ============================================
   TEMPLATE PREVIEW IMAGE
   ============================================ */

.template-image-link {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

.template-image-link:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.template-preview-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.template-image-link:hover .template-preview-img {
    transform: scale(1.05);
}

/* ============================================
   END NEW YEAR THEME
   ============================================ */
/* ============================================
   DARK THEME - PORTFOLIO FILTERS
   ============================================ */
[data-theme="dark"] .portfolio-nav-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .filter-btn {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(59, 130, 246, 0.4);
    color: #e2e8f0;
}

[data-theme="dark"] .filter-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--soft-purple);
    color: #f1f5f9;
}

[data-theme="dark"] .filter-btn.active {
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

/* ============================================
   DARK THEME - PAGE HERO
   ============================================ */
[data-theme="dark"] .page-hero {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .page-hero-background {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9));
}

[data-theme="dark"] .page-hero-title,
[data-theme="dark"] .page-hero-subtitle {
    color: #f1f5f9;
}

[data-theme="dark"] .page-hero-breadcrumb a,
[data-theme="dark"] .page-hero-breadcrumb span {
    color: #cbd5e1;
}

[data-theme="dark"] .page-hero-breadcrumb a:hover {
    color: var(--soft-purple);
}

/* ============================================
   DARK THEME - PROJECTS SECTIONS
   ============================================ */
[data-theme="dark"] .projects-section {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

[data-theme="dark"] .projects-section h2 {
    color: var(--soft-purple);
}

[data-theme="dark"] .section-intro {
    color: #cbd5e1;
}

[data-theme="dark"] .projects-content h2 {
    color: #f1f5f9;
}

/* ============================================
   DARK THEME - PROMO CTA
   ============================================ */
[data-theme="dark"] .promo-cta-section {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .promo-cta-content h2,
[data-theme="dark"] .promo-text h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .promo-cta-content p,
[data-theme="dark"] .promo-text p {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - FOOTER
   ============================================ */
[data-theme="dark"] .footer {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-top: 1px solid rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .footer h3,
[data-theme="dark"] .footer h4 {
    color: #f1f5f9;
}

[data-theme="dark"] .footer p,
[data-theme="dark"] .footer-links a,
[data-theme="dark"] .footer-contact span {
    color: #cbd5e1;
}

[data-theme="dark"] .footer-links a:hover {
    color: var(--soft-purple);
}

[data-theme="dark"] .footer-bottom {
    background: rgba(15, 23, 42, 0.8);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .footer-bottom p,
[data-theme="dark"] .footer-bottom-links a {
    color: #94a3b8;
}

[data-theme="dark"] .social-link {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    color: #f1f5f9;
}

[data-theme="dark"] .social-link:hover {
    background: var(--soft-purple);
    border-color: var(--soft-purple);
}

/* ============================================
   DARK THEME - FLOATING CALL BUTTON
   ============================================ */
[data-theme="dark"] .floating-call-btn {
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

/* ============================================
   DARK THEME - GENERAL SECTIONS
   ============================================ */
[data-theme="dark"] .about-section,
[data-theme="dark"] .skills-section,
[data-theme="dark"] .services-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .about-section h2,
[data-theme="dark"] .skills-section h2,
[data-theme="dark"] .services-section h2 {
    color: var(--soft-purple);
}

[data-theme="dark"] .about-text p,
[data-theme="dark"] .about-section p {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - CONTACT PAGE
   ============================================ */
[data-theme="dark"] .contact-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .contact-form {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .form-group label {
    color: #f1f5f9;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(59, 130, 246, 0.3);
    color: #f1f5f9;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: #94a3b8;
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group select:focus {
    border-color: var(--soft-purple);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ============================================
   DARK THEME - PRICING PAGE
   ============================================ */
[data-theme="dark"] .pricing-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .pricing-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .pricing-card:hover {
    border-color: var(--soft-purple);
}

[data-theme="dark"] .pricing-card h3 {
    color: #f1f5f9;
}

[data-theme="dark"] .pricing-card .price {
    color: var(--soft-purple);
}

[data-theme="dark"] .pricing-card ul li {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - FAQ
   ============================================ */
[data-theme="dark"] .faq-section {
    background: linear-gradient(135deg, #1e293b, #334155);
}

[data-theme="dark"] .faq-item {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .faq-question {
    color: #f1f5f9;
}

[data-theme="dark"] .faq-answer {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - STAT CARDS
   ============================================ */
[data-theme="dark"] .stat-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .stat-number {
    color: var(--soft-purple);
}

[data-theme="dark"] .stat-label {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - PRIVACY/TERMS PAGES
   ============================================ */
[data-theme="dark"] .legal-section,
[data-theme="dark"] .privacy-section,
[data-theme="dark"] .terms-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .legal-content,
[data-theme="dark"] .privacy-content,
[data-theme="dark"] .terms-content {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .legal-content h2,
[data-theme="dark"] .legal-content h3 {
    color: #f1f5f9;
}

[data-theme="dark"] .legal-content p,
[data-theme="dark"] .legal-content li {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - SOFT BG MEDIUM OVERRIDE
   ============================================ */
[data-theme="dark"] section[style*="background"] {
    background: linear-gradient(135deg, #1e293b, #334155) !important;
}

/* END DARK THEME ADDITIONS */

/* ============================================
   DARK THEME - CONTACT INFO CARDS
   ============================================ */
[data-theme="dark"] .contact-info-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .contact-info-container h2 {
    color: var(--soft-purple);
}

[data-theme="dark"] .section-subtitle {
    color: #cbd5e1;
}

[data-theme="dark"] .contact-info-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .contact-info-card:hover {
    border-color: var(--soft-purple);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .contact-info-card h3 {
    color: #f1f5f9;
}

[data-theme="dark"] .contact-info-card p {
    color: #cbd5e1;
}

[data-theme="dark"] .contact-info-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2));
    border-color: rgba(59, 130, 246, 0.4);
}

/* ============================================
   DARK THEME - CONTACT FORM SECTION
   ============================================ */
[data-theme="dark"] .contact-form-section {
    background: linear-gradient(135deg, #1e293b, #334155);
}

[data-theme="dark"] .contact-form-container {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .contact-form-container h2 {
    color: #f1f5f9;
}

/* ============================================
   DARK THEME - ABOUT PAGE
   ============================================ */
[data-theme="dark"] .timeline-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .timeline-item {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .timeline-item:hover {
    border-color: var(--soft-purple);
}

[data-theme="dark"] .timeline-item h3 {
    color: #f1f5f9;
}

[data-theme="dark"] .timeline-item p {
    color: #cbd5e1;
}

[data-theme="dark"] .timeline-date {
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
    color: white;
}

/* ============================================
   DARK THEME - SKILLS PAGE
   ============================================ */
[data-theme="dark"] .skill-progress-bar {
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .skill-progress {
    background: linear-gradient(135deg, var(--soft-purple), var(--soft-blue));
}

[data-theme="dark"] .skill-percentage {
    color: #f1f5f9;
}

/* ============================================
   DARK THEME - SOFTWARE PAGE
   ============================================ */
[data-theme="dark"] .software-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .software-card {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .software-card:hover {
    border-color: var(--soft-purple);
}

[data-theme="dark"] .software-card h3 {
    color: #f1f5f9;
}

[data-theme="dark"] .software-card p {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - MODAL FIXES
   ============================================ */
[data-theme="dark"] .modal-content {
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .modal-title {
    color: var(--soft-purple);
}

[data-theme="dark"] .modal-subtitle {
    color: var(--soft-blue);
}

[data-theme="dark"] .order-form .form-group label {
    color: #f1f5f9;
}

[data-theme="dark"] .order-form .form-group input,
[data-theme="dark"] .order-form .form-group textarea {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(59, 130, 246, 0.3);
    color: #f1f5f9;
}

[data-theme="dark"] .order-form .checkbox-text {
    color: #cbd5e1;
}

[data-theme="dark"] .order-form .checkbox-text a {
    color: var(--soft-purple);
}

/* ============================================
   DARK THEME - BUTTONS
   ============================================ */
[data-theme="dark"] .btn-secondary {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #f1f5f9;
}

[data-theme="dark"] .btn-secondary:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: var(--soft-purple);
}

/* ============================================
   DARK THEME - INDEX/HOME PAGE
   ============================================ */
[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-subtitle {
    color: #f1f5f9;
}

[data-theme="dark"] .hero-description {
    color: #cbd5e1;
}

[data-theme="dark"] .cta-section {
    background: linear-gradient(135deg, #1e293b, #334155);
}

[data-theme="dark"] .cta-section h2 {
    color: #f1f5f9;
}

[data-theme="dark"] .cta-section p {
    color: #cbd5e1;
}

/* ============================================
   DARK THEME - MOBILE MENU
   ============================================ */
[data-theme="dark"] .nav-menu.active {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .mobile-controls {
    border-top: 1px solid rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .mobile-controls .theme-toggle,
[data-theme="dark"] .mobile-controls .lang-toggle {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    color: #f1f5f9;
}

/* ============================================
   DARK THEME - ERROR PAGES
   ============================================ */
[data-theme="dark"] .error-section {
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

[data-theme="dark"] .error-code {
    color: var(--soft-purple);
}

[data-theme="dark"] .error-title {
    color: #f1f5f9;
}

[data-theme="dark"] .error-description {
    color: #cbd5e1;
}

/* END ADDITIONAL DARK THEME FIXES */