.btn-google {
    border: 1px solid #000;
    border-radius: 15px;
}

.btn-google:hover {
    background-color: #000;
    color: #fff;
}

.btn-yellow {
    background: radial-gradient(81.83% 355.77% at 50% 50%, #F8C212 15.13%, #FF9E48 82.27%);
    border-radius: 15px;
    padding: 0.7rem 0;
    color: #fff;
    font-weight: 600;
}

.btn-yellow:hover {
    background: radial-gradient(81.83% 355.77% at 50% 50%, rgba(248, 194, 18, 0.6) 15.13%, rgba(255, 158, 72, 0.6) 82.27%);
    color: white;
    text-decoration: none;
}

.btn-yellow-2 {
    background: radial-gradient(81.83% 355.77% at 50% 50%, #F8C212 15.13%, #FF9E48 82.27%);
    border-radius: 15px;
    padding: 0.7rem 0;
    color: #15294E;
    font-weight: 700;
}

.btn-yellow-2:hover {
    background: radial-gradient(81.83% 355.77% at 50% 50%, rgba(248, 194, 18, 0.6) 15.13%, rgba(255, 158, 72, 0.6) 82.27%);
    color: #15294E;
    text-decoration: none;
}

.btn-login {
    background: radial-gradient(circle at center, #1e5ed5 0%, #152a4f 100%);
    border-radius: 15px;
    padding: 0.7rem 0;
    color: #fff;
    font-weight: 600;
}

.btn-reset-password {
    background: radial-gradient(circle at center, #1e5ed5 0%, #152a4f 100%);
    border-radius: 15px;
    padding: 0.7rem 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px 0 #0059FF80;
}

.btn-login:hover {
    background: radial-gradient(circle at center, #5780cd 0%, #5b729a 100%);
    color: white;
    text-decoration: none;
}

.btn-reset-password:hover {
    background: radial-gradient(circle at center, #5780cd 0%, #5b729a 100%);
    color: white;
    text-decoration: none;
}

a {
    color: #15294e;
    font-weight: 400;
    text-decoration: none;
}

.banner {
    background-image: url("/assets/img/login-background.webp");
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
}

.banner .banner-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    height: 100%;
    width: 100%;
}

.banner .banner-inner {
    z-index: 20;
    height: 80%;
    width: 80%;
    border-radius: 40px;
    padding: 3rem;
}

.banner .banner-inner .title {
    background: rgba(255, 255, 255, 0.1); /* semi-transparent background */
    border-radius: 16px;
    backdrop-filter: blur(12px); /* blur glass effect */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.2); /* frosty border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); /* subtle depth */
    padding: 20px;
    font-size: 2.3rem !important;
    color: white;
    border-radius: 20px;
    font-weight: 800;
}

.divider {
    width: 100%;
    text-align: center;
    color: #c7c3c3;
    border-bottom: 1px solid #c7c3c3;
    line-height: 0.1em;
    margin: 3rem 0 1rem 0;
}

.divider span {
    background: #fff;
    padding: 0 10px;
}