*{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:'Poppins',sans-serif;
        }

        body{
            min-height:100vh;
            background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
            url('/WebsiteContent/images/loginback2.jpg?auto=format&fit=crop&w=1920&q=80');
            background-size:cover;
            background-position:center;
            display:flex;
            flex-direction:column;
        }

        /* HEADER */
        header{
            background: rgba(30, 108, 75, 0.23);
            color:#fff;
            padding:15px 8%;
            display:flex;
            justify-content:space-between;
            align-items:center;
            border-bottom: 1px solid #606060;
        }

        header h2{
            font-weight:600;
        }

        nav a{
            color:#fff;
            text-decoration:none;
            margin-left:25px;
        }

        nav a:hover{
            color:#90ee90;
        }

        /* MAIN */
        .main-wrapper{
            flex:1;
            display:flex;
            justify-content:center;
            align-items:center;
            padding:40px 20px;
        }

        .main-container{
            width:1100px;
            max-width:95%;
            display:flex;
            gap:40px;
        }

        /* LEFT PANEL */
        .left-panel{
            flex:1;
            background: rgba(0, 0, 0, 0.31);
            padding:50px;
            border-radius:15px;
            color:#fff;
            backdrop-filter:blur(10px);
        }

        .left-panel h1{
            font-size:30px;
            margin-bottom:20px;
        }

        .left-panel p{
            line-height:1.7;
            color:#ddd;
        }

        .left-panel img{
            width:100%;
            margin-top:25px;
            border-radius:10px;
        }

        /* RIGHT PANEL */
        .right-panel{
            flex:1;
            background:rgba(255,255,255,0.12);
            padding:40px;
            border-radius:15px;
            backdrop-filter:blur(10px);
            color:#fff;
        }

        .right-panel h2{
            text-align:center;
            margin-bottom:25px;
        }

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

        .form-group label{
            display:block;
            margin-bottom:5px;
        }

        .form-group input{
            width:100%;
            padding:10px;
            border:none;
            border-radius:8px;
            outline:none;
        }

        .btn-login{
            width:100%;
            padding:12px;
            border:none;
            border-radius:8px;
            background:#1e6c4b;
            color:#fff;
            font-weight:600;
            cursor:pointer;
        }

        .btn-login:hover{
            background:#0e422c;
        }

        .loginbutton2{
            padding:8px;
            border:none;
            border-radius:8px;
            background:#1e6c4b;
            color:#fff;
            font-weight:600;
            cursor:pointer;
            margin-bottom: 10px;
            width: 100%;
        }
         .loginbutton2:hover{
            color:#fff;
            background:#0e422c;
        }

        .loginbutton{
            padding:12px;
            border:none;
            border-radius:8px;
            background:#1e6c4b;
            color:#fff;
            font-weight:600;
            cursor:pointer;
        }

        .loginbutton:hover{
            color:#fff;
            background:#0e422c;
        }

        .links{
            text-align:center;
            margin-top:15px;
            font-size:14px;
        }

        .links a{
            color:#90ee90;
            text-decoration:none;
        }

        /* FOOTER */
        footer{
            background:#1e6c4b;
            color:#fff;
            text-align:center;
            padding:15px;
        }

        /* RESPONSIVE */
        @media(max-width:768px){
            .main-container{
                flex-direction:column;
                gap:25px;
            }

            header{
                flex-direction:column;
                gap:10px;
            }
        }