body { font-family: 'Poppins', sans-serif; background: #ffffff; color: #333; margin:0; padding:0; }

/* Navbar */
.navbar { background: linear-gradient(90deg, rgb(220, 73, 73), rgb(25, 21, 142)); }
.navbar-brand { font-weight: 700; font-size: 1.2rem; color: #fff !important; }
.navbar-nav .nav-link { color: #fff !important; font-weight: 500; margin-left: 10px; transition:0.3s; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: #ffc107 !important; }

/* Toggle Button */
.navbar-toggler { border: none; background-color: #f4c430; }
.navbar-toggler:hover { background-color: #e6c500; transform: scale(1.05); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280,0,0,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* Hero */
header {
  background: url('/job_portal/public/images/jobs.jpg') center/cover no-repeat;
  color: #fff;
  padding: 80px 0 160px;
  text-align: center;
  position: relative;
}
header::after {
  content: "";
  position: absolute; top:0; left:0; width:100%; height:100%;
  background: linear-gradient(180deg, rgba(45, 55, 240, 0.85), rgba(237, 67, 67, 0.85));
}
header h1, header p { position: relative; z-index: 1; }
header h1 { font-size: 2rem; font-weight: 700; text-shadow: 2px 2px 8px rgba(0,0,0,0.4); margin-bottom:10px; }
header p { font-size: 1rem; margin: 0; }

/* Sections */
.section { padding: 40px 15px; }
.section h2 { font-weight: 700; margin-bottom: 30px; text-align:center; font-size:1.6rem; }
.cards-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.card-feature { transition: transform 0.3s, box-shadow 0.3s; border: none; border-radius: 1rem; text-align:center; padding:20px; flex: 1 1 280px; max-width: 100%; min-height:250px; display:flex; flex-direction:column; justify-content:flex-start; }
.card-feature:hover { transform: translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.card-feature i { font-size:2.5rem; color:#1f8a70; margin-bottom:15px; }
.card-feature p { flex-grow:1; color:#555; font-size:0.95rem; }

/* Footer */
footer { background:#2c3e50; color:#fff; padding:30px 15px; text-align:left; font-size:0.9rem; }
.footer { background-color: #303030; font-size: 0.85rem; color: #ffffff; padding-top: 3rem; padding-bottom: 1rem; margin-top: 3rem; }
.footer h5 { font-size: 1rem; }
.footer a { color: #ffffff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer hr { border-color: rgba(255,255,255,0.3); }

/* PH Time */
.ph-time { text-align: right; color: #ffffff; }
.ph-time .time-label { font-size: 0.75rem; }
.ph-time .time-value { font-weight: 700; }

/* Login button */
.login-btn { background-color: #f4c430; color: #fff; font-weight:600; border-radius:4px; transition:0.3s; }
.login-btn:hover { background-color: #e6c500; transform:translateY(-2px); }

/* Search input */
.navbar .search-group input#pageSearchInput { width:200px; max-width:100%; transition:0.3s; }
.navbar .search-group input#pageSearchInput:focus { width:300px; }

/* Responsive adjustments */
@media (max-width: 768px) {
  header { padding: 60px 15px; }
  header h1 { font-size: 1.6rem; }
  header p { font-size: 0.95rem; }
  .section { padding: 30px 10px; }
  .card-feature { padding:15px; min-height:200px; }
  .navbar-brand { font-size:1rem; }
}

@media (max-width: 480px) {
  header { padding: 50px 10px; }
  header h1 { font-size: 1.4rem; }
  header p { font-size: 0.9rem; }
  .card-feature { flex:1 1 90%; padding:12px; min-height:180px; }
  .section h2 { font-size:1.4rem; margin-bottom:20px; }
  .ph-time { display:none; }
  .nav-search, .login-btn { width:100%; margin-bottom:5px; }
  .nav-search form { flex-direction:column; gap:5px; }
}
.badge-permanent {
    background-color: #005b15; /* green */
    color: #fff;
}

.badge-cos {
    background-color: #ffc107; /* yellow */
    color: #000;
}

.badge-contractual {
    background-color: #17a2b8; /* blue */
    color: #fff;
}

.badge-joborder {
    background-color: #370999; /* blue */
    color: #fff;
}