* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Montserrat', sans-serif;
            background: #071c1e;
            color: #fff;
        }

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

        .top-header {
            height: 58px;
            background: #fff;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        .header-logo {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 10px;
        }

        .header-logo img {
            max-width: 45px;
            max-height: 50px;
            object-fit: contain;
        }

        .company-name {
            color: #083c3d;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: .2px;
            margin-left: 25px;
        }

        .top-nav {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 30px;
            margin-right: 35px;
        }

        .top-nav a {
            color: #5e6265;
            text-decoration: none;
            font-size: 13px;
            transition: .3s;
        }

        .top-nav a:hover {
            color: #006b69;
        }


        /* =========================
           HERO
        ========================== */

        .hero {
            min-height: calc(100vh - 58px);
            position: relative;
            background-image:
                linear-gradient(
                    rgba(2, 27, 29, .32),
                    rgba(2, 27, 29, .32)
                ),
                url("Image/LoginBG/bodybg.jpg");

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                rgba(2, 28, 30, .15),
                rgba(2, 28, 30, .05)
            );
            pointer-events: none;
        }

        .hero-container {
            position: relative;
            z-index: 2;
            width: 100%;
        }


        /* =========================
           LEFT BRANDING CARD
        ========================== */

        .brand-card {
            min-height: 415px;
            border-radius: 22px;

            background:
                radial-gradient(
                    circle at 45% 20%,
                    rgba(0, 132, 130, .45),
                    transparent 45%
                ),
                linear-gradient(
                    135deg,
                    rgba(0, 53, 56, .82),
                    rgba(0, 15, 17, .94)
                );

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

            box-shadow:
                0 20px 45px rgba(0, 0, 0, 1),
                inset 0 1px 0 rgba(255,255,255,1);

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

            position: relative;
            overflow: hidden;
        }

        .brand-card::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            background: radial-gradient(
                circle,
                rgba(0, 135, 137, .18),
                transparent 65%
            );
            top: -220px;
            left: -80px;
        }

        .brand-content {
            width: 80%;
            max-width: 620px;

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

            position: relative;
            z-index: 2;
        }

        .brand-logo {
            flex: 1;
            text-align: center;
        }

        .brand-logo img{
            max-width: 250px;
        }  

        .divider {
            width: 1px;
            height: 185px;
            background: rgba(255, 255, 255, .55);
            margin: 0 50px;
        }

        .tagline {
            flex: 1;
            text-align: center;
        }

        

        .tagline .hindi {
            font-family: "Khand", sans-serif;
            font-size: 34px;
            font-weight: 500;
            font-style: normal;
            display: block;
            color: #5fb4b4;
            text-align: left;
            line-height: 28px;
        }


        .tagline .english {
            font-family: "Khand", sans-serif;
            font-size: 34px;
            font-weight: 500;
            font-style: normal;
            display: block;
            color: #55a9ab;
            text-align: right;
            line-height: 28px;
        }


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

        .login-card {
            background: rgba(255, 255, 255, .98);
            border-radius: 20px;
            min-height: 470px;

            padding: 58px 35px 40px;

            color: #333;

            box-shadow:
                0 20px 45px rgba(0, 0, 0, .3);
        }

        .login-title {
            color: #073d3e;
            text-align: center;
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .login-subtitle {
            color: #696969;
            text-align: center;
            font-size: 18px;
            margin-bottom: 34px;
        }

        .login-card .form-control {
            height: 45px;
            border: 1px solid #d6d6d6;
            border-radius: 5px;
            text-align: center;
            font-size: 13px;
            box-shadow: none;
        }

        .login-card .form-control:focus {
            border-color: #087c7a;
            box-shadow: 0 0 0 .15rem rgba(8, 124, 122, .12);
        }

        .login-btn {
            width: 100%;
            height: 43px;
            border: none;
            border-radius: 5px;

            background: #006e6d;
            color: #fff;

            font-size: 14px;
            font-weight: 500;

            transition: .3s;
        }

        .login-btn:hover {
            background: #005655;
            color: #fff;
        }

        .forgot-password {
            display: block;
            text-align: center;
            color: #145858;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            margin-top: 16px;
        }

        .forgot-password:hover {
            color: #006e6d;
            text-decoration: underline;
        }


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

        @media (max-width: 991px) {

            .top-header {
                height: auto;
                min-height: 60px;
                padding: 7px 10px;
            }

            .header-logo {
                margin-left: 0;
            }

            .company-name {
                margin-left: 10px;
                font-size: 14px;
            }

            .top-nav {
                gap: 15px;
                margin-right: 10px;
            }

            .top-nav a {
                font-size: 12px;
            }

            .hero {
                padding: 50px 0;
                min-height: calc(100vh - 60px);
            }

            .brand-card {
                min-height: 360px;
            }

            .login-card {
                min-height: auto;
            }

            .divider {
                margin: 0 25px;
            }
        }


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

        @media (max-width: 767px) {

            .top-header {
                padding: 10px 15px;
                flex-wrap: wrap;
            }

            .header-logo {
                width: 45px;
                height: 45px;
            }

            .header-logo img {
                max-width: 38px;
            }

            .company-name {
                font-size: 12px;
                margin-left: 5px;
                max-width: 220px;
            }

            .top-nav {
                width: 100%;
                justify-content: center;
                margin: 8px 0 0;
                gap: 20px;
            }

            .top-nav a {
                font-size: 11px;
            }

            .hero {
                padding: 30px 15px;
                background-position: center;
            }

            .brand-card {
                min-height: 280px;
                border-radius: 18px;
                margin-bottom: 25px;
            }

            .brand-content {
                width: 90%;
                flex-direction: column;
            }

            .brand-logo h1 {
                font-size: 55px;
            }

            .divider {
                width: 130px;
                height: 1px;
                margin: 25px 0;
            }

            .tagline .hindi,
            .tagline .english {
                font-size: 19px;
            }

            .login-card {
                border-radius: 18px;
                padding: 40px 25px;
            }

            .login-title {
                font-size: 23px;
            }

            .login-subtitle {
                font-size: 16px;
                margin-bottom: 25px;
            }
        }


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

        @media (max-width: 400px) {

            .company-name {
                font-size: 10px;
            }

            .top-nav {
                gap: 12px;
            }

            .top-nav a {
                font-size: 10px;
            }

            .brand-card {
                min-height: 250px;
            }

            .brand-logo h1 {
                font-size: 45px;
            }

            .tagline .hindi,
            .tagline .english {
                font-size: 16px;
            }
        }