:root {
  --primary:#0057b7;
  --secondary:#e91e63;
  --light:#fff;
  --dark:#1e1e2f;
}

body{
  background:#f9f9f9;
  color:#333;
  line-height:1.6;
}

/* ===== HERO FULL WIDTH ===== */
.hero-full {
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
              url('../images/hero/dept.jpg') center/cover no-repeat;
  color:#fff;
  text-align:center;
  padding:8rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.hero-full h1{
  font-size:3rem;
  margin-bottom:1rem;
}

.hero-full p{
  font-size:1.3rem;
  margin-bottom:2rem;
}

.hero-full .apply-btn{
  font-size:1.2rem;
  padding:12px 30px;
}

/* ===== DEPARTMENT GRID ===== */
.dept-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  margin-top:3rem;
}

.dept-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
  transition:0.3s;
  cursor:pointer;
}

.dept-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}

.dept-card h3{
  color:var(--primary);
  padding:1rem 1rem 0.5rem 1rem;
}

.dept-card p{
  padding:0 1rem 1rem 1rem;
  color:#555;
}

.dept-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .hero-full h1{font-size:2rem;}
  .hero-full p{font-size:1rem;}
  .hero-full .apply-btn{font-size:1rem;padding:10px 25px;}
}