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

body{

background:#F7F9FC;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.container{

width:1400px;

height:820px;

background:white;

border-radius:30px;

overflow:hidden;

display:flex;

box-shadow:

0 20px 60px rgba(0,0,0,.08);

}

.left{

flex:1.2;

position:relative;

background:url("assets/convocation.jpg");

background-size:cover;

background-position:center;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

rgba(28,77,180,.35),

rgba(28,77,180,.05),

white

);

}

.branding{

position:absolute;

top:45px;

left:55px;

color:white;

z-index:2;

}

.branding h4{

font-size:30px;

font-weight:800;

}

.branding p{

letter-spacing:4px;

text-transform:uppercase;

}

.quote{

position:absolute;

bottom:90px;

left:55px;

z-index:2;

color:white;

width:430px;

}

.quote h1{

font-size:56px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

}

.quote p{

font-size:18px;

line-height:1.8;

}

.right{

width:520px;

display:flex;

justify-content:center;

align-items:center;

background:white;

}

.card{

width:390px;

}

.logo{

text-align:center;

margin-bottom:40px;

}

.circle{

height:70px;

width:70px;

border-radius:50%;

background:#EAF4FF;

margin:auto;

margin-bottom:25px;

}

.logo h2{

font-size:42px;

font-weight:800;

color:#0F172A;

}

.logo p{

margin-top:10px;

color:#64748B;

}

.tabs{

display:flex;

background:#F3F4F6;

padding:5px;

border-radius:12px;

margin-bottom:35px;

}

.tabs button{

flex:1;

padding:15px;

border:none;

background:none;

font-size:16px;

font-weight:600;

cursor:pointer;

border-radius:10px;

}

.tabs .active{

background:white;

color:#2563EB;

box-shadow:0 5px 18px rgba(0,0,0,.08);

}

label{

display:block;

margin-top:18px;

margin-bottom:8px;

font-weight:600;

color:#334155;

}

input{

width:100%;

padding:17px;

border-radius:14px;

border:1px solid #E5E7EB;

font-size:16px;

outline:none;

transition:.3s;

}

input:focus{

border-color:#2563EB;

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

a{

display:block;

margin-top:16px;

text-align:right;

color:#2563EB;

text-decoration:none;

font-size:15px;

}

.login-btn{

margin-top:30px;

width:100%;

padding:18px;

border:none;

border-radius:16px;

background:#2563EB;

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.login-btn:hover{

background:#1D4ED8;

transform:translateY(-2px);

}/* ---------- Premium Overrides ---------- */
/* ===========================
   FINAL OVERRIDES
   =========================== */

.container{
    width:1380px;
    height:790px;
    border-radius:30px;
    overflow:hidden;
    display:flex;
    background:#fff;
    box-shadow:0 24px 70px rgba(15,23,42,.08);
}

.left{
    flex:1.28;
    position:relative;
    overflow:hidden;
}

.left::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0) 70%,
            rgba(255,255,255,.12) 82%,
            rgba(255,255,255,.45) 90%,
            rgba(255,255,255,.85) 97%,
            #fff 100%
        ),
        url("imgs/Green_Campus_01.webp") center center/cover no-repeat;
}

.overlay{
    display:none;
}

.branding{
    top:48px;
    left:58px;
}

.branding h4{
    font-size:34px;
}

.branding p{
    font-size:15px;
    letter-spacing:5px;
}

.quote{
    left:58px;
    bottom:60px;
    width:430px;
}

.quote h1{
    font-size:68px;
    line-height:.95;
    margin-bottom:18px;
}

.quote p{
    font-size:17px;
    line-height:1.7;
}

.right{
    width:560px;
    margin-left:-90px;
    position:relative;
    z-index:5;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:45px 55px;

    background:#fff;

    box-shadow:-40px 0 80px rgba(255,255,255,.95);
}

.card{
    width:100%;
    max-width:440px;
}

.circle{
    width:56px;
    height:56px;
    margin:0 auto 18px;
}

.logo{
    margin-bottom:18px;
}

.logo h2{
    font-size:48px;
    margin-bottom:8px;
}

.logo p{
    font-size:16px;
}

.tabs{
    margin:22px 0;
    padding:4px;
}

.tabs button{
    height:48px;
    font-size:16px;
}

label{
    margin-top:10px;
    margin-bottom:6px;
    font-size:14px;
}

input{
    height:48px;
    padding:0 18px;
    border-radius:13px;
    font-size:15px;
}

.login-btn{
    height:50px;
    margin-top:22px;
    border-radius:14px;
    font-size:16px;
}/* ========= FINAL POLISH ========= */

.container{
    width:1320px !important;
    height:740px !important;
}

.left{
    flex:1.22 !important;
    overflow:hidden;
    position:relative;
}

.left::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(45,95,210,.28) 0%,
            rgba(45,95,210,.18) 55%,
            rgba(255,255,255,.08) 78%,
            rgba(255,255,255,.45) 90%,
            rgba(255,255,255,.88) 98%,
            #fff 100%
        ),
        url("imgs/Green_Campus_01.webp") center center/cover no-repeat;
}

.overlay{
    display:none !important;
}

.right{
    width:520px !important;
    margin-left:-70px !important;
    padding:38px 50px !important;
    background:#fff !important;
    box-shadow:-25px 0 70px rgba(255,255,255,.95);
}

.card{
    max-width:420px !important;
}

.circle{
    width:52px !important;
    height:52px !important;
    margin-bottom:14px !important;
}


.logo{
    margin-bottom:16px !important;
}

.logo h2{
    font-size:42px !important;
    line-height:1.05 !important;
}

.logo p{
    font-size:15px !important;
}

.tabs{
    margin:18px 0 !important;
}

.tabs button{
    height:46px !important;
    font-size:15px !important;
}

label{
    margin-top:8px !important;
    margin-bottom:5px !important;
    font-size:14px !important;
}

input{
    height:46px !important;
    font-size:15px !important;
    border-radius:12px !important;
}

.login-btn{
    height:48px !important;
    margin-top:18px !important;
    font-size:15px !important;
}

.quote{
    width:370px !important;
    left:55px !important;
    bottom:55px !important;
}

.quote h1{
    font-size:60px !important;
    line-height:.95 !important;
    margin-bottom:16px !important;
}

.quote p{
    font-size:16px !important;
    line-height:1.6 !important;
}

.branding{
    top:42px !important;
    left:55px !important;
}

.branding h4{
    font-size:30px !important;
}

.branding p{
    font-size:14px !important;
    letter-spacing:4px !important;
}/* ===== Logo Fix ===== */
/* ===== Logo Instead of Circle ===== */

.circle{
    display:none !important;
}

.login-logo{
    display:block;
    width:180px;
    height:auto;
    margin:0 auto 20px;
    object-fit:contain;
}

.logo{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.logo h2{
    margin-top:0;
}