/* Dark Navbar */
.navbar.navbar-expand-lg {
    background-color: #707eef;      /* Darker blue background */
    padding: 10px 20px;              /* Adjusted padding */
    margin: 0;
    width: 100vw;                    /* Full width of the viewport */
    box-sizing: border-box;
    border-radius: 0px;
    position: fixed;                 /* Make it fixed to the top */
    left: 0;
    top: 0;                          /* Dark navbar at the top */
    z-index: 1000;                   /* Ensure it's on top of other content */
    margin-bottom: 20px;
    transition: top 0.3s ease;       /* Smooth transition */
}

.navbar.hidden {
    top: -100px; /* Move the navbar off the screen */
}

.navbar.navbar-expand-lg .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;       /* Align menu to the right */
}

.navbar.navbar-expand-lg .nav-item .nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: 20px;
    margin-left: 10px;               /* Space between menu items */
    text-align: right;               /* Align the text inside the link to the right */
}

.navbar .nav-item .nav-link:hover {
    background-color: #5e68c1;
}

/* Light Navbar */
.navbar.navbar-light {
    background-color: #f2f5f9;       /* Light background */
    padding: 10px 10px;               /* Adjusted padding */
    margin: 0;
    width: 100vw;                     /* Full width of the viewport */
    box-sizing: border-box;
    border-radius: 0px;
    position: fixed;                  /* Fix it to the top */
    left: 0;
    top: 60px;                        /* Light navbar takes the place of dark navbar */
    z-index: 999;                     /* Behind the dark navbar initially */
    margin-bottom: 30px;
    transition: top 0.3s ease;        /* Smooth transition for moving up/down */
}

/* Ensure the light navbar is always above the dark navbar when scrolling up */
.navbar.show-light {
    top: 0;
}

.navbar.navbar-light .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;        /* Align menu to the right */
}

.navbar.navbar-light .nav-item .nav-link {
    color: black;
    text-decoration: none;
    font-weight: 400;
    font-size: 21px;
    margin-left: 15px;                /* Space between menu items */
    text-align: right; 
    white-space: nowrap;
}

/* Optional: Adjust the first item to have no left margin */
.navbar.navbar-light .nav-item:first-child .nav-link {
    margin-left: 200px; /* No margin on the first item */
}

.navbar .navbar-brand .text-black {
    color: #000000;
    font-size: 25px;
    text-decoration: none;
    font-weight: 400;
}

.navbar .nav-item .nav-link:hover {
    background-color: #d1d8e2;
}

.promotional-message a {
    color: white;
    text-decoration: none;
    margin-left: 5px;
}

/* Common Button Styles */
.btn-auth {
    font-size: 16px;          
    padding: 10px 20px;       
    border-radius: 5px;       
    font-weight: 600;         
    text-transform: uppercase;
    text-align: center;       
    display: inline-flex;     
    align-items: center;      
    justify-content: center;  
    white-space: nowrap;  /* Prevents text from breaking into two lines */
    min-width: 140px;  /* Ensures both buttons have the same width */
    height: 40px;
}

/* GET STARTED BUTTON */
.btn-get-started {
    background-color: #707eef;
    color: #fff;
    border: 2px solid #707eef;
    white-space: nowrap;  /* Ensures text stays on the same line */
    margin-left: 20px;  /* Add space between Login and Get Started */
}

.btn-get-started:hover {
    background-color: #5c6adc;
    border-color: #5c6adc;
}

/* LOGIN BUTTON */
.btn-login {
    background-color: rgb(244, 246, 249);
    color: #000;
    border: 2px solid #ccc;  /* Add border to Login button */
    border-radius: 5px;  /* Match border radius with other buttons */
}

.btn-login:hover {
    background-color: #e0e3e7;
    border-color: #bbb;  /* Darken the border on hover */
}

/* For Mobile and Small Screens (adjusting button sizes if necessary) */
@media (max-width: 767px) {
    .btn-auth {
        font-size: 14px;   /* Slightly smaller text on mobile */
        padding: 8px 16px;  /* Adjust padding for mobile view */
    }
}

/* If you want the navbar to be responsive, adjust for small screens */
@media (max-width: 768px) {
    .navbar.navbar-expand-lg,
    .navbar.navbar-light {
        padding: 10px 20px;           /* Reduced padding for smaller screens */
        margin-top: 0;                /* Reset margin for navbar-expand-lg */
    }

    .navbar.navbar-light {
        top: 40px !important;          /* Ensure it's below the dark navbar by default */
        margin-top: 0 !important;      /* Reset top margin */
    }
}