/* General Styles */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  /* Light gray background */
  color: #333;
  /* Dark gray text */
  margin: 0;
  padding: 0; }

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px; }

/* Navbar Styles */
.navbar {
  background-color: #007bff;
  /* Primary blue color */
  padding: 15px 0; }

.navbar-brand {
  color: white !important;
  font-weight: bold;
  font-size: 1.5em; }

.navbar-brand:hover {
  color: #ddd !important; }

.navbar-nav .nav-link {
  color: white !important;
  margin-left: 15px; }

.navbar-nav .nav-link:hover {
  color: #ddd !important; }

.navbar-toggler {
  border: none; }

.navbar-toggler-icon {
  background-color: white; }

/* Carousel Styles */
#shipCarousel {
  margin-top: 20px; }

.carousel-item img {
  max-height: 500px;
  object-fit: cover;
  /* Ensure images fill the space without distortion */ }

/* Login Options Styles */
.login-options {
  margin-top: 30px; }

.login-options h2 {
  color: #333;
  margin-bottom: 15px; }

.login-options .btn {
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s;
  margin-bottom: 10px;
  /* Add spacing between buttons and text */ }

.login-options .btn-primary {
  background-color: #007bff;
  color: white;
  border: none; }

.login-options .btn-success {
  background-color: #28a745;
  color: white;
  border: none; }

.login-options .btn:hover {
  opacity: 0.8; }

/* Search Bar Styles */
.search-bar {
  margin-top: 20px;
  display: flex; }

.search-bar input[type="text"] {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 70%;
  margin-right: 10px; }

.search-bar button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  /* Prevent button from shrinking */ }

.search-bar button:hover {
  opacity: 0.8; }

/* Featured Jobs Styles */
.job-listing {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px; }

.job-listing h3 {
  font-size: 20px;
  color: #007bff; }

.job-listing p {
  margin: 5px 0; }

/* Footer Styles */
.footer {
  background-color: #343a40;
  /* Dark gray */
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 30px; }

.footer a {
  color: #007bff;
  margin: 0 10px;
  text-decoration: none; }

.footer a:hover {
  color: #fff; }

/* Job Seeker/Employer Dashboard Styles */
.dashboard-container {
  display: flex;
  margin-top: 20px; }

.sidebar {
  width: 25%;
  background-color: #f8f9fa;
  border-right: 1px solid #ddd;
  padding: 20px; }

.sidebar ul {
  list-style: none;
  padding: 0; }

.sidebar li {
  margin-bottom: 10px; }

.sidebar a {
  display: block;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s; }

.sidebar a:hover {
  background-color: #007bff;
  color: white; }

.main-content {
  width: 75%;
  padding: 20px; }

/* Form Styles */
.form-group {
  margin-bottom: 20px; }

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold; }

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px; }

.btn-primary {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s; }

.btn-primary:hover {
  opacity: 0.8; }

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px; }

.table th, .table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: left;
  font-size: 10px;
}

.table th {
  background-color: #f2f2f2;
  font-weight: bold;
  font-size: 10px;}
.table td { /* Style specifically for table data (td) */
  font-size: 10px; /* Adjust the font size as needed */
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px; }


  .navbar-nav {
    text-align: center; }

  .search-bar {
    flex-direction: column; }

  .search-bar input[type="text"] {
    width: 100%;
    margin-bottom: 10px; }

  .dashboard-container {
    flex-direction: column; }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px; }

  .main-content {
    width: 100%; } }