/* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Roboto:wght@400;500&display=swap'); :root { --primary-color: #1a73e8; --secondary-color: #fbbc05; --bg-color: #ffffff; --surface-color: #f8f9fa; --text-color: #202124; --border-radius: 0.5rem; } body { font-family: 'Roboto', sans-serif; color: var(--text-color); background-color: var(--bg-color); padding-top: 56px; /* Offset for fixed navbar */ } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: 'Poppins', sans-serif; font-weight: 600; } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); border-radius: var(--border-radius); padding: 0.75rem 1.5rem; font-weight: 500; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .hero-section { background: linear-gradient(45deg, var(--primary-color), #4285f4); color: white; padding: 6rem 0; } .hero-section h1 { font-size: 3.5rem; font-weight: 700; } .section { padding: 5rem 0; } .bg-surface { background-color: var(--surface-color); } .feature-card { background-color: var(--bg-color); border: 1px solid #dee2e6; border-radius: var(--border-radius); padding: 2rem; text-align: center; transition: all 0.3s ease; height: 100%; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .feature-card i { font-size: 3rem; color: var(--primary-color); margin-bottom: 1.5rem; display: inline-block; } .form-control { border-radius: var(--border-radius); padding: 0.75rem 1rem; } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(26, 115, 232, 0.25); } .footer { background-color: #343a40; color: white; padding: 2rem 0; } .toast-container { position: fixed; top: 80px; right: 20px; z-index: 1055; }