:root { --brand-dark: #0f2e4d; --brand-mid: #1a4a7a; --brand-light: #2d7fc1; --brand-accent: #e8f4fd; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; margin: 0; } .login-wrapper { display: flex; width: 700px; max-width: 80vw; max-height: 450px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); } .login-brand { flex: 1; background: linear-gradient( 160deg, var(--brand-dark) 0%, var(--brand-mid) 60%, var(--brand-light) 100% ); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 36px; text-align: center; position: relative; overflow: hidden; } .login-brand::before { content: ""; position: absolute; bottom: -40px; left: -40px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); } .login-brand::after { content: ""; position: absolute; top: -60px; right: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); } .brand-icon { width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; background-color: #ffffff; border-radius: 50%; aspect-ratio: 1; border: 3px solid #b0bbbe; box-shadow: 0 0 2px 1px rgba(80, 110, 150, 0.5); position: relative; z-index: 1; } .brand-icon img { color: #7ecbf5; margin-top: -5px; } .brand-title { font-size: 1.35rem; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; position: relative; z-index: 1; } .brand-sub { font-size: 0.9rem; opacity: 0.8; line-height: 1.6; position: relative; z-index: 1; } .brand-divider { width: 50px; height: 3px; background: rgba(255, 255, 255, 0.35); border-radius: 2px; margin: auto; position: relative; z-index: 1; } .login-form-panel { flex: 1; background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 50px 44px; } .login-form-panel h2 { font-size: 1.55rem; font-weight: 700; color: var(--brand-dark); margin-bottom: 6px; } .login-form-panel p.sub { font-size: 0.875rem; color: #6b7280; margin-bottom: 32px; } .form-label { font-size: 0.82rem; font-weight: 600; color: #374151; margin-bottom: 5px; } .input-group-text { background: var(--brand-accent); border-color: #d1d5db; color: var(--brand-mid); } .form-control { border-color: #d1d5db; font-size: 0.9rem; padding: 0.52rem 0.8rem; } .form-control:focus { border-color: var(--brand-light); box-shadow: 0 0 0 3px rgba(45, 127, 193, 0.15); } .btn-login { background: linear-gradient(135deg, var(--brand-mid), var(--brand-light)); color: #fff; border: none; padding: 0.65rem; font-size: 0.95rem; font-weight: 600; border-radius: 8px; letter-spacing: 0.3px; transition: opacity 0.2s; } .btn-login:hover { opacity: 0.88; color: #fff; } .btn-login:disabled { opacity: 0.65; } .toggle-pass { cursor: pointer; background: var(--brand-accent); border-color: #d1d5db; color: var(--brand-mid); } .toggle-pass:hover { background: #dbeafe; } .footer-note { font-size: 0.75rem; color: #9ca3af; text-align: center; margin-top: 28px; } @media (max-width: 660px) { .login-brand { display: none; } .login-form-panel { padding: 36px 24px; } } .header { position: relative; text-align: center; background: linear-gradient( 60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100% ); color: white; } .logo { width: 50px; fill: white; padding-right: 15px; display: inline-block; vertical-align: middle; }  .inner-header { height: 80vh; width: 100%; margin: 0; padding: 0; }  .flex { display: flex; justify-content: center; align-items: center; text-align: center; }  .waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; }  .content { position: relative; height: 20vh; text-align: center; background-color: white; }  .parallax > use { animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; }  .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }  .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }  .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }  .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); }  100% { transform: translate3d(85px, 0, 0); } } @media (max-width: 768px) { .waves { height: 40px; min-height: 40px; }  .content { height: 30vh; }  h1 { font-size: 24px; } }