.userProfile-div {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.shake {
animation: shake 0.3s; /* Adjust duration as needed */
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0);
}
}

.error {
color: #f1645a !important;
}
#error-popup {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Faded background */
justify-content: center;
align-items: center;
z-index: 1000; /* Ensure it's on top */
border-radius: 10px; 
}
#reload-button {
padding: 10px 20px;
font-size: 16px;
background-color: #10b981;
color: white;
border: none;
cursor: pointer;
}


/* Fixed Navbar Styles */
.navbar {
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: static;
width: 100%;
padding: 0;
margin: 0;
z-index: 1000;
}
.navbar-container {
max-width: 100%;
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
height: auto;
}
/* Brand/Logo */
.navbar-brand {
flex-shrink: 0;
}
.brand-link {
text-decoration: none;
color: inherit;
}
.brand-text {
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 700;
color: #2d3748;
letter-spacing: 0.5px;
margin: 0;
padding: 0;
}
/* Desktop Menu */
.navbar-menu {
display: flex;
align-items: center;
gap: 25px;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-item {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600; /* Increased from 500 for better visibility */
color: #3c3f43;
text-decoration: none;
padding: 5px 0;
transition: color 0.3s ease;
position: relative;
letter-spacing: 0.3px;
cursor: pointer;
}
.navbar-item:hover {
color: #747f93;
}
/* Fixed Mobile Toggle Button */
.navbar-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
position: relative;
z-index: 1002; /* Higher z-index than menu */
}
.hamburger-line {
width: 22px;
height: 2px;
background-color: #2d3748;
margin: 2px 0;
transition: all 0.3s ease;
border-radius: 1px;
}
/* Hamburger Animation - Only show when toggle is not active */
.navbar-toggle:not(.active) .hamburger-line:nth-child(1) {
transform: none;
background-color: #2d3748;
opacity: 1;
}
.navbar-toggle:not(.active) .hamburger-line:nth-child(2) {
opacity: 1;
background-color: #2d3748;
}
.navbar-toggle:not(.active) .hamburger-line:nth-child(3) {
transform: none;
background-color: #2d3748;
opacity: 1;
}
/* Hide hamburger lines when menu is active */
.navbar-toggle.active .hamburger-line {
opacity: 0;
transform: scale(0);
}
/* Mobile Styles */
@media (max-width: 768px) {
.navbar-container {
padding: 10px 15px;
position: relative;
}

.brand-text {
font-size: 24px;
}

.navbar-toggle {
display: flex;
}

/* Fixed Mobile Menu */
.navbar-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #ffffff;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
padding: 0;
transform: translateX(-100%);
transition: transform 0.3s ease;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
z-index: 1001;
list-style: none !important;
}

.navbar-menu.active {
transform: translateX(0);
}

/* Hide any step indicators or unwanted elements */
.navbar-menu .step,
.navbar-menu .step-progress-bar,
.navbar-menu .step-progress-container,
.navbar-menu span.step {
display: none !important;
}

.navbar-item {
font-size: 24px;
color: #2d3748;
font-weight: 600;
letter-spacing: 0.5px;
list-style: none !important;
padding: 15px 0;
text-align: center;
width: auto;
border: none;
}

.navbar-item:hover {
color: #3b82f6;
}

/* Fixed Close Button */
.navbar-menu.active::before {
content: '×';
position: fixed;
top: 20px;
right: 20px;
font-size: 40px;
font-weight: 300;
color: #4a5568;
cursor: pointer;
z-index: 1003;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(248, 250, 252, 0.9);
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}

.navbar-menu.active::before:hover {
background: #f1f5f9;
color: #2d3748;
transform: scale(1.1);
}
}
/* Ensure form step indicators don't interfere with navbar */
.navbar .step,
.navbar .step-progress-bar,
.navbar .step-progress-container,
.navbar li.step,
.navbar span.step {
display: none !important;
visibility: hidden !important;
}
/* Prevent form styles from affecting navbar */
.navbar * {
list-style: none !important;
}