*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif}html,body{height:100%;width:100%;overflow-x:hidden}body{background:#fff;background-image:radial-gradient(circle at 2% 5%,rgba(208,160,153,.05) 0%,transparent 25%),radial-gradient(circle at 95% 15%,rgba(173,125,87,.05) 0%,transparent 20%),radial-gradient(circle at 50% 70%,rgba(208,160,153,.03) 0%,transparent 30%);background-attachment:fixed;min-height:100%;overflow-x:hidden}.HeroSection{text-align:center;padding:8% 2%;position:relative;overflow:hidden}.HeroSection:before{content:'""';position:absolute;top:0;left:"-10%";width:120%;height:100%;background:linear-gradient(90deg,#d0a0990d,#ad7d570d);transform:skewY(-3deg);transform-origin:top left;z-index:-1}.MainImage{width:100%;max-width:1000px;height:auto;transition:transform .8s ease}.MainImage:hover{transform:scale(1.02)}.FormSection{margin-top:0;margin-bottom:8%;display:flex;justify-content:center;align-items:center;position:relative}.FormSection:before{content:'""';position:absolute;width:100%;height:100%;background:radial-gradient(circle,#d0a0991a,#fff0 70%);pointer-events:none;z-index:-1}.WaterRippleEffect{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:-2;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/svg" width="100%" height="100%"><defs><radialGradient id="a" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" stop-color="rgba(173, 125, 87, 0.1)"/><stop offset="100%" stop-color="rgba(255, 255, 255, 0)"/></radialGradient></defs><rect width="100%" height="100%" fill="url(%23a)"/></svg>');opacity:0;transition:opacity .5s ease}.WaterRippleEffect.active{opacity:1}@media (max-width: 600px){.MainImage{max-width:90%}}.login{color:#ad7d57;text-transform:uppercase;letter-spacing:1px;display:block;font-weight:600;font-size:24px;margin-bottom:20px;text-align:center}.card{display:flex;justify-content:center;align-items:center;min-height:auto;width:100%;flex-direction:column;gap:25px;background:#fff;box-shadow:0 8px 24px #00000014;border-radius:16px;padding:25px 20px;margin-top:40px;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 12px 28px #0000001f}.inputBox{position:relative;width:100%;max-width:300px;margin-bottom:10px}.inputBox input{width:100%;padding:12px 15px;outline:none;border:1px solid rgba(208,160,153,.3);color:#555;font-size:16px;background:#ffffffe6;border-radius:10px;transition:all .3s;box-shadow:0 2px 5px #00000005}.inputBox span{position:absolute;left:0;padding:12px 15px;pointer-events:none;font-size:14px;color:#999;transition:.3s;letter-spacing:1px}.inputBox input:valid~span,.inputBox input:focus~span{transform:translateY(-22px) translate(10px);font-size:12px;padding:3px 10px;background:#ad7d57;color:#fff;border-radius:6px}.inputBox input:valid,.inputBox input:focus{border:1px solid #AD7D57;box-shadow:0 2px 8px #ad7d5733}.enter{height:45px;min-width:130px;border-radius:10px;border:none;cursor:pointer;background-color:#ad7d57;transition:all .3s;text-transform:uppercase;font-size:14px;font-weight:600;letter-spacing:1px;margin:8px 0;color:#fff;box-shadow:0 4px 8px #ad7d5733}.enter:hover{background-color:#d0a099;box-shadow:0 6px 12px #d0a0994d;transform:translateY(-2px)}.enter:active{transform:translateY(1px)}@media (max-width: 600px){.login{font-size:20px}.card{padding:20px 15px;gap:20px;margin-top:20px;width:100%;border-radius:12px}.inputBox{max-width:100%}.inputBox input{padding:10px 12px;font-size:14px}.inputBox span{padding:10px 12px;font-size:12px}.enter{height:40px;min-width:110px;font-size:12px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.card,.inputBox,.enter{animation:fadeIn .5s ease forwards}.inputBox:nth-child(2){animation-delay:.1s}.inputBox:nth-child(3){animation-delay:.2s}.enter{animation-delay:.3s}