/* src/components/GettingStarted.css */ .getting-started-container { padding: 2rem; font-family: Arial, sans-serif; max-width: 700px; margin: 0 auto; text-align: center; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .getting-started-container h1 { color: #333; font-size: 2rem; margin-bottom: 1rem; } .getting-started-container p { color: #666; font-size: 1rem; margin-bottom: 2rem; } .steps { display: flex; flex-direction: column; gap: 1.5rem; } .step { background-color: #f1f7ff; padding: 1.5rem; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); display: flex; align-items: center; text-align: left; } .step h2 { color: #2575fc; margin-bottom: 0.5rem; font-size: 1.2rem; } .step p { color: #555; font-size: 0.95rem; margin-bottom: 0; } .step-icon { font-size: 2rem; color: #2575fc; margin-right: 1rem; } .button-link { display: inline-block; padding: 0.8rem 1.2rem; background-color: #2575fc; color: #fff; border-radius: 8px; font-size: 1rem; text-decoration: none; font-weight: bold; margin-top: 1rem; } .button-link:hover { background-color: #1b5dbf; } @media (max-width: 768px) { .getting-started-container { padding: 1.5rem; max-width: 90%; } } .premium-access { text-align: center; margin-top: 40px; background-color: #f8f9fa; padding: 20px; border-radius: 10px; border: 1px solid #ddd; } .premium-button { background-color: #4caf50; color: white; padding: 12px 24px; font-size: 16px; border-radius: 6px; border: none; cursor: pointer; margin-top: 10px; transition: background-color 0.3s ease; } .premium-button:hover { background-color: #388e3c; } .premium-label { font-size: 0.85em; margin-left: 6px; font-weight: normal; opacity: 0.85; }