/* ===== RESET ===== */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Segoe UI", Arial, sans-serif; }
body { background:#f7f9fc; color:#222; }
/* ===== NAVBAR ===== */
#navbar {
  background: #001b60;
  color: #fff;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
}
#company-name {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.nav-links a:hover {
  color: #ffc107;
}
.nav-login-btn {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.nav-login-btn:hover {
  background: #fff;
  color: #001b60;
}
.register-button {
  background: #ffc107;
  color: #eceff4;
  font-weight: 700;
  border: 2px solid #fff;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;

}
.register-button:hover {
  background-color: #f8f7f5;
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
}
.hamburger span {
  width: 22px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}
/* ===== LAYOUT ===== */
.page-wrapper {
  display:flex;
  align-items:flex-start;
  gap:28px;
  max-width:1280px;
  margin:0 auto;
  padding:100px 20px 40px; /* room for fixed navbar */
}

/* Sidebar filter container (single scrollable) */
.filters {
  width:300px;
  flex:0 0 300px;
  position:sticky;
  top:90px;
  max-height:calc(100vh - 100px);
  overflow:auto;
  padding:12px;
  z-index:30;
}

/* Individual filter boxes */
.checkbox-container1,
.ship-type1,
.container1 {
  background:#fff;
  border-radius:10px;
  padding:14px;
  border:1px solid #e6e9ee;
  box-shadow:0 6px 18px rgba(6,24,50,0.06);
  margin-bottom:18px;
}
.checkbox-container1 h3, .ship-type1 h3 { font-size:18px; color:#18324a; margin-bottom:8px; }
.checkbox-container1 label, .ship-type1 label { display:block; font-size:14px; margin:8px 0; }

/* Right column (main content) */
.main-content { flex:1 1 auto; min-width:0; }
.Job-container1 h2 { text-align:center; color:#0c2972; margin-bottom:18px; }

/* Job card styling */
.job-card1 {
  background:#f4f8f4;
  border:1px solid #cce3d3;
  padding:16px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  margin-bottom:18px;
}
.job-card1 h3 { color:#001b60; margin-bottom:8px; }
.job-card1 p { margin:4px 0; }
.job-card1 button { background:#0c6304; color:#fff; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; margin-top:10px; }

/* ===== MODAL ===== */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; z-index:2000; }
.modal.open { display:flex; }
.modal-content { background:#fff; padding:20px; width:90%; max-width:400px; border-radius:10px; position:relative; }
.close-modal { position:absolute; top:10px; right:12px; background:transparent; border:0; font-size:22px; cursor:pointer; }

/* ===== RESPONSIVE ===== */
@media (max-width:900px) {
  .page-wrapper { flex-direction:column; padding:80px 12px; }
  .filters { position:static; width:auto; max-height:none; overflow:visible; padding:0; }
  .checkbox-container1, .ship-type1, .container1 { margin-bottom:12px; }
  .hamburger { display:flex; }
  .nav-links { display:none; flex-direction:column; background:#001b60; position:absolute; top:60px; left:0; width:100%; padding:20px; }
  .nav-links.active { display:flex; }
}
/* -------- Sidebar: single page scrollbar  -------- */
.page-wrapper { 
  display: flex;
  align-items: flex-start;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 20px 40px; /* room for fixed navbar */
}

/* Left filters column: DON'T scroll internally — page scrolls instead */
.filters {
  width: 320px;          /* a bit wider so date inputs look good */
  flex: 0 0 320px;
  position: sticky;      /* keeps the column pinned to top while you scroll the page */
  top: 90px;
  /* Remove internal scrollbar: allow it to grow and use the page scrollbar */
  max-height: none !important;
  overflow: visible !important;
  padding: 12px;
  z-index: 30;
}

/* Make each filter box fill the left column */
.checkbox-container1,
.ship-type1,
.container1 {
  width: 100%;           /* take full sidebar width */
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  border: 1px solid #e6e9ee;
  box-shadow: 0 6px 18px rgba(6,24,50,0.06);
  margin-bottom: 18px;
  box-sizing: border-box;
}

/* headings / labels inside filters */
.checkbox-container1 h3,
.ship-type1 h3 {
  font-size: 18px;
  color: #18324a;
  margin-bottom: 8px;
}
.checkbox-container1 label,
.ship-type1 label {
  display: block;
  font-size: 14px;
  margin: 8px 0;
}

/* container1 form elements (match visual style of other boxes) */
.container1 label {
  display: block;
  font-weight: 600;
  color: #18324a;
  margin: 10px 0 6px;
  font-size: 14px;
}
.container1 select,
.container1 input[type="text"],
.container1 input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d8dce3;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  outline: none;
  box-shadow: none;
}
.container1 .date-container {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.container1 .date-container input[type="date"] {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
}

/* action buttons inline row with subtle ghost style (as you asked earlier) */
.container1 .buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}
.container1 .search-btn {
  background: #190246;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.container1 .clear-btn {
  background: transparent;
  color: #333;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #d8dce3;
  cursor: pointer;
}

/* keep good responsive behavior */
@media (max-width: 900px) {
  .page-wrapper { flex-direction: column; padding: 80px 12px; }
  .filters { position: static; width: auto; flex: none; padding: 0; }
  .checkbox-container1, .ship-type1, .container1 { margin-bottom: 12px; }
}

/* small visual polish for select caret spacing */
.container1 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 28px; }

/*pagination style*/

.pagination-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f9f9f9;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.pagination-container button {
  padding: 8px 14px;
  border: none;
  background:#190246;
  color: white;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.pagination-container button:hover {
  background-color: #1e0353;
  color: #fff;
  transform: translateY(-1px);
}

.pagination-container button.active-page {
  background-color: #007bff;
  color: #fff;
  font-weight: bold;
}

.pagination-container button:disabled {
  background-color: #e0e0e0;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

#pageNumber {
  font-weight: 500;
  color: #555;
  font-size: 15px;
  padding: 0 6px;
}
/* Start Date label + date inputs formatting */
.container1 label[for="start-date-from"],
.container1 label[for="start-date-to"],
.container1 label:has(+ .date-container) {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #23334a;
}

/* Date input row */
.container1 .date-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
}

/* Make both date inputs equal width and stay on same line */
.container1 .date-container input[type="date"] {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #d7dee3;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

/* Responsive: stack on small screens */
@media (max-width: 520px) {
  .container1 .date-container {
    flex-direction: column;
    gap: 8px;
  }
}

/* ---------- MODAL (mobile login) ---------- */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1500;align-items:center;justify-content:center}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:12px;padding:20px;width:92%;max-width:360px;position:relative;box-shadow:0 12px 30px rgba(0,0,0,0.25)}
.modal-close{position:absolute;top:10px;right:12px;background:transparent;border:0;font-size:22px;cursor:pointer}

/* small utility */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------- RESPONSVIE RULES ---------- */
@media (max-width:1000px){
  .hero-inner{flex-direction:column;align-items:center}
  .hero-text{text-align:center}
  .form-container{order:3;width:95%;max-width:420px;margin-top:16px}
  .login-btn-mobile{display:inline-block}
}

@media (max-width:768px){
  .nav-links{display:none}
  .hamburger{display:block}
  .hero-text h1{font-size:2.2rem}
  .search-card{flex-direction:column;align-items:stretch}
  .search-button{width:100%}
  .career-grid{flex-direction:column;align-items:center}
}

@media (max-width:480px){
  .hero-text h1{font-size:1.6rem}
  .lead{font-size:0.95rem}
  .container{padding:0 12px}
}
/* ===== LOGIN MODAL ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
  text-align: center;
}
.close-modal {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
}
.modal.open {
  display: flex;
}
.login-form input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.login-form .submit {
  background: #003580;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background: #001b60;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 20px;
  }
  .nav-links.active {
    display: flex;
  }
  .hamburger {
    display: flex;
  }
  .hero-content h1 {
    font-size: 3rem;
  }
  .search-container {
    width: 95%;
    flex-direction: column;
  }
}