*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:'Poppins', sans-serif;
      min-height:100vh;
      display:flex;
      justify-content:center;
      align-items:center;
      background:
      linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
      url('../../../images/site/food-grid.png');
      background-size:cover;
      background-position:center;
      padding:20px;
    }

    .login-container{
      width:100%;
      max-width:1100px;
      min-height:650px;
      display:grid;
      grid-template-columns:1fr 1fr;
      background:#fff;
      border-radius:25px;
      overflow:hidden;
      box-shadow:0 20px 60px rgba(0,0,0,0.25);
    }

    /* LEFT SIDE */

    .login-left{
      background:#065f2c;
      color:#fff;
      padding:60px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      position:relative;
      overflow:hidden;
    }

    .login-left::before{
      content:'';
      position:absolute;
      width:400px;
      height:400px;
      background:rgba(255,255,255,0.06);
      border-radius:50%;
      top:-100px;
      right:-100px;
    }

    .login-left::after{
      content:'';
      position:absolute;
      width:250px;
      height:250px;
      background:rgba(255,255,255,0.05);
      border-radius:50%;
      bottom:-80px;
      left:-80px;
    }

    .brand{
      position:relative;
      z-index:2;
    }

    .brand h1{
      font-size:52px;
      font-weight:800;
      margin-bottom:10px;
    }

    .brand span{
      color:#9df7b5;
    }

    .brand p{
      font-size:18px;
      line-height:1.7;
      margin-top:20px;
      color:#d7ffe2;
    }

    .feature-list{
      margin-top:40px;
      position:relative;
      z-index:2;
    }

    .feature{
      display:flex;
      align-items:center;
      gap:15px;
      margin-bottom:20px;
      font-size:16px;
    }

    .feature-icon{
      width:45px;
      height:45px;
      background:rgba(255,255,255,0.12);
      border-radius:12px;
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:20px;
    }

    /* RIGHT SIDE */

    .login-right{
      padding:60px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .login-header h2{
      font-size:38px;
      color:#065f2c;
      margin-bottom:10px;
    }

    .login-header p{
      color:#666;
      margin-bottom:40px;
    }

    .form-group{
      margin-bottom:25px;
    }

    .form-group label{
      display:block;
      margin-bottom:10px;
      font-weight:600;
      color:#333;
    }

    .form-control{
      width:100%;
      height:58px;
      border:2px solid #e5e5e5;
      border-radius:14px;
      padding:0 20px;
      font-size:16px;
      outline:none;
      transition:0.3s;
    }

    .form-control:focus{
      border-color:#16a34a;
      box-shadow:0 0 0 4px rgba(22,163,74,0.1);
    }

    .form-options{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:30px;
      flex-wrap:wrap;
      gap:10px;
    }

    .remember{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:14px;
      color:#555;
    }

    .forgot{
      text-decoration:none;
      color:#16a34a;
      font-weight:600;
    }

    .login-btn{
      width:100%;
      height:58px;
      border:none;
      border-radius:14px;
      background:#16a34a;
      color:#fff;
      font-size:17px;
      font-weight:700;
      cursor:pointer;
      transition:0.3s;
    }

    .login-btn:hover{
      background:#15803d;
      transform:translateY(-2px);
    }

    .divider{
      text-align:center;
      margin:30px 0;
      color:#999;
      position:relative;
    }

    .divider::before{
      content:'';
      position:absolute;
      left:0;
      top:50%;
      width:42%;
      height:1px;
      background:#ddd;
    }

    .divider::after{
      content:'';
      position:absolute;
      right:0;
      top:50%;
      width:42%;
      height:1px;
      background:#ddd;
    }

    .signup-link{
      text-align:center;
      margin-top:20px;
      color:#666;
    }

    .signup-link a{
      color:#16a34a;
      text-decoration:none;
      font-weight:700;
    }

    /* RESPONSIVE */

    @media(max-width:950px){

      .login-container{
        grid-template-columns:1fr;
      }

      .login-left{
        padding:50px 40px;
      }

      .login-right{
        padding:50px 40px;
      }

      .brand h1{
        font-size:42px;
      }

    }

    @media(max-width:600px){

      body{
        padding:10px;
      }

      .login-left,
      .login-right{
        padding:35px 25px;
      }

      .brand h1{
        font-size:34px;
      }

      .login-header h2{
        font-size:30px;
      }

      .form-options{
        flex-direction:column;
        align-items:flex-start;
      }

    }