/* General styles for the form */

@font-face {
    font-family: 'IBMPlexSans';
    src: url('./fonts/IBMPlexSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Instruction text */
.instruction {
    font-size: 1; /* Slightly larger font for readability */
    margin-bottom: 2rem; /* Add spacing below the instruction */
    text-align: center; /* Center-align text */
    color: #333; /* Dark gray for readability */
    font-weight: bold; /* Make it bold */
}

/* Form container */
.download-form {
    width: 100%; /* Form takes 50% of the container's width */
    margin: 0 auto; /* Center form horizontally */
    display: flex;
    flex-direction: column; /* Arrange inputs vertically */
    gap: 2rem; /* Add vertical spacing between fields */
}

/* Labels */
label {
    font-size: 1.2rem; /* Adjust font size for labels */
    font-weight: bold; /* Make labels bold */
    margin-bottom: 0.5rem; /* Small space between label and input */
}

/* Inputs and Textarea */
input, textarea {
    font-size: 1rem; /* Font size for input text */
    padding: 0.8rem; /* Padding for a consistent design */
    border: none; /* Remove default border */
    border-bottom: 2px solid  #333; /* Dark gray for readability */; /* Add a clean bottom border */
    background-color: transparent; /* Transparent background */
    outline: none; /* Remove default outline */
    color: #333; /* Dark gray for readability */
    width: 100%; /* Full width of the form group */
    font-family: inherit; /* Keep font consistent */
}

/* Focus effects for inputs (removing blue effect) */
input:focus, textarea:focus {
    color: #333; /* Dark gray for readability *//* Maintain black bottom border on focus */
    box-shadow: none; /* Remove blue box shadow */
}

/* Button styling */
.submit-btn {
    font-size: 1rem; /* Adjust font size for the button */
    padding: 0.8rem 2rem; /* Add padding to the button */
    background-color:   #333; /* Dark gray for readability */
    color: #fff; /* White text */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor for interactivity */
    text-transform: uppercase; /* Make text uppercase */
    font-weight: bold; /* Bold text */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Add smooth transitions */
    display: block; /* Make it a block-level element */
    margin: 0 auto; /* Center align horizontally */
}

/* Hover effect for button */
.submit-btn:hover {
    background-color: #007BFF; /* Change to blue on hover */
    transform: scale(1.05); /* Slight scaling effect on hover */
}

/* Centering Form */
form {
    margin: auto;
    text-align: center; /* Align text to the left for form layout */
}

/* Adjustments for small screens */
@media (max-width: 600px) {
    .download-form {
        width: 90%; /* Make form more responsive */
    }

    .instruction {
        font-size: 1.2rem; /* Adjust instruction text size */
    }
}


/* Inputs and Textarea */
input, textarea {
    font-size: 1rem; /* Font size for input text */
    padding: 0.8rem; /* Padding for a consistent design */
    border: none; /* Remove default border */
    border-bottom: 2px solid #333; /* Dark gray for readability */
    background-color: transparent; /* Transparent background */
    outline: none; /* Remove default outline */
    color: #333; /* Dark gray for readability */
    width: 100%; /* Full width of the form group */
    font-family: inherit; /* Keep font consistent */
    resize: none;
}



/* Focus effects for inputs */
input:focus, textarea:focus {
    background-color: transparent; /* Prevent white background on focus */
    color: #333; /* Ensure text color remains consistent */
    box-shadow: none; /* Remove blue box shadow */
    border-bottom: 2px solid #007BFF; /* Optional: Change border color on focus */
}