/* =============== Page Header Section =============== */

.page-header {
    background: url("img/banner/submit-resume.jpg") no-repeat center center;
    background-size: contain; /* Ensure the full image is visible */
    height: 500px; /* Fixed height for banner */
    max-height: 100vh; /* Limits height to viewport size */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; /* White text color for contrast */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Shadow for banner */
    padding: 20px; /* Add padding for better alignment */
    margin-top: 100px; /* Add more margin to create space below the menu bar */
    margin-bottom: 40px; /* Add margin to create space above the resume container */
}



/* Allow flexibility for custom height adjustments */
.page-header.adjustable {
    height: auto; /* Allows flexibility for custom height adjustments */
}



/* Allow custom adjustments for image height, width, padding, and alignment */
.page-header.custom {
    height: 400px; /* Default height */
    width: 100%; /* Default width */
    padding-top: 20px; /* Default padding top */
    padding-bottom: 20px; /* Default padding bottom */
    padding-left: 0; /* Default padding left */
    padding-right: 0; /* Default padding right */
    background-position: center center; /* Default background position */
    margin-top: 100px; /* Default margin top for space below the menu bar */
    margin-bottom: 40px; /* Default margin bottom for space above the resume container */
}









/* Page Header Heading */
.page-header h2 {
    font-size: 40px; /* Defines the font size of the page header's heading */
    font-weight: bold; /* Makes the heading text bold for emphasis */
    margin: 0; /* Removes all default margin around the heading to maintain consistency */
}

/* Breadcrumb Styling */
.page-header .thm-breadcrumb {
    margin-top: 20px; /* Creates space above the breadcrumb for better separation from the header */
    list-style: none; /* Removes default list styling, such as bullet points */
    padding: 0; /* Removes default padding to prevent extra spacing around the breadcrumb */
}

.page-header .thm-breadcrumb li {
    display: inline; /* Places breadcrumb items in a horizontal line rather than stacking them vertically */
    color: #fff; /* Sets the text color to white for better contrast against dark backgrounds */
}

.page-header .thm-breadcrumb li a {
    color: #fff; /* Ensures breadcrumb links are white for visual consistency with the text */
    text-decoration: none; /* Removes the default underline from the links for a cleaner look */
}

.page-header .thm-breadcrumb li+li:before {
    content: ">"; /* Inserts a ">" symbol between each breadcrumb item as a separator */
    margin: 0 10px; /* Adds horizontal spacing on either side of the separator for visual clarity */
}








/* =============== Main Content Styling =============== */


main {
    padding-top: 100px; /* Space for fixed header */
}



/* =============== Resume Form Styling =============== */






/* =============== Post Job Resume Styling =============== */
.post-job-resume {
    border: 6px solid black; /* Adds a thick black border around the resume section */
    padding: 20px; /* Provides internal space inside the container */
    margin: 20px auto; /* Centers the container and adds vertical space */
    max-width: 800px; /* Limits the maximum width to ensure readability */
    background-color: #1a50c4; /* Sets a blue background for the resume section */
    color: #ffffff; /* Sets the text color to white for high contrast */
    border-radius: 10px; /* Rounds the corners for a smoother look */
}

.post-job-resume .form-group {
    margin-bottom: 20px; /* Adds spacing below each form group for separation */
}

.post-job-resume label {
    display: block; /* Displays labels as block elements to take full width */
    font-weight: bold; /* Makes the label text bold for emphasis */
    margin-bottom: 5px; /* Adds spacing below the label for separation from the input */
}

.post-job-resume input,
.post-job-resume select,
.post-job-resume textarea {
    width: 100%; /* Sets the inputs to take the full width of the container */
    padding: 10px; /* Adds padding inside inputs for comfortable interaction */
    border: 1px solid #ccc; /* Provides a light gray border for definition */
    border-radius: 5px; /* Rounds input corners slightly for a softer appearance */
    font-size: 16px; /* Sets a readable font size for form inputs */
    background-color: #f0f0f0; /* Applies an off-white background to input fields */
    color: #333; /* Sets the text color to dark gray for readability */
}

.post-job-resume input:focus,
.post-job-resume select:focus,
.post-job-resume textarea:focus {
    outline: none; /* Removes the default outline when focusing on form elements */
    border-color: #135fc3; /* Changes border color on focus for a clear visual indicator */
}






/* =============== Upload Button Styling =============== */
/* Style for "Upload" button to match the "Submit Resume" button */
.post-job-resume .upload-file-btn {
    display: inline-block; /* Displays the button inline while maintaining block properties */
    padding: 10px 20px; /* Adds padding for a comfortable click area */
    background-color: #ffffff; /* Sets a white background for the button */
    color: #2220ad; /* Applies dark blue text color to match branding */
    border-radius: 5px; /* Rounds the corners of the button */
    cursor: pointer; /* Changes the cursor to indicate it's clickable */
    font-size: 16px; /* Sets a readable font size */
    font-weight: bold; /* Makes the button text bold for emphasis */
    text-transform: uppercase; /* Converts text to uppercase for consistency */
    border: none; /* Removes the default border for a cleaner look */
}

.post-job-resume .upload-file-btn:hover {
    background-color: #f0f0f0; /* Changes to an off-white background on hover for a subtle effect */
}






/* =============== Submit Resume Button Styling =============== */
/* Style for "Submit Resume" button in the form */
.post-job-resume .btn-blue {
    display: inline-block; /* Displays the button inline while maintaining block properties */
    padding: 10px 20px; /* Adds padding for a comfortable click area */
    background-color: #ffffff; /* Sets a white background for the button */
    color: #2220ad; /* Applies dark blue text color to match branding */
    border-radius: 5px; /* Rounds the corners of the button */
    cursor: pointer; /* Changes the cursor to indicate it's clickable */
    font-size: 16px; /* Sets a readable font size */
    font-weight: bold; /* Makes the button text bold for emphasis */
    text-transform: uppercase; /* Converts text to uppercase for consistency */
    border: none; /* Removes the default border for a cleaner look */
}

.post-job-resume .btn-blue:hover {
    background-color: #f0f0f0; /* Changes to an off-white background on hover for a subtle effect */
}







/* =============== Footer Styling =============== */
footer {
    background-color: #e2e2e2; /* Applies a light gray background for the footer */
    color: #1f1f1f; /* Sets text color to dark gray for readability */
    padding: 20px 0; /* Adds vertical padding for comfortable spacing */
    text-align: center; /* Centers the text within the footer for balance */
}

footer a {
    color: #1f1f1f; /* Sets link color to match the footer text color */
    text-decoration: none; /* Removes the underline for a clean link appearance */
}

footer a:hover {
    text-decoration: underline; /* Adds underline on hover to indicate interactivity */
}








/* =============== Custom Properties =============== */


:root {
    --text-color: #ffffff; /* Default text color: white */
    --input-bg-color: #f0f0f0; /* Off-white background for inputs */
    --input-text-color: #333; /* Dark text color for inputs */
    --focus-border-color: #135fc3; /* Border color on focus */
    --account-question-margin-left: 0; /* Default margin-left for account-question */
    --account-question-font-size: 14px; /* Default font size for account-question */
    --account-question-font-weight: normal; /* Default font weight for account-question */
    --banner-bg-color: #1a50c4; /* Default blue background for banner */
    --banner-text-color: #ffffff; /* Default white text color for banner */
    --button-bg-color: #ffffff; /* Default button background */
    --button-text-color: #2220ad; /* Default button text color */
    --button-hover-bg-color: #f0f0f0; /* Default button hover background */
}


/* Align the text with the resume container */
.account-question {
    text-align: left; /* Align text to the left */
    margin-bottom: 20px;
    margin-left: var(--account-question-margin-left); /* Use custom property */
    font-size: var(--account-question-font-size); /* Use custom property */
    font-weight: var(--account-question-font-weight); /* Use custom property */
    word-wrap: break-word; /* Ensure text is word-wrapped */
}



/* Change the background color of the resume container to blue */


.post-job-resume {
    background-color: #1a50c4; /* Blue background */
    color: #ffffff; /* White text color */
    border: none; /* Remove border */
    font-family: 'Arial', sans-serif; /* Elegant font */
    padding: 20px; /* Add padding for better alignment */
}



/* Set input fields and text areas to off-white */

.post-job-resume input,
.post-job-resume select,
.post-job-resume textarea {
    background-color: var(--input-bg-color); /* Use custom property for background color */
    color: var(--input-text-color); /* Use custom property for text color */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    font-family: 'Arial', sans-serif; /* Elegant font */
}



.post-job-resume input:focus,
.post-job-resume select:focus,
.post-job-resume textarea:focus {
    outline: none;
    border-color: var(--focus-border-color); /* Use custom property for focus border color */
}


/* Set labels and other text to use the text color */


.post-job-resume label,
.post-job-resume button,
.post-job-resume span,
.post-job-resume p {
    color: var(--text-color); /* Use custom property for text color */
    font-family: 'Arial', sans-serif; /* Elegant font */
}






/* Banner styling */

.pre-footer-banner {
    --banner-bg-color: #1a50c4; /* Default blue background */
    --banner-text-color: #ffffff; /* Default white text color */
    --button-bg-color: #ffffff; /* Default button background */
    --button-text-color: #2220ad; /* Default button text color */
    --button-hover-bg-color: #f0f0f0; /* Default button hover background */

    background-color: var(--banner-bg-color); /* Use custom property for background color */
    color: var(--banner-text-color); /* Use custom property for text color */
    text-align: center; /* Center the text */
    padding: 20px; /* Add padding for better alignment */
    margin-top: 20px; /* Add margin to separate from resume container */
}



.pre-footer-banner h3,
.pre-footer-banner p {
    margin: 10px 0; /* Add margin for spacing */
    color: var(--banner-text-color); /* Use custom property for text color */
}



/* Style for "Submit Resume" button in the banner */
.pre-footer-banner button {
    background-color: var(--button-bg-color); /* Use custom property for button background */
    color: var(--button-text-color); /* Use custom property for button text color */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
}