/* General Body Styles */
body {
    font-family: 'Poppins', sans-serif; /* Changed to Poppins */
    background: linear-gradient(135deg, white, #1e3c72); /* White-dominant gradient */
    color: #1e3c72; /* Dark blue for text */
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
}

/* Container for Form */
.container {
    max-width: 800px; /* Increased max width */
    margin: 50px auto; /* Centered with margin */
    padding: 40px; /* More padding */
    background: rgba(255, 255, 255, 0.95); /* Light background with slight opacity */
    backdrop-filter: blur(10px); /* Subtle blur effect */
    border-radius: 20px; /* More rounded corners */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); /* Softer shadow */
    text-align: center; /* Center content */
    animation: fadeIn 1s forwards; /* Fade-in animation */
}

/* Fade In Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Header Styles */
h1 {
    color: #0277bd; /* Blue header */
    font-size: 2.8em; /* Larger header */
    margin-bottom: 20px; /* Space below the heading */
    padding-top: 20px; /* Space above the heading */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* Logo Styles */
.logo {
    max-width: 220px; /* Adjust the maximum width */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Center the logo */
    margin: 20px auto; /* Center horizontally with margin */
    padding: 10px; /* Add some padding around the logo */
    transition: transform 0.3s; /* Smooth transition */
}

.logo:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Form Styles */
form {
    padding: 30px 0;
    text-align: left; /* Align form text to the left */
}

/* Label Styles */
label {
    font-size: 1.2em; /* Font size for labels */
    color: #1e3c72; /* Dark blue for labels */
    font-weight: 600; /* Bold labels */
    display: block; /* Block display for labels */
    line-height: 1.5; /* Line height */
    margin-bottom: 12px; /* Increased margin below labels */
}

/* Input and Select Styles */
input[type="text"],
select {
    width: 100%; /* Full width */
    padding: 12px; /* Increased padding */
    margin-bottom: 20px; /* Margin below input */
    border: 1px solid rgba(30, 60, 114, 0.4); /* Blue border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); /* Inner shadow */
    transition: border-color 0.3s; /* Smooth transition for border */
}

/* Dropdown Menu Styles */
select {
    background-color: white; /* White background for dropdown */
    appearance: none; /* Remove default arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%231e3c72" viewBox="0 0 10 10"><polygon points="0,0 5,6 10,0"/></svg>'); /* Custom dropdown arrow */
    background-repeat: no-repeat; /* No repeat for the background image */
    background-position: right 10px center; /* Position the arrow */
    background-size: 10px; /* Size of the arrow */
}

/* Input Focus Styles */
input[type="text"]:focus,
select:focus {
    border-color: #00bcd4; /* Change border color on focus */
    outline: none; /* Remove outline */
}

/* Button Container Styles */
.button-container {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the buttons horizontally */
    gap: 20px; /* Space between buttons */
    margin-top: 20px; /* Space above the button container */
}

/* Button Styles */
.option-button {
    padding: 12px 20px; /* Padding for buttons */
    font-size: 1em; /* Font size */
    background-color: #0277bd; /* Blue background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Button Hover Effect */
.option-button:hover {
    background-color: #00bcd4; /* Lighter blue on hover */
    transform: translateY(-2px); /* Move up on hover */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Thank You Message Styles */
.thank-you {
    font-size: 1.5em; /* Larger font */
    color: #00bcd4; /* Light blue */
    margin-top: 20px; /* Margin for spacing */
}

/* Footer Styles */
footer {
    text-align: center; /* Centered text */
    margin: 20px 0; /* Margin */
    color: #1e3c72; /* Dark blue for footer */
    font-size: 1em; /* Font size */
    padding: 10px; /* Padding for spacing */
    border-top: 1px solid rgba(30, 60, 114, 0.2); /* Top border for separation */
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
    .container {
        padding: 20px; /* Reduce padding on smaller screens */
    }

    h1 {
        font-size: 2.2em; /* Smaller header on mobile */
    }

    .option-button {
        padding: 10px 15px; /* Adjust padding on smaller screens */
        font-size: 0.9em; /* Smaller font size */
    }

    label {
        font-size: 1em; /* Smaller label font */
    }

    input[type="text"],
    select {
        padding: 10px; /* Smaller input padding */
    }
}