* {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            font-family: 'Roboto', sans-serif;
            background-color: #f2f3f5;
            background-image: url(../img/banner-bg.png);
            height: auto;
            background-size: 100%;
        }
        .container,.container-fluid {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .login-box {
            background-color: white;
            border-radius: 28px;
            padding: 40px;
            width: 100%;
            height:350px;
            max-width: 800px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .frogsuite-logo {
            width: 75px;
            margin-bottom: 20px;
        }
        h2 {
            margin: 0;
            font-weight: 500;
            font-size: 24px;
            color: #202124;
        }
        .subtitle {
            margin: 10px 0 30px;
            font-size: 16px;
            color: #5f6368;
        }
        input[type="email"] {
            width: 100%;
            padding: 16px 12px;
            font-size: 16px;
            border: 1px solid #dadce0;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        input[type="password"] {
            width: 100%;
            padding: 16px 12px;
            font-size: 16px;
            border: 1px solid #dadce0;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        a {
            color: #1a73e8;
            color:#bd5f0a;
            text-decoration: none;
            font-size: 14px;
        }
        a:hover {
            text-decoration: underline;
        }
        .info-text {
            font-size: 14px;
            color: #5f6368;
            margin: 24px 0;
        }
        .info-text a {
            font-weight: 500;
        }
        .actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
        }
        .button {
            background-color: #1a73e8;
            background-color:#bd5f0a;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 10px 24px;
            font-size: 14px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #1967d2;
        }
        .all_apps{
            width:30%;
            margin:auto;
            margin-top:20px;
        }

        .footer {
            width: 100%;
            position:fixed;
            bottom:7px;
            text-align: center;
            /*margin-top: 40px;*/
            font-size: 10px;
            color: #5f6368;
        }
        .footer a {
            margin: 0 3px;
            color: #5f6368;
            font-size: 12px;
        }
        .lang {
            position: absolute;
            bottom: 20px;
            left: 30px;
            font-size: 13px;
        }

        @media all and (max-width:576px){

              .login-box {
                background-color: white;
                border-radius: 28px;
                padding: 40px;
                width: 100%;
                height:75%;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            .all_apps{
                width:90%;
                margin:auto;
                margin-top:40px;
            }
        }

        @media all and (max-width:767px){

                .login-box {
                        background-color: white;
                        border-radius: 28px;
                        padding: 40px;
                        width: 100%;
                        height:75%;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                }

        }