/* ============================================================ NEW FIX: AIme Budget Hero Readability ============================================================ */ .aime-budget-page .hero { background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.85)), #1E2939 !important; } .aime-budget-page .hero h1, .aime-budget-page .hero p { text-shadow: 0 4px 10px rgba(0,0,0,0.5) !important; } /* Header consistency: removed page-specific sticky header treatment for .aime-budget so header visuals match homepage across pages. */ /** * Groupize Homepage Mirror — Custom Overrides * ============================================ * This file is loaded AFTER all Elementor CSS to provide surgical fixes. * Do NOT edit vendor/Elementor CSS files directly. * * To activate: add to index.html (before ): * * * Issues addressed (see QA_ISSUES.md for full details): * #1 — Header "Login" button visual weight * #2 — Header "Request Demo" button explicit bg color * #3 — Hero "Explore by Vertical" button secondary style * #4 — Footer missing horizontal padding (edge-to-edge content) * #5 — Footer bottom copyright bar cramped on mobile * #6 — Hero subtitle fixed pixel width on mobile * #7 — "Built for You" section excessive top padding on mobile * #9 — Font family fallback stack (Google Fonts CDN resilience) * #10 — Footer newsletter form button explicit style + mobile width fix * * Note: Issue #8 (hard-coded beta.groupize.ai links) is handled in overrides.js */ /* ============================================================ ISSUE #1: Header "Login" Button — Lighter Ghost Style Selector: .elementor-46 .elementor-element-8a22ff4 (Login) Problem: White-fill + purple text + heavy purple border = looks too prominent on white navbar bg. Fix: Transparent bg, dark text, thin dark border. ============================================================ */ .elementor-46 .elementor-element.elementor-element-8a22ff4 .elementor-button { background-color: transparent !important; color: #1C244B !important; fill: #1C244B !important; border-color: #d1d5db !important; border-width: 1px !important; } .elementor-46 .elementor-element.elementor-element-8a22ff4 .elementor-button:hover, .elementor-46 .elementor-element.elementor-element-8a22ff4 .elementor-button:focus { background-color: #f3f4f6 !important; border-color: #9ca3af !important; } /* ============================================================ ISSUE #2: Header "Request Demo" Button — Explicit Purple Fill Selector: .elementor-46 .elementor-element-d4fb76d (Request Demo) Problem: Only fill/color set; background relies on kit cascade which may break under specificity conflicts. Fix: Explicitly declare all button colors. ============================================================ */ .elementor-46 .elementor-element.elementor-element-d4fb76d .elementor-button { background-color: #9333EA !important; color: #FFFFFF !important; fill: #FFFFFF !important; border-color: #9333EA !important; border-width: 2px !important; } .elementor-46 .elementor-element.elementor-element-d4fb76d .elementor-button:hover, .elementor-46 .elementor-element.elementor-element-d4fb76d .elementor-button:focus { background-color: #871BE9 !important; border-color: #871BE9 !important; } /* ============================================================ ISSUE #3: Hero "Explore by Vertical" Button — Lighter Secondary Selector: .elementor-10 .elementor-element-edfd51e Problem: White bg + purple text + heavy purple border from kit default makes it look the same weight as the primary CTA. Fix: Keep white bg + purple text, but use a lighter border. ============================================================ */ .elementor-10 .elementor-element.elementor-element-edfd51e .elementor-button { background-color: #FFFFFF !important; color: #9333EA !important; fill: #9333EA !important; border-color: #d8b4fe !important; border-width: 1px !important; } .elementor-10 .elementor-element.elementor-element-edfd51e .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-edfd51e .elementor-button:focus { border-color: #9333EA !important; background-color: #faf5ff !important; } /* ============================================================ ISSUE #4: Footer Missing Horizontal Padding (SUPERSEDED BY ROUND 8) ============================================================ */ /* ============================================================ ISSUE #5: Footer Bottom Bar (SUPERSEDED BY ROUND 8) ============================================================ */ /* ============================================================ ISSUE #6: Hero Subtitle — Fixed Pixel Width on Mobile Selector: .elementor-10 .elementor-element-8582f4d (hero subtext) Problem: Mobile override sets max-width: 303px which is too narrow on small devices and ignores the fluid container. Fix: Let it be 100% fluid on mobile. ============================================================ */ @media (max-width: 767px) { .elementor-10 .elementor-element.elementor-element-8582f4d { width: 100% !important; max-width: 100% !important; --container-widget-width: 100% !important; --container-widget-flex-grow: 1 !important; } } /* ============================================================ ISSUE #7: "Built for You" Section — Excessive Mobile Top Padding Selector: .elementor-10 .elementor-element-24de684 Problem: 90px top padding on mobile creates excessive gap between hero video and the next section. Fix: Reduce to a reasonable 48px. ============================================================ */ @media (max-width: 767px) { .elementor-10 .elementor-element.elementor-element-24de684 { --padding-top: 48px !important; } } /* ============================================================ ISSUE #9: Font Family Fallback Stack Problem: Fonts load from Google CDN — fails offline or in restricted network environments. Fix: Add system font fallbacks to all custom typography variables so layout is preserved if fonts fail to load. Note: Does NOT self-host fonts (that requires separate step). For full solution, download fonts and add @font-face. ============================================================ */ :root { /* Instrument Sans fallback */ --e-global-typography-primary-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --e-global-typography-secondary-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --e-global-typography-54dc51b-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --e-global-typography-0bdcb0d-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --e-global-typography-1e22545-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --e-global-typography-1b20afa-font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Open Sans fallback */ --e-global-typography-text-font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --e-global-typography-accent-font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ============================================================ ISSUE #10: Footer Newsletter Form — Explicit Button Style + Mobile Width Selector: .elementor-125 .elementor-element-758634a Problem: Submit button background relies purely on cascade; mobile form width is a fixed pixel value (324.878px). Fix: Explicit purple fill + fluid width on mobile. ============================================================ */ .elementor-125 .elementor-element.elementor-element-758634a .elementor-button[type="submit"] { background-color: #9333EA !important; color: #FFFFFF !important; fill: #FFFFFF !important; border-color: #9333EA !important; border-radius: 10px !important; } .elementor-125 .elementor-element.elementor-element-758634a .elementor-button[type="submit"]:hover { background-color: #871BE9 !important; border-color: #871BE9 !important; } @media (max-width: 767px) { .elementor-125 .elementor-element.elementor-element-758634a { width: 100% !important; max-width: 100% !important; --container-widget-width: 100% !important; --container-widget-flex-grow: 1 !important; } } /* ============================================================ END OF OVERRIDES ============================================================ */ /* Fix 'Built for you' rollover box jumping by applying a transparent border of the exact same size to the base state */ .elementor-10 .elementor-element.elementor-element-af1acd3, .elementor-10 .elementor-element.elementor-element-6c6cbf9, .elementor-10 .elementor-element.elementor-element-f1b24d1, .elementor-10 .elementor-element.elementor-element-efe1775 { border-style: solid; border-width: 1px 1px 3px 1px; border-color: transparent; transition: border-color 0.3s ease; } /* Ensure box sizing doesn't break */ .elementor-10 .elementor-element.elementor-element-0efba22 .e-con { box-sizing: border-box; } /* Fix 'How agentic AI works' icon visibility */ .elementor-element-e7d529d .elementor-icon svg, .elementor-element-34a12b2 .elementor-icon svg, .elementor-element-9dae734 .elementor-icon svg, .elementor-element-6d2e3e9 .elementor-icon svg { fill: #9333EA !important; /* purple icon color to match theme */ width: 32px !important; height: 32px !important; } /* Fix footer issues: consistent horizontal padding and edge bleed prevention */ .elementor-location-footer { width: 100%; overflow-x: hidden !important; } /* ============================================================ ROUND 2 FIXES: Hero Video Selector: .elementor-element-589d8d1 Problem: Hero video iframe missing and placeholder is not showing video Fix: We add standard styles to ensure video wrapper has height and aspect ratio. ============================================================ */ .elementor-element-589d8d1 .elementor-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; max-width: 100%; } .elementor-element-589d8d1 .elementor-wrapper iframe, .elementor-element-589d8d1 .elementor-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ============================================================ ROUND 8 FIXES: Footer Full-Bleed Background & Boxed Content Problem: Footer background appeared boxed while content touched edges. Fix: Make the outermost containers full width (100%), but pad them dynamically so their *inner content* stays bounded to 1140px exactly like a centered box. ============================================================ */ .elementor-125 > .e-con, .elementor-125 > .elementor-element-779b5f6 { /* Full bleed for the background */ width: 100% !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; /* Responsive side paddings keep content max-with 1140px and centered */ /* On wide screens > 1188px, padding grows. On small screens, fixed. */ padding-left: max(24px, calc((100vw - 1140px) / 2)) !important; padding-right: max(24px, calc((100vw - 1140px) / 2)) !important; box-sizing: border-box !important; } /* Ensure no gap on the bottom */ .elementor-125 > .elementor-element-779b5f6 { padding-top: 24px !important; padding-bottom: 24px !important; } @media (max-width: 1024px) { .elementor-125 > .e-con, .elementor-125 > .elementor-element-779b5f6 { padding-left: 24px !important; padding-right: 24px !important; } } @media (max-width: 767px) { .elementor-125 > .e-con, .elementor-125 > .elementor-element-779b5f6 { padding-left: 20px !important; padding-right: 20px !important; } } /* ============================================================ ROUND 4: Fix Header Navigation Display Issues Selector: .elementor-element-3ac25cb1 (Site Header Nav Menu) Problem: Mobile dropdown menu structure might be visible on desktop, or styling is causing double items. Elementor handles this usually, but since there are visual bugs, we will explicitly enforce display logic for desktop (>=768px) vs mobile (<768px). Fix: Hide dropdown on desktop. Ensure main nav is hidden on mobile. ============================================================ */ /* Desktop: Show main nav, hide mobile toggle and dropdown nav */ @media (min-width: 768px) { .elementor-element-3ac25cb1 .elementor-menu-toggle, .elementor-element-3ac25cb1 nav.elementor-nav-menu--dropdown { display: none !important; } } /* Mobile/Tablet: Hide main nav */ @media (max-width: 767px) { .elementor-element-3ac25cb1 nav.elementor-nav-menu--main { display: none !important; } } /* ============================================================ ROUND 5 FIXES: Navigation Submenu Display (Dropdowns) Selector: .elementor-element-3ac25cb1 (Site Header Nav Menu) Problem: Submenus under "Meet aime™" are missing/hidden on desktop due to missing display/hover logic or conflicts. Fix: Enforce proper hover/focus display logic for desktop submenus without changing Elementor design defaults. ============================================================ */ /* Ensure parent item has relative positioning for absolute dropdown */ @media (min-width: 768px) { .elementor-element-3ac25cb1 .elementor-nav-menu--main .menu-item-has-children { position: relative; } /* Reset and hide the submenu by default */ .elementor-element-3ac25cb1 .elementor-nav-menu--main .menu-item-has-children > .sub-menu { display: none !important; position: absolute; top: 100%; left: 0; z-index: 9999; /* Optional: Provide minimal visual baseline if original styles are completely broken, otherwise rely on existing Elementor styles for background/padding */ background: #ffffff; padding: 10px 0; min-width: 250px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; border: 1px solid #e5e7eb; } /* Ensure sub-items list cleanly */ .elementor-element-3ac25cb1 .elementor-nav-menu--main .menu-item-has-children > .sub-menu li { list-style: none; display: block; margin: 0; } /* Basic styling for dropdown links to ensure visibility */ .elementor-element-3ac25cb1 .elementor-nav-menu--main .menu-item-has-children > .sub-menu a { display: block; padding: 10px 20px; color: #111827; text-decoration: none; white-space: nowrap; transition: background-color 0.2s; } .elementor-element-3ac25cb1 .elementor-nav-menu--main .menu-item-has-children > .sub-menu a:hover { background-color: #f3f4f6; color: #9333EA; } /* Show the submenu on hover or focus focus-within */ .elementor-element-3ac25cb1 .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu, .elementor-element-3ac25cb1 .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu { display: block !important; } } /* ============================================================ ROUND 6 FIXES: "See It in Action" Section Top Padding Selector: .elementor-element-0a1725e (main container for video section) Problem: Spacing at the top of the "See It in Action" section is inconsistent or too large. Fix: Adjust padding to match beta's aesthetics. ============================================================ */ .elementor-10 .elementor-element.elementor-element-0a1725e { padding-top: 48px !important; } @media (max-width: 1024px) { .elementor-10 .elementor-element.elementor-element-0a1725e { padding-top: 32px !important; } } @media (max-width: 767px) { .elementor-10 .elementor-element.elementor-element-0a1725e { padding-top: 24px !important; } } /* Issue 13: Mobile Hamburger menu overlay fix */ @media (max-width: 767px) { .elementor-nav-menu--dropdown.elementor-active { display: block !important; position: absolute !important; left: 0 !important; top: 100% !important; /* drop from header */ width: 100vw !important; /* full width */ max-width: 100vw !important; z-index: 1000 !important; background-color: white !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; padding: 16px 24px !important; border-radius: 0 0 12px 12px !important; } /* Ensure larger tap targets for mobile nav links */ .elementor-nav-menu--dropdown a { padding: 12px 16px !important; display: block !important; font-size: 16px !important; border-bottom: 1px solid #f3f4f6 !important; } .elementor-nav-menu--dropdown a:last-child { border-bottom: none !important; } /* Make sure header container doesn't clip the absolutely positioned menu */ .elementor-element-3ac25cb1 { position: static !important; /* or relative if header needs to contain it */ } } /* ============================================================ GUARDRAIL: Light Text on Purple/Dark CTA Backgrounds ============================================================ */ .section.cta h1, .section.cta h2, .section.cta h3, .section.cta h4, .section.cta h5, .section.cta h6 { color: #ffffff !important; } .section.cta p { color: rgba(255, 255, 255, 0.85) !important; } .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h1, .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h2, .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h3, .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h4, .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h5, .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h6, .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) p, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h1, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h2, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h3, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h4, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h5, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h6, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h1, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h2, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h3, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h4, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h5, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h6, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h1, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h2, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h3, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h4, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h5, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h6, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h1, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h2, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h3, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h4, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h5, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) h6, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) p, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h1, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h2, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h3, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h4, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h5, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) h6, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p { color: #ffffff !important; } .elementor-section.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) p, .elementor-section.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p, .elementor-section.has-blush-light-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p, .elementor-section.has-luminous-dusk-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p, .e-con.has-vivid-purple-background-color:not(.elementor-location-header):not(.elementor-location-footer) p, .e-con.has-vivid-cyan-blue-to-vivid-purple-gradient-background:not(.elementor-location-header):not(.elementor-location-footer) p { color: rgba(255, 255, 255, 0.85) !important; } /* ============================================================ Meeting Management CTA — Force White Contrast ============================================================ */ .meeting-management-page .cta h2 { color: #ffffff !important; } .meeting-management-page .cta p { color: rgba(255, 255, 255, 0.85) !important; } /* MM overrides applied strictly to meetings-management-page */ .meetings-management-page .section { padding: 80px 20px; } .meetings-management-page .container { max-width: 1200px; margin: 0 auto; } .meetings-management-page .hero { background: linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.85)), #1E2939; color: #fff; text-shadow: 0 4px 10px rgba(0,0,0,0.5); } .meetings-management-page .hero h1, .meetings-management-page .hero p, .meetings-management-page .hero .eyebrow { color: #fff !important; } .meetings-management-page .hero p { color: #e2e8f0 !important; } .meetings-management-page .hero .container { display: flex; gap: 48px; align-items: center; justify-content: space-between; } .meetings-management-page .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; color: #c4b5fd; margin-bottom: 12px; } .meetings-management-page h1 { font-size: 3rem; line-height: 1.1; margin: 0 0 16px; } .meetings-management-page .hero p { font-size: 1.15rem; margin: 0 0 24px; color: #e2e8f0; } .meetings-management-page .hero img { width: 100%; max-width: 360px; border-radius: 24px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.35); } .meetings-management-page .button-row { display: flex; flex-wrap: wrap; gap: 16px; } .meetings-management-page .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 999px; font-weight: 600; text-decoration: none; } .meetings-management-page .btn-primary { background: #9333EA; color: #fff; border: 2px solid #9333EA; } .meetings-management-page .btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.6); } .meetings-management-page .stats { background: #EEF2FF; } .meetings-management-page .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: center; } .meetings-management-page .stat { background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); } .meetings-management-page .stat h3 { font-size: 2.2rem; color: #4c1d95; margin: 0 0 6px; } .meetings-management-page .step-grid, .meetings-management-page .feature-grid, .meetings-management-page .ecosystem-grid { display: grid; gap: 24px; } .meetings-management-page .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .meetings-management-page .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .meetings-management-page .card { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } .meetings-management-page .card h3 { margin-top: 0; margin-bottom: 12px; font-size: 1.35rem; } .meetings-management-page .card .number { width: 40px; height: 40px; border-radius: 50%; background: #9333EA; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px; } .meetings-management-page .testimonial { background: #1E2939; color: #fff; text-align: center; } .meetings-management-page .testimonial blockquote { font-size: 1.35rem; margin: 0 auto 16px; max-width: 900px; } .meetings-management-page .testimonial span { color: #cbd5f5; } .meetings-management-page .ecosystem-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .meetings-management-page .ecosystem-grid a { text-decoration: none; color: #1E2939; } .meetings-management-page .cta { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; text-align: center; } .meetings-management-page .cta .btn { border-color: #fff; } .meetings-management-page .cta .btn-primary { background: #fff; color: #6d28d9; } @media (max-width: 980px) { .meetings-management-page .hero .container { flex-direction: column; text-align: center; } .meetings-management-page .button-row { justify-content: center; } .meetings-management-page h1 { font-size: 2.4rem; } .meetings-management-page .stats-grid, .meetings-management-page .step-grid, .meetings-management-page .feature-grid, .meetings-management-page .ecosystem-grid { grid-template-columns: 1fr; } }