body{
    font-family: 'Inter', sans-serif;
    background-color: #f0f4f8;
}

/* Page transition animation */
.page {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* left side branding panel */
.branding-panel{
    background: linear-gradient(135deg, #4f46e5, #818cf8);
}

.branding-content{
    animation: slideInFromLeft 0.8s ease-out;
}

@keyframes slideInFromLeft{
    from{opacity: 0; transform: translateX(-30px);}
    to {opacity: 1; transform: translateX(0);}
}

/* Right side form panel */
.form-panel{
    background-color: #f0f4f8;
}

/* Custom card styling */
.auth-card{
    max-width: 450px;
    margin: 0 auto;
    border-radius: 1.5rem !important;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
} 

.auth-title{
    font-weight: 700;
    color: #1e293b;
}

/* Custom form control styling */
.form-control{
    padding: 0.8rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem !important;
    font-size: 1rem;
    background-color: #f8fafc;
    transition: all 0.2s;
}

.form-control:focus{
    background-color: white;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Custom input group styling */
.input-group-text{
    border-radius: 0.75rem 0 0 0.75rem !important;
    background-color: #e9ecef;
    border-right: none;
}

.input-group .form-control{
    border-radius: 0 0.75rem 0.75rem 0 !important;
}

/* Custom button styling  */
.auth-btn{
    padding: 0.8rem;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
    color:white;
    border:none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px -5px rgba(79, 70, 229, 0.6);
}

.auth-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 7px 20px -5px rgba(79, 70, 229, 0.5);
    color: white;
}

/* Switch link styling */
.auth-switch a{
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover{
    text-decoration: underline;
}


/* --- New Logo Styling --- */
.branding-logo {
    width: 150px; /* Set a specific width */
    height: 150px; /* Set a specific height */
    border-radius: 50%; /* Make it a circle */
    object-fit: cover; /* Ensure the image fills the circle */
    border: 4px solid #fff; /* Optional: Add a white border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}