{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* General body and layout styles */ body { font-family: 'Inter', sans-serif; background-color: #1a202c; /* Dark background */ margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; } /* Header styles */ header { background-color: #1a202c; padding: 20px 40px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #374151; /* Subtle border */ } .logo { font-size: 28px; font-weight: 700; color: #ffffff; } /* Main content wrapper */ main { flex-grow: 1; display: flex; flex-direction: column; /* Stacks on mobile */ justify-content: center; align-items: center; padding: 20px; } /* Responsive layout for medium screens and up */ @media (min-width: 768px) { main { flex-direction: row; /* Side-by-side on desktop */ justify-content: space-evenly; align-items: center; } } /* Left content section with product info */ .left-content { flex: 1; max-width: 550px; padding: 20px; text-align: center; color: #ffffff; margin-bottom: 30px; } @media (min-width: 768px) { .left-content { margin-right: 25px; /* Reduced space between sections */ margin-bottom: 0; min-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; } } .left-content h1 { font-size: 48px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; } .left-content p { font-size: 18px; line-height: 1.6; margin-bottom: 30px; color: #cbd5e0; } .demo-button { display: inline-flex; align-items: center; padding: 10px 20px; background: linear-gradient(90deg, #6366f1, #8b5cf6); color: #ffffff; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); font-size: 16px; text-decoration: none; /* Ensures link doesn't have an underline */ } .demo-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); } .demo-button svg { margin-right: 8px; } /* Form container styles */ .form-container { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 30px; /* Reduced vertical padding */ width: 100%; max-width: 320px; } .form-container h2 { font-size: 28px; font-weight: 700; text-align: center; color: #1f2937; margin-top: 0; margin-bottom: 20px; /* Reduced margin */ } .form-wrapper { display: flex; flex-direction: column; gap: 15px; /* Reduced gap */ } .input-group { position: relative; } .input-field { width: 100%; padding: 12px 15px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px; outline: none; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-sizing: border-box; } .input-field:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } .label { display: block; font-size: 14px; font-weight: 500; color: #4b5563; margin-bottom: 8px; } .btn-primary { width: 100%; padding: 12px 20px; background-color: #2563eb; color: #ffffff; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .btn-primary:hover { background-color: #1d4ed8; box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3); } .divider { display: flex; align-items: center; text-align: center; color: #6b7280; font-size: 14px; margin: 8px 0; /* Reduced margin */ } .divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid #e5e7eb; } .divider:not(:empty)::before { margin-right: .25em; } .divider:not(:empty)::after { margin-left: .25em; } .text-center { text-align: center; } .text-sm { font-size: 14px; color: #4b5563; } .text-link { color: #2563eb; font-size: 14px; text-decoration: none; transition: color 0.2s ease-in-out; cursor: pointer; } .text-link:hover { color: #1d4ed8; text-decoration: underline; } /* Universal message box for feedback and info */ .message-box { padding: 12px; border-radius: 8px; margin-top: 5px; text-align: center; font-size: 14px; display: none; /* Hidden by default */ transition: background-color 0.3s ease; } .message-box.success { background-color: #e0f2fe; color: #0c4a6e; border: 1px solid #bae6fd; } .message-box.info { background-color: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .message-box.error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } /* Footer styles */ footer { background-color: #1a202c; color: #cbd5e0; padding: 40px 20px 20px; /* Reduced bottom padding */ text-align: center; margin-top: auto; border-top: 1px solid #374151; } footer .social-icons { display: flex; justify-content: center; gap: 20px; margin-top: 20px; margin-bottom: 20px; /* Adjusted margin */ } footer .social-icons a { color: #cbd5e0; font-size: 24px; transition: color 0.2s ease-in-out; } footer .social-icons a:hover { color: #ffffff; } footer .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; margin-bottom: 20px; } footer .footer-links a { color: #cbd5e0; text-decoration: none; font-size: 13px; /* Reduced font size */ transition: color 0.2s ease-in-out; } footer .footer-links a:hover { color: #ffffff; text-decoration: underline; } footer .copyright { font-size: 14px; color: #94a3b8; }