@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Great+Vibes&display=swap');

:root{font-family:"DM Sans",Arial,sans-serif;color:#122a4a}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
.login-page{position:relative;isolation:isolate;display:flex;align-items:center;min-height:100vh;min-height:100dvh;width:100%;overflow:hidden;background:linear-gradient(115deg,#f6fbff 40%,#fff 100%);font-family:"DM Sans",Arial,sans-serif}
.login-city{position:absolute;inset:0 auto 0 0;width:48%;padding:clamp(24px,3vw,48px) clamp(28px,7vw,140px);display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(165deg,rgba(0,115,220,.87) 0%,rgba(9,104,195,.72) 40%,rgba(7,49,101,.72) 100%),url('../images/mahajanga-bg.jpg') center/cover no-repeat;clip-path:polygon(0 0,100% 0,77% 100%,0 100%)}
.city-heading,.city-benefits,.photo-credit{position:relative;z-index:1}
.city-kicker{margin:0;text-transform:uppercase;letter-spacing:.32em;font-size:clamp(12px,1.2vw,20px);white-space:nowrap}
.city-heading h1{margin:1px 0 16px;text-transform:uppercase;font-size:clamp(32px,3vw,52px);line-height:1.08;font-weight:800;letter-spacing:.02em}
.city-rule{display:block;width:162px;height:2px;background:rgba(255,255,255,.85);margin-bottom:19px}
.city-department{margin:0 0 7px;font-size:clamp(18px,1.5vw,27px);letter-spacing:.02em;white-space:nowrap}
.city-tagline{font-size:clamp(16px,1.2vw,22px);line-height:1.35;font-style:italic;font-weight:400;margin:0}
.city-benefits{display:grid;gap:13px;margin:16px 0 0 -20px}
.city-benefit{display:flex;align-items:center;gap:18px}
.benefit-icon{width:62px;height:62px;flex:none;display:grid;place-items:center;border:2px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(33,110,201,.45);line-height:1}
.benefit-icon svg{width:36px;height:36px}
.city-benefit strong,.city-benefit small{display:block;white-space:nowrap}
.city-benefit strong{font-size:18px;line-height:1.25}
.city-benefit small{font-size:16px;margin-top:5px}
.photo-credit{align-self:flex-start;color:#fff;font-size:10px;opacity:.65;text-decoration:none;margin-top:5px}
.photo-credit:hover{text-decoration:underline}
.login-scenery{position:absolute;inset:0 0 0 48%;pointer-events:none}
.scenery-script{position:absolute;right:3%;top:25%;z-index:1;width:230px;margin:0;color:#8fb7e3;font:clamp(37px,3.4vw,58px)/1.08 "Great Vibes","Brush Script MT",cursive;transform:rotate(-5deg);text-align:center}
.scenery-script span{margin-left:40px}
.scenery-landscape{position:absolute;bottom:13%;right:0;width:100%;height:43%}
.scenery-footer{position:absolute;bottom:5%;right:3%;color:#637c9d;letter-spacing:.24em;text-transform:uppercase;font-size:14px;white-space:nowrap}
.scenery-footer span{margin:0 8px}
.login-card{position:relative;z-index:2;width:min(600px,calc(100% - 48px));margin:22px 0 22px clamp(320px,36%,680px);padding:30px 58px 29px;background:#fff;border-radius:22px;box-shadow:0 18px 48px rgba(22,53,89,.13)}
.card-heading{text-align:center;margin-bottom:23px}
.card-logo{width:74px;height:78px;object-fit:contain;margin-bottom:9px}
.card-heading h2{margin:0 0 4px;font-size:36px;font-weight:800;letter-spacing:-.035em;color:#0b1f3a}
.card-heading p{margin:0;color:#52627a;font-size:19px;line-height:1.38}
.card-heading strong{font-weight:700}
.login-alert{margin:0 0 18px;padding:12px 15px;border-radius:9px;background:#fff0f0;color:#9b2525;font-size:14px}
.login-alert-info{background:#edf5ff;color:#164a81}
.login-field{height:56px;display:flex;align-items:center;gap:17px;border:1.5px solid #d3deeb;border-radius:11px;padding:0 17px;margin-bottom:13px;transition:border-color .2s,box-shadow .2s}
.login-field:focus-within{border-color:#1677ff;box-shadow:0 0 0 4px rgba(22,119,255,.12)}
.field-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:8px;color:#526987;background:#f2f5f9}
.field-icon svg,.password-toggle svg,.login-submit svg,.card-footer svg{width:24px;height:24px}
.login-field input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#0b1f3a;font:500 18px "DM Sans",Arial,sans-serif}
.login-field input::placeholder{color:#61718a;opacity:1}
.password-toggle{display:grid;place-items:center;flex:none;width:36px;height:38px;border:0;background:transparent;color:#63748f;cursor:pointer}
.password-toggle:hover{color:#1677ff}
.password-toggle[aria-pressed="true"] .eye-slash{display:none}
.remember-me{display:flex;align-items:center;gap:11px;margin:17px 0 19px;color:#273e5b;font-size:16px;cursor:pointer}
.remember-me input{appearance:none;width:21px;height:21px;margin:0;border:1.5px solid #b4c3d6;border-radius:5px;background:#fff;cursor:pointer}
.remember-me input:checked{background:#1677ff;border-color:#1677ff}
.remember-me input:checked::after{content:"";display:block;width:6px;height:11px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);margin:2px 0 0 6px}
.remember-me input:focus-visible,.password-toggle:focus-visible,.login-submit:focus-visible{outline:3px solid #86b9ff;outline-offset:3px}
.login-submit{width:100%;height:56px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:10px;background:linear-gradient(100deg,#096bd8,#3278f2);box-shadow:0 9px 18px rgba(17,102,218,.15);color:#fff;font:700 22px "DM Sans",Arial,sans-serif;cursor:pointer;transition:filter .2s,transform .2s}
.login-submit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.card-footer{margin-top:20px;color:#5b6d86;text-align:center}
.secure-divider{display:flex;align-items:center;gap:20px;font-size:16px;white-space:nowrap}
.secure-divider::before,.secure-divider::after{content:"";height:1px;flex:1;background:#cedbea}
.card-footer p{display:flex;align-items:center;justify-content:center;gap:10px;margin:13px 0 0;font-size:16px}
.card-footer svg{color:#5d708d;flex:none}
@media(max-width:1200px){.login-city{width:45%;padding-left:5vw}.login-scenery{left:45%}.login-card{margin-left:34%;width:min(560px,60%);padding:38px 42px}.city-benefit strong{font-size:16px}.city-benefit small{font-size:14px}.benefit-icon{width:60px;height:60px}}
@media(max-width:900px){.login-city{width:45%;padding:35px 5vw}.city-benefits,.photo-credit{display:none}.login-card{margin-left:auto;margin-right:auto;width:min(560px,76%)}.login-scenery{left:45%}.scenery-script{opacity:.35}.scenery-footer{display:none}}
@media(max-width:640px){.login-page{align-items:center;justify-content:center;padding:20px 0;background:linear-gradient(155deg,#eaf5ff,#fff 55%)}.login-city{width:100%;height:210px;padding:20px 5%;clip-path:none;background-position:center 45%;align-items:center;text-align:center}.city-heading{width:100%}.city-kicker,.city-rule,.city-department,.city-tagline,.login-scenery{display:none}.city-heading h1{margin:0;color:#fff;font-size:20px;letter-spacing:.12em}.login-card{width:90%;margin:58px auto 20px;padding:30px 22px 28px;border-radius:18px}.card-logo{width:68px;height:76px;margin-bottom:9px}.card-heading{margin-bottom:25px}.card-heading h2{font-size:31px}.card-heading p{font-size:15px}.login-field{height:56px}.login-field input{font-size:16px}.remember-me{font-size:14px}.login-submit{height:56px;font-size:19px}.card-footer p{font-size:13px}.secure-divider{font-size:14px}}
@media(max-height:740px) and (min-width:641px){.login-card{padding-top:24px;padding-bottom:24px;margin-top:16px;margin-bottom:16px}.card-logo{height:65px;width:65px;margin-bottom:5px}.card-heading{margin-bottom:20px}.card-heading h2{font-size:31px}.login-field{height:52px}.login-submit{height:54px}.card-footer{margin-top:18px}}