* {
            scroll-behavior: smooth;
        }

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

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: scaleY(0);
            }
            100% {
                opacity: 1;
                transform: scaleY(1);
            }
        }

        @keyframes buttonPulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

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

        @keyframes toggleSlide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(24px);
            }
        }

        @keyframes sunRotate {
            from {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }
            to {
                transform: rotate(45deg) scale(0.8);
                opacity: 0;
            }
        }

        @keyframes moonFadeIn {
            from {
                transform: rotate(-45deg) scale(0.8);
                opacity: 0;
            }
            to {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
            }
            50% {
                transform: translateY(-15px) rotate(5deg);
            }
        }

        @keyframes pulse-glow {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

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

        .animate-fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        .stat-card {
            animation: slideInFromBottom 0.6s ease-out forwards;
            transform-origin: center;
        }

        .stat-card:nth-child(1) { animation-delay: 0.1s; }
        .stat-card:nth-child(2) { animation-delay: 0.2s; }
        .stat-card:nth-child(3) { animation-delay: 0.3s; }
        .stat-card:nth-child(4) { animation-delay: 0.4s; }

        .service-card {
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }

        .service-card:hover {
            transform: translateY(-12px) scale(1.03);
            box-shadow: 0 20px 50px rgba(34, 211, 238, 0.25);
        }

        .contact-info-card {
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .contact-info-card:hover {
            transform: translateX(15px) translateY(-6px);
            box-shadow: 0 16px 40px rgba(34, 211, 238, 0.2);
        }

        .btn-primary {
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(34, 211, 238, 0.4);
            letter-spacing: 0.5px;
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-primary::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
            pointer-events: none;
        }

        .btn-primary:active::after {
            width: 300px;
            height: 300px;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .service-card:hover::before {
            left: 100%;
        }

        /* Premium dark mode toggle switch */
        .theme-toggle {
            position: relative;
            width: 60px;
            height: 30px;
            background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
            border: 2px solid #475569;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            padding: 0 3px;
        }

        .theme-toggle:hover {
            border-color: #64748b;
            box-shadow: 0 0 15px rgba(34, 211, 238, 0.1);
        }

        .theme-toggle.active {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-color: #0ea5e9;
        }

        .toggle-circle {
            position: relative;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
        }

        .theme-toggle.active .toggle-circle {
            background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
            /* Dynamic transform based on text direction - will be set by JavaScript */
            transform: translateX(var(--toggle-direction, 30px));
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
        }

        .toggle-circle svg {
            width: 14px;
            height: 14px;
            animation: sunRotate 0.3s ease-out forwards;
        }

        .theme-toggle.active .toggle-circle svg {
            animation: none;
        }

        .toggle-circle .moon-icon {
            width: 14px;
            height: 14px;
            animation: moonFadeIn 0.3s ease-out forwards;
        }

        .theme-toggle:not(.active) .moon-icon {
            display: none;
        }

        .theme-toggle.active .sun-icon {
            display: none;
        }

        /* Language button enhancement */
        .lang-toggle {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .lang-toggle::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(34, 211, 238, 0.2);
            transition: left 0.3s ease;
            z-index: -1;
        }

        .lang-toggle:hover::before {
            left: 0;
        }

        .lang-toggle:active {
            transform: scale(0.95);
        }

        html.dark {
            color-scheme: dark;
        }

        /* Light mode color scheme */
        body.light-mode {
            background-color: #f5f7fa;
            color: #1a202c;
        }

        body.light-mode .nav {
            background: rgba(255, 255, 255, 0.98) !important;
            border-color: #e0e7ff !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        }

        /* Hero section now properly changes to light colors in light mode */
        body.light-mode #home {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
        }

        body.light-mode #home::before {
            background: none !important;
        }

        /* Updated all section backgrounds for light mode */
        body.light-mode #about,
        body.light-mode #services,
        body.light-mode #contact {
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f5f7fa 100%) !important;
        }

        body.light-mode h1 {
            color: #0f172a !important;
        }

        body.light-mode h2 {
            color: #1e293b !important;
        }

        body.light-mode h3 {
            color: #334155 !important;
        }

        body.light-mode p,
        body.light-mode .text-lg {
            color: #475569 !important;
        }

        body.light-mode .text-slate-300,
        body.light-mode .text-slate-400,
        body.light-mode .text-slate-500 {
            color: #64748b !important;
        }

        body.light-mode .text-white {
            color: #1e293b !important;
        }

        body.light-mode .bg-gradient-to-r.from-cyan-400 {
            background: linear-gradient(90deg, #0ea5e9, #06b6d4) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        body.light-mode .bg-slate-800,
        body.light-mode .bg-slate-800\/50 {
            background-color: #f0f4f8 !important;
        }

        body.light-mode .bg-slate-900 {
            background-color: #f8fafc !important;
        }

        body.light-mode .border-slate-700,
        body.light-mode .border-slate-800 {
            border-color: #cbd5e1 !important;
        }

        body.light-mode input,
        body.light-mode textarea {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
        }

        body.light-mode input::placeholder,
        body.light-mode textarea::placeholder {
            color: #94a3b8 !important;
        }

        body.light-mode input:focus,
        body.light-mode textarea:focus {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
        }

        body.light-mode footer {
            background-color: #f9fafb !important;
            border-color: #e5e7eb !important;
        }

        /* Enhanced service and contact cards for light mode */
        body.light-mode .service-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode .service-card:hover {
            border-color: #0ea5e9 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
            box-shadow: 0 16px 40px rgba(14, 165, 233, 0.15) !important;
        }

        /* Contact info cards styling for light mode */
        body.light-mode .contact-info-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode .contact-info-card:hover {
            border-color: #0ea5e9 !important;
            background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
            box-shadow: 0 16px 40px rgba(14, 165, 233, 0.15) !important;
        }

        /* Contact form specific styling for light mode */
        /* body.light-mode #contactForm {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08) !important;
        } */

        body.light-mode #contactForm input,
        body.light-mode #contactForm textarea {
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
            border-color: #cbd5e1 !important;
            color: #1e293b !important;
        }

        body.light-mode #contactForm input:focus,
        body.light-mode #contactForm textarea:focus {
            background: #ffffff !important;
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
        }

        body.light-mode #contactForm label {
            color: #334155 !important;
        }

        body.light-mode .stat-card {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode .stat-card:hover {
            border-color: #0ea5e9 !important;
            background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%) !important;
            box-shadow: 0 12px 32px rgba(14, 165, 233, 0.1) !important;
        }

        body.light-mode .cyan-500\/10 {
            background-color: rgba(6, 182, 212, 0.08) !important;
        }

        body.light-mode .cyan-500\/20 {
            background-color: rgba(6, 182, 212, 0.12) !important;
        }

        body.light-mode .inline-flex.items-center.gap-2 {
            background-color: rgba(6, 182, 212, 0.1) !important;
            border-color: rgba(6, 182, 212, 0.3) !important;
        }

        /* Theme toggle styling for light mode */
        body.light-mode .theme-toggle {
            background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
            border-color: #bfdbfe !important;
        }

        body.light-mode .theme-toggle:hover {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 15px rgba(14, 165, 233, 0.2) !important;
        }

        body.light-mode .lang-toggle {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
            border-color: #cbd5e1 !important;
            color: #0ea5e9 !important;
        }

        body.light-mode .lang-toggle:hover {
            background: linear-gradient(135deg, #e0f2fe 0%, #cffafe 100%) !important;
            border-color: #0ea5e9 !important;
        }

        .floating-element {
            animation: float 3s ease-in-out infinite;
        }

        .pulse-glow {
            animation: pulse-glow 2s ease-in-out infinite;
        }
        @keyframes pulseGlow {
            0%, 100% { transform: translateY(0) scale(1); opacity: .4; }
            50% { transform: translateY(-6px) scale(1.6); opacity: 1; }
        }

        .floating-dots .dot {
            animation: pulseGlow 1.5s infinite ease-in-out;
        }
        html {
            scroll-behavior: smooth;
        }

        ::-webkit-scrollbar {
            width: 14px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgb(34 211 238 / var(--tw-text-opacity, 1));
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
            transition: background 0.3s, box-shadow 0.3s;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgb(14 178 208 / var(--tw-text-opacity, 1));
            box-shadow: 0 0 15px rgba(34, 211, 238, 0.8);
        }