.elementor-46008 .elementor-element.elementor-element-a54dc19{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:70px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-46008 .elementor-element.elementor-element-4585fc1{--display:flex;--justify-content:center;}.elementor-46008 .elementor-element.elementor-element-33f5cba{text-align:start;}.elementor-46008 .elementor-element.elementor-element-33f5cba .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:45px;line-height:52px;color:#000000;}.elementor-46008 .elementor-element.elementor-element-16dc80c{font-family:"Inter", Sans-serif;font-size:18px;color:#6D6D6D;}.elementor-46008 .elementor-element.elementor-element-754554f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-46008 .elementor-element.elementor-element-c4b4f55 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-46008 .elementor-element.elementor-element-c7684fb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-46008 .elementor-element.elementor-element-d206903 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:1024px){.elementor-46008 .elementor-element.elementor-element-33f5cba{text-align:center;}}@media(max-width:767px){.elementor-46008 .elementor-element.elementor-element-a54dc19{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-46008 .elementor-element.elementor-element-33f5cba{width:auto;max-width:auto;text-align:start;}}/* Start custom CSS for html, class: .elementor-element-c4b4f55 *//* Animation Keyframes */
        @keyframes AVMFadeInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

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

        @keyframes AVMBounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        @keyframes AVMPing {
            75%, 100% {
                transform: scale(2);
                opacity: 0;
            }
        }

        /* Right Side Component Styles */
        .AVM-hero-image {
            opacity: 0;
            transform: translateX(40px);
            animation: AVMFadeInRight 1s ease-out 0.3s forwards;
            max-width: 500px;
        }

        .AVM-dashboard-mockup {
            background: linear-gradient(135deg, #F8FCFC 0%, #ffffff 100%);
            border-radius: 24px;
            padding: 32px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            border: 1px solid #e5e7eb;
            position: relative;
        }

        .AVM-dashboard-inner {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid #e5e7eb;
        }

        .AVM-dashboard-header {
            background: #00c49a;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
        }

        .AVM-dashboard-title {
            font-weight: 600;
            font-size: 1.125rem;
        }

        .AVM-dashboard-subtitle {
            color: rgba(255,255,255,0.8);
            font-size: 0.875rem;
        }

        .AVM-live-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .AVM-pulse-dot {
            width: 12px;
            height: 12px;
            background: #4ade80;
            border-radius: 50%;
            animation: AVMPulse 2s infinite;
        }

        .AVM-dashboard-content {
            padding: 24px;
        }

        .AVM-call-analysis {
            background: #f9fafb;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 24px;
        }

        .AVM-analysis-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .AVM-analysis-title {
            font-size: 0.875rem;
            font-weight: 500;
            color: #6E7A84;
        }

        .AVM-processing-badge {
            background: rgba(0, 196, 154, 0.1);
            color: #00C49A;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
        }

        .AVM-call-info {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .AVM-call-icon {
            width: 32px;
            height: 32px;
            background: rgba(0, 196, 154, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00C49A; /* Set color for the icon */
        }

        .AVM-call-details h4 {
            font-size: 0.875rem;
            font-weight: 600;
            color: #070707;
            margin: 0;
        }

        .AVM-call-details p {
            font-size: 0.75rem;
            color: #6E7A84;
            margin: 4px 0 0 0;
        }

        .AVM-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 24px;
        }

        .AVM-stat-card {
            background: linear-gradient(135deg, rgba(0, 196, 154, 0.1) 0%, rgba(0, 196, 154, 0.05) 100%);
            padding: 16px;
            border-radius: 12px;
            text-align: center;
        }

        .AVM-stat-card:nth-child(2) {
            background: linear-gradient(135deg, rgba(83, 45, 245, 0.1) 0%, rgba(83, 45, 245, 0.05) 100%);
        }

        .AVM-stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #070707;
            animation: AVMPulse 2s infinite;
        }

        .AVM-trend-indicator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-top: 8px;
        }

        .AVM-trend-icon {
            font-size: 14px; /* Set font-size for icon */
        }

        .AVM-trend-text {
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .AVM-floating-ai {
            position: absolute;
            top: -24px;
            right: -24px;
            width: 96px;
            height: 96px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0, 196, 154, 0.3);
            background: #00C49A; /* Added background for consistency */
        }

        .AVM-floating-ai-inner {
            width: 64px;
            height: 64px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00C49A; /* Set color for the icon */
            font-size: 32px; /* Set font-size for the icon */
        }

        .AVM-processing-indicator {
            position: absolute;
            bottom: -16px;
            left: -16px;
            background: white;
            border-radius: 12px;
            padding: 12px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            animation: AVMBounce 2s infinite;
        }

        .AVM-processing-content {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .AVM-processing-dot {
            width: 12px;
            height: 12px;
            background: #00C49A;
            border-radius: 50%;
            animation: AVMPing 2s infinite;
        }

        .AVM-processing-text {
            font-size: 0.75rem;
            font-weight: 500;
            color: #070707;
        }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d206903 *//* ==========================================================================
           1. Global Styles & Reset
           ========================================================================== */
        :root {
            --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857;
            --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-400: #2dd4bf; --teal-600: #0d9488; --teal-700: #0f766e;
            --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb;
            --purple-100: #f3e8ff; --purple-200: #e9d5ff; --purple-400: #a855f7; --purple-500: #8b5cf6; --purple-700: #6d28d9;
            --pink-100: #fce7f3; --pink-400: #f472b6;
            --indigo-100: #e0e7ff;
            --cyan-100: #cffafe;
            --red-400: #f87171; --red-500: #ef4444;
            --orange-500: #f97316;
            --yellow-400: #facc15; --yellow-500: #eab308;
            --green-300: #86efac; --green-400: #4ade80;
            --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-600: #4b5563; --gray-700: #374151; --gray-900: #111827;
            --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-800: #1e2937; --slate-900: #0f172a;
            --white: #ffffff;
            --black: #000000;
        }

        html { line-height: 1.5; font-family: sans-serif; }
        body { margin: 0; min-height: 100vh; background-color: var(--white); }
        *, *::before, *::after { box-sizing: border-box; }
        h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
        button { font-family: inherit; font-size: 100%; margin: 0; padding: 0; line-height: inherit; color: inherit; background-color: transparent; border: none; cursor: pointer; }

        /* ==========================================================================
           2. Animations (from original code)
           ========================================================================== */
        @keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
        @keyframes grow-bar { from { height: 0; } to { height: var(--bar-height, 50%); } }
        @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes pulse-ring { 0% { transform: scale(0.33); } 40%, 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.33); } }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
        
        .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
        .animate-grow-bar { animation: grow-bar 1.5s ease-out forwards; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
        .animate-spin-slow { animation: spin-slow 8s linear infinite; }
        .animate-bounce { animation: bounce 1s infinite; }

        /* ==========================================================================
           3. Layout & Container
           ========================================================================== */
        .container { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; width: 100%; }
        .section-padding { padding-top: 3rem; padding-bottom: 3rem; }
        .text-center { text-align: center; }
        .center-text-container { max-width: 48rem; margin-left: auto; margin-right: auto; }
        .relative { position: relative; }
        .absolute { position: absolute; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .overflow-hidden { overflow: hidden; }
        .flex { display: flex; }
        .grid { display: grid; }
        .items-center { align-items: center; }
        .items-start { align-items: flex-start; }
        .items-end { align-items: flex-end; }
        .justify-center { justify-content: center; }
        .justify-between { justify-content: space-between; }
        
        /* ==========================================================================
           4. Typography
           ========================================================================== */
        .hero-title { font-size: 2.25rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
        .section-title { font-size: 1.75rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1.5rem; }
        .text-xl { font-size: 1.125rem; color: var(--gray-600); line-height: 1.625; }
        .text-lg { font-size: 1.125rem; }
        .font-bold { font-weight: 700; }
        .font-semibold { font-weight: 600; }
        .font-medium { font-weight: 500; }
        .text-white { color: var(--white); }
        .text-gray-900 { color: var(--gray-900); }
        .text-gray-700 { color: var(--gray-700); }
        .text-gray-600 { color: var(--gray-600); }
        .text-gray-500 { color: var(--gray-500); }
        .text-gray-300 { color: var(--gray-300); }
        .text-sm { font-size: 0.875rem; }
        .text-xs { font-size: 0.75rem; }
        .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

        /* Gradient Text */
        .gradient-text {
            background-image: linear-gradient(to right, var(--emerald-600), var(--teal-600));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* ==========================================================================
           5. Components
           ========================================================================== */
        /* Buttons */
        .cta-button {
            background-image: linear-gradient(to right, var(--emerald-600), var(--teal-600));
            color: var(--white);
            padding: 0.875rem 1.5rem;
            border-radius: 0.75rem;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            display: inline-block;
            width: auto;
        }
        .cta-button:hover {
            box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.25), 0 4px 6px -4px rgba(16, 185, 129, 0.25);
            transform: translateY(-0.25rem);
        }

        /* Hero Section */
        .hero-section { background-image: linear-gradient(to bottom right, var(--slate-50), var(--blue-50)); }
        .hero-grid { display: grid; gap: 2rem; align-items: center; }
        .hero-content { display: flex; flex-direction: column; gap: 1.5rem; }
        .hero-content-text { display: flex; flex-direction: column; gap: 1rem; }
        .hero-buttons { display: flex; flex-direction: column; gap: 1rem; }

        /* Dashboard Mockup */
        .mockup-wrapper {
            background-color: var(--white);
            border-radius: 1.25rem;
            box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.15);
            padding: 1.5rem;
            border: 1px solid var(--gray-100);
            transition: transform 0.5s ease;
            margin-top: 2rem;
        }
        .mockup-wrapper:hover { transform: scale(1.05); }
        .mockup-header { margin-bottom: 1.5rem; }
        .mockup-header h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); }
        .mockup-header p { font-size: 0.8125rem; color: var(--gray-500); }
        .live-indicator-dot { width: 0.5rem; height: 0.5rem; background-color: var(--emerald-500); border-radius: 9999px; }
        .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        .metric-card {
            background-color: var(--gray-50);
            border-radius: 0.875rem;
            padding: 1.25rem;
            transition: box-shadow 0.3s ease;
        }
        .metric-card:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
        .metric-card .header { margin-bottom: 0.875rem; }
        .metric-card .icon { padding: 0.5rem; border-radius: 0.5rem; }
        .metric-card .icon svg { width: 1.25rem; height: 1.25rem; }
        .metric-card .value { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.25rem; }
        .metric-card .change { font-size: 0.8125rem; font-weight: 500; color: var(--emerald-600); }
        .chart-container { margin-top: 1.5rem; padding: 1.25rem; background-image: linear-gradient(to right, var(--teal-50), var(--teal-50)); border-radius: 0.875rem; }
        .chart-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 4rem; }
        .chart-bar { background-image: linear-gradient(to top, var(--emerald-500), var(--emerald-400)); border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem; flex: 1 1 0%; }
        .floating-icon { width: 2.5rem; height: 2.5rem; border-radius: 9999px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .floating-icon svg { width: 1rem; height: 1rem; color: var(--white); }
        
        /* Problem/Features Section */
        .problem-section { background-image: linear-gradient(to bottom right, var(--gray-50), var(--slate-100)); }
        .problem-grid { display: grid; gap: 1.5rem; }
        .problem-card {
            background-color: var(--white);
            border-radius: 1.25rem;
            padding: 1.5rem;
            box-shadow: 0 15px 20px -5px rgba(0,0,0,0.1);
            transform: translateY(0);
            transition: all 0.3s ease;
            border-top: 4px solid var(--emerald-500);
        }
        .problem-card:hover { box-shadow: 0 20px 25px -12px rgba(0,0,0,0.25); transform: translateY(-0.5rem); }
        .problem-card .icon-wrapper { width: 3.5rem; height: 3.5rem; border-radius: 0.875rem; margin-bottom: 1.25rem; color: var(--white); }
        .problem-card .icon-wrapper svg { width: 1.75rem; height: 1.75rem; }
        .problem-card h3 { font-size: 1.125rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.875rem; }
        .problem-card p { color: var(--gray-600); line-height: 1.625; font-size: 0.9375rem; }

        /* Solution Section */
        .solution-section { background-color: var(--white); }
        .solution-grid { display: grid; gap: 3rem; }
        .solution-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
        .solution-item .icon { padding: 0.25rem; background-color: var(--emerald-100); border-radius: 0.5rem; color: var(--emerald-600); margin-top: 0.125rem; flex-shrink: 0; }
        .solution-item .icon svg { width: 1.25rem; height: 1.25rem; }
        .solution-item span { font-size: 0.9375rem; }

        /* Solution Mockup */
        .solution-mockup { background-image: linear-gradient(to bottom right, var(--slate-50), var(--blue-50)); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.15); border: 1px solid var(--gray-100); transition: transform 0.5s ease; margin-top: 2rem; }
        .solution-mockup:hover { transform: scale(1.05); }
        .solution-mockup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        .solution-mockup-card { background-image: linear-gradient(to bottom right, var(--emerald-100), var(--teal-100)); backdrop-filter: blur(4px); border-radius: 0.875rem; padding: 1.25rem; border: 1px solid var(--emerald-200); transition: all 0.2s; }
        .solution-mockup-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
        .solution-mockup-card .title { font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.5rem; }
        .solution-mockup-card .value { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.25rem; }
        .solution-mockup-card .subtitle { font-size: 0.8125rem; font-weight: 600; }
        .solution-network-viz { margin-top: 1.5rem; position: relative; height: 6rem; background-image: linear-gradient(to right, var(--teal-50), var(--teal-50)); border-radius: 0.875rem; overflow: hidden; border: 1px solid var(--emerald-200); }
        .solution-network-viz .dot { position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 9999px; }

        /* Use Cases (Tabs) Section */
        .use-cases-section { background-image: linear-gradient(to bottom right, var(--gray-50), var(--slate-100)); }
        .tabs-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; }
        .tab-btn { padding: 0.625rem 1.25rem; border-radius: 0.75rem; font-weight: 600; transition: all 0.3s; font-size: 0.875rem; }
        .tab-btn.active { background-color: var(--emerald-600); color: var(--white); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
        .tab-btn:not(.active) { background-color: var(--white); color: var(--gray-600); }
        .tab-btn:not(.active):hover { background-color: #049466; color: var(--white); }
        .tab-container { background-color: var(--white); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 15px 20px -5px rgba(0,0,0,0.1); }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: fade-in 0.5s ease-out; }
        .tab-content-grid { display: grid; gap: 1.5rem; }
        .tab-content h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.875rem; }
        .tab-content p { color: var(--gray-600); margin-bottom: 1.25rem; line-height: 1.625; font-size: 0.9375rem; }
        .tab-list { display: flex; flex-direction: column; gap: 0.75rem; }
        .tab-list-item { display: flex; align-items: flex-start; gap: 0.75rem; }
        .tab-list-item svg { width: 1.25rem; height: 1.25rem; color: var(--emerald-500); margin-top: 0.125rem; flex-shrink: 0; }
        .tab-list-item span { font-size: 0.9375rem; }
        .tab-image { width: 100%; height: 16rem; object-fit: cover; border-radius: 0.875rem; box-shadow: 0 8px 12px -3px rgba(0,0,0,0.1); transition: box-shadow 0.3s; }
        .tab-image:hover { box-shadow: 0 15px 20px -5px rgba(0,0,0,0.1); }
        .tab-image-overlay { background-image: linear-gradient(to top, rgba(0,0,0,0.15), transparent); }

        /* API Section */
        .api-section { background-color: var(--white); }
        .api-grid { display: grid; gap: 3rem; }
        .api-features-list { display: flex; flex-direction: column; gap: 0.875rem; }
        .code-mockup-wrapper { background-image: linear-gradient(to bottom right, var(--slate-50), var(--blue-50)); border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 20px 25px -12px rgba(0, 0, 0, 0.15); border: 1px solid var(--gray-100); transition: transform 0.5s ease; margin-top: 2rem; }
        .code-mockup-wrapper:hover { transform: scale(1.05); }
        .code-preview { margin-top: 1.5rem; background-image: linear-gradient(to right, var(--gray-900), var(--slate-800)); border-radius: 0.875rem; padding: 1.25rem; box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06); }
        .code-window-controls { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.875rem; }
        .code-window-dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
        .code-body { color: var(--emerald-400); font-size: 0.8125rem; }
        .code-body .text-gray-400 { color: var(--gray-400); }
        .code-body .text-blue-300 { color: #93c5fd; }
        .code-body .text-white { color: var(--white); }
        .code-body .text-yellow-300 { color: #fde047; }
        .code-body .text-emerald-400 { color: var(--emerald-400); }
        .code-body .text-green-300 { color: var(--green-300); }

        /* Why Developers Choose Section */
        .dev-choice-section { background-image: linear-gradient(to bottom right, var(--slate-900), var(--slate-800)); color: var(--white); }
        .dev-choice-pattern { background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fillRule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fillOpacity=\'0.1\'%3E%3Ccircle cx=\'30\' cy=\'30\' r=\'2\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); opacity: 0.1; }
        .dev-choice-grid { display: grid; gap: 1.5rem; }
        .dev-choice-card {
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(4px);
            border-radius: 0.875rem;
            padding: 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
        }
        .dev-choice-card:hover { background-color: rgba(255, 255, 255, 0.2); }
        .dev-choice-card .icon { color: var(--emerald-400); margin-bottom: 0.875rem; transition: transform 0.3s; }
        .dev-choice-card:hover .icon { transform: scale(1.1); }
        .dev-choice-card .icon svg { width: 1.75rem; height: 1.75rem; }
        .dev-choice-card h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 0.5rem; }
        .dev-choice-card p { color: var(--gray-300); font-size: 0.8125rem; line-height: 1.625; }

        /* Final CTA Section */
        .final-cta-section { background-color: var(--black); }
        .final-cta-container { max-width: 56rem; margin-left: auto; margin-right: auto; }
        .final-cta-box { background-color: var(--black); border-radius: 1.25rem; padding: 2rem; }
        .final-cta-box p { margin-bottom: 1.5rem; }
        .final-cta-box .cta-button { background-color: var(--teal-600); }
        
        /* ==========================================================================
           6. Responsive Styles
           ========================================================================== */
        @media (min-width: 480px) {
            .hero-buttons { flex-direction: row; }
            .tab-btn { font-size: 0.9375rem; padding: 0.75rem 1.5rem; }
        }
        
        @media (min-width: 640px) {
            .section-padding { padding-top: 3.5rem; padding-bottom: 3.5rem; }
            .hero-title { font-size: 2.5rem; }
            .section-title { font-size: 2rem; }
            .problem-grid { grid-template-columns: repeat(2, 1fr); }
            .dev-choice-grid { grid-template-columns: repeat(2, 1fr); }
            .mockup-wrapper { margin-top: 0; }
            .solution-mockup { margin-top: 0; }
            .code-mockup-wrapper { margin-top: 0; }
        }

        @media (min-width: 768px) {
            .section-padding { padding-top: 4rem; padding-bottom: 4rem; }
            .problem-grid { grid-template-columns: repeat(3, 1fr); }
            .solution-item span { font-size: 1rem; }
            .tab-content h3 { font-size: 1.5rem; }
            .tab-content p { font-size: 1rem; }
            .tab-list-item span { font-size: 1rem; }
        }

        @media (min-width: 1024px) {
            .hero-title { font-size: 3rem; }
            .section-title { font-size: 2.25rem; }
            .hero-grid { grid-template-columns: repeat(2, 1fr); }
            .solution-grid { grid-template-columns: repeat(2, 1fr); }
            .tab-content-grid { grid-template-columns: repeat(2, 1fr); }
            .api-grid { grid-template-columns: repeat(2, 1fr); }
            .dev-choice-grid { grid-template-columns: repeat(4, 1fr); }
        }

        @media (min-width: 1280px) {
            .hero-title { font-size: 3.75rem; }
            .section-title { font-size: 2.5rem; }
        }
        
        
        
         .occ-faq-item {
            margin-bottom: px;
            border: 1px solid #f3f4f6;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            background: white;
        }

        .occ-faq-item:hover {
            border-color: var(--occ-primary);
        }

        .occ-faq-item.occ-active {
            border-color: var(--occ-primary);
            background: rgba(0, 196, 154, 0.05);
        }

        .occ-faq-trigger {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px;
            cursor: pointer;
            background: white;
            border: none;
            width: 100%;
            text-align: left;
            transition: all 0.3s ease;
        }

        .occ-faq-trigger:hover {
            background: rgba(0, 196, 154, 0.02);
        }

        .occ-faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: white;
        }

        .occ-faq-content.occ-active {
            max-height: 200px;
        }

        .occ-faq-content-inner {
            padding: 0 24px 24px;
        }

        /* Responsive Design */
        @media (min-width: 640px) {
            .occ-sm-flex-row { flex-direction: row; }
        }

        @media (min-width: 768px) {
            .occ-md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .occ-md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        @media (min-width: 1024px) {
            .occ-lg-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .occ-lg-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .occ-lg-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        }

        @media (max-width: 1024px) {
            .occ-container { padding: 0 20px; }
            .occ-hero-title { font-size: 36px; }
            .occ-section-title { font-size: 32px; }
            .occ-tab-list { grid-template-columns: repeat(3, 1fr); }
            .occ-tab-trigger { font-size: 12px; padding: 12px 8px; }
        }

        @media (max-width: 768px) {
            .occ-py-20 { padding-top: 60px; padding-bottom: 60px; }
            .occ-hero-title { font-size: 32px; }
            .occ-section-title { font-size: 28px; }
            .occ-tab-list { grid-template-columns: repeat(2, 1fr); }
            .occ-tab-trigger { font-size: 14px; padding: 16px; }
            .occ-dashboard-container { padding: 16px; }
        }

        @media (max-width: 640px) {
            .occ-container { padding: 0 16px; }
            .occ-hero-title { font-size: 28px; }
            .occ-section-title { font-size: 24px; }
            .occ-card-title { font-size: 20px; }
            .occ-btn { padding: 12px 24px; font-size: 16px; }
            .occ-tab-list { grid-template-columns: 1fr; }
            .occ-feature-card { padding: 24px; }
            .occ-understanding-card { padding: 24px; }
            .occ-faq-trigger { padding: 20px; }
        }
        
        
        
        
        
    /* Existing styles remain the same until the media queries */

    /* Enhanced Mobile Responsiveness */
    @media (max-width: 1024px) {
        .occ-container {
            padding: 0 20px;
        }
        .occ-hero-title {
            font-size: 36px;
        }
        .occ-section-title {
            font-size: 32px;
        }
        .occ-tab-list {
            grid-template-columns: repeat(3, 1fr);
        }
        .occ-tab-trigger {
            font-size: 12px;
            padding: 12px 8px;
        }
    }

    @media (max-width: 768px) {
        .occ-py-20 {
            padding-top: 60px;
            padding-bottom: 60px;
        }
        .occ-hero-title {
            font-size: 32px;
            line-height: 1.3;
        }
        .occ-section-title {
            font-size: 28px;
            line-height: 1.3;
            margin-bottom: 16px;
        }
        .occ-tab-list {
            grid-template-columns: repeat(2, 1fr);
        }
        .occ-tab-trigger {
            font-size: 14px;
            padding: 16px;
        }
        .occ-dashboard-container {
            padding: 16px;
        }
        .occ-grid {
            gap: 16px;
        }
        .occ-feature-card, 
        .occ-understanding-card {
            padding: 24px;
        }
        .occ-flex {
            flex-direction: column;
        }
        .occ-space-y-4 > * + * {
            margin-top: 12px;
        }
    }

    @media (max-width: 640px) {
        .occ-container {
            padding: 0 16px;
        }
        .occ-hero-title {
            font-size: 28px;
        }
        .occ-section-title {
            font-size: 24px;
        }
        .occ-card-title {
            font-size: 18px;
        }
        .occ-btn {
            padding: 12px 24px;
            font-size: 16px;
        }
        .occ-tab-list {
            grid-template-columns: 1fr;
        }
        .occ-feature-card {
            padding: 20px;
        }
        .occ-understanding-card {
            padding: 20px;
        }
        .occ-faq-trigger {
            padding: 16px;
        }
        .occ-icon-container {
            width: 50px;
            height: 50px;
            font-size: 24px;
            margin-bottom: 16px;
        }
        .occ-md-grid-cols-2,
        .occ-lg-grid-cols-2,
        .occ-lg-grid-cols-3,
        .occ-lg-grid-cols-4 {
            grid-template-columns: 1fr !important;
        }
        .occ-text-center,
        .occ-text-left {
            text-align: center !important;
        }
        .occ-px-6,
        .occ-px-8 {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }
        .occ-mb-16,
        .occ-mb-12,
        .occ-mb-8 {
            margin-bottom: 24px !important;
        }
        .occ-max-w-3xl,
        .occ-max-w-4xl,
        .occ-max-w-7xl {
            max-width: 100% !important;
        }
    }

    /* Specific mobile fixes for certain sections */
    @media (max-width: 480px) {
        .occ-hero-title {
            font-size: 24px;
        }
        .occ-section-title {
            font-size: 22px;
        }
        .occ-badge {
            padding: 6px 12px;
            font-size: 12px;
        }
        .occ-feature-card:hover {
            transform: none !important;
        }
        .occ-understanding-card:hover {
            transform: none !important;
        }
        .occ-industry-card {
            padding: 20px;
        }
        .occ-faq-content-inner {
            padding: 0 16px 16px !important;
        }
        .occ-btn {
            width: 100%;
            justify-content: center;
        }
    }

    /* Fix for tab content layout on mobile */
    @media (max-width: 768px) {
        .occ-tab-content .occ-grid {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
        }
        .occ-tab-content .occ-relative {
            order: -1;
            margin-bottom: 24px;
        }
    }
    
    
    
    
    
    
    
    
             .faq-item {
    background: white;
    border: 1px solid #00c49a;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 6px -1px rgba(133, 212, 200, 0.5);
    background: white;
    border-top: 1px solid #00c49a;
    border-bottom: none;
    border-left: 1px solid #00c49a;
    border-right: 1px solid #00c49a;
    border-radius: 8px;
}

.faq-question {
    width: 100%;
    padding: 24px;
    background: transparent;
    border-top: 1px solid #00c49a;
    border-bottom: none;
    border-left: 1px solid #00c49a;
    border-right: 1px solid #00c49a;
    border-radius: 8px;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover {
    background: #f9fafb;
    border-top: 1px solid #00c49a;
    border-bottom: none;
    border-left: 1px solid #00c49a;
    border-right: 1px solid #00c49a;
    border-radius: 8px;
}

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

.faq-answer.open {
    max-height: 200px;
}

.faq-answer-content {
    padding: 0 24px 24px;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.6;
}

.chevron {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.chevron.rotate {
    transform: rotate(180deg);
}

/* Progress Bars */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 50px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 50px;
    transition: width 1s ease;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

@keyframes mockupEntry {
    from {
        opacity: 0;
        transform: scale(0.8) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse { animation: pulse 2s infinite; }

/* Utility Classes */
.space-x-2 > * + * { margin-left: 8px; }
.space-x-3 > * + * { margin-left: 12px; }
.space-x-4 > * + * { margin-left: 16px; }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }

.rounded-full { border-radius: 50%; }
.rounded-lg { border-radius: 8px; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

.w-full { width: 100%; }
.h-full { height: 100%; }

/* Responsive Design */
@media (min-width: 640px) {
    .container { padding: 0 24px; }
    .hero-title { font-size: 44px; }
    .text-5xl { font-size: 48px; }
    .text-6xl { font-size: 56px; }
    .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .hero-grid { grid-template-columns: 1fr 1fr; }
    .tab-grid { grid-template-columns: 1fr 1fr; }
    .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-4 { grid-template-columns: repeat(4, 1fr); }
    .tab-navigation { flex-wrap: nowrap; }
}

@media (min-width: 1024px) {
    .container { padding: 0 32px; }
    .hero-title { font-size: 44px; }
    .text-5xl { font-size: 48px; }
    .text-6xl { font-size: 64px; }
    .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .hero-title { font-size: 40px; }
    .text-4xl { font-size: 30px; }
    .text-3xl { font-size: 24px; }
    .section { padding: 60px 0; }
    .tab-text { padding: 32px; }
    .tab-mockup { padding: 32px; }
    .btn { padding: 12px 20px; font-size: 14px; }
    .btn-lg { padding: 14px 24px; font-size: 16px; }
    .hero { padding: 60px 0; }
    .hero-grid { gap: 32px; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero-title { font-size: 32px; }
    .text-4xl { font-size: 24px; }
    .card { padding: 20px; }
    .tab-text { padding: 24px; }
    .tab-mockup { padding: 24px; }
    .faq-question { padding: 20px; font-size: 16px; }
    .faq-answer-content { padding: 0 20px 20px; }
}

/* Icon Styles */
.icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-lg {
    width: 24px;
    height: 24px;
}

.icon-xl {
    width: 32px;
    height: 32px;
}
    
    
.acepeakai-faq-section {
    padding: 4rem 0;
    background-color: #f9fafb;
}

.acepeakai-faq-wrapper {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 1rem;
}

.acepeakai-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.acepeakai-accordion-entry {
    background-color: white;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.acepeakai-accordion-header {
    width: 100%;
    padding: 1.5rem;
    text-align: left;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.acepeakai-accordion-header:hover {
    background-color: #f9fafb;
}

.acepeakai-accordion-arrow {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.acepeakai-accordion-entry.acepeakai-open .acepeakai-accordion-arrow {
    transform: rotate(180deg);
}

.acepeakai-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.acepeakai-accordion-entry.acepeakai-open .acepeakai-accordion-body {
    max-height: 200px;
}

.acepeakai-accordion-text {
    padding: 0 1.5rem 1.5rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.6;
}
        
        
        @media only screen and (max-width: 767px){
         
         .side-bar-left{
           text-align: left;
         } 
          
}/* End custom CSS */