.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    font-weight: bold;
}

/* Add a green background color to navbar links on hover */
.nav a:hover, .dropdown:hover .dropbtn {
    background-color: rgb(0, 255, 34);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
        }

        body {
            background-color: #526b5c;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
        }

        .container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 64rem;
        }

        .logo-section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            width: 50%;
            padding: 2rem;
        }

        .logo {
    width: 100%;
    max-width: 20rem; /* Adjust this to scale */
    height: auto;
    margin-bottom: 1rem;
			
        }

        .title {
            color: white;
            font-size: 2.25rem;
            font-weight: bold;
        }

        .form-container {
            background-color: white;
            width: 50%;
            max-width: 32rem;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .form-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .input-field {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 0.375rem;
        }

        .submit-btn {
            width: 100%;
            background-color: #166534;
            color: white;
            padding: 0.5rem;
            border-radius: 0.375rem;
            font-weight: bold;
            border: none;
            cursor: pointer;
        }

        .submit-btn:hover {
            background-color: #526b5c;
        }

        .separator {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1rem 0;
        }

        .line {
            flex-grow: 1;
            border: none;
            border-top: 1px solid #ccc;
        }

        .or-text {
            margin: 0 0.5rem;
            color: gray;
        }

        .login-btn {
            width: 100%;
            border: 1px solid #ccc;
            padding: 0.5rem;
            border-radius: 0.375rem;
            font-weight: bold;
            cursor: pointer;
        }

        .login-btn:hover {
            background-color: #526b5c;
        }

        .terms-text {
            font-size: 0.75rem;
            color: gray;
            text-align: center;
            margin-top: 1rem;
        }

        .signup-text {
            text-align: center;
            margin-top: 1rem;
        }

        .gray-text {
            color: gray;
        }

        .signup-link {
            color: #166534;
            font-weight: bold;
            text-decoration: none;
        }

        .signup-link:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }

            .logo-section {
                align-items: center;
                width: 100%;
            }

            .form-container {
                width: 100%;
                max-width: 90%;
                text-align: center;
            }
        }