/* =========================
   GRID FIX (EQUAL HEIGHT)
========================= */
.department-col {
    display: flex;
}


/* =========================
   CARD
========================= */
.departments-card {
    background: #a7ccd566;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* HOVER */
.departments-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}


/* =========================
   IMAGE
========================= */
.departments-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.departments-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* 🔥 Smart crop (face safe) */
    object-position: 50% 20%;

    transition: 0.5s ease;
}

/* ZOOM */
.departments-card:hover .departments-img img {
    transform: scale(1.08);
}


/* =========================
   CONTENT
========================= */
.departments-info {
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    flex-grow: 1;
}

/* TITLE */
.departments-info h5 {
    font-weight: 600;
    margin-bottom: 8px;
}

/* DESCRIPTION */
.departments-info p {
    color: #777;
    font-size: 14px;
    margin-bottom: 12px;

    min-height: 48px; /* equal height */
}


/* =========================
   BUTTON
========================= */
.btn-view {
    margin-top: auto;

    display: inline-block;
    padding: 10px 22px;

    background: linear-gradient(135deg, #459bc7, #20414b);
    color: #fff;

    border-radius: 30px;
    text-decoration: none;

    transition: 0.3s ease;
}

.btn-view:hover {
    opacity: 0.9;
}


/* =========================
   MOBILE
========================= */
@media (max-width: 768px) {
    .departments-img {
        height: 200px;
    }
}