/* AI Integration Cost Calculator with Custom Typography */

:root {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #8b5cf6;
    --accent-color: #06b6d4;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --dark-color: #1f2937;
    --light-color: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Reset and Base Styles */
html,
body {
    margin: 0;
    color: #53498a;
    font-size: 16px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
:focus { outline: none; color: inherit; background-color: inherit; box-shadow: none; }
a:focus, a:focus img { outline: none !important; }
:focus { background: transparent !important; outline: none !important; text-decoration: none !important; }
.container { max-width: 1370px; width: 100%; margin: 0 auto; padding-left: 15px; padding-right: 15px; }
.hidden { display: none; }
.relative { position: relative; }
.text-center { text-align: center; }
h1 { font-size: 40px; font-weight: 600; line-height: 1.4; }
h2 { font-size: 40px; font-weight: 600; line-height: 1.4; }
h3 { font-size: 36px; font-weight: 600; line-height: 1.4; }
h4 { font-size: 20px; font-weight: 600; line-height: 1.4; }
h5 { line-height: 1.4; }
h6 { line-height: 1.4; }
.sec-head h2, .sec-head h3 { font-size: 40px; font-weight: 600; margin-bottom: 10px; }
body .fs-24 { font-size: 24px; font-weight: 600; line-height: 1.4; }
h1 span, .sec-head h2 span, .sec-head h3 span { color: #e8af09; }
p { color: #53498a; line-height: 1.6; }
.blue-txt { color: #1d1068; }
.yellow-txt { color: #e8af09; }
.green-txt { color: #19b04c; }
.red-txt { color: #e21a27; }
.sky-blue-txt { color: #1f61e8; }
.white-txt { color: #fff !important; }
.blue-bg { background-color: #1d1068!important; }
.yellow-bg { background-color: #e8af09!important; color: #fff !important; }
.green-bg { background-color: #19b04c!important; color: #fff !important; }
.red-bg { background-color: #e21a27!important; }
.ai_greenshadow { color: #fff !important; background-color: #19B04C !important; }
.sky-blue-bg { background-color: #1f61e8 !important; color: #fff !important; }
.gray-bg { background-color: #F0F8FF !important; }
.sub-title { color: #e8af09; margin-bottom: 15px; position: relative; padding-left: 65px; }
.sub-title::before { content: ""; position: absolute; width: 50px; height: 2px; background: #e8af09; top: 50%; left: 0; transform: translateY(-50%); }
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.pt-60 { padding-top: 60px; }
.pb-60 { padding-bottom: 60px; }
.pl-60 { padding-left: 60px; }
.p-40 { padding: 40px; }
.pt-40 { padding-top: 40px; }
.pb-40 { padding-bottom: 40px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.p-20 { padding: 20px; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px; }
.mt-0 { margin-top: 0px; }
.m-0 { margin: 0 !important; }
.my-60 { margin-top: 60px !important; margin-bottom: 60px !important; }
.mt-60 { margin-top: 60px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px; }
.my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.mb-30 { margin-bottom: 30px !important; }
.fw-5 { font-weight: 500 !important; }
.section-title { font-size: 40px; font-weight: 700; color: #53498a; margin-bottom: 1rem; line-height: 1.4; }
.section-subtitle { font-size: 1.125rem; color: #53498a; margin-bottom: 2rem; line-height: 1.6; }
.gradient-text { color: #e8af09; }
.hero-content { color: white; z-index: 2; position: relative; }
.hero-title { font-size: 40px; font-weight: 600; line-height: 1.4; margin-bottom: 1.5rem; animation: slideInUp 1s ease-out; }
.hero-title span { color: #e8af09; }
.navbar-brand { font-weight: 700; font-size: 1.5rem; color: #1d1068 !important; display: flex; align-items: center; gap: 0.5rem; }
.nav-link { font-weight: 500; color: #53498a !important; transition: color 0.3s ease; position: relative; }
.nav-link:hover { color: #e8af09 !important; }
.nav-link::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 0; height: 2px; background: #e8af09; transition: all 0.3s ease; transform: translateX(-50%); }
.cta-btn { background: #e8af09; border: none; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 600; border-radius: 12px; transition: all 0.3s ease; animation: slideInUp 1s ease-out 0.4s both; box-shadow: var(--shadow-lg); color: white; }
.cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); background: #1d1068; }
.option-card:hover { border-color: #e8af09; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.option-card.selected { border-color: #e8af09; background: #e8af09; color: white; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.option-card i { font-size: 2rem; margin-bottom: 1rem; color: #1d1068; position: relative; z-index: 1; }
.feature-card:hover { border-color: #e8af09; box-shadow: var(--shadow-md); }
.feature-card.selected { border-color: #e8af09; background: rgba(232, 175, 9, 0.05); }
.feature-card i { font-size: 1.5rem; color: #1d1068; margin-right: 1rem; }
.feature-checkbox:checked + .toggle-slider { background-color: #e8af09; }
.cost-total { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 700; font-size: 1.125rem; color: #e8af09; }
.wizard-step h4 { font-size: 20px; font-weight: 600; margin-bottom: 2rem; color: #53498a; text-align: center; line-height: 1.4; }
.cost-summary h4, .region-rates h4, .regional-comparison h4 { font-weight: 700; margin-bottom: 1.5rem; color: #53498a; }
.factor-content h5 { font-weight: 600; margin-bottom: 0.5rem; color: #53498a; }
.factor-content p { margin: 0; color: #53498a; line-height: 1.6; }
.case-study-header h4 { font-weight: 700; margin-bottom: 0.5rem; color: #53498a; }
.cta-title { font-size: 40px; font-weight: 600; margin-bottom: 1rem; line-height: 1.4; }
.btn-primary { background: #e8af09; color: white; border: none; }
.btn-primary:hover { background: #1d1068; color: white; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline-primary { border: 2px solid #e8af09; color: #e8af09; background: transparent; }
.btn-outline-primary:hover { background: #e8af09; color: white; transform: translateY(-1px); }
.accordion-button:not(.collapsed) { background: #e8af09; color: white; box-shadow: none; }
.final-cta-section { background: linear-gradient(135deg, #1d1068, #e8af09); color: white; }
.hero-section { background: linear-gradient(135deg, #1d1068 0%, #e8af09 100%); position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; }
.gradient-text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background: linear-gradient(135deg, #e8af09, #1d1068); }
.hero-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; }
.neural-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="grad1" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(255,255,255,0);stop-opacity:0" /></radialGradient></defs><circle cx="200" cy="200" r="3" fill="rgba(255,255,255,0.3)"><animate attributeName="r" values="3;8;3" dur="2s" repeatCount="indefinite"/></circle><circle cx="800" cy="300" r="2" fill="rgba(255,255,255,0.4)"><animate attributeName="r" values="2;6;2" dur="3s" repeatCount="indefinite"/></circle><circle cx="400" cy="700" r="4" fill="rgba(255,255,255,0.2)"><animate attributeName="r" values="4;10;4" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="600" cy="500" r="3" fill="rgba(255,255,255,0.3)"><animate attributeName="r" values="3;7;3" dur="1.8s" repeatCount="indefinite"/></circle></svg>') center/cover; opacity: 0.3; animation: float 20s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } }
.hero-content { color: white; z-index: 2; position: relative; }
.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; animation: slideInUp 1s ease-out; }
.hero-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9; animation: slideInUp 1s ease-out 0.2s both; }
.cta-btn { background: var(--gradient-primary); border: none; padding: 1rem 2rem; font-size: 1.125rem; font-weight: 600; border-radius: 12px; transition: all 0.3s ease; animation: slideInUp 1s ease-out 0.4s both; box-shadow: var(--shadow-lg); }
.cta-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); background: var(--gradient-accent); }
@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.hero-form-container { display: flex; justify-content: center; align-items: center; height: 100%; }
.hero-form { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 2rem; border-radius: 20px; box-shadow: var(--shadow-xl); width: 100%; max-width: 400px; animation: slideInRight 1s ease-out 0.6s both; }
.hero-form h3 { color: var(--gray-900); margin-bottom: 1.5rem; text-align: center; font-weight: 700; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
.calculator-section { background: #1e293b; }
.calculator-container { background: white; border-radius: 20px; padding: 2rem; box-shadow: var(--shadow-lg); }
.calculator-wizard { position: relative; }
.wizard-step { display: none; animation: fadeIn 0.5s ease-in-out; }
.wizard-step.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.wizard-step h4 { font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; color: var(--gray-900); text-align: center; }
.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.option-card { background: white; border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.option-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--gradient-primary); opacity: 0; transition: all 0.3s ease; z-index: 0; }
.option-card:hover::before { left: 0; opacity: 0.1; }
.option-card:hover { border-color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.option-card.selected { border-color: var(--primary-color); background: var(--primary-color); color: white; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.option-card.selected p{ color: white; }
.option-card i { font-size: 2rem; margin-bottom: 1rem; color: var(--primary-color); position: relative; z-index: 1; }
.option-card.selected i { color: white; }
.option-card h5 { font-weight: 600; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.option-card p { font-size: 0.875rem; opacity: 0.8; margin: 0; position: relative; z-index: 1; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.feature-card { background: white; border: 2px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; transition: all 0.3s ease; }
.feature-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-md); }
.feature-card.selected { border-color: var(--primary-color); background: rgba(99, 102, 241, 0.05); }
.feature-card i { font-size: 1.5rem; color: var(--primary-color); margin-right: 1rem; }
.feature-card h5 { font-weight: 600; margin: 0; flex: 1; }
.feature-toggle { position: relative; width: 100%; max-width: 50px; height: 24px; }
.feature-checkbox { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--gray-300); transition: 0.3s; border-radius: 24px; }
.toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
.feature-checkbox:checked + .toggle-slider { background-color: var(--primary-color); }
.feature-checkbox:checked + .toggle-slider:before { transform: translateX(26px); }
.wizard-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e2e8f0; }
.cost-summary { background: white; border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-lg); border: 1px solid #e2e8f0; }
.cost-summary h4 { font-weight: 700; margin-bottom: 1.5rem; color: var(--gray-900); text-align: center; }
.cost-breakdown { margin-bottom: 1.5rem; }
.cost-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #1e293b; }
.cost-item:last-child { border-bottom: none; }
.cost-total { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-weight: 700; font-size: 1.125rem; color: var(--primary-color); }
.cost-hours { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.875rem; color: var(--gray-600); }
.cost-map-section { background: #1e293b; }
.world-map { height: 400px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); }
.region-rates { background: white; border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-lg); height: fit-content; }
.region-rates h4 { font-weight: 700; margin-bottom: 1.5rem; color: var(--gray-900); }
.rate-item { padding: 1rem; border-radius: 8px; margin-bottom: 1rem; transition: all 0.3s ease; cursor: pointer; border: 1px solid #e2e8f0; }
.rate-item:hover { background: var(--gray-50); border-color: var(--primary-color); transform: translateX(5px); }
.region-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.region-info h5 { font-weight: 600; margin: 0; color: var(--gray-900); }
.rate { font-weight: 700; color: var(--primary-color); }
.region-details small { color: var(--gray-600); }
.cost-factors-section { background: white; }
.cost-factors-list { padding-left: 0; }
.factor-item { display: flex; align-items: flex-start; margin-bottom: 2rem; padding: 1.5rem; background: var(--gray-50); border-radius: 12px; transition: all 0.3s ease; }
.factor-item:hover { background: white; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.factor-icon { width: 60px; height: 60px; background: var(--gradient-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 1.5rem; flex-shrink: 0; }
.factor-icon i { font-size: 1.5rem; color: white; }
.factor-content h5 { font-weight: 600; margin-bottom: 0.5rem; color: var(--gray-900); }
.factor-content p { margin: 0; color: var(--gray-600); line-height: 1.5; }
.regional-comparison { background: white; border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-lg); }
.regional-comparison h4 { font-weight: 700; margin-bottom: 1.5rem; color: var(--gray-900); }
.comparison-table .table { margin: 0; }
.comparison-table th { font-weight: 600; color: var(--gray-700); border-bottom: 2px solid #e2e8f0; }
.comparison-table td { color: var(--gray-600); vertical-align: middle; }
.badge { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.tech-stack-section { background: #1e293b; }
.tech-categories { margin-bottom: 3rem; }
.tech-category { background: white; border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-md); height: 100%; transition: all 0.3s ease; }
.tech-category:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.category-header { display: flex; align-items: center; margin-bottom: 1.5rem; }
.category-header i { font-size: 1.5rem; color: var(--primary-color); margin-right: 1rem; width: 30px; text-align: center; }
.category-header h4 { font-weight: 600; margin: 0; color: var(--gray-900); }
.tech-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tech-item { background: #f1f5f9; color: var(--gray-700); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 500; transition: all 0.3s ease; }
.tech-item:hover { background: var(--primary-color); color: white; transform: translateY(-2px); }
.case-studies-section { background: white; }
.case-study-card { background: white; border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-lg); border: 1px solid #e2e8f0; height: 100%; transition: all 0.3s ease; }
.case-study-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); border-color: var(--primary-color); }
.case-study-header { text-align: center; margin-bottom: 2rem; }
.case-icon { width: 80px; height: 80px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.case-icon img { width: 50px; height: 50px; object-fit: contain; }
.case-icon i { font-size: 2rem; color: white; }
.case-study-header h4 { font-weight: 700; margin-bottom: 0.5rem; color: var(--gray-900); }
.case-subtitle { color: var(--gray-600); margin: 0; }
.case-results { display: flex; justify-content: space-around; margin-bottom: 2rem; padding: 1.5rem; background: var(--gray-50); border-radius: 12px; }
.result-item { text-align: center; }
.result-number { display: block; font-size: 2rem; font-weight: 700; color: var(--primary-color); line-height: 1; }
.result-label { font-size: 0.875rem; color: var(--gray-600); font-weight: 500; }
.case-tech-stack { margin-bottom: 1.5rem; }
.case-tech-stack h6 { font-weight: 600; margin-bottom: 1rem; color: var(--gray-700); }
.tech-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tech-badges .badge { background: #e2e8f0; color: var(--gray-700); font-weight: 500; }
.case-budget { text-align: center; padding: 1rem; background: rgba(99, 102, 241, 0.05); border-radius: 8px; }
.budget-label { font-size: 0.875rem; color: var(--gray-600); display: block; margin-bottom: 0.25rem; }
.budget-range { font-size: 1.125rem; font-weight: 700; color: var(--primary-color); }
.faq-section { background: #1e293b; }
.accordion-item { border: none; margin-bottom: 1rem; border-radius: 12px !important; overflow: hidden; box-shadow: var(--shadow-sm); }
.accordion-button { background: white; border: none; font-weight: 600; color: var(--gray-900); padding: 1.5rem; font-size: 1.125rem; }
.accordion-button:not(.collapsed) { background: var(--primary-color) !important; color: white !important; box-shadow: none; }
.accordion-button:focus { box-shadow: none; border: none; }
.accordion-body { padding: 1.5rem; background: white; color: var(--gray-600); line-height: 1.6; }
.final-cta-section { background: var(--gradient-primary); color: white; }
.cta-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
.cta-subtitle { font-size: 1.25rem; margin-bottom: 3rem; opacity: 0.9; }
.final-cta-form { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; margin-bottom: 2rem; }
.calendly-integration { opacity: 0.9; }
.hubspot-form .form-control, .hubspot-form .form-select { border: 1px solid var(--gray-300); border-radius: 8px; padding: 0.75rem 1rem; font-size: 1rem; transition: all 0.3s ease; }
.hubspot-form .form-control:focus, .hubspot-form .form-select:focus { border-color: #FFFFFF !important; box-shadow: unset !important; color: #FFFFFF !important; }
.hubspot-form .form-control:focus::placeholder{ color: #FFFFFF !important; }
.hubspot-form .mainBannerForm:focus::placeholder{ color: #464646 !important; }
.hubspot-form .mainBannerForm:focus{ border-color:#cbd5e1 !important; color: #464646 !important; }
.hubspot-form .form-control-lg { padding: 1rem 1.25rem; font-size: 1.125rem; }
.hubspot-form .form-control-sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.btn { border-radius: 8px; font-weight: 600; transition: all 0.3s ease; border: none; }
.btn-primary { background: var(--gradient-primary) !important; color: white; }
.btn-primary:hover { background: var(--gradient-accent); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline-primary { border: 2px solid var(--primary-color); color: var(--primary-color) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--primary-color); color: white; transform: translateY(-1px); }
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.sticky-top { position: sticky; top: 100px; z-index: 1; }
/* Call to Action Section */
.cta-section { background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);position: relative;overflow: hidden; }
.cta-section::before { content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events: none; }
.cta-left { position: relative;z-index: 2; }
.cta-form-container { background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);border-radius: 15px;padding: 2rem;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);position: relative;z-index: 2; }
/* Team Members */
.team-members {
    margin-top: 2rem;
}
.team-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}
.team-member:hover .team-avatar {
    border-color: #ffc107;
    transform: scale(1.1);
}
@media (max-width: 768px) {
    h3 { font-size: 28px; }
    .sec-head h2, .sec-head h3 { font-size: 30px; }
    .hero-title { font-size: 2.5rem; }    
    .section-title { font-size: 2rem; }
    .options-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .case-results { flex-direction: column; gap: 1rem; }
    .wizard-navigation { flex-direction: column; gap: 1rem; }
    .wizard-navigation .btn { width: 100%; }
    .sticky-top { position: static; }
    .final-cta-form .row { --bs-gutter-x: 1rem; }
    .regional-comparison { padding: 2rem 1rem; }
    .comparison-table { overflow-x: scroll; }
    .calculator-container { padding: 2rem 1rem; }
    .hero-form-container { margin-top: 20px; }
    .cost-summary { margin-top: 20px; }
    .hero-section { padding-top: 40px; padding-bottom: 40px; }
    .cta-form-container {
        margin-top: 2rem;
        padding: 1.5rem;
    }
    .team-avatar {
            width: 50px;
            height: 50px;
    }
    .cta-left {
            text-align: center;
            margin-bottom: 2rem;
    }
}
@media (max-width: 576px) {
    .hero-title { font-size: 2rem; }
    .cta-title { font-size: 2rem; }
    .hero-form, .cost-summary, .tech-category, .case-study-card { padding: 1.5rem; }
    .factor-item { flex-direction: column; text-align: center; }
    .factor-icon { margin-right: 0; margin-bottom: 1rem; }
    .factor-item { align-items: center; }
}
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
.loading { position: relative; overflow: hidden; }
.loading::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: loading 1.5s infinite; }
@keyframes loading { 0% { left: -100%; } 100% { left: 100%; } }
@media (prefers-color-scheme: dark) { :root { --gray-100: #1e293b; --gray-200: #334155; --light-color: #0f172a; } }
@media print {
    .navbar, .hero-section, .final-cta-section, .footer { display: none; }
    .calculator-section, .tech-stack-section, .case-studies-section { background: white !important; box-shadow: none !important; }
}
.textWhite{ color:#FFFFFF !important }
.pos_sticky{ position: sticky !important; top: 0; left: 0; }
.mainFaqSection .accordion-button:focus { background:#6366f1 !important; color: white !important; }
.mainFaqSection .accordion-button:not(.collapsed) { margin-bottom: 1.5rem; }
.mainFaqSection .accordion-body{ padding: 0 1.5rem 1.5rem 1.5rem; }
.mainFaqSection .accordion-button:not(.collapsed):focus { background: #6366f1 !important; }
.calendly-integration .btn.btn-outline-primary{ background: white !important; }
.calendly-integration .btn.btn-outline-primary:active, .calendly-integration .btn-outline-primary:hover { color: #6366f1 !important; box-shadow: unset !important; }
.rate-item.highlighted .region-details small, .rate-item.highlighted  .region-info h5, .rate-item.highlighted  .region-info span{ color: #FFFFFF !important; }
.accordion-button:not(.collapsed)::after { filter: invert(1) brightness(25); }
.feature-toggle label.toggle-slider { margin-bottom: 0px !important; }
.accordionHeader{ padding: 0px !important; color: #212529 !important; background-color: unset !important; }
.accordionBtn{ background-color: #FFFFFF !important; color: #212529 !important; }
.cost-summary .hubspot-form .form-control:focus{ border-color:#cbd5e1 !important; color: #28303d !important; }
.cost-summary .hubspot-form .form-control:focus::placeholder{ color: #28303d !important; } 
.calculator-section .formInputField { border: 1px solid #B7B7B7 !important; border-radius: 5px !important; background: #FFFFFF; padding: 11px 20px !important; font-weight: 400; font-size: 14px; color: #53498A; }
.calculator-section .formInputField::placeholder, .calculator-section .textAreaField { font-weight: 400; font-size: 14px; color: #53498A !important; }
.calculator-section .form-control { padding: 0px !important; border: 0 !important; }
.calculator-section .formInputField .form-control:focus{ box-shadow : unset !important; }
.calculator-section .textAreaField{ color : #28303d !important; }