/* Button Container (Ensure full width and no overflow) */
.btn-container {
    display: flex;
    justify-content: flex-start; /* Align buttons to the left */
    gap: 10px; /* Adjust the gap between buttons */
    align-items: center;
    width: 100%;  /* Ensure the container takes up full width */
    max-width: 100%;  /* Prevent overflow */
    margin-left: 0; /* Avoid conflict with left margin */
    flex-wrap: wrap; /* Allow wrapping if the container is too small */
}

/* Base Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    font-weight: 600;
    border-radius: var(--btn-border-radius);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--btn-hover-transition), transform var(--btn-hover-transition);
    border: none;
    min-width: 120px;
    height: 50px;
    margin-left: 0;  /* Ensure buttons align correctly */
    margin-top: 10px; /* Add top margin here (adjust value as needed) */
}

/* Specific Button Styling for .btn-get-started */
.header-user-menu a.btn-get-started,
.btn-get-started {
    background-color: #003366;
    color: #fff;
    border: 2px solid #003366;
    padding: 10px 20px;  /* Resize padding */
    font-size: 16px; /* Adjust font size */
    min-width: 140px;  /* Adjust min-width */
    max-width: 180px;  /* Set max width */
    margin-left: 120px;
}

.header-user-menu a.btn-login,
.btn-login {
    background-color: rgb(244, 246, 249);
    color: #000;
    border: 2px solid #ccc;
    padding: 10px 20px;  /* Resize padding */
    font-size: 16px; /* Adjust font size */
    min-width: 140px;  /* Adjust min-width */
    max-width: 180px;  /* Set max width */
}

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

.btn-login:hover {
    background-color: #e0e3e7;
    border-color: #bbb;
}

/* Responsive Design for Mobile */
@media (max-width: 767px) {
    .btn {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Ensure buttons still look good on mobile */
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-get-started,
    .btn-login,
    .btn-gradient {
        width: 100%;
        min-width: auto;
    }

    /* Keep buttons on the same row */
    .btn-container {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }
}