.job-listings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; /* Space between grid items */
}

.job-listing {
    background-color: #fff; /* Card background color */
    border: 1px solid #e0e0e0; /* Border color */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.job-reference {
    font-size: 14px;
    color: #888; /* Light gray for reference text */
    margin-bottom: 10px; /* Space below reference */
}

.job-title {
    font-family: 'Domine', serif; /* Use Domine font */
    font-size: 20px; /* Font size for job title */
    margin-bottom: 10px; /* Space below title */
    font-weight: bold; /* Bold title */
	text-decoration: none !important;
}

.job-title:hover {
    text-decoration: underline !important;
	color: #435E2E !important;
}

.job-details {
    font-family: 'Roboto', sans-serif; /* Use Roboto font */
    font-size: 14px; /* Font size for details */
    color: #555; /* Dark gray for details */
}

.job-button {

	
	margin-top: 10px; /* Space above button */
	display: inline-block; /* Make it block for padding */
    background-color: #5D8642 !important; /* Dark green button */
    color: #FFFFFF !important; /* White text */
    padding: 10px 15px; /* Button padding */
    border: none; /* Remove border */
    border-radius: 4px; /* Slightly rounded corners */
    text-decoration: none !important; /* Remove underline */
    text-transform: uppercase !important; /* Uppercase text */
    font-family: 'Roboto', sans-serif !important; /* Use Roboto font */
    
    width: 100%; /* Full width for button */
    transition: background-color 0.3s !important; /* Smooth transition */
	text-align: center !important; /* Center the text */
}

.job-button:hover {
    background-color: #435E2E; /* Darker green on hover */
}



/*

JOB DETAIL PAGE

*/
.jb-job-detail {    
    background-color: transparent !important; /* Remove background color from the container */
}

.jb-hero-banner {
    background: linear-gradient(135deg, #f5f5f5 50%, #e6ffe6 100%);
    padding: 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.jb-hero-banner h1 {
    font-family: 'Domine', serif !important; /* Use Domine font */
    font-size: 28px !important; /* Increased font size for job title */
    color: #000000 !important; /* Black font color */
    margin: 0; /* Remove default margin */
	padding-bottom: 15px;
}

.jb-content-wrapper {
    display: flex; /* Use flexbox for two-column layout */
    margin-top: 20px; /* Space above the columns */
}

.jb-left-column {
    flex: 2; /* 2/3 of the space */
    padding: 20px; /* Padding for the description */
    background-color: transparent; /* No background color */
}

.jb-job-description {
    color: #000000 !important; /* Black text for the description */
}

.jb-right-column-container {
    flex: 1; /* 1/3 of the space */
    display: inline-block; /* Adjusts the height */
}

.jb-right-column {
    padding: 20px; /* Padding for the right column */
    background-color: #F9F9F9 !important; /* Light grey background for the info box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
}

.jb-job-basics {
    margin-bottom: 20px; /* Space below the basics */
	
	
}

.jb-pills {	
	display: inline-flex; /* Change to inline-flex for inline display */
	flex-wrap: wrap; /* Allows pills to move to the next line */	
}



.jb-info-pill {   
    background-color: #DBFFBE !important; /* Light green pill color */
    color: #000000 !important; /* Black text */
    padding: 8px 12px; /* Padding for pills */
    border-radius: 20px; /* Rounded edges */
    margin: 5px; /* Space between pills */
    font-family: 'Roboto', sans-serif !important; /* Use Roboto font */
	font-size: 16px;
    align-items: center; /* Center-align the icon and text vertically */
    margin: 5px; /* Adjust as needed for spacing between pills */
    white-space: nowrap; /* Prevent icon and text from breaking */
}

@media (max-width: 768px) { /* For tablets and mobile screens */
    .jb-info-pill {
        font-size: 14px; /* Smaller font size for mobile */
    }
}

@media (max-width: 480px) { /* For smaller mobile screens */
    .jb-info-pill {
        font-size: 10px; /* Even smaller font size for small devices */
    }
}

.jb-contact-info h4 {
    font-family: 'Domine', serif !important; /* Use Domine font for heading */
    color: #5D8642 !important; /* Dark green for the heading */
    margin: 0 0 10px 0; /* Margin for spacing */
}

.jb-contact-info {
    margin-top: 10px; /* Space above contact info */
}

.jb-contact-link {
    color: #000000 !important; /* Black color for links */
    text-decoration: none; /* Remove underline */
    margin-right: 10px; /* Space between links */
    font-family: 'Roboto', sans-serif !important; /* Use Roboto font for links */
    font-size: 14px !important; /* Slightly larger font size for contact links */
}

.jb-apply-button {
    margin-top: 20px; /* Space above the apply button */
}



.jb-apply-button {
    margin-top: 20px; /* Space above the apply button */
}

.jb-cta-button {
    display: inline-block; /* Make it block for padding */
    background-color: #5D8642 !important; /* Dark green button */
    color: #FFFFFF !important; /* White text */
    padding: 15px 20px; /* Button padding */
    border: none; /* Remove border */
    border-radius: 4px; /* Slightly rounded corners */
    text-decoration: none !important; /* Remove underline */
    text-transform: uppercase !important; /* Uppercase text */
    font-family: 'Roboto', sans-serif !important; /* Use Roboto font */
    font-size: 16px !important; /* Font size for buttons */
    width: 100%; /* Full width for button */
    transition: background-color 0.3s !important; /* Smooth transition */
	text-align: center !important; /* Center the text */
}

.jb-cta-button:hover {
    background-color: #435E2E !important; /* Darker green on hover */
}

.jb-bottom-button {
    margin-top: 20px; /* Space above bottom button */
    display: block; /* Make it block for full width */
}

/* Form styling */
.jb-apply-form {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.jb-apply-form label {
    display: block;
    margin-bottom: 5px;
    color: #000; /* All text in black */
	font-size: 14px;
	font-weight: bold;
}

.jb-apply-form input, .jb-apply-form textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #000; /* Black text */
}

.jb-apply-form button {
    background-color: #5D8642;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.jb-apply-form button:hover {
	color: white !important;
    background-color: #435E2E !important;
}

.jb-required {
    color: red;
    margin-left: 5px;
}

.jb-hint {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

/* Form error styling */
.jb-form-message {
    display: none;
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}


.jb-response-message {
    margin-bottom: 15px; /* Space below the message panel */
    padding: 10px;
    border-radius: 4px; /* Rounded corners */
}

.error-message {
    color: #FF0000 !important; /* Red text for errors */
    background-color: #FFE6E6; /* Light red background */
}

.success-message {
    color: #008000 !important; /* Green text for success */
    background-color: #E6FFE6; /* Light green background */
}