surrounding the dashboard in your HTML */ .dashboard-wrapper { display: flex; justify-content: center; align-items: center; /* Adds space around the component if needed */ width: 100%; } /* --- Component Styles Start Here --- */ .ase-hero-visual { position: relative; font-family: 'Inter', sans-serif; animation: none !important; /* Removed all animations */ } .ase-dashboard-container { background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%); border: 1px solid rgba(16, 185, 129, 0.1); border-radius: 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; max-width: 580px; } .ase-dashboard-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent); } .ase-dashboard-card { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); position: relative; } .ase-dashboard-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .ase-dashboard-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem; box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3); } .ase-dashboard-title { font-size: 1.25rem; font-weight: 800; color: #1f2937; } .ase-dashboard-subtitle { font-size: 0.875rem; color: #6b7280; font-weight: 500; } .ase-dashboard-stats { display: flex; flex-direction: column; gap: 16px; } .ase-dashboard-stat { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-radius: 12px; position: relative; overflow: hidden; } .ase-dashboard-stat-1 { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%); border: 1px solid rgba(16, 185, 129, 0.2); } .ase-dashboard-stat-2 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%); border: 1px solid rgba(59, 130, 246, 0.2); } .ase-dashboard-stat-3 { background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 0.05) 100%); border: 1px solid rgba(147, 51, 234, 0.2); } .ase-dashboard-stat-left { display: flex; align-items: center; gap: 12px; } .ase-dashboard-stat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); flex-shrink: 0; } .ase-dashboard-stat-icon-1 { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .ase-dashboard-stat-icon-2 { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } .ase-dashboard-stat-icon-3 { background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%); } .ase-dashboard-stat-title { font-weight: 700; color: #1f2937; font-size: 1rem; } .ase-dashboard-stat-value { font-size: 0.875rem; font-weight: 600; } .ase-dashboard-stat-value-1 { color: #10b981; } .ase-dashboard-stat-value-2 { color: #3b82f6; } .ase-dashboard-stat-value-3 { color: #9333ea; } .ase-dashboard-stat-number { font-size: 1.75rem; font-weight: 900; margin-left: 8px; } .ase-dashboard-stat-number-1 { color: #10b981; } .ase-dashboard-stat-number-2 { color: #3b82f6; } .ase-dashboard-stat-number-3 { color: #9333ea; } /* --- Continuous Floating Effect for the two icons --- */ .ase-floating-element { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; } /* Icon 1 - Floating continuously */ .ase-floating-1 { width: 60px; height: 60px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%); border: 2px solid rgba(16, 185, 129, 0.2); top: -15px; right: -15px; /* Remove animation to ensure no motion after loading */ } .ase-floating-1 i { color: #10b981; font-size: 2rem; } /* Icon 2 - Floating continuously */ .ase-floating-2 { width: 50px; height: 50px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%); border: 2px solid rgba(59, 130, 246, 0.2); bottom: -15px; left: -15px; /* Remove animation to ensure no motion after loading */ } .ase-floating-2 i { color: #3b82f6; font-size: 1.5rem; } /* --- No animation for any other element --- */ @keyframes floating { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-9e375c1 *//* Basic and Inherited Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #334155; background-color: #f8fafc; overflow-x: hidden; } .ase-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Problem Section Wrapper */ .ase-problem { padding: 96px 0; position: relative; } /* 50/50 Grid Layout */ .ase-problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; } /* Left Column: Dashboard Styling */ .ase-problem-dashboard { width: 100%; } .dashboard-window { background: white; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); height: 100%; display: flex; flex-direction: column; } .dashboard-header { padding: 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; display: flex; gap: 8px; border-top-left-radius: 12px; border-top-right-radius: 12px; } .dashboard-header .dot { width: 12px; height: 12px; border-radius: 50%; } .dot.red { background: #fecaca; } .dot.yellow { background: #fef08a; } .dot.green { background: #bbf7d0; } /* Dashboard Body with 2-Column Grid Layout -- UPDATED */ .dashboard-body { padding: 24px; display: grid; grid-template-columns: auto 1fr; /* Let chart define its own width */ gap: 20px; flex-grow: 1; } /* NEW: Style for the right-hand column wrapper */ .dashboard-right-column { display: flex; flex-direction: column; gap: 20px; } .dashboard-module { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; display: flex; flex-direction: column; } .dashboard-module h4 { font-size: 14px; font-weight: 600; color: #1e293b; margin-bottom: 12px; } .dashboard-module ul { list-style: none; padding: 0; font-size: 13px; color: #475569; flex-grow: 1; display: flex; flex-direction: column; } .dashboard-module ul li { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .dashboard-module ul li:not(:last-child) { border-bottom: 1px dashed #e2e8f0; } /* Chart Module Specifics */ .chart-module { align-items: center; gap: 16px; /* Added padding to give it breathing room */ padding: 16px 24px; } .chart-container { position: relative; display: grid; place-items: center; } .donut-chart { width: 110px; height: 110px; border-radius: 100%; background: radial-gradient(white 55%, transparent 56%), conic-gradient(#34d399 0% 35%, #f87171 35% 100%); } .chart-label { position: absolute; text-align: center; } .chart-label strong { font-size: 24px; font-weight: 700; color: #34d399; display: block; } .chart-label span { font-size: 13px; font-weight: 500; color: #475569; } .chart-legend { font-size: 12px; display: flex; flex-direction: column; gap: 8px; align-self: stretch; } .chart-legend .fa-square { font-size: 10px; margin-right: 6px; } /* Leads Module Specifics */ .status { font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 11px; } .status-at-risk { background-color: #fef3c7; color: #a16207; } .status-cold { background-color: #e0e7ff; color: #4338ca; } .status-hot { background-color: #dcfce7; color: #166534; } /* CSS FOR TASKS MODULE */ .tasks-module i { color: #94a3b8; margin-right: 12px; } .tasks-module .due-date { font-weight: 600; padding: 2px 8px; border-radius: 6px; font-size: 11px; background-color: #fee2e2; color: #b91c1c; } /* Right Column: Content Styling */ .ase-problem-content { display: flex; flex-direction: column; justify-content: center; } .ase-eyebrow-tag { display: inline-block; background-color: #fee2e2; color: #b91c1c; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; margin-bottom: 16px; align-self: flex-start; } .ase-problem-content h2 { font-size: 42px; font-weight: 800; color: #1e293b; margin-bottom: 24px; line-height: 1.1; } .ase-problem-content p { font-size: 18px; color: #64748b; margin-bottom: 0; max-width: 500px; } /* Responsive Styles */ @media (max-width: 992px) { .ase-problem-grid { grid-template-columns: 1fr; gap: 64px; align-items: start; } } @media (max-width: 768px) { .ase-problem { padding: 80px 0; } .ase-problem-content h2 { font-size: 36px; } .ase-problem-content p { font-size: 16px; } /* On smaller screens, stack the chart and the list column */ .dashboard-body { grid-template-columns: 1fr; } } @media (max-width: 480px) { .ase-problem { padding: 60px 0; } .ase-problem-content h2 { font-size: 32px; } }/* End custom CSS */