/* =========================
   HEADER
========================= */

.department-header{

    text-align:center;

    max-width:900px;

    margin:0 auto 70px;
}

.section-tag{

    display:inline-block;

    background:rgba(236,29,37,.1);

    color:var(--accent-red);

    padding:10px 20px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;
}

.department-header h2{

    font-size:clamp(42px,5vw,72px);

    color:var(--primary-blue);

    font-weight:700;

    margin-bottom:20px;
}

.department-header p{

    font-size:20px;

    line-height:1.8;

    color:#5f6782;
}

/* =========================
   GRID
========================= */

.departments-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

/* =========================
   CARD
========================= */

.department-card{

    background:#fff;

    min-height:110px;

    border-radius:24px;

    padding:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    text-decoration:none;

    color:var(--primary-blue);

    font-size:18px;

    font-weight:700;

    line-height:1.5;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

    transition:.35s ease;

    position:relative;

    overflow:hidden;
}

.department-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;

    height:100%;

    background:var(--accent-red);

    transition:.35s ease;
}

.department-card:hover{

    background:var(--primary-blue);

    color:#fff;

    transform:translateY(-8px);
}

.department-card:hover::before{

    width:100%;
    opacity:.15;
}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

    .departments-grid{

        grid-template-columns:repeat(2,1fr);
    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:767px){

    .departments-modern-section{

        padding:70px 20px;
    }

    .department-header p{

        font-size:17px;
    }

    .departments-grid{

        grid-template-columns:1fr;
    }

    .department-card{

        min-height:90px;

        font-size:16px;
    }

}