/* Container for Signup Form */
.form-container {
    max-width: 600px; /* Restrict maximum width for readability */
    margin: 40px auto; /* Center the content */
    padding: 25px; /* Padding around the container */
    border-radius: 16px; /* Soft rounding for smooth edges */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    background: rgba(47, 79, 47, 0.85); /* Semi-transparent dark green */
    transition: all 0.3s ease; /* Smooth transitions */
}

/* Heading Styles */
h1 {
    font-size: 1.5em; /* Font size for section headings */
    font-weight: bold; /* Bold font weight */
    text-align: center; /* Center the heading */
    color: #e6ffe6; /* Light green for contrast */
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    margin-bottom: 20px; /* Space below the heading */
}

/* Form Group Styles */
.form-group {
    margin-bottom: 20px; /* Space between form elements */
}

/* Input Fields */
input.form-control {
    width: 100%; /* Full width */
    padding: 10px; /* Padding for comfort */
    border-radius: 8px; /* Rounded corners */
    border: 1px solid #ddd; /* Light border */
    transition: border-color 0.3s ease; /* Smooth transitions */
}

input.form-control:focus {
    border-color: #3b6b3b; /* Darker green border on focus */
}

/* Error Message Styles */
.alert-danger {
    color: #ffffff; /* White text color */
    background: #e60000; /* Red background for danger alerts */
    padding: 10px; /* Padding around the alert */
    border-radius: 8px; /* Rounded corners */
    text-align: center; /* Center the text */
    margin-bottom: 20px; /* Space below the alert */
}

/* Button Styles */
button.btn-primary {
    background: linear-gradient(90deg, #3b6b3b, #1e401e); /* Matching gradient */
    color: #ffffff; /* White text color */
    padding: 10px 20px; /* Comfortable padding */
    border-radius: 8px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transitions */
    border: none; /* No border */
}

button.btn-primary:hover {
    transform: scale(1.1); /* Slight zoom on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow on hover */
}

/* Signup Button Styles */
a.btn-secondary {
    background: linear-gradient(90deg, #6b6b3b, #40401e); /* Gradient for secondary button */
    color: #ffffff; /* White text color */
    padding: 10px 20px; /* Comfortable padding */
    border-radius: 8px; /* Rounded corners */
    text-decoration: none; /* No underline */
    transition: all 0.3s ease; /* Smooth transitions */
}

a.btn-secondary:hover {
    transform: scale(1.1); /* Slight zoom on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow on hover */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .form-container {
        padding: 20px; /* Adjusted padding for smaller screens */
        border-radius: 10px; /* Smaller rounded corners */
    }

    h1 {
        font-size: 1.2em; /* Smaller font size for mobile */
        text-shadow: 1px 1px rgba(0, 0, 0, 0.3); /* Subtle shadow */
    }

    button.btn-primary {
        padding: 8px 16px; /* Smaller padding for smaller screens */
    }

    a.btn-secondary {
        padding: 8px 16px; /* Smaller padding for smaller screens */
    }
}