:root{
        --primary:#0d6efd;
        --primary-dark:#084298;
    }

    body{
        font-family:'Circular Std', sans-serif;
        min-height:100vh;

        background:
            linear-gradient(rgba(0,0,0,0.55),
            rgba(0,0,0,0.55)),
            url("../../images/iitg_main_entrance.jpg");

        background-size:cover;
        background-position:center;
        background-attachment:fixed;
    }

    /* MAIN */

    .main-wrapper{
        min-height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
        padding:20px;
    }

    .center-box{

        width:100%;
        max-width:1050px;

        display:flex;

        border-radius:18px;
        overflow:hidden;

        background:rgba(255,255,255,0.08);

        backdrop-filter:blur(12px);

        box-shadow:
            0 10px 30px rgba(0,0,0,0.30);
    }

    /* LEFT */

    .left-panel{

        width:46%;

        background:#fff;

        padding:38px 36px;

        position:relative;
    }

    /* .left-panel::before{

        content:"";

        position:absolute;
        top:0;
        left:0;

        width:100%;
        height:4px;

        background:
            linear-gradient(90deg,#0d6efd,#4dabf7);
    } */

    /* RIGHT */

    .right-panel{

        width:54%;

        padding:40px 34px;

        background:
            linear-gradient(145deg, rgb(0 0 0 / 92%), rgba(8, 66, 152, 0.92));

        color:white;

        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    /* LOGO */

    .logo-img{
        width:62px;
        margin-bottom:12px;
    }

    .portal-title{
        font-size:24px;
        font-weight:700;
        margin-bottom:6px;
        color:#212529;
    }

    .portal-subtitle{
        font-size:13px;
        color:#6c757d;
    }

    /* FORM */

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

    .form-label{

        display:block;

        margin-bottom:6px;

        font-size:13px;
        font-weight:600;

        color:#343a40;
    }

    .form-control{

        height:46px;

        border-radius:10px;

        border:1px solid #dfe3e8;

        padding:0 14px;

        font-size:14px;

        transition:0.25s;
    }

    .form-control:focus{

        border-color:#0d6efd;

        box-shadow:
            0 0 0 3px rgba(13,110,253,0.12);

        outline:none;
    }

    /* CAPTCHA */

    .captcha-box{

        background:#f8f9fa;

        border-radius:10px;

        padding:10px;

        border:1px solid #e9ecef;
    }

    /* BUTTON */

    .btn-primary{

        height:46px;

        border:none;

        border-radius:10px;

        background:
            linear-gradient(135deg,#0d6efd,#0b5ed7);

        font-size:15px;
        font-weight:600;

        transition:0.25s;
    }

    .btn-primary:hover{

        transform:translateY(-1px);

        box-shadow:
            0 8px 18px rgba(13,110,253,0.28);
    }

    /* LINKS */

    .bottom-links{

        margin-top:18px;

        display:flex;
        justify-content:space-between;

        font-size:13px;
    }

    .bottom-links a{

        color:#0d6efd;

        font-weight:600;

        text-decoration:none;
    }

    .bottom-links a:hover{
        text-decoration:underline;
    }

    /* RIGHT PANEL */

    .right-title{

        font-size:28px;
        font-weight:700;

        margin-bottom:10px;
    }

    .instruction-subtitle{

        font-size:13px;

        line-height:1.6;

        color:rgba(255,255,255,0.85);

        margin-bottom:22px;
    }

    .instruction-card{

        display:flex;

        align-items:flex-start;

        gap:14px;

        background:rgba(255,255,255,0.12);

        border:1px solid rgba(255,255,255,0.14);

        border-radius:14px;

        padding:14px;

        margin-bottom:14px;

        transition:0.25s;
    }

    .instruction-card:hover{

        transform:translateY(-2px);

        background:rgba(255,255,255,0.17);
    }

    .step-badge{

        min-width:36px;
        height:36px;

        border-radius:50%;

        background:white;

        color:#0d6efd;

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

        font-size:14px;
        font-weight:700;
    }

    .instruction-card h5{
        color: #fff;
        margin-bottom:4px;

        font-size:15px;
        font-weight:600;
    }

    .instruction-card p{

        margin:0;

        font-size:13px;

        line-height:1.5;

        color:#f1f3f5;
    }

    .password-wrapper{
    position:relative;
}

.password-input{
    padding-right:48px;
}

.toggle-password{

    position:absolute;

    top:50%;
    right:16px;

    transform:translateY(-50%);

    cursor:pointer;

    color:#6c757d;

    font-size:15px;

    transition:0.2s;
}

.toggle-password:hover{
    color:#0d6efd;
}

    /* ALERT */

    .alert{
        border-radius:10px;
        font-size:13px;
        padding:10px;
    }

    /* MOBILE */

    @media(max-width:991px){

        .center-box{
            flex-direction:column;
        }

        .left-panel,
        .right-panel{
            width:100%;
        }

        .left-panel{
            padding:28px 24px;
        }

        .right-panel{
            padding:30px 24px;
        }

        .right-title{
            font-size:24px;
        }
    }