/* =========================================================
   BAHUBALI PRINTS ERP
   PROFESSIONAL LOGIN PAGE
   DEVELOPED BY AKING WEB TECH
========================================================= */


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    min-height: 100%;

}


body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        #050c18;

    color: #ffffff;

    overflow-x: hidden;

}


/* =========================================================
   MAIN APP
========================================================= */

.app-shell {

    min-height: 100vh;

    position: relative;

    display: grid;

    grid-template-columns:
        57% 43%;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 12% 80%,
            rgba(0,190,255,.12),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 10%,
            rgba(157,0,255,.12),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #020711 0%,
            #071426 50%,
            #0a1830 100%
        );

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.bg-grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:

        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

}


/* =========================================================
   COLOR ORBS
========================================================= */

.gradient-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(70px);

    opacity: .32;

}


.orb-blue {

    width: 320px;

    height: 320px;

    left: -100px;

    bottom: 10%;

    background:
        #006eff;

}


.orb-pink {

    width: 300px;

    height: 300px;

    right: 10%;

    top: -130px;

    background:
        #ed008f;

}


.orb-orange {

    width: 240px;

    height: 240px;

    right: -120px;

    bottom: 12%;

    background:
        #ff7700;

}


.orb-cyan {

    width: 180px;

    height: 180px;

    left: 35%;

    top: 30%;

    background:
        #00eaff;

    opacity: .13;

}


/* =========================================================
   DECORATIVE LINES
========================================================= */

.graphic-line {

    position: absolute;

    pointer-events: none;

    height: 1px;

    opacity: .35;

}


.line-1 {

    width: 430px;

    left: -80px;

    top: 18%;

    transform:
        rotate(-30deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            #00c9ff,
            transparent
        );

}


.line-2 {

    width: 500px;

    right: -130px;

    top: 25%;

    transform:
        rotate(38deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff0095,
            transparent
        );

}


.line-3 {

    width: 400px;

    right: -100px;

    bottom: 22%;

    transform:
        rotate(-40deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff9900,
            transparent
        );

}


/* =========================================================
   BRAND SECTION
========================================================= */

.brand-section {

    position: relative;

    z-index: 2;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        35px 5vw 85px;

    background:
        linear-gradient(
            90deg,
            rgba(1,8,18,.80),
            rgba(4,18,35,.48)
        );

}


.brand-inner {

    width: 100%;

    max-width: 700px;

    margin: auto;

}


/* =========================================================
   LOGO
========================================================= */

.main-logo {

    display: flex;

    justify-content: center;

    margin-bottom: 12px;

}


.logo-ring {

    width: 145px;

    height: 145px;

    padding: 5px;

    border-radius: 50%;

    background:

        conic-gradient(
            #ff008f,
            #ff1c00,
            #ffd000,
            #4eff00,
            #00ddff,
            #1550ff,
            #a000ff,
            #ff008f
        );

    box-shadow:

        0 0 25px
        rgba(0,210,255,.25),

        0 0 60px
        rgba(240,0,150,.13);

    animation:
        logoFloat 5s
        ease-in-out
        infinite;

}


.logo-ring img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

    display: block;

}


@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-6px);

    }

}


/* =========================================================
   BRAND NAME
========================================================= */

.brand-name {

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            42px,
            4.4vw,
            67px
        );

    font-weight: 700;

    line-height: 1;

    letter-spacing:
        -1px;

    color: #ffffff;

    text-shadow:
        0 5px 30px
        rgba(0,0,0,.3);

}


.brand-tagline {

    text-align: center;

    margin-top: 12px;

    font-size: 12px;

    letter-spacing: 6px;

    font-weight: 700;

    color:
        #e6edf9;

}


.process-row {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 18px;

    font-size: 11px;

    letter-spacing: 1.5px;

    font-weight: 700;

}


.process-row b {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #00eaff,
            #ff008f
        );

}


.creative-text {

    text-align: center;

    margin:
        24px 0 24px;

    font-family:
        Georgia,
        serif;

    font-style: italic;

    font-size: 26px;

    transform:
        rotate(-2deg);

}


.creative-text span {

    margin-right: 8px;

}


.creative-text strong {

    background:

        linear-gradient(
            90deg,
            #00d5ff,
            #f000a0,
            #ff9700
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   SERVICES
========================================================= */

.services-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                200px,
                1fr
            )
        );

    gap: 10px 14px;

}


.service-card {

    min-height: 54px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 13px;

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

    backdrop-filter:
        blur(12px);

    transition:
        .25s ease;

}


.service-card:hover {

    transform:
        translateY(-3px);

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

    border-color:
        rgba(0,210,255,.28);

}


.service-card strong {

    display: block;

    font-size: 12px;

    color:
        #edf4ff;

}


.service-card small {

    display: block;

    margin-top: 3px;

    font-size: 9px;

    color:
        #8798b0;

}


.service-icon {

    width: 35px;

    height: 35px;

    flex:
        0 0 35px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: #ffffff;

    font-size: 15px;

}


.icon-purple {

    background:
        linear-gradient(
            135deg,
            #751eff,
            #d400ff
        );

}


.icon-blue {

    background:
        linear-gradient(
            135deg,
            #0077ff,
            #00d5ff
        );

}


.icon-pink {

    background:
        linear-gradient(
            135deg,
            #f00091,
            #ff305f
        );

}


.icon-orange {

    background:
        linear-gradient(
            135deg,
            #ff6b00,
            #ffc400
        );

}


.icon-green {

    background:
        linear-gradient(
            135deg,
            #00b968,
            #8ee000
        );

}


.icon-cyan {

    background:
        linear-gradient(
            135deg,
            #00a9e8,
            #00e8d0
        );

}


.icon-yellow {

    background:
        linear-gradient(
            135deg,
            #ffb300,
            #ffe600
        );

}


.icon-red {

    background:
        linear-gradient(
            135deg,
            #ff304d,
            #ff007d
        );

}


/* =========================================================
   TRUST ROW
========================================================= */

.trust-row {

    position: absolute;

    bottom: 26px;

    left: 5vw;

    right: 5vw;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

}


.trust-row span {

    padding:
        7px 12px;

    border:
        1px solid
        rgba(0,210,255,.12);

    border-radius: 999px;

    background:
        rgba(0,0,0,.22);

    color:
        #9aabc2;

    font-size: 9px;

    font-weight: 600;

}


/* =========================================================
   LOGIN SECTION
========================================================= */

.login-section {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        65px 5vw 75px 2vw;

}


/* =========================================================
   TOP QUOTE
========================================================= */

.top-quote {

    position: absolute;

    top: 26px;

    right: 5vw;

    max-width: 300px;

    text-align: right;

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

    font-family:
        Georgia,
        serif;

    font-style: italic;

    font-size: 14px;

    line-height: 1.5;

}


.top-quote strong {

    color:
        #ffffff;

}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {

    width:
        min(
            100%,
            590px
        );

    border-radius: 25px;

    overflow: hidden;

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

    color:
        #182b47;

    box-shadow:

        0 35px 90px
        rgba(0,0,0,.38),

        0 0 0 1px
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(15px);

}


/* =========================================================
   HEADER
========================================================= */

.login-header {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 20px;

    padding:
        35px 40px 0;

}


.login-eyebrow {

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    color:
        #1475e8;

}


.login-header h1 {

    margin-top: 6px;

    font-size:
        clamp(
            30px,
            3vw,
            42px
        );

    line-height: 1.1;

    letter-spacing:
        -1.2px;

    color:
        #112642;

}


.login-header p {

    margin-top: 6px;

    font-size: 13px;

    color:
        #7a899d;

}


.login-header p strong {

    color:
        #243b5a;

}


.small-logo {

    width: 82px;

    height: 82px;

    object-fit: cover;

    border-radius: 50%;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.10);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.login-description {

    padding:
        18px 40px 24px;

    color:
        #7a899d;

    font-size: 12px;

    line-height: 1.7;

    max-width: 530px;

}


/* =========================================================
   MESSAGE
========================================================= */

.login-message {

    display: block;

    margin:
        0 40px 15px;

    padding:
        10px 13px;

    border-radius: 9px;

    background:
        #fff0f0;

    color:
        #c52b2b;

    border:
        1px solid
        #ffd0d0;

    font-size: 12px;

}


/* =========================================================
   FIELD
========================================================= */

.field {

    margin:
        0 40px 17px;

}


.field label {

    display: block;

    margin-bottom: 7px;

    color:
        #334762;

    font-size: 11px;

    font-weight: 700;

}


.input-wrapper {

    height: 54px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0 14px;

    border:
        1px solid
        #d4dfeb;

    border-radius: 11px;

    background:
        #fbfdff;

    transition:
        .25s ease;

}


.input-wrapper:focus-within {

    border-color:
        #3986ed;

    box-shadow:
        0 0 0 4px
        rgba(35,113,235,.09);

    background:
        #ffffff;

}


.field-icon {

    width: 24px;

    text-align: center;

    color:
        #71829a;

    font-size: 18px;

}


.login-input {

    width: 100%;

    min-width: 0;

    border: 0;

    outline: 0;

    background:
        transparent;

    color:
        #182c48;

    font-size: 14px;

}


.login-input::placeholder {

    color:
        #a0acbc;

}


.password-eye {

    border: 0;

    background:
        transparent;

    cursor: pointer;

    font-size: 17px;

    padding: 4px;

    color:
        #74849a;

}


/* =========================================================
   OPTIONS
========================================================= */

.login-options {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 15px;

    margin:
        4px 40px 22px;

}


.remember-box {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #596a81;

    font-size: 11px;

    cursor: pointer;

}


.remember-box input {

    accent-color:
        #1675ed;

}


.forgot-link {

    color:
        #086fff;

    text-decoration:
        none;

    font-size: 11px;

    font-weight: 700;

}


.forgot-link:hover {

    text-decoration:
        underline;

}


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

.login-button {

    width:
        calc(
            100% - 80px
        );

    height: 54px;

    margin:
        0 40px;

    border: 0;

    border-radius: 11px;

    cursor: pointer;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    background:

        linear-gradient(
            90deg,
            #0878ff,
            #7118ee,
            #f50091
        );

    box-shadow:

        0 13px 28px
        rgba(77,54,220,.24);

    transition:
        .25s ease;

}


.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:

        0 17px 35px
        rgba(77,54,220,.32);

}


.login-button:active {

    transform:
        translateY(0);

}


/* =========================================================
   OR
========================================================= */

.or-line {

    position: relative;

    margin:
        22px 40px;

    text-align: center;

}


.or-line::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 50%;

    height: 1px;

    background:
        #e2e7ed;

}


.or-line span {

    position: relative;

    z-index: 2;

    padding:
        0 13px;

    background:
        #ffffff;

    color:
        #8b98aa;

    font-size: 10px;

}


/* =========================================================
   MICROSOFT
========================================================= */

.microsoft-button {

    width:
        calc(
            100% - 80px
        );

    height: 52px;

    margin:
        0 40px;

    border:
        1px solid
        #b9c9dc;

    border-radius: 11px;

    background:
        #ffffff;

    color:
        #203451;

    cursor:
        pointer;

    font-size: 13px;

    font-weight: 700;

    transition:
        .2s ease;

}


.microsoft-button:hover {

    background:
        #f5f8fc;

    border-color:
        #8fa7c5;

}


.ms-icon {

    color:
        #1374dc;

    font-size: 22px;

    margin-right: 8px;

    vertical-align:
        -2px;

}


/* =========================================================
   SECURITY
========================================================= */

.security-note {

    display: flex;

    justify-content:
        center;

    align-items: center;

    gap: 7px;

    margin:
        17px 0 0;

    color:
        #7b899d;

    font-size: 10px;

}


.security-icon {

    width: 17px;

    height: 17px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        #ffffff;

    background:
        #18a969;

    font-size: 10px;

}


/* =========================================================
   CARD FOOTER
========================================================= */

.login-card-footer {

    min-height: 92px;

    margin-top: 25px;

    padding:
        18px 30px;

    display: flex;

    align-items: center;

    gap: 12px;

    background:

        linear-gradient(
            90deg,
            #f2efff,
            #eefaff
        );

    border-top:
        1px solid
        #edf1f6;

}


.footer-print-icon {

    width: 40px;

    height: 40px;

    flex:
        0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(77,86,255,.09);

    font-size: 20px;

}


.login-card-footer strong {

    display: block;

    color:
        #183251;

    font-size: 13px;

}


.login-card-footer span {

    display: block;

    margin-top: 2px;

    color:
        #465c78;

    font-size: 12px;

}


.footer-right {

    margin-left: auto;

    text-align: right;

    color:
        #78879a;

    font-size: 9px;

    line-height: 1.6;

}


.footer-right strong {

    font-size: 9px;

    color:
        #334863;

}


/* =========================================================
   POWERED BY
========================================================= */

.powered-by {

    position: absolute;

    bottom: 58px;

    left: 0;

    right: 0;

    text-align: center;

    font-size: 9px;

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

}


.powered-by a {

    margin-left: 4px;

    color:
        #00cfff;

    text-decoration:
        none;

    font-weight: 700;

}


.powered-by a:hover {

    color:
        #ffffff;

}


/* =========================================================
   FOOTER
========================================================= */

.bottom-footer {

    position: absolute;

    z-index: 10;

    bottom: 0;

    left: 0;

    right: 0;

    min-height: 43px;

    padding:
        0 4vw;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    background:
        rgba(0,5,14,.72);

    backdrop-filter:
        blur(12px);

    color:
        #73849a;

    font-size: 9px;

}


.bottom-footer div {

    display: flex;

    gap: 20px;

}


.bottom-footer a {

    color:
        #8393a8;

    text-decoration:
        none;

}


.bottom-footer a:hover {

    color:
        #ffffff;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {


    .app-shell {

        grid-template-columns:
            50% 50%;

    }


    .brand-section {

        padding:
            30px 3vw 80px;

    }


    .login-section {

        padding:
            60px 3vw 70px 2vw;

    }


    .services-grid {

        grid-template-columns:
            1fr;

        max-width:
            430px;

        margin:
            auto;

    }


    .brand-name {

        font-size:
            48px;

    }

}



/* =========================================================
   MOBILE APP MODE
========================================================= */

@media (max-width: 800px) {


    body {

        background:
            #061225;

    }


    .app-shell {

        display: block;

        min-height: 100vh;

        overflow-y: auto;

        padding-bottom: 48px;

    }


    /* Brand becomes mobile app header */

    .brand-section {

        min-height:
            340px;

        padding:
            35px 20px 25px;

        background:

            radial-gradient(
                circle at 50% 0%,
                rgba(0,125,255,.22),
                transparent 45%
            ),

            linear-gradient(
                180deg,
                #071b34,
                #061225
            );

    }


    .brand-inner {

        max-width:
            550px;

    }


    .logo-ring {

        width:
            105px;

        height:
            105px;

    }


    .brand-name {

        font-size:
            38px;

    }


    .brand-tagline {

        font-size:
            9px;

        letter-spacing:
            3px;

    }


    .process-row {

        margin-top:
            13px;

        font-size:
            8px;

        gap:
            8px;

    }


    .creative-text {

        font-size:
            20px;

        margin:
            18px 0;

    }


    .services-grid {

        display:
            none;

    }


    .trust-row {

        position:
            static;

        margin-top:
            22px;

        gap:
            6px;

    }


    .trust-row span {

        font-size:
            8px;

        padding:
            6px 9px;

    }


    /* Login */

    .login-section {

        min-height:
            auto;

        padding:
            0 14px 70px;

        display:
            block;

    }


    .top-quote {

        display:
            none;

    }


    .login-card {

        width:
            100%;

        max-width:
            500px;

        margin:
            -25px auto 0;

        border-radius:
            24px;

        position:
            relative;

        z-index:
            5;

    }


    .login-header {

        padding:
            28px 25px 0;

    }


    .login-header h1 {

        font-size:
            29px;

    }


    .login-header p {

        font-size:
            11px;

    }


    .small-logo {

        width:
            64px;

        height:
            64px;

    }


    .login-description {

        padding:
            15px 25px 22px;

        font-size:
            11px;

    }


    .field {

        margin-left:
            25px;

        margin-right:
            25px;

    }


    .login-options {

        margin-left:
            25px;

        margin-right:
            25px;

    }


    .login-button {

        width:
            calc(
                100% - 50px
            );

        margin-left:
            25px;

        margin-right:
            25px;

        height:
            54px;

    }


    .or-line {

        margin-left:
            25px;

        margin-right:
            25px;

    }


    .microsoft-button {

        width:
            calc(
                100% - 50px
            );

        margin-left:
            25px;

        margin-right:
            25px;

    }


    .login-card-footer {

        padding:
            17px 20px;

    }


    .footer-right {

        display:
            none;

    }


    .powered-by {

        position:
            static;

        margin:
            -50px 0 0;

    }


    .bottom-footer {

        position:
            fixed;

        min-height:
            45px;

        justify-content:
            center;

    }


    .bottom-footer > span {

        display:
            none;

    }


    .bottom-footer div {

        gap:
            16px;

    }


}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {


    .brand-section {

        min-height:
            310px;

        padding-top:
            28px;

    }


    .logo-ring {

        width:
            88px;

        height:
            88px;

    }


    .brand-name {

        font-size:
            32px;

    }


    .brand-tagline {

        font-size:
            8px;

        letter-spacing:
            2px;

    }


    .creative-text {

        font-size:
            18px;

    }


    .login-card {

        margin-top:
            -18px;

    }


    .login-header {

        padding:
            24px 20px 0;

    }


    .login-header h1 {

        font-size:
            27px;

    }


    .small-logo {

        width:
            57px;

        height:
            57px;

    }


    .login-description {

        padding:
            13px 20px 20px;

    }


    .field {

        margin-left:
            20px;

        margin-right:
            20px;

    }


    .login-options {

        margin-left:
            20px;

        margin-right:
            20px;

    }


    .login-button {

        width:
            calc(
                100% - 40px
            );

        margin-left:
            20px;

        margin-right:
            20px;

    }


    .or-line {

        margin-left:
            20px;

        margin-right:
            20px;

    }


    .microsoft-button {

        width:
            calc(
                100% - 40px
            );

        margin-left:
            20px;

        margin-right:
            20px;

    }


    .login-card-footer {

        margin-top:
            22px;

        min-height:
            80px;

        padding:
            15px 17px;

    }


    .trust-row {

        display:
            grid;

        grid-template-columns:
            1fr 1fr;

    }


}



/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {


    .brand-name {

        font-size:
            28px;

    }


    .process-row {

        font-size:
            7px;

    }


    .login-header h1 {

        font-size:
            25px;

    }


    .login-header p {

        font-size:
            10px;

    }


    .forgot-link {

        font-size:
            9px;

    }


}