*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Segoe UI, Tahoma, sans-serif;
}

body{
  background:#f3f4f6;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background:#ffffff;
  padding:16px 30px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.container{
  max-width:1200px;
  margin:auto;
  padding:30px 20px;
}

.main-heading{
  font-size:2rem;
  margin-bottom:30px;
  color:#111827;
}

/* FILTER CARDS */
.job-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-bottom:35px;
}

.filter-card{
  background:#ffffff;
  padding:22px;
  border-radius:18px;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  transition:.3s;
}

.filter-card:hover{
  transform:translateY(-6px);
}

.filter-card.active{
  border:2px solid #4f46e5;
  background:#eef2ff;
}

.filter-card i{
  font-size:32px;
  color:#4f46e5;
  margin-bottom:10px;
}

.filter-card h3{
  margin-bottom:6px;
  color:#111827;
}

.filter-card p{
  font-size:14px;
  color:#6b7280;
}

/* SEO */
.seo-content{
  margin-bottom:30px;
}

.seo-content h2{
  font-size:1.4rem;
  margin-bottom:8px;
}

/* JOB CARD */
.job-card{
  background:#ffffff;
  padding:22px;
  border-radius:16px;
  margin-bottom:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.07);
}

.job-card h3{
  margin-bottom:8px;
}

.job-card p{
  font-size:14px;
  margin-bottom:6px;
}

.btn{
  padding:10px 14px;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.btn-primary{
  background:#4f46e5;
  color:#ffffff;
}

.btn-outline{
  border:1px solid #4f46e5;
  background:#ffffff;
  color:#4f46e5;
}

/* MODAL */
.modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0.55);
  z-index:99999;
  justify-content:center;
  align-items:center;
}


.modal-box{
  background:#ffffff;
  padding:25px;
  width:100%;
  max-width:400px;
  border-radius:16px;
  position:relative;
  pointer-events:auto;
}

.modal-box input{
  width:100%;
  padding:10px;
  margin-bottom:12px;
  border-radius:8px;
  border:1px solid #d1d5db;
}

.modal-box button{
  width:100%;
  padding:12px;
  background:#4f46e5;
  color:#fff;
  border:none;
  border-radius:10px;
}

.close-btn{
  position:absolute;
  top:10px;
  right:15px;
  font-size:22px;
  cursor:pointer;
}
/* ================================
   APPLY JOB CARD UI
================================ */

.apply-card {
  padding: 20px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}

.job-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.job-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.posted-date {
  font-size: 13px;
  color: #6b7280;
}

.job-card-body p {
  margin: 6px 0;
  font-size: 14px;
  color: #374151;
}

.job-desc {
  margin-top: 10px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

.job-card-footer {
  margin-top: 16px;
  text-align: right;
}