/*==================================================
KN WORKFORCE LOGIN CSS
PART 1
==================================================*/

/*==============================
GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
ROOT VARIABLES
==============================*/

:root{

--primary:#2563EB;
--primary-dark:#1D4ED8;

--secondary:#10B981;
--secondary-dark:#059669;

--white:#ffffff;
--light:#F8FAFC;
--border:#E2E8F0;

--heading:#0F172A;
--text:#64748B;

--shadow-sm:0 8px 20px rgba(15,23,42,.05);
--shadow-md:0 18px 40px rgba(15,23,42,.08);
--shadow-lg:0 35px 80px rgba(15,23,42,.12);

--radius:24px;

}

/*==============================
RESET
==============================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

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

}

html{

scroll-behavior:smooth;

}

body{

margin:0;

padding:0;

height:100vh;

overflow:hidden;

background:#EEF4FF;

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

}

/*==============================
BACKGROUND
==============================*/

.background{

position:fixed;

inset:0;

overflow:hidden;

z-index:-1;

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.25;

animation:blobFloat 10s ease-in-out infinite;

}

.blob1{

width:520px;
height:520px;

background:#60A5FA;

left:-180px;
top:-180px;

}

.blob2{

width:600px;
height:600px;

background:#34D399;

right:-220px;
bottom:-220px;

animation-delay:2s;

}

.blob3{

width:280px;
height:280px;

background:#A78BFA;

top:45%;

left:48%;

animation-delay:4s;

}

@keyframes blobFloat{

0%{

transform:translateY(0) scale(1);

}

50%{

transform:translateY(-25px) scale(1.05);

}

100%{

transform:translateY(0) scale(1);

}

}

/*==============================
CONTAINER
==============================*/

.login-container{

width:100%;

height:100vh;

display:grid;

grid-template-columns:45% 55%;

background:#fff;

overflow:hidden;

}
/*==============================
LEFT PANEL
==============================*/

.left-panel{

position:sticky;

top:0;

height:100vh;

padding:50px 55px;

background: linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);;

display:flex;

flex-direction:column;

justify-content:space-between;

align-items:flex-start;

overflow:hidden;

position:relative;

color:#fff;

}

.left-panel::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:rgba(255,255,255,.08);

top:-180px;

right:-180px;

}

.left-panel::after{

content:"";

position:absolute;

width:300px;

height:300px;

border-radius:50%;

background:rgba(255,255,255,.06);

bottom:-120px;

left:-120px;

}




/*==============================
BRAND
==============================*/

.brand{

display:flex;

align-items:center;

gap:18px;

margin-bottom:50px;

z-index:2;

}

.brand img{

width:72px;

height:72px;

object-fit:contain;

background:#fff;

padding:10px;

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.brand h2{

font-size:30px;

font-weight:800;

margin-bottom:5px;

}

.brand p{

font-size:14px;

opacity:.9;

}

/*==============================
HERO
==============================*/

.hero{

position:relative;

z-index:2;

}

.badge{

display:inline-flex;

align-items:center;

padding:10px 20px;

background:rgba(255,255,255,.15);

backdrop-filter:blur(20px);

border-radius:50px;

font-size:13px;

font-weight:700;

margin-bottom:28px;

}

.hero h1{

font-size:52px;

line-height:1.2;

font-weight:800;

margin-bottom:10px;

}

.hero p{

font-size:18px;

line-height:1.9;

margin-top:20px;

max-width:500px;

opacity:.92;

}

/*==============================
STATS
==============================*/

.stats{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

width:100%;

margin:25px 0;

}
.stat{

background:rgba(255,255,255,.10);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.18);

padding:20px;

min-height:100px;

border-radius:22px;

transition:.35s;

}

.stat:hover{

transform:translateY(-6px);

background:rgba(255,255,255,.18);

}

.stat h2{

font-size:30px;

margin-bottom:6px;

}

.stat span{

font-size:13px;

}

/*==============================
DASHBOARD IMAGE
==============================*/

.dashboard-image{

margin-top:45px;

position:relative;

z-index:2;

}

.dashboard-image img{

width:100%;

border-radius:24px;

box-shadow:0 25px 60px rgba(0,0,0,.25);

transition:.4s;

}

.dashboard-image img:hover{

transform:translateY(-8px);

}

/*==============================
RIGHT PANEL
==============================*/

.right-panel{

height:100vh;

overflow-y:auto;

overflow-x:hidden;

display:flex;

justify-content:center;

align-items:flex-start;

padding:70px;

background:#F8FAFC;

position:relative;

}
.right-panel::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);

opacity:.05;

right:-220px;

top:-220px;

}

.right-panel::after{

content:"";

position:absolute;

width:300px;

height:300px;

border-radius:50%;

background:linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);;

opacity:.05;

left:-120px;

bottom:-120px;

}
.right-panel::-webkit-scrollbar{

width:8px;

}

.right-panel::-webkit-scrollbar-thumb{

background:linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);

border-radius:20px;

}

.right-panel::-webkit-scrollbar-thumb:hover{

background:#2563EB;

}

.right-panel::-webkit-scrollbar-track{

background:transparent;

}


/*==================================
TOP BAR
==================================*/

.login-wrapper-box{

display:grid;

grid-template-columns:1fr auto 1fr;

align-items:center;

width:100%;

margin-bottom:35px;

}

/*==================================
CENTER LOGO
==================================*/

.login-logo{

justify-self:center;

}

.login-logo img{

width:180px;

height:auto;

display:block;

}
/*==================================
COMPACT THEME SWITCH
==================================*/

.theme-switch{

display:flex;

align-items:center;

gap:3px;

padding:3px;

margin-right:10px;

background:#ffffff;

border:1px solid #E2E8F0;

border-radius:10px;

box-shadow:0 6px 18px rgba(15,23,42,.06);

}

/*==================================*/

.theme-option{

display:flex;

align-items:center;

justify-content:center;

gap:5px;

height:34px;

padding:0 12px;

border:none;

border-radius:8px;

background:transparent;

cursor:pointer;

font-size:12px;

font-weight:600;

color:#64748B;

transition:.3s;

min-width:72px;

}

/*==================================*/

.theme-option i{

font-size:13px;

}

/*==================================*/

.theme-option:hover{

background:#F1F5F9;

color:#2563EB;

}

/*==================================*/

.theme-option.active{

background:linear-gradient(
135deg,
rgb(110,198,255),
rgb(79,195,247),
rgb(126,232,163)
);

color:#fff;

box-shadow:0 4px 12px rgba(79,195,247,.22);

}

/*==================================*/

.theme-option.active i{

animation:rotateIcon .4s ease;

}

@keyframes rotateIcon{

from{

transform:rotate(-180deg);

}

to{

transform:rotate(0deg);

}

}
/*==========================================
LOGIN CARD
==========================================*/

.login-card{

width:100%;

max-width:560px;

background:#fff;

border-radius:28px;

padding:45px;

margin:auto 0;

box-shadow:

0 20px 60px rgba(0,0,0,.08);

border:1px solid #E5E7EB;

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:
0 35px 90px rgba(37,99,235,.18);

}

/* Gradient Border */

.login-card::before{

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:5px;

background:linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);;

background-size:300%;

animation:borderMove 5s linear infinite;

border-radius:30px 30px 0 0;

}

@keyframes borderMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}

/*==========================================
TOP BAR
==========================================*/

.login-top{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}

#themeToggle{

position:relative;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#3B82F6);

color:#fff;

cursor:pointer;

font-size:20px;

display:flex;

align-items:center;

justify-content:center;

transition:all .35s ease;

box-shadow:
0 0 0 rgba(37,99,235,.5),
0 0 20px rgba(37,99,235,.45),
0 0 40px rgba(37,99,235,.25);

overflow:hidden;

}

/* Animated Glow */

#themeToggle::before{

content:"";

position:absolute;

inset:-4px;

border-radius:50%;

background:linear-gradient(
45deg,
#60A5FA,
#2563EB,
#10B981,
#2563EB,
#60A5FA
);

background-size:300%;

z-index:-1;

filter:blur(12px);

opacity:.85;

animation:glowRotate 4s linear infinite;

}

/* Shine Effect */

#themeToggle::after{

content:"";

position:absolute;

top:-60%;

left:-60%;

width:220%;

height:220%;

background:linear-gradient(

120deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:rotate(25deg);

transition:.6s;

}

#themeToggle:hover{

transform:translateY(-3px) scale(1.08);

box-shadow:

0 0 25px rgba(37,99,235,.8),

0 0 50px rgba(37,99,235,.5),

0 0 80px rgba(37,99,235,.35);

}

#themeToggle:hover::after{

left:120%;

}

#themeToggle:active{

transform:scale(.95);

}

@keyframes glowRotate{

0%{

background-position:0%;

}

100%{

background-position:300%;

}
}

.login-top select{

height:46px;

padding:0 18px;

border-radius:12px;

border:1px solid #E2E8F0;

background:#fff;

font-size:14px;

cursor:pointer;

}

/*==========================================
WELCOME BOX
==========================================*/

.welcome-box{

display:flex;

align-items:center;

gap:18px;

background:#F8FAFC;

padding:20px;

border-radius:20px;

margin-bottom:30px;

border:1px solid #E2E8F0;

}

.emoji{

width:58px;

height:58px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

background:#FFF7ED;

}

.welcome-box h3{

font-size:22px;

font-weight:700;

margin-bottom:4px;

color:black;

}

.welcome-box p{

font-size:14px;

color:#64748B;

}

/*==========================================
HEADINGS
==========================================*/

.login-card h2{

font-size:34px;

font-weight:800;

color:#0F172A;

margin-bottom:10px;

}

.subtitle{

font-size:15px;

line-height:1.8;

color:#64748B;

margin-bottom:35px;

}

/*==========================================
ALERT
==========================================*/

.alert{

display:flex;

align-items:center;

gap:12px;

padding:16px;

border-radius:16px;

background:#FEF2F2;

border:1px solid #FECACA;

color:#DC2626;

margin-bottom:25px;

font-weight:600;

}

/*==========================================
FORM
==========================================*/

.form-group{

margin-bottom:22px;

}

.form-group label{

display:block;

margin-bottom:8px;

font-size:14px;

font-weight:600;

color:#334155;

}

/*==========================================
INPUT
==========================================*/

.input-box{

position:relative;

}

.input-box i:first-child{

position:absolute;

left:20px;

top:50%;

transform:translateY(-50%);

color:#94A3B8;

font-size:18px;

transition:.3s;

}

.input-box input{

width:100%;

height:62px;

padding:0 55px 0 60px;

font-size:15px;

font-weight:500;

color:#0F172A;

background:#fff;

border:2px solid #E5E7EB;

border-radius:18px;

transition:all .35s ease;

}

/* Hover */

.input-box input:hover{

border-color:transparent;

background:

linear-gradient(#fff,#fff) padding-box,

linear-gradient(
135deg,
rgb(110,198,255) 0%,
rgb(79,195,247) 40%,
rgb(126,232,163) 100%
) border-box;

box-shadow:

0 10px 25px rgba(79,195,247,.18);

}

/* Focus */

.input-box input:focus{

outline:none;

border:2px solid transparent;

background:

linear-gradient(#fff,#fff) padding-box,

linear-gradient(
135deg,
rgb(110,198,255) 0%,
rgb(79,195,247) 40%,
rgb(126,232,163) 100%
) border-box;

box-shadow:

0 0 0 6px rgba(79,195,247,.12),

0 15px 35px rgba(79,195,247,.18);

}

.input-box:hover i,

.input-box input:focus~i,

.input-box input:focus+i{

color:#4FC3F7;

transform:translateY(-50%) scale(1.08);

}

/*==========================================
PASSWORD TOGGLE
==========================================*/

#togglePassword{

position:absolute;

right:20px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:18px;

color:#64748B;

transition:.3s;

}

#togglePassword:hover{

color:#2563EB;

}

/*==========================================
LOGIN OPTIONS
==========================================*/

.login-options{

display:flex;

justify-content:space-between;

align-items:center;

margin:25px 0;

font-size:14px;

}

.login-options a{

color:#1fa7e8;

text-decoration:none;

font-weight:600;

}

.login-options a:hover{

text-decoration:underline;

}

.remember{

display:flex;

align-items:center;

gap:10px;

cursor:pointer;

}

.remember input{

accent-color:#1fa7e8;

width:17px;

height:17px;

}

/*==========================================
LOGIN BUTTON
==========================================*/

.login-btn{

width:100%;

height:62px;

border:none;

border-radius:18px;

background:
linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.35s;

box-shadow:
0 18px 40px rgba(37,99,235,.25);

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:
0 25px 55px rgba(37,99,235,.35);

}

.login-btn i{

margin-right:10px;

}

/*==========================================
DIVIDER
==========================================*/

.divider{

display:flex;

align-items:center;

margin:28px 0;

}

.divider::before,
.divider::after{

content:"";

flex:1;

height:1px;

background:#E2E8F0;

}

.divider span{

padding:0 18px;

font-size:13px;

font-weight:600;

color:#94A3B8;

}

/*==========================================
SOCIAL LOGIN
==========================================*/

.social-login{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-bottom:20px;

}

.social-btn{

height:58px;

border:2px solid #E2E8F0;

background:#fff;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

cursor:pointer;

font-weight:600;

transition:.35s;

}

.social-btn:hover{

border-color:#2563EB;

background:#F8FBFF;

}

.social-btn img{

width:22px;

}

.social-btn i{

font-size:22px;

color:#2563EB;

}

.login-btn,
.register-btn,
.contact-btn,
.social-btn,
.theme-option{

position:relative;

overflow:hidden;

isolation:isolate;

}
.login-btn::before,
.register-btn::before,
.contact-btn::before,
.social-btn::before,
.theme-option::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

110deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

transition:none;

z-index:2;

pointer-events:none;

}
.login-btn:hover::before,
.register-btn:hover::before,
.contact-btn:hover::before,
.social-btn:hover::before,
.theme-option:hover::before{

animation:shine .9s ease;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:180%;

}

}
.login-btn:hover,
.register-btn:hover,
.contact-btn:hover,
.social-btn:hover{

transform:translateY(-4px);

box-shadow:

0 18px 45px rgba(79,195,247,.30);

}
.login-btn,
.register-btn{

background-size:200% 200%;

animation:gradientMove 6s linear infinite;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}
}
.login-btn:hover,
.register-btn:hover{

box-shadow:

0 0 18px rgba(110,198,255,.35),

0 0 35px rgba(79,195,247,.30),

0 18px 45px rgba(79,195,247,.28);

}

/*==========================================
ACTION BUTTONS
==========================================*/

.register-btn,
.contact-btn{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

height:58px;

border-radius:18px;

font-weight:700;

text-decoration:none;

margin-top:15px;

transition:.35s;

}

.register-btn{

background:linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);;

color:#fff;

}

.register-btn:hover{

background:linear-gradient(135deg, rgb(110, 198, 255) 0%, rgb(79, 195, 247) 40%, rgb(126, 232, 163) 100%);

transform:translateY(-3px);

}

.contact-btn{

background:#fff;

border:2px solid #E2E8F0;

color:#334155;

}

.contact-btn:hover{

border-color:#1fa7e8;

color:#1fa7e8;

background:#F8FBFF;

}
/*==========================================
TRUST BOX
==========================================*/

.trust-box{

margin-top:28px;

padding:18px 22px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

background:#EFF6FF;

border:1px solid #BFDBFE;

border-radius:18px;

font-size:14px;

font-weight:600;

color:#1E3A8A;

}

.trust-box strong{

color:#1fa7e8;

}

.trust-box i{

font-size:22px;

color:#1fa7e8;

}

/*==========================================
SECURITY GRID
==========================================*/

.security-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:15px;

margin-top:30px;

}

.security-item{

background:#fff;

border:1px solid #E5E7EB;

border-radius:18px;

padding:20px;

text-align:center;

transition:.35s;

box-shadow:0 8px 20px rgba(15,23,42,.04);

}

.security-item:hover{

transform:translateY(-6px);

border-color:#1fa7e8;

box-shadow:0 18px 40px rgba(37,99,235,.12);

}

.security-item i{

display:block;

font-size:26px;

margin-bottom:12px;

color:#1fa7e8;

}

.security-item span{

display:block;

font-size:13px;

font-weight:600;

color:#475569;

}

/*==========================================
FOOTER
==========================================*/

.login-footer{

margin-top:35px;

padding-top:25px;

border-top:1px solid #E2E8F0;

text-align:center;

}

.login-footer p{

font-size:15px;

font-weight:700;

color:#0F172A;

margin-bottom:6px;

}

.login-footer span{

font-size:13px;

color:#64748B;

}


/*==================================*/

.theme-option.active{

background:linear-gradient(135deg,#2563EB,#10B981);

color:#fff;

box-shadow:

0 10px 30px rgba(37,99,235,.35);

}

/*==================================
DARK MODE
==================================*/

body.dark-mode .theme-switch{

background:#1E293B;

border-color:#334155;

}

body.dark-mode .theme-option{

color:#CBD5E1;

}

body.dark-mode .theme-option:hover{

background:#334155;

color:#fff;

}

body.dark-mode .theme-option.active{

background:linear-gradient(135deg,#2563EB,#10B981);

color:#fff;

}
/*==================================
DARK MODE INPUT
==================================*/

body.dark .input-box input,
body.dark-mode .input-box input{

background:#0F172A !important;

color:#FFFFFF !important;

border:2px solid #334155 !important;

caret-color:#4FC3F7;

}

body.dark .input-box input::placeholder,
body.dark-mode .input-box input::placeholder{

color:#94A3B8 !important;

opacity:1;

}

body.dark .input-box input:hover,
body.dark-mode .input-box input:hover{

border:2px solid transparent !important;

background:
linear-gradient(#0F172A,#0F172A) padding-box,
linear-gradient(
135deg,
rgb(110,198,255),
rgb(79,195,247),
rgb(126,232,163)
) border-box;

color:#FFFFFF !important;

}

body.dark .input-box input:focus,
body.dark-mode .input-box input:focus{

border:2px solid transparent !important;

background:
linear-gradient(#0F172A,#0F172A) padding-box,
linear-gradient(
135deg,
rgb(110,198,255),
rgb(79,195,247),
rgb(126,232,163)
) border-box;

color:#FFFFFF !important;

box-shadow:
0 0 0 6px rgba(79,195,247,.15),
0 12px 35px rgba(79,195,247,.18);

}
/*==========================================
LOADER
==========================================*/

#loginLoader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(255,255,255,.96);

display:none;

align-items:center;

justify-content:center;

z-index:99999;

backdrop-filter:blur(6px);

}

.loader-box{

width:360px;

background:#fff;

padding:45px;

border-radius:25px;

text-align:center;

box-shadow:0 25px 70px rgba(0,0,0,.12);

}

.loader-spinner{

width:70px;

height:70px;

margin:auto;

border-radius:50%;

border:6px solid #E2E8F0;

border-top:6px solid #2563EB;

animation:spin 1s linear infinite;

margin-bottom:25px;

}

.loader-box h3{

font-size:24px;

font-weight:700;

margin-bottom:10px;

}

.loader-box p{

color:#64748B;

line-height:1.8;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*==========================================
SCROLLBAR
==========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#2563EB;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#EEF4FF;

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:1300px){

.login-container{

grid-template-columns:42% 58%;

}

.hero h1{

font-size:48px;

}

}

@media(max-width:1100px){

.login-container{

grid-template-columns:1fr;

}

.left-panel{

display:none;

}

.right-panel{

padding:35px;

}

.login-card{

max-width:600px;

}

}

@media(max-width:768px){

body{

padding:20px;

}

.login-card{

padding:30px;

border-radius:24px;

}

.login-card h2{

font-size:28px;

}

.subtitle{

font-size:14px;

}

.social-login{

grid-template-columns:1fr;

}

.security-grid{

grid-template-columns:1fr;

}

.login-options{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

}

@media(max-width:480px){

body{

padding:12px;

}

.right-panel{

padding:15px;

}

.login-card{

padding:22px;

}

.login-card h2{

font-size:24px;

}

.welcome-box{

padding:16px;

}

.emoji{

width:48px;

height:48px;

font-size:24px;

}

.input-box input{

height:56px;

padding-left:52px;

font-size:14px;

}

.login-btn,

.register-btn,

.contact-btn,

.social-btn{

height:54px;

font-size:15px;

}

}

/*==========================================
DARK MODE
==========================================*/

body.dark{

background:#0F172A;

}

body.dark .right-panel{

background:#111827;

}

body.dark .login-card{

background:#1E293B;

border-color:#334155;

}

body.dark .login-card h2,

body.dark .login-card p,

body.dark .login-card label,

body.dark .login-footer p,

body.dark .login-footer span{

color:#F8FAFC;

}

body.dark input{

background:#0F172A;

border-color:#334155;

color:#fff;

}

body.dark input::placeholder{

color:#94A3B8;

}

body.dark .welcome-box{

background:#0F172A;

border-color:#334155;

}

body.dark .welcome-box h3{

color: #ffffff;

}

body.dark .security-item{

background:#0F172A;

border-color:#334155;

}

body.dark .social-btn{

background:#0F172A;

border-color:#334155;

color:#fff;

}

body.dark .contact-btn{

background:#0F172A;

border-color:#334155;

color:#fff;

}

body.dark .trust-box{

background:#0F172A;

border-color:#334155;

color:#fff;

}

body.dark .loader-box{

background:#1E293B;

color:#fff;

}

/*==========================================
ANIMATIONS
==========================================*/

.login-card{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.stat{

animation:fadeUp .8s ease;

}

.brand{

animation:fadeUp .8s ease;

}

.hero{

animation:fadeUp 1s ease;

}

.dashboard-image{

animation:floatDashboard 8s ease-in-out infinite;

}

@keyframes floatDashboard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}
@media(max-width:992px){

.login-container{

grid-template-columns:1fr;

}

.left-panel{

display:none;

}

.right-panel{

height:100vh;

padding:30px 20px;

}

.login-card{

max-width:100%;

padding:30px;

}

}

/*==========================================
TEXT SELECTION
==========================================*/

::selection{

background:#2563EB;

color:#fff;

}

/*==========================================
END
==========================================*/