/* General page styling */
html, body {
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
    font-size: 15px;
    color: #444;
    background-color: #B8D8EB; /* Background color for the whole page */
    position: relative; /* Required for absolute positioning of the image */
}

/* Header container styling */
.header {
    margin-top: 30px; /* Adds overall top margin */
    position: relative; /* Required for absolute positioning of the logo */
}

/* Logo image styling */
.logo {
    position: absolute; /* Positions the image absolutely within the header */
    top: 0; /* Aligns logo to the top of the header */
    left: 20px; /* Adds left padding */
    width: 100px; /* Logo size for larger screens */
    height: auto; /* Maintains aspect ratio */
    z-index: 10; /* Ensures the image stays above other content */
}

/* Main title styling */
#main-title {
    color: #444;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
    font-size: 32px; /* Bigger heading size for larger screens */
    text-align: center; /* Centers the title */
    margin: 0; /* Removes default margin */
    padding-left: 140px; /* Adds space for the logo (120px + 20px extra) */
    line-height: 100px; /* Matches the height of the logo for vertical centering */
    height: 100px; /* Ensures the heading container matches the logo height */
    display: flex; /* Enables flexbox for vertical alignment */
    align-items: center; /* Vertically centers the heading */
}

/* Error message styling */
h2 {
    font-size: 1.2rem; /* Slightly larger font size for error messages */
    color: #d9534f; /* Red color for error messages */
    text-align: center; /* Centers the error message */
    margin-bottom: 20px; /* Adds space below the error message */
    display: none; /* Initially hidden, can be shown dynamically */
}

/* Base styles for all screen sizes */
.header {
    text-align: center; /* Center align the content */
    padding: 20px; /* Add some padding */
}

#main-title {
    margin-bottom: 20px; /* Add space below the main title */
    font-size: 2em; /* Larger font size for main title */
}

.separator {
    width: 100%; /* Set the width of the rule */
    margin: 20px auto; /* Center the rule and add space above and below */
    border: 0; /* Remove default border */
    height: 1.75px; /* Set the height of the rule */
    background-color: #b94a48; /* Set the color of the rule */
}

#form-title {
    margin-top: 20px; /* Add space above the form title */
    font-size: 1.4em; /* Adjust the font size */
    color: #333; /* Set the text color */
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .header {
        padding: 10px; /* Reduce padding on smaller screens */
    }

    #main-title {
        font-size: 1.4em; /* Smaller font size for main title */
        margin-bottom: 15px; /* Reduce space below the main title */
    }

    .separator {
        width: 100%; /* Increase width of the rule on smaller screens */
        margin: 15px auto; /* Adjust spacing */
    }

    #form-title {
        font-size: 1.2em; /* Smaller font size for form title */
        margin-top: 15px; /* Reduce space above the form title */
    }
}

/* Responsive styles for very small screens (e.g., mobile phones) */
@media (max-width: 480px) {
    #main-title {
        font-size: 1em; /* Even smaller font size for main title */
        margin-bottom: 20px; /* Further reduce space below the main title */
    }

    .separator {
        width: 100%; /* Increase width of the rule further */
        margin: 10px auto; /* Adjust spacing */
    }

    #form-title {
        font-size: 0.9em; /* Smaller font size for form title */
        margin-top: 10px; /* Further reduce space above the form title */
    }
}

/* Form container styling */
form {
    background-color: #ffffff; /* White background for the form */
    padding: 25px; /* Adds padding inside the form */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    max-width: 600px; /* Maximum width for larger screens */
    width: 80%; /* Takes 80% of the screen width on smaller screens */
    margin: 20px auto; /* Centers the form horizontally */
}

/* Question styling */
.question {
    margin-bottom: 20px; /* Adds space between questions */
}

.question h3 {
    font-size: 19px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px; /* Adds space below the question text */
}

/* Answer options styling */
.answer-options {
    margin-left: 20px; /* Indents answer options */
    margin-bottom: 10px; /* Adds space between options */
}

.answer-options label {
    font-size: 15px; /* Professional font size for options */
    color: #555; /* Medium gray color for options */
    display: inline-block; /* Ensures label appears next to input */
    vertical-align: middle; /* Aligns label vertically with input */
    margin-left: 10px; /* Adds space between input and label */
    max-width: calc(100% - 40px); /* Prevents label from overflowing */
}

.answer-options input[type="radio"] {
    border-color: #bfc3c8;
}

.answer-options input[type="text"],
.answer-options input[type="email"],
.answer-options input[type="number"],
.answer-options select,
.answer-options textarea {
    display: inline-block; /* Ensures input appears first */
    padding: 8px; /* Adds padding inside input fields */
    font-size: 15px; /* Professional font size for input text */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Rounded corners for input fields */
    width: auto; /* Allows input to take only necessary width */
    vertical-align: middle; /* Aligns input vertically with label */
}

/* Clear button styling */
.clear-button {
    color: #b94a48; /* Red color for the clear button */
    font-weight: bold;
    text-decoration: none; /* Removes underline */
    display: inline-block; /* Ensures proper spacing */
    margin-top: 10px; /* Adds space above the button */
}

.clear-button:hover {
    cursor: pointer; /* Changes cursor to pointer on hover */
    text-decoration: underline; /* Adds underline on hover */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .logo {
        left: 10px; /* Reduced left padding for smaller screens */
        width: 60px; /* Smaller logo size for smaller screens */
    }

    #main-title {
        font-size: 24px; /* Smaller heading size for smaller screens */
        padding-left: 80px; /* Adjusted padding for smaller logo */
        line-height: 60px; /* Matches the height of the smaller logo */
        height: 60px; /* Ensures the heading container matches the smaller logo height */
    }

    .answer-options {
        gap: 5px; /* Reduces space between input and label on smaller screens */
    }
}

/* Base button styles */
.submit-button {
    font-family: inherit; /* Use the same font family as the rest of the page */
    background-color: #007BFF; /* Background color (blue in this case) */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding for better spacing */
    border: none; /* Remove default border */
    border-radius: 25px; /* Rounded corners (adjust the value for more/less rounding) */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 1em; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect */
.submit-button:hover {
    background-color: #FBDB64; /* Darker shade of the background color */
}

/* Active (click) effect */
.submit-button:active {
    background-color: #FBDB64; /* Even darker shade for active state */
}

/* Focus effect (for accessibility) */
.submit-button:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(251, 219, 100, 0.8); /* Add a custom focus indicator */
}