body, html {
                    margin: 0;
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    font-family: 'Segoe UI', sans-serif;
                    background: url('../../logo/b2.png') no-repeat center center/cover;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .background {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .glass-card {
                    /*background: linear-gradient(90deg, #3978a8, #0f3571);*/
                    background: rgb(249 243 242 / 74%);
                    background: url('../../logo/02.png') no-repeat center center/cover;
                    /*background: rgb(255 255 255 / 28%);*/
                    border-radius: 20px;
                    text-align: center;
                    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
                    padding: 40px 57px 40px 40px;
                    width: 330px;
                    box-shadow: 0 8px 32px rgb(255 255 255);
                    backdrop-filter: blur(5px);
                    -webkit-backdrop-filter: blur(12px);
                    border: 2px solid rgb(255 255 255);
                    color: #fdf81e;
                    text-align: center;
                    animation: fadeIn 1s ease forwards;
                }

                .input-group {
                    margin-bottom: 20px;
                    text-align: left;
                    text-shadow: 1px 1px 2px rgb(255 255 255);
                    label;

                {
                    display: block;
                    font-size: 1em;
                    margin-bottom: 5px;
                    font-weight: bold;
                }

                input {
                    font-family: 'Segoe UI', sans-serif;
                    width: 90%;
                    padding: 10px;
                    /*border: none;*/
                    border-radius: 10px;
                    background: rgb(255 255 255);
                    color: black;
                    outline: none;
                    transition: 0.3s ease;
                    font-weight: bold;
                    border: 1px solid #e6dcdcd4;
                    /*text-shadow: 1px 1px 2px rgb(255 255 255);*/
                    &:focus;

                {
                    background: rgba(255, 255, 255, 0.3);
                }

                }
                }

                #btnlogin {
                    font-family: 'Segoe UI', sans-serif;
                    width: 70%;
                    padding: 10px;
                    border: none;
                    background: #f71720;
                    color: white;
                    border-radius: 18px;
                    font-weight: bold;
                    font-size: 1rem;
                    cursor: pointer;
                    transition: background 0.3s ease;
                    /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);*/
                    &:hover;
                }

                {
                    background: rgba(255, 255, 255, 0.5);
                }

                }

                .signup {
                    margin-top: 15px;
                    font-size: 0.85em;
                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
                    a;

                {
                    color: #fff;
                    text-decoration: underline;
                }

                }

                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(-20px);
                    }

                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }


                @media only screen and (max-device-width: 600px) {

                    .glass-card {
                        width: 800px !important;
                    }

                    .input-group {
                        padding-bottom: 30px;
                    }

                    label {
                        font-size: 35px;
                        font-weight: bold;
                    }

                    .captactest {
                        width: 600px !important;
                        font-size: 35px;
                    }

                    #txtusername, #txtpassword, #txtSecurityCode {
                        height: 80px;
                        font-size: 35px;
                    }

                    #lblSecCode {
                        font-size: 35px !important;
                        font-weight: bold !important;
                    }

                    #btnlogin {
                        height: 100px !important;
                        font-size: 50px !important;
                        font-weight: bold !important;
                    }

                    h2 {
                        font-size: 60px;
                    }

                    #logo {
                        height: 280px !important;
                    }

                    #cname {
                        font-size: 35px !important;
                    }

                    .icon-input input {
                        padding-left: 70px !important;
                    }

                    .password-group input {
                        padding-left: 70px!important;
                    }

                    .icon-input::before {
                        top: 39% !important;
                        font-size: 39px !important;
                    }

                    .password-group::before {
                    content: "\f023"; /* lock icon */
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    position: absolute;
                    left: 17px!important;
                        top: 36%!important;
                    transform: translateY(-50%);
                    color: red;
                    font-size: 39px!important;
                }

                    .glass-card {
                        padding: 80px 57px 40px 40px!important;
                    }
                }

                @media only screen and (min-width: 992px) {

                    .glass-card {
                        width: 300px !important;
                    }

                    label {
                        font-weight: bold;
                    }
                }

                ::placeholder {
                    color: black;
                    opacity: 1;
                }

                .icon-input {
                    position: relative;
                }

                    .icon-input input {
                        padding-left: 40px; /* space for icon */
                        /*height: 45px;*/
                        border-radius: 8px;
                    }

                .password-group input {
                    padding-left: 40px; /* space for icon */
                    /*height: 45px;*/
                    border-radius: 8px;
                }

                .icon-input::before {
                    content: "\f007"; /* user icon */
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    position: absolute;
                    left: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: red;
                    font-size: 15px;
                }

                .password-group::before {
                    content: "\f023"; /* lock icon */
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    position: absolute;
                    left: 51px;
                    top: 39%;
                    transform: translateY(-50%);
                    color: red;
                    font-size: 15px;
                }


                .con-input {
    position: relative;
}

/* LEFT LOCK ICON */
.password-group::before {
    content: "\f023";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: red;
}

/* RIGHT EYE ICON */
.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 16px;
}



/* RIGHT EYE ICON */
.toggle-password {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 16px;
}

/* 🔽 TABLET */
@media (max-width: 768px) {
    

    .password-group::before {
        left: 12px!important;
        font-size: 41px!important;
    }

    .toggle-password {
        right: 12px!important;
        font-size: 41px!important;
    }
}

/* 🔽 MOBILE */
  @media only screen and (max-device-width: 600px) {
    

    .password-group::before {
        font-size: 41px!important;
        top:35%!important;
    }

    .toggle-password {
        font-size: 41px!important;
    }

    .eye{
        right: 37px!important;
        top:35%!important;
    }

    
}