@font-face {
    font-family: 'Inter';
    src: url('./appcss/inter-v20-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./appcss/inter-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./appcss/inter-v20-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./appcss/inter-v20-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./appcss/inter-v20-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Inter', sans-serif;
}
   
   /* ===========================================
   RESET
=========================================== */
/* Desktop */
.mobile-footer{
    display:none;
}

/* Mobile */
@media (max-width:768px){
    .mobile-footer{
        display:block;
    }

    .brand-footer{
        display:none;
    }
}

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

body{
    font-family:'Inter',sans-serif;
    background:#f4f7fb;
    color:#1f2937;
    overflow-x:hidden;
}

/* ===========================================
   LOGIN LAYOUT
=========================================== */

.login-wrapper{
    width:100%;
    min-height:100vh;
    display:grid;
    grid-template-columns:48% 52%;
}

/* ===========================================
   LEFT PANEL
=========================================== */

.login-left{

    position:relative;

    padding:55px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    color:#fff;

    background:
    radial-gradient(circle at top left,
    rgba(90,140,255,.18),
    transparent 40%),

    radial-gradient(circle at bottom right,
    rgba(80,190,255,.08),
    transparent 35%),

    linear-gradient(135deg,#1d3557,#0b1633);

}

.brand-top{

    display:flex;

    align-items:center;

    gap:15px;

}
.brand-logo {
    width: 130px;
    height: 65px;

    border-radius: 18px;

    background: rgba(255, 255, 255, .12);

    backdrop-filter: blur(15px);

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

    box-shadow: 0 15px 40px rgba(0, 0, 0, .15);

    overflow: hidden;
}

.brand-logo img {
    width: 115px;
    height: auto;


    object-fit: contain;

    display: block;
}

.brand-text h2{

    font-size:26px;

    font-weight:700;

}

.brand-text span{

    font-size:12px;

    letter-spacing:2px;

    opacity:.75;

}

.brand-content{

    max-width:540px;

}

.brand-content h1{

    font-size:26px;

    line-height:1.15;

    font-weight:700;

    margin-bottom:28px;

}

.brand-content p{

    font-size:18px;

    color:rgba(255,255,255,.82);

    line-height:1.8;

}

.brand-footer{

    font-size:15px;

    color:#ffffff80;
    gap: 0px !important;

}
.website-link{
    color:#ffffff80 ;
    text-decoration: none;
}

.footer-links{

    margin:12px 0;

    display:flex;

    gap:28px;

    flex-wrap:wrap;

}

.footer-links span{

    display:flex;

    align-items:center;

    gap:8px;

}

.footer-location{

    display:flex;

    align-items:center;

    gap:10px;

}

/* ===========================================
   RIGHT PANEL
=========================================== */

.login-right{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px;

    background:#ffffff;

}

.login-card{

    width:100%;

    max-width:500px;

    animation:fadeUp .6s ease;

}

.login-card h2{

    font-size:48px;

    color:#0b1633;

    margin-bottom:12px;

}

.login-subtitle{

    color:#7b8794;

    margin-bottom:45px;

    font-size:17px;

}

/* ===========================================
   INPUTS
=========================================== */

.input-group{

    margin-bottom:25px;

}

.input-group label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#27364d;

}

.label-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.label-row a{

    color:#4b7cff;

    text-decoration:none;

    font-size:14px;

}

.input-box{

    height:60px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 20px;

    border:1px solid #d9e2ec;

    border-radius:14px;

    transition:.3s;

    background:#fff;

}

.input-box:hover{

    border-color:#3b82f6;

}

.input-box:focus-within{

    border-color:#2563eb;

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

}

.input-box i{

    color:#64748b;

    width:18px;

}

.input-box input{

    flex:1;

    border:none;

    outline:none;

    background:none;

    font-size:16px;

    color:#111827;

}

.input-box input::placeholder{

    color:#94a3b8;

}

/* ===========================================
   CAPTCHA
=========================================== */

.captcha-wrapper{

    margin:28px 0;

}

/* ===========================================
   BUTTON
=========================================== */

.login-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#25406e,#15284d);

    transition:.35s;

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(37,64,110,.35);

}

.login-btn:active{

    transform:scale(.98);

}

/* ===========================================
   ERROR
=========================================== */

.login-error{

    margin-top:20px;

    background:#fdecec;

    color:#c62828;

    border-radius:12px;

    padding:15px;

    font-size:15px;

}

.login-note{

    margin-top:28px;

    text-align:center;

    color:#94a3b8;

    font-size:14px;

}

/* ===========================================
   ANIMATION
=========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ===========================================
   RESPONSIVE
=========================================== */

@media(max-width:1100px){

.login-wrapper{

    grid-template-columns:1fr;

}

.login-left{

    min-height:420px;

    padding:40px;

}

.brand-content h1{

    font-size:42px;

}

.brand-content p{

    font-size:18px;

}

.login-right{

    padding:40px 25px;

}

}

@media (max-width:768px){

    body{
        min-height:100vh;
    }

    .login-wrapper{
        min-height:100vh;
        display:flex;
        flex-direction:column;
    }

    /* Top Branding */
    .login-left{
        padding:15px;
        min-height:auto;
        display:block;
        order:1;
    }

    .brand-content{
        display:none;
    }

    .brand-top{
        display:flex;
        justify-content:left;
        align-items:left;
    }

    .brand-logo {
        width: 90px;
        height: 50px;

        border-radius: 15px;
    }

    .brand-logo img {
        width: 80px;
        height: 60px;
        border-radius: 10px !important;
    }
    .captcha-wrapper{

    margin:20px 0;

}
    .login-subtitle{

    color:#7b8794;

    margin-bottom:30px;

    font-size:15px;

}
.input-group{

    margin-bottom:20px;

}

   

    .brand-text h2{
        font-size:20px;
    }

    .brand-text span{
        font-size:12px;
    }

    /* Hide footer here */
    .brand-footer{
        display:none;
    }

    /* Login takes remaining height */
    .login-right{
        order:2;
        flex:1;
        display:flex;
        justify-content:center;
        align-items:center;
        padding:20px 20px;
    }

    /* Footer sticks to bottom */
    .mobile-footer{
        order:3;
        margin-top:auto;
        padding:18px 15px;
        background:#0b1633;
        color:#fff;
        text-align:center;
        border-top:1px solid rgba(255,255,255,.15);
        font-size:15px;
    }

    .mobile-footer .footer-links{
        justify-content:center;
        gap:15px;
        margin:5px 0;
        display:flex;
        font-size:14px;
        flex-wrap:wrap;
    }

    .mobile-footer .footer-location{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:8px;
        line-height:1.5;
        font-size:13px;
        flex-wrap:wrap;
    }

    .g-recaptcha{
        transform:scale(.88);
        transform-origin:left top;
    }
}

@media(max-width:420px){

.login-card{

    max-width:100%;

}

.input-box{

    padding:0 16px;

}

.login-card h2{

    font-size:32px;

}

}