/* Website */

body {
    font-family: 'messinasans', sans-serif;
}

#login-button {
    text-align: right;
    margin-top: 15px;
    margin-right: 10px;
}


/* Header */

/* Right-align the login button and add margin for spacing */


/* Remove link styling for the login button */
#login-button a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    color: rgb(0, 19, 166);
    font-weight: bold;
}

/* Add margin to the left of the "Student Gig Finder" title */
h1 {
    color: rgb(0, 19, 166);
}

/* Center the "Student Gig Finder" title and navigation bar */
h1, nav {
    flex: 1;
    text-align: center;
}

/* Horizontal navigation bar styling */
nav ul {
    list-style: none; /* Remove list bullets */
    padding: 0; /* Remove default padding */
}

nav ul li {
    display: inline; /* Display list items horizontally */
    margin: 0 20px; /* Add spacing between list items */
}

/* Remove link styling for clickable elements */
h1 a, nav a {
    text-decoration: none; /* Remove underlines */
    color: inherit; /* Use the default text color */
    cursor: pointer; /* Change the cursor to a pointer on hover to indicate interactivity */
}

/* Make the nav bar labels bold */
nav a {
    font-weight: bold;
    color: rgb(0, 19, 166);
    transition: color 0.3s; /* Add transition for color change */
}

/* Change the color of the nav bar labels on hover */
nav a:hover {
    color: rgb(220, 20, 60);
}

/* Home Page */

.home-page-paragraphs {
    max-width: 900px; /* Adjust the maximum width as needed */
    margin: 0 auto; /* This will center the div horizontally */
    text-align: center; /* Optional: Center the text within the div */
    font-size: 18px;
}

.home-page-paragraphs a {
    text-decoration: none;
    color:rgb(0, 19, 166);
    font-weight: bold;
}


/* Apply for a Gig */

.apply-for-gig-page h2 {
    text-align: center; /* Center the heading */
}

.apply-for-gig-page form {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc; /* Add a border around the form */
    border-radius: 5px; /* Add rounded corners to the border */
    font-size: 12px;
}

.apply-for-gig-page form *:not(#country_code) {
    text-align: left; /* Left-align all form elements except for the Country Code input */
}



.apply-for-gig-page input[type="text"],
.apply-for-gig-page input[type="email"],
.apply-for-gig-page input[type="tel"],
.apply-for-gig-page textarea,
.apply-for-gig-page select {
    width: 95%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 12px;
}


.apply-for-gig-page input[type="file"]{
    margin-top: 10px;
    margin-bottom: 10px;
}

.apply-for-gig-page input#current_school {
    margin-bottom: 10px;
}

.schedule-button a {
    text-decoration: none;
    color: black;
}

.schedule-button {
    margin-bottom: 10px;
}

.apply-for-gig-page input[type="checkbox"] {
    margin-bottom: 10px; /* Add a bottom margin of 10px to the checkbox */
}

/* CSS for the error message */
.apply-for-gig-page #error-message {
    margin-top: 10px;
    color: red;
    display: none;
}

/* Apply the style to the "Submit Application" button */
.apply-for-gig-page .submit-application-button {
    display: inline-block;
    background-color: rgb(0, 19, 166);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.apply-for-gig-page .submit-application-button:hover {
    background-color: rgb(220, 20, 60);
}

/* Style the "Schedule Interview" button similar to "Learn More" and "Apply Now" buttons */
button.schedule-button {
    display: inline-block;
    background-color: rgb(0, 19, 166);
    color: #fff; /* Set the text color to white */
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 6px;
}

/* Change the background color on hover for "Schedule Interview" button */
button.schedule-button:hover {
    background-color: rgb(220, 20, 60);
}

button.schedule-button a {
    color: #fff; /* Set the text color to white */
}


.back-to-find-work {
    text-align: center; /* Center the link */
    text-decoration: none; /* Remove underline */
    color: rgb(0, 19, 166); /* Set link color to blue */
    display: block; /* Make it a block element to center it */
    margin-top: 20px; /* Adjust the top margin for spacing */
    margin-bottom: 50px;
}
  


/* Blog */

/* Center the contents of the blog container */
.blog-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Center the "Latest Blogs" header */
.blog-header {
    text-align: center;
    margin-top: 20px; /* Adjust the margin as needed */
    color:rgb(220, 20, 60);
}

.blog-schedule {
    text-align: center;
    /* Add other specific styling if needed */
  }
  
  

.blog-preview {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    width: 65%;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}


/* Style the images inside the blog preview */
.blog-preview img {
    max-width: 160px; /* Ensure images fit within the box */
    height: auto; /* Maintain the aspect ratio of the images */
    float: right;
}

/* Style the blog info (title, author, date) inside the blog preview */
.blog-page-blog-info {
    margin-top: 50px; /* Add space between the image and the info */
    text-align: left; /* Left-align the text within the blog-info */
    color: rgb(0, 19, 166);
}

/* Style the blog title */
.blog-page-blog-info h2 {
    font-size: 1.2em; /* Customize the font size */
    margin: 0; /* Remove default margin */
}

/* Style the author and publication date */
.blog-page-blog-info p {
    margin: 0; /* Remove default margin */
    font-size: 0.9em; /* Customize the font size */
}

.announcement {
    padding-left: 20%;
    padding-right: 20%;
    font-size: 15px;
    text-align: center;
}


/* Blog 1 */

/* Blog 2 */

/* Target the <main> element with the "main-page" class */
.blog-2 {
    background-color: #ffffff; /* Example background color */
    padding: 20px; 
    margin-left: 30px;
    margin-right: 30px;
}

.blog-2-title {
    text-align: left;
    padding: 20px;
    margin-bottom: -20px;
    margin-left: 30px;
    margin-right: 30px;
}

.return-to-latest-blogs-link {
    color: rgb(0, 19, 166); /* Change the color to your desired color */
    text-decoration: none;
}

.blog-2-header .blog-info {
    margin-top: -30px;
    padding: 20px;
    margin-bottom: -30px;
    margin-left: 30px;
    margin-right: 30px;
    color: #999;
}


/* Blog 3 */
/* Blog 4 */
/* Blog 5 */
/* Blog 6 */

/* Contact Us */

.appreciation-sentence {
    text-align: center;
}

.contact-info {
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
}

.email-animation {
    display: block;
    margin: 0 auto;
}

.appreciation-sentence {
    font-weight: bold;
    color: rgb(220, 20, 60);
}


.contact-link {
    text-decoration: none;
    color:rgb(0, 19, 166)
}
/* Find Work */

.find-your-next-gig {
    text-align: center;
}

.find-gig-heading {
    color:rgb(220, 20, 60); /* Replace with your desired color code */
}  

.gig {
    border: 1px solid #ccc; /* You can adjust the border properties as needed */
    padding: 10px; /* Add padding to create space between the content and the border */
    margin: 10px; /* Add margin to separate individual "gig" elements */
    border-radius: 5px;
    width: 75%;
    margin: 0 auto; /* Center the gig-box horizontally on the screen */
    margin-bottom: 15px;
}

/* Center the "Learn More" and "Apply Now" buttons */
.gig-box button.toggle-details,
.gig-box button.apply-button {
    display: inline-block;
    background-color: rgb(0, 19, 166);
    color: #fff;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 6px;
}

/* Change the background color on hover for "Learn More" button */
.gig-box button.toggle-details:hover {
    background-color: rgb(220, 20, 60);
}

/* Change the background color on hover for "Apply Now" button */
.gig-box button.apply-button:hover {
    background-color: rgb(220, 20, 60);
}

/* Hire Talent */

/* Center the "Post a Gig" heading */
.hire-talent-page .content h2 {
    text-align: center;
}

/* Left-align the labels and form fields */
.hire-talent-page form label {
    display: block;
    margin-top: 10px;
}

/* Set a maximum width for the form */
.hire-talent-page form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 50px;
}

.post-gig-heading {
    color:rgb(220, 20, 60); /* Replace with your desired color code */
}

/* Apply custom width only to the "Pay Rate" field */
.hire-talent-page .pay-fields {
    width: 230px;
    display: flex;
    gap: 10px;
}

/* Center the text in the "Pay Rate" input field */
.hire-talent-page input#amount {
    text-align: center;
}

/* Other form styling specific to the hire_talent page */
.hire-talent-page input[type="text"],
.hire-talent-page textarea,
.hire-talent-page select {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* Center the "Post Gig" button */
.hire-talent-page form button {
    display: inline-block;
    background-color: rgb(0, 19, 166);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 12px;
}

/* Change the background color on hover */
.hire-talent-page form button:hover {
    background-color: rgb(220, 20, 60);
}

/* Add styles to the pay fields container */
.hire-talent-page .pay-fields {
    display: flex;
}

/* Adjust the width of the currency select box */
.hire-talent-page .pay-fields select {
    width: 90px;
}

/* Adjust the width of the payRateUnit select box */
.hire-talent-page .pay-fields select#payRateUnit {
    width: 110px;
}

.hire-talent-page form input[type="text"],
.hire-talent-page form textarea,
.hire-talent-page form select,
.hire-talent-page form input[type="date"] {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Apply bold font to form labels */
.hire-talent-page form label {
    font-weight: bold;
}

/* Apply a regular font weight to the input fields, textareas, and select elements */
.hire-talent-page input[type="text"],
.hire-talent-page textarea,
.hire-talent-page select {
    font-weight: normal;
}

/* Apply a font size of 13px for form labels and input fields */
.hire-talent-page form label,
.hire-talent-page input[type="text"],
.hire-talent-page textarea,
.hire-talent-page select {
    font-size: 13px;
}

/* Apply a lighter grey color to the specific paragraph */
.hire-talent-page p#location-privacy {
    font-size: 13px;
    color: #999;
}

#post-gig-error-message {
    color: red;
    font-size: 12px;
    margin-bottom: 0px;
}

/* Home Page */

/* Login */

.login-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

#login-header {
    margin-top: 10px;
}

.login-page form {
    text-align: center;
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc; /* Add a border around the form */
    border-radius: 5px; /* Add rounded corners to the border */
}

.login-page .input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-page .input-group input {
    margin: 5px 0;
}

.login-page form button {
    display: block;
    margin: 0 auto;
    margin-bottom: -10px;
}

/* Specific styling for the Login page */
.login-page a {
    text-decoration: none; /* Remove underlines */
    color: rgb(0, 19, 166); /* Set the color */
}

/* Apply styles to input fields in the login page */
.login-page .input-group input {
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 95%;
}

.login-page .input-group input#password {
    margin-bottom: 9px; /* Add margin to create space below the password input */
}

.login-page #error-message {
    color: red;
    display: none;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: -10px;
}

/* Apply the style to the Login button on the Login page */
.login-page button {
    display: inline-block;
    background-color: rgb(0, 19, 166);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-page button:hover {
    background-color: rgb(220, 20, 60);
}

.login-page .navigation-links {
    margin-top: 20px;
    text-align: center;
}

/* Register */

.register-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: left;
    margin-bottom: 40px;
}

.register-page form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc; /* Add a border around the form */
    border-radius: 5px; /* Add rounded corners to the border */
}

.register-page .form-group {
    margin-bottom: 20px;
}

.register-page input[type="text"],
.register-page input[type="email"],
.register-page input[type="password"] {
    width: 95%;
    padding: 10px;
    margin: 0px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.register-page .form-group label {
    font-size: 14px;
}

.register-page .form-group p {
    font-size: 14px;
    color: #000000; /* Color for the message */
}

.register-page .form-group {
    margin-bottom: 20px;
    position: relative;
}

.register-page .password-input-container {
    position: relative;
}

/* Add this in your CSS file (styles.css) */
#show-password-checkbox + label {
    font-size: 11px;
}


.register-page .requirements-label {
    font-size: 14px;
}

.register-page .requirements-list {
    font-size: 14px; /* Adjust the font size as needed */
}

.register-page input[type="checkbox"] {
    margin-right: 5px;
}

.register-page #register-button {
    display: inline-block;
    background-color: rgb(0, 19, 166);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.register-page #register-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.register-page #register-button:disabled:hover {
    background-color: #ccc;
    cursor: not-allowed;
}

.register-page #register-button:hover {
    background-color: rgb(220, 20, 60);
}

.register-page .navigation-links {
    margin-top: 20px;
    text-align: center;
}

.register-page a {
    text-decoration: none; /* Remove underlines */
    color: rgb(0, 19, 166); /* Set the color */
}

/* Registration Success */

.registration-success a {
    text-decoration: none; /* Remove underlines */
    color: rgb(0, 19, 166); /* Set the color */
}