section.custom-login-signup {width: 100%;background-image: url('../images/green-shape.png');background-size: contain;background-repeat: no-repeat;background-position: right top, right bottom;animation: moveBg 2s ease-in-out infinite alternate;padding: 80px 0px;padding-bottom: 0px;}
.login-form{position: relative;width: 100%;padding: 40px;overflow: hidden;z-index: 1;}
/* Top Bubble */
.login-form::before{content: "";position: absolute;width: 220px;height: 220px;background: rgba(0, 255, 157, 0.15);border-radius: 50%;top: -100px;left: -80px;z-index: -1;}
/* Bottom Bubble */
.login-form::after{content: "";position: absolute;width: 180px;height: 180px;background: rgba(0, 255, 157, 0.1);border-radius: 50%;bottom: -80px;right: -60px;z-index: -1;}
.login-form::before{animation: float1 6s ease-in-out infinite;}
.login-form::after{animation: float2 8s ease-in-out infinite;}
@keyframes float1{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(20px);
    }
}

@keyframes float2{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-20px);
    }
}

.login-form{background: rgba(255,255,255,0.75);backdrop-filter: blur(15px);-webkit-backdrop-filter: blur(15px);border: 1px solid rgba(255,255,255,0.3);border-radius: 20px;box-shadow: 0 20px 45px rgba(0,0,0,0.1);}
.logo-login {margin: 20px 0px;}
.login-form h1{font-size:30px;font-weight:700;color:var(--bs-text-color-black);margin-bottom:10px;}
.login-form a {text-decoration: none;}
.subtitle{color:var(--bs-text-color-black);font-size:14px;line-height:29px;margin-bottom:30px;}
.login-form .input-group{margin-bottom:14px;}
.login-form .input-group input {padding: 12px 45px;width: 100%;background: #f4f2f3;border: 1px solid #d7d7d7;border-radius: 10px!important;font-size: 14px;color: #4e4e4e;outline: none;transition: all 0.3s ease;font-weight: 400;}
.password-group{position:relative;}
.password-group i{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#9098a7;cursor:pointer;}
.login-form .btn {width: 100%;background: var(--bs-theme-color);  color: #fff;border: none;padding: 12px;text-transform: uppercase;font-weight: 600;border-radius: 10px;}
.divider{display:flex;align-items:center;gap:14px;margin:20px 0;}
.login-form .btn:focus {
    box-shadow: none;
}
.divider span{flex:1;height:1px;background:#d8dce2;}
.divider p{font-size:13px;color:var(--bs-text-color-black);white-space:nowrap;margin-bottom: 0px;}
.login-form .social-buttons{display:flex;gap:12px;margin-bottom:25px;}
.login-form .social-btn{flex:1;height:50px;border:1px solid #cfd6df;background:#fff;border-radius:6px;display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer;color:#666;font-size:15px;}
.login-form .social-btn img{width:20px;height:20px;}
.login-form .social-btn i{font-size:20px;}
.login-form .forgot{display:block;color:var(--bs-theme-color);font-weight:500;text-decoration:none;margin-bottom:10px;font-size: 14px;margin-top: 10px;}
.login-form .signup{color:var(--bs-text-color-black);font-size:15px;}
.login-form .signup a{text-decoration:none;color:var(--bs-text-color-black);font-weight:600;}
.login-form .input-group{position: relative;margin-bottom: 20px;}
.login-form .input-group .bx{position: absolute;top: 50%;transform: translateY(-50%);left: 15px;font-size: 20px;color: #8b95a7;z-index: 9;}
.login-form .password-group .eye-icon{left: auto;right: 15px;cursor: pointer;}
.login-form .signup a {color:var(--bs-theme-color);}
.login-form .input-group input:focus {background: #ffffff;border: 1px solid var(--bs-theme-color); box-shadow: none;}
.login-animation {animation: float 3s ease-in-out infinite;}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}




section.custom-login-signup.registerbg {width: 100%;background-image: url('../images/green-shape-register.png');background-size: contain;background-repeat: no-repeat;background-position: right top, right bottom;animation: moveBg 2s ease-in-out infinite alternate;padding: 80px 0px;padding-bottom: 0px;}

@media (min-width: 1025px) and (max-width: 1364px) {
.login-animation img {width: 100%;}
.login-form.register-login {width: 100%;margin-bottom: 80px;padding: 30px;}
.login-form { width: 100%;margin-bottom: 40px;padding: 30px;}
section.custom-login-signup {padding: 40px 0px;}
.login-form h1 {font-size: 24px;}
section.custom-login-signup.registerbg {padding: 40px 0px;}
section.custom-login-signup.registerbg .login-form.register-login {margin-bottom: 40px;}

}


@media (min-width: 768px) and (max-width: 1024px) {
.login-animation img {width: 100%;}
.login-form.register-login {width: 100%;margin-bottom: 80px;padding: 30px;}
.login-form { width: 100%;margin-bottom: 40px;padding: 30px;}
section.custom-login-signup {padding: 40px 0px;}
.login-form h1 {font-size: 24px;}
section.custom-login-signup.registerbg {padding: 40px 0px;}
section.custom-login-signup.registerbg .login-form.register-login {margin-bottom: 40px;}

}
@media (max-width: 767px) {
.login-form.register-login {width: 100%;margin-bottom: 80px;padding: 30px;}
.login-animation img {width: 100%;display: none;}
.login-form { width: 100%;margin-bottom: 40px;padding: 30px;}
section.custom-login-signup {padding: 40px 0px;}
.login-form h1 {font-size: 18px;}

}