.register-container {
        background-color: #2e3b4e;
        padding: 1.25rem; /* 20px */
        border-radius: 0.5rem; /* 8px */
        box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* 2px 10px */
        width: 90%;
        max-width: 25rem; /* 400px */
        margin: auto; /* Center the container */
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center items horizontally */
    }
    .section {
        width: 100%; /* Full width for sections */
        margin-bottom: 1rem; /* Space between sections */
    }
    .input-group {
        margin-bottom: 0.9375rem; /* 15px */
        display: flex; /* Use flexbox for input groups */
        flex-wrap: wrap; /* Allow wrapping of inputs */
        justify-content: space-between; /* Space between inputs */
    }
    .input-half {
        flex-basis: 45%; /* Set width to 45% for half-width inputs */
    }
    .input-half:last-child {
        margin-right: 0.5rem; /* Remove margin for the last input */
    }
    .login-input {
    border: 1px solid #ccc; /* Corrected border style */
    background: #2e3b4e; /* Set background color to #2e3b4e */
    color: #cfe5ff; /* Light text color */
    outline: none;
    font-size: 1rem; /* 16px */
    padding: 0.5rem; /* Padding for better appearance */
    padding-left: 0.75em; /* Adjust left padding to create space for the caret */
    height: 1.5em; /* Set a height for the input field */
    flex-grow: 1; /* Allow the input field to grow */
    min-width: 6.25rem; /* Minimum width to prevent collapsing (100px) */
    width: calc(100% - 0.75em); /* Adjust width to account for padding */
    }
    .register-button {
        width: 90%; /* Set width to 90% */
        margin-right: 1rem;
        margin-left: 1rem;/* Center the button */
        margin-top: 0.625rem; /* Space above the button */
    }
    .back-link {
        margin-top: 1rem; /* Space above the back link */
        width: 100%; /* Full width for the back link */
        display: flex; /* Use flexbox to center the link */
        justify-content: center; /* Center the link */
    }
    .button.inverted {
        background-color: #cfe5ff;
        color: #2e3b4e;
        border: none;
        padding: 0.625rem 0.9375rem; /* 10px 15px */
        border-radius: 0.25rem; /* 4px */
        cursor: pointer;
        transition: background-color 0.3s; /* Smooth transition */
        text-align: center; /* Center text in buttons */
        display: inline-block; /* Ensure buttons are inline-block */
        text-decoration: none; /* Remove underline from anchor tags */
        font-size: 1rem; /* Match font size with other buttons */
    }
    .button.inverted:hover {
        background-color: #2e3b4e;
        color: #cfe5ff; /* Optional: hover effect for inverted button */
    }
    .button.inverted.half-width {
        width: auto; /* Allow the button to take its natural width */
        margin: 0 0.5rem; /* Add some margin between buttons */
    }
    .accent-button {
        background-color: #ff8c00; /* Set the background color to orange */
        color: #ffffff; /* Set text color to white for contrast */
        border: none;
        padding: 0.625rem 0.9375rem; /* 10px 15px */
        border-radius: 0.25rem; /* 4px */
        cursor: pointer;
        transition: background-color 0.3s; /* Smooth transition */
        text-align: center; /* Center text in buttons */
        display: inline-block; /* Ensure buttons are inline-block */
        text-decoration: none; /* Remove underline from anchor tags */
        font-size: 1rem; /* Match font size with other buttons */
    }
    .pricing-button:hover {
        background-color: #e07b00; /* Darker shade for hover effect */
    }
    select.login-input {
        border: 1px solid #ccc; /* Same border style as inputs */
        background: transparent; /* Transparent background */
        color: #cfe5ff; /* Light text color */
        outline: none;
        font-size: 1rem; /* 16px */
        padding: 0.5rem; /* Padding for better appearance */
        height: 2.5em; /* Set a height for the dropdown */
        flex-grow: 1; /* Allow the dropdown to grow */
        min-width: 6.25rem; /* Minimum width to prevent collapsing (100px) */
        width: calc(100% - 0.75em); /* Adjust width to account for padding */
        appearance: none; /* Remove default dropdown arrow */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,5" fill="%23cfe5ff"/></svg>'); /* Custom dropdown arrow */
        background-repeat: no-repeat;
        background-position: right 0.5em center; /* Position the arrow */
        background-size: 0.5em; /* Size of the arrow */
    }