:root{
    --brand-navy:#1a2942;
    --brand-orange:#ff9f43;
    --brand-orange-dark:#f78a1f;
    --text-muted:#8a94a6;
    --panel-peach:#fbdcc0;
    --border-color:#e6e9ee;
  }
html { scrollbar-width: none; }
  html,body{
    height:100%;
    font-family:'Segoe UI', Roboto, Arial, sans-serif;
  }

.login-section .page-wrap{min-height:100vh;display:flex;}
.login-section .form-panel{
  flex:1 1 50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px 50px;
  background:#ffffff;
  position:relative;
  }
.login-section .logo-wrap{text-align:center;margin-bottom:36px;}
.login-section .logo-wrap .logo-icon{width: 275px;}
.login-section .form-inner{
  max-width:420px;
  width:100%;
  margin:0 auto;
  }
.login-section  h1.title{
  font-size:26px;
  font-weight:700;
  color:#1c2434;
  margin-bottom:30px;
  text-align: center;
  }
.login-section p.subtitle{
  color:var(--text-muted);
  font-size:14.5px;
  margin-bottom:28px;
  text-align: center;
  }
.login-section .form-inner .form-body{
  border: 1px solid #f3f3f3;
  box-shadow: 0px 0px 6px -5px #000;
  padding: 18px 26px;
  position: relative;
  overflow: hidden;
  }
.login-section .form-inner .form-body .leftbotton-shape{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 0 0 90px;
  border-color: transparent transparent transparent #1b48031a;
  z-index: 1;
  }
.login-section .form-inner .form-body form{
  position: relative;
  }
.login-section .form-inner .form-body .topright-shape{
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 90px 90px 0;
  border-color: transparent #1b48031a transparent transparent;
  z-index: 1;
  }
.login-section label.form-label{
  font-weight:600;
  font-size:14px;
  color:#28304a;
  margin-bottom:6px;
  }
.login-section .input-group-custom{
  position:relative;
  margin-bottom:20px;
  }
.login-section .input-group-custom input{
  width:100%;
  padding:12px 42px 12px 16px;
  border:1px solid var(--border-color);
  border-radius:0px;
  font-size:14.5px;
  outline:none;
  transition:border-color .15s ease;
  }
.login-section .input-group-custom input:focus{
  border-color: #204a01;
  box-shadow: 0 0 0 3px rgb(32 74 1 / 8%);
  }
.login-section .input-group-custom .icon-btn{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#9aa4b2;
  background:none;
  border:none;
  padding:0;
  line-height:1;
  }
.login-section .row-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
  }
.login-section .form-check-label{
  font-size:14px;
  color:#4a5568;
  }
.login-section .forgot-link{
  font-size:14px;
  color:#e6522c;
  font-weight:600;
  text-decoration:none;
  }
.login-section .forgot-link:hover{ text-decoration:underline; color:#e6522c; }
.login-section .btn-signin{
  width:100%;
  background:#204a01;
  border:none;
  color:#fff;
  font-weight:700;
  font-size:16px;
  padding:12px 0;
  transition:background .15s ease;
  }
.login-section .btn-signin:hover{background:#204a01;color:#fff;}
.login-section .signup-text{
  text-align:center;
  font-size:14.5px;
  color:#4a5568;
  margin:20px 0;
  }
.login-section .signup-text a{
  color:#1c2434;
  font-weight:700;
  text-decoration:none;
  }
.login-section .signup-text a:hover{ text-decoration:underline; }
.login-section .divider{
  display:flex;
  align-items:center;
  text-align:center;
  color:#9aa4b2;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:1px;
  margin:8px 0 20px;
  }
.login-section .divider::before, .divider::after{
  content:"";
  flex:1;
  border-bottom:1px solid var(--border-color);
  }
.login-section .divider::before{ margin-right:14px; }
.login-section .divider::after{ margin-left:14px; }
.login-section .social-row{display:flex;gap:14px;}
.login-section .btn-social{
  flex:1;
  border:none;
  border-radius:8px;
  padding:11px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  }
.login-section .btn-fb{ background:#1877f2; color:#fff; }
.login-section .btn-fb:hover{ background:#1567d3; color:#fff; }
.login-section .btn-google{ background:#fff; border:1px solid var(--border-color); color:#333; }
.login-section .btn-google:hover{ background:#f6f7f9; }
.login-section .btn-apple{ background:#12203b; color:#fff; }
.login-section .btn-apple:hover{ background:#0b1730; color:#fff; }

.login-section .art-panel{
  flex:1 1 50%;
  background:var(--panel-peach);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  }
.login-section .art-panel img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  }

 @media (max-width:991px){
.login-section .art-panel{ display:none; }
.login-section .form-panel{ padding:40px 24px; }
  }