body { font-family: 'Inter', sans-serif; }
        .font-serif { font-family: 'Playfair Display', serif; }
        
        /* Updated animations and color scheme to match the reference design */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(20, 184, 166, 0.3); }
            50% { box-shadow: 0 0 40px rgba(20, 184, 166, 0.6); }
        }
        
        @keyframes rotate-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        @keyframes bounce-in {
            0% { transform: scale(0) rotate(0deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
            100% { transform: scale(1) rotate(360deg); opacity: 1; }
        }
        
        @keyframes slide-in-left {
            0% { transform: translateX(-100px); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slide-in-right {
            0% { transform: translateX(100px); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes fade-in-up {
            0% { transform: translateY(30px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        
        .animate-float { animation: float 6s ease-in-out infinite; }
        .animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
        .animate-rotate-slow { animation: rotate-slow 20s linear infinite; }
        .animate-bounce-in { animation: bounce-in 1s ease-out; }
        .animate-slide-in-left { animation: slide-in-left 1s ease-out; }
        .animate-slide-in-right { animation: slide-in-right 1s ease-out; }
        .animate-fade-in-up { animation: fade-in-up 1s ease-out; }
        
        /* Staggered animations */
        .animate-delay-100 { animation-delay: 0.1s; }
        .animate-delay-200 { animation-delay: 0.2s; }
        .animate-delay-300 { animation-delay: 0.3s; }
        .animate-delay-500 { animation-delay: 0.5s; }
        .animate-delay-700 { animation-delay: 0.7s; }
        .animate-delay-1000 { animation-delay: 1s; }
        
        /* Hero background elements */
        .hero-bg-element {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, rgba(20, 184, 166, 0.1), rgba(59, 130, 246, 0.1));
            animation: float 8s ease-in-out infinite;
        }
        
        .hero-bg-element:nth-child(odd) {
            animation-direction: reverse;
            animation-duration: 12s;
        }

        /* Progress bar animation */
        @keyframes progress-fill {
            from { width: 0%; }
            to { width: var(--progress-width); }
        }
        
        .progress-bar {
            animation: progress-fill 2s ease-out forwards;
        }

        /* Enhanced responsive design for all devices */
        @media (max-width: 320px) {
            .container { padding-left: 1rem; padding-right: 1rem; }
            h1 { font-size: 1.75rem; }
            h2 { font-size: 1.5rem; }
        }
        
        @media (min-width: 321px) and (max-width: 375px) {
            .container { padding-left: 1.25rem; padding-right: 1.25rem; }
        }
        
        @media (min-width: 376px) and (max-width: 414px) {
            .container { padding-left: 1.5rem; padding-right: 1.5rem; }
        }
        
        @media (min-width: 768px) and (max-width: 1024px) {
            .container { max-width: 100%; padding-left: 2rem; padding-right: 2rem; }
        }
        
        @media (min-width: 1024px) and (max-width: 1280px) {
            .container { max-width: 1024px; }
        }
        
        @media (min-width: 1280px) and (max-width: 1440px) {
            .container { max-width: 1280px; }
        }
        
        @media (min-width: 1440px) and (max-width: 1920px) {
            .container { max-width: 1440px; }
        }
        
        @media (min-width: 1920px) {
            .container { max-width: 1600px; }
        }

        /* MacBook specific optimizations */
        @media (min-width: 1280px) and (max-width: 1440px) and (-webkit-min-device-pixel-ratio: 2) {
            body { font-size: 16px; }
            .text-sm { font-size: 0.9rem; }
        }
        
        /* MacBook Pro optimizations */
        @media (min-width: 1440px) and (max-width: 1680px) and (-webkit-min-device-pixel-ratio: 2) {
            .container { max-width: 1400px; }
        }
       .progress-bar {
           animation: progress-fill 2s ease-out forwards;
           animation-fill-mode: forwards;
        }

        /* Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 1rem;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: 1rem;
            max-width: 500px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            transform: scale(0.7) translateY(50px);
            transition: all 0.3s ease;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .modal-overlay.active .modal-content {
            transform: scale(1) translateY(0);
        }

        .modal-header {
            padding: 1.5rem;
            border-bottom: 1px solid #f3f4f6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1f2937;
            margin: 0;
        }

        .modal-close {
            background: none;
            border: none;
            width: 32px;
            height: 32px;
            cursor: pointer;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            color: #6b7280;
        }

        .modal-close:hover {
            background: #f3f4f6;
            color: #374151;
        }

        .modal-body {
            padding: 2rem 1.5rem;
        }

        .modal-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 1.5rem;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .modal-description {
            color: #6b7280;
            line-height: 1.6;
            font-size: 1rem;
            text-align: center;
        }

        /* Mobile Responsive Styles */
        @media (max-width: 640px) {
            .modal-overlay {
                padding: 0.5rem;
            }

            .modal-content {
                max-width: 100%;
                margin: 0.5rem;
                max-height: 95vh;
            }

            .modal-header {
                padding: 1rem;
            }

            .modal-title {
                font-size: 1.25rem;
            }

            .modal-body {
                padding: 1.5rem 1rem;
            }

            .modal-icon {
                width: 50px;
                height: 50px;
                font-size: 1.25rem;
                margin-bottom: 1rem;
            }

            .modal-description {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 380px) {
            .modal-header {
                padding: 0.75rem;
            }

            .modal-title {
                font-size: 1.125rem;
            }

            .modal-body {
                padding: 1rem 0.75rem;
            }

            .modal-icon {
                width: 40px;
                height: 40px;
                font-size: 1rem;
                margin-bottom: 0.75rem;
            }

            .modal-description {
                font-size: 0.875rem;
            }

            .modal-close {
                width: 28px;
                height: 28px;
            }
        }

        /* Service modal colors */
        .modal-icon.blue {
            background: linear-gradient(135deg, #dbeafe, #bfdbfe);
            color: #3b82f6;
        }
        .modal-icon.purple {
            background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
            color: #a855f7;
        }
        .modal-icon.green {
            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
            color: #22c55e;
        }
        .modal-icon.orange {
            background: linear-gradient(135deg, #fed7aa, #fbbf24);
            color: #f97316;
        }
        .modal-icon.pink {
            background: linear-gradient(135deg, #fce7f3, #fbcfe8);
            color: #ec4899;
        }
        .modal-icon.indigo {
            background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
            color: #6366f1;
        }