* {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }



        body, input, button {

            font-family: 'Roboto', Arial, sans-serif;

        }



        body {

            background-color: #f4f4f4;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

            padding: 15px;

        }



        header {

            position: fixed;

            top: 10px;

            left: 10px;

            width: calc(100% - 20px);

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        .header-logo {

            width: 100px;

            height: auto;

            margin-right: 10px;

        }



        .header-right {

            display: flex;

            align-items: center;

        }



        .sign-up-btn {

            background-color: rgb(226, 26, 34);

            color: white;

            border: none;

            padding: 10px;

            border-radius: 3px;

            cursor: pointer;

            font-size: 1.2em;

            margin-right: 10px;

            display: inline-block;

            text-align: center;

            font-weight: bold;

            text-decoration: none;

            font-family: Roboto, sans-serif;

        }



        .sign-up-btn:hover {

            background-color: #c51a29;

        }



        .language-toggle {

            font-size: 14px;

            color: rgb(38, 45, 48);

            margin-right: 10px;

            cursor: pointer;

        }



        .language-icon {

            width: 24px;

            height: auto;

        }



        .body-logo {

            width: 80%;

            height: auto;

            margin-bottom: -90px;

        }



        .container {

            background-color: white;

            padding: 20px;

            border-radius: 10px;

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

            width: 100%;

            max-width: 400px;

            text-align: center;

        }



        .login-form {

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        .hidden {

            display: none;

        }



        .login-form h1 {

            margin-bottom: 20px;

            align-self: flex-start;

            font-size: 1.9em;

        }



        .login-form p {

            margin-bottom: 20px;

            align-self: flex-start;

            font-size: 1em;

            color: rgb(38, 45, 48);

        }



        .login-form label {

            color: rgb(38, 45, 48);

            font-family: 'Roboto', sans-serif;

            font-size: 16px;

            font-weight: 300;

            height: 20px;

            margin-bottom: 5px;

            align-self: flex-start;

            margin-left: 5px;

        }

        

        

        

        

        

        

        

        

        



        .login-form input {

            margin-bottom: 15px;

            padding: 15px;

            width: 100%;

            border: 1px solid #ccc;

            border-radius: 5px;

            font-size: 1.2em;

        }



        .otp-input input {

            width: 100%;

            font-size: 2em;

            letter-spacing: 10px;

            text-align: center;

            border: 1px solid #ccc;

            border-radius: 5px;

            padding: 10px;

        }



        .pin-inputs input:focus, button[type="button"]:focus {

            outline: 2px solid #e41c22;

        }



        .spacer {

            height: 20px;

        }



        button[type="button"], button[type="submit"] {

            background-color: rgb(226, 26, 34);

            color: white;

            border: none;

            padding: 15px;

            border-radius: 3px;

            cursor: pointer;

            width: 100%;

            font-size: 1.2em;

        }



        button[type="button"]:hover, button[type="submit"]:hover {

            background-color: #c51a29;

        }



        footer {

            margin-top: 20px;

            font-size: 0.8em;

            color: rgb(119, 118, 119);

        }



        @media (max-width: 600px) {

            .login-form h2 {

                font-size: 1.2em;

            }



            .login-form p {

                font-size: 1em;

            }



            .login-form label {

                font-size: 0.9em;

            }



            .login-form input {

                font-size: 1em;

                padding: 15px;

            }



            .otp-input input {

                font-size: 1.5em;

                letter-spacing: 5px;

            }



            .pin-inputs input {

                width: calc(100% / 6 - 6px);

                padding: 15px;

            }



            button[type="button"], button[type="submit"] {

                font-size: 1em;

                padding: 16px;

            }



            .pp {

                color: rgba(0, 0, 0, 0.87);

            }

        }