:root {

    /* Exact Color Swatch Matches From Provided Logo Image */

    --primary-color: #00aeef;      /* Vibrant Sky Blue from text */

    --primary-dark: #005a9c;       /* Cap and gown deep navy */

    --primary-hover: #0099d4;     /* Slightly deeper blue for hover actions */

    --bg-gradient: linear-gradient(135deg, #0d1b2a 0%, #005a9c 50%, #00aeef 100%);

    --text-color: #1f2937;

    --text-light: #6b7280;

    --border-color: #e5e7eb;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

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

}



body {

    background: var(--bg-gradient);

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

}



.login-container {

    background: rgba(255, 255, 255, 0.98);

    padding: 40px;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    width: 100%;

    max-width: 420px;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.brand-header {

    text-align: center;

    margin-bottom: 30px;

}



/* Center and scale the branding logo neatly */

.logo-wrapper {

    width: 200px;

    height: 100px;

    margin: 0 auto 15px auto;

    border-radius: 50%;

    background: #fff;

    padding: 5px;

    box-shadow: 0 4px 15px rgba(0, 174, 239, 0.2);

    display: flex;

    justify-content: center;

    align-items: center;

}



.brand-logo {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 20%;

}



.brand-header h1 {

    font-size: 30px;

    color: var(--primary-dark);

    font-weight: 800;

    letter-spacing: 0.5px;

}



.brand-header h1 span {

    color: var(--primary-color);

}



.brand-header p {

    color: var(--text-light);

    font-size: 13px;

    margin-top: 5px;

    font-weight: 500;

}



.input-group {

    position: relative;

    margin-bottom: 20px;

}



/* Position icon on left edge dynamically */

/* User and Lock icons only */

.input-group > .fa-user,

.input-group > .fa-lock {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-light);

    transition: color 0.3s ease;

    pointer-events: none;

}

.input-group input {

    width: 100%;

    padding: 15px 40px 15px 48px;

    border: 1.5px solid var(--border-color);

    border-radius: 10px;

    font-size: 14px;

    outline: none;

    transition: all 0.3s ease;

    background-color: #f9fafb;

    color: var(--text-color);

}



/* Dynamic color transitions when active */

.input-group input:focus {

    border-color: var(--primary-color);

    background-color: #fff;

    box-shadow: 0 0 0 4px rgba(0, 174, 239, 0.15);

}



/* Highlight the active label icon when field has system focus */

.input-group input:focus ~ i {

    color: var(--primary-color);

}



/* Password toggle eye icon styling */

/* .input-group .toggle-password {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-light);

    cursor: pointer;

    padding: 5px;

    transition: color 0.2s ease;

    pointer-events: auto;

}



.input-group .toggle-password:hover {

    color: var(--primary-color);

} */



.input-group .toggle-password {

    position: absolute;

    right: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--text-light);

    cursor: pointer;

    padding: 5px;

    transition: color 0.2s ease;

}



.input-group .toggle-password:hover {

    color: var(--primary-color);

}



.form-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

    font-size: 13px;

}



.remember-me {

    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--text-light);

    cursor: pointer;

    user-select: none;

}



.remember-me input {

    accent-color: var(--primary-color);

    cursor: pointer;

}



.forgot-pass {

    color: var(--primary-dark);

    text-decoration: none;

    font-weight: 600;

    transition: color 0.2s ease;

}



.forgot-pass:hover {

    color: var(--primary-color);

    /* text-decoration: underline; */

}



.btn-login {

    width: 100%;

    padding: 15px;

    background-color: var(--primary-color);

    color: white;

    border: none;

    border-radius: 10px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 5px 15px rgba(0, 174, 239, 0.3);

}



.btn-login:hover {

    background-color: var(--primary-hover);

    box-shadow: 0 7px 20px rgba(0, 174, 239, 0.4);

}



.btn-login:active {

    transform: scale(0.98);

}



/* Divider Elements styling */

.divider {

    display: flex;

    align-items: center;

    text-align: center;

    margin: 25px 0;

    color: var(--text-light);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1.2px;

    font-weight: 600;

}



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

    content: '';

    flex: 1;

    border-bottom: 1.5px solid var(--border-color);

}



.divider:not(:empty)::before { margin-right: 1em; }

.divider:not(:empty)::after { margin-left: 1em; }



/* OAuth Layout Design */

.oauth-container {

    display: flex;

    margin-bottom: 25px;

}



.btn-oauth {

    width: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px;

    border: 1.5px solid var(--border-color);

    border-radius: 10px;

    background-color: rgb(66, 133, 244);;

    color:whitesmoke;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

}



.btn-oauth:hover {

    background-color: #f9fafb;

    border-color: #cbd5e1;

    transform: translateY(-1px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

}



.btn-oauth i {

    font-size: 18px;

}



/* Footer elements */

.signup-footer {

    text-align: center;

    font-size: 14px;

    color: var(--text-light);

}



.signup-footer a {

    color: var(--primary-dark);

    text-decoration: none;

    font-weight: 700;

    transition: color 0.2s ease;

    

}



.signup-footer a:hover {

    color: var(--primary-color);

    /* text-decoration: underline; */

}



.oauth-container {

    display: flex;

    margin-bottom: 25px;

}



.btn-google-brand {

    width: 100%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 15px; /* Matches your login button height */

    border: none;

    border-radius: 10px;

    background-color: #00aeef; /* Your exact CETGuru primary blue */

    color: #ffffff; /* White text for great contrast */

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 5px 15px rgba(0, 174, 239, 0.25);

}



/* Hover and active click states matching your login button */

.btn-google-brand:hover {

    background-color: #0099d4; /* Darker blue hover tone */

    box-shadow: 0 7px 20px rgba(0, 174, 239, 0.35);

    transform: translateY(-1px);

}



.btn-google-brand:active {

    transform: scale(0.98); /* Tactile press down animation */

}



/* Forces the Google icon to be clean white */

.btn-google-brand i {

    font-size: 18px;

    color: #ffffff; 

}





.form-actions {

    display: flex;

    justify-content: flex-end; /* Pushes the remaining link to the right side */

    margin-bottom: 20px;       /* Adds some space above the login button */

}