body {
            background: linear-gradient(to bottom, #33ccff 0%, #ff9966 100%);
        }

          html,
        body {
            height: 100%;
        }

        .page-wrapper {
            min-height: 100vh;
        }

        .info-section,
        .login-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Equal spacing from center divider */
        .info-section {
            padding-right: 60px;
        }

        .login-section {
            padding-left: 60px;
        }

      

        /* Mobile adjustments */
        @media (max-width: 991px) {
            .info-section::after {
                display: none;
            }

            .info-section,
            .login-section {
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        /* Exact pill input like image */
        .pill-input {
            width: 100%;
            height: 58px;
            border-radius: 40px;
            background: rgba(255, 255, 255, 0.18);
            border: none;
            padding: 0 36px;
            font-size: 16px;
            color: black;
            outline: none;

            /* IMPORTANT: remove these for mobile safety */
            white-space: normal;
            overflow: hidden;
            text-overflow: clip;
        }


        /* Placeholder style */
        /* Placeholder text – BLACK */
        .pill-input::placeholder {
            color: #000;
            font-weight: 500;
        }

        /* For better cross-browser support */
        .pill-input::-webkit-input-placeholder {
            color: #000;
        }

        .pill-input::-moz-placeholder {
            color: #000;
        }

        .pill-input:-ms-input-placeholder {
            color: #000;
        }

        .login-box {
            width: 100%;
            max-width: 400px;
        }

        .pill-input {
            width: 100%;
            padding: 0 36px;
        }

        /* Glass card for login form */
        .login-card {
            background: rgba(255, 255, 255, 0.22);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);

            border-radius: 22px;
            padding: 42px 46px;

            box-shadow:
                0 18px 40px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        @media (max-width: 576px) {
            .pill-input {
                font-size: 15px;
                /* slightly smaller text */
                padding: 0 22px;
                /* less padding = more visible text */
                height: 54px;
                border-radius: 30px;

                overflow: visible;
                /* allow normal typing */
            }
        }

        input {
            -webkit-appearance: none;
            appearance: none;
        }