@charset "UTF-8";:root{--principal-color-blue: #136dfb;--principal-color-blue-hover: #082e6c}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.container{position:relative;width:100%;max-width:900px;height:500px;background:#fff;border-radius:30px;box-shadow:0 20px 60px #0000004d;overflow:hidden}.form-container{position:absolute;top:0;height:100%;width:50%;transition:all .7s ease-in-out}.sign-in-container{left:0;z-index:2}.sign-up-container{left:0;opacity:0;z-index:1}.container.active .sign-in-container{transform:translate(100%)}.container.active .sign-up-container{transform:translate(100%);opacity:1;z-index:5}form{background:#fff;display:flex;flex-direction:column;padding:0 50px;height:100%;justify-content:center;align-items:center;text-align:center}h1{font-size:2rem;font-weight:700;color:#333;margin-bottom:10px}.social-container{display:flex;gap:10px;margin:20px 0}.social-container button{border:2px solid #ddd;border-radius:10px;background:#fff;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}.social-container button:hover{background:#f3f4f6;transform:scale(1.05)}.social-container svg{width:24px;height:24px}span{font-size:14px;color:#666;margin-bottom:15px}input{background:#f3f4f6;border:none;padding:15px;margin:8px 0;width:100%;border-radius:10px;font-size:14px;outline:none}input:focus{background:#e5e7eb}button.submit-btn{border-radius:10px;border:none;background-color:var(--principal-color-blue);color:#fff;font-size:14px;font-weight:700;padding:15px 45px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;margin-top:20px;transition:ease .3s all}button.submit-btn:hover{background:var(--principal-color-blue-hover)}a{color:#666;font-size:14px;text-decoration:none;margin:15px 0}a:hover{color:var(--principal-color-blue)}.overlay-container{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:transform .7s ease-in-out;z-index:100}.container.active .overlay-container{transform:translate(-100%)}.overlay{background-color:var(--principal-color-blue);color:#fff;position:relative;left:-100%;height:100%;width:200%;transform:translate(0);transition:transform .7s ease-in-out}.container.active .overlay{transform:translate(50%)}.overlay-panel{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 40px;text-align:center;top:0;height:100%;width:50%;transform:translate(0);transition:transform .7s ease-in-out}.overlay-left{transform:translate(-20%)}.container.active .overlay-left{transform:translate(0)}.overlay-right{right:0;transform:translate(0)}.container.active .overlay-right{transform:translate(20%)}.overlay-panel h1{color:#fff;font-size:2.5rem;margin-bottom:15px}.overlay-panel p{font-size:16px;line-height:1.6;margin-bottom:30px;color:#ffffffe6}button.ghost{background:transparent;border:2px solid white;color:#fff;padding:12px 45px;border-radius:25px;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .3s}button.ghost:hover{background:#fff;color:var(--principal-color-blue)}@media(max-width:769px){.container{max-width:100%;height:auto;min-height:600px}form{padding:0 30px}}@media(max-width:426px){.container{border-radius:20px;min-height:400px}form{padding:0 30px}h1{font-size:25px;margin-bottom:8px}.overlay-panel h1{font-size:20px;margin-bottom:12px}.overlay-panel p{display:none}.social-container{gap:8px;margin:15px 0}.social-container button{width:45px;height:45px}.social-container svg{width:20px;height:20px}span{font-size:13px;margin-bottom:12px}input{padding:12px;margin:6px 0;font-size:12px;border-radius:8px}button.submit-btn{padding:12px 35px;font-size:12px;margin-top:15px}button.ghost{padding:15px 35px;font-size:12px}a{font-size:13px;margin:12px 0}}@media(max-width:376px){body{padding:10px}.container{min-height:400px;border-radius:15px}form{padding:0 25px}h1{font-size:22px}.overlay-panel h1{font-size:17px}.overlay-panel p{font-size:13px;padding:0 10px}.social-container button{width:42px;height:42px}.social-container svg{width:18px;height:18px}input{padding:11px;font-size:12px}button.submit-btn{padding:11px 30px;font-size:12px}button.ghost{padding:9px 30px;font-size:12px}}