.departments {
padding: 50px 0 60px;
background: var(--bg);
position: relative;
}
.departments .container{
display: flex;
flex-direction: column;
gap: 58px;
}
.dept-bg-img {
content: '';
position: absolute;
inset: 0 0 0 0;
height: 154px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-color: var(--bg-soft);
pointer-events: none;
z-index: 0;
}
.section-title {
position: relative;
z-index: 1;
text-align: center;
font-size: 32px;
font-weight: 700;
line-height: 40px;
color: var(--primary);
margin-bottom: 30px;
}
.department-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 16px;
max-width: 410px;
height:auto;
margin: 0 auto;
}
.dept-card {
height: auto;
width: 100%;
border-radius: 12px;
overflow: hidden;
position: relative;
transition: transform 0.3s ease-out;
}
.dept-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dept-icon .overlay::before{
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to top,rgb(0, 0, 0,0.7)0% ,rgba(255, 255, 255, 0.1)60%  ,rgba(255, 255, 255, 0)100% , transparent);
}
.dept-card:hover{
cursor: pointer;
transform: translateY(-8px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}
.dept-card h3 {
padding: 18px 20px 22px;
bottom: -16px;
font-size: 24px;
font-weight: 700;
color: var(--white);
line-height: 32px;
position: absolute;
z-index: 3;
} @media (max-width: 767px) {
.department-grid {
display: flex;
flex-direction: column;
max-width: 100%;
}
.dept-card h3{
bottom: 3px;
}
} @media (min-width: 768px) and (max-width: 1279px) { .departments {
padding: 60px 0 70px;
}
.section-title {
font-size: 28px;
margin-bottom: 40px;
}
.department-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: none;
padding: 20px;
margin: 0;
}
.dept-card{
height: 400px;
}
.dept-card  img{
height: 400px;
}
.dept-card h3 {
padding: 20px 24px 26px;
font-size: 20px;
}
} @media (min-width: 1280px) {
.container {
padding: 0 60px;
}
.section-title {
font-size: 32px;
margin-bottom: 50px;
line-height: 48px;
}
.department-grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: none;
margin: 0;
}
.dept-card{
height: 400px;
}
.dept-icon img{
height: 400px;
}
.dept-card h3 {
padding: 24px 28px 28px;
font-size: 24px;
}
}